1.2 Exzellentes Zusammenspiel mit Photoshop: Smart-Objekte Zielsicher: der Code-Navigator und abhängige Dateien... 24

Transkript

1 Inhalt 1. Das ist neu in Dreamweaver CS Vertraute Oberflächen: Anpassung an die Suite Erweiterung der Arbeitsbereiche Exzellentes Zusammenspiel mit Photoshop: Smart-Objekte Verbesserte CSS-Bearbeitungsfunktionen Ihre Website in Echtzeit: die Live-Ansicht Live-Code Zielsicher: der Code-Navigator und abhängige Dateien Der Code-Navigator Abhängige Dateien Verbesserter Workfl ow Aktualisieren ohne Mehraufwand: Spry-Datentabellen Garantiert einfach: InContext Editing Optimieren der Arbeitsumgebung Den Überblick behalten: der Arbeitsbereich Unter der Lupe: das Arbeitsbereichslayout Menü-/Anwendungsleiste Arbeitsbereichslayouts oder doch lieber klassisch? Von jedem etwas: ein individuelles Arbeitsbereichslayout erstellen Die Dokumentsymbolleiste Die Standardsymbolleiste Handwerkszeug: Bedienfelder Bedienfelder anordnen Bedienfelder reduzieren Bedienfeldgruppen schließen und ausblenden Das Bedienfeld Eigenschaften Das Bedienfeld Einfügen Die Arbeit erleichtern: Layouthilfen Raster und Hilfslinien anzeigen und einstellen... 42

2 Tracing-Bilder Visuelle Hilfsmittel Statuszeile des Dokuments Tag-Auswahl Zoomen Blick hinter die Kulissen: Arbeit mit dem Quelltext Voreinstellungen für den Quelltext Der Code-Editor Der Code-Navigator Automatische Formatierung Voreinstellungen für das Codeformat Fast wie von selbst: Codehinweise Syntaxfehlermeldungen Kommentare Tag-Inspektor Quick Tag Editor Vorausschauend: Codefragmente (Snippets) Eigene Codefragmente Eigene Tastaturbefehle Suchen und Ersetzen Ordnung muss sein: Code optimieren Vorausgeschaut: relevante Voreinstellungen Allgemein Neues Dokument Vorschau im Browser Hilfreich: die Deamweaver-Hilfe Aus dem Netz schöpfen: Erweiterungen Der Adobe Extension Manager Vorsicht Ein Webprojekt von A-Z So läuft es im Idealfall Gut sortiert: die Projektvorbereitung Refl exionen zum Beispielprojekt Alles im Blick: Eine Sitestruktur erstellen Themenüberblick Dreamweaver den Weg weisen: Einrichten einer Site Site-Defi nition Material sichten und vorbereiten Dateien verschieben Erstellen eines Dokuments... 73

3 Ein Raster suchen: Wahl eines CSS-Layouts An die Bedürfnisse anpassen: ein eigenes Layout erzeugen Erste Schritte Container anlegen Hintergrundgestaltung für die Seite Farben Systemfarbwähler Erstellen einer Rollover-Navigation Abstände defi nieren Ändern oder Korrigieren von Rollover-Bildern Grundgedanken: Wie viel Barrierefreiheit braucht die Webseite? Einpflegen des Bild- und Textmaterials Bild einfügen und Teilbereiche verlinken Stolperfallen Text einfügen Voreinstellungen Kopieren/Einfügen Textformatierung Feintuning Zu viel Text schafft Probleme Texte nach Bedarf strukturieren: semantische Auszeichnung Texte gliedern Sinngemäß auszeichnen Vervielfältigen und Verlinken der Seiten Die Seiten werden verlinkt Inhalte austauschen Bild-Platzhalter Kontakt über Link und Formular Impressum anlegen Kontaktformular anlegen Letzte Maßnahmen Nichts vergessen? Verlinkungen testen Alles sauber? Quelltext optimieren Zum guten Schluss: Site veröffentlichen Synchronisation der Daten Sicher ist sicher: letzte Checks Browsertests Test auf Barrierefreiheit Favicon erstellen Teamwork in Dreamweaver Keine Missverständnisse: ein- und auschecken Ein- und Auschecken einrichten

