Praktikum 8: CSS-Layout

Transkript

1 WEB1 Web-Technologien 1 Praktikum 8: CSS-Layout Gerrit Burkert, Ziele In einem früheren Praktikum haben Sie den HTML-Code für eine Reisebüroseite gemacht. Ziel dieses Praktikums ist es, die Seite nun mit Hilfe von CSS fertig zu stellen. Dabei benötigt: Sie kennen das Boxmodell von CSS und die zugehörigen CSS-Eigenschaften. Sie können mit Hilfe der position -Eigenschaft Elemente auf der Seite positionieren. Sie wissen, wie man die float -Eigenschaft nutzt, um Elemente nebeneinander anzuordnen. Bewertung Zeigen Sie den Stand Ihrer Arbeiten zum Ende der Praktikumslektion vor. Hinweise zum nächsten Praktikum Bitte beachten Sie auch die Hinweise zum nächsten Praktikum auf der letzten Seite. 1

2 Aufgabe 1: HTML für die Beispielseite In diesem Praktikum soll die Reisebüroseite aus einem früheren Praktikum mit Hilfe von CSS entsprechend der Vorlage gestaltet werden. Hier zur Erinnerung noch einmal die Seite, wie sie schliesslich aussehen soll: Beispiel-Website Wir betrachten hier zunächst noch einmal den HTML-Code. Sie finden eine Musterlösung für das Markup- Praktikum in der Datei praktikum.zip. Vergleichen Sie den Aufbau des Dokuments index.html mit Ihrer Lösung und analysieren Sie die Unterschiede. Einige Hinweise dazu: Vergleichen Sie den Aufbau der HTML-Datei, insbesondere den Einsatz der strukturgebenden HTML- Elemente. Ist Ihr header -Element ähnlich aufgebaut? Haben Sie den Hauptteil ( main ) und die Seitenleiste ( aside ) auch so aufgebaut? Die Überschrift der Seitenleiste ist Aktuelle Angebote. Daher gehört diese Überschrift auch in diesen Block, auch wenn sie sich auf der Höhe der Navigationsleiste befindet. Wichtig: Es gibt durchaus verschiedene mögliche Lösungen. Ob wir es hier mit mehreren Artikel oder nur einem zu tun haben, ist ohne genauere Kenntnis des Inhalts nicht zu entscheiden und auch dann teilweise noch Ermessenssache. Es wird sowohl ein Screen- als auch ein Print-Stylesheet geladen. Auf diese Weise kann für jedes Medium eine speziell angepasste Version der Seite ausgegeben werden. Das Screen-Stylesheet lädt eine Datei mini-reset.css, um Schriftgrössen und Abstände zurückzusetzen. Sehen Sie sich die Darstellung im Browser an. Vergleichen Sie die Darstellung im Browser mit und ohne 2

3 eingebundenes Reset-Stylesheet. Es bleibt Ihnen überlassen, ob Sie für die anschliessende Layout- Aufgabe diese Reset-Variante, die Alternative normalize.css, oder gar kein Reset-Stylesheet verwenden möchten. Das Script html5shiv.js, das im Head der Seite geladen wird, dient dazu, dass die HTML5-Elemente für den Aufbau der Seite auch von älteren Versionen des Internet Explorer verstanden werden. Oft sieht man in HTML-Dokumenten spezielle Kommentare wie diesen: <!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><![endif]--> Das ist ein so genannter Conditional Comment, der besagt, dass das Hilfs-Script nur vom Internet Explorer bis Version 8 gelesen werden soll. Solche Kommentare werden nur vom Internet Explorer ausgewertet, andere Browser überlesen sie. Schön ist das nicht, aber manchmal hilfreich. 3

