SELFHTML/Navigationshilfen  Fertige Layouts
	Layout Nummer 10
	Impressum zu diesem Layout  Beispiel mit diesem Layout anzeigen und Layout speichern  Hinweise zu diesem Layout

Impressum zu diesem Layout

Web-Design:	Jeena Paradies
E-Mail:	[email protected]
WWW:	http://jeenaparadies.net/webdesign/leistungen

Beispiel mit diesem Layout anzeigen und Layout speichern

 Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

 ZIP-Datei mit den Dateien des Layouts speichern (51 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
 SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr10/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Dieses Layout verwendet standardkonformes XHTML 1.0 Strict und wurde ohne Layouttabellen gestaltet, da diese ja bekanntlich nur für tabellarische Daten gedacht sind.
Das Aussehen wird ganz und gar durch die externe CSS Datei gesteuert. Wir haben hier also eine Trennung von Layout und Struktur. Allein durch das Verändern der CSS Datei können wir somit das Aussehen der ganzen Webpräsenz verändern.

Das Layout wurde in allen modernen Browsern getestet (IE 5.x und 6, Opera 7.x und 8, Mozilla 1.x, Konqueror 3.x.x, Safari 1.x.x) und machte keine Probleme. Netscape 4.x bekommt kein CSS, die Seite bleibt aber dennoch voll benutzbar für diese Besucher.

Zu dem Layout gehören folgende Projektdateien:

index.htm
Die Hauptdatei des Templates. Den Quelltext können Sie mit einem Texteditor oder einem  HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in  HTML.

Diese Datei ist außerdem gleichzeitig das Template für alle Dateien der Webpräsenz.
Wenn Sie eine neue Unterseite erstellen wollen dann kopieren Sie die index.htm Datei und speichern sie unter einem anderen Namen. Dann ersetzen Sie den Inhalt des Containers mit der id="main" durch Ihren. Außerdem entfernen Sie den Link im Menü und lassen nur den Text in der Liste stehen. Dafür fügen Sie aber einen Link beim ersten Menüpunkt zur Startseite ein.

Nähere Informationen finden Sie auch im Quelltext der Datei.

css/screen.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung für Bildschirmdarstellung, die in allen HTML-Dateien des Projekts eingebunden wird und das vollständige Aussehen bestimmt. Wenn Sie etwas am Aussehen der Seite verändern wollen, dann nur hier.
Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in  CSS erforderlich.

Nähere Informationen und Tipps finden Sie auch im Quelltext der Datei.

css/print.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung für die Druckausgabe, die in allen HTML-Dateien des Projekts eingebunden wird. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in  CSS erforderlich. Tipps können Sie sich auch im Tipps & Tricks Artikel  Stylesheet für ein Druck-Layout holen.

css/ielte6.css
Eine Datei, die versucht die Unzulänglichkeiten des mittlerweile etwas in die Jahre geratenen Browsers Internet Explorer bis Version 6 mittels CSS-Hacks auszubügeln. Weitere Informationen dazu finden Sie im Quelltext. Die Datei wird mit Hilfe von  Conditional Comments nur dem IE zur Verfügung gestellt, alle anderen Browser ignorieren sie.

img (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in  Techniken und Begriffen der Bildbearbeitung.

	Farbauswähler
	Layout Nummer 9
SELFHTML/Navigationshilfen  Fertige Layouts

© 2007  Impressum