4 Beispiel für eine Teamarbeit Design Notes Design Notes anzeigen lassen Übersichtlich und sauber gestalten: CSS in Dreamweaver Was bringt Ihnen CSS? Den Unterschied kennen: CSS intern und extern Internes CSS Externes CSS Einfach ist nicht gleich gut: Formatierung der Seiteneigenschaften CSS über die Seiteneigenschaften Die sauberste Lösung: CSS auslagern Theorie für die Praxis: CSS-Regeln Vorausschauend formatieren: Tag-Selektoren Einen Tag mithilfe einer neuen Regel formatieren Zwei oder mehreren Tags eine Regel zuweisen Spezifi scher formatieren: Klassen-Selektoren Erstellen und Zuweisen einer Klasse Zwei Klassen für ein Element Einmalig: ID-Selektoren Hierarchisch: Nachfahren-Selektoren Linkfarbe ändern: Pseudoklassen Dreamweaver denkt mit: Formatierung im Bedienfeld Eigenschaften Zu viel des Guten? Stile löschen CSS-Kontrolle das Bedienfeld optimal nutzen Den CSS-Code im Blick behalten Vorbereitungen für die effiziente Gestaltung: Rahmen und Abstände Mehr Wissen: Block- und Inline-Elemente Noch mehr Wissen: das Box-Modell Modulare Layoutbeispiele aus der Praxis Tipps für den Einsatz von Hintergrundbildern Hintergrundbild als einzelnes Layoutelement Hintergrundbilder auf der x- und y-achse Zwei Hintergrundbilder für einen <body> Absätze mit Hintergrundbildern Der richtige Rahmen für Ihre Gestaltung Gut gestylt: Texte formatieren Sonderzeichen Absätze mit Stil

5 Absätze mit einem Initial Formatierung über Pseudoelemente Überschriften Beispiel für eine grafi sche Überschrift (Image Replacement) Gestaltung von Listen CSS für verschiedene Ausgabemedien Websites drucken Generierter Inhalt für die Printvariante Websites für mobile Endgeräte Layoutbedingte Einschränkungen Grafi sch bedingte Einschränkungen Ein Blick in die Zukunft: CSS Multiple Hintergründe Alternierende Zeilen mit der Pseudoklasse :nth-child Mehrspaltigkeit Runde Ecken für den Rahmen Elemente mit Schatten Text mit Schattenwurf Transparenzen Layoutstrategien mit Ebenen Container anlegen: div-tags Objekte einfach positionieren: Das sind AP-Elemente Löschen Sie die Informationen, die Sie nicht benötigen Präzise positionieren: AP-Elemente modifi zieren Abhängigkeiten berücksichtigen: AP-Elemente verschachteln Voreinstellungen für AP-Elemente Wie ein absolut positioniertes Layout zentriert werden kann Mehr Dynamik im Layout: AP-Elemente mit JavaScript steuern Modular: praktische Boxen Eine einfache Box Das Prinzip übertragen Runde Ecken Runde Ecken, einfarbig Mit Verlauf und Kontur Grafi k als Box-Headline Skalierbare Boxen mit individuellen Ecken: Sliding Door Mit Schatten Bildbox Bildbox mit Bildunterschrift

6 Listenlösung für Bildbox mit Bildunterschrift Flexible und statische CSS-Layouts Absolute Positionierung Relative Positionierung Fixierte Positionierung Floating mit festen Werten Floating mit relativen Werten Floatings klären Sofort einsetzbar: die mitgelieferten Dreamweaver-Layouts Einspaltige Layouts, relative Angaben in ems Einspaltige Layouts, fi xe Angabe in px Einspaltige Layouts, prozentuale Angaben Zweispalter, relative Angaben in ems Zweispalter, fi xe Angabe in px Zweispalter, prozentuale Angaben Zweispalter, gemischte Angaben in em und % Dreispalter, fi xe Angaben in px Dreispalter, relative Angaben in ems Dreispalter, fi xe Angaben in px Dreispalter, prozentuale Angaben Dreispalter, gemischte Angaben in em und % Die Qual der Wahl Nicht immer reibungslos: Probleme mit dem Erweitern des Layouts CSS-Layout speichern Das CSS-Layout analysieren Spaltenbreite verändern Container entfernen oder hinzufügen Kopf- oder Fußzeilen löschen Spalten löschen Zeilen hinzufügen Inhalte im Kopfbereich ersetzen Der Inhalt läuft aus der Box was nun? Eine Website mit einem fertigen Layout erstellen Ein fi xierter Dreispalter Außer der Reihe: eigene Layouts Erstes Beispiellayout: fi xe Breite Zweites Beispiellayout: fl exible Breite Mehr Inhalt als Container: Scrollbalken anlegen Navigationsmodelle Gut verankert: Hyperlinks

