HTML-Kurs
Werbung
Cascading Style Sheets
Vollständige Trennung von
Layout (CSS) und Inhalt
(HTML)
Beispiel zur Einführung:
Wozu CSS?
Bla
text
In einem Rutsch wird aus einer einfachen Webseite
durch Zuweisung eines Stile-Sheets eine Layoutete
Datei
Welche Browser verstehen
CSS?
IE3: CSS 1
IE4, Netscape 4: CSS1, CSS 2 (teilweise)
Sobald im Netscape Javascript
ausgeschaltet ist, werden Style Sheets
ignoriert. (ebenso ältere
Browserversionen)
Was geht in Netscape 4
und IE4?
Tabelle über alle Funktionen:
http://www.webreview.com/style/css1/chart
s/mastergrid.shtml
CSS-Guide von Stefan Münz:
An jeder besprochenen Funktion ist ein
Symbol, ob es nur im Standard ist oder von
welcher Browserversion es verstanden wird
Übung: Wie fange ich zu
arbeiten an?
Vorgefertigte Style Sheets
Bitte im Netscape aufrufen!
http://www.w3.org/StyleSheets/Core/preview
Beliebigen Stil und unten (show me only style
sheet) anklicken
Style sheet speichern mit: Auf Datei –
Speichern gehen und so in public_html als
w3org.css speichern (als Vorlage zum
Weiterarbeiten)
Wenn das CSS nicht
funktionieren will
Validatoren für fehlerfreie Seiten
www.htmlhelp.org/tools/validator
Validator.w3.org
Wie kommt das CSS zum
HTML?
Extern: <head><link rel=stylesheet
href=„w3org.css“ type=„text/css“>
Nur in der einen Datei - Embedded:
<style type=„text/css“><!– css ->
Nur an der einen Stelle - Inline:
<p style=„text-indent: 10pt“>text</p>
Übung: CSS in Webseite
einbinden
Kopiere style.css und simpel.html aus
www.zdv.uni-mainz.de/download/html/ (mit
rechter Maus draufklicken, Ziel speichern unter
public_html.
Style.css in simpel.html in den Header
schreiben:
<link rel="stylesheet" type="text/css"
href="style.css">
simpel.html davor und danach im Webbrowser
anschauen. Was ist anders?
Übung- Nachtrag: CSS
einbinden
Das gleiche geht natürlich auch im
Dreamweaver menügeführt:
Fenster – CSS-Stile
Darin auf das Icon mit dem Stift klicken
Auf Verknüpfen klicken
Das Style-Sheet style.css auswählen
OK
Syntax-Elemente eines
Styles
ruleset
P, em, li {color: red; text-indent: 10pt}
property
declaration
value
Änderbare Eigenschaften
(im Prinzip)
Schrift
Abstände, Ränder, Ausrichtung, Rahmen
Farben
Tabellen
Mehrspaltiger Textfluss
Seitenumbruch
Dreamweaver
Hauptfenster
1. Launcher:
Einblenden des
CSS-Fensters
2. Mit Style
Sheet
verknüpfen
Was kann man neu
definieren?
Freie Eigenschaften (Klassen), indem man
ein Stück Text markiert und die
Klasse/Eigenschaft zuweist
HTML-Tags
Link-Eigenschaften (Aktiv,
Darübergestrichen/Hover, vor kurzem mal
angeklickt/visited)
CSS-Datei in Dreamweaver
bearbeiten
4
2
3
1
5
Klasse neu definieren
in simpel.html im Style-Fenster unten
auf das Icon mit dem Plus klicken
Bei Name .betonung eintragen, OK
Typ: Farbe: rot, Stärke: fett, Variante:
Kapitälchen, Hintergrund, Farbe: gelb
Mit OK bestätigen
Text auf Webseite markieren, dann im
Style-Fenster auf betonung klicken
HTML-Tag H1 neu
definieren
in simpel.html im Style-Fenster unten auf
das Icon mit dem Plus klicken
Bei „Typ“ HTML-Tag anklicken, OK
Jetzt wird das Tag H1 neu definiert
Die Schriftfarbe auf Hellblau ändern
Mit OK bestätigen
HTML-Tag H2 neu
definieren
in simpel.html im Style-Fenster unten auf
das Icon mit dem Plus klicken
Bei „Typ“ HTML-Tag anklicken
Bei „Tag“ h2 auswählen, OK
Jetzt wird das Tag H2 neu definiert
Ein Hintergrundbild einfügen
Mit OK bestätigen
CSS-Selektor neu
definieren
in simpel.html im Style-Fenster unten auf
das Icon mit dem Plus klicken
Bei „Typ“ CSS-Selektor anklicken
Bei „Tag“ a:hover auswählen, OK
Jetzt wird das Verhalten eines Hyperlinks
beim darüberfahren neu definiert
Die Schrift vergrößern
Mit OK bestätigen
CSS-Stil-Definitionsfenster
in Dreamweaver
Übung: Nachbereitung
In kurs.html link setzen (CSS soll auf
simpel.html zeigen)
Maile das fertige style.css an
[email protected]
