Seminar DWMX DW Session 006

Transkript

1 Seminar DWMX 2004 DW Session 006

2 Zusammenfassung wichtiger Textformate Schriftfamilie font-family Schrift/Schrift font-family:'times New Roman',Times,serif; Schriftstil font-style Schrift/Stil font-style:italic; Kapitälchen font-variant Schrift/Variante font-variant:small-caps; Schriftgröße font-size Schrift/Größe font-size:10pt;

3 Zusammenfassung wichtiger Textformate Schriftgewicht font-weight Schrift/Stärke font-weight:bold; Laufweite font-stretch - font-stretch:condensed; Wortabstand word-spacing Block/Wortabstand word-spacing:1.5em; Zeichenabstand letter-spacing Block/Zeichenabstand letter-spacing:0.1em;

4 Zusammenfassung wichtiger Textformate Textdekoration text-decoration Schrift/Auszeichnung text-decoration:underline; Texttransformationen text-transformation Schrift/Groß-/Kleinschreibung text-transformation:capitalize; Textfarbe color Schrift/Farbe color:blue; Texteinzug text-ident Block/Texteinzug text-ident:10px; (positiver Wert: erste Zeile, negativer Wert: hängender Einzug)

5 Zusammenfassung wichtiger Textformate Zeilenhöhe line-height Schrift/Zeilenhöhe line-height:1.5em; vertikale Ausrichtung (z.b. in Tabellenzellen) vertical-align Block/vertikale Ausrichtung vertical-align:bottom; Ausrichtung text-align Block/Textausrichtung text-align:justify; Textumbruch white-space Block/Leerraum white-space:nowrap;

6 Übung Um das bisherige Wissen an einer kompletten Site umzusetzen, soll folgende Website erstellt werden: Erstellen einer neuen Website mit folgenden Einstellungen Site-Name DWSession6 Lokaler Stammordner beliebig Erstellen der Unterordner Bildordner Seitenordner CSS-Ordner Name: images, Speicherort: /images Einrichten des Ordners images als Standard-Bildordner Name: pages, Speicherort: /pages Name: styles, Speicherort: /styles Erstellen einer Vorlagenseite mit folgenden Einstellungen Navigation 1. Link: Home, 2. Link: Highland Games, 3. Link: City of Edinburgh, 4. Link: Isle of Sky, 5. Link: The Bee Bearbeitbare Bereiche Name: Content Fußzeile automatisches Datum Erstellen der entsprechenden Instanzen der Vorlage Home Name: index.htm, Speicherort im Hauptverzeichnis / Weitere Seiten Name: selbst wählen (sinnvoll!), Speicherort: /pages

7 Übung Erstellen der Navigation Master-Datei Erstellen des/der Stylesheet/s CSS-Datei Tag body Klasse Inhalt Klasse Überschrift 1 Klasse Überschrift 2 Klasse Lesetext Klasse BildRechts Klasse BildLinks Erstellen der Hyperlinks zu den entsprechenden Seiten Name: main.css; Speicherort /styles Schriftart: Verdana, Arial, Helvetica, sans-serif Schrift: 10pt, #000000, Zeilenhöhe 22px; Rand: Für alle Auto, Breite: 755px Schrift: Georgia, 22pt, #8CC67B Auffüllen: Unten 20px, Links 15px Schrift: Georgia, 18pt, #8385CD Auffüllen: Unten 10px, Links 15px, Oben 30px Schrift: Verdana, Arial, Helvetica, sans-serif (Redundanz) 10pt, #333333, Absatz: erste Zeile 15px, Breite 600px, Rand links/rechts 50px Schwebend: rechts, Rand: außer rechts jeweils 10px Auffüllen: Für alle 10px, Texteinzug: 0px, Rahmen: Stil durchgezogen, Breite 1px, Farbe # Schwebend: links, Rand: außer rechts jeweils 10px Auffüllen: Für alle 10px, Texteinzug: 0px, Rahmen: Stil durchgezogen, Breite 1px, Farbe #666666