7 Hyperlinks erstellen Verlinkte Datei öffnen Im Dokument verlinkt: Sprungmarken Benannten Anker anlegen Auf einen benannten Anker verweisen Aus einem anderen Dokument auf einen Anker verweisen Mehr als ein Rollover: Navigationsleiste Navigationsleiste einfügen Platzsparend: das Sprungmenü Eine schlanke Sache: reine Textnavigation mit CSS Vertikale CSS-Navigation Mehr Over-Effekte mit CSS Aktive Menüpunkte hervorheben Rollover ohne JavaScript: grafische CSS-Navigation Rollover grafi sch: a und a:hover Text mit span ausblenden Hintergrundgrafi k für a:hover Rollover kombiniert: Text und Grafi k Rollover kombiniert: eine Grafi k, drei Zustände Einfach umgesetzt: Pull-down-Menü mit Spry Spry-Menüleisten in ein Dokument einfügen Weiterführender Umgang mit der Spry-Menüleiste Erweitern der Spry-Menüleiste Nicht ganz unkompliziert: Spry-Menüleiste anpassen Schriftfamilie ändern Hintergrundfarbe anpassen Weiterführend: Inspirationen aus der Praxis Breadcrumb Registerkartennavigation Vorgehensweise bei Tutorials Bilder Bilder editieren: Bildbearbeitung mit Dreamweaver Bilder einfügen Absolute Pfade im Stammverzeichnis Zusatzinformation Alternativtext Tooltips nicht nur für Grafi ken Bilder mit Dreamweaver bearbeiten Einstellungen modifi zieren

8 JPEG GIF PNG Noch mal Transparenz: PNG versus GIF Wann lohnt sich welches Bildformat? PNG auch im IE Bilder bearbeiten Bild zuschneiden Bildgröße modifi zieren Bilder anpassen Externen Editor festlegen Ein Bild, drei Links: Imagemaps Eingerahmt: Bilder mit Stil D-Effekte Schatten mit CSS Schatten mit Grafi ken Feste Größen für Bildrahmen Filmstreifen als Bildrahmen Bildergalerien: Was es zu bedenken gilt Das Webfotoalbum Bilder anordnen Listengalerie mit Bildbeschreibungen Kleine Bilder, große Bilder: einfache JavaScript-Galerie Quelltextspaß: CSS-Galerie ohne JavaScript Basisarbeit: Container und Struktur anlegen Benötigte Tags erstellen und verschachteln Bilder positionieren und verstecken Bilder für den aktiven Zustand des Links sichtbar setzen Vorschaubilder statt Ziffern Galerien aus dem Netz: Integration in Dreamweaver Galerie mit Vor- und Zurück-Funktion Lightbox Tabellen Wenn es eine Tabelle sein soll: Tabellen anlegen Tabellen erstellen Tabellen modifi zieren Ändern der Höhe und Breite Abstände zuweisen Spalten und Reihen einfügen oder löschen

9 Inhalte ausrichten Tabellendaten importieren und sortieren Gestaltung mit Stil: Tabellenformatierung Bilder in Tabellen einfügen Ein Tabellenlayout umstricken: So geht es mit CSS Analyse der bestehenden Webseite Helferlein Tracing-Bild Dynamisch sortiert: Spry-Datensätze Vorbereiten der Daten Daten einfügen Datensätze aktualisieren Master- und Detaillayout Gestapelte Container Gestapelte Container mit Spotlight Inhalte platzsparend unterbringen: Spry Widgets Gut sortiert: Spry-Registerkarten Bearbeiten der Register Mit einem Klick Inhalte reduzieren oder erweitern: Spry-Akkordeon Viel Information, wenig Raum: reduzierbare Palette Einfügen zusätzlicher reduzierbarer Paletten Probleme mit fl oat Tooltips gestalten: QuickInfos QuickInfo einfügen Spry Widgets nachträglich anpassen Dreamweaver-Hilfe Code-Navigator Mehr Pep auf der Seite: Interaktivität mit Verhalten Technisch beleuchtet: Ereignisse und Aktionen JavaScript externalisieren Bedienfeld Verhalten Veraltete Verhalten Ziehbare Elemente erstellen Seitenelemente vorbereiten

10 Verhalten zuweisen Fortgeschritten: JavaScript aufrufen Bild austauschen Bildaustausch wiederherstellen Fenster nach Maß: Browserfenster öffnen Cursorwechsel: Hand statt Pfeil Welcher Cursor wofür? Eigener Cursor Fenster schließen Was so alles passieren kann Attraktive Spry-Effekte für den sofortigen Einsatz Fließend: Einblenden/Ausblenden Einfache Bildüberblendung Komplexe Bereiche einblenden Elementen Nachdruck verleihen: Hervorheben Auf und zu: Jalousie-Effekt Nichts wie weg: Verschieben-Effekt Elemente in die Ecke: Quetschen-Effekt Hin und her: Schütteln Maximal reduziert: Vergrößern/Verkleinern Gezielt modifizieren: CSS-Eigenschaften ändern Informationen nach Bedarf anzeigen Weitere Eigenschaften modifi zieren Display oder Visibility? Viele auf einen Streich: Einblenden/Ausblenden Mehr Möglichkeiten: JavaScript aufrufen Funktion aufrufen Wortwechsel: Text einstellen Text einstellen für Container Statusleistentext einstellen Text in Formularfeld einstellen Effektivität mit Vorlagen Eine Vorlage, viele Seiten: Dreamweaver-Templates Vorlagen erstellen Bearbeitbare Bereiche festlegen Kennzeichnung bearbeitbarer Bereiche Bearbeitbare Bereiche löschen

