Logo HTML5

HTSTA - STATISCHE WEBSEITEN

Logo CSS3

Kapitel 04: Design Basics

Kursablauf:

Allgemeine Bemerkungen:

Das Kapitel ist mittels der Powerpoint Slides zu erarbeiten. Die Schüler können, müssen aber nicht, das Kapitel selbst erarbeiten. Frontal-Kurs!

Das Kapitel "Page Layout Design" soll besonders hervor gehoben werden!

Vorbereitung "Programmieren lernen":
  • Ergonomie und Gestaltung eines User Interfaces: komplettes Kapitel
Zu behandelnde Seiten:
S. 70-93
Lesen Hausaufgabe:
S. /
Autonom erarbeiten in der Schule:
S. 88-89, 92-93

Denke daran die unbekannten Wörter und Ausdrücke aufzuschreiben und nachzuschlagen!

Aufgaben:

  1. Diskussionsrunden zu den einzelnen Themen. Eventuell Experten Rally.
  2. Installiere und benutze das ColorZilla-Plugin für Firefox.
  3. In der Klasse wird gemeinsam ein Website Projekt ausgewählt. Dann wird (in Gruppen oder in der Klasse) eine Mindmap für die Website erstellt. Als Vorbereitung kann auch zuerst ein Brainwriting zum Thema statt finden. Die Mindmap wird mittels einer Software erstellt (z.B. der open source Software Freemind).
  4. Erstelle ein Blueprint für das vorher definierte Projekt. Erstelle 2 Webseiten mit unterschiedlichen Inhalten. Die beiden Blueprints sind mit Bleistift auf Papier zu erstellen und dem Lehrer auszuhändigen. (Begriff: Mockup)
  5. Erstelle die Seite projectSettings.html. Hier werden die wesentlichen Merkmale welche man in einer Website von Anfang an festlegen soll aufgelistet. In einem späteren Projekt werden dann die Werte/Beschreibungen für jedes Merkmal hier angegeben.

Verständnisfragen:

  1. Optional: Review Questions.

Zusatzaufgaben:

  1. Hands-On Exercise.