Transkript

1 André Reinegger führt Sie grundlegend in Dreamweaver CS5 ein und macht vor fortgeschrittenen Themen nicht halt. Lernen Sie die Struktur von XHTML-Seiten kennen genauso wie die Vorzüge vom Gestalten mit CSS. Setzen Sie komfortabel CSS-Layouts für mobile Geräte um oder reichern Sie Ihre Websites dank Ajax und Spry-Framework mit interaktiven Elementen an. Dabei bleiben Sie in der Entwurfsansicht und entwickeln fantastische Websites mit allem Drum und Dran ohne viel im Quellcode arbeiten zu müssen und verfolgen in der Codeansicht, was im Hintergrund passiert! André Reinegger, Diplom-Designer und Adobe Certified Expert/Instructor, widmet sich der Konzeption und Erstellung sämtlicher interaktiver Medien, von der Website, über E-Learning-Applikationen und Online-Games bis hin zu CD-Roms. Er hält außerdem Fachvorträge und Seminare an diversen Bildungseinrichtungen und ist für Adobe auf Veranstaltungen in ganz Deutschland unterwegs.

2 Einführung Überblick Trainingsübersicht 02:14 Die wichtigsten Funktionen auf die Schnelle 10:17 Webseitenplanung und -layout Webseitengrundstruktur 01:31 Projektplanung Mindmap 04:43 Layout in Fireworks 13:48 Die Benutzeroberfläche Der Wilkommensbildschirm 02:55 Anwenderbereich und Dokumentenfenster 14:07 Die Paletten 04:39 Arbeitsbereiche verwalten 02:28 Der Eigenschaften-Inspektor 04:18 Ansichten und visuelle Hilfsmittel 03:13 Dokumente anlegen und Site-Verwaltung Dreamweaver-Seitenverwaltung Anlegen einer neuen Site 04:21 Sites verwalten 02:42 Dateien und Ordner verwalten 07:18 Dateinamen 01:08 Standardbrowser 04:27 Dokumente erstellen Neues Dokument anlegen 03:44 Voreinstellungen für neues Dokument 02:31 Dokumententyp (DOCTYPE) 04:28 CSS-Layoutvorlagen 06:43 HTML- & CSS-Grundlagen und CSS-Selektoren HTML-Grundlagen

3 Wofür HTML lernen? 04:59 HTML-Grundaufbau 05:08 HTML-Tags 09:05 HTML-Strukturierung 04:53 CSS-Seiteneigenschaften 10:53 CSS-Grundlagen Was sind Style Sheets? 09:04 Vorteile von CSS am Beispiel Zen Garden 06:37 CSS im Eigenschaften-Inspektor 06:48 CSS-Palette 13:45 CSS-Code-Navigator 03:49 CSS-Voreinstellungen 03:60 CSS-Regeln verschieben 06:32 Verschachtelte CSS-Dateien 01:53 CSS-Selektoren Tag-Selektoren 08:27 Klassen-Selektoren 06:08 ID-Selektoren 07:55 Zusammengesetzte Selektoren 05:10 Pseudoklassen-Selektor 09:02 Typografie mit CSS CSS im Vergleich zum HTML Font Tag 02:56 Maßeinheiten 02:12 Schriftarten und Farben 05:13 Schriftgrößen 01:57 Schriftauszeichnung 02:57 Zeilenabstand 02:27 Sonderzeichen 03:06 Rechtschreibprüfung 01:02 Bilder Dateiformate 06:23 Bilder verwalten 04:09 Bilder in der Website platzieren 09:58 Bildeigenschaften verändern 12:15 Bilder über CSS anpassen 07:32 Standard-Editor für Bilder 02:08 Fireworks-Integration 03:56 Photoshop-Integration 04:28 Photoshop-Smart-Objects-Integration 03:41 Hintergrundbilder mit CSS 03:12 CSS-Rollover-Navigation mit Hintergrundbild 07:45 Links

