Inhaltsverzeichnis. 1 Einleitung Dreamweaver installieren und erkunden... 35

Transkript

1

2 Inhaltsverzeichnis Inhaltsverzeichnis 1 Einleitung Was ist neu? Erforderliche Vorkenntnisse Aufbau dieses Handbuchs Hinweise für Macintosh- und Windows-Nutzer Die DVD zum Handbuch Dreamweaver installieren und erkunden Das Startfenster zur ersten Orientierung Unterschiedliche Darstellungen des Arbeitsbereichs Im Dokumentfenster arbeiten Ansichten im Dokumentfenster Verknüpfte Dokumente auflisten und bearbeiten CSS mit dem Code-Navigator aufstöbern Die Statusleiste für Code und Information Visuelle Hilfsmittel im Entwurfsfenster Bedienfelder mit wichtigen Funktionen Bedienfelder öffnen und schließen Bedienfelder minimieren, maximieren und reduzieren Bedienfelder verschieben und neu anordnen Seitenelemente im Bedienfeld Einfügen Der Eigenschafteninspektor für Struktur und Formatierung Arbeitsschritte im Bedienfeld Verlauf ändern Symbolleisten mit Werkzeugen Individuelle Arbeitsoberfläche speichern

3 Inhaltsverzeichnis 3 Konzeption und Management Den Projektablauf planen Briefing: Inhalte und Struktur festlegen Layout und Corporate Identity Texte und Botschaften formulieren bzw. gestalten Zielgruppe und technische Randbedingungen bestimmen Zeit- und Arbeitsplan Datei- und Verzeichnisstruktur festlegen Webseiten erstellen Sites in Dreamweaver anlegen und definieren Eine neue lokale Site einrichten Vorhandene Sites ändern und verwalten Statische Webseiten erstellen Ein neues Dokument anfertigen Eine leere HTML-Seite erstellen Dateien speichern Weitere Dokument-Arten und Vorlagen Seiteneigenschaften bestimmen Das Erscheinungsbild einer Seite bestimmen Die Kategorie Hyperlinks (CSS) Die Kategorie Überschriften (CSS) Die Kategorie Titel/Kodierung Tracing-Bild und Layoutvorlagen Voreinstellungen und Dateimanagement Voreinstellungen zum Dokument Neue Dokumente erstellen Dokumente öffnen und Schreibschutz anzeigen Eingabehilfen für zugängliche, barrierefreie Seiten Dokumente im Sitefenster verwalten Dateien und Verzeichnisse erstellen Verschieben, umbenennen und löschen

4 Inhaltsverzeichnis 5.4 Projekt-Koordination Kommentare definieren und bearbeiten Design Notes für interne und vertrauliche Informationen Schutz durch Cloaking Textblöcke und Zeichenformatierung Vorhandene Inhalte übernehmen Kopieren, einfügen und formatieren Dateien importieren Word-HTML speichern und optimieren HTML in Word speichern Word-Code in Dreamweaver optimieren Zugänglichen Text erstellen Trennung von HTML und CSS Veraltete Tags entfernen Sprache bestimmen Sonderzeichen kodieren Datum einfügen Absätze und Zeilenumbrüche einfügen Textblöcke und Zeichen formatieren Blockelemente mit HTML auszeichnen Texte mit CSS formatieren Aktualisierung alter HTML-Strukturen Nützliche Funktionen für die Textbearbeitung LILO: Mit der Rechtschreibprüfung auf Fehlersuche Suchen und ersetzen Überprüfung der Darstellung in Browsern und Mobilgeräten

5 Inhaltsverzeichnis 7 Bilder integrieren und bearbeiten Unterschiedliche Dateiformate einsetzen Originale mit Vektoren und Druckauflösung GIF für homogene Farbflächen, Transparenz und Animation JPG für Fotos und Farbverläufe PNG bietet zahlreiche Vorteile Flash für Animationen und Interaktion SVG: Vektorgrafiken für die Webseite Bilder in das Dokument einfügen Bilder in den Arbeitsbereich ziehen Bilder gezielt platzieren Bild-Attribute im Quelltext angeben Bilder im Hintergrund einsetzen Zugänglichkeit von Bildern Bilder bearbeiten Bildeigenschaften im Code ändern Bilddateien ändern Bild-Platzhalter als Layout-Hilfe Bild erstellen und den Platzhalter ersetzen Transparente GIFs als Abstandshalter Fireworks: Bilder segmentieren und HTML speichern Tabellen für Layout und Daten Tabellenmodus auswählen Visuelle Hilfsmittel einsetzen Tabelle einfügen Tabelleneigenschaften bestimmen Tabelle, Zeile, Spalte und Zelle markieren Attribute definieren und bearbeiten Barrierefreie Datentabellen definieren Inhalte einer Tabelle sortieren Dateien einer Tabelle exportieren