4 Aufgabe 2: CSS-Layout Bauen Sie nun das Layout der Website entsprechend der Vorlage (Bild oben) auf. Sie können wählen, ob Sie Ihre eigene Variante der HTML-Datei oder die vorgegebene Lösung verwenden möchten. Wenn Sie noch wenig Vorkenntnisse im Webdesign haben, ist es empfehlenswert, sich an der vorgegebenen Datei index.html und den CSS-Fragmenten in screen_sample.css zu orientieren. Diese Schritte beziehen sich auf die HTML-Datei aus der Musterlösung: Geben Sie eine CSS-Regel für den Seitenhintergrund und die Schriftart an. Für den zentrierten Bereich der Seite ist ein div -Element vorgesehen. Es ist 770px breit, wird relativ positioniert (warum?) und mit einer Hintergrundfarbe versehen. Mit der margin -Eigenschaft können Sie etwas Abstand nach oben und unten vorgeben und das Element horizontal zentrieren. Das Bild wird bereits ohne weitere Angaben an der richtigen Position erscheinen. Positionieren Sie nun die beiden Überschriften absolut über dem Bild. Farben und Grössen können Sie den Regeln in screen_sample.css entnehmen. Auch die Navigationsleiste wird absolut positioniert (Position und Grösse müssen nicht unbedingt mit Ihrer Lösung übereinstimmen): nav { position: absolute; height: 40px; width: 100%; top: 240px; background-color: #8F8E93; } Variieren Sie die einzelnen Angaben in der nav -Regel, um deren Zweck und die Wirkung der Eigenschaften besser einschätzen zu können. Die einzelnen Listenelemente sollen nebeneinander dargestellt werden. Dies können Sie mit der float - Eigenschaft erreichen. Mit dem Reset-Stylesheet muss nicht mehr dafür gesorgt werden, die Nummerierung zu entfernen. Die Navigationslinks werden mit display: block zu Blockelementen gemacht (warum?). Ergänzen Sie die Darstellung der Links um Angaben für height, padding, margin, sowie Vorder- und Hintergrundfarbe. Ausserdem muss noch die Unterstreichung der Links entfernt werden. Beim Überfahren eines Links mit der Maus soll dieser die Hintergrundfarbe auf # ändern (Pseudoklasse :hover ). Die "Sidebar" mit den Terminen gehört hier nicht zur Navigation. Sie soll (nur auf der Startseite) permanent eingeblendet sein und wird absolut positioniert: 4

5 aside { position: absolute; width: 220px; top: 240px; right: 50px; background-image: url(img/angebote_hg.jpg); /*... */ } Diese Regel muss noch etwas ergänzt werden. Falls mehr Termine hinzugefügt werden, dehnt sich die Sidebar nach unten aus. Wie können Sie erreichen, dass das Hintergrundbild dabei mit nach unten verschoben wird und trotzdem oben keine Lücke entsteht (s. Bild)? Die Überschrift wird in die Höhe der Navigationsleiste eingepasst: aside h1 { height: 20px; padding: 12px 0 8px 15px; color: #E8E9CB; background-color: #366789; } Aus welchen Grössen in dieser Regel ergibt sich die Höhe von 40px? (Hinweis: Boxmodell) Nun müssen die Absätze mit den Terminen und der Footer der Sidebar formatiert werden. Ergänzen Sie die nötigen Regeln. Zum Schluss fügen Sie der Darstellung noch mit den passenden CSS3-Eigenschaften noch die leicht abgerundeten Ecken und den Schatten hinzu. Noch ein Hinweis zur Positionierung des aside -Elements: Die absolute Positionierung hat hier leider den Nachteil, dass das Element den Hauptcontainer nicht nach unten vergrössert, wenn viele Termine eingetragen werden. Falls dieser Nachteil nicht in Kauf genommen werden kann, muss eine andere Lösung gefunden werden. Nicht schön aber als schnelle Notlösung könnte auch durch eine Zeile JavaScript-Code das minheight für den Hauptcontainer aus der Höhe des aside -Elements bestimmt werden. 5

6 Aufgabe 3: Dynamisches Menü Mit CSS lässt sich auch ein dynamisches Menü realisieren. Dies soll am Beispiel des Kontaktmenüs demonstriert werden: Wenn sich der Mauszeiger über dem Kontakt-Link befindet, wird ein Menü mit den beiden Links und Formular angezeigt: Das Menü soll erst wieder ausgeblendet werden, wenn der Mauszeiger nicht mehr über dem Kontaktlink oder dem Menü ist. Für die Unterliste muss mit width: auto die feste Breitenangabe rückgängig gemacht werden, die sonst von der übergeordneten Liste geerbt wird. Ausserdem wird die Liste mit Hilfe von display: none zunächst ausgeblendet. Die Listenelemente der neuen Liste dürfen nicht mit float nebeneinander angeordnet werden. Auch diese geerbte Eigenschaft muss daher zurückgesetzt werden. Solange der Mauszeiger über dem Listenelement der übergeordneten Liste ist dieses enthält ja die Unterliste muss die Unterliste angezeigt werden ( display: block ). Hinweis: Mit den Möglichkeiten von CSS lassen sich nur relativ einfache dynamische Menüs aufbauen. CSS3 erweitert zwar die Möglichkeiten, aber bestimmte Effekte wie verzögertes Ausblenden des Menüs sind am besten mit JavaScript zu realisieren. 6

7 Hinweise zum nächsten Praktikum Ab dem nächsten Praktikum werden Sie ihre Kenntnisse in HTML und CSS im Rahmen eines Miniprojektes einsetzen und vertiefen. Dafür sind vier Lektionen im Praktikum und zusätzlich etwa zwei bis vier weitere Lektionen im Selbststudium vorgesehen. Das Miniprojekt soll als Gruppenarbeit durchgeführt werden. Idealerweise arbeiten Sie in den gleichen Gruppen wie in der Projektschiene. Ziel ist, ein Mockup für die Webanwendung zu erstellen, welche Sie in der Projektschiene entwickeln. Konkret soll ein Prototyp der Benutzerschnittstelle erstellt werden, bestehend aus etwa vier bis fünf statischen Webseiten (also HTML und CSS, noch ohne Programmlogik). Auf dem Ergebnis des Miniprojekts sollen Sie dann in der Projektschiene aufbauen. Falls Sie in diesem Semester keine Projektschiene absolvieren: Bilden Sie Projektteams mit jeweils etwa zwei bis drei Mitgliedern und definieren Sie sich eine Aufgabe vergleichbaren Umfangs. Bitte stellen Sie bis zum nächsten Praktikum die Projektteams zusammen (falls nicht entsprechend der Projektschiene). Überlegen Sie sich, welche Seiten Ihres Projektthemas im Rahmen der verfügbaren Zeit (etwa sechs Lektionen) umgesetzt werden könnten. 7