Layoutmodelle. Steffen Schwientek Große Klostergasse Friedberg schwientek@web.de Web :schlaukopp.org

Transkript

1 Layoutmodelle HTML wurde von ihren Erfindern nicht als Layoutsprache entworfen, sondern zur Informationsübermittlung entworfen Es gab verschiedene Modelle, welche das Web populär machten und. Bei Erstellung einer Seite sollten Sie sich auf eine davon festlegen 82

2 Layoutmodelle (1) Tabellenlayout Tabelle wird zum Layouten zweckentfremdet Funktioniert generell mit allen Browsern Wird von Frontpage gut unterstützt CSS Boxen oder Layer Layout mittels Frames 83

3 Layoutmodelle - CSS Tabellenlayout CSS Boxen oder Layer Sauberer Weg: Trennnung Layout Inhalt Wird von Netscape 4 Browsern unzureichend unterstützt Barrierefreihes Design leicht möglich Nur teilweise Unterstützung in Frontpage 2002 Layout mittels Frames 84

4 Layout Frames Tabellenlayout CSS Boxen oder Layer Layout mittels Frames Von Frontpage gut unterstützt Interne Navigation ergibt sich von selbst Problematisch für Suchmaschinen, da keine Verzeichnisstruktur nach außen hin sichtbar 85

5 Aufbau einer Frameseite Zum Aufbau einer Webseite unter Verwendung von Frames werden mehrere HTML Dateien benötigt: Der Frameset, dieser unterteilt das Browserfenster in einzelne Segmente und verweist für jedes dieser Segmente auf eine HTML Datei Zu jedem Segment wird eine eigene HTML Datei für den Inhalt benötigt 86

6 Aufbau einer zweiteiligne Frameseite 87

7 Dreigeteilter Frameset 88

8 Aufgabe: Frameseite erstellen Erstellen Sie eine zweigeteilte Framedatei,indem Sie Die Geschichte des Internets oberen Teil, und die Datei Firefox vs Internet Explorer ins untere Frame bringen Vorgehensweise: Erstellen Sie eine neue Datei aus einer Vorlage Andere Seitenvorlagen auswählen Auf die Frameseite gehen, und sich dort eine zweigeteilte Framedatei aussuchen 89

9 Bemerkung Frameseiten: Normalerweise benutzt man Frameseiten etwas anders: Links bindet man eine Navigationsframe ein (dort stehen nur Links zu Inhalten, die später rechts erscheinen sollen) Auf Der rechten Seite bindet man dynamisch den gerade aktuellen Inhalt ein Die rechte Seite wird dann ausgetauscht, falls auf dem Navigationsframe der Link angeklickt wird 90

10 Links in anderen Frames öffnen Man kann Links auch in anderen Frames öffnen lassen: Dazu im Einfügen/Hyperlink hinzufügen einfach einen Zielframe angeben 91

11 Aufgabe Erstellen Sie eine kleine Frameseite mit Navigationsleiste In der Navigationsleiste stehen nur Links zu all ihren bislang erstellten Webseiten Im Hauptframe sollen sich dynamisch die Inhalte eingebunden werden, falls rechts auf den Link geklickt wird 92

12 Frameseite - Nachteile Die Navigationsstruktur ist unabhängig von der restlichen Webseite Suchmaschinen können dieser Seite nicht direkt analysieren (wegen fehlender interner Navigation) Andere können nur mühselig (unter Verlust sämtlicher Navigation) auf eine ihrerer Unterseiten verweisen 93

13 Tabellenlayout Im Gegensatz zu den Frames muß man beim Tabellenlayout bereits bei der Erstellung eine Große Tabelle anlegen. Nachträgliche Änderungen sind in Frontpage nur mittels copy&pase möglich Man muß bereits am Anfang seine Seite (Tabelle) Layouten Am Anfang wird eine große Tabelle erstellt, die später mit Inhalt gefüllt wird. Zum layouten werden manche Zeilen und Spalten zu einer zusammengefaßt 94

14 Tabellenlayout-wie Banner/top Seite 1 Seite 2 Seite 3 Seite 4 Haupttext Seite 1 Beim Tabellenlayout muß jedes einzelne Thema durch eine fast identische Unterseite dargestellt werden. Man erzeugt damit viele, nur durch den Haupttext unterschiedliche htmldateien 95

15 Tabellenlayout-wie Banner/top Seite 1 Seite 2 Seite 3 Seite 4 Haupttext Seite 2 Seite 1, Seite 2 sind dabei Links zu den entsprechenden unterseiten 96

16 Tabellenlayout aus Vorlage erstellen Frontpage liefert einige Webseitenvorlagen mit. Seitenvorlagen allgemein, es existiert hier sogar eine Vorschau Für jede anzulegende HTML Seite die entsprechende Seitenvorlage verwenden 97

17 Tabellen Benutzen Sie diese Vorlage, indem Sie fur jeden hinzuzufügenden Inhalt diese Vorlage öffnen Und den Inhalt in die Inhaltsspalte hinzufügen 98

18 Tabellenvorlage selbst erstellen Erstellen Sie eine Tabelle (1 Zeilen, 2 Spalten) Schreiben Sie in die Linke Seite ihre interne Navigation (links) Die rechte Seite lassen sie zunächst leer (der spätere Inhalt) Speichern Sie diese Tabelle als Vorlage ab. 99

19 Aufgabe (Tabellenlayout) Der Weg per Hand Erstellen Sie eine Tabellenlayoutseite mit folgenden Inhalten: Links soll eine Leiste entstehen, welche die Navigation beinhaltet Auf die rechte Seite soll die Geschichte des Internets eingebunden werden. Diesmal können Sie kreativ sein, d.h. Durch weitere Tabellen Bilder und Seite layouten 100

20 Tabellen - Vorgehensweise Auf diese Art und Weise (Tabellenvorlage, danach immer wieder diese Vorlage kopieren und Inhalte hinzufügen) lassen sich auch komplexe Webseiten gestalten Problem etwas aufwändig im Erstellen Im Professionellen Einsatz sind Tabellenlayouts üblich (da automatisiert Tabellen sehr einfach erstellt werden können) Die allermeisten Browser kommen damit gut zurecht 101

21 Frontpage Hilfen Gemeinsame Randbereiche leichte Realisierbarkeit der Navigation: in einem gemeinsamen Bereich die interne Navigation erstellen Frontpage erstellt daraus eine große Tabelle für jede Seite, die den gemeinsamen Randbereich verwendet 102

22 Tabellenlayout - Warnung Frontpage macht das Erstellen von auch komplexem Tabellenlayout einfach Gefahr von stark verschachtelten Tabellen Suchmaschinen können stark geschachtelte Tabellen genauso wenig folgen wie Screenreadersoftware von Sehbehinderten 103