6 Inhaltsverzeichnis 9 Verknüpfungen mit Hyperlinks definieren Arten von Hyperlinks Hyperlinks definieren Hyperlinks für Texte erstellen Hyperlinks im Bedienfeld Elemente auswählen Relative Hyperlinks angeben Hyperlink definieren Benannte Anker für dokumentinterne Ziele Imagemaps für Bildverweise Sprungmenü und -listen verwenden Ein Sprungmenü erstellen Sprungliste definieren Menü und Liste bearbeiten Rollover-Effekte mit Bildern Ein neues Rollover definieren Bestehendes Rollover bearbeiten Rollover einem vorhandenen Bild zuweisen Null- und Skript-Hyperlinks URL-Parameter für den Daten-Transfer Hyperlinks prüfen und verwalten Zugängliche, benutzerfreundliche Links Öffnen verknüpfter Dokumente in Dreamweaver Formulare für den Kontakt Ein Formular erstellen Das form-tag einfügen Formularelemente barrierefrei integrieren Formularelemente für besondere Aufgaben Formulare mit HTML gestalten Grafische Buttons als Bildfeld definieren Feldgruppen strukturieren Eingabebereiche

7 Inhaltsverzeichnis 10.3 Formulare verarbeiten Zusammenfassung: HTML-Elemente für Formulare Sound, Film und andere Medien Generische Objekte: <embed> und <object> Attribute von Plug-ins und ActiveX Medien in Dreamweaver wiedergeben Spezifische Medienobjekte einbinden Flash mit vielfältigen Einsatzmöglichkeiten Flash-Inhalte einfügen und Parameter festlegen Shockwave: Filme integrieren Sonstige Medien einbinden SVG-Vektorgrafiken einbinden Applets: Java-Anwendung integrieren Style Sheets die Einführung Vorteile der Trennung von HTML und CSS Style-Sheet-Struktur und Selektor-Typen Klassen für flexibles Design ID für einmalige Auszeichnungen HTML-Tags neu definieren Pseudoklassen für Rollover-Effekte Pseudoelemente zur Formatierung von Teilen eines Elements Inline-Stile zum Überschreiben anderer Design-Regeln Universalselektor für alle Seitenelemente Dokumentstammbaum: Selektor-Kombination als Bedingung formulieren Verschiedene CSS-Speicherorte Neue Stilregeln definieren Neue dokumentinterne und -externe Style Sheets erstellen Inline-Stil für einzelne Elemente erstellen Kurzschrift oder lange Schreibweise Das Bedienfeld CSS-Stile

8 Inhaltsverzeichnis 12.7 Vorhandene CSS-Regeln anwenden CSS-Datei medienabhängig anhängen Vordefinierte Muster-Style-Sheets einsetzen CSS-Regeln auf Seitenelemente anwenden Bestehende Stile bearbeiten CSS-Code anzeigen und bearbeiten Reihenfolge ändern und CSS-Regeln entfernen Name und Stiltyp ändern Inline-Stile in Selektoren konvertieren Dokumentinterne Regeln in eine externe CSS-Datei verschieben Darstellungen im Entwurfsfenster prüfen Stilwiedergabe in unterschiedlichen Zielmedien untersuchen Entwurf mit temporären Style Sheets CSS-Attribute ein- und ausblenden Konflikte: Kaskade und Vererbung Das CSS-Boxmodell verwenden Inhalte in HTML platzieren div-tags einfügen Navigationsleiste als Liste und mit <span> Seitenlayout und Positionierung einzelner Boxen Navigationsleiste und Inhalt mit float anordnen Hintergrund definieren und vorhandene Stile bearbeiten Container-Höhe kaschieren: Der Trick mit dem Bild Kopf- und Fußzeile inline anordnen Exkurs: Dreispaltiges Layout definieren Seite mit übergeordnetem Container zentrieren Übersicht weiterer Positionierungsmöglichkeiten Absolut positionierte Elemente AP-Elemente zeichnen und platzieren Voreinstellungen für über das Menü eingefügte AP-Elemente AP-Elemente auswählen

