DW Session 008 - werkschau

DW Session 008
DW Session 008
Dreamweaver und Fireworks
Dreamweaver und Fireworks können auf mehrere Arten zusammenarbeiten. Für diese
Zusammenarbeit besitzt Fireworks Funktionsmechanismen von Dreamweaver und umgekehrt.
• Bearbeiten eines Bildes (Beispieldatei edinburgh.htm)
• Ein in Dreamweaver eingebettetes Bild in der Eigenschaftsleiste mit
Bearbeiten.../Fireworks in Fireworks öffnen
• Aus Dialogfeld Diese Datei verwenden wählen
• Nach Bearbeitung mit Fertig zu Dreamweaver zurückkehren
• Die Fireworks-Funktionalität geht bei diesem Export verloren
• Einbetten eines normalen Bildes mit PNG-Quelle (Beispieldateien map.htm, Patchwork.png)
• Erstellen eines Bildes in Fireworks unter Verwendung jeglicher Funktionalität
• Speichern der Datei als PNG (vorzugsweise im src Ordner der Site)
• Exportieren der Datei als GIF, JPG oder PNG in den Ordner images der Site über
Datei/Exportvorschau • Dreamweaver erweitert die Eigenschaftsleiste
• Bei Anwahl von Bearbeiten in Fireworks wird automatisch die PNG-Datei im Ordner
src geöffnet
• Jegliche Fireworks-Funktionalität steht zur Verfügung (Ebenen, Effekte etc.)
• Der Button Fertig exportiert das Bild erneut und speichert die Source PNG-Datei
DW Session 008
Dreamweaver und Fireworks
• Export der Bildinformationen und der HTML-Datei (Beispieldateien Biene.png, theBee.htm) • Erstellen eines Bildes in Fireworks unter Verwendung jeglicher Funktionalität und
Anwenden von Segmentierungen oder Hot-Spots
• Speichern der Datei als PNG (vorzugsweise im src Ordner der Site)
• Exportieren der Datei als GIF, JPG oder PNG in den Ordner images der Site
• Unter den Exporteinstellungen bei Dateityp HTML und Bilder, bei HTML HTML-Datei
exportieren und bei Segmenten Segmente exportieren wählen
• Optional Bereiche ohne Segmente einschließen aktivieren (Achtung: Bildexport auch bei
leeren Bereichen)
• Fireworks erstellt eine Tabelle und exportiert alle Einzelbilder
• Dreamweaver erweitert die Eigenschaftsleiste bei Auswahl eines Segmentes oder der
Tabelle
• Bei Anwahl von Bearbeiten in Dreamweaver wird automatisch Fireworks mit der PNGDatei im Ordner src geöffnet
• Jegliche Fireworks-Funktionalität steht zur Verfügung (Ebenen, Effekte etc.)
• Der Button exportiert das Bild erneut und speichert die Source PNG-Datei
• Die Tabellenstruktur kann sich dabei verändern und wird in Dreamweaver
automatisch angepasst
DW Session 008
Dreamweaver und Fireworks
• Export der Bildinformationen der HTML-Datei, Hyperlinks und Scripts (Beispieldateien
Menüleiste.png, MainTemplate.dwt) • Erstellen eines Bildes in Fireworks unter Verwendung jeglicher Funktionalität und
Anwenden von Segmentierungen oder Hot-Spots
• Erstellen von Symbolen (z.B. Button) über Bearbeiten/Einfügen/neues Symbol oder über
das Kontextmenü
• Zuweisen von Hyperlink, Target und Alt-Text über die Eingenschaftsleiste
• Optional Zuweisung von weiteren Verhalten über Fenster/Verhalten und das Plus-Zeichen
• Speichern der Datei als PNG (vorzugsweise im src Ordner der Site)
• Exportieren der Datei als GIF, JPG oder PNG in den Ordner images der Site
• Unter den Exporteinstellungen bei Dateityp HTML und Bilder, bei HTML HTML-Datei
exportieren und bei Segmenten Segmente exportieren wählen
• Fireworks erstellt eine Tabelle und exportiert alle Einzelbilder
• Dreamweaver erweitert die Eigenschaftsleiste bei Auswahl eines Segmentes oder der
Tabelle
• Bei Anwahl von Bearbeiten in Dreamweaver wird automatisch Fireworks mit der PNGDatei im Ordner src geöffnet
• Jegliche Fireworks-Funktionalität steht zur Verfügung (Ebenen, Effekte etc.)
• Der Button Fertig exportiert das Bild erneut und speichert die Source PNG-Datei
• Die Tabellenstruktur kann sich dabei verändern und wir in Dreamweaver automatisch
angepasst
DW Session 008
JavaScript basierte Navigation
Fireworks bieten zudem noch die Möglichkeit, eine JavaScript basierte Navigation in die Seite
einzubetten.
•Erstellen eines Hauptbuttons (z.B. Rechteck mit Text Menü )
•Erstellen eines Segmentes aus diesem Button (Segmentierungswerkzeug oder Kontextmenü)
•Segment anwählen
•Modifizieren/Pupupmenü/Popupmenü hinzufügen anwählen
•Definieren der Themenbereiche mit den Hyperlinks (Optional: Angabe eines Zieles)
•Optional: ändern der Hierarchiestufe einzelner Themenbereiche
•Anpassen des Erscheinungsbildes mit den zur Verfügung stehenden Optionen (Achtung: um
individuelle Grafiken verwenden zu können, einfach eine beliebige aus dem Menü wählen und nach
dem Export durch eigene ersetzen. Gleiche Größe beachten!)
•Optional: ändern der Einstellungen im Reiter Erweitert •Die Einstellungen zur Position des Menüs können einfacher nach der Erstellung im Dokument
selbst vorgenommen werden (durch einfaches verschieben!)
•Fertigstellen
•Als HTML und Bilder exportieren
DW Session 008
Meta-Tags
Neben den sichtbaren Informationen können HTML-Seiten auch weiterführende, für den User nicht
direkt sichtbare Informationen enthalten.
•Der Webmaster/Ersteller der Site
• <META NAME="author" CONTENT="André Löscher"> •Der Veröffentlicher
• <META NAME="publisher" CONTENT="FH Bielefeld"> •Copyright Hinweis
• <META NAME="copyright" CONTENT="(c) 2005 - André Löscher"> •Schlüsselwörter
• <META NAME="keywords" CONTENT="Dreamweaver, Internetentwicklung, Webdesign, ..."> •Kurze Beschreibung der Site (wird in einigen Suchmaschine unter dem Link angegeben, ca. 200
Zeichen)
• <META NAME="description" CONTENT="Lehrmaterialien und Informationen zum Kurs
Internetentwicklung mit Dreamweaver MX 2004 an der FH Bielefeld"> •Ein Gültigkeitsdatum, falls der Inhalt nur zeitlich begrenzt aktuell ist
• <META NAME="expires" CONTENT="NEVER">
DW Session 008
Meta-Tags
Neben den sichtbaren Informationen können HTML-Seiten auch weiterführende, für den User nicht
direkt sichtbare Informationen enthalten.
•Einordnung der Site in ein Typschema (willkürlich)
• <META NAME="page-type" CONTENT="Schulungsunterlagen"> •Die Zielgruppe
• <META NAME="audience" CONTENT="Studenten"> •Die verwendete Software
• <META NAME="generator" CONTENT="Dreamweaver MX 2004"> •Anweisung an die Suchmaschine, den Links auf der Seite (nicht) zu folgen
• <META NAME="robots" CONTENT="INDEX,FOLLOW"> •Der innerhalb der Seite verwendete Zeichensatz (wird von DW automatisch angelegt!)
• <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> •Erneuter Seitenaufruf innerhalb eines gegebenen Intervalls (hier 4 Sekunden). Ermöglicht auch
das Weiterleiten auf eine andere Domain (Vorsicht bei Suchmaschinen!!!)
• <META HTTP-EQUIV="Refresh" CONTENT="4; URL=http://123.org">
DW Session 008
Meta-Tags
Eine weitere Möglichkeit, Metainformationen anzugeben, ist die Deklaration im Dublin-Core
Standard
•<head profile="http://dublincore.org/documents/dcq-html/">
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/">
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/">
<meta name="DC.title" content="Dreamweaver MX 2004 Seminar: Meta-Angaben">
<meta name="DC.creator" content="Andr&eacute; L&ouml;scher">
<meta name="DC.subject" content="Meta-Angaben">
<meta name="DC.description" content="Lehrmaterialien und Informationen zum Kurs
Internetentwicklung mit Dreamweaver MX 2004 an der FH Bielefeld">
<meta name="DC.publisher" content="FH Bielefeld">
<meta name="DC.contributor" content="Torsten Stapelkamp">
<meta name="DC.date" content="2001-05-20T05:58:45+01:00" scheme="DCTERMS.W3CDTF">
<meta name="DC.type" content="Text" scheme="DCTERMS.DCMIType">
<meta name="DC.format" content="text/html" scheme="DCTERMS.IMT">
<meta name="DC.language" content="de" scheme="DCTERMS.RFC3066">
<meta name="DC.coverage" content="Kirchlengern" scheme="DCTERMS.TGN">
<meta name="DC.rights" content="Alle Rechte liegen beim Autor">
DW Session 008
Meta-Tags unter Dreamweaver
Unter Dreamweaver lassen sich einige Meta-Tags mit dem Bedienfeld Einfügen über HTML/Head
direkt, alle weiteren über die Option meta erstellen.
Um den Inhalt des head-Bereiches besser verwalten zu können, sollte über Ansicht/Head-Inhalt der
Head-Inhalt in einer eigenen Leiste angezeigt werden.
•Zur Erstellung der Schlüsselwörter
• In dem Dialogfeld die Schlüsselwörter durch
Komma getrennt eingeben
Reiter HTML/Head/Schlüsselwörter •Zur Erstellung einer Beschreibung
• In dem Dialogfeld die Beschreibung eingeben
Reiter HTML/Head/Beschreibung •Aktualisierungsintervall der Seite
• In dem Dialgfeld die Zeit in Sekunden und die
Zielseite angeben
Reiter HTML/Head/Aktualisierung •Alle weiteren Meta-Angaben
• Im Dialogfeld unter Wert den Bezeichner und
unter Inhalt den entsprechenden Inhalt angeben
Reiter HTML/Head/Meta DW Session 008
Der optimale Head-Abschnitt
Der optimale Head-Abschnitt ist in der MainTemplate.dwt der aktuellen Discover Scotland
Website und somit in jeder Unterseite vorhanden.
•Den Titel der Seite (<title></title>)
• Der Titel kann für jede Seite unterschiedlich sein, sollte aber immer zum Inhalt passen
•Die Meta-Angaben im Dublin-Core Standard
•Die Meta-Angaben
•Ein Kommentar mit der Description
• Einige Suchmaschinen ignorieren die Meta-Tags und können den Inhalt dieses
Kommentars verwenden
Erweitert
•Auf der Index-Seite wurde das Alt-Tag des Bildes mit dem Inhalt der Description versehen
•Die Description wird als erster Satz auf der Seite wiederholt
DW Session 008
Tabellen
Der ursprüngliche Zweck von Tabellen zur Darstellung tabellarischer Daten wurde mit der
gestalterischen Aufwertung von Internet-Seiten in ein Gestaltungsmittel umgewandelt.
•Jegliche Zellen einer Tabelle werden in dem Tabellenrumpf eingeschlossen (<table></table>).
•Das oberste Element der Tabellenstruktur ist eine Zeile (<tr></tr>). Eine Tabelle kann beliebig
viele Zeilen enthalten. Eine Zeile kann keine Daten enthalten!
•Innerhalb einer Zeile muss mindestens eine Zelle enthalten sein (<td></td>). Eine Zeile kann
beliebig viele Zellen enthalten.
•Eine/Mehrere Zelle(n) kann/können als Kopfzeile definiert werden (<th></th>).
•Eine Zelle darf niemals leer sein! (dann: <td>&nbsp;</td>)
•Eine HTML-Tabelle definiert keine Spalten!
DW Session 008
Tabellendarstellung
In den ersten Versionen von Dreamweaver war das Arbeiten mit Tabellen kompliziert und erforderte
viel Fingerfertigkeit. In der neuen Version stehen über Ansicht/Tabellenmodus oder in der
Einfügeleiste unter Layout zum Arbeiten drei verschiedene Modi zur Verfügung.
•Standardmodus
Im Standardmodus wird die Tabelle browserähnlich dargestellt.
Nur wenn der Rahmen deaktiviert ist (border=0), wird eine dünne
Strichellinie zur Erkennung angezeigt.
•Erweiterter Tabellenmodus
Der erweiterte Tabellenmodus basiert auf dem Standardmodus,
ermöglicht aber ein besseres Handling von Tabellen ohne Rahmen.
•Layoutmodus
Der Layoutmodus stellt eine komplett andere Arbeitsumgebung
zur Verfügung. Tabellen werden nicht anhand Ihrer Zeilen und
Zellen definiert, sondern gezeichnet. Diese Vorgehensweise ist
vergleichbar mit der Funktionalität von Fireworks zur Erstellung
von Segmentbildern.
DW Session 008
Visuelle Hilfsmittel
Die einzelnen Modi bieten spezielle Hilsmittel, die das Modifizieren von Tabellenformatierungen
erleichtern. Die entsprechenden Optionen werden unter Ansicht/Visuelle Hilfsmittel aktiviert.
•Standardmodus/Erweiterter Tabellenmodus
• Bei Auswahl einer Tabelle werden unter der Tabelle die Spalteninformationen
eingeblendet
• Ein Klick auf das kleine Dreieck bietet spezielle Formatierungen für eine Spalte
• Ein Klick auf das Dreieck der untersten Zahl bietet spezielle Formatierungen für die
Tabelle
•Layoutmodus
• Bei Anwahl einer Zelle kann diese mit den Haltepunkten an den Ecken/Seiten skaliert
werden
• Bei Klick auf den Rahmen kann die gesamte Zelle verschoben werden
• Die Spalteninformationen ermöglichen bei Klick auf das Dreieck eine Zelle automatisch zu
strecken (variable Tabellenbreite) oder einen Wert festzulegen
Um effektiv mit Tabellen arbeiten zu können, muss das Handling möglichst einfach sein.
Verschiedene Möglichkeiten stehen unter Dreamweaver zur Verfügung:
•Auswahl einer einzelnen Zelle
• Zum Ändern der Eigenschaften einer Zelle genügt ein Klick in die Zelle. Die
Eigenschaftsleiste zeigt daraufhin die Formatierungsmöglichkeiten.
DW Session 008
Visuelle Hilfsmittel
• Zur direkten Auswahl einer Zelle, diese bei gedrückter
/
Taste anwählen. Um
mehrere Zellen zu markieren einfach weitere Zellen anwählen (Taste gedrückt halten!).
• Zeilen markieren (nicht im Layoutmodus)
• Alle Zellen markieren oder
• Links neben der Tabelle auf Höhe der Zeile klicken (Cursor: schwarzer Pfeil nach rechts)
• Spalte markieren (nicht im Layoutmodus)
• Alle Zellen einzeln markieren oder
• Unterhalb der Spalte auf das Dreieck neben der Breite klicken und aus dem Menü wählen
oder
• Unterhalb der Spalte neben die Breite und den Pfeil auf die Linie klicken oder
• Oberhalb der Spalte klicken (Cursor: schwarzer Pfeil nach unten)
• Gesamte Tabelle markieren
• Alle Zellen einzeln markieren (viel Spaß ;-)
• Auf den äußeren Rand der Tabelle klicken (Fingerspitzengefühl im Standardmodus!!!), am
besten an der Oberseite der Tabelle
• In irgend eine Zelle klicken und im Kontextmenü Tabelle/Tabelle auswählen anwählen
• Viele dieser Funktionalitäten lassen sich auch über den Tag-Selector realisieren!
DW Session 008
Tabelleneigenschaften
Eine Tabelle kann durch Attribute und CSS folgense Eigenschaften zugewiesen bekommen:
•
•
•
•
•
•
•
•
Eine horizontale Breite (B) in Pixel oder Prozent (width) für Tabelle und Zellen,
eine Zellauffüllung (padding) und einen Zellraum (margin) für Zellen,
eine Hintergrundfarbe (background-color) für Tabelle und Zellen,
einen Rahmen (border) für die Tabelle und Zellen,
eine vertikale (vertikal-align) und horizontale (text-align) Ausrichtung für Zelleninhalte,
eine Umbruch-Unterdrückung (white-space) für Zellen,
eine Kopfzeile (Tag: <th>) für Zellen und
ein Hintergrundbild (background-image) für Tabelle und Zellen.
Um eine Tabelle nachträglich in den Dimensionen zu ändern, kann auf folgende Vorgehensweisen
zurückgegriffen werden:
Die Tabelle markieren und in der Eigenschaftsleiste die Zeilen- und Spaltenanzahl ändern
Eine Spalte/Zeile markieren und aus dem Kontextmenü die gewünschte Aktion auswählen
Den Cursor in die letzte Zelle der letzten Zeile setzen und per Tab-Taste eine neue Zeile anfügen
Spalte/Zeile markieren und mit Entf. löschen
In eine Zelle der Tabelle gehen und im Register Layout der Eigenschaftsleiste ein entsprechendes
Icon wählen
• Zwei Zellen verbinden durch Markierung der Zellen und Anwahl im Kontextmenü oder
•
•
•
•
•
DW Session 008
Gestaltung mit Tabellen
Der Layoutmodus in Dreamweaver hat das Gestalten einer Seitenstruktur basierend auf Tabellen
stark vereinfacht. Was weiterhin eine Herausforderung darstellt, ist das gezielte Einsetzen von
Grafiken als Zelleninhalt bzw. Zellenhintergrund um ein bestehendes Design sowohl fest als auch
variabel zugänglich zu machen.
Die Datei Stretchbutton.png im Verzeichnis src und die Datei Stretchbutton.htm im Verzeichnis
images/tmp verdeutlichen dies.