DREAMWEAVER MODUL DRWMX_0203 WEBDESIGN MODUL DRW_02 h.huetter 1 Dreamweaver MX - Tabellen Teil 3 Den Schriftstil ändern Um die CSS-Formatierungen auch.

Präsentation zum Thema: "DREAMWEAVER MODUL DRWMX_0203 WEBDESIGN MODUL DRW_02 h.huetter 1 Dreamweaver MX - Tabellen Teil 3 Den Schriftstil ändern Um die CSS-Formatierungen auch."—  Präsentation transkript:

1 DREAMWEAVER MODUL DRWMX_0203 WEBDESIGN MODUL DRW_02 h.huetter 1 Dreamweaver MX - Tabellen Teil 3 Den Schriftstil ändern Um die CSS-Formatierungen auch für andere Seiten verwenden zu können, werden diese in einer externen CSS- Datei gespeichert (siehe auch Einführung und Übungen zum Theme CSS). 1. Im Bedienfeld „CSS-Stile“ einen neuen Stil erstellen Die Formatierungsanweisungen im Tag gelten für das ganze im Browser angezeigte Fenster. 2. Als Selektortyp „Tag“ auswählen Den Tag „body“ auswählen Definieren: Neue Stylesheet-Datei 3. Die Datei unter dem Namen „styles.css“ speichern

2 DREAMWEAVER MODUL DRWMX_0203 WEBDESIGN MODUL DRW_02 h.huetter 2 Dreamweaver MX – Tabellen + CSS Teil 3 Den Schriftstil ändern 4. Die Schriftstilgruppe Arial, Helvetica, sans-serif wählen Findet der Browser „Arial“ nicht, verwendet er Helvetica, findet er Helvetica nicht, verwendet er „sans-serif“ Der Standardschrift im aktuellen Dokument ist jetzt „Arial“

3 DREAMWEAVER MODUL DRWMX_0203 WEBDESIGN MODUL DRW_02 h.huetter 3 Dreamweaver MX – Tabellen + CSS Teil 3 Den Rahmenstil ändern Die mittlere Spalte soll auf der rechten Seite einen 20 Pixel breiten Rand bekommen. Dies soll ein CSS-Stil für den Selektortyp „Klasse“ leisten 5. Klasse auswählen und den Namen „rahmen_rechts“ vergeben 6. In der Kategorie „Rahmen“ wählen bzw. eintragen: Stil: rechts durchgezogen Breite: rechts 20 Pixel Farbe f. Rahmen rechts: #ff 00 00

4 DREAMWEAVER MODUL DRWMX_0203 WEBDESIGN MODUL DRW_02 h.huetter 4 Dreamweaver MX – Tabellen + CSS Teil 3 Den Rahmenstil ändern 7. Den mittleren Zellen den soeben erstellten CSS-Stil „rahmen_rechts“ zuweisen 8. In der Kategorie „Rahmen“ wählen bzw. eintragen: Stil: rechts durchgezogen Breite: rechts 20 Pixel Farbe f. Rahmen rechts: #ff 00 00

5 DREAMWEAVER MODUL DRWMX_0203 WEBDESIGN MODUL DRW_02 h.huetter 5 Dreamweaver MX – Tabellen + CSS Teil 3 Den Rahmenstil ändern Da das Grafikobjekt keinen Abstand zum Zellrand haben soll, wird hier ein eigener CSS-Stile benötigt. 9. Die Klasse „rahmen_rechts“ duplizieren und anschließend bearbeiten.

6 DREAMWEAVER MODUL DRWMX_0203 WEBDESIGN MODUL DRW_02 h.huetter 6 Dreamweaver MX – Tabellen + CSS Teil 3 Den Rahmenstil ändern 10. Den soeben erstellten CSS-Stil „rahmen_rechts“ umbenennen 11. In der Kategorie „Box“ wählen bzw. eintragen: Auffüllen (für alle gleich): 0 Pixel Arbeitsauftrag 3: Restliche Formatierungen entsprechend der folgenden Folie durchführen.

7 DREAMWEAVER MODUL DRWMX_0203 WEBDESIGN MODUL DRW_02 h.huetter 7 Dreamweaver MX – Tabellen + CSS Teil 3 Den Rahmenstil ändern Nun wird ein durchgezogener vertikaler Streifen angezeigt