{jcomments on}

  • (X)HTML & CSS(X)HTML & CSS

Aus dem Zertifikat "X-pert CMS Online Designer (VHS)" findet ab Montag, 26.03.12 bei der KVHS Wolfenbüttel ein Seminar zum Modul "(X)HTML & CSS" statt. Wir wollen an Hand praktischer Beispiele die Techniken für die Layouts und Designs von Webseiten kennen lernen. Diese werden wir sauber mit den beiden Techniken HTML und CSS trennen und anwenden.

Für Teilnehmer, die an einer anschließenden (freiwilligen) Prüfung im Modul I des Zertifikats interessiert sind, werden im Seminar der Termin und die notwendigen Vorbereitungen auf die Prüfung abgesprochen!

Hier die Rahmendaten unseres Seminars:

Ort: KVHS Wolfenbüttel, Harzstraße 2-5, Raum "Linux"
Zeiten: Mo, 26.03. bis Fr, 30.03.2012; jeweils 08.00 - 15.30 Uhr

Ich werde unser Seminar an dieser Stellen mit täglichen Informationen begleiten...
Ihr Trainer Joe Brandes

 

  • montag.htmlmontag.html
Montag, 26.03.2012, 08.00 - 15.30 Uhr

  • Orientierungsphase, Pausenzeiten, Teilnehmerthemen, ...
    Hinweis: Software für VHS-Teilnehmer über Cobra-Shop
  • Ausstattung TN-PCs:
    Hinweis auf Sicherungs-Hardware "Reborn Cards"
    Arbeitsverzeichnis(se) auf Datenlaufwerk D:
    Softwarelösungen hier als portable Lösungen (wegen Reborn-Technik)
    Editor: Notepad++
    Browser: Mozilla Firefox (inklusive AddOns FireBug, Web Developer)
  • Rechner konfigurieren:
    Windows Explorer (Win + E) - Organisieren - Ordner- und Suchoptionen... - Register Ansicht - Erweiterungen bei bekannten Dateitypen ausblenden deaktivieren
    Portablen Firefox als Standardbrowser einrichten: Rechte Maus auf html-Dok - Öffnen mit... - Durchsuchen... - den Portable Firefox aussuchen und "Dateityp immer mit dem ausgewählten Programm öffnen" aktivieren
  • Allgemeines
    Trennung von Layout (html) und Design (css); siehe: www.csszengarden.com
    Beachten von semantischem Code (em, strong, cite, ...)
    html-Kommentare mit <!-- ..Kommentar.. -->
  • HTML-Tags (erste Website montag.html)
    den Baukasten für HTML Layouts kennen gelernt
    Standardaufbau:
    html
    , head (mit title-Tag - Titel der Seite für Lesezeichen), body (Browser-Körper/Inhalt)
    Quellen für Recherche und eigene Trainings: de.selfhtml.org, wiki.selfhtml.org
    Beispiele auf Website montag.html:
    p (Paragraph, Absatz), br (Break, Zeilenumbruch);
    Anm.: bitte keine Texte ohne Absatz-Tags!,
    ol / ul (sortierte / unsortierte Listen; li - List items); ul-Listen werden später Navigationen
    h1 bis h6 (Headings, Überschriften der Ebenen 1 bis 6)
    a (Anchor, Link); benötigt als Attribut href="/" die URL für Verlinkung;
    Tipp: target="_blank" öffnet in neuem Fenster
    Links zu Mailadressen mit URL "mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"
    Tipp: Übergabe von Betreff mittels "mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!?subject=Testbetreff"
  • HTML-Entities
    nur bei gleicher Codierung (Zeichencodetabellen) werden alle Zeichen korrekt dargestellt
    in Browsern mit abweichender Codierung Umlaute anzeigen lassen
    Lösung: Einsatz von HTML-Entities am Beispiel Ü (groß U Umlaut): &Uuml; (benanntes Entity) und &#220; (unicode)
    siehe Info-/Übersichtsseiten auf de.selfhtml.org zum Themas (Link1, Link2)
  • Bilder (images)
    img-Tag mit Zuweisung von Quelle per Attribut src="/" und bitte immer mit alt- und title-Attributen
    Beispiel: <img src="/bilder/bz-wf.jpg" alt="Alternativtext" title="Bildtitel" />
    alt und title natürlich gerne auch mit identischem Text; hier zusätzlicher Ordner bilder als Pfad angegeben
    Bilder als anklickbares Objekt in Kombination mit Links (a-Tag) genutzt
  • CSS (Styles)
    Zuweisung von Design (Aussehen) der Tags mittels CSS
    CSS kann an drei Stellen zugewiesen werden: (Link zu selfhtml)
    1. direkt in einem Tag
    2. zentral im head eines html-Dokuments
    3. extern als eigene CSS-Datei
    Erste Zuweisungen und Tests bei kombinierten Anweisung (1. und 2.)

 

  • CSS KlassenCSS Klassen
