Zertifikatsprogramm der Oesterreichischen Computer Gesellschaft. OCG WebPublisher. Modul 2 Gestaltung von Webinhalten (HTML&CSS) Syllabus Version 1.

Transkript

1 Zertifikatsprogramm der Oesterreichischen Computer Gesellschaft OCG WebPublisher Modul 2 Gestaltung von Webinhalten (HTML&CSS) Syllabus Version 1.0 OCG Oesterreichische Computer Gesellschaft Wollzeile 1-3 A 1010 Wien Tel: +43 (0) Fax: +43 (0) webpublisher@ocg.at Web: webpublisher.ocg.at Geschlechtsbezogene Aussagen in diesem Syllabus sind auf Grund der Gleichstellung für beiderlei Geschlechter aufzufassen bzw. auszulegen. Urheberrecht liegt bei der OCG, Jahr 2005 In Zweifelsfällen gilt die Version der OCG, veröffentlicht auf webpublisher.ocg.at Dieser Syllabus darf nur in Zusammenhang mit dem Zertifikatsprogramm der OCG verwendet werden.

2 Gestaltung von Webinhalten (HTML&CSS) Modulziele Das Modul überprüft fortgeschrittene Kenntnisse bei der Bearbeitung von Webseiten. Die Kandidaten haben Kenntnisse über den Aufbau von Webseiten, sie können Webseiten erstellen und ändern sowie Grafiken und Multimedia-Elemente einbinden. Sie können Hyperlinks erstellen, Anker verwenden, Tabellen in HTML-Dokumente implementieren und Elemente mittels CSS ausrichten. Weiters können sie Felder und Schaltflächen definieren sowie Frames einsetzen. Sofern nicht anders angegeben, müssen Webseiten sowohl in einem WYSIWYG-Editor als auch direkt im HTML-Code erstellt und modifiziert werden können. Kategorie Wissensgebiet Ref. Wissenspunkt 2.1 Grundlagen HTML Grundlagen Den Begriff HTML definieren Eigenschaften von HTML verstehen: Software-Unabhängigkeit Klartextformat Universelle Einsetzbarkeit Hierarchischer Aufbau von Auszeichnungen verstehen Unterschied zwischen linearem und hierarchischem Aufbau einer HTML-Seite verstehen Navigation innerhalb einer Web-Site entwerfen Die Funktion des W3C Konsortiums bei HTML Empfehlungen verstehen; die Vorteile verstehen, die diese Empfehlungen ermöglichen: Web-Site-Kompatibilität bei Browsern, Zugänglichkeit für Menschen mit besonderen Bedürfnissen Die Bedeutung barrierefreier Web-Sites und deren Eigenschaften kennen sowie bestehende Web-Sites danach beurteilen Werkzeuge Unterschiede und Vor- und Nachteile zwischen reinen Quelltext Editoren und WYSIWYG-Editoren aufzeigen Browserkonforme Erstellung von HTML- Seiten Den Aufbau und die Struktur einer Web-Site verstehen: Ordner/Verzeichnisse Dateien Voreinstellungen einer Site mittels WYSIWYG-Editor ändern: Statusleiste Standardschrift Codierungsfarben Editoren und (Vorschau)Browser Seite 2 von 8

