Vorbereitung: Teil 1 Detailliertes Layout, z.b. Farben, Schriften, Abstände,... Aufgaben

Transkript

1 HTML & CSS Bei diesen Aufgaben geht es darum, dass sie ihre Kenntnisse vom Zusammenspiel von HTML (Struktur) und CSS (Layout) auffrischen und vertiefen. Vorbereitung: Im bereitgestellten Ordner findet sich eine typische kleine Webseite, d.h. eine HTML- Datei (seite.html) eine zugehörige CSS- Datei (style.css) ein Ordner (images) mit den benötigten Bildern Hinweis: Die zusätzlichen Dateien, die auf _original enden, enthalten denselben Code, hier können sie ggf. den Anfangszustand nachschauen. Die Dateien, die _vereinfacht im Namen haben, enthalten eine noch mehr abgespeckte Version, die für den zweiten Teil der Aufgaben benutzt werden kann wenn es um das generelle Layout der Seite geht. Auf dem Wiki finden sie zwei Dokumente (HTML- Kurzreferenz & CSS- Kurzreferenz), die das absolut Wichtigste zur Benutzung dieser beiden Auszeichnungssprachen zusammenfassen. Sie sind gedacht als erster Anlaufpunkt zur Lösung der Aufgaben und zeigen ihnen ausser- dem, welche Kenntnisse in der Probe vorausgesetzt werden. Zur konkreten Lösung einzel- ner Aufgaben werden sie darüber hinaus sicherlich bestimmte Informationen (z.b. konkre- te CSS- Eigenschaften) im Internet nachschauen müssen, beispielsweise auf den als Links angegebenen Seiten. Teil 1 Detailliertes Layout, z.b. Farben, Schriften, Abstände,... Öffnen sie die beiden Dateien seite.html und style.css in einem Text- Editor (am besten Wor- dpad) und verschaffen sie sich einen groben Überblick. Öffnen sie dann seite.html mit Fire- fox und schauen sie sich an, wie die Mini- Webseite momentan aussieht. Hinweis: Eines der schwierigsten Probleme beim professionellen Webdesign besteht darin, die Seite so zu gestalten, dass sie von allen Browsern und Endgeräten korrekt angezeigt wird. Diese Proble- matik möchten wir im Moment so weit als möglich ausklammern, indem wir mit gleichartigen Gerä- ten und nur einem Browser arbeiten. Bei den nun folgenden Aufgaben geht es jeweils darum, bestimmte Dinge am Aussehen der Seite zu ändern. In der Hauptsache muss also das CSS angepasst werden, nur im Ausnahme- fall sind kleinere Eingriffe in das HTML nötig. Achten sie darauf, ihre Änderungen zu spei- chern, und vergessen sie nicht, den Browser zu refreshen - die Seite kann immer geöffnet bleiben, reflektiert die Änderungen aber erst, wenn sie neu geladen wurde (z.b. mit F5). Aufgaben In diesem ersten Teil sollen sie verschiedene Details der beiden auf der Seite dargestellten Beispiel- Beiträge anpassen. 1) Setzen sie die Schriftgrösse für die Beitragsüberschriften auf 33px. 2) Sorgen sie dafür, dass die Beitragsüberschriften anstatt in Grossbuchstaben in Kapitäl- chen dargestellt werden 3) Entfernen sie den Unterstrich bei der Darstellung der Beitragsüberschriften (die aber trotzdem verlinkt bleiben sollen) 4) Theoriefrage: Die verlinkten Beitragsüberschriften nehmen momentan die Farbe #41a62a an, wenn man mit der Maus darauf zeigt. Welchen Dezimalzahlen für (welche)

