Einführung im Dreamweaver
Werbung
Einführung in Dreamweaver Tatjana Funk Stand: Oktober 2001 Tatjana Funk Dreamweaver 3, Stand: Oktober 2001 Inhaltsverzeichnis 1. Was bietet Dreamweaver? 2. Die Benutzeroberfläche 3. 2.1 Das Dokumentenfenster 2.2 Eigenschaften-Inspector Das Site-Fenster 3.1. Erstellen einer Site-Map 3.2 Erstellen einer lokalen Site 4. Text 5. Einrichten der Seiteneigenschaften 6. Erstellen von Links 7. Browservorschau 8. Aufrufen des HTML-Codes 9. Bilder 10. Imagemap erstellen 11. Rollover erzeugen 12. Tabellen erstellen 13. Ebenen 13.1 Positionierung von Ebenen 14. Frames erstellen 15. Erstellen von Sprungmenüs Tatjana Funk 2 Dreamweaver 3, Stand: Oktober 2001 1. Was bietet Dreamweaver Dreamweaver ist ein visueller Editor. Visuelle Editoren erlauben die Erstellung und Verwaltung von Web-Sites nach dem WYSIWYG-Prinzip (What you see is what you get). Dieses Prinzip erweist sich vor allem dann als vorteilhaft, wenn Ideen schnell realisiert werden sollen. Der Webseitenersteller setzt die Seiten, ähnlich wie in einem DTP-Programm zusammen. Der dazugehörige HTML-Code wird dann durch das Programm automatisch generiert. HTML-Kenntnisse sind nicht unbedingt erforderlich, jedoch ratsam, um manchmal Fehler, Formatierungen etc. bearbeiten zu können. Was für Dreamweaver spricht: Eine übersichtliche Benutzerführung Ein sauber generierte und browserunabhängiger HTML-Code Übersichtlich strukturierte Hilfen Verfügbarkeit von PlugIns Die Dreamweaver-Arbeitsumgebung besteht aus zwei Hauptbereichen: Site-Fenster: Explorer- und Site-Map-Oberfläche zur Verwaltung von WebSites, Link-Verwaltung etc. Dokumentenfenster: WYSIWYG-Editor zur Erstellung und Gestaltung einzelner HTML-Dokumente Beim Erstellung und Bearbeiten von Dokumenten generiert Dreamweaver automatisch den zugrunde liegenden HTML-Code, der vom Autor auch direkt erstellt oder nachbearbeitet werden kann. Hier liegt eine der großen Stärken des Dreamweaver: Der generierte Code gilt im Vergleich zu anderen HTML-Editoren als sehr gut. Der Autor behält darüber hinaus die Kontrolle über den Code. Manuell erstellter Code wird (auf Wunsch) nicht verändert. Mit Dreamweaver können den erstellten Webseiten auch interaktive und animierte Elemente hinzugefügt werden: So können unterschiedliche Aktionen als Reaktion auf Ereignisse vorgesehen werden, z.B. das Austauschen von Grafiken beim Überfahren mit der Maus (das sogenannte Roll Over). Ferne können mit Zeitleisten Animationen eingebaut werden, z.B. die Änderung der Position von Ebenen oder einer Bildquelle im Zeitverlauf. Da eine Reihe von Dreamweaver-Features (Ebenen, Style Sheets, Zeitleisten etc.) nicht in ältern Browsern dargestellt werden können, wird eine Konvertierung der Dateien in 3.0-Browser-kompatible Version angeboten: Style Sheet-Layouts werden soweit möglich in Font-Definitionen konvertiert, Ebenen in Tabellen etc. Dreamweaver besitzt ein integratives Konzept: Die Zusammenarbeit mit anderen Webwerkzeugen wird ermöglicht. Sie können vom Dreamweaver aus andere Anwendungen, z. B. andere HTML-Editoren, Bildeditoren, Browser etc. starten und verwenden. Tatjana Funk 3 Dreamweaver 3, Stand: Oktober 2001 2. Die Benutzeroberfläche 2.1 Das Dokumentenfenster Dokumentenfenster Wenn Dreamweaver aufgerufen wird, öffnet sich als erster Arbeitsbereich automatisch das Dokumentenfenster, in dem das aktuelle HTML-Dokument nach dem WXSIWYGPrinzip ungefähr so angezeigt wird, wie es später in einem Browser erscheint. Öffnen Menüleiste: Fenster Aufruf: Objekte – Eigenschaften - Launcher Menüleiste Titelseite Kontextmenü Objektpalette Launcher EigenschaftenInspektor Popup-Menü für die Fenstergröße Dokumentengröße und DownloadzeitAnzeige Mini-Launcher Launcher / Mini-Launcher Schnelles Öffnen und Schließen der am häufigsten verwendeten Inspectoren und Paletten. Objektpalette Schnelles Erstellen und Einfügen der meistgenutzten Objekttypen (Bilder, Tabellen, Ebenen etc.) Tatjana Funk 4 Dreamweaver 3, Stand: Oktober 2001 Die Objektpalette umfasst sechs verschiedene Tafeln (Allgemein, Formulare, Head, Frames, Unsichtbare Elemente, Zeichen Eigenschaften-Inspector Anzeigen und Bearbeiten der Eigenschaften des ausgewählten Objekts. Durch Aufruf des Fragezeichens erhält man kontextsensitive Information zum markierten Objekt. Der Eigenschaften-Inspektor bietet in einem „kleine“ Fenster Grundfunktionen an. Man erhält den Erweiterten Eigenschaften-Inspector durch Anklicken des Erweiterungspfeils rechts unten. 2.2 Eigenschaften-Inspector Erweiterter Eigenschaften-Inspector Titelleiste In der Titelleiste des Dokumentenfensters werden Seitentitel und Dateinamen angezeigt. Tag-Selektor Zeigt Tags an, die den ausgewählten Text oder das Objekt steuern. Umgekehrt wird durch Anlicken eines Tags der gesamte zugehörige Inhalt im Arbeitsbereich markiert. Popup-Menü „Fenstergröße Einstellen der Größe des Dokumentenfensters Kontextmenü Klickt man ein Symbol in der Menüleiste erscheint das Kontextmenü. Tatjana Funk 5 Dreamweaver 3, Stand: Oktober 2001 3. Das Site-Fenster Site-Fenster Das Site-Fenster dient der Website- und Linkverwaltung. Es besteht aus zwei Teilbereichen. Site-Map Explorer Explorer-Fenster Im rechten Explorer-Ansichtsfenster werden alle Dateien und Ordner der lokalen Site aufgelistet. Diese Liste kann u.a. wie der Windows-Explorer zum Kopieren, Einfügen, Löschen und vor allem auch zum Öffnen von Dateien dienen. Aufruf aus dem Dokumentenfester: FENSTER /DATEIEN DER SITE Site-Map-Fenster Im linken Site-Fenster kann alternativ die Struktur einer entfernten Site (in Explorer-Form) oder aber die Site-Map der lokalen Site angezeigt werden. Mit Hilfe der Site-Map kann unter Generierung von Hyperlinks sehr leicht die Grundstruktur einer Website einwickelt werden (vgl. Hyperlinks erstellen). Die Homepage (standardmäßig index.htm) einer Site wird in der Site-Map ganz oben angezeigt. Ein Pluszeichen neben einem Datei-Symbol zeigt an, dass noch weitere Elemente mit dieser Datei verknüpft sind bzw. dieser gehören. Durch Klick auf „+“ können diese Dateien eingeblendet werden, durch Klick auf „-„ werden sie wieder ausgeblendet. Leider ist die Site-Map nicht direkt ausdruckbar. Sie kann als Bild (jpg, bmp, png) abgespeichert und dann über einen externen Bildeditor ausgedruckt werden. Tatjana Funk 6 Dreamweaver 3, Stand: Oktober 2001 Aufruf des Site-Map-Fensters aus dem Dokumentenfenster: SITE oder FENSTER / SITE MAP Oder aber SITE-MAP-AUSWAHL im Site-Fenster mit AUSWAHLBUTTONS 3.1 Erstellung einer Site-Map Sie können eine Site-Map erst dann aufrufen, wenn Sie in der Site eine HTML-Datei als Homepage definiert haben. Erstellung eines HTML-Dokuments Neue Seite: Tatjana Funk Menüleiste: DATEI / NEU Damit wir kein leeres Blatt haben, schreiben wir index.html oder default.html hinein und speichern diese Datei unter diesem Namen auch ab (Verzeichnis auswählen, neuen Ordner mit entsprechenden Homepagenamen versehen und darunter abspeichern). Die Index-Datei bzw. die Default-Datei ist die Startseite einer Website, die bei der Eingabe der Internetadresse automatisch aufgerufen wird. 7 Dreamweaver 3, Stand: Oktober 2001 3.2 Neue Site Erstellen einer lokalen Site Menüleiste: SITE / NEUE SITE Dialogfenster „Site-Definition“ Lokale Infos Beim Erstellen einer lokalen Site muss die Kategorie „Lokale Infos“ aktiviert sein. Site/Name: Eingabe des Ordnernamens Lokaler Stammordner: Suche des Stammordners Liste der lokalen Dateien automatisch aktualisieren Cache-Datei: Wenn Sie eine Cache-Datei der Site erstellen (Cache verwenden) wird eine Aufzeichnung aller vorhandenen Dateien angelegt und dadurch die Hyperlinkverwaltung beschleunigt. Tatjana Funk 8 Dreamweaver 3, Stand: Oktober 2001 Web-Sever-Infos Ein/Aus-Checken: Tatjana Funk Keine: wählen, wenn noch keine Web-Server-Infos zur Verfügung stehen FTP: wählen, wenn die Verbindung zum WebServer über FTP läuft Lokal/Netzwerk: wählen, wenn der Web-Server als Netzlaufwerk zur Verfügung steht oder wenn Sie einen Web-Server auf dem lokalen Computer eingerichtet haben. Ein Netzwerk zur Verfügung steht Wenn in einem Team gearbeitet wird, können Dateien, die zwischen einem entfernten Server und dem lokalen Computer übertragen werden, ein- oder ausgecheckt werden. Wenn Sie also eine Datei ausgecheckt haben, können die anderen Mitarbeiter nicht auf diese Datei zugreifen, erst, wenn Sie sie wieder eingecheckt haben. 9 Dreamweaver 3, Stand: Oktober 2001 Sitemap-Layout Da wir zu Beginn bereits ein Stammverzeichnis und einen Index angelegt haben, kann dieses jetzt durch die Suchfunktion im Feld „Homepage“ eingefügt werden. Design Notes Umfangreiche Websites werden in der Regel in Teamwork realisiert. Von der Konzeption über die Entwürfe zum Prototypen, die ein oder mehrere Funktionen bieten, bis hin zum fertigen Endprodukt, das publiziert und jeweils erweitert werden kann, werden mehrere Phasen durchlaufen. Oft ist es nicht möglich, das eine Person die Sites wartet und betreut. Design Notes helfen in einem Team, die einzelnen Entwicklungsschritte für ein HTMLDokument festzuschreiben und für andere nachvollziehbar zu machen. Ist diese Funktion erwünscht, sollte Sie in der Sitedefinition aktiviert werden. Bei aktiver Datei im Dokumentenfenster oder im Sitefenster gewünschte Datei anklicken und mit DATEI / DESIGN NOTES die Funktion aufrufen. Tatjana Funk 10 Dreamweaver 3, Stand: Oktober 2001 Eintrag der Design Notes 4. Text Text einfügen Text kann direkt ins Dokumentenfenster eingegeben werden: BEARBEITEN / EINFÜGEN (Copy & Paste) Vorsicht: Hier wird der reine Text- ohne Umbrüche – übernommen. BEARBEITEN / ALS TEXT EINFÜGEN: Die Umbrüche bleiben erhalten, die Textformatierungen jedoch nicht. Text formatieren Die Formatierungsfunktion von Dreamweaver ähneln denen gängiger Textverarbeitungsprogramme und sind über zwei Wege erreichbar: 1. EINGENSCHAFTEN-INSPECTOR, nach Auswahl des zu formatierenden Textes 2. Menüleiste: TEXT und KONTEXTMENÜ Schriftarten TEXT / SCHRIFTART / STIL / GRÖSSE..... Oder mit den Einstellungsmenüs und –buttons im EINGENSCHAFTEN-INSPEKTOR Textfarbe Tatjana Funk Für einzelne Wörter / Abschnitte: TEXT / FARBE.... oder über den EIGENSCHAFTEN-INSPECTOR Standartextfarbe (für das ganze Dokument): RECHTE MAUSTASTE / SEITENEIGENSCHAFTEN... oder ÄNDERN / SEITENEIGENSCHAFTEN 11 Dreamweaver 3, Stand: Oktober 2001 Textfarben-Wahl mit dem Eigenschaften-Inspector Farbmenüs Zur Farbvergabe stehen verschiedene Optionen zur Verfügung: Websichere Farben: Farben, die im 256-Farbmodus im Netscape-Navigator und im Microsoft Internet Explorer auf Windows- und Macintosh-Systemen zur Verfügung stehen. Im Dreamweaver wird die Auswahl auf die 212 websicheren Farben beschränkt. Pipette: Sie können mit der Pipette auch speziell auf Ihrem Bildschirm ausgewählte Farben zuweisen, indem Sie die Pipette über beliebige Farben auf ihrem Monitor führen. Dreamweaver setzt dann die nächstliegende Farbe aus der Farbpalette ein. Radiergummi-Schaltfläche: Die aktuelle Farbe wird entfernt, ohne dass andere Farbe gewählt wird. Farbpaletten-Schaltfläche: Der Systemfarbwähler wird geöffnet – auch nicht websichere Farben sind so verwendbar. Vorsicht: Browserschriftarten Mit BEARBEITEN / VOREINSTELLUNGEN / SCHRIFTARTEN / KODIERUNG eingestellte Schriftarten entsprechend den Schrifteinstellungen eines Browser: Sie können damit die gewünschte Schriftart und Größe für die Arbeit an Ihrem Text wählen – keine Einfluss hat diese Einstellung jedoch darauf, wie das Dokument in einem Browser angezeigt wird. Exkurs: Absolute oder relative Codierung der Fontgröße Die Schriftgröße kann absolut oder relativ (zur voreingestellten Standtard-Schriftgröße des Anwenders) eingestellt werden.: Absolute/feste Codierung (z.B. 4): Die „absoluten“ Schriftgrößen, die Sie z.B. über den Eigenschaften-Inspector wählen können, sind nur scheinbar fix. Abhängig von der gewählten StandardSchriftgröße des Browsers werden sie unterschiedlich groß dargestellt. Wirklich feste Schriftgrößen, die nicht von der Browservoreinstellung abhängen, können über die Style- Tatjana Funk 12 Dreamweaver 3, Stand: Oktober 2001 Anweisung mit Stylesheets festgelegt werden. Jedoch ergeben sich auch hier abhängig von der benutzten Plattform sowie Monitor und Auflösung unterschiedliche Textgrößen beim Anwender. Bei sehr kleinen Fontgrößen besteht so z.B. die Gefahr, dass sie auf manchen Plattformen wie Mac (Schrift wird um ca. ein Viertel kleiner dargestellt als unter Windows) nicht mehr lesbar sind. relative Codierung (z.B. +4): Die relative Codierung bedeutet, dass die Schrift relativ zur im Browser eingestellten Schriftgröße dargestellt wird. Also +4 bedeutet dann eine um vier Einheiten größere Schrift als die Browser-Standardschrift. 5. Einrichten grundlegender Seiteneigenschaften: Seitentitel, Hintergrund etc Seitentitel, Hintergrundfarben, bild etc. Tatjana Funk Grundlegende Eigenschaften eines HTML-Dokuments werden im Dialogfenster „Seiteneigenschaften“ eingerichtet. Menüleiste: DATEI / NEUE DATEI ÖFFNEN, Klick mit der rechten Maustaste auf Seiteneigenschaften. 13 Dreamweaver 3, Stand: Oktober 2001 Titel: Es empfiehlt sich, einen griffigen, inhaltlich treffenden Seitentitel einzugeben, da dieser später in der Titelseite des Browsers erscheint und vor allem bei bewertenden Suchmaschinen sehr hoch gewertet wird. Hintergrundbilder: In Hintergrundbild ist mit Vorsicht zu verwenden, das es u.U. sehr viel Arbeitsspeicher erfordert und den Aufbau der Seite verzögert. Seitenränder: Linker und oberer Rand werden nur von Netscape, Randbreite und Randhöhe dagegen von Microsoft Explorer interpretiert Tracing-Bild: Ein „Hintergrundbild“, auf dem der Seitenentwurf skizziert ist, kann als Entwurfsschablone – ähnlich einem Pauspapier – eingeblendet werden. Das Tracing-Bild wird im Browser nicht angezeigt. Hyperlink Hyperlink: Festlegung der Textfarbe des Links Besucht: Festlegung der Textfarbe, wenn ein Link besucht wurde. Aktiv: Festlegung der Farbe, wenn mit der Maus ein Link aktiviert wird. 6. Erstellen von Links Absolute Links Absolute Links enthalten den vollständigen URL des verknüpften Dokuments und das zu verwendende Protokoll, z.B. http://www.lernradio.de. Absolute Pfade sind erforderlich, wenn ein Hyperlink zu einem Dokument auf einem anderen Server hergestellt werden soll. Wenn Sie einen solchen Link einsetzen, verweisen Sie auf eine andere Website, daher empfiehlt es sich, ein neues Browserfenster zu öffnen, damit dem Nutzer klar wird, dass er ihre Seite verlässt. Gleichzeitig bleibt ihre Seite auf dem Bildschirm des Nutzers geöffnet. Relative Links Relative Links sind Querverweise, welche innerhalb Ihres eigenen Webs liegen. Diese Querverweise sind zu bevorzugen. Sie müssen Ihre Links nicht verändern, wenn Sie Ihr Web auf einem anderen Server veröffentlichen wollen. Außerdem bleiben die Benutzer innerhalb Ihres Webs. Bei diesen Links wird der Teil des absoluten URLs weggelassen. Sie geben lediglich den Dateinamen des Dokuments an und die entsprechende Ordnerhierarchie. Tatjana Funk 14 Dreamweaver 3, Stand: Oktober 2001 story.htm Link ist im selben Ordner ../museum/story.htm Bei einem Link zu einer Datei, die sich im übergeordneten Ordner des aktuellen Ordners befindet, geben Sie vor dem Dateinamen zwei Punkte und einen Schrägstrich (../). Die beiden Punkte bezeichnen die übergeordnete Ebene der Ordnerhirarchie. dokumente/bild.htm Bei einem Link zu einer Datei, die sich in einem Unterordner des Ordners der aktuellen Datei befindet, geben Sie den Namen des Unterordners, dann einen Schrägstrich (/) und abschließend den Dateinamen des verknüpften Dokuments an. Verknüpfen bestehender Mit dem Dateizeiger-Symbol können Sie einen Link zu Dateien einem anderen offenen Dokument, einem Dokument oder Bild im Site-Fenster erstellen. Wählen Sie im Dokumentfenster eine Textstelle oder ein Bild aus Ziehen Sie das Dateizeiger-Symbol rechts neben dem Feld Hyperlink im Eigenschaften-Inspector auf ein Dokument im Site-Fenster Der Hyperlink wird aktualisiert und zeigt den Hyperlink an Lassen Sie die Maustaste los Tatjana Funk 15 Dreamweaver 3, Stand: Oktober 2001 Erstellen einer Verknüpfung mit dem Dateizeiger-Symbol Hyperlinks Text oder Grafik markieren, über den EigenschaftenInspector (FENSTER / EIGENSCHAFTEN) im Feld „Hyperlink“ Pfad und Name des Zieldokuments eintragen oder mit dem Ordnersymbol auswählen (es erscheint oben dargestelltes“ Datei-Auswahlfenster) Hyperlinks zu einer Audio- bzw. Videodatei Das selbe Verfahren wird angewendet: Wählen Sie die Textstelle oder Grafik aus, die als Hyperlink zur Audio- bzw. Videodatei agieren soll. Klicken Sie im Eigenschaften-Inspector auf das Ordnersymbol, um die entsprechende Datei auszuwählen oder geben Sie Pfad und Name der Datei im Feld Hyperlink ein. Zielfester von Hyperlinks Die Zielseiten können in verschiedenen Formen auf dem Bildschirm geladen werden. Tatjana Funk 16 Dreamweaver 3, Stand: Oktober 2001 blanc öffnet das verknüpfte Dokument in einem neuen Browser-Fenster. Das aktuelle Fenster bleibt dabei verfügbar. parent öffnet das verknüpfte Dokument im übergeordneten Frameset des Hyperlinks _self öffnet das verknüpfte Dokument im aktuellen Frame. Dabei wird der derzeitige Inhalt des Frames ersetzt. _top öffnet das verknüpfte Dokument im äußersten Frameset des aktuellen Dokuments. Dabei werden alle Frames ersetzt E-Mail-Hyperlink Dieser Hyperlink öffnet ein E-Mail Formular, in dem bereits die Adresse des Empfängers angegeben ist. Menüleiste: FENSTER / OBJEKT-INSPECTOR / E-MailVerknüpfung. Es geht ein neues Fenster auf, in dem der Titel und die Adresse eingetragen werden kann. Damit ist die Verknüpfung hergestellt. Die e-mail-Verknüpfung kann auch im EigenschaftenInspector im Feld „Hyperlink“ eingegeben werden. Der email Adresse muss dabei der HTML-Befehl „mailto:“ vorangestellt werden. mailto:[email protected] E-Mail-Verknüpfung Tatjana Funk 17 Dreamweaver 3, Stand: Oktober 2001 7. Browservorschau Anzeigen von Dateien bzw. Framesets im Browser Sie können sich die erstellten Dokumente in den auf Ihrem Rechner installierten Browsern anzeigen lassen: DATEI / VORSCHAU IN BROWSER oder F12 Zuvor sind allerdings die gewünschten Browser mit dem Dreamweaver zu verknüpfen: DATEI / VORSCHAU IN BROWSER / BROWSERLISTE BEARBEITEN oder BEARBEITEN / EINSTELLUNGEN / VORSCHAU IN BROWSER 8. Aufrufen des HTML-Codes HTML-Inspektor Im HTML-Inspektor wird der Quellcode des aktuellen Dokuments angezeigt. Im Dokumentenfenster vorgenommene Änderungen werden sofort im HTMLQuellcode angezeigt, eine gute Lernhilfe zum Erlernen von HTML. HTML-Inspektor öffnen Dokumentenfenster: FENSTER /HTML (F10 oder Launcher <>) Mit dieser Funktion, die sich am linken unteren Rand des HTML-Dokuments befindet, kann ich durch Anlicken eines Tags der gesamte zugehörige Inhalt im Arbeitsbereich markiert. Quick Tag Selektor 9. Bilder Bild einfügen Zum Einfügen von Bildern bietet Dreamweaver mehrere Möglichkeiten an: EINFÜGEN / BILD Objektpaltette (Allegemein): BILD EINFÜGEN Ein Bild direkt per Drag and Drop aus Ihrer Verzeichnisstruktur (z.B. mit dem Explorer) an die gewünschte Stelle ziehen. Eingefügt werden können die Internet-Bildformate JPG, GIF und PNG (Vorsicht: PNG wird erst ab Microsoft Internet Explorer 4.0 bzw. Netscape 4.04 unterstützt). Damit Bilder in einem DW-Dokument angezeigt werden, müssen sie sich innerhalb eines definierten lokalen Siteverzeichnisses befinden. Sie werden daher beim Tatjana Funk 18 Dreamweaver 3, Stand: Oktober 2001 Import von außerhalb einer Site befindlichen Bildern gefragt, ob Sie die Bilder in einen Ordner der lokalen Site kopieren möchten. Bildeigenschaften Bildeigenschaften Für markierte Bilder können nur mit dem EIGENSCHAFTEN-INSPEKTOR unterschiedliche Bildeigenschaften festgelegt werden, z.B. H-/V-Abstand: horizontaler und vertikaler Abstand zwischen dem Bild und den umgebenden Elementen, z.B. Text Ausrichtung: die Funktion sollte nur vorsichtig verwendet werden, da sie von vielen Browsern nicht korrekt oder gar nicht interpretiert wird. Alt-Feld: Einfügen eines alternativen Textes, der anstelle des Bildes angezeigt wird, wenn in einem Browser keine Bilder gezeigt werden (sollten). Wenn man mit der Maus über das Feld fährt, wird der Titel angezeigt. Map: Einfügen einer Imagemap (vgl. Kapl Imagemap) etc. Überlappen von Bildern Sollen sich mehrere Bilder überlappen, so sind zunächst mehrere Ebenen einzufügen, in die die Bilder dann importiert werden. Bild als Seitenhintergrund ÄNDERN / SEITENEIGENSCHSFTEN oder mit rechter Maustaste ins Dokument klicken und die Seiteneigenschaften aufrufen. 10. Imagemap erstellen Imagemap Tatjana Funk Eine Imagemap ist ein Bild, in dem bestimmte Bereiche als Hyperlinks definiert und anklickbar sind, sogenannte „Hotspots“. Mit dem DW können clientseitige Imagemaps grafisch erstellt und bearbeitet werden: ERWEITERTE EIGENSCHAFTEN-INSPECTOR (bei markiertem Bild): Nach Aktivieren der Zeichen-Buttons können Viereck-, Kreis- oder Vieleck-Hotspots auf dem Bild eingezeichnet und mit Hyperlinks versehen werden. 19 Dreamweaver 3, Stand: Oktober 2001 Beim Überfahren eines Bildes mit der Maus werden die sensitiven Flächen mit Veränderung des Mauszeigers und mit Anzeige eines kleinen Hinweistextes (Tooltip) kenntlich gemacht. Sie werden jedoch unterschiedlich von den Browsern dargestellt - bzw. nicht dargestellt. (Netscapebrowser „kommentieren“ beispielsweise nicht Vieleck- und Kreishotspots. 11. Rollover erzeugen Rollover Ein Rollover ist ein Bild, das sich beim Überfahren mit der Maus ändert. Die Rollover-Eigenschaft wird z.B. häufig bei Buttons verwendet. Ein Rollover-Objekt besteht aus zwei Bildern, von denen das eine standardmäßig und das andere nur bei Mauskontakt angezeigt wird. EINFÜGEN / ROLLOVER-BILD, es sind zwei Bilddateien anzugeben: Das „Standard“-Originalbild sowie das Rollover-Bild, das beim Mauskontakt erscheint. Soll ein Hyperlink eingefügt werden, so ist im „Rollover-Bild einfügen“- Dialog im Feld „Verknüpfen“ die entsprechende Zieldatei einzutragen. Die Rollover-Funktion erzeugt automatisch den notwendigen Java Script Code. 12. Tabellen erstellen Tabellen Tabellen einfügen Tabellen waren eigentlich nur zur Darstellung von tabellarischen Daten gedacht. Heute werden sie jedoch als ein zentrales Layout-Element zur Positionierung verwendet. Mit einer Tabelle kann leicht gesteuert werden, wie Texte und Grafiken auf der Seite angeordnet werden sollen. EINFÜGEN / TABELLE oder Objektpalette ALLGEMEIN / TABELLE Im Dialogfeld „Tabelle einfügen die gewünschten Tabelleneigenschaften festlegen: Breite der Tabelle in Pixel (absolut = der als Prozentsatz des Browserfensters (relativ, Größe variabel). Tatjana Funk 20 Dreamweaver 3, Stand: Oktober 2001 Rahmen der Tabelle Beachte: für „unsichtbare“, rahmenlose Tabelle Wert 0 (Pixel) eingeben. Zellauffüllung: Abstand (in Pixel) des Zellinhalts vom Rand der Zellen Zellraum: Abstand (in Pixel) der einzelnen Zellen zueinander. Dialogfenster „Tabelle einfügen“ Tabellen können auch ineinander verschachtelt werden, indem sie innerhalb einer Tabelle die Einfügemarke an die Stelle setzten, an die eine neue Tabelle eingefügt werden soll. Tabelleneigenschaften Detaillierte Festlegung bzw. nachträgliche Änderung der Tabelleneigenschaften erfolgt über den erweiterten Eigenschaften-Inspector (Erweiterungspfeil rechts unter im Eigenschaftenfenster anklicken). Eigenschaften-Inspector – mit Erweiterung Einige Tabelleneigenschaften: Tatjana Funk Ausrichtung der Tabelleninhalte HG: Hintergrundbild und –farbe V-/H-Abstand: Abstand (in Pixel), der unter bzw. oberhalb/links bzw. rechts von der Tabelle 21 Dreamweaver 3, Stand: Oktober 2001 eingehalten werden soll. Rahmenfarbe (bei normalem Rahmen) bzw. Heller/Dunkler Rahmen (für die beiden verwendeten Farben eines 3-D-Rahmens Vorsicht: im Netscape Navigator erfolgt immer eine 3-DDarstellung auf Basis der Rahmenfarbe. Tabellen ändern Übrigens: Mit BEFEHL / TABELLE FORMATIEREN können Tabellen sehr schnell mit modifizierbaren, vordefinierten Designs formatiert werden. Mit den Menüoptionen ÄNDERN / TABELLE/... oder per Kontextmenü TABELLE können vorhandene Tabellen geändert werden: Einfügen von Spalten oder Zeilen Verbinden von Zellen 13. Ebenen Ebenen Neben Tabellen gibt es das neuere Konzept der Ebenen zur Erstellung eines komplizierteren Seitenlayouts. Ebenen sind vergleichbar mit Textfeldern von Word. Wie diese können sie schnell neu und - zumindest theoretisch – pixelgenau positioniert werden, indem sie einfach an die gewünschte Stelle gezogen werden. Beachte: Da Ebenen zur Zeit noch in vielen Browsern nicht oder nur unsauber und zudem noch plattformabhängig dargestellt werden, sollten sie Ebenen nur wenn unbedingt nötig verwenden, z.B. für Zeitleisten-Animationen. Ansonsten sind Tabellen vorzuziehen (vgl. Folgekapitel „Positionierung mit Tabellen und Ebenen“). Probleme mit Ebenen Einige aktuelle Ebenen-Einschränkungen und Bugs: Netscapes Resize-Bug: Bei einer Größenänderung des Browserfensters vergisst Netscape, das StyleSheet mitzuladen. Dreamweaver bietet hier ein Skript an, das den Fehler behebt (BEARBEITEN / EINSTELLUNGEN / EBENEN // RESIZE-FIX AKTIVIEREN). Ebenen erstellen Tatjana Funk Keine Scroll-Funktionen in Netscape 4 und Internet Explorer 4.x (auf Mac) „Layer“ wir nur von Netscape abgebildet Einfügen einer neuen Ebene: Dokumentenfenster: EINFÜGEN / EBENE oder Symbol in der Objektpalette. Das Ebenen-Feld in gewünschte Größe 22 Dreamweaver 3, Stand: Oktober 2001 aufziehen. Ebenen positionieren Wählen Sie die Ebene im Rahmenbereich aus (Mauscursor wird zum Pfeil-Kreuz) und ziehen Sie die Ebene an die Gewünschte Stelle. Auswählen einer Ebene - Verschieben Ebenen: Größe ändern Ausgewählte Ebene durch Ziehen an einem der rechteckigen Änderungsgriffe (Cursor wird zum Doppelpfeil) auf die gewünschte Größe bringen. Auswählen einer Ebene – Skalieren Ebenen: Inhalte auswählen Die Inhalte einer Ebene (z.B.) Bilder werden wir üblich durch Anklicken ausgewählt. Beachte: Leicht kann das Auswählen einer Ebene und die Auswahl eines großen Bildes innerhalb einer Ebene verwechselt werden. Auswählen des Inhalts einer Ebene Ebenen: Eigenschaften Tatjana Funk Im Eigenschaftenfenster können die Eigenschaften einer Ebene korrigiert werden: 23 Dreamweaver 3, Stand: Oktober 2001 Wichtige einstellbare Ebenen-Eigenschaften: L, B, O, H: Position (Linke obere Ecke) Breite und Höhe der Ebene in Pixel Z-Index: Stapelreihenfolge von Ebenen – Ebenen höherer Nummer werden über Ebenen niedrigerer Nummer angezeigt. Tag: Bestimmt die Art der Ebene. Mit DIV und SPAN werden CSS-Ebenen. Layer und ILAYER sind Ebenen, die nur im Netscape Navigator definiert sind. Empfohlen wird i.d.R. das DIV-Tag. 13.1 Positionierung mit Tabellen und Ebenen Tabellen und Ebenen Zur Zeit werden Ebenen nur von wenigen Browsern unterstützt, daher sind Tabellen-Formatierungen für Endversionen von Websites vorzuziehen. DW bietet hier eine Kombilösung an, bei der die Vorteile von Ebenen (einfaches Anordnen von Texten und Grafiken) mit denen von Tabellen (werden von weit mehr Browsern unterstützt) kombiniert werden: Mit DW können Ebenen in Tabellen konvertiert werden und umgekehrt. Tabellen in Ebenen konvertieren Konvertierung aller vorhandener Tabellenzellen in Ebenen: ÄNDERN / LAYOUT / INHALT MIT EBENEN NEU POSITIONIEREN Ebenen in Tabellen konvertieren DATEI / 3.0-BROWSER-KOMBATIBLE... Hier können Sie wählen, ob Ebenen in Tabellen und/oder CSS-Stile in HTML-Markup konvertiert werden sollen. Mit dieser Konvertierungsoption im Menü Datei können 3.0-Browser-kompatible Versionen einer Seite erstellt werden; dabei wird eine separate, konvertierte Datei erstellt und das Original beibehalten. Tatjana Funk 24 Dreamweaver 3, Stand: Oktober 2001 ÄNDERN / LAYOUT-MODUS / EBENEN IN TABELLEN KONVERTIEREN... Hier werden alle Ebenen durch eine einzige Tabelle ersetzt. Beachte: Wenn Ebenen überlappen, können keine Tabellen erstellt werden. Aktivieren Sie daher die Option ANSICHT / EBENENÜBERLAPPUNG VERHINDERN Beachte: Durch die freie Positionierungsmöglichkeiten bei Ebenen entstehen nach der Konvertierung oft sehr komplexe, verschachtelte Tabellen mit vielen schmalen Spalten und (von DW automatisch angelegten Leer-GIFs), die noch nachbearbeitet werden müssen. Dieser Effekt lässt sich durch die Verwendung der Gitternetz-Einrast-Funktion vermeiden (ANSICHT / GITTERNETZ / ZEIGEN bzw. EINRASTEN AN bzw. EINSTELLEN). Ferner kann hier festgelegt werden, dass Zellen, die weniger als x Pixel breit sind, nicht angelegt werden. 14. Frames erstellen Mit Frames können mehrere HTML-Dokumente im Browser angezeigt werden. Jeder Teilbereich kann dann eigene wechselnde oder statische Inhalte enthalten. Dies werden aus jeweils eigenständigen HTML-Dokumenten geladen. Oft erfolgt die Unterteilung in ein Navigations- und einen Inhaltsbereich. Im nachstehenden Bild wird eine Seite mit dem Menü und eine mit dem Inhalt in den Browserbereich geladen. Frameset mit zwei Frames – zwei HTML-Seiten werden geladen. Tatjana Funk 25 Dreamweaver 3, Stand: Oktober 2001 Frameset-Datei Neben den bereits erwähnten Menü- und Inhaltseiten benötigt man zur Darstellung einer Framesite eine dritte Datei – die Framset-Datei. In diesem HTML-Dokument werden die einzelnen Bereiche im Browserfenster definiert: Größe und Position der Frames sowie Namen der HTMLDokumente, die als Inhalte in die einzelnen Frames geladen werden sollen, werden dort angegeben. Frame in Frame Ausgereifte Websites lassen sich mit sog. „Frame in Frame“-Konstruktionen aufbauen. Wie der Name bereits andeutet, lässt sich ein Bereich (Frame) wiederum in unterschiedliche (Unter) Frames gliedern. Vorsicht ist jedoch geboten, denn zu viele Frames erhöhen neben der Ladezeit auch den Verwaltungsaufwand der Seite. Der Einsatz von nicht mehr als fünf Frames ist ratsam. Aufbau eines zweiteiligen Framesets Ein zweiteiliges Framset soll erstellt werden. Neues Dokument öffnen und beispielsweise unter dem Namen frame-navi.htm abspeichern. Ein weiteres neues Dokument öffnen und beispielsweise unter dem Namen frame-doku.htm abspeichern. Wiederum ein drittes neues Dokument öffnen. Menüleiste: EINFÜGEN / FRAMES / LINKS Menüleiste: FENSTER / FRAMES öffnen, auch der Eigenschaften-Inspektor muss geöffnet sein. Im Frame-Inspektor den left-Frame aktivieren. In den Frame-Eigenschaften bei Quelle, das HTMLDokument auswählen, das im left-Frame erscheinen soll und öffnen. Wiederum im Frame-Inspektor den main-Frame aktivieren. In den Frame-Eigenschaften bei Quelle, das HTML-Dokument auswählen, das im mainFrame erscheinen soll und öffnen. Wenn beide HTML-Dokumente eingezogen sind, DATEI/FRAMESET SPEICHERN UNTER und unter dem Namen FRAMESET abspeichern. Tatjana Funk 26 Dreamweaver 3, Stand: Oktober 2001 Frame-Inspektor Frame-Eigenschaften Frame-Inspektor Im Frame-Inspector werden die Framesets des aktuellen Dokument sowie die Hierarchie der Frameset-Struktur übersichtlich angezeigt. Frameset-Eigenschaften Die Eigenschaften von markierten Frames (Name, Quelldatei, Ränder...) bzw. Framesets (Abmessungen der Frames, Farbe und Breite, der Rahmen zwischen den Frames) werden im Eigenschaften-Inspektor angezeigt. Hyperlinks in und aus Frames Tatjana Funk Standardmäßig wird eine Zielframe innerhalb eines Framessets in das Fenster geladen, von dem aus sie aufgerufen wird. Möchten Sie einen Hyperlink in einem Frame verwenden, um den Inhalt eines anderen Frames zu ändern, so ist neben der Zieldatei auch ein Zielframe anzugeben. 27 Dreamweaver 3, Stand: Oktober 2001 15. Erstellen von Sprungmenüs Sprungmenü Ein Sprungmenü ist ein Menü innerhalb eines Dokuments, in dem Besucher Ihrer Website auf Hyperlinks zu Dokumenten oder Dateien klicken können. Wählen Sie EINFÜGEN / FORMULAROBJEKT / SPRUNGEMNÜ Geben Sie im Feld TEXT des Dialogfeldes SPRUNGEMNÜ EINFÜGEN den Text ein, der in der Menüliste angezeigt werden soll. WENN AUSGEWÄHLT, GEHE ZU URL: Klicken Sie auf DURCHSUCHEN oder geben Sie den Pfad der zu öffnenden Datei ein. URLs- ÖFFNEN: wählen Sie HAUPTFENSTER, um die Datei in demselben Fenster zu öffnen. Klicken Sie auf das Pluszeichen, um weitere Menüelemente hinzuzufügen oder auf das Minuszeichen, um Menüelemente wieder zu löschen. Sprungelemente bearbeiten Tatjana Funk Wenn Änderungen an den Elementen innerhalb eines Sprungelements vorgenommen werden müssen, dann: wählen Sie FENSTER / EIGENSCHAFTEN, um den Eigenschaften-Inspektor zu öffnen. Markieren Sie mit der Maus das Sprungmenü Wählen Sie LISTENWERTE Nehmen Sie Änderungen vor (z.B. Hinzufügen oder Löschen eines Elements, Reihenfolge ändern...) 28 Dreamweaver 3, Stand: Oktober 2001