Dienstag, 27.03.2012, 08.00 - 15.30 Uhr

  • Rekap, TN-Fragen
  • TN-PCs vorbereiten (Umgebung konfigurieren)
    1. Windows Explorer (Win + E) - Dateierweiterungen einblenden
    2. Portablen Notepad++ (ab Vista/Win7 in der Unicode-Variante starten)
    3. Portablen Firefox als Standardbrowser einrichten
  • Firefox optimieren (Link zu Firefox Addon Seite)
    AddOn Firebug installiert (perfekte Live-Analyse von html und css!)
    AddOn Dummy Lipsum Generator (für Fülltexte auf Websites)
  • CSS (Fortsetzung)
    weitere Styles ausprobieren, Styles auslagern in CSS-Datei
    font-family statt font nutzen
    Übersichten über (klassisches) CSS auf
    css4you.de-Website (Link) oder auch
    css.talky.de (Link)
    CSS Help Sheet (Hilfe Seite) - verlinkt auf Smashing Magazine (Link)
    Kommentare in CSS mit /* ...Kommentar... */
  • Externe CSS Datei
    gleichzeitige Anpassung vieler HTML-Seiten, Techniken "wie auf" csszengarden.com
  • Klassen und Pseudoklassen
    Klassen definieren und nutzen
    Beispiele: img.spezial vs. .spezial
    Zuweisung von mehreren Klassen: class="stil01 spezial"
    Vererbung von Eigenschaften an Kinderelemente (Beispiel: Styling von body vererbt an h1, h2, p, ...)
  • Boxmodell (oder Bordermodell)
    Innenabstände (padding), Rahmen (border) und Außenabstände (margin)
    kompaktes Definieren: padding: 15px 15px 35px 15px;
    statt: padding-top: 15px; padding-right: 15px; padding-bottom: 35px; padding-left: 15px;
    Erläuterungen zum Boxmodell (Link)
  • Farben
    Definieren in RGB und mit # : z.B. Schwarz: #000000 und Weiß: #FFFFFF
    Erläuterungen auf selfhtml.org (Link)
    benannte Farben möglichst vermeiden!
    Erweiterung des Firefox-Firebug Teams mit dem Firebug-Tool Firepicker
    Tool für die Aufnahme von Farbwerten auf beliebigen Seiten: Colorzilla
  • Inline- und Outline-Elemente
    bisherige Tags/Elemente wie h1...h6 oder p sind Outline-Elemente, d.h. diese nehmen die gesamte Browserbreite ein, sodass die Elemente letztlich untereinander im Body liegen;
    Inline-Element span erlaubt die "Klammerung" im fließende Text eines Absatzes
  • Vorschau auf Mittwoch: eine Seite aus Blöcken von Anfang bis Ende

 

  • Floating DIVsFloating DIVs