2 Farbkanäle entspricht diese Hexadezimale Angabe? Und wieso ergibt sich eine leicht blassgrüne Farbe? 5) Setzen sie den Blauanteil dieser Farbe auf denselben Wert wie Grün und sorgen sie dafür, dass der Unterstrich beim hovern wieder erscheint. 6) Ändern sie die normale Farbe aller übrigen Links in den Beiträgen auf die eben festge- legte Hover- Farbe der Beitragsüberschriften 7) Entfernen sie auch bei den Meta - Links (direkt unterhalb der Überschriften) die Un- terstriche. Die Schrift soll sich beim Hovern zu Kapitälchen ändern. 8) Die vier Meta- Links sollen zueinander mehr Abstand bekommen, sagen wir links und rechts 10px. 9) Die Beitragsheader- Bilder soll mit einem Rand von 8px umgeben werden um dafür Platz zu schaffen, müssen sie sie etwas verkleinern. Hinweis: man kann mit margin oder padding arbeiten, eines davon lässt sich aber nicht einfärben (s. nächste Aufgabe). Sie sollten den Unterschied zwischen margin und padding kennen (Box- Model). 10) Der entstandene Rand um das Beitragsbild soll in einem mittleren Grau eingefärbt werden. 11) Vor jedem Beitrag soll ein Abstand von 28px eingefügt werden. 12) Der für den eigentlichen Beitragstext zur Verfügung stehende Platz soll etwas vergrös- sert und ausserdem relativ zum umgebenden Container angegeben werden. Ändern sie die entsprechende Angabe auf 85%. Die Quellenangabe im ersten Beitrag soll anders formatiert werden (deutlich kleiner, kur- siv,...). Wie sie in der HTML- Datei sehen, ist die Quelle momentan durch den Tag <em> aus- gezeichnet (kurz für emphasis, also Hervorhebung) - dieser wird standardmässig kursiv dargestellt. Sie könnten diesen Standard jetzt natürlich leicht per CSS ändern, so dass er die Quellenangabe wie gewünscht darstellt damit würde man aber die Möglichkeit für eine normale Hervorhebung (z.b. in weiteren Beiträgen) verlieren. Sauberer wäre eine neue CSS- Klasse, die wirklich für die Formatierung von Quellenangaben zuständig ist egal in welchem Beitrag. 13) Für eine saubere Lösung müssen sie hier also die HTML- Datei anpassen: ändern sie den <em> Tag zu einem <div>, dem sie den Klassennamen quellenangabe zuordnen. Da- bei können sie auch gleich das umgebende <p> löschen (divs sind automatisch Absätze, deswegen verwenden wir hier auch lieber ein <div> als ein <span>) und die URL ver- linken. 14) Jetzt müssen sie nur noch die Klasse quellenangabe und ggf. darin enthaltene Links per CSS formatieren denken sie sich selbst eine angemessene Darstellung aus. Wenn sie es bis hierher geschafft haben, dann können sie sich weitere Detailänderungen des Layouts selbst überlegen und diese umsetzen, z.b. 15) die Typographie ändern: vielleicht zwei zueinander passende Schriftarten einheitlich für die Unterscheidung von normalem und besonderem Text (Überschriften, etc.) ein- setzen, 16) oder die gesamte Farbgebung auf ein zusammenpassendes Farbschema ( ausrichten.

3 Teil 2 Generelles Layout der Container, z.b. float, relativ, statisch,... Nachdem sie gesehen haben, wie man das Layout der Beiträge im Detail anpasst, geht es jetzt noch darum, diesen Haupt- Inhaltsbereich im Kontext der anderen Bereiche einer übli- chen Webseite zu platzieren. Diese weiteren Bereiche (header & footer, ein Bereich für die Hauptnavigation und ein weiterer für Widgets und/oder sekundäre Navigation) sind in den bisher bearbeiteten Dateien bereits rudimentär angelegt sie werden allerdings per CSS versteckt. Um sie sichtbar zu machen genügt es, die auf all diese Bereiche angewandte Ei- genschaft display:none zu löschen sie steht im Bereich 3.0 Basic Structure, mit dem sie sich jetzt ausführlicher beschäftigen werden. Die neu aufgetauchten Bereiche sind alle grün hinterlegt und erstrecken sich jeweils über die gesamte Breite der Seite, die wiederum 700px breit und horizontal auf die Mitte des Browserfensters zentriert ist. All dies wird bereits jetzt in der CSS- Datei festgelegt und na- türlich lassen sich mit der Anpassung einiger weniger Eigenschaften auch ganz andere Lay- outs erzielen. Aufgaben Im zweiten Teil geht es um die Positionierung der Container, die Teilbereiche der Webseite umschliessen. Um für den Anfang den CSS- Code noch übersichtlicher zu machen, gibt es jeweils eine noch simplere Version der Beispieldateien: seite_vereinfacht.html und sty- le_vereinfacht.css. Da hier die verschiedenen Teilbereiche der Webseite unterschiedlich ein- gefärbt sind, können die Aufgabenstellungen hier einfacher erklärt werden. Die Idee ist, dass sie mit der vereinfachten Version beginnen und experimentieren, am Ende dann aber ein sinnvolles Layout auch im vollständigen Beispiel umsetzen können. Zu Beginn sollte die vereinfachte Webseite etwa so aussehen: Das wohl gebräuchlichste Webseitenlayout hat zwischen dem Header und dem Footer zwei Spalten, wobei der Hauptinhalt (hier die Beiträge) mehr Platz einnimmt als die Seitenleiste:

4 Hinweis: Die Seitenleiste enthält üblicherweise Navigationselemente oder sonstige (Unter- ) Seiten- übergreifende Funktionalitäten. Bei WordPress heissen die Module, die solche Funktionalitäten zur Verfügung stellen Widgets. In welchen Teilbereichen Widgets platziert werden können, hängt vom gewählten Theme ab im default- Theme, das unserem Beispiel als Grundlage dient, kann sowohl die Seitenleiste als auch der Footer Widgets aufnehmen. Solche mehrspaltigen Layouts werden üblicherweise mithilfe der CSS- Eigenschaft float umgesetzt - die obige Abbildung veranschaulicht die Grundidee. a) Ergänzen sie entsprechend in der CSS Datei, so soll es dann aussehen: b) Setzen sie die Seitenleiste jetzt nach rechts dafür braucht es nur minimale Anpassun- gen. c) Die Breite der gesamten Seite ist momentan auf die mittleren 700px beschränkt än- dern sie diesen Wert zu 100%, so sollte es dann aussehen:

