Praktikum 8: CSS

WEB1 – Web-Technologien 1
Praktikum 8:
CSS-Layout
Gerrit Burkert, 01.11.2014
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
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 MarkupPraktikum 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 HTMLElemente. 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
eingebundenes Reset-Stylesheet. Es bleibt Ihnen überlassen, ob Sie für die anschliessende LayoutAufgabe 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
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 #336789 ä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
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
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 E-Mail 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
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