Mittwoch, 28.03.2012, 08.00 - 15.30 Uhr

  • Rekap, TN-Fragen
  • Technik-Theorie
    Browser ist der Web-Client für die Darstellung der Dokumente auf Web-Servern (Client-Server-Prinzip)
    diese Daten setzen sich zusammen aus:
    - der Seiten-"Grammatik/Rechtschreibung": SGML bzw. Dokumenttyp-Definitionen DTDs
    - dem Styling (Design/Layout) der Seiten mittels CSS
    - den dynamischen Skripten in Form von JavaScript
  • DTDs (Dokument Definitionen)
    HTML 4.01 (klassischer Standard, Varianten)
    XHTML 1.0 (als transitional oder strict Variante)
    HTML5 (die gesammelten Ideen für aktuelle oder zukunftsorienierte Webseiten,
    Beachten: nicht alle neuen HTML5-Tags werden von allen Browsern unterstützt!, attraktive neue Multimedia-Tags wie <video>, <audio> verlangen aktuelle Browser und entsprechend vorbereitete Video-/Audio-Dateien - Stichwort: Codecs wie OGG, WebM oder H.264)
    Übersicht zu HTML5 Technik Unterstützung: Link
    Valider Code gewünscht (aber nicht zwingend gefordert!)
    Test der Validität mittels diverser Webportale (validator.w3.org) oder Tools
  • Zen Coding
    die ultimative Unterstützung für das HTML-Editieren, Verfügbar für nahezu alle Editoren,
    Notepad++: Plugin ZenCoding - Python (Erweiterung) installiert, erste Beispiele (ausführlichere Beispiele: Link, Link)
    html:5 (Strg+Alt+Enter) erzeugt komplettes HTML5-Gerüst
    html:xt - erzeugt XHTML 1.0 transitional
    ul>li*5     ul>li.stil*5    ul>li.stil-$$*5     erzeugt verschieden unsortierte Listen!
  • Tabellenloses Layout für Webseiten
    Fachartikel von Stephan Heller (www.daik.de), Internet Professional, März 2007
    Website aus Blöcken (DIV-Elementen) zusammenbauen
    immense Vorteile bei Schnelligkeit, Flexibilität und Barrierefreiheit (gegenüber Tabellen oder gar Frames)
  • Analyse und Praxis mit den Beispielseiten zum tabellenlosen Layout
    min-height gestylt mit * html #kopf in CSS als Überzeugungsarbeit für den IE (siehe Kompatibilität des IE zum CSS Style min-height)
    floating mittels float:left; für #navigation gestylt (die Grundidee hinter dem tabellenlosen Layout!)
    mittels #navigation ul li a gezielt eine professionelle Linkstruktur aus unsortierter Liste kreiren
    versteckte Zusatz-Headings (h6 mit Klasse .unsichtbar) für die barrierearme Nutzung der Seite
    CSS-Datei mittels Angabe von media="screen, projection" verlinkt, so lässt sich spezielles Ausdrucksformat mittels media="print" erstellen; Übersicht über die Ausgabemedientypen auf selfhtml.org (Link)
    Dummy-Links mit href="#" verlinkt (Anker ohne Namen für dieselbe Seite)
    Aufheben des Floating mittels Stylings clear:both; (oder auch gezielt left oder right)

 

  • Projekt WebsiteProjekt Website
