PEPP-Berlin e.V. Partner für Wissenschaft, Bildung und Kultur 

 

Navigation 2


 
Spalte 1 - Text 1
Beliebig langer Text. Hier stehen einige Zeilen, welche Sie hervorstellen möchten. Vielleicht in Verbindung mit einem Link für z.b. Ihre News.

Etwas Fülltext: Ne jugez plus de jamais un Webseite, si vous ne considérez ceux-ci qu'avec une dimension d'écran. La valeur vraie vous reconnaissez une bonne construction, si vous expérimentez un Homepage lors de différentes dissolutions.


 

Spalte 1 - Text 2
Auch hier gilt: Ihr Text an dieser Stelle kann länger oder kürzer sein als im Beispiel.

Noch etwas zu den Menüs: Was dem Anfänger vielleicht nicht auf den ersten Blick auffällt, hier wurden vier! versch. Menüs definiert, um den unterschiedlichen Linkzuständen und Schriftgrössen genüge zu tragen. Das sind das 1. Menü oben, 2. das Menü links sowie 3. die Links im Hauptext sowie 4. die Links im Spaltentext der Spalten eins und drei.


 
 
 

Mental Health

Das Layout

Ein Farbverlauf in´s Weisse hinein. Dardurch wirkt das Weiss etwas wärmer und andersfarbig - obwohl es nach wie vor reines Weiss ist.

Die Techniker

Seite ohne Frames.

Die Breite der einzelnen Spalten ist veränderbar. Im Moment erhält die linke Spalte 200 Pixel und die rechte Spalte 160 Pixel, dabei bekommt die mittlere Inhaltsspalte 100 %, also den Rest der Bildschirmbreite.

Die Anzahl der Text-Abschnitte in Spalte 1 (hier zwei: Text1 und Text2) bzw. den Inhalt der Spalte 3 können Sie natürlich selbst bestimmen, sprich mehr oder weniger. Und zwar durch Kopieren oder Löschen.

Ein Highlight ist hier die Absatzformatierung in Spalte 1 und 3, nämlich als Blocksatz formatiert (gleiche Ausrichtung der Schrift an linker und rechter Kante), insbesondere weil in der linken Spalte 1 oben beim Spruch und der Navigation der Blocksatz wieder aufgehoben wird und diese innerhalb der gleichen Spalte linksbündig angeordnet sind.

(Hört sich kompliziert an - ich weiss - Hier nochmal kurz: In Spalte 1 ist der Inhalt sowohl teils als Blocksatz als auch teils als linksbündiger Text erstellt).

Oben ist Platz für Logo, Banner oder Homepagename. Alternativ kann ein Logo auch links oben stehen statt "Ihr Spruch".
Die Fusszeile 1 ist unten mittig angeordnet (Adresse oder sonstiger Text) , die Fusszeile 2 gleich darunter, sprich eine Etage tiefer ist rechtsbündig angeordnet (für die Webseite-URL oder sonstiger Text) als einfacher Text einzutragen.

Oben rechts steht das aktuelle Datum und Zeit (bei aktiviertem JavaScript in Ihrem Browser) - sonst nicht zu sehen und daher auch nicht störend.

Anlegen von Links bzw. HTML-Seiten:
Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.
Wie üblich mit ausgelagerter -da einfacher und übersichtlicher- CSS-und JavaScript-Datei.

Version 2: Wenn Sie den Inhaltstext auch als Blocksatz wünschen, so wählen Sie die Version index2.html

Die Navigation

Textlinks.
Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.

1. Menü links:

Beliebig viele Links.
Es können beliebig Links untereinander erstellt werden. Oder sogar auch beliebig viele Rubriken (z.b Navigation 3 und Navigation 4), wenn Sie dieses als Fortgeschrittener bewerkstelligen können.

2. Menü oben: Die Buttons verbreitern sich automatisch bei längeren Linkwörtern.

Ca. 4-5 Textlinks je nach Linklänge. (Damit das Menü auch noch bei der kleinsten Monitorauflösung von 800x600 Pixel gut aussieht).

3. So sehen die allgemeinen Links (Links im Text) zur Zeit aus: Beispiel-Link (Fahre mit der Maus über den Link)

Die Auflösung

Anhand dieser Vorlage erkennen wir wieder sehr schön die hier gewählte automatische Bildschirmanpassung.
Die beiden Spalten links und rechts haben von mir 200 und 160 Pixel bekommen. Die mittlere Inhaltspalte nimmt sich immer 100 Prozent, d.h. den Rest der Bildschirmfläche. Gerne können Sie auch andere Werte einstellen, für mich war es so der beste Kompromiss um beiden Auflösungen gerecht zu werden.

Diese Auflösungsfotos zeigen auch sehr schön den Platzbedarf, der in der Breite zur Verfügung steht.

800x600
800x600

1024x768
1024x768 o. höher

Spalte 3
Hier steht Ihr beliebig langer oder kurzer Text. Oder auch Grafiken. Etwas Fülltext: Un Webseite devrait toujours être conçu pour différentes dissolutions de moniteur (800x600 et 1024x768), puisqu'on ne peut pas savoir, avec quel moniteur un utilisateur le côté ansurft et/ou quelles dissolution des utilisateurs sur son écran a organisé.

Ne jugez plus de jamais un Webseite, si vous ne considérez ceux-ci qu'avec une dimension d'écran (cela ne vaut pas seulement pour mes présentations mais généralement). La valeur vraie vous reconnaissez une bonne construction, si vous expérimentez un Homepage lors de différentes dissolutions. Sûrement on comme Webdesigner doit toujours accepter un petit compromis avec la conception, veut satisfaire les deux dissolutions.

Mais trouver justement, le bon Webdesign constitue ce compromis. Fréquemment, on trouve une indication comme « ces côtés est optimisé de dissolution de 1024x768 et d'Internet Explorer sur des Webseiten. » Cela ne doit rien faire avec des Webdesign, mais montre que le Webmaster correspondant ne s'est pas fait de souci et/ou qu'il s'est rendu très simple.
Hier steht Ihre Fusszeile für z.b. Ihre Adresse
www.ihre-webseiten-url.de