Das Layout
Dieses Design heisst: Forever our Heroes
Die obere Hauptgrafik könnten Sie leicht durch Ihre Grafik austauschen:
Beschriften Sie doch im Grafikprogramm entweder die Grafik "header01.jpg" oder "header02.jpg" mit Ihrem Logo bzw. Ihrem Schriftzug und ersetzen damit die Grafik "header_beispiel.jpg". Auch die Farben im Haupt-Menü lassen sich leicht ändern, da alles nur Textlinks sind und der Hintergrund eine änderbare Farbe ist. Übrigens: Die Farbkombination dunkelrot/grau/weiss/schwarz gilt traditionell als Erfolgsgarant bezüglich der Werbung in den Printmedien und somit natürlich auch beim Webdesign.
Die Technik
Dies ist eine grafische Konstruktion, die Breite der Gesamtkonstruktion ist also nicht veränderbar, wohl aber nach wie vor die Höhe der Gesamtkonstruktion. Interessant ist hier auch die Gestaltung der Überschriften, welche farblich auf das Logo oben abgestimmt sind und aus reinem Text bestehen und damit superschnell anpassbar sind. Es wechseln sich ab: Rot und Schwarz. Da alles dem selbem Farbschema unterliegt, wirkt die Seite farblich stimmig und trotz der gewollten Schlichtheit abwechslungsreich. Abgerundet wird das mit den drei farblich passenden Sternen ganz unten.
Anlegen von Links bzw. HTML-Seiten wie folgt: Die Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.
Seite ohne Frames. Der Homepagename sowie Fusszeile unten (z.B. Adresse) ist leicht und veränderbar als einfacher Text einzutragen. 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. Das Menü ganz oben ist um einige Links erweiterbar.
Beim Haupt-Menü ist der Ausgangs-Link in der Farbe Weiss. Bei Klick wird der Link der jeweils angewählten Seite konstant in anderer Farbe (hier: grau) angezeigt. Der Mouseover hat dann eine andere Farbe (hier: rot). Klicken Sie auf die Links, wir haben diese schon mal beispielhaft verlinkt.
Auch ist das Haupt-Menü flexibel, denn dieses hat 100 % (100 Prozent von in diesem Fall 890 Pixel). Innerhalb dieser Breitenangabe haben wir das Menü für Sie veränderbar bezgl. der Breite 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 6 Links mit der selben Breite je Link. Ein Link hat hier 16% (denn 6 x 16 = fast 100%). Somit können Sie auch für 8 Buttons einen Prozentwert von 12% oder für 5 Buttons eine Prozentwert von 20% 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 Text Beispiel 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 drei Listen verlinken oder auch nicht verlinken. Auch kann jedes Aufzählungszeichen farbig oder nicht farbig gestaltet werden. Jede der Listen können Sie natürlich auch um weitere Listenpunkte nach unten erweitern. Experimentieren Sie doch ein wenig und entscheiden sich dann für Ihre Lieblingsliste.
Liste mit Aufzählungszeichen: "numerisch-römisch", Ziffern automatisch fortlaufend, nicht verlinkt:
- Curabitur
- Ullamcorper
- Magna
- Aenean
Praesent nisl mi, condimentum sed, bibendum semper, fringilla a, felis. Phasellus tincidunt odio vel nulla. Morbi vitae urna quis nulla imperdiet rhoncus. Aliquam feugiat, nulla non semper mollis, sapien velit rutrum urna, eu vehicula erat risus et leo.
Liste mit Aufzählungszeichen "square", verlinkt:
|
|
Max Muster GmbH Spezialstraße 55 55234 Sampletown
|
|
|