1. 2. Einleitung... 17 Das ist neu in Dreamweaver MX... 23 Die Siteverwaltung... 29 2.1 Anlegen einer Site... 29 Die erste Site in einer Minute... 29 Die Dateien-Bedienfeldgruppe... 31 Erweiterte Einstellungen... 40 Das Bedienfeld Site... 43 Das Bedienfeld Elemente... 45 2.2 Dateien abrufen und bereitstellen... 49 2.3 Hyperlinks verwalten... 53 Hyperlinks überprüfen und reparieren (Dokument)... 53 Hyperlinks überprüfen und reparieren (Site)... 54 Hyperlinks ändern... 56 2.4 Verwaltung und Planung mit der Sitemap... 57 Arbeiten mit der Sitemap... 61 2.5 Teamwork: Gemeinsames Arbeiten an einer Site... 63 Design Notes... 63 Berichte... 69 3. Layout- und Navigationsstrategien... 71 3.1 Layoutstrategien Welche Lösung für welche Webseite?... 71 Die Firmen-Homepage... 71 Shopseite... 72 Portalseiten... 72 Die Infoseite... 73 Private Homepages... 74 Die experimentelle Seite... 75 3.2 Navigationsstrategien... 75 Wohin mit den Navigationselementen?... 76 Techniken für die Navigation... 78 Weitere Gedanken zur Navigation... 80 4. Das Seitenlayout... 85 4.1 Tabellen versus Ebenen... 85 Tabellen das Prinzip, die Einschränkungen... 85 Ebenen das Prinzip, die Einschränkungen... 87 Tabellen und Ebenen kombinieren... 88
4.2 Schnelleinstieg: Seitenvorlagen... 89 Dokument mit Seitenvorlage erstellen... 89 Seitenvorlagen anpassen... 91 4.3 Tabellen in der Layoutansicht... 91 Projekt: Portalseite mit Tabellen... 91 Die Layoutansicht aktivieren... 92 Layoutzellen und -tabellen erstellen... 93 Komplexe Layouttabellen erstellen... 96 Layouttabellen verschachteln... 100 Layoutelemente bearbeiten... 103 Layoutbreite fest oder variabel?... 106 Voreinstellungen der Layoutansicht... 110 Tipps und Tricks zu Layouttabellen... 111 4.4 Tabellen in der Standardansicht... 112 Tabellenkunde HTML... 113 Tabellen erstellen... 115 Tabellen verschachteln... 117 Tabellen und Zellen Auswahl festlegen... 118 Tabelleninhalte einstellen... 120 Gestaltung von Tabellen und Zellen... 122 Tabelleneigenschaften anpassen... 125 Zelleneigenschaften anpassen... 127 Tabellen ergänzen, verbinden und teilen... 131 Tabellenumbau im Detail... 136 Größen einstellen... 139 Fehlerbehandlung bei Tabellen... 143 Arbeitserleichterung... 145 4.5 Gestaltungsideen mit Tabellen... 149 Haarlinien... 149 Senkrechte Trennlinien... 150 Bilder rahmen... 151 Tabellen und Stylesheets... 152 Hintergrundbilder in Tabellen... 152 Tabellen mit abgerundeten Ecken... 153 Tabellen nebeneinander stellen... 154 Tabellen mit Schattenwurf... 154 4.6 Layout mit Ebenen... 155 Firmenseite mit Ebenen erstellen... 156 Ebenen auswählen... 160 Ebenen verwalten die Ebenen-Palette... 162 Ebeneneigenschaften einstellen... 167 Ebenen verschachteln und gruppieren... 172 Ebenen und Inhalt... 176 Voreinstellungen für Ebenen... 182 Tipps und Tricks zu Ebenen... 184 4.7 Gestaltungsideen mit Ebenen... 185 Dynamische Navigation... 185 Vorlade-Ebene für Dokument... 189 Ebenen ziehen... 192 Ebenentext festlegen... 196 4.8 Ebenen in Tabellen konvertieren... 199 Projekt: Mit Ebenen layouten, mit Tabellen ins Web... 200 Tipps und Tricks zur Konvertierung... 206 Tabellen in Ebenen konvertieren... 207 4.9 Layouten mit Tracing-Bildern... 208 Von Photoshop ins Web... 208
4.10 Arbeiten mit Frames... 212 Schnelleinstieg das Prinzip... 212 Foto-Webseite mit Frames... 214 Frameseiten-Eigenschaften einstellen... 217 Die Frameset-Eigenschaften... 218 Frameseiten editieren... 221 Frameseiten speichern... 222 Die Target-Frage... 223 Projekt: Designwechsel mit Frames... 224 Frames frei zeichnen... 227 Verschachtelte Frames... 228 Inhalt mit Frames mittig anordnen... 228 Frameset in der Codeansicht... 231 4.11 Gestaltungsideen mit Frames... 232 Fotopräsentation mit Frames... 232 Horizontales Rollen in schmalen Frames... 234 Interessante Seitenaufteilung... 235 Tipps und Tricks zu Frames... 237 4.12 Die unsichtbaren Elemente in <head> und <body>... 238 Dokumenteigenschaften festlegen... 239 Seiten tunen mit Meta-Tags... 242 Meta-Tags für den Server: http-equiv... 244 Unsichtbare Elemente im Body der Seite... 247 Unsichtbare Elemente einsetzen... 248 5. Arbeit sparen: Vorlagen, Bibliotheken, SSI... 253 5.1 Vorlagen und Bibliotheken der Unterschied, der Nutzen... 254 So funktionieren Vorlagen... 255 So funktionieren Bibliothekselemente... 255 5.2 Vorlagen erstellen... 257 Schnellstart: Neue Vorlage anlegen... 257 Vorhandenes Dokument zur Vorlage umgestalten... 259 Vorhandenes Web auf Vorlagen umstellen... 260 DW 4-Vorlagen weiterverwenden... 262 5.3 Editierbare Bereiche festlegen... 262 Einfache editierbare Bereiche... 263 Sich wiederholende Bereiche... 265 Sich wiederholende Tabellen... 266 Editierbare Tags... 267 Optionale Bereiche... 270 Verschachtelte Vorlagen... 272 5.4 Vorlagen auf Seiten anwenden... 275 5.5 Vorlagen bearbeiten... 277 Seiten aktualisieren... 277 Vorlagen löschen... 278 Webs ohne Vorlagensyntax exportieren... 278 Tipps und Tricks zu Vorlagen... 278 5.6 Bibliothekselemente erstellen und bearbeiten... 279 Bibliothekselemente erstellen... 279 Bibliothekselemente in Seiten einfügen... 281 Bibliothekselement öffnen und bearbeiten... 282
Sonderfall Verhaltensweisen... 283 Tipps und Tricks zu Bibliotheken... 284 5.7 Verwaltung der Bibliothek die Elemente-Palette... 285 Elemente sortieren... 285 Neue Elemente erstellen... 286 Elemente ins Dokumentfenster einfügen... 287 Elemente in anderes Web übernehmen... 287 5.8 Server-Side Includes (SSI)... 287 SSI anlegen und einfügen... 289 SSI bearbeiten... 290 Exkurs: Umgebungsvariablen ausgeben... 290 6. Texte erstellen und anpassen... 293 6.1 Texte erstellen und formatieren... 293 Seitentitel und -eigenschaften... 293 Texteingabe in Dreamweaver... 294 Textimport aus Word, Excel & Co... 296 Rechtschreibprüfung... 302 Schrift- und Absatzformatierung... 303 Die Erstellung von Listen... 305 Seitengliederung mit Linien... 307 Textbasierte Hyperlinks einrichten... 308 6.2 Formatierung mit HTML-Stilen... 309 Was sind HTML-Stile... 309 HTML-Stile verwenden... 309 Eigene HTML-Stile erzeugen... 311 Projekt: Erstellen einer Bedienungsanleitung... 311 7. Texte formatieren mit CSS... 315 7.1 Grundlagen und Anwendung von CSS... 315 Internal, Embedded und External Stylesheets... 316 Projekt: Erstellen eines Internal Stylesheets für die Schriftart... 319 Projekt: Erstellen eines External Stylesheets... 321 Projekt: Anwenden des externen Stylesheets in neuen Webseiten... 324 Projekt: Design Time Stylesheets... 325 Projekt: CSS ändern, erweitern, löschen... 327 Maßangaben und Standardwerte... 328 7.2 Formatierungen von Text... 330 Schriftformatierung mit CSS... 331 Absatzformatierung mit CSS... 335 Schnellformatierung im Text... 336 Projekt: Flexible Formate erstellen... 336 7.3 Auffällige Formatierungen mit CSS... 339 Links haben drei Zustände... 339 Projekt: Individuelle Linkfarben... 339 Besondere Linkeffekte... 341 Projekt: Der Hover-Effekt... 341 Zugriff auf Browserelemente... 342 Projekt: Farbige Scrollbalken... 343
8. Erweiterter Einsatz von CSS... 345 8.1 Erweiterte Formatierung mit CSS... 345 Benutzerdefinierte Pseudoformate einsetzen... 345 Projekt: Formatvorlage für besondere Textabschnitte... 346 Abstände und Ränder... 348 Projekt: W3C-Texteffekt erstellen... 348 Tabellen und Ränder formatieren... 350 Projekt: Rahmenelemente anpassen... 351 CSS in HTML-Anweisungen konvertieren... 353 8.2 Pixelgenaues Positionieren... 354 Pixelgenaues Layout und alte Browser... 354 Layer und CSS... 356 Projekt: Ebene mit Stylesheets formatieren... 356 Das Problem mit den Seitenrändern... 359 Projekt: Grafiken am Rand ausrichten... 360 Grafiken perfekt ausrichten und verfremden... 363 Text und Grafik im Einklang... 366 Projekt: Grafiken von Text umfließen lassen... 366 8.3 Seitenlayout für den Ausdruck... 369 Eine Seite zwei Darstellungen... 369 Ausgewählte Formateigenschaften... 370 Praxislösung: Zwei Webseiten... 371 Projekt: Webseite für den Ausdruck erstellen... 372 9. Grafik... 375 9.1 Grafiken einbinden... 375 Bild einfügen Step-by-Step... 375 9.2 Grafikeigenschaften einstellen... 377 Name und Alt-Bezeichnung... 377 Größe und Abstände einstellen... 378 Bildgröße in Dreamweaver ändern?... 378 Bilder verlinken... 379 Bilder rahmen... 380 9.3 Bilder ausrichten... 380 Bild und Text anordnen Step-by-Step... 381 Ausrichtungsoptionen... 384 9.4 Hintergründiges... 384 Hintergrundeffekte mit CSS... 385 9.5 Farben und Farbwahl... 386 Farbschema für Seite wählen... 388 Exkurs: Websichere Farben... 388 9.6 Bilder in Bewegung... 389 Imagemaps... 389 Rollover-Schaltflächen... 391 Navigationsleisten... 393 Flash & Co.... 397
9.7 Tipps und Tricks zu Bildern... 398 Niedrige Bildquelle... 398 Bilder vorladen... 399 Exkurs: Ein bisschen Formatkunde... 399 10. Formulare... 403 10.1 Grundlagen zu Formularen... 403 Der Aufbau eines Formulars... 403 Formularelemente... 408 10.2 Formulare erstellen... 409 Überlegungen zum Layout... 409 Projekt: Formular für eine Kundenbefragung entwickeln... 418 11. Interaktive Elemente mit der Verhalten- Palette... 429 11.1 Grundlagen zu Verhaltensweisen... 429 Was sind Verhaltensweisen?... 429 Handler und Aktionen... 430 Standard-Dreamweaver-Verhaltensweisen... 430 11.2 Verhaltensweisen einsetzen... 433 Mit der Verhalten-Palette arbeiten... 433 Zielbrowserprüfung und Plug-In-Check... 436 Projekt: Aktueller Browser?... 436 Formularfelder prüfen... 439 Projekt: Benutzereingabe testen... 439 Shockwave- und Flash-Filme steuern... 443 Projekt: Steuerelemente verwenden... 443 11.3 Dynamisches Layout mit Verhaltensweisen... 446 Interaktivität mit Bildern... 446 Projekt: MouseOver-Bilder... 447 Webelemente dynamisch beeinflussen... 449 Projekt: Bild einblenden... 449 Projekt: Ein Puzzlespiel... 453 Popup-Meldungen und -Fenster sind echte Hingucker... 461 Projekt: Popup-Menü mit DW statt Fireworks... 461 Projekt: Fenster für aktuelle Meldungen... 464 Projekt: Auswahlliste zur Navigation... 467 11.4 JavaScripts aufrufen... 469 Einbinden von JavaScripts... 469 Debuggen mit dem eingebauten Debugger... 470 Projekt: Entwanzung... 471 Nützliche JavaScript-Beispiele... 474 Projekt: Aktuelles Datum ausgeben... 475 Projekt: Titelzeilentext verändern... 477
12. Animationen mit Zeitleisten... 479 12.1 Erstellen eines Bildaustauschs... 480 Bildaustausch mit der Zeitleiste... 481 12.2 Ebenen mit Zeitleisten animieren... 484 Ebenen ein- und ausblenden... 484 Den Pfad von Ebenen aufzeichnen... 489 Pixelgenaue Positionierung... 491 Ein Puzzle für die eigene Webseite animieren... 492 Verhalten hinzufügen... 494 Arbeiten mit mehreren Zeitleisten... 498 Tipps zu Zeitleisten... 500 13. Einbinden von Non-HTML-Objekten... 501 13.1 Medien einfügen und editieren... 501 Medien editieren... 503 Einen beliebigen externen Editor einrichten... 503 13.2 Shockwave und Flash-Filme einfügen... 506 Eine Flash-Animation einfügen... 506 Eigenschaften von Flash-Objekten... 508 13.3 ActiveX-Elemente... 509 Problem der Browserkompatibilität... 510 Eigenschaften von ActiveX-Elementen festlegen... 511 13.4 Java-Applets... 512 Java-Applets einfügen... 512 Eigenschaften bestimmen... 513 Parameter einstellen... 514 Parameter finden... 514 Projekt: Spiel einfügen... 516 13.5 Audiodateien einfügen... 517 Audioformate eine Übersicht... 517 Einbetten oder linken... 518 Eine Webpage mit Hintergrundmusik versehen... 519 Konflikte vermeiden Flash verwenden... 521 Eine Audiodatei einem Ereignis zuordnen... 523 13.6 Plug-Ins... 524 Plug-Ins: Eine Übersicht... 524 Plug-In-Check mit Umleitungsfunktion... 525 14. Nachbearbeitung/Feintuning/HTML... 529 14.1 Arbeiten im Quelltext... 529 Quellcode in Dreamweaver editieren... 529 Arbeiten mit externen Editoren... 532 Codefragmente verwenden... 534 Roundtrip-HTML... 537
14.2 Suchen und Korrigieren von Fehlern... 537 Im Quelltext... 538 Exkurs: Reguläre Ausdrücke... 539 14.3 Die Site auf dem Prüfstand... 540 Einen Sitebericht erstellen... 541 Tipps und Tricks zum Sitecheck... 548 15. Arbeiten mit Extensions... 553 15.1 Installieren und Verwalten von Erweiterungen... 554 Eine Erweiterung installieren... 554 Erweiterungen importieren... 556 Erweiterungen verwalten... 559 Weitere Befehle... 559 15.2 Webtipps zu Extensions... 560 16. Anpassung der Arbeitsumgebung... 563 16.1 Überblick über die Arbeitsumgebung... 563 Die Symbolleiste Standard... 569 16.2 Voreinstellungen ändern... 569 16.3 Anpassen der Menüs... 574 16.4 Die Einfügen-Leiste konfigurieren... 578 17. Quickguide Fireworks... 581 17.1 Dropdown-Navigation... 581 17.2 Webfotoalbum... 589 17.3 Integration von Fireworks... 590 Fireworks aus DW heraus starten... 590 Bilder in Fireworks bearbeiten... 592 Bilder in Fireworks optimieren... 593 Bibliothekselemente exportieren... 596 Fireworks-HTML in DW einfügen... 596 Fireworks-HTML in DW aktualisieren... 598 17.4 Weitere Fireworks-Funktionen für Webmaster... 599 Slicing... 599 Montagen... 600 Animationen... 602 17.5 Seitenentwurf in Fireworks... 603 Seitenentwurf zeichnen... 604 Seite teilen... 608
Rollover-Navigationsleiste anlegen... 609 Raffinierter Bildwechsel... 612 Seite in Dreamweaver zusammensetzen... 616 Anhang... 619 Workshop-Übersicht... 619 Liste der Sonderzeichen (eine Auswahl)... 622 Liste wichtiger regulärer Ausdrücke... 625 Stichwortverzeichnis... 627 Voll im Trend: heiße News per Post, Mail und SMS! Die kostenlosen News-Dienste von DATA BECKER informieren Sie vor allen anderen über interessante Neuerscheinungen, aktuelle Trends und exklusive Angebote. So entgeht Ihnen garantiert nichts mehr... Der Klassiker: Die DATA NEWS erhalten Sie monatlich per Post. Auf sechs farbigen Seiten werden die Neuheiten ausführlich vorgestellt. Dazu gibt es Praxistipps und Sonderangebote. Angesagt: Der Newsletter informiert Sie jeden Freitag per E-Mail über ausgesuchte Highlights aus dem DATA BECKER Sortiment, interessante Downloads und attraktive Extras. Der letzte Schrei: Unsere SMS-News kommen immer dann direkt auf Ihr Handy, wenn es extrem heiße Neuigkeiten gibt. Abonnieren Sie Ihre(n) Gratis-Wunschdienst(e) einfach unter www.databecker.de, per Telefon (0211-9334900) oder per Fax (0211-9334999).