3 2.1.3 Auflösung Bedeutung von unterschiedlichen Bildschirmauflösungen kennen und Ladezeiten Ladezeit einer Seite berücksichtigen und Tipps zur Optimierung kennen Farben Unterschied zwischen Farbwerten (Angabe in Hexadezimal) und Farbnamen erklären Maßeinheiten Die Maßeinheiten für Größenangaben (Punkt, Pixel, Pica, Zentimeter, Millimeter, Inches), die in einer HTML-Seite verwendet werden, erklären, und umrechnen Tags Den Aufbau einer HTML-Seite (html, head, body) verstehen Seitentitel und Meta-Tags (author, keywords, description) zuweisen Kommentar in eine Seite einbinden 2.2 CSS Stylesheets allgemein Die Bedeutung und die Vorteile von Stylesheets für die Formatierung, Platzierung und Ausrichtung von Elementen verstehen Styles definieren, einbinden und kombinieren (zentraler Style-Bereich, in einer externen CSS-Datei oder direkt im einleitenden Tag eines HTML-Elements) Styles für verschiedene Medien angeben (Ausdruck, Bildschirmanzeige, Handheld / PDA / Mobiltelefon) Styles für verschachtelte HTML-Elemente erkennen und definieren Allgemeine und spezifische Style-Klassen erstellen Pseudoformate in CSS definieren und die Schlüsselwörter kennen: (a:link, a:hover, a:focus) Text Die wichtigsten Styles kennen und : a, a:hover, a:active, a:vlink, body, h1, h2, h3, p, div Die Elemente <div> und <span>, deren Bedeutung und Unterschiede kennen und Schriften, alternative Schriften und generische Schriftfamilien angeben Schriftstile, -größen, -gewichte und - varianten sowie Textdekoration und -farben Seite 3 von 8

4 2.2.3 Absatz Wort-, Zeichen- und Zeilenabstände setzen Texteinrückung, vertikale und horizontale Textausrichtung festlegen Ränder und Abstände bestimmen Rahmen und deren Attribute kennen Die Position von Elementen absolut und relativ festlegen, Textumfluss bestimmen Listenformatierung (Darstellung, Einrückung) bestimmen Seitenformate Eigenschaften der Scrollbar und des Cursors bestimmen Hintergrundfarben und -bilder bestimmen 2.3 Formatieren Seitenattribute Seitenfarbe festlegen Einstellungen der Hyperlinkfarben einer Seite ändern Hintergrundbild in die Seite einfügen Ränder der Seite einstellen Wissen, was ein Favicon.ico ist und hinterlegen Text Die Auswahl einer Schriftart vornehmen und sichere Schriften erkennen und verwenden Schriftgröße (absolut und relativ) definieren Bedeutung der Standardschrift kennen Auszeichnungen fett und kursiv einstellen Text einfärben Absätze und Ausrichtung Textabsätze definieren, ausrichten und einrücken Absatzwechsel und Zeilenumbruch Aufzählungen und Listen Aufzählungslisten und nummerierte Listen definieren Die Darstellung der Aufzählungszeichen verändern Trennlinie Eine einfache horizontale Trennlinie erstellen Trennlinie mit Hilfe einer Grafik erstellen Seite 4 von 8

5 Breite, Höhe und Ausrichtung der Grafiktrennlinie verändern 2.4 Eingabe Sonderzeichen Sonderzeichen einfügen: geschütztes Leerzeichen, länderspezifische Sonderzeichen (Umlaute, ß), -Symbol, HTML-eigene Zeichen Vorlagen Den Zweck von Vorlagen kennen und Vorlagen mit einem WYSIWYG-Editor Eigene Vorlagen mit einem WYSIWYG- Editor erstellen Bearbeitbare Bereiche und geschützte Bereiche in einer Vorlage mit einem WYSIWYG-Editor festlegen 2.5 Bilder, Grafiken und Multimedia Bilder Pixelgraphiken, Vektorgraphiken, GIF- Format, JPEG, PNG, Ausgabegröße, Auflösung, Farbtiefe sowie deren Vor- und Nachteile bzw. Webtauglichkeit erklären Grafik einbinden (aus dem gleichen, aus einem anderen Verzeichnis oder eine externe Grafik) Grafikattribute ändern bzw. definieren: Größe, Rahmen, alternativer Text Thumbnails zu Grafiken einbinden Die Verwendung einer transparenten Grafik als Platzhalter erklären und in einer Seite einsetzen Rollover Mit einem Bildbearbeitungsprogramm eine einfache Bildvariation erstellen (Farbe austauschen) Einen Rollover-Effekt mit vorgegebenen Bildvariationen herstellen Multimedia Funktionen interaktiver Inhalte kennen: Rollover Bilder Navigationsleiste Zeitleiste Multimedia-Elemente Flash JavaScript Java-Applets Sound Multimediaobjekte in eine HTML-Seite einbinden Seite 5 von 8

