PPS-Veranstaltung (Design einer eigenen WWW-Homepage) Navigationsmechanismen.

Präsentation zum Thema: "PPS-Veranstaltung (Design einer eigenen WWW-Homepage) Navigationsmechanismen."—  Präsentation transkript:

1 PPS-Veranstaltung (Design einer eigenen WWW-Homepage) Navigationsmechanismen

2 PPS-Web Aufgabenstellung: 4 Anforderungen an Webseite 1.Navigationsmechanismen –Mehrere HTML Seiten sollen erstellt werden –Rahmen (Frames), Tabellen, Skripts 2.Einheitliche Gestaltung –Style-Sheets (CSS) 3.Dynamische Elemente –Seite oder Teile von HTML werden dynamisch erstellt (DHTML) –Skripts (CGI, Perl, PHP, JavaScript,...) –Bsp: Gaestebuch 4.Animation –JavaScript, Java-Applet –evtl. Macromedia, Flash,... o

3 Rahmen-Satz und Rahmen Aufteilung des Anziegebereiches des Browsers in verschiedene, frei definerbare Fenster, genannt Rahmen (Frames) Jeder Rahmen enthält eigene Inhalte Links in einem Rahmen können Dateien aufrufen, die dann in einem anderen Rahmen angezeigt werden Mehrere zusammengehörige Rahmen bilden ein Rahmen-Satz (Frame-Set). Beispiel 1Beispiel 1, Beispiel 2Beispiel 2

4 Erzeugen eines Rahmen-Satzes Ein Rahmen-Satz wird anstelle des herkömmlichen BODY- Tags definiert. Rahmen-Satz bestimmt das Layout der einzelnen Rahmen. Wichtige Attribute: cols (Spalten), rows (Reihen) Rahmen bestimmt Inhalt und Aussehen eines Rahmens. Wichtige Attribute: src, name Rahmen-Satz wird als URL angegeben, einzelne Rahmen werden dann automatisch geladen......

5 Erzeugen eines Rahmen-Satzes Erzeugt zwei Rahmen, deren Inhalt hier festgelegt wird... Erzeugt zwei Rahmen, deren Inhalt hier festgelegt wird... Bsp. Erzeugt zwei Rahmen, deren Inhalt hier festgelegt wird... Erzeugt nochmal zwei Rahmen, deren Inhalt hier festgelegt wird... Bsp. 1Bsp. 1, Bsp. 2Bsp. 2

6 Funktionsweise Beispiel

7 Aufgabe Kreiere einen Rahmen-Satz mit 2 Rahmen. Der linke Rahmen enthält eine Liste der durch die Haltestelle Voltastrasse und ETH/Unispital fahrenden Tramlinien. Der rechte Rahmen soll beim Anklicken der Links auf dem linken Rahmen den Fahrplan des entsprechenden Trams anzeigen. Tips: Spezifikation: http://www.w3.org/TR/REC-html40/present/frames.html Haltestellen-Fahrpläne Linie 5: http://www.zvv.ch/abfahrtsfahrplan.asp?linie=005 Lösung

8 Rahmen-Satz mit 3 Rahmen Case Study: Beispielseite fuer ZVV FahrplanBeispielseite fuer ZVV Fahrplan Frame SCHEDULES Frame CURRLINE Beim Klicken auf Link sollen beide Frames geaendert werden Frame TRAMLINES

9 JavaScript Integration... function choose(line) { top.frames[CURRLINE"].location="line"+line+".html"; return true; } Tramlinien ETH Zentrum: Voltastrasse: Linie 5 ETH/Unispital:... Um durch ein Event, mehrere Rahmen gleichzeitig zu aendern, gebraucht man DHTML bzw. Javascript (TRAMLINES Frame – main.html)

10 Gebrauch von Rahmen Zum ständigen Einblenden projektglobaler Steuerverweise Zum gleichzeitigen Anzeigen von zu vergleichenden Informationen Bei besonders kunstvoller Seitengestaltung !

11 Nachteile von Rahmen Probleme bei nicht Rahmen-fähigen Web- Browsern Rahmen und Bildschirmauflösung Ladezeiten Problematisches Direktansteuern von untergeordneten Seiten Rekursiver Rahmen-Satz (Bsp. 1)(Bsp. 1) Moegliche Loesung zu den zwei letzten Problemen: Verweistext (Bsp. 2)

12 Tabellen als Navigationsmechanismus Blinde Tabellen: Tabellen mit keinen sichtbaren Gitternetzlinien. Man gebraucht zur Sitenavigation eine die ganze Seite ueberspannende blinde Tabelle. Bsp: Einfache Seite mit blinder Tabelle Einfache Seite mit blinder Tabelle Eine klassische Design-Struktur: –Meistens gebraucht man alle Spalten der obersten Reihe fuer die Seitenueberschrift und andere Elemente (Logos,Banners usw.) –Eine Spalte am links (schmaler Flaeche) als Navigation Bar –Eine groessere Flaeche rechts vom Navigation Bar fuer den Inhalt der Seite. Bsp: Einfache Seite mit blinder Tabelle gezeigt mit Gitternetzlinien Einfache Seite mit blinder Tabelle gezeigt mit Gitternetzlinien

13 Gestaltung von blinden Tabellen Gitternetzlinien und Rahmen sollen nicht angezeigt werden (border) Zwischen Benachbarten Zellen, sowie zwischen Zellen und Rahmen keine sichtbare Luecken (cellpadding, cellspacing) Die gesamte Tabelle soll sich ueber die volle verfugbare Breite der Seite erstrecken (width)... Bsp: Einfache Seite mit blinder Tabelle im ganzen Site Einfache Seite mit blinder Tabelle im ganzen Site

14 Accessibility/Usability Links Dive into Accessibility (Mark Pilgrim)Dive into Accessibility Building an Accessible Website (CNET)Building an Accessible Website Und zur Beachtung: Rechtliche Regelungen: Internet-Richtlinien der ETHZInternet-Richtlinien der ETHZ

15 Aufgabe 1. Kreiere euren Stundenplan in Tabellenform Bsp: TimeTableTimeTable 2. Kreiere die erste Seite eures Homepages Tips: Spezifikation: http://www.w3.org/TR/REC-html40/struct/tables.html