Anna: Total Verwirrung... wie fange ich am besten an?

Halli und Hallo,

ich habe mich in den letzten Tagen intensiv mit SELFHTML beschäftigt und bin nun total verwirrt und weiss nicht, wie ich meine Seite am besten aufbauen soll. Vielleicht kann mir jemand aus meiner Verwirrung helfen. Ich würde mich kugeln vor Freude!!!

Ich beschreib einfach mal was ich mir so vorstelle

  1. eine hauptseite mit 4-5 Text-Verweisen und

  2. viele (sehr viele) kleine Grafiken die als Verweise dienen
    -> habs dank Forumhilfe probiert die Grafiken mit "position" anzuordnen- klappt prima, hab aber gelesen "position" nicht unbedingt verwenden" ?! inwiefern könnte es da Probleme geben?

  3. zu jeder Grafik per Verweis noch eine Seite mit Text
    -> das könnten ne Menge Verweise werden.. gibts da dann irgendwann ne Grenze oder Schwierigkeiten beim Laden etc.?

So wie ich das bis jetzt verstanden habe, baue ich das Ganze mit CSS in html? Und positioniere die ganzen Verweise auch mit CSS?

Habe nur sehr oft gelesen, das dieses und jenes mit diesem und jenen Browser etc. nicht funktioniert und weiss nun gar nicht, wie ich anfangen soll.

Wahrscheinlich hört sich das Ganze hier genauso verwirrt an wie ich es bin... aber vielleicht steigt ja trotzdem jemand durch ;)

Würde mich echt freuen. Merci,