9 Inhaltsverzeichnis Visuelle Hilfsmittel erleichtern die Arbeit AP-Elemente bearbeiten AP-Elemente verschachteln und zentrieren Tabellen in AP-Elemente umwandeln AP-Elemente in Tabellen konvertieren Container fixieren und negative Ränder Praktische Anwendungsstudien mit CSS-Designs Schrift: Textformatierung und Zeilenhöhe Schriftgröße, Systemschriften und Schriftstil Zeilenhöhe, hoch- und tiefgestellte Zeichen Unterstreichung und andere dekorative Auszeichnungen Fette Zeichen und Großbuchstaben Hintergrund: Rollover für die Navigation Block: Abstände, Einzug und Ausrichtung Wort- und Zeichenabstände Vertikale und horizontale Ausrichtung Leerräume und Umbrüche Sichtbarkeit mit display regeln Box: Größe und Anordnung unterschiedlicher Elemente Rahmen zum Hervorheben Liste mit individuellen Aufzählungspunkten Positionierung: Elemente platzieren und anzeigen Visibility: Sichtbarkeit einzelner Elemente festlegen Z-Index: Stapelreihenfolge für Überlappungen Overflow: Überlauf bei großem Inhalt regeln Clip: Elemente beschneiden Erweiterungen: Seitenumbruch und visuelle Effekte Seitenumbruch in der Printausgabe (Page-break- ) Visuelle Effekte für Cursor und Bilder Praxisbeispiel: Horizontale Navigation

10 Inhaltsverzeichnis Probleme bei der Browserdarstellung lösen Darstellungsfehler, FOUC und Syntax-Checks Relative Schriftgrößen im Browser ändern Ränder zurücksetzen und Zentrierung Abstände im Internet Explorer Boxmodell-Bug und der Tantek-Hack Der 3-Pixel-Bug und Sternchen-Hack Browserweichen: Konditionale Kommentare für IE Code erstellen und bearbeiten Codeansicht und zentrale Funktionen verwenden Code-Navigator zeigt CSS und andere externe Dateien Codetipps bzw. -hinweise nutzen Quick Tag Editor: Code erstellen und ändern Codefragmente anwenden und speichern Arbeiten mit Bibliotheken Kommentare einfügen und bearbeiten Ansicht im Codefenster optimieren Dokumentspezifische Ansichtsoptionen einstellen Live-Darstellungen anhalten und Code bearbeiten Code ein- und ausblenden Voreinstellungen für Code Codeformat: Darstellung und Schreibweise Codehinweise gegen lästiges Tippen Code umschreiben und Sonderzeichen kodieren Externe Editoren einsetzen Farbe für Code Code optimieren Code mit dem Validator überprüfen XHTML-Kompatibilität und Code-Optimierung Dokumenttyp ändern HTML-Berichte analysieren Dokumente und Site Browserkompatibilität prüfen

11 Inhaltsverzeichnis 16 Mit Vorlagen arbeiten Vorlage erstellen und speichern Bearbeitbare Bereiche festlegen Wiederholende Bereiche bestimmen Bearbeitbare Attribute bestimmen Optionale Bereiche anzeigen und bearbeiten Dokument mit Vorlage verknüpfen Verknüpfte Vorlage austauschen Dokument von der Vorlage lösen Dokument aktualisieren Verschachtelte Vorlagen erstellen Bereiche und Attribute in Webseiten bearbeiten Exkurs: Adobe Contribute für redaktionelle Arbeiten Verwaltung von Elementen Favoriten bestimmen und Liste bearbeiten Bibliothekselemente mit Bausteinen Server-Side Includes (SSI) Business Catalyst InContext Editing: Arbeiten im Browser Bearbeitbaren Bereich festlegen Wiederholenden Bereich erstellen Anmelden und online nutzen Frames verwenden und ändern Frameset und Frames erstellen Vordefinierte Framesets verwenden Frames individuell erstellen Frameset und Frames speichern Frames löschen Eigenschaften bestimmen Frameset auswählen und bearbeiten Frame auswählen und bearbeiten Vorschau und Drucken

12 Inhaltsverzeichnis 17.3 Navigation innerhalb von Frames Das Basis-Ziel gilt für alle Hyperlinks Allgemeine Standard-Ziele verwenden Barrierefreie, webtaugliche Frames Verhalten mit JavaScript Das Bedienfeld Verhalten erkunden Alternativversion ohne Skript definieren Praktische Anwendungsbeispiele Grafiken: Rollover und Preload Rollover für Tabellen Elemente ein- und ausblenden Weitere Objekt-Attribute ändern AP-Elemente ziehen Dokumente in Frames laden Fenster-Attribute und Browserfunktionen bestimmen Plug-ins überprüfen und Medien wiedergeben Skripte für Formulare und Formularelemente Weitere Verhaltensweisen Live-Ansicht, Live-Code und Optionen für JavaScript JavaScript in separater Datei speichern Dynamische Webseiten mit Datenbankanbindung Technologien ein grober Überblick Der Webserver Datenbankmodell und DBMS Anwendungsserver und Programmiersprache XAMPP als Testsystem installieren System auf dem lokalen Rechner einrichten Root-Verzeichnis anlegen phpmyadmin einrichten MySQL-Datenbank mit phpmyadmin erstellen