5 d) Ändern sie die Grösse des Browserfensters und beobachten sie, was geschieht. e) Geben sie die Breite der Spalten relativ an (z.b. 70 zu 30). Zudem soll die Seitenleiste nie schmaler als 200px werden können. Untersuchen sie erneut, wie sich die Spalten bei Grössenveränderung des Browserfensters verhalten. f) Holen sie die Seitenleiste wieder nach links und setzen sie für den gesamten Bereich zwischen Header und Footer eine maximale Höhe von 250px. Was passiert? g) Jetzt stattdessen eine Mindesthöhe von 500px. Ändern sie ausserdem die Hintergrund- farbe der Seitenleiste. Sie sollten jetzt sehen, dass ich einen (geläufigen) Trick1 ver- wendet habe, um den beiden Spalten (scheinbar) dieselbe Höhe zu geben. Verstehen sie den Trick? Unter welchen Umständen wird er nicht funktionieren? 1 Für dieses sehr übliche Problem gibt es eine Vielzahl verschiedener Lösungen, jede mit ihren eigenen Vor- und Nachteilen.

6 h) Machen sie die einzelnen Beiträge 300px breit und versehen sie sie mit der Eigenschaft float:left. Wie werden sie sich verhalten, wenn die Seite breiter oder schmaler gemacht wird? i) Löschen sie das float:left für die Seitenleiste und schreiben stattdessen position: fixed. Testen sie, indem sie das Fenster sehr schmal machen und scrollen. Nachdem sie nun ausgiebig Erfahrung mit Container- Layout in CSS gesammelt haben, wird es Zeit, zu eigentlichen Beispiel zurückzukehren. j) Setzen sie das einfache zweispaltige Layout aus Aufgabe a) um, möglichst auswendig. k) Schauen sie sich an, wie eine WordPress- Seite mit dem default- Layout aussieht - auf ihrer eigenen Seite oder unter Versuchen sie dann, durch Anpassung ihres Beispiel style.css dieses Layout möglichst genau nachzu- bauen. Hinweis: Dafür gibt es in Firefox eine sehr praktische Hilfestellung. Wenn sie auf einer Seite rechts- Klicken und Element untersuchen wählen, öffnet sich eine Werkzeugleiste, mit der man die Mach- art einer beliebigen Internetseite im Detail nachvollziehen und sogar CSS- Eigenschaften temporär ändern kann.