Anna

  1. Halli und Hallo,

    ich habe mich in den letzten Tagen intensiv mit SELFHTML beschäftigt [...]

    Das freut mich :)

    1. eine hauptseite mit 4-5 Text-Verweisen und

    Ok

    1. viele (sehr viele) kleine Grafiken die als Verweise dienen
      -> habs dank Forumhilfe probiert die Grafiken mit "position" anzuordnen- klappt prima, hab aber gelesen "position" nicht unbedingt verwenden" ?! inwiefern könnte es da Probleme geben?

    ich denke mal das wenn dies oder jenes mit position positionierst dann bleibt die grafik/text was auch immer Statisch an diesem Punkt.
    Da könnten natürlich problem bei anderen auflösung auftreten.

    1. zu jeder Grafik per Verweis noch eine Seite mit Text
      -> das könnten ne Menge Verweise werden.. gibts da dann irgendwann ne Grenze oder Schwierigkeiten beim Laden etc.?

    Jein, solange die keine 1000*1000px Grafiken nutzt wohl nicht.
    Aber ich würde die ganzen Pics mit JavaScript vorladen. Also das bedeutet das erst die Links angezeigt werden wenn die Seite wirklich komplett geladen wurde.

    So wie ich das bis jetzt verstanden habe, baue ich das Ganze mit CSS in html? Und positioniere die ganzen Verweise auch mit CSS?

    Ja, am besten mit einem veränderten <ul><li>.

    Habe nur sehr oft gelesen, das dieses und jenes mit diesem und jenen Browser etc. nicht funktioniert und weiss nun gar nicht, wie ich anfangen soll.

    naja, ich merke mir auch nicht alles, habe aber immer den IE6 und FireFox offen, dann sieht man schon wer nicht mit dem einen oder anderen "CSS" zuweisungen zurecht kommt, dann mach ich mich auf die suche nach einer lösung.
    Du wirst aber sehr schnell merken das der IE sehr viele macken hat, bzw. was anderes macht als der FireFox.... das ist immer sehr Spannend ;)

    Wahrscheinlich hört sich das Ganze hier genauso verwirrt an wie ich es bin... aber vielleicht steigt ja trotzdem jemand durch ;)

    Nein, verwirrt hört sich das nicht an, ich verstehe nur nicht genau wo das problem liegt.....
    Am besten, einfach anfangen, alles andere ergibt sich dann schon.. glaube mir ;=)

  2. Hello Anna,

    1. viele (sehr viele) kleine Grafiken die als Verweise dienen
      -> habs dank Forumhilfe probiert die Grafiken mit "position" anzuordnen- klappt prima, hab aber gelesen "position" nicht unbedingt verwenden" ?! inwiefern könnte es da Probleme geben?

    Sehr viele kleine Grafiken können tatsächlich ein Problem darstellen.
    Eine einzige große Grafik wird bei heutigen Leitungsgeschwinidkeiten, wenn sie auch noch vernünftig komprimiert ist, relativ schnell geladen.
    Viele kleine Grafiken benötigen jede für sich einen eigenen Request. Jeder wird in der Praxis mindestens 50ms verschlingen, eher 150ms bis zur erfolgten Antwort.

    Die Übertragungszeit und "Denkzeit" des Browsers kommen dazu.

    Beispiele:

    eine große Grafik       http://annerschbarrich.de/harzkarten/grossraum_x2.html
      viele kleine Grafiken   http://harzzeitung.de/maps/showmap.php

    Geschenkübliche Browser verarbeiten immer nur zwei Requests zum selben Host gleichzeitig, selbst, wenn man sie aus unterscheidlichen Fenstern heraus auslöst. Die Requests müssen also, auch bei einer schnellen DSL-Leitung, nacheinander abgehandelt werden. das dauert dann.

    Harzliche Grüße vom Berg
    http://www.annerschbarrich.de

    Tom

    --
    Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
    Nur selber lernen macht schlau

    1. Hi Tom,

      erstmal Gracias! Hhm, ich habs ja schon fast befürchtet. Ist es dann schlauer, eine grosse Hintergrundgrafik zu machen und schriftliche Links über die einzelnen Elemente zu legen? Wie kann ich die denn dann positionieren?

      Wären die vielen Verweisseiten hinter den Grafiken denn ein Problem?

      Sonnige Grüße aus Hamburg,

      Anna

      1. Hello,

        erstmal Gracias! Hhm, ich habs ja schon fast befürchtet. Ist es dann schlauer, eine grosse Hintergrundgrafik zu machen und schriftliche Links über die einzelnen Elemente zu legen? Wie kann ich die denn dann positionieren?

        Mein Beispiel ist natürlich etwas drastisch, aber sonst sieht man den Unterschied ja nicht!
        1.5MByte für die große Grafik sind aber bei einer DSL-Leitung x-mal schneller da, als sie 306 Einzelgrafiken mit je ca. 4.200 Bytes.

        Deine Hintergrundgrafik sollte aber nicht mehr als 50kByte haben. Denk auch an die ISDN- oder Modemnutzer, sowie die Leute, die heute mit 'nem PDA beim WLAN-Café sitzen :-)

        Über die Hintgergrundgrafik kannst Du dann eine MAP legen
        http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=map
        http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=map

        Wären die vielen Verweisseiten hinter den Grafiken denn ein Problem?

        Die werden doch erst dann aufgerufen, wenn man den Link aktiviert, oder?
        Das wäre mMn dann sogar gutes logisches Design: Halte die Inhalte kompakt und überschaubar und mach lieber drei kleine Seiten mehr, als eine große vollgestopfte...

        Harzliche Grüße vom Berg
        http://www.annerschbarrich.de

        Tom

        --
        Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
        Nur selber lernen macht schlau

        1. Hi Hi Tom,

          der Anfängerfragen nicht genug. Sorry! ;)

          Über die Hintgergrundgrafik kannst Du dann eine MAP legen
          http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=map
          http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=map

          Habs mir angeschaut- wäre sehr klasse wenn meine Hintergrundgrafik schon Texte enthalten würde... wie in dem Beispiel die Städtenamen. Doch leider ist das nicht der Fall :(

          Die Verweisbezeichnungen würde ich gerne über die Grafik legen und einzeln positionieren. Kann ich das auch mit map machen?

          Grüße aus Hamburg,

          Anna

          1. Hello,

            Die Verweisbezeichnungen würde ich gerne über die Grafik legen und einzeln positionieren. Kann ich das auch mit map machen?

            Das solltest Du mittels CSS und

            position:absolute;

            machen.

            Harzliche Grüße vom Berg
            http://www.annerschbarrich.de

            Tom

            --
            Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
            Nur selber lernen macht schlau

            1. Die Verweisbezeichnungen würde ich gerne über die Grafik legen und einzeln positionieren. Kann ich das auch mit map machen?

              Das solltest Du mittels CSS und

              position:absolute;

              machen.

              Nein, am besten die Texte in die Grafik reinmalen. Die Grafik, die die Seitendarstellung enthält, in der Größe 1280x1024, kleinere Bildschirme gibt es sowieso nicht mehr. Die Grafik muss mit CSS eingebunden werden, denn das ist aktuell, keine Sau benutzt mehr das veraltete HTML.
              Vor dieser Seite muss unbedingt eine "Willkommen auf meinen Seiten-Hier-klicken"-Seite (der Text wird mit Javascript ausgegeben, am besten blinkend in rosa auf gelb-grün-gemustertem Hintergrund) mit dem kleinen Hinweis (5 Pixel hohe Schrift kann jeder lesen und nimmt keinen Platz weg) "Diese Seiten sind optimiert für meinen Browser bei 1280x1024 mit 32 Bit und Java-Flash!!1".

              Dann haben wir eine richtige Anfängerseite - in der so ziemlich alle Fehler gemacht wurden, die Anfänger (und Profis) machen.

              Ernsthaft: Dass ausgerechnet in diesem, für seine Pingeligkeit verschrienen Forum auf Basis nichtssagender Hinweise ("viele Verweise, jeder Verweis mit Grafik", das ist so ziemlich das Gleiche wie "eine Webseite") konkrete Umsetzungsratschläge gegeben werden, und dann auch noch der Kardinalfehler schlechthin, die Seite in eine einzige Grafik zu betonieren, ist schon beinahe surreal.

              Um eine Webseite zu gestalten, braucht man ein Konzept, und das Konzept ergibt sich aus dem darzustellen Inhalt bzw. dem Zweck. Zweck und Konzept wird hier einfach über Bord gekippt und gleich mit der Seite begonnen. Es wurde nichtmal gefragt, ob die "vielen Verweis-Grafiken" eventuell alle dasselbe darstellen und wie sie angeordnet werden sollen, vom Anreißen der Stichwörter Barrierefreiheit und Browserkompatibilität ganz zu schweigen (obwohl nach zumindest letzterem gefragt wurde).

              Mag sein, dass die Monstergrafik hier tatsächlich sinnvoll ist (vielleicht soll's ja eine Weltkarte mit Reisezielen werden), aber so, wie sie zustande gekommen ist, nämlich gänzlich ohne Hintergedanken, würde ich sagen: schlecht beraten.

              Ute

              1. Ernsthaft: Dass ausgerechnet in diesem, für seine Pingeligkeit verschrienen Forum ....

                Wo erzählt man sich denn sowas?

                Struppi.

                --
                Javascript ist toll (Perl auch!)
              2. Hello Ute,

                Um eine Webseite zu gestalten, braucht man ein Konzept,

                Mag sein, dass die Monstergrafik hier tatsächlich sinnvoll ist (vielleicht soll's ja eine Weltkarte mit Reisezielen werden), aber so, wie sie zustande gekommen ist, nämlich gänzlich ohne Hintergedanken, würde ich sagen: schlecht beraten.

                Nun wäe es an Dir, die passenden Fragen zu stellen.
                Ich kann aber keine finden.

                Deine Kritik wäre sicherlich berechtigt, wenn Anna auf der Grundlage des einfachen Beispiels für den Unterschied zwischen Ladezeit eines großen Bildes zur Ladezeit vieler kleiner gleich ein CMS aufbauen würde.

                Also stelle doch bitte Deine Fragen an Anna.

                Harzliche Grüße vom Berg
                http://www.annerschbarrich.de

                Tom

                --
                Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
                Nur selber lernen macht schlau

                1. Um eine Webseite zu gestalten, braucht man ein Konzept,

                  aber so, wie sie zustande gekommen ist, nämlich gänzlich ohne Hintergedanken, würde ich sagen: schlecht beraten.

                  Nun wäe es an Dir, die passenden Fragen zu stellen.
                  Ich kann aber keine finden.

                  Lustig, dass du den bzw. einen der bemängelten Punkte zwar zitieren, aber daraus nicht selbständig die Frage entwickeln konntest. Auch ansonsten bin ich der Meinung, mich (nach meiner Eingangspolemik) deutlich genug ausgedrückt zu haben (ist "auf Basis nichtssagender Hinweise" so schwer zu verstehen?) und dass eine Mängelaufführung im Allgemeinen nicht unbedingt mit Fragezeichen enden muss.

                  Also stelle doch bitte Deine Fragen an Anna.

                  Meine Kritik richtete sich an dich, denn ich hätte von dir weitaus mehr Umsicht erwartet.

                  Ute

                  1. Hello,

                    Meine Kritik richtete sich an dich, denn ich hätte von dir weitaus mehr Umsicht erwartet.

                    Ute

                    Du bist jetzt aber keine "Steffi-Ute"? Oder?
                    Dann musst Du jetzt bitte nicht muckeln, nur weil ich Dich mal angeschossen habe.

                    Ich finde, dass ich die gestellte Frage nach vielen (sehr vielen) kleinen Grafikdateien im ersten Schritt gut beantwortet habe. Ich habe mir Mühe gegeben, und sogar ein Praxisbeispiel beigesteuert, damit es nicht beim "theoretischen Geschwafel" bleibt.

                    Harzliche Grüße vom Berg
                    http://www.annerschbarrich.de

                    Tom

                    --
                    Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
                    Nur selber lernen macht schlau

      2. Hallo,

        Ist es dann schlauer, eine grosse Hintergrundgrafik zu machen und schriftliche Links über die einzelnen Elemente zu legen? Wie kann ich die denn dann positionieren?

        Genauso, wie Du es jetzt machst.

        Wären die vielen Verweisseiten hinter den Grafiken denn ein Problem?

        Die Seiten hinter den Verweisen sind kein Problem.

        Links (<a href="eineWebseite.html">linktext</a>) sind wie GrafikREFERENZEN (<img src="einBild.jpg">) ein Zeiger auf etwas außerhalb der Html-Seite.

        Ein Link zeigt (meist) auf ein anderes Html-Dokument, eine Grafikreferenz zeigt auf eine binäre Datei, die ein Bild darstellt.

        Während das Ziel der Grafikreferenz aber gleich beim Aufruf der Seite geladen und als Bild angezeigt wird, wird das Ziel des Links nur geladen und angezeigt (als neue Html-Seite), wenn der Benutzer auf den Link klickt.

        Bis dahin hat der Browser keine Ahnung, was sich hinter dem Verweis verbirgt und er lädt auch nichts im voraus. selbst das Laden von tausenden (nichtgrafischen!) Links dauert vermutlich kürzer als eine mittelgroße Grafik.

        Gruß, der Arbeitslose

  3. Hallo,

    1. eine hauptseite mit 4-5 Text-Verweisen und

    Das ist nicht gerade eine genaue Beschreibung, fast jede Webseite, die ich kenne, hat Text und Verweise... Willst Du so etwas wie eine Übersichtsseite haben (Bitte auf KEINEN FALL den Quelltext beachten, ist vollkommener Mist, nur als visuelles Beispiel gedacht)? Kennst Du Webseiten, die den von Dir geplanten Aufbau haben?

    1. viele (sehr viele) kleine Grafiken die als Verweise dienen
      -> habs dank Forumhilfe probiert die Grafiken mit "position" anzuordnen- klappt prima, hab aber gelesen "position" nicht unbedingt verwenden" ?! inwiefern könnte es da Probleme geben?

    Positionierung mit css ist im Prinzip ok (css ist überhaupt allgemein unproblematischer als zum Beispiel javascripte oder Fehler im Html), es geht wohl darum, das Du nicht alles absolut positionieren solltest, weil sich die Anzeigegeräte unterscheiden und was auf dem einen Bildschirm in der Mitte erscheint, ist (zum Beispiel) auf dem anderen (kleineren) unten rechts, auf dem dritten (sehr großen) eher oben links. Wenn Du stattdessen zum Beispiel mit margin und padding arbeitest, passen sich die Seitenelemente der Bildschirmgröße an, das Layout "fliesst".

    Wenn ich Dich aber richtig verstanden habe, willst Du so etwas wie eine Image map haben.

    1. zu jeder Grafik per Verweis noch eine Seite mit Text
      -> das könnten ne Menge Verweise werden.. gibts da dann irgendwann ne Grenze oder Schwierigkeiten beim Laden etc.?

    Je größer die Grafik, desto mehr Ladezeit natürlich. Und viele kleine Grafiken, die zusammen genauso groß sind, wie eine große, laden auch noch einmal ein bisschen länger, weil für jede ein eigener Request stattfindet, wie Tom das bereits gesagt hat (Wie das genau funktioniert weiß ich übrigens auch nicht)

    Es gibt da einen "Trick", man packt die ganzen kleinen Grafiken nebeneinander in eine große (meist mit transparentem Hintergrund). Dann hat man nur einen Request für eine Grafik.
    Man nimmt diese dann mit css als Hintergrund (background-image) für den Link und setzt die Position (background-position). das ist aber für Anfänger nicht ganz einfach zu bewerkstelligen.

    So wie ich das bis jetzt verstanden habe, baue ich das Ganze mit CSS in html? Und positioniere die ganzen Verweise auch mit CSS?

    Kommt auf den Zweck an, siehe unten. Vielleicht kommst Du mit reinem Html aus.

    Habe nur sehr oft gelesen, das dieses und jenes mit diesem und jenen Browser etc. nicht funktioniert und weiss nun gar nicht, wie ich anfangen soll.

    Ach, vergiß das ruhig erstmal, das verwirrt doch nur bei der ersten Seite. Wenn Du es so machst, wie in Selfhtml beschrieben, ist die Wahrscheinlichkeit groß, es gleich richtig zu machen. Nicht alles auf einmal (Obwohl diese Einstellung grundsätzlich gut ist)

    (...)und das Konzept ergibt sich aus dem darzustellen Inhalt bzw. dem Zweck. Zweck und Konzept wird hier einfach über Bord gekippt und gleich mit der Seite begonnen

    Hier muß ich der Grafikgeplagten zustimmen. ZWECK. Was möchtest Du eigentlich haben? Versuche mal, ein Wort dafür zu finden. Darf ruhig drei Wochen oder länger dauern, drüber nachzudenken, es lohnt sich. Wenn Du ein Wort hast, hast Du einen Plan.

    Gruß, der Arbeitslose