DW Session 008 - werkschau-bielefeld.de
Werbung
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.