• (X)HTML & CSS(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: 

 

  • FloatingFloating

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: 

 

    • SeminarprotokollSeminarprotokoll
    Freitag, 28.01.2010, 08.15.30 Uhr

    • 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

          Privates

        ... zu Joe Brandes

        Sie finden auf dieser Seite - als auch auf meiner privaten Visitenkarte joe-brandes.de einige Hintergrundinformationen zu mir und meinem Background.
        Natürlich stellt die IT einen Schwerpunkt in meinem Leben dar - aber eben nicht nur ...

        joe brandes 600px

        Private Visitenkarte / Technik: HTML & CSS /
          joe-brandes.de

          Jobs

        ... IT-Trainer & Dozent

        Ich erarbeite und konzipiere seit über 25 Jahren IT-Seminare und -Konzepte. Hierfür stehen der "PC-Systembetreuer / FITSN" und der "CMS Online Designer / CMSOD". Ich stehe Ihnen gerne als Ansprechpartner für Ihre Fragen rund um diese und andere IT-Themen zur Verfügung!

        becss 600px

        BECSS Visitenkarte / Technik: HTML & CSS /
          becss.de

          Hobby

        ... Snooker & more

        Wer einmal zum Snookerqueue gegriffen hat, der wird es wohl nicht wieder weglegen. Und ich spiele auch immer wieder gerne eine Partie Billard mit den Kumpels und Vereinskameraden. Der Verein freut sich über jeden, der einmal in unserem schicken Vereinsheim vorbeischauen möchte.

        bsb 2011 600px

        Billard Sport BS / Joomla 3.x /
          billard-bs.de

        PC Systembetreuer ist J. Brandes - IT seit über 35 Jahren - Technik: Joomla 3.4+, Bootstrap 3.3.4 und "Knowledge"

        © 2024 - Websitedesign und Layout seit 07/2015 - Impressum - Datenschutzerklärung
        Nach oben