6 2.6 Links Hyperlinks Einem Text bzw. einer Grafik einen Hyperlink zu einer Datei im gleichen, oder in einem anderen Verzeichnis hinzufügen. Einem Text bzw. einer Grafik einen Hyperlink zu einer WWW-Adresse (URL) hinzufügen. Einem Text bzw. einer Grafik einen Hyperlink zu einer -Adresse hinzufügen Zwischen absoluten und relativen Hyperlinks unterscheiden Zielfenster eines Links bestimmen Rahmen bei Grafik-Links unterdrücken Anker und Textmarken Anker setzen Auf Anker verweisen, sowohl innerhalb einer Seite als auch auf andere Seiten Imagemap Die Funktion einer Imagemap kennen Arten von Hotspots kennen und eine Imagemap mit WYSIWYG-Editor aufbauen 2.7 Tabellen Struktur von HTML- Tabellen Bedeutung von Tabellen für die Platzierung und Ausrichtung von Elementen erklären und verstehen Die Browserkompatibilitäten von Tabellenattributen beurteilen Zeilen und Spalten definieren, Zellen verbinden und hinzufügen Tabellen verschachteln Formatierung der ganzen Tabelle Die Breite und Höhe einer Tabelle bestimmen Zwischen absoluter, automatischer und prozentueller Größenangabe unterscheiden Farben der Tabellenelemente verändern Hintergrundbild einfügen Rahmen der Tabelle in Breite und Farbe definieren Formatieren der Zellen Die vertikale Ausrichtung des Zellinhalts definieren Seite 6 von Zellenabstand und Zelleninnenabstand verändern Farben für Zellen und Gitternetzlinien definieren, Browserkompatibilität dieser Attribute kennen

7 2.7.4 Grafiken in Tabellen Eine Grafik als Inhalt einer Zelle einsetzen 2.8 Formulare Definition Einen Formularbereich und eine Übertragungsmethode definieren Feldnamen vergeben Formularelemente Ein- und mehrzeilige Eingabefelder definieren Textvorbelegung von Textfeldern definieren Listenfelder Auswahllisten erstellen Auswahlliste mit Mehrfachauswahl erstellen Vorselektion (Standardwert) für einen Eintrag definieren Absendewert von Einträgen bestimmen Radiobuttons und Checkboxen anlegen Tabulatorreihenfolge in einem Formular festlegen Tastenkürzel festlegen Schaltflächen Schaltflächen definieren Schaltflächen zum Absenden und Rücksetzen eines Formulars anlegen Grafiken als Schaltflächen verwenden Versteckte Formularfelder Zweck und Funktion von versteckten Formularfeldern erklären Formularoptik Felder in Formularen logisch gruppieren Formulare ihrer Verwendung entsprechend formatieren 2.9 Frames Allgemeines Zweck und Grundaufbau von Frameseiten erklären Vorteile und Nachteile der Verwendung von Frames verstehen Framesets Aufteilung eines Framesets festlegen Absolute und relative Größen definieren Namen für Frame-Elemente definieren Noframes-Funktion aktivieren und Alternativen zu Frames anbieten Framesets ineinander verschachteln Seite 7 von 8

8 2.9.3 Frameseiten Frameseiten in das Frameset einbinden Scrollbars erzwingen und verhindern Mindestabstände zwischen Fensterrand und -inhalt in einem WYSIWYG-Editor bestimmen Unsichtbare und farbige Fensterrahmen mittels WYSIWYG-Editor definieren Hyperlinks und Targets Die Besonderheiten von Hyperlinks innerhalb von Frameseiten kennen und spezielle Targets (top, self, parent) Bereiche Allgemeines Eigenschaften und Aufgaben von Bereichspositionierungen mit Hilfe von <div id=" " style="position. > beschreiben Bereichsindex definieren und Einen Bereich innerhalb eines anderen Bereichs erstellen Definition Position (absolut und relativ) von Bereichen festlegen Größe und Anzeige von Bereichen festlegen Texte, Bilder und andere HTML-Seiten einfügen Formatieren Transparente und färbige Bereiche erstellen Hintergrundbild in einen Bereich einfügen Text im Bereich formatieren Seite 8 von 8