8 Übung2 Erstellen des/der Stylesheet/s Klasse Linkliste Auffüllen: Links 30px Pseudoklasse a:link #6970BE Pseudoklasse a:visited #6970BE Pseudoklasse a:hover #6970BE Pseudoklasse a:active #6970BE Pseudoklasse a:link Klasse Navigation, Schrift: Georgia, Times New Roman, Times, serif, Größe: 14px, Auszeichnung: keine Pseudoklasse a:visited Klasse Navigation, Schrift: Georgia, Times New Roman, Times, serif, Größe: 14px, Auszeichnung: keine Pseudoklasse a:hover Klasse Navigation, Schrift: Georgia, Times New Roman, Times, serif, Größe: 16px, Auszeichnung: keine, Stärke: weniger fett Pseudoklasse a:active Klasse Navigation, Schrift: Georgia, Times New Roman, Times, serif, Größe: 14px, Auszeichnung: keine Tagklasse table Klasse Navigation, Textausrichtung: mitte, Breite 100%, Rahmen Stil: Für alle durchgezogen, Breite: Für alle 1px, Farbe: Für alle #6970BE Tagklasse td Klasse Navigation, Hintergrundfarbe: #DAECD5, Rahmen Stil: Für alle durchgezogen, Breite: Für alle 1px, Farbe: Für alle #6970BE

9 Grafiken im WWW Grundsätzlich ist die Verwendung von zwei Grafikformaten im WWW möglich: GIF (Graphics Interchange Format) Ein Alphakanal belegbar (Vorteil gegenüber JPG) Vorteilhaft bei großflächigen, einfarbigen Flächen Möglichkeit einer Einzelbildabfolge mit Frame-Zeitdefinition (Animation, nicht konform zur Spezifikation) Möglichkeit der Farbenreduktion Interlace Für die Anzeige von Fotos ungeeignet Nur 256 Farben Nur ein Alphakanal (Nachteil gegenüber PNG) Rechteproblem JPG/JPEG (Joint Photographic Experts Group) Skalierbare Komprimierung der Grafik möglich Glättung der Grafik Vorteilhaft bei Fotos Bildung von Fragmenten bei stärkerer Komprimierung kein Alphakanal durch Komprimierung gehen Bildinformationen verloren (!)

10 Grafiken im WWW die Zukunft Das W3C hat das Problem erkannt und reagiert. Microsoft hat das Problem erkannt und versagt! PNG (Portable Network Graphics) Alpha Kanal für jede Farbe, variable Transparenz Verlustfreie Komprimierung Interlace Index-Color Graustufen TrueColor (16 Bit) keine native Unterstützung der Transparenz im IE Komprimierung mächtiger als bei GIF, nicht so variable wie bei JPG Keine Animationsmöglichkeit Einbettung von transparenten PNGs im IE nur über ein zusätzliches JavaScript möglich!

