Schöner Tag im Sommer

Index / Die Startseite Home

Information

Diese Vorlage setzt die CSS3-Technik ein.

Hinweis: Mit CSS3 kann man jetzt nur per einfachem CSS3-Quellcode Dinge wie Rundungen (border-radius), Schatten-Aussen (box-shadow), Schatten-Innen (box-shadow inset) Textschatten (text-shadow), Schrägstellungen (transform:rotate) erstellen, die vorher nur über den Umweg übers Grafikprogramm möglich waren. Sogar Animationen sind möglich. Alles funktioniert in modernen Browsern ohne weitere Scripte. Wir erklären Ihnen box-shadow hier auf der Seite index2.html, text-shadow auf index3.html und border-radius auf index4.html

Klicken Sie auf index5.html für mehr Info zu den beiden oberen Menüs. Übrigens sind die Navigationsleisten ohne jede Grafik erstellt. Ändern Sie einfach nur die Hintergrundfarbe der Menüs für ein anderes Aussehen, sowohl Aussenschatten (box-shadow) als auch Innenschatten (box-shadow inset) bei den Menüs bleiben erhalten.

Nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Vero eos et accusam et justomioet duo dolores et ea rebum. Sanctus est Lorem ipsum dolor sit amet. Terrageneralis Sol Profundis. Acta est semi atlantis. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diamipsum dolor sit amet. Dias Aqua Nova.

Dieses Layout heißt "Schöner Tag im Sommer". Auf dem Foto der Startseite sowie auf den Folgeseiten gibt es deshalb Fotos mit einem kräftigen blauen Himmel sowie grünem (Dünen-) Gras zu sehen. Ein sehr freundliches, frisches Layout.


Auf jeder Seite ein anderes Foto

Wenn Sie die Links index (home) bis index5 im Menü oben durchklicken, sehen Sie auf jeder Seite ein anderes Foto im Kopf-und Fussbereich. Klar können Sie auch immer mit dem selben Foto arbeiten (dann kopieren Sie für eine neue HTML-Seite/einen Link immer nur die Datei index.html), wir möchten hier nur die Möglichkeiten aufzeigen. Wir haben deshalb die Foto-Variationen für Sie in in den Dateien foto02.css bis foto05.css angelegt.

Aufgerufen werden diese Dateien dann durch den Verweis in der HTML-Datei auf die entsprechende CSS-Datei.

So sieht der Verweis in der Seite index2.html aus:
<link rel="stylesheet" href="foto02.css" type="text/css">

Und so sieht der Verweis in der Seite index3.html aus:
<link rel="stylesheet" href="foto03.css" type="text/css">

usw....


Aufzählungen - Liste

Nachfolgend als Beispiel einige verlinkte Seiten für eine Liste im Text. Hier mit eigenem Aufzählungszeichen. Klicken Sie die Links in der Liste.


Der letzte Link (Suchmaschine) ist ein Beispiel für eine Verlinkung zu einer externen Seite, welche sich vorteilhafterweise in einem neuen Browserfenster öffnet. Hier im Beispiel zur Google-Webseite. Das Öffnen eines neues Browserfensters geschieht durch den "target-Befehl". Somit bleibt Ihre Seite immer im Hintergrund erhalten bzw. innerhalb des anderen Browserfensters leicht anwählbar


Weiter und Info

Beispiel-Verlinkungen

Sie befinden sich auf der Seite index.html.
Hier geht es weiter zu den Seiten index2.html, index3.html, index4.html und index5.html.
Michael Muster- Schöndorf
An der Promenade 23
26234 Dünenwehe