(X)HTML & CSS
Das neue Zertifikat "X-pert CMS Online Designer (VHS)" wirft seinen Schatten voraus: ab dem 24.01.2011 findet an der KVHS Wolfenbüttel ein Wochenseminar (Bildungsurlaub) zum Thema "(X)HTML & CSS" - das Seminar entspricht also Modul I des neuen 4-modularen Zertifikats! Anhand praktischer Übungen werden wir die grundlegenen Techniken der Webpublikatiionen erarbeiten.
Hier die Rahmendaten unseres Seminars:
Ort: KVHS Wolfenbüttel, Harzstraße 2-4, Raum Windows (1.13)
Zeiten: Mo, 24.01. bis Fr, 28.01.2011, jeweils 08.00 - 15.30 Uhr (gemäß Absprache im Sem)
Downloads: eigener Download-Bereich für unsere Seminarwoche!
Wir wünschen - wie immer - viel Spaß und Erfolg bei unseren Seminaren. Hier jetzt unser ausführlicher "Blog/Artikel" zum Seminar...
Montag, 24.01.2011, 08.00 - 15.30 Uhr
- Begrüßung, Themen der Woche, Cobra-Shop VHS-Lizenzen,
Hinweis auf "X-pert CMS Online Designer" (Info-Link) - Ausführliches Skript geführt von Trainer J. Brandes
End-Protokoll der Woche wird als Download diesem Artikel beigefügt - Tools: 7-Zip, PsPad
- Datenstrukturen für Programme und Hypertextdokumente auf Datenlaufwerken der TN-PCs
- Trennung von Layout (HTML) und Design (CSS)
- Einrichtung Editor PsPad (Hilfe über Selfhtml-Projekt, Code-Vervollständigung, Syntaxhighlighting)
- HTML-Entities (& / < / > / ")
- Styles per CSS zuweisen:
direkt in Tags, im head eines HTML-Dok, extern in separater CSS-Datei - Download Montag:
Dienstag, 25.01.2011, 08.00 - 15.30 Uhr
- Wiederholung, TN-Fragen, Bereitstellung der Arbeitsumgebung
- Semantischer Code:
h1,...,h6 (headings / Überschriften
em (emphatischer Text)
acronym (Akronyme)
abbr (Abkürzungen), ... - Fortsetzung CSS:
Einbindung externer CSS-Datei per link-Tag im head-Bereich einer HTML-Datei - Verknüpfungen (Hyperlinks) zu
HTML-Dok (... href="/dienstag2.html" ...)
Mailadresse (... href="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"...)
Website (... href="http://www.kvhs-wf.de" target="_blank" ...) - Bilder (Images) einfügen: img-Tag
<img src="/bild.jpg" alt="Bildbeschreibung" title="Bildbeschreibung" />
Bild auch Link nutzbar (Rahmen ausschalten - border: 0;) - FIREBUG: Add-Ons zum Firefox
- div-Blöcke führen zum Tabellen-losen Layout
Zuweisung von IDs zu den Blöcken: <div id="test"> ... </div> - Download Dienstag:
Mittwoch, 26.01.2011, 08.00 - 15.30 Uhr
- Wiederholung, TN-Fragen, Bereitstellung der Arbeitsumgebung
Tipp: Portable Browser (Firefox Portable, siehe www.portableapps.com) und Editoren - DTD - Dokument Typ Deklarationen (Definitionen)
wichtige Standards: HTML 4.01 strict, XHTML 1 strict, XHTML 1 transitional
Infos auf Selfhtml-Projekt (Link) - meta-Tags
Kopfinformationen für HTML-Doks
Autor/author, Inhalt/conten, Schlüsselworte/keywords, ...
Infos auf Selfhtml-Projekt (Link) - Praxis: ("Barrierefreier Mittwoch" ;-)
ausführliches Beispiel von Stephan Heller (Artikel "Internet Professional", 2007, www.daik.de)
Tabellenloses Layout mit div-Blöcken und float-Technik - Größenangaben in CSS:
fest: px (Pixel), pt (Punkte/points, standard: 1/72 Zoll, Zoll entspricht 2,54cm)
proportional: % (Prozent), em (Verhältnis vom Kind/child-Element zum Eltern/parent-Element) - Download Mittwoch:
Floating
Donnerstag, 27.01.2011, 08.00 - 15.30 Uhr
- Wiederholung, TN-Fragen,
Fortsetzung der Arbeit an unseren "Beispiel"-Site - Planung und Entwurf einer eigenen Site
inklusive Navigationstechnik und Sitstruktur
Layout, Design, Technik (ausführlich in Wochenbericht zum Seminar) - Praxis:
Erstellung einer kompletten verlinkten Website mit mehreren HTML-Dokumenten und CSS-Styling - Dimension von Websites besprochen
Monitorauflösung und statische vs. dynamische/fluide Layouts - Bildoptimierung
Optimierung der Auflösungen, Dateigrößen und Grafikformate
Tool: Riot, XnView - Download Donnerstag:
Seminarprotokoll
- Wiederholung, TN-Fragen, Bilder "floaten" lassen
- Float/Clearing Technik verfeinern für optimalen Bild-/Textfluss
- Website mit Javascripts erweitern
Beispielskripte: Rokbox (benötigt MooTools) - Quellen in der Seminardokumentation - Firefox: (weitere Add-ons)
YSlow, CSS Usage, FirePicker, CodeBurner, Web Developer (ChrisPederick.com), ColorZilla - Hosting, Domains, Denic
- Webpublishing:
FTP-Programm mit Servernamen, Benutzername und Kennwort (Filezilla) - nicht-statische Techniken: (wir wollen z. B. den footer in 500 HTML-Seiten verändern ;-)
SSI (Server Side Includes), PHP (serverseitige Skripte), Dreamweaver (mit DW-Template-Technik) - Materialien für das Seminar komplettieren (SW und Co für TN)
Informations-Links auf pcsystembetreuer.de ("Futter" für die nächsten Wochen/Jahre ;-) - TN-Bescheinigungen und -Feedback
- Download Freitag:
- Download Seminarprotokoll:
Auch von dieser Stelle nochmals schönen Dank für Ihr freundliches und positives Feedback - schön dass das Seminar so gut angekommen ist - bleiben Sie bitte weiter dran an der Technik und in Kontakt mit uns.
Ihr Trainer J. Brandes