Inhalt. Inhalt. Teil 1 Grundlagen 29. Einleitung Erforderliche Vorkenntnisse Aufbau des Buchs Hinweise für Mac- und PC-Nutzer...

Transkript

1

2 Inhalt Einleitung Erforderliche Vorkenntnisse Aufbau des Buchs Hinweise für Mac- und PC-Nutzer Teil 1 Grundlagen 29 Kapitel 1 Dreamweaver erkunden Unterschiedliche Darstellungen Das Startfenster zur ersten Orientierung Im Dokumentfenster arbeiten Entwurfs-, Live- und Code-Ansichten Verknüpfte Dokumente Die Statusleiste für Code und Information Der Tag-Selektor für die schnelle Code-Auswahl Ansicht vergrößern und verschieben Fenstergröße zur Simulation unterschiedlicher Monitore Dateigröße und geschätzte Ladezeit Visuelle Hilfsmittel im Entwurfsfenster Unsichtbare Elemente und weitere visuelle Hilfsmittel Lineale zum Messen und Layouten Hilfslinien erleichtern das Positionieren und Skalieren Raster als Layouthilfe für AP-Elemente Tracing-Bild als Layout-Vorlage Bedienfelder mit wichtigen Funktionen Bedienfelder öffnen und schließen Bedienfelder minimieren und maximieren Bedienfelder neu anordnen Das Einfügen-Register enthält Objekte Attribute im Eigenschafteninspektor verwalten

3 1.4.6 Arbeitsschritte ändern Arbeitsschritte rückgängig machen Arbeitsschritte wiederholen und speichern Symbolleisten mit Werkzeugen Individuelle Oberfläche speichern Kapitel 2 Konzeption und Management Der Projektablauf Briefing, Inhalt und Struktur Layout und Corporate Identity Zielgruppe und Randbedingungen Zeit- und Arbeitsplan Datei- und Verzeichnisstruktur festlegen Seitenlayout und Webseiten erstellen Neue Site in Dreamweaver definieren Vorhandene Sites ändern und verwalten Teil 2 Mit Dokumenten arbeiten 89 Kapitel 3 Statische Webseiten erstellen Neues Dokument erstellen Leere Seite erstellen Dateien speichern Weitere Dokument-Arten Seiteneigenschaften bestimmen Das Erscheinungsbild einer Seite Die Kategorie ERSCHEINUNGSBILD (CSS) Die Kategorie Erscheinungsbild (HTML) Die Kategorie Hyperlinks (CSS) Die Kategorie Überschriften (CSS) Die Kategorie Titel/Kodierung Tracing-Bild und Layoutvorlagen Kapitel 4 Voreinstellungen und Dateimanagement Voreinstellungen zum Dokument Neue Dokumente erstellen Dokumente öffnen

4 4.2 Zugängliche, barrierefreie Seiten Dokumente im Sitefenster verwalten Dateien und Verzeichnisse erstellen Verschieben, umbenennen und löschen Projekt-Koordination Kommentare definieren und bearbeiten Design Notes für interne Informationen Schutz durch Cloaking Teil 3 Seitenelemente einfügen und bearbeiten 127 Kapitel 5 Text und Absatz 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 Sonderzeichen kodieren Datum einfügen Absätze und Zeilenumbrüche einfügen Absätze und Zeichen formatieren Blockelemente mit HTML auszeichnen Überschriften, Absätze und kein Format Vorformatierter Text mit identischer Zeichenbreite Absätze ausrichten Blockzitat: Absätze schrittweise einrücken Geordnete, ungeordnete Aufzählungen und Definitionslisten Stile für die Hervorhebung einzelner Zeichen Texte mit CSS formatieren Farbe ausgewählter Zeichen ändern Schriftart bestimmen und Schriftkombination ändern Größe einzelner Zeichen bestimmen Aktualisierung alter HTML-Strukturen