13 Inhaltsverzeichnis 19.3 Testserver konfigurieren Datenbankabfrage definieren Verbindung zur Datenbank einrichten Einfache Datensatzgruppen anzeigen Mehrere Datensätze durch Wiederholen anzeigen Daten auf mehreren Seiten dynamisch präsentieren Master- und Detailseite erstellen Interaktive Datenbankrecherche realisieren Suchformular mit einem Parameter erstellen Komplexe Datenbankabfrage mit mehreren Parametern Datensatz erstellen und ändern Neue Daten eingeben Bestehende Daten bearbeiten und entfernen Benutzer-Authentifizierung Passwortschutz einrichten Registrierungsformular erstellen Anmeldung und Authentifizierung Benutzer abmelden Dynamische Daten in der Live-Ansicht Syntaxfehler anzeigen und hervorheben Site-spezifische, dynamische Codehinweise für PHP Spry und XML einsetzen Mit Spry-Widgets arbeiten Akkordeon-Widget einfügen Die Struktur des Widgets bearbeiten Das Format des Widgets ändern Die Funktionalität des Widgets anpassen Weitere Widgets einsetzen Effekte für HTML-Elemente definieren

14 Inhaltsverzeichnis 20.3 Spry-Überprüfung von Formularelementen Textfeld mit wichtigen Informationen Textbereich: Nachricht eingeben Kontrollkästchen: Option auswählen Auswahl eines Listenwerts Kennwort mit festgelegtem Muster Bestätigung für übereinstimmende Angaben Optionsschaltergruppe mit leeren und ungültigen Werten Spry-Datensätze und XML Spry-Datensatz definieren Spry-Bereich und -Objekte integrieren Spry-Tabelle und Detailbereich erstellen Wiederholungsbereich erstellen Wiederholungslisten definieren XML-Daten mit XSLT formatieren Feinschliff: Seiten optimieren Seitentitel und Beschreibung festlegen meta-tags für die Verarbeitung im Browser refresh für automatische Weiterleitungen base gegen Raubkopien link-verknüpfungen für Dokument-Beziehungen Sonstige meta-informationen robots zum Schutz bestimmter Dateien Weitere meta-angaben, Sprachen und geo-tags Vorhandene meta-tags im Entwurfsfenster bearbeiten Relevanz von sichtbarem Text auf der Seite Regelverstöße und ihre Folgen Checkliste: Qualität der Site verbessern

15 Inhaltsverzeichnis 22 Datentransfer und Site veröffentlichen Remote-Site einrichten FTP (File Transfer Protocol) und SFTP (Secure FTP) Lokales Netzwerk einrichten WebDAV und RDS Dateien bereitstellen und herunterladen Dynamische Daten: Geheime Verbindungen Connections mit den Verbindungsdaten anpassen Serverseitige Skripte löschen XSLT und XML übertragen Teamarbeit: Ein- und Auschecken Bildschirm für Online-Meeting freigeben Dateien synchronisieren Versionskontrolle für den aktuellen Stand Subversion und Repository-Dateien Dreamweaver anpassen Grundlegendes zur Konfiguration Favoriten einrichten und formatieren Dialogfenster und Menüs anpassen Dreamweaver erweitern Erweiterungen installieren und verwalten Adobe AIR erstellt unabhängige Desktopanwendung Web-Widgets mit dem Widget-Browser hinzufügen Ein Widget von Adobe Exchange herunterladen Vorschau und Konfiguration Widgets in Dreamweaver verwenden Business Catalyst für E-Commerce-Lösungen Business Catalyst und Module einrichten Module herunterladen und in Dreamweaver nutzen

16 Inhaltsverzeichnis Anhang A Literatur, URLs und Downloads A.1 Allgemeine Informationen A.2 Domain und Webhosting A.3 CSS und barrierefreie Webseiten A.3.1 Richtlinien für die Zugänglichkeit A.3.2 Darstellungsfehler in einzelnen Browsern und Tests A.4 Server Side Includes (SSI) A.5 Dreamweaver- und andere Programmerweiterungen A.6 Datenbanken, Programmiersprachen, XML A.6.1 Datenbanken und Tools A.6.2 ASP, ASP.NET A.6.3 ColdFusion A.6.4 JSP A.6.5 PHP A.6.6 XML, XSLT A.6.7 Java, Java Applets A.7 JavaScript A.8 Suchmaschinen und Online-Marketing A.8.1 Optimierungstools A.8.2 Manuelle Suchmaschinenanmeldung A.8.3 Software für die Suchmaschinen-Anmeldung A.9 Grafik, SVG, Flash und Spry B Wichtige Maßeinheiten C D E Referenz: MySQL und SQL Klassen-IDs für Medienobjekte JavaScript-Ereignisse F Checkliste für barrierearme Webseiten G Glossar und Abkürzungen Index