4 Hyperlink-Grundlagen 03:51 Hyperlinks erzeugen 05:45 Absolute Verlinkungen 03:20 Dateien verlinken 02:18 Bild verlinken 01:25 Hotspots-Imagemaps 02:35 Anker erzeugen 03:12 Anker auf externe Seite 01:54 -Link 03:15 CSS-Layouts CSS-Layoutgrundlagen CSS-Layoutstrukturierung 03:04 CSS-Grundlayout mit DIV-Tags 06:24 Das CSS-Box-Modell 07:40 Floating verwenden und aufheben 04:53 Relative Positionierung 02:38 Absolute Positionierung 05:26 Fixe Positionierung 03:03 CSS-Overflow 01:52 CSS-überprüfen-Funktion 04:20 CSS-Layout für Devices CSS-Layout für unterschiedliche Geräte 03:01 CSS-Layout für Drucker 06:13 Adobe Device Central 05:54 Tabellen Warum Tabellen nicht für Layouts verwendet werden sollten 06:34 Tabellenstruktur und -eigenschaften 04:41 Tabellenlayout über CSS 05:57 Tabellen-Detaillayout per CSS 03:45 Interaktive Tabellen 04:47 Importieren von Tabellendaten 02:58 Formulare Struktur von Formularen 03:00 Anlegen eines Formulars 02:17 Textfelder und Textbereiche 07:45 Kontrollkästchen und Optionsschalter 05:36 Auswahlmenü und Auswahlliste 02:26 Schaltflächen 02:06 Formularlayout per CSS 04:26 Interaktivität bei Textfeldern 02:42 Spry-Formularfeldüberprüfung 08:30

5 Spry-Framework und AJAX Was ist JavaScript? 01:40 Bildaustausch per JavaScript-Verhalten 06:43 JavaScript-Verhalten erweitern 04:16 Was ist AJAX? 06:05 Spry-Effekte 02:12 Spry-QuickInfo/Tooltip 05:18 Spry-Registerkarten 05:10 Spry-Menüleiste 09:04 Widget Browser 07:03 Flash und Video einbinden Flash-Animation einbetten 05:46 Dreamweaver- und Flash-Integration 02:08 Videos umrechnen mit dem Adobe Media Encoder 05:31 Videos einbetten 03:24 Vorlagen Vorlagen verwenden Vorlage erstellen 02:55 Attribute der Vorlage editierbar machen 02:58 Neue Seiten basierend auf Vorlagen 04:38 Verschachtelte Vorlagen und wiederholende Bereiche 04:41 Vorlagen bearbeiten 02:14 Inhalte editieren mit Contribute und InContext Editing Erstellen einer Contribute-Vorlage 03:10 Inhalte in Contribute editieren 08:44 Datei für InContext Editing erstellen 03:19 Inhalte editieren über InContext Editing 05:13 Adobe CS Live Services Überblick 02:29 Adobe BrowserLab 05:33 Business Catalyst 03:47 Entwicklungsumgebung und Quellcodebearbeitung Quellcodebearbeitung Code-Eigenschaften 05:00 Code-Hinweise/Code Hinting 03:31 Code-Werkzeugleiste 03:22 Kommentare 03:56 Fehler im Quellcode 01:35 Live-Code & Live-Ansicht 02:02 PHP-Seiten bearbeiten

6 Client-Server-Modell 01:39 XAMPP installieren 02:33 WordPress installieren 05:46 Dreamweaver für WordPress einrichten 01:47 WordPress-Site bearbeiten 06:25 PHP-Code-Hinweise (Code Hints) 03:17 Website testen und bereitstellen Website testen Verschiedene Browser testen 02:20 Browser-Kompatibilität CSS Advisor 02:16 Site-Bericht 02:44 Hyperlink-Prüfer 03:17 Web Developer Toolbar 07:25 Website bereitstellen Server mieten und Domain sichern 03:55 Serververbindung herstellen 05:17 Erweiterte Einstellungen 03:14 Synchronisierung 02:55 Ein-/Auschecken und Design Notes 03:46 Versionskontrolle mit Subversion 05:25