Seminar DWMX 2004 - werkschau

DW Session 004 Seminar DWMX 2004
DW Session 004
Eigene Site aufbauen
Aufbau einer persönlichen Site:
• Auswahl einer bestimmten Dateiorganisation
• Statische HTML Site
• Vorlagenbasierte Site
• Framebasierte Site
• Erstellen der Hauptseiten und Anpassen der Navigation
• z.B. Einleitung, Über mich, Lebenslauf, Bildergalerie, Kontaktseite, Mein Studium, Meine Arbeit,
Projekte etc.
• Erstellen einer Seite tmp.htm zum testen von Funktionen und Formatierungen
Die folgenden Beschreibungen und Übungen zur Formatierung sollten je nach Belieben auf den
erstellten Seiten eingebunden werden.
Zum besseren Verständnis sollte im geteilten Dokumentenfenster gearbeitet und der von DW
erzeugte Code überprüft werden.
DW Session 004
Grundlegende Formatierungen
Anwenden der Grundelemente zum Aufbau einer Seite (Verwenden der Datei tmp.htm):
• Eingabe eines Textes und Anwenden folgender Formatierungen (auf einen markierten Text)
• Ändern des Formates
(vordefiniert in HTML)
Bedienfeld Eigenschaften
DropDown Format • Ändern der Schriftart
Bedienfeld Eigenschaften
DropDown Schriftart • Ändern der Schriftgröße
Achtung: nicht bei Format-Text
Bedienfeld Eigenschaften
DropDown Größe • Änderung der Formatierung
Bedienfeld Eigenschaften • Änderung der Textausrichtung
Bedienfeld Eigenschaften • Erstellen einer un-/definierten Liste
Verändern der Hierarchiestufe
Bedienfeld Eigenschaften
DW Session 004
Grundlegende Formatierungen
Anwenden der Grundelemente zum Aufbau einer Seite (Verwenden der Datei tmp.htm, Arbeiten im
geteilten Dokumentenfenster):
• Eingabe eines Textes und Anwenden folgender Formatierungen (auf einen markierten Text)
• Ändern der Textfarbe
• Erstellen einer Tabelle
Bedienfeld Eigenschaften Einfügeleiste - Allgemein • Eingabe von Text in die Tabellenfelder
• Einfügen einer Grafik
Einfügeleiste - Allgemein • Einfügen eines Rollover-Bildes
Einfügeleiste - Allgemein
->
• Einfügen eines aktiven Datumsfeldes
Beim Speichern automatisch aktualisieren aktivieren
Einfügeleiste - Allgemein
DW Session 004
Formatierungsgrundsätze
Die meisten bis jetzt angewandten Formatierungen waren Tag-basierte HTML-Formatierungen (vgl.
Source-Code in der Code-Ansicht)
• Formate (Block-Elemente)
<p></p>, <h1></h1>, <h2></h2>, etc • Formatierung (Inline-Elemente)
<strong></strong>, <em></em> • Ausrichtung (implied)
<p align= center ></p> • Listen (Block-Element)
<ul><li></li></ul>
Block-Elemente erzeugen einen Absatz, Inline-Elemente können im Textfluss verwendet werden.
Formatierungen die implied sind, sind optional (vgl. alt-Tag ist required).
DW Session 004
Formatierungsgrundsätze
Für einige Formatierungen erstellt Dreamweaver aber zusätzlichen Code
• Schriftgröße
(Inline)
(Block)
Und im Kopfbereich (head)
Seminar <span class="Stil1">DW MX</span> 2004
<p class="Stil1">Seminar DW MX 2004</p>
<style type="text/css">
<!-.Stil2 {font-size: 18px}
-->
</style>
Eine solche Formatierung ist ein Cascading StyleSheet (CSS) und wird als Ergänzungssprache zur
Formatierung von HTML genutzt. Bei diesem Beispiel handelt es sich um einen in HTML
eingebetteten Bereich für CSS-Formate der aus folgenden Bereichen besteht:
• HTML Notation für einen CSS-Bereich
• HTML-Kommentar zur Ausblendung der Formatdefinitionen für Browser ohne CSS-Ünterstützung
• Formatangabe mit Selector (.Stil2), CSS-Eigenschaft (font-size) und Wertzuweisung (18px)
DW Session 004
Varianten der CSS-Definition
Neben der Notation eines zentralen CSS-Bereiches im Header der HTML-Datei können noch weitere
Möglichkeiten gewählt werden
• Formate innerhalb eines HTML-Elementes definieren
• Seminar <span style= font-size: 18px; >DW MX</span> 2004 • <p style= font-size: 18px; >Seminar DW MX 2004</p> • Nachteil der im HTML-Dokument notierten CSS-Formate:
Die Formatierungen sind in jeder einzelnen Datei hinterlegt. Bei Änderung z.B. der Größe einer
Überschrift muss die Definition in jeder Datei geändert werden.
• Formate in einer externen CSS-Datei definieren und in HTML per Referenz einbetten
• Erstellen einer Datei (z.B. mainStyle.css im Verzeichnis styles). Entweder über
Datei/Neu/Allgemein/CSS-Stylesheets oder eine leere Datei mit entsprechender Endung
• Erstellen der gewünschten Formatangabe(n) in der CSS-Datei
.Stil2 {font-size: 18px}
DW Session 004
Varianten der CSS-Definition
• Referenzieren der CSS-Datei in der HTML-Datei
<link href="/styles/mainStyle.css" rel="stylesheet" type="text/css" />
(Bedienfeld CSS-Stile ->
-> Datei auswählen -> Hinzufügen als Verknüpfung aktivieren) • Zuweisen der Formatierung in einem HTML-Element
<p class="Stil1">Seminar DW MX 2004</p>
Die Zuweisung erfolgt hier nach dem gleichen Prinzip, als wenn die CSS-Definition in
einem zentralen Bereich innerhalb der HTML-Datei notiert worden wäre
• Vorteil der externen CSS-Definition: Die Formatierungsangaben liegen nicht redundant vor
und müssen bei Änderungen nur an einer Stelle aktualisiert werden.
• Für unterschiedliche Ausgabemedien können hierbei unterschiedliche externe CSS-Dateien
angegeben werden (vgl. SelfHTML)
• <link rel="stylesheet" media="screen" href="website.css">
<link rel="stylesheet" media="print, embossed" href="druck.css">
<link rel="stylesheet" media="aural" href="speaker.css">
DW Session 004
Der Wechsel zu CSS
CSS ersetzt die Tag-basierte Definition von Formatierungen
• Früher:
<font size="10" color="#0066FF">Hallo Welt </font>
Das font-Tag ist als deprecated deklariert und wird offiziell nicht mehr unterstützt
• Heute:
<span style= font-size: 10px; color: #0066FF; >Hallo Welt</span>
oder per externer CSS-Definition
Gründe(!)
• Die Tag-basierte Definition lässt keine Trennung von Inhalt und Layout zu. Somit entsteht bei
gr0ßen Sites oder bei sich oft verändernden Darstellungen erheblicher Arbeitsaufwand.
• Die wiederholte Definition einer Formatierung innerhalb einer Seite bzw. in allen Seiten erzeugt
eine starke Zunahme des SourceCode Volumens, die wiederum die Dateigröße zunehmen lässt.
Hierdurch wird die Ladezeit verschlechtert.
DW Session 004
CSS im Genauen
CSS lässt sich unter Dreamweaver sehr einfach über die Bedienfelder CSS-Stile und Relevante CSS
integrieren und formatieren.
• Über das Bedienfeld CSS-Stile können folgende Aktionen vorgenommen werden:
•
Eine externe CSS-Datei verknüpfen (<link ...) oder importieren (<style ...)
•
Eine neue Format-Definition in den bestehenden Definitionsbereich einfügen
•
Eine bestehende Format-Definition bearbeiten
•
Eine bestehende Format-Definition löschen
• Auf die einzelnen Definitionen hat man über das Bedienfeld Relevante CSS Zugriff. Hier werden
die für ein bestimmtes HTML-Element verfügbaren Formatierungen und eventuell schon
definierte Formate dargestellt. Hierbei stehen
•
eine Kategorien- und
•
eine Listenansicht zur Verfügung.
DW Session 004
CSS im Genauen
Innerhalb einer CSS-Formatdefinition, sowohl in einem notierten Bereich innerhalb der HTML-Datei
als auch in einer externen CSS-Datei, können verschiedene Selektoren verwendet werden
• Elementnamen/Tag
table { ... • Bei diesem Selector werden alle Tags dieses Types mit den entsprechenden
Formatierungen belegt (z.B. p, table, div, span etc.)
• Klasse
.style1 { ... • Bei diesem Selector werden allgemeingültige Formatierungen verwendet, die auf beliebige
Elemente angewandt werden können. Der Name kann hierbei beliebig vergeben werden,
darf aber keine Umlaute oder Leerzeichen enthalten.
• Erweitert/Pseudoklasse
a:active { ... • Bei diesem Selector kann ein bestimmter Status eines Tags mit den gewünschten
Formatierungen belegt werden. So kann das Tag a den Status link, visited, hover und active
annehmen. Über eine Klasse oder einen Elementnamen könnte nur der Standard-Status
formatiert werden.
DW Session 004
CSS Zuweisung
Die Zuweisung von CSS-Formaten kann über mehrere Aktionen vorgenommen werden
• Zuweisung über das Bedienfeld Eigenschaften
• Zuweisung über den Tag-Selector
• Zuweisung über das Kontextmenü
DW Session 004
Wertzuweisung unter CSS
Die erlaubten Werte für eine CSS-Eigenschaft können unterschiedliche Dimensionen haben (vgl.
SelfHTML: Stylesheets/Formate definieren/Maßeinheiten, Farbangaben und Wertzuweisung • Einen feste Auswahl erlaubter Werte
CSS-Eigenschaft
text-align
erlaubt
left, right, center, justify • Die Zuordnung eines Namens oder mehrerer Schlüsselwörter
CSS-Eigenschaft
font-family
erlaubt
eine oder mehrere Schrifttypen (Arial,
Verdana)
CSS-Eigenschaft
blue)
border-top
erlaubt
• Eine variable Auswahl mit fester Definition
CSS-Eigenschaft
height
erlaubt
eine Kombination von Werten (1px solid
einen numerischen Wert (10px)