Webdesign

Webdesign wird an unserer Schule von einem erfahrenen Webdesigner (http://www.webhandwerk.at/) unterrichtet, welcher in den Bereichen HTML, PHP, digitale Bildbearbeitung, MySQL, CMS, Office-Schulung etc. Erfahrungen besitzt. Er hielt vor Online-Redakteuren der Zeitschrift NEWS (News Networld) Vorträge über HTML-Grundlagen und Webdesign, unterrichtete am Pädagogischen Institut der Stadt Wien Direktoren von Wiener Schulen in MS-Officeanwendungen, Internetbenutzung und eMail-Verwendung und ist Mitglied der Entwicklungsgruppe der Wiener Kooperativen Mittelschulen mit Schwerpunkt Informatik.

Überblick Webdesign:

Als Scriptum verwenden wir Auszüge aus Sefan Münz´s SELFHTML, da dieses das "Standardwerk" für Beginner darstellt, im Internet frei verfügbar und kostenlos ist.

Als Editor verwenden wir das OpenSource Programm NVU-Composer. Nvu - ausgesprochen "N view" - ist eine Stand-Alone-Weiterentwicklung der Mozilla-Suite-Komponente Composer, basierend auf der Gecko-Engine von Mozilla. Dieses Programm ist ebenfalls frei verfügbar und kostenlos.

Als OpenSource Browser empfehlen wir Mozilla Firefox. Es ist schnell, klein, sicher und bietet viele Komfortfunktionen, nützliche Erweiterungen sowie Themes.

Um die Grundlagen von HTML als Hyper Text Markup Language zu verstehen, werden die ersten Schritte jedoch im Notepad von Windows unternommen, da hier jede Komfortfunktion fehlt und die Schüler reinen Quellcode schreiben müssen.

Der Unterricht gliedert sich in mehrere Segmente:

1. Abschnitt - HTML

Erlernen der Grundstrukturen von HTML, Grundgerüst einer HTML-Datei (Head, Title, Body etc.). Erlernen einfacher Tags sowie das Verstehen des Aufbaus einer Textauszeichnung. Als Auszeichnungssprache enthält HTML daher Befehle zum Markieren typischer Elemente eines Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen.

HTML

Elemente auszeichnen
Tags in HTML
Verschachtelung von Tags
Attribute in Tags
Grundgerüst einer HTML-Datei
Regeln bei der Texteingabe
Deutsche Umlaute und scharfes "ß"
HTML - eigene Zeichen maskieren

Farben in HTML

Hexadezimale Angabe von Farben
Farbdefinitionen

Absatztypen und Textgestaltung

Überschriften definieren
Überschriften ausrichten
Textabsätze definieren
Textabsätze ausrichten
Zeilenumbruch erzwingen
Automatischen Zeilenumbruch verhindern
Geschützte Leerzeichen
Zeilenumbruch erlauben

Listen definieren

Numerierte Listen definieren
Listen alphabetisch nummerieren
Listen römisch nummerieren
Numerierung beeinflussen
Aufzählungslisten definieren
Bullet-Typ festlegen

Schriftgröße, Schriftfarbe, Schriftart

Präformatierter Text für Quellcode usw.
Trennlinien definieren
HTML-Tags für physische Textauszeichnung

Verweise

Schema für Verweise in HTML
Verweis zu Datei im gleichen Verzeichnis
Verweis zu Datei in anderem Verzeichnis (relativ)
Verweis zu Anker innerhalb einer anderen Datei
Verweis zu WWW-Adresse setzen (absolut)
Verweis zu FTP-Adresse setzen

Grafik referenzieren

Hintergrundbild einbinden
Alternativer Text
Rahmen um Grafiken
Breite und Höhe einer Grafik mit angeben
Grafikbeschriftung oben, mittig, unten

Tabellen

Höhe und Breite der gesamten Tabelle erzwingen
Breite von Spalten erzwingen
Höhe von Zeilen erzwingen
Ausrichtung horizontal
Ausrichtung vertikal
Zellen in einer Zeile spaltenweise verbinden
Zellen in einer Spalte zeilenweise verbinden
Zellen spalten- und zeilenweise zugleich verbinden
Hintergrundfarbe/Bilder für Tabellen

Formulare

Einzeilige Eingabefelder definieren
Mehrzeilige Eingabefelder definieren
Auswahlliste definieren
Auswahlliste mit Mehrfachauswahl
Radiobuttons definieren
Checkboxen definieren
Buttons zum Absenden oder Abbrechen definieren

Frames

Frame-Sets definieren
Scrollbars (Bildlaufleisten) erzwingen/verhindern
Unveränderbare Fenstergröße
Rahmendicke bzw. unsichtbare Fensterrahmen
Verweise zu anderen Frames
Verweise, die ein Frame-Set beenden

2. Abschnitt - NVU

Erlernen von NVU.

Überführen des gelernten Wissens über HTML in einen WYSIWYG-Editor. Erkennen der Erleichterungen, aber auch der Grenzen eines Editors. Betimmte Tätigkeiten müssen immer im Quelltext vorgenommen werden.

3. Abschnitt - eigenes Projekt

Die Schüler recherchieren im Internet nach Informationen, Daten und Bildern zu einem von Ihnen gewählten Projekt (Fußballverein, Sänger, Sportart, Autos...) und speichern diese Daten lokal. Danach wird mit Hilfe von NVU ein Webprojekt erstellt. Diese muss mehrere Unterseiten, ein einheitliches Layout und eine ordentliche Gliederung besitzen.



Webdesign Webdesign wird an unserer Schule von einem erfahrenen Webdesigner (http://www.webhandwerk.at/) unterrichtet, welcher in den Bereichen HTML, PHP, digitale Bildbearbeitung, MySQL, CMS, Office-Schulung etc. Erfahrungen besitzt. Er hielt vor Online-Redakteuren der Zeitschrift NEWS (News Networld) Vorträge über HTML-Grundlagen und Webdesign, unterrichtete am Pädagogischen Institut der Stadt Wien Direktoren von Wiener Schulen in MS-Officeanwendungen, Internetbenutzung und eMail-Verwendung und ist Mitglied der Entwicklungsgruppe der Wiener Kooperativen Mittelschulen mit Schwerpunkt Informatik. Überblick Webdesign: Als Scriptum verwenden wir Auszüge aus Sefan Münz´s SELFHTML, da dieses das "Standardwerk" für Beginner darstellt, im Internet frei verfügbar und kostenlos ist. Als Editor verwenden wir das OpenSource Programm NVU-Composer. Nvu - ausgesprochen "N view" - ist eine Stand-Alone-Weiterentwicklung der Mozilla-Suite-Komponente Composer, basierend auf der Gecko-Engine von Mozilla. Dieses Programm ist ebenfalls frei verfügbar und kostenlos. Als OpenSource Browser empfehlen wir Mozilla Firefox. Es ist schnell, klein, sicher und bietet viele Komfortfunktionen, nützliche Erweiterungen sowie Themes. Um die Grundlagen von HTML als Hyper Text Markup Language zu verstehen, werden die ersten Schritte jedoch im Notepad von Windows unternommen, da hier jede Komfortfunktion fehlt und die Schüler reinen Quellcode schreiben müssen. Der Unterricht gliedert sich in mehrere Segmente: 1. Abschnitt - HTML Erlernen der Grundstrukturen von HTML, Grundgerüst einer HTML-Datei (Head, Title, Body etc.). Erlernen einfacher Tags sowie das Verstehen des Aufbaus einer Textauszeichnung. Als Auszeichnungssprache enthält HTML daher Befehle zum Markieren typischer Elemente eines Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen. HTML Elemente auszeichnen Tags in HTML Verschachtelung von Tags Attribute in Tags Grundgerüst einer HTML-Datei Regeln bei der Texteingabe Deutsche Umlaute und scharfes "ß" HTML - eigene Zeichen maskieren Farben in HTML Hexadezimale Angabe von Farben Farbdefinitionen Absatztypen und Textgestaltung Überschriften definieren Überschriften ausrichten Textabsätze definieren Textabsätze ausrichten Zeilenumbruch erzwingen Automatischen Zeilenumbruch verhindern Geschützte Leerzeichen Zeilenumbruch erlauben Listen definieren Numerierte Listen definieren Listen alphabetisch nummerieren Listen römisch nummerieren Numerierung beeinflussen Aufzählungslisten definieren Bullet-Typ festlegen Schriftgröße, Schriftfarbe, Schriftart Präformatierter Text für Quellcode usw. Trennlinien definieren HTML-Tags für physische Textauszeichnung Verweise Schema für Verweise in HTML Verweis zu Datei im gleichen Verzeichnis Verweis zu Datei in anderem Verzeichnis (relativ) Verweis zu Anker innerhalb einer anderen Datei Verweis zu WWW-Adresse setzen (absolut) Verweis zu FTP-Adresse setzen Grafik referenzieren Hintergrundbild einbinden Alternativer Text Rahmen um Grafiken Breite und Höhe einer Grafik mit angeben Grafikbeschriftung oben, mittig, unten Tabellen Höhe und Breite der gesamten Tabelle erzwingen Breite von Spalten erzwingen Höhe von Zeilen erzwingen Ausrichtung horizontal Ausrichtung vertikal Zellen in einer Zeile spaltenweise verbinden Zellen in einer Spalte zeilenweise verbinden Zellen spalten- und zeilenweise zugleich verbinden Hintergrundfarbe/Bilder für Tabellen Formulare Einzeilige Eingabefelder definieren Mehrzeilige Eingabefelder definieren Auswahlliste definieren Auswahlliste mit Mehrfachauswahl Radiobuttons definieren Checkboxen definieren Buttons zum Absenden oder Abbrechen definieren Frames Frame-Sets definieren Scrollbars (Bildlaufleisten) erzwingen/verhindern Unveränderbare Fenstergröße Rahmendicke bzw. unsichtbare Fensterrahmen Verweise zu anderen Frames Verweise, die ein Frame-Set beenden 2. Abschnitt - NVU Erlernen von NVU. Überführen des gelernten Wissens über HTML in einen WYSIWYG-Editor. Erkennen der Erleichterungen, aber auch der Grenzen eines Editors. Betimmte Tätigkeiten müssen immer im Quelltext vorgenommen werden. 3. Abschnitt - eigenes Projekt Die Schüler recherchieren im Internet nach Informationen, Daten und Bildern zu einem von Ihnen gewählten Projekt (Fußballverein, Sänger, Sportart, Autos...) und speichern diese Daten lokal. Danach wird mit Hilfe von NVU ein Webprojekt erstellt. Diese muss mehrere Unterseiten, ein einheitliches Layout und eine ordentliche Gliederung besitzen.