Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Cascading Style Sheets
Vollständige Trennung von Layout (CSS) und Inhalt (HTML)
2
Beispiel zur Einführung: Wozu CSS?
ALLES GROSSGESCHRIEBEN Bla text In einem Rutsch wird aus einer einfachen Webseite durch Zuweisung eines Stile-Sheets eine Layoutete Datei
3
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)
4
Was geht in Netscape 4 und IE4?
Tabelle über alle Funktionen: 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
5
Übung: Wie fange ich zu arbeiten an?
Vorgefertigte Style Sheets Bitte im Netscape aufrufen! 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)
6
Wenn das CSS nicht funktionieren will
Validatoren für fehlerfreie Seiten Validator.w3.org
7
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>
8
Übung: CSS in Webseite einbinden
Kopiere style.css und simpel.html aus (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?
9
Ü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
10
Syntax-Elemente eines Styles
ruleset P, em, li {color: red; text-indent: 10pt} property value declaration
11
Änderbare Eigenschaften (im Prinzip)
Schrift Abstände, Ränder, Ausrichtung, Rahmen Farben Tabellen Mehrspaltiger Textfluss Seitenumbruch
12
Dreamweaver Hauptfenster
1. Launcher: Einblenden des CSS-Fensters 2. Mit Style Sheet verknüpfen
13
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)
14
CSS-Datei in Dreamweaver bearbeiten
4 2 3 1 5
15
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
16
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
17
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
18
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
19
CSS-Stil-Definitionsfenster in Dreamweaver
20
Übung: Nachbereitung In kurs.html link setzen (CSS soll auf simpel.html zeigen) Maile das fertige style.css an
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.