 Ut accumsan scelerisque felis. Proin at mauris vel tortor lacinia volutpat. Quisque vehicula metus a massa. Curabitur ut dolor nec nunc tempus sagittis.
Yesterday.
Vestibulum velit nunc, hendrerit ac, semper id, lobortis sit amet, velit. In a nunc.
Today.
Vivamus varius justo. Nunc pretium congue massa. In placerat.
Next Day.
Nam eros sem, fermentum in, tincidunt sit amet, fringilla vitae, risus.
Platz für Ihre Fotos. Hier Bildunterschrift.
Platz für Fotos, Werbung oder Logo
Natürlich dürfen Sie auch diese beiden Grafiken unter Example für Ihre Zwecke verwenden. Einfach im Grafikprogamm beschriften.
|
Das Layout
Dieses Design heisst: State of flow.
Beschriften Sie doch im Grafikprogramm die Grafik "header01.jpg" oder "header02.jpg" mit Ihrem Logo oder sonstigen Foto und ersetzen damit die Grafik "header_beispiel.jpg". Auch die kleinen Fotos innerhalb des Textes könnten Sie natürlich auch durch Ihre Fotos ersetzen. Wie Sie sehen, legt sich der Inhaltstext immer um diese Bilder herum. Diesbezügliche Abstände zum Text, Farbe und Breite der Rahmen stellen Sie in der Datei format.css ein, bei ".img_links". Breite und Höhe der Bilder werden in der HTML-Datei definiert..
Die Technik
Anlegen von Links bzw. HTML-Seiten wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern. Seite ohne Frames. Etwas Beispiel Füll Text. Maecenas a nulla. Maecenas nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris eu massa. In semper. Morbi vitae nisl at felis placerat porttitor. Morbi molestie. Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem. In vulputate gravida orci.
Die Navigation
Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen. Die beiden Zweit-Menüs ganz oben rechts und ganz unten sind um einige Links erweiterbar. Nutzen Sie die Menüs ganz oben und ganz unten für die selben Links, um dem Besucher das "Hoch-Scrollen" zu ersparen oder aber legen Sie im unteren Menü noch einmal völlig andere Links an. Ihre Wahl. Übrigens, das Menü in der linken Spalte ist beliebig erweiterbar, d.h. beliebig viele Links innerhalb einer Rubrik (hier NavIntern und NavExtern) als auch beliebig weitere Rubriken, Sie müssen dann - eine gewisse Erfahrung vorausgesetzt - die entspr. Objekte in der HTML-Datei und in der "menue-CSS-Datei" kopieren/anpassen.
Das Haupt-Menü im Logo-Bereich hat 100 % (100 Prozent von in diesem Fall 898 Pixel). Innerhalb dieser Breitenangabe haben wir das Menü für Sie flexibel angelegt. Jeder Button ist gleich breit, das wirkt optisch nett. Dieses Menü ist nur abhängig von der Länge der Textlinks, d.h. je kürzer die Linkwörter, desto mehr Links sind möglich. Im Moment sehen Sie also 5 Links mit der selben Breite je Link. Ein Link hat hier 20% (denn 5 x 20 = 100%). Somit können Sie auch für 8 Buttons einen Prozentwert von 12% oder für 6 Buttons eine Prozentwert von 16% oder für 7 Buttons 14% wählen. (Sie teilen also immer 100 durch die Anzahl der Buttons und runden nach unten ab).
Die allgemeinen Links (Links im Text) sehen zur Zeit aus wie nachstehend: Um den Mouseover-Effekt anzuschauen, fahren Sie mit der Maus über den Link: Beispiel-Link
The Dead TextBeispiel Füll Text. Fusce bibendum pretium ante. Pellentesque sed enim nec odio laoreet congue. Nullam aliquam rhoncus libero. Morbi vitae sem. Sed quis lorem. Curabitur suscipit vehicula est. Donec venenatis. Durch die Einrückung lockern Listen auch jeden Text auf.
Nachfolgend sehen Sie zwei Beispiele für Listen. Listen sind textliche Aufzählungen.
Dies sind nur Beispiele, die Ihnen als Anregung gelten sollen, natürlich können Sie jede der zwei Listen verlinken oder auch nicht verlinken. Jede der Listen können Sie natürlich auch um weitere Listenpunkte nach unten erweitern bzw. verkürzen.
Liste mit Aufzählungszeichen "square", verlinkt:
Maecenas a nulla. Maecenas nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris eu massa. In semper. Morbi vitae nisl at felis placerat porttitor.
Liste mit Aufzählungszeichen: "square", nicht verlinkt:
- Sed
- Condimentum
- Bibendum
- Semper
Morbi molestie. Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem. In vulputate gravida orci.
Der Bonus
Als Bonus gab es ja diese Version2 -"index2.html"-, welche Sie hier ja gerade sehen. Die Original-Version "index.html" hat weniger Boxen in der linken Spalte und ist damit für Anfänger evt. etwas übersichtlicher und leichter zu bearbeiten.
|
