Report

Vorgehensweise

Ich habe damit angefangen mir eine Ordnerstruktur zu überlegen und ein Grundgerüst der Webseite zu erstellen. Da ich wusste, was ungefähr auf die Seite sollte, konnte ich mir schon ein ungefähres Konzept überlegen, bei dem ich dann auch größtenteils geblieben bin. Im Hauptverzeichnis befinden sich:

Außerdem befindet sich in diesem Ordner der Ordner images, in dem sich alle Bilder befinden. Ein weiterer Ordner im Hauptverzeichnis ist animals. In diesem befinden sich die Ordner zu den einzelnen Gruppen von Tieren (wie Säugetiere, Reptilien etc.). In dem Ordner mammals befinden sich bisher die meisten Dateien. Die anderen Ordner haben jeweils nur eine Datei index.html.

In dem Ordner mammals befinden sich momentan folgende Dateien:

Um das Grundgerüst für die Webseite zu erstellen, habe ich die erste Seite home.html und das stylesheet stylesheet.css Auf dieser Seite habe ich mit der Navigation angefangen. Am Anfang war mein Plan, eine Dropdown-Navigation zu erstellen, aber das hat nicht geklappt. Stattdessen ist die Navigation jetzt eine Liste am oberen Rand der Seite, welche immer dort bleibt und mitscrollt. Dafür habe ich eine <unordered list> erstellt, bei der die einzelnen <list items> einen Border haben und Links auf andere Seiten sind. Wenn die Maus über einem der list items schwebt, wird es grau, und die Schrift wird weiß. Alle <list items> außer About sind von links aus ausgerichtet. About bekommt die ID "rightfloat", sodass es sich am rechten Rand der Seite befindet. In der Navigation gibt es noch die Klasse "active", welche die Seite, auf der man sich gerade befindet dadurch markiert, dass die Farbe des list items anders ist. Diese Klasse wird auf jeder Seite auf das jeweilige listen item verschoben.

Da ich wollte, dass man auch über Bilder, über die man die verschiedene Kategorien von Tieren gut unterscheiden kann, auf die anderen Seiten navigieren kann, überlegte ich mir, wie man Bilder als Links verwenden kann, und wie man Bildunterschriften mit den Bildern verknüpfen kann. Das machte ich über <figure> und <figcaption>. Ich erstellte eine div "imgnav", in welcher sich die figure Elemente befinden. Für diese div ist festgelegt, dass alles, was sich in ihr befindet zentriert sein muss. Die figure Elemente sollten als inline-block angezeigt werden, damit die Höhe und Breite verändert werden konnt und, damit mehrere solcher Elemente nebeneinander in einer Reihe sein können. Dann fügte ich die Figcaptions hinzu und bearbeitete auch diese, sodass die Bildunterschriften unter dem Bild angezeigt werden, und die Quellen in einer anderen Farbe kleiner darunter.

Fast alle figure Elemente haben eine max-width von ca. 20%. Sie können also nicht breiter als 20% der Browserbreite sein. Die Bilder innerhalb der figure Elementen haben dann die Breite 100%, weil es zwischen den Bildern und dem Rand der figure Elemente keinen Platz geben soll.

Der Text wird in der Schriftart Palatino in der Größe 16px und mit einem Zeilenabstand von 1.4em angezeigt. Links werden in einer anderen Farbe angezeigt und unterstrichen, und besuchte Links in einer weiteren anderen Farbe.

Zwischendurch kam ganz viel Text dazu.

Dieses Grundlayout mit der Navigation und der Bildernavigation kopierte ich auf andere Seiten, wie Mammals und Marsupials. Dann erstellte ich die erste einzelne Seite über Koalas. Auch diese Seite hat ein ähnliches Layout, wie die anderen. Allerdings ist hier noch ein Bild rechts neben dem Text. Dieses Bild ist auch in einer <figure>, welche die Klasse "img-right" hat, wodurch sie an den rechten Rand verschoben wird.

Auch die Seite kangaroo.html ist sehr ähnlich. Auch hier sind Bilder in der Mitte und am rechten Rand vorhanden, allerdings habe ich hier auch ein Youtube Video eingebunden.

Auf jeder Seite ist ein <footer>, auf dem man einen Link zur About Seite und Kontaktinformationen finden kann. Dafür benutze ich den <address> Tag. In diesem stehen die Kontaktinformationen und durch das stylesheet bekommt dieser address-Kasten einen Border. Außerdem kann man im Footer einen Link zum Seitenanfang und Links zum Impressumund zu der Datenschutzerklärung finden.

Das Impressum und die Datenschutzerklärung habe ich als letztes gemacht. Im Impressum habe ich die Kontaktmöglichkeiten in die class "contact" gepackt. Diese bekommt eine festgelegte Breite und einen Border.

Die class "contact" kommt auch in der Datenschutzerklärung vor. Die Datenschutzerklärung habe ich mit dem Datenschutzgenerator von Thomas Schwenke erstellt und abgewandelt.

Ich bin im Moment noch dabei, an weiteren Seiten zu arbeiten.

Idee → Umsetzung

Am Anfang hatte ich vor, auf jeder Seite über Tiere, oben als Überschrift ein großes Bild zu haben, auf welchem der Titel der Seite steht. Allerdin habe ich mich umentschieden, weil mir das Design so besser gefällt und das große Bild nicht zum Rest der Seite passt.

Die Navigation sollte als erstes durch ein Dropdown-Menü erfolgen, aber ich habe es nicht geschafft, dieses zu erstellen, sodass es funktioniert.

Die Bilder habe ich am Anfang so eingebunden, dass ich die Breite und Höhe der Bilder einzeln jeweils in Pixeln festgelegt habe. Das habe ich am Ende geändert, sodass die Größe der Bilder jetzt relativ festgelegt wird. Die meisten Bilder sind ungefähr 20% der Breite des Browsers groß und die Höhe wird automatisch festgelegt, sodass das Verhältnis des Bildes beibehalten wird.

Außerdem ist mir aufgefallen, dass die Seite nicht auf allen Monitorgrößen ideal dargestellt wird. Also versuche ich jetzt, responsive Webdesign zu betreiben, sodass die Seite auh auf verschiedenen Monitoren gut angezeigt werdne kann. Dafür habe ich ein weiteres Stylesheet erstellt: "responsive.css", welches nur verwendet werden soll, wenn der Browser schmaller als eine bestimmte Breite ist (in diesem Fall 900px). Wenn das der Fall ist, wird das andere Stylesheet genutyt. Bisher ändert dieses Stylsheet nur die Farbe des Textes, damit ich erkennen kann, wann welche Browserbreite genutzt wird. Bei einer Browserbreite von über 900px wird die Seite normal angezeigt. Wenn der Browser zwischen 500px und 900px breit ist, wird die Farbe auf rot geändert (außer, sie ist für bestimmte Elemente genauer angegeben) und, wenn der Browser schmaler als 500px ist, wird die Textfarbe zu Blau geändert.

Der Link zum zweiten Stylesheet ist bisher allerdings nur auf der Startseite eingebunden, da ich noch am damit arbeiten bin.