11 Leicht vervielfältigt: Datei aus Vorlage erstellen Eine Änderung für alle Seiten: Vorlage aktualisieren Vorlage lösen Vorsicht bei Tabellen und AP-Elementen Bearbeitbare Bereiche für Tabellen Bearbeitbare Bereiche für AP-Elemente Erweiterte Möglichkeiten mit Vorlagendateien Nützlich: verschachtelte Vorlagen Wiederholende Bereiche Vorsicht Fehlerquelle Bearbeitbare Tag-Attribute Vorlageneigenschaften anpassen Modifi zierte Attribute mit CSS ausreizen Site ohne Markup exportieren Gut sortiert: das Bedienfeld Elemente Favoriten Farben als Favoriten Hyperlinks als Favoriten Klug verwaltet: Bibliothekselemente Bibliothekselemente erstellen Bibliothekselemente lösen Bibliothekselemente und Verhalten Verhalten in einem Bibliothekselement nachträglich ändern Bibliothekselemente und CSS Formatierter Text als Bibliothekselement Aktualisierung leicht gemacht: InContext Editing Seite vorbereiten CSS für den Anwender InContext Editing anwenden Formulare Von Feld zu Feld: Formulare aufbauen Formularelemente einfügen Unsichtbare Elemente Textfelder Versteckte Felder Textbereiche Kontrollkästchen Kontrollkästchengruppen Optionsschalter/Optionsschaltergruppe Liste/Menü

12 Sprungmenü Bildfeld Dateifelder Schaltfl ächen Formulare gestalten Formularelemente mit CSS formatieren Textfelder Textbereiche Schaltfl ächen Formularelemente anordnen Strukturierung mit Tabellen Auszeichnung mit Label Entwurfsphasen-Stylesheet Strukturierung mit Label Feldgruppen Barrierefreie Umsetzung Formulare interaktiv: Verhalten und Spry Formulare mit einem Verhalten überprüfen Formulardaten überprüfen: Spry-Formular-Widgets verwenden Spry-Überprüfung: Textfeld CSS-Stile anpassen Spry-Überprüfung: Textbereich Spry-Überprüfung: Kontrollkästchen Spry-Überprüfung: Auswahl Spry-Überprüfung: Kennwort Spry-Überprüfung: Bestätigung Spry-Überprüfung: Optionsschalter Ab die Post: Formulare versenden Frames Baukasten: das Prinzip von Frames Framesets erstellen Bearbeiten und Verlinken von Frame-Inhalten Unterseiten im Frameset anzeigen lassen Mehrere Frames gleichzeitig austauschen Eingebettet: iframes iframe erstellen Alternativer Inhalt für iframes iframes anzeigen lassen Hilfe, es sind Frames: der Umgang mit existenten Framesets

13 Analyse bestehender Daten Seiten hinzufügen und verlinken Frames: mehr Kontra als Pro Umbaumaßnahmen: Container statt Frames Der 1:1-Umbau Frame-Optik ohne Frames Feststehende Elemente und scrollbare Bereiche Einfache Seitenpfl ege Browserfüllende Layouts mit feststehenden und scrollbaren Bereichen Fixierte Hintergrundbilder in Containern CSS hilft: Frames ohne Frames Beispiel I Beispiel II Medien SWF-Dateien Einstellungen für SWF-Dateien Formatfüllende SWF-Dateien Transparente Hintergründe Flash-Filme bearbeiten CSS-Regeln für SWF-Dateien Alternativer Inhalt für SWF-Dateien FLV-Dateien Welche Steuerelemente gibt es? Alternativer Inhalt für FLV-Dateien Java-Applets Weitere Medien Suchmaschinenoptimierung Vorausschauend arbeiten: OnPage-Optimierung Verwendung von Texten Textreihenfolge Der Dokumententitel Verwendung von Bildern Dateibenennung und Struktur Auszeichnen von Links Ausnahme Framesets

14 15.2 Suchmaschinenfutter: Meta-Tags Head-Inhalte Mehr über Ihre Seite: Meta-Informationen Meta: Beschreibung Meta: Schlüsselwörter Weitere Meta-Tags Automatische Weiterleitung Codefragmente für Meta-Blöcke Schlagwörter im Einklang: Suchwortdichte Seiten anmelden Dynamische Anwendungen CMS & Co CMS Kriterien für die Wahl eines CMS Lokaler Webserver Apache installieren Apache als Dienst PHP installieren Dynamische Seiten in Dreamweaver Testserver einrichten Kleiner Dreamweaver-PHP-Test Einfache Anwendungen für die Praxis Module mit include einbinden Stichwortverzeichnis