Donnerstag, 29.03.2012, 08.00 - 15.30 Uhr

  • Rekap, TN-Fragen
  • Hintergründe und Styling
    Endergebnis des tabellenlosen, barrierearmen Layouts fertig analysieren und anpassen
    Hintergrundbilder erstellt (Gepunktete Verlaufsmuster, Streifengenerator) und eingebaut (background, backgroun-color, background-image, background-repeat) - alle Einstellungen lassen sich auch einem Style
    background: #00FF00 url(../img/bg-bild.png) repeat-x
    ;
    kombinieren
  • Client-/ Server- Technologie (eine "Kopiermaschine")
    Web-Server: z.B. Software Apache, hält alle Ihre Webdokumente und Ordnerstrukturen parat, muss bei einem Hoster inklusive weltweiter "Adresse" (Domain) gemietet werden
    Web-Client: Browser, Software z.B. Firefox, Chrome, Opera, Internet Explorer, stellt Anfrage (Request - http://www.bahn.de an den Server) und erhält die entsprechenden Dateien herüberkopiert
  • Wrapper (Layout/Positierung der Seite verbessern)
    ein "Mantelung" für die gesamte Website, um diese mittels CSS gewünscht zu dimensionieren (z.B. 960 px - siehe 960.gs) und auszurichten
    Tipp: zentrierte Ausrichtung im Browser mittels margin: auto;
  • Website Planung
    Layout: 2-spaltiges Layout mit variabler Anordnung Navigation
    Feste Breite von 980px; orientiert an 960er Grid-Raster, …
    Farben: definiert mit ColorSchemeDesigner.com (siehe gleichlautende Website und/oder Ausdruck)
    #FFD147 (helle Orange), #C09050 (dunkle Orange), ….
    Typografie: Schriftart (Verdana), Größen/Größenverhältnisse, Zeilenabstände, spezielle Aufzählung oder hervorgehobene Textstellen, …
    Navigations-Struktur: Hautpseite index.html mit Unterseiten beruf.html, privat.html und impressum.html
    für die Erstellung der Unterseiten eine passende erste Hauptseite mit den gleichen und veränderlichen Positionen identifizieren
    veränderliche Bestandteile der Seiten: Titel (also title-Tag), Aktive Seite im Navi-Menü, Inhalt der Seite in div#inhalt
  • Praxis Website Projekt
    basierend auf den Vorarbeiten eine komplette Website mit vier HTML-Dokumenten und gemeinsamer CSS-Style-Datei erstellt
    Empfehlung: nach der Seminarwoche anhand der heutigen kleinen Website die unterschiedlichen Techniken nacharbeiten und damit experimentieren
  • Linksammlung / Bücher / Zeitschriften
    Hinweis: das PC-Systembetreuer-Portal hält eine ausführliche Linksammlung zu den Themen des "CMS Online Designers" vor
    diverse Bücher, Zeitschriften und Sonderausgaben von Verlagen zum Thema Online-Technik besprochen und gezeigt

 

  • JavaScript Lightbox2JavaScript Lightbox2
Freitag, 30.03.2012, 08.00 - 15.30 Uhr

  • Rekap, TN-Fragen
  • Texte und Objekte ausrichten (manuell)
    einfachste Lösung: geschützte Leerzeichen &nbsp;
    vorformatierter Text: pre-Tag (alles in pre wird nichtproportional und mit LZ und Zeilenumbrüchen ausgegeben!)
    Tabellen (s.u.)
  • Tabellen
    Tags: table, caption, thead, th, tbody, tr, td
    Aufbau einer Standardtabelle mit 2 Spalten und 4 Zeilen und Zen-Coding-Unterstützung
    kompletter thead mit: thead>tr>th*2
    kompletter tbody mit: tbody>tr*4>td*2
    Styling natürlich wieder per CSS (Beispiel aus Heftsonderausgabe CHIP "Web Design - Trends & Praxis" 2012
    Grundlagen und Übersicht zu Tabellen mit selfhtml.org (Link)
  • WYSIWYG (What You See Is What You Get)
    Webeditoren mit WYSIWYG:
    Adobe Dreamweaver (teuer, mächtig, kann eigene Techniken, benötigt lange Einarbeitung)
    Kompozer (früher NVU, kostenlos, auch als portable Variante verfügbar!
  • Horizontale Navigationen
    Lösungen: per display: inline liegen die li-Elemente nebeneinander (Beispiel erarbeitet)
    oder per Floating (Beispiel mit per CSS gestylten 2-dimensionelen Links)
    wichtig: die verschachtelten ul / li Strukturen sauber bauen: untergeordnete ul-Listen werden in ein <li> ... </li> gesetzt!
  • Hintergrund-Bilder (per CSS)
    die notwendigen Bilder für das Styling der Website mittels background-image CSS Style in den Bereich "Design / CSS-Datei" verlagert - dadurch wird das Anpassen mehrerer HTML-Seiten stark erleichtert und flexibler
  • Formulare
    Haupttag: form (spannt das Gesamtformular auf), übergibt per action="skript.php" an ein dynamische Skript, dass die Daten z.B. per Mail versendet oder in eine Datenbank einträgt
    Eingabe mittels: input (Varianten: type = text, radion, checkbox, textarea - oder select, checkbox, ...)
    Absenden mittels: type = submit (oder zurücksetzen mit type = reset)
    Übersicht über Formulare und deren Styling auf selfhtml (Link)
  • JavaScript (ein Beispiel mit Lightbox-Effekt für Bilder/Bildergalerien)
    die Skripte in Projektordner ./js organisieren, die Skripte per link im head des HTML-Dokument verknüpfen, Nutzung der Skripttechnik durch entsprechende Tags in den body-HTML-Tags
    Praxisbeispiel: Lightbox2 (Version 2.05 von Lokesh Dhakar - Link)
  • Hosting - Webserver
    Auswahl für Hoster: Preis, Leistung, Anzahl Domains, Zugänge, Datenbanken, Verfügbarkeit, Erreichbarkeit per E-mail/Telefon, ...
    Bereitstellung des Webservers durch Hoster, Übertragung der Projektdateien (und Ordner) auf den Webserver mittels FTP (File Transfer Protocol - Datei Transport Protokoll)
    FTP-Software: FileZilla (kostenlos, für alles Betriebssysteme, portable Veriante)
    Anm.: Bereitstellung eines Servers durch Trainer mittels Xampp im Seminarnetz
  • lohnenswerte nächste Schritte:
    Wiederholungen und Anpassungen der Seminar-Websites
    CSS-Frameworks (960.gs, Blueprint, Empfehlung: YAML - deutsches Vorzeigeprojekt mit ausführlicher Dokumentation, Verfasser: Dirk Jesse)
    HTML/CSS Templates nutzen (Vorlagen, Lizenzen beachten! - Googeln, Empfehlung aus Fachzeitschriften oder z.B. Portal)
  • Prüfung im Rahmen des "CMS Online Designer"
    nach Absprache über den Trainer J. Brandes, geplant: 3-4 Termine pro Jahr für Interessenten des Zertifikats
  • TN-Bescheinigungen, Feedback, letzte Fragen
    Download der Trainer-Materialien aus der Seminarwoche:

 

Vielen Dank für die Teilnahmen an unserem Online-Seminar und das freundliche Klopfen am Endes der BU-Woche!
Ihr Trainer Joe 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 20 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"

© 2018 - Websitedesign und Layout seit 07/2015 - Impressum
Nach oben