11 PNG das Script ns = true; if(navigator.useragent.indexof("firefox") == -1 && navigator.useragent.indexof("opera") == -1 && navigator.useragent.indexof("netscape") == -1) { ns = false; } function pngietrans() { if(!ns) { for(i=0; i<document.images.length; i++) { } } } img = document.images[i]; imgname = img.src.touppercase(); if (imgname.substring(imgname.length-3, imgname.length) == "PNG") { imgid = (img.id)? "id=\'" + img.id + "' " : ""; imgclass = (img.classname)? "class='" + img.classname + "' " : ""; imgtitle = (img.title)? "title='" + img.title + "' " : "title='" + img.alt + "' "; imgstyle = (img.style.csstext)? img.style.csstext + ";" : ""; img.outerhtml = "<span " + imgid + imgclass + imgtitle + " style=\"" + imgstyle + " width:" + img.width + "px; height:" + img.height + "px; " + "filter:progid:dximagetransform.microsoft.alphaimageloader(src=\'" + img.src + "\');\">" + "</span>"; i = i - 1; // image count reduced by replacement. NB: normal decrement breaks the W3C Validator }

12 Die Formate im Einzelnen GIF 16 GIF 256 JPG 29% JPG 80% PNG 8 PNG 255

13 Die Formate im Einzelnen GIF 16 GIF 256 JPG 29% JPG 80% PNG 8 PNG 255

14 Die Formate im Einzelnen GIF 16 GIF 256 JPG 29% JPG 80% PNG 8 PNG 255

15 Die Formate im Einzelnen GIF 16 GIF 256 JPG 29% JPG 80% PNG 8 PNG 255

16 Die Formate im Einzelnen GIF 16 GIF 256 JPG 29% JPG 80% PNG 8 PNG 255

17 Die Formate im Einzelnen GIF 16 GIF 256 JPG 29% JPG 80% PNG 8 PNG 255

18 Bilder in Dreamweaver Das Einfügen eines Bildes in Dreamweaver bewirkt die Anzeige von Bildbearbeitungsoptionen in der Eigenschaftenleiste Breite und Höhe (B/H) Nur bei Abweichung von der tatsächlichen Größe relevant Beschleunigen den Ladevorgang Abweichung der Bildgröße von den Werten wird in DW angezeigt (!) Rücksetzung möglich Oberer/unterer und linker/rechter Abstand (V-Abstand/H-Abstand) besser per CSS durch Box/Rand (margin) Low-Resulution Bild (Niedr. Qu.) Bei hochauflösenden Bildern mit großer Dateigröße kann hier ein gleich großes Bild mit geringerer Qualität angegeben werden, das angezeigt wird, bis das hochauflösende geladen wurde. Alternativer Text (Alt.) Wird bei MouseOver/ausgeschalteten Bildern/in der Statusleiste angezeigt und sollte immer definiert werden (ansonsten leer!, Eingabehilfe unter Bearbeiten/Voreinstellungen/ Eingabehilfen/Bilder aktivieren)

19 Bilder in Dreamweaver bearbeiten Dreamweaver MX 2004 bietet die grundlegenden Bildbearbeitungsfunktionen in der Eigenschaftsleiste an. WICHTIG: Diese Änderungen werden am Originalbild durchgeführt und können nicht rückgängig gemacht werden! Bearbeiten... Ermöglicht das Bearbeiten in dem unter Bearbeiten/Voreinstellungen/Dateitypen / Editoren für das Format definierten, externen Editor In Fireworks optimieren Öffnet Fireworks und lässt ein erneutes Exportieren/Optimieren der Grafik zu Zuschneiden Erstellt einen Ausschnitt aus dem Bild. Die Größe wird automatisch angepasst Neu Auflösen Ist nur aktiv, wenn die Größe des Bildes geändert wurde. Sollte dann immer angewandt werden! Helligkeit/Kontrast und Schärfe bieten die gleiche Funktionalität wie in gängigen Grafikprogrammen

20 Das nötige Hintergrund -Wissen Bilder können im WWW aber nicht nur aktiv sondern auch passiv verwendet werden Seitenhintergrund Modifizieren/Seiteneigenschaften/Erscheinungsbild/Hintergrundbild ermöglich die Definition eines hinter der Seite liegenden Kachelbildes. Das Bild sollte sich kacheln lassen(!) gute Kachel (schlechte) Kachel Geschmackssache-Kachel

21 Hintergründe per CSS Natürlich lassen sich auch (viel besser) per CSS Hintergründe definieren! Hintergrund/Hintergrundbild Definiert das Hintergrundbild Hintergrund/Wiederholen Kann das Hintergrundbild gar nicht, auf der X-Achse oder auf der Y-Achse wiederholen Anlage Kann das Hintergrundbild mitscrollen (wird von älteren Browsern nicht unterstützt) Horizontale und vertikale Position Können das Hintergrundbild auf der Seite ausrichten Vorteile von CSS Hintergrund kann auf mehrere Elemente angewandt werden (Tabellen, Ebenen etc.) flexibler extern(!)

22 Das Ein-Pixel-GIF Um mit Bildern flexibler Arbeiten zu können, bieten Fireworks und Photoshop die Möglichkeit der Segmentierung. Die Segmente werden in einer Tabelle eingebettet. Da für Tabellen das Attribut height deprecated gesetzt ist, muss die Tabelle anders strukturiert werden. Das Ein-Pixel-GIF ist ein 1x1 Pixel großes, transparentes GIF, dass in die Tabellenstruktur eingepflegt wird, um Ihre Form zu erhalten. Fireworks erstellt ein Image namens spacer.gif (früher shim.gif), das diese Funktionalität erfüllt Um größere Flächen zu definieren, kann das spacer.gif auch in den Dimensionen verändert werden (Hierbei das Bild nicht neu auflösen!!!) Die Umsetzung ist in der Datei thebee.htm zu finden