moderne Navigation mit Hilfe von css

EA: Untersuche auf folgenden Seiten die Navigation.

Untersuche den Quelltext und halte fest wie die Navigation umgesetzt wird. Untersuche die zugehörige css-Datei und halte fest wie sie eingebunden wird und welche Formatierungen für die Navigation verwendet wird. Untersuche ob es Gemeinsamkeiten gibt.

• Beispiel 1
  
• Beispiel 2
  
  
• Beispiel 3
  

EA: Studiere kurz den zugehörigen Bereich im css-Buch.

Achte besonders darauf wie man individuelle Anpassungen vornehmen kann.

TA: Vergleicht die Ergebnisse.

Vergleicht zu zweit eure Ergebnisse, besprecht Vor- und Nachteile solcher Navigationen und haltet sie schriftliche fest. Wie kann man solche Navigationen grafisch ansprechend gestalten?
Sucht Beispiele und haltet sie fest. Wählt ein Beispiel aus und erklärt uns wie es gemacht wurde.

Erstellt eine Powerpoint Datei mit euren Ergebnissen.

EA: Lest folgenden Artikel und notiert die wichtigsten Punkte.

Artikel „Where am I„;
als Hilfe für unbekannte Wörter eine website zur Übersetzung;

TA: Untersucht euer Beispiel

diskutiert anschliessend zu zweit den inhalt und untersucht ob in eurem Beispiel das berücksichtigt wird;

Hausübung

In der Hausübung werden die Inhalte angewandt und vertieft und einige Probleme ersichtlich. Indem ich eure Hausübung überprüfe kann ich euch auf die Probleme hinweisen und Hinweise zur Lösung geben. Dadurch sollt ihr in der Lage sein die Probleme zu erkennen, um sie zukünftig selbständig lösen zu können

Ziel HÜ

Die angeführte website soll von euch komplett mit Ebenen und css erstellt werden. Folgende Bestandteile werden benötigt:

1. ein Hintergrundbild
2. ein scrollbarer Bereiche (div Element) für den Inhalt
3. der Text für den scrollbaren Bereich, formatiert laut Vorlage

Vorbereitung: Text für den scrollbaren Bereich erstellen

Begonnen wird mit den schrittweisen Anweisungen laut PDF Dokument von Aufgabe 1 bis Aufgabe 3. Hier formatiert ihr in DW den Text für den scrollbaren Bereich. Importiert euch die Bilder in DW um die Farben mit der Pipette zu übernehmen und erstellt immer eine externe css Datei.

Alle Dateien aus den Aufgaben 1-3 sind zu erstellen und mir in einem gezippten Ordner zu schicken.

Website erstellen

Nun geht es darum die Ergebnisse von Aufgabe 3 in die oben beschriebene website einzubauen.

1. neues HTML Dokument erstellen
2. Hintergrundbild mit css einbinden
3. ein scrollbarer Bereiche (div Element) für den Inhalt erstellen
4. Inhalte von Aufgabe 3 einfügen (inkl. css)
5. Test im Browser
6. zippen und an mich schicken

Material

Hier bekommt ihr nochmals die  Aufgabenstellung.

Hier bekommt ihr alle notwendigen Dateien.

Hintergrundbild

Grafik für den Hyperlink

Vorlage für Aufgabe 1

Vorlage für Aufgabe 2

Vorlage für Aufgabe 3

Hyperlinks machen was sie wollen

Bei den Anfängen gibt es immer Porbleme mit der Formatierung der Hyperlinks. Woher soll man auch wissen, dass die Reihenfolge und Vollständigkeit der css Befehle entscheidend für eine korrekte Darstellung in allen Browsern ist.

webdesign mit css: Termin 1

Ziele webdesign Termin 1

• Kennenlernen des Aufbau und erstellen eines HTML Dokumentes in einem Text Editor (BBedit);
• Vorteile, Aufbau und Funktionsweise von css;
• Einbindung einer externen css Datei;
• gestalten eines Newsblock mit css im Dreamweaver;
• Hintergrundbilder für eine website und mögliche Einstellungen für die Positionierung und Wiederholung;
• arbeiten mit online css-Hilfe und Buch Unterlage;

Übung

1. folgende Aufgabe sind laut Anleitung zu erstellen
2. der fertige News Block ist in eine eigene Website als scrollbarer Bereich einzufügen
3. Abgabe:  gezippter Ordner

Hilfsmittel

Self HTML online Hilfe (css und HTML)
Wallpapers auf 10 0000 bc