5 5.8 Wichtige Funktionen Mit der Rechtschreibprüfung auf Fehlersuche Suchen und ersetzen Einfache Suche in Text und Code Erweiterte Suche nach formatierten Textelementen Erweiterte Suche nach spezifischen Tags Vorschau: Live-Ansicht, Browser und Mobilgerät Kapitel 6 Mit Bildern arbeiten Unterschiedliche Dateiformate Bilder einfügen Bilder in den Arbeitsbereich ziehen Bilder gezielt platzieren Bild-Attribute im Quelltext Bilder im Hintergrund Zugänglichkeit von Bildern Bilder bearbeiten Bildeigenschaften im Code ändern Bildgröße angeben und ändern Verweise im Inspektor definieren und ändern Barrierefreie Bildinformation Abstände angeben Alternative Bildquelle und Originaldatei Rahmen einstellen Bild ausrichten Bilddateien ändern Externen Editor in den Voreinstellungen einrichten Bilder in Fireworks bearbeiten Bilder und Ladezeit in Dreamweaver optimieren Bild zuschneiden und Motiv in den Mittelpunkt setzen Bildgröße ändern und neu auflösen Helligkeit und Kontrast Bilder scharf stellen Bild-Platzhalter als Layout-Hilfe Bild für den Platzhalter in Fireworks erstellen Bild-Platzhalter ersetzen Transparenten GIFs als Abstandshalter

6 6.6 Fireworks-HTML speichern und einfügen Webfotoalbum automatisch generieren Kapitel 7 Tabellen für Layout und Daten Tabellenmodus auswählen Visuelle Hilfsmittel einsetzen Tabelle einfügen Tabelleneigenschaften bestimmen Tabelle, Zeile, Spalte und Zelle markieren Tabelle auswählen Spalten und Zeilen markieren Zellen auswählen Attribute definieren und bearbeiten Tabellenstruktur bestimmen Zelleigenschaften festlegen Barrierefreie Datentabellen Inhalte einer Tabelle sortieren Kapitel 8 Verknüpfungen mit Hyperlinks Arten von Hyperlinks Hyperlinks definieren Hyperlinks für Texte erstellen Absolute Hyperlinks im Bedienfeld Elemente Relative Hyperlinks angeben Hyperlink definieren Benannte Anker für dokumentinterne Ziele Imagemaps für Bildverweise Sprungmenü und -listen Ein Sprungmenü erstellen Sprungliste erstellen Menü und Liste bearbeiten Rollover-Effekte mit Bildern Ein neues Rollover definieren Bestehenden Rollover bearbeiten Rollover einem vorhandenen Bild zuweisen

7 8.7 Navigationsleisten mit Orientierung Navigationsleiste erstellen Navigationsleiste bearbeiten Null- und Skript-Hyperlinks URL-Parameter für den Daten-Transfer Hyperlinks prüfen und verwalten Zugängliche, benutzerfreundliche Links Kapitel 9 Formulare für den Kontakt Ein Formular erstellen form-tag einfügen Barrierefreie Formulare erstellen Allgemeine Vorgehensweise Attribute im Tag-Editor bearbeiten und ergänzen Einstellungen unterschiedlicher Formularelemente Formularelemente für besondere Aufgaben Zusammenfassung: Formularelemente Formulare gestalten Grafische Buttons definieren Feldgruppen strukturieren Eingabebereiche Formulare verarbeiten Kapitel 10 Sound und Vision Generische Objekte: <embed> und <object> Attribute von Plug-ins und ActiveX Medien in Dreamweaver wiedergeben Spezifische Medienobjekte einbinden Flash für vielfältige Einsatzmöglichkeiten: Dateitypen FLA: Das Original-Format SWT: Vorlagen für Adobe Flash SWF fürs Web FlashPaper: Dokument in SWF konvertieren FLV: Audio und Video Flash-Inhalte einfügen und Parameter festlegen Quelltext, abhängige Dateien und Parameter Alternativen Inhalt bearbeiten Darstellung und Wiedergabe bestimmen

8 FlashPaper-Dokumente integrieren Flash-Video für unterschiedliche Videotypen Shockwave: Filme integrieren Sonstige Medien einbinden QuickTime: Videos und Ton Sound auf der Webseite abspielen Applets: Java-Anwendung integrieren Teil 4 CSS-Layout, Design & Code 325 Kapitel 11 Stylesheets die Einführung Vorteile der Trennung von HTML und CSS Arten von Stylesheets Klassen für flexibles Design HTML-Tags neu definieren ID für einmalige Auszeichnungen Pseudoelemente für Rollover-Effekte Weitere Pseudoelemente Dokumentstammbaum: Verwandte Selektoren Kurzschrift oder lange Schreibweise Unterschiedliche CSS-Speicherorte CSS erstellen, anwenden und bearbeiten Ein neues Stylesheet definieren Inline-Stil erstellen Vorhandene CSS-Datei medienabhängig anhängen CSS-Regeln auf Elemente anwenden Vorhandene Stile bearbeiten Reihenfolge ändern und CSS-Regeln entfernen Name und Stiltyp ändern Inline-Stile konvertieren Dokumentinterne Regeln in externe CSS-Datei verschieben Entwurf mit temporären Stylesheets CSS-Layouts in die Auswahlliste einfügen Konflikte: Kaskade und Vererbung

9 Kapitel 12 Das CSS-Boxmodell Inhalte in HTML platzieren div-tags einfügen Navigationsleiste als Liste und mit <span> Positionierung einzelner Boxen Navigationsleiste und Inhalt mit float anordnen Vorhandene Stile bearbeiten: Der Hintergrund Container-Höhe kaschieren: Der Trick mit dem Bild Kopf- und Fußzeile inline anordnen Exkurs: Dreispaltiges Layout definieren Seite mit übergeordnetem Container zentrieren Weitere Positionierungsmöglichkeiten Absolut positionierte Elemente AP-Elemente zeichnen und platzieren AP-Elemente auswählen Visuelle Hilfsmittel erleichtern die Arbeit AP-Elemente bearbeiten AP-Elemente verschachteln Tabellen in AP-Elemente umwandeln AP-Elemente in Tabellen konvertieren Container fixieren und negative Ränder Kapitel 13 Anwendungsstudien: Design mit CSS Schrift: Textformatierung und Zeilenhöhe Hintergrund: Rollover für die Navigation Block: Abstände, Einzug und Ausrichtung Box: Größe und Anordnung unterschiedlicher Elemente Rahmen zum Hervorheben Liste mit individuellen Aufzählungspunkten Positionierung: Elemente platzieren und anzeigen visibility: Sichtbarkeit einzelner Elemente Der Z-Index für die Stapelreihenfolge overflow: Überlauf bei großem Inhalt clip: Elemente beschneiden Erweiterungen: Seitenumbruch und visuelle Effekte Seitenumbruch der Printausgabe (Page-break) Visuelle Effekte für Cursor und Bilder

10 13.9 Praxisbeispiel: Horizontale Navigation Darstellungsprobleme in Browsern lösen Relative Schriftgrößen im Browser ändern Ränder 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 Kapitel 14 Code erstellen und bearbeiten In der Codeansicht arbeiten Code-Navigator für CSS und externe Dateien Codetipps nutzen Quick Tag Editor: Code erstellen und ändern Codefragmente anwenden und speichern Arbeiten mit Bibliotheken Tag-Auswahl: Tags einfügen Tag-Editor und -Inspektor: Attribute und Werte definieren Tag-Bibliotheken bearbeiten Kommentare einfügen und bearbeiten Ansichten und Code ausblenden Dokumentspezifische Ansichtsoptionen 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 Validator: Code überprüfen XHTML-Kompatibilität und Code-Optimierung Zugänglichkeit prüfen und Site-Berichte Browserkompatibilität prüfen

11 Teil 5 Vorlagen, InContext Editing & Frames 447 Kapitel 15 Mit Vorlagen arbeiten Vorlage speichern Bearbeitbare Bereiche festlegen Wiederholender Bereich für Daten 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 Verwaltung von Elementen Favoriten bestimmen und Liste bearbeiten Bibliothekselemente mit Bausteinen Bibliothekselemente erstellen Bibliothekselemente anwenden Bibliothekselemente ändern und aktualisieren Server-Side Includes (SSI) InContext Editing: Arbeiten im Browser Bearbeitbaren Bereich festlegen Wiederholenden Bereich erstellen CSS-Klassen für InContext Editing Anmelden und online nutzen Kapitel 16 Frames verwenden und ändern Frameset und Frames erstellen Vordefinierte Framesets verwenden Beispielseiten im Dialogfenster Neues Dokument Ein geöffnetes Dokument in das Frameset integrieren Inline-Frames erstellen Frames individuell erstellen Frameset und Frames speichern Frames löschen

12 16.2 Eigenschaften bestimmen Frameset auswählen und bearbeiten Frame auswählen und bearbeiten Navigation innerhalb von Frames Barrierefreie, webtaugliche Frames Teil 6 Interaktivität, Datenbanken & Spry 495 Kapitel 17 Verhalten mit JavaScript Das Bedienfeld Verhalten erkunden Alternativversion ohne Skript definieren Anwendungsbeispiele Grafiken: Rollover und Preload Rollover für Tabellen Elemente ein- und ausblenden Weitere Objekt-Attribute ändern AP-Elemente ziehen Dokumente in Frames laden Gehe zu URL: Mehrere Dokumente gleichzeitig öffnen Text vom Frame einstellen: Inhalte ändern Hyperlinks bei keiner Frame-Darstellung einblenden Fenster-Attribute und Browserfunktionen bestimmen Vorhandene Popup-Menüs bearbeiten Plug-ins überprüfen und Medien wiedergeben Browser überprüfen Skripte für Formulare und Formularelemente Formulardaten prüfen Mathematische Berechnungen mit Textfeldern Angaben automatisieren Weitere Verhaltensweisen Live-Ansicht und JavaScript JavaScript in separater Datei speichern Kapitel 18 Dynamische Webseiten Technologien ein grober Überblick Der Webserver

13 Datenbankmodell und DBMS Anwendungsserver und Programmiersprache XAMPP als Testsystem installieren Root-Verzeichnis anlegen phpmyadmin einrichten MySQL-Datenbank mit phpmyadmin erstellen Struktur der MySQL-Datenbank festlegen Datensätze einfügen Datendateien importieren Testserver konfigurieren Datenbankabfrage definieren Verbindung zur Datenbank einrichten Datensatzgruppen anzeigen Grundsätzliches Vorgehen: Einfache Datenanzeige erzeugen Mehrere Datensätze anzeigen Daten auf mehreren Seiten dynamisch präsentieren Master- und Detailseite erstellen Interaktive Datenbankrecherche Suchformular mit einem Parameter Komplexe Datenbankabfrage Dateneingabe und -aktualisierung Neue Daten eingeben Bestehende Daten bearbeiten und entfernen Benutzer-Authentifizierung Passwortschutz einrichten Registrierungsformular erstellen Anmeldung und Authentifizierung Benutzer abmelden Kapitel 19 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 bearbeiten Weitere Widgets Spry-Menüleiste Paletten mit Registerkarten

14 Reduzierbare Palette Spry QuickInfo für zusätzliche Mitteilungen Effekte für HTML-Elemente definieren 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 Neues XSLT-Dokument erstellen und XML-Datei einbinden Wiederholte XML-Bereiche definieren Clientseitige XSL-Transformation XSLT-Fragment mit dynamischer Webseite verknüpfen Teil 7 Site optimieren & veröffentlichen 611 Kapitel 20 Feinschliff: Seiten optimieren Seitentitel und Beschreibung 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 Überflüssige meta-angaben und geo-tags Vorhandene meta-tags im Entwurfsfenster bearbeiten Relevanz sichtbaren Textes auf der Seite

15 20.6 Regelverstöße und ihre Folgen Checkliste: Qualität der Site verbessern Kapitel 21 Site veröffentlichen Remote-Site einrichten FTP (File Transfer Protocol) Lokales Netzwerk WebDAV, RDS und SourceSafe-Datenbank Dateien bereitstellen und herunterladen Dynamische Daten: Geheime Verbindungen Connections anpassen Serverseitige Skripte löschen XSLT und XML übertragen Datei ohne Site-Definition übertragen Teamarbeit: Ein- und Auschecken Bildschirm für Online-Meeting freigeben Dateien synchronisieren Versionskontrolle für den aktuellen Stand Subversion und Repository-Dateien Teil 8 Anhang 649 Anhang A Die DVD zum Buch Anhang B Was ist neu? Anhang C Dreamweaver anpassen & erweitern C.1 Neukonfiguration eine Übersicht C.2 Beispiel: Favoriten konfigurieren C.3 Dialogfenster und Menüs anpassen C.4 Erweiterungen installieren und verwalten Anhang D Literatur, URLs & Downloads D.1 Allgemeine Informationen D.2 Domain und Webhosting

16 D.3 CSS und barrierefreie Webseiten Richtlinien für die Zugänglichkeit Darstellungsfehler in einzelnen Browsern und Tests D.4 Server Side Includes (SSI) D.5 Adobe InContext Editing, ConnectNow und AIR D.6 Datenbanken, Programmiersprachen, XML Datenbanken und Tools ASP, ASP.NET ColdFusion JSP PHP XML, XSLT Java, Java Applets D.7 JavaScript D.8 Suchmaschinen und Online-Marketing Optimierungstools Manuelle Suchmaschinenanmeldung Software für die Suchmaschinen-Anmeldung D.9 Webplayer, Flash und Spry Anhang E Wichtige Maßeinheiten Anhang F Referenz: MySQL und SQL Anhang G Klassen-IDs für Medienobjekte Anhang H JavaScript-Ereignisse Anhang I Checkliste für barrierearme Webseiten Anhang J Glossar & Abkürzungen Index