Auf einen Blick Teil I Einführung Teil II Ein Websiteprojekt Teil III Dreamweaver im Detail Teil IV Über Dreamweaver hinaus

Transkript

1 Auf einen Blick Teil I Einführung Ein Platz im Internet Die Sprachen des Web Dreamweaver im Vergleich Dreamweaver CS5 los geht s Die Arbeitsumgebung Teil II Ein Websiteprojekt Eine neue Website Eine Vorlage anlegen Seiten mit Inhalten füllen Erstellen einer Navigation Das Design festlegen Websites testen, veröffentlichen und verwalten Teil III Dreamweaver im Detail Texte eingeben und strukturieren Arbeiten mit CSS Bilder einfügen Tabellen erstellen Hyperlinks einsetzen Interaktivität mit JavaScript Formulare erstellen Teil IV Über Dreamweaver hinaus Dreamweaver und die Creative Suite Bloggen mit WordPress Gesucht und gefunden bei Google Mashups die Welt in Ihre Website einbinden

2 Teil I Einführung Ein Platz im Internet Wie kommt meine Site ins Internet? Was ist eine Website? Ein Platz im Die eigene Domain Was ist eine Domain? Subdomains Top-Level-Domains Ist meine Domain noch frei? Domains registrieren Einen Provider finden Auswahl eines Webhosters Das passende Angebot finden Braucht man einen eigenen Webserver? Wie konfigurieren Sie Ihren Webspace? Die Sprachen des Web Welche Sprachen gibt es? Hypertext Markup Language Strukturieren von Inhalten Tag-Attribute HTML-Entities Header und Body Darstellung im Browser Extensible Hypertext Markup Language HTML Cascading Style sheets Externe CSS-Datei JavaScript Ajax PHP und MySQL Webbrowser und Rendering Engines

3 3 Dreamweaver im Vergleich Die Geschichte von Dreamweaver Dreamweaver Ultradev Dreamweaver MX und MX Dreamweaver 8 und die Übernahme von Macromedia durch Adobe Neues in Dreamweaver CS CS-Live-Services und BrowserLab Widgets Neue Site Verbesserte Live- und LiveCode-Ansicht CSS-Eigenschaften deaktivieren CSS-Prüfmodus Verbesserungen für PHP-Programmierer Detailverbesserungen Die Konkurrenz im Vergleich RapidWeaver Coda Microsoft Expression Web Reine Texteditoren Dreamweaver CS5 los geht s Dreamweaver installieren und aktualisieren Updates Der Programmstart Die erste HTML-Seite Eine Website mit Hyperlinks und Bildern Die Arbeitsumgebung Dokumentenfenster Entwurfs-Ansicht Live-Ansicht Code-Ansicht Teilen-Ansicht Statuszeile Der Code-Navigator Der Eigenschaftsinspektor Texteigenschaften

4 5.2.2 CSS-Eigenschaften Bildeigenschaften Weitere Eigenschaften Eigenschaftsfenster in zwei Darstellungen Paletten Die»Einfügen«-Palette Rubriken Anpassen der Arbeitsumgebung Arbeitsbereiche Voreinstellungen HTML5 voreinstellen Teil II Ein Websiteprojekt Eine neue Website Unser Beispielprojekt Beispielwebsite herunterladen Lokaler Site-Ordner Neue Site anlegen und konfigurieren Site für fertige Website erstellen Wechseln zwischen Sites Eine Vorlage anlegen Vorlage entwerfen Was ist eine Vorlage? Beispiele im Web Vorlage planen Ein Layout erstellen Beispielinhalte erstellen Eine Vorlage mit bearbeitbaren Bereichen erstellen Seiten mit Inhalten füllen Neue Webseite erstellen Neue Dateien aus Vorlage erzeugen Seitentitel vergeben Seiteninhalte einfügen Texte erstellen Überschriften

5 8.2.3 Listen erstellen Bilder einfügen Tabellen erstellen Erstellen einer Navigation Hauptnavigation Menüeinträge bearbeiten Fußzeilennavigation Vorlage speichern und auf Seiten anwenden Das Design festlegen Erstellen von Grafik-Segmenten Das Kopf-Segment Das Inhalts-Segment Das Fuß-Segment Aufbau von CSS-Dateien CSS-Datei bearbeiten CSS-Regeln für das Layout der Beispielwebsite Die CSS-Regel "body" Die CSS-Regel ".container" Die CSS-Regel ".header" Die CSS-Regel "h1" Die CSS-Regel ".content" Die CSS-Regel ".sidebar1" Die CSS-Regel ".footer" CSS-Regel für die Links in der Fußzeile erstellen CSS-Regeln für die Navigation Websites testen, veröffentlichen und verwalten Website im Browser testen Browservielfalt Browsershots Browservorschau einstellen Website im Browser testen Webseite im Adobe BrowserLab testen Alle Hyperlinks testen Browserkompatibilität und Zugänglichkeit prüfen FTP-Übertragung konfigurieren

6 11.3 Übertragen der Site auf den Server Übertragen über das Fenster»Dateien« Übertragung im Dokumentenfenster Website synchronisieren Website verwalten CMS mit Adobe InContext Editing Teil III Dreamweaver im Detail Texte eingeben und strukturieren Textinhalte erstellen Text eingeben Sonderzeichen eingeben Leerzeichen eingeben Inhalte strukturieren Überschriften Absätze Einrückungen Vorformatierte Absätze Listen Hervorhebungen Importieren aus Word Word-HTML optimieren Texte aus der Zwischenablage einfügen Style sheets und Word Arbeiten mit CSS Was sind Cascading Style sheets? Externe und interne CSS CSS in Vorlagen einsetzen Methoden zur CSS-Erstellung CSS für Einsteiger CSS über Seiteneigenschaften CSS über Eigenschaftsinspektor Fortgeschrittene Techniken Das Fenster»CSS-Stile« Neuen CSS-Stil erstellen CSS-Stile bearbeiten CSS-Stile-Eigenschaften

7 Überprüfen-Modus CSS-Regeln löschen CSS-Regeln deaktivieren Klassen-Selektoren umbenennen CSS-Stile Texten zuweisen Externe Style sheets verknüpfen Style sheets verschieben Bilder einfügen Bilder bearbeiten Bildformate für das Web GIF JPEG PNG Bilder, Platzhalter und Hintergründe Bilder einfügen Bild-Platzhalter einsetzen Bilder oder Platzhalter austauschen Rollover-Bilder einsetzen Bildeinstellungen Bild ausrichten Alternativtext eingeben Bildgröße einstellen Bilder zuschneiden Helligkeit, Kontrast und Schärfe Tabellen erstellen Sonderfall Webtabellen Verschiedene Tabellenansichten Standard-Ansicht Erweiterte Ansicht Erstellen einer Tabelle Eigenschaften von Gesamttabellen Tabellen markieren Einstellungen für ganze Tabellen Höhe und Breite anpassen Eigenschaften von Tabellenbereichen Spalten, Zeilen und Zellen auswählen Einstellungen für Tabellenbereiche

8 Tabellenzellen gruppieren Spalten und Zeilen hinzufügen Tabellen sortieren Hyperlinks einsetzen Navigieren mit Hyperlinks Funktionsweise von Hyperlinks Das Wichtigste: die URL Hyperlinks anlegen in Dreamweaver Externe und interne Hyperlinks Links innerhalb einer Webseite Löschen von Hyperlinks Spezielle Hyperlinks anlegen Leere Links Links Imagemaps Download-Links Automatische Weiterleitung Interaktivität mit JavaScript Wie funktioniert JavaScript? JavaScript im Eigenschaftsinspektor JavaScript über Menüs einfügen Rollover-Bilder Funktionsweise eines Verhaltens Ein Verhalten einfügen Wichtige Verhalten im Überblick Aktionen hinzufügen Aktionen bearbeiten Aktionen entfernen Ereignis festlegen Das JavaScript-Framework Spry Widgets Formulare erstellen Eigenschaften von Formularen Formulare mit Dreamweaver

9 18.3 Funktionsweise einrichten Formulare layouten Formularelemente einfügen Einfache Textfelder Mehrzeilige Textfelder Kontrollkästchen Optionsschalter Auswahllisten Schaltflächen Versteckte Felder Weitere Elemente Formularüberprüfung einbauen mit Spry Felder überprüfen Eigene Fehlermeldungen festlegen Spry-Überprüfungen bearbeiten Ein Kontaktformular anlegen Teil IV Über Dreamweaver hinaus Dreamweaver und die Creative Suite Die Creative Suite Adobe Photoshop CS Photoshop-Dateien in Dreamweaver importieren Bilder aus der Zwischenablage einfügen Bilder in Photoshop bearbeiten Einstellungen Adobe Fireworks CS Fireworks-Dateien in Dreamweaver importieren Bilder in Fireworks bearbeiten Adobe Flash CS5 und Flash Catalyst CS So funktioniert Flash Plugin erforderlich Flash-Filme integrieren Eigenschaften von Flash Contribute CS Adobe Bridge

10 20 Bloggen mit WordPress Was sind Weblogs? Leistungsmerkmale von WordPress WordPress installieren WordPress administrieren Einloggen im Administrationsbereich Schreiben von Beiträgen Verwalten von Beiträgen WordPress-Templates Themes anpassen Gesucht und gefunden bei Google Ihre Website mit Google bekannt machen Tipps zur Suchmaschinen-Optimierung Verwenden Sie Titel und alt-attribute Meta-Tags Meta-Tags bearbeiten Website von anderen Websites verlinken Was Sie unbedingt vermeiden sollten Besucher-Statistiken mit Google Analytics Google Analytics einrichten Anzeigen mit Google AdWords Geld verdienen mit Google AdSense Mashups die Welt in Ihre Website einbinden YouTube-Videos integrieren Google Maps integrieren Twitter integrieren Index

11 Workshops Dreamweaver CS5 los geht s»hallo-welt«-seite erstellen Seite auf Basis einer gestalteten Webseite erstellen Die Arbeitsumgebung Eine neue Website Leere Site erstellen Eine Vorlage anlegen Das Layout für die Vorlage definieren Inhalte festlegen Vorlage erstellen Seiten mit Inhalten füllen Neue Webseite aus der Vorlage erstellen Bilder einfügen Tabelle erstellen Erstellen einer Navigation Spry-Menüleiste in Vorlage einfügen Ändern der Menüeinträge Links im Fußbereich hinzufügen Vorlage speichern Das Design festlegen CSS-Datei bearbeiten CSS-Regel "body" CSS-Regel ".container" bearbeiten CSS-Regel ".header" bearbeiten CSS-Regel "h1" bearbeiten CSS-Regel ".sidebar1" bearbeiten CSS-Regel ".footer" bearbeiten Neue CSS-Regel für Links in der Fußzeile erstellen CSS-Regeln für Navigation anpassen

12 Workshops Websites testen, veröffentlichen und verwalten Weitere Browser in die Vorschaufunktion einbinden Webseite in Adobe BrowserLab anzeigen lassen Links überprüfen FTP-Server in Dreamweaver einrichten Gesamte Website übertragen Einzelne Webseite übertragen Website synchronisieren InContext Editing für Ihre Website einrichten Inhalte online bearbeiten Texte eingeben und strukturieren Erstellung einer Liste Arbeiten mit CSS Seiteneigenschaften festlegen Neuen Stil im Eigenschafts -inspektor erstellen Bereits angelegten CSS-Stil anwenden Neuen CSS-Stil erstellen Externe CSS-Datei in Seite einbinden Bilder einfügen Bild einfügen Bild-Platzhalter einfügen Größe eines Bildes in Dreamweaver verändern Bild zuschneiden Tabellen erstellen Neue Tabelle erstellen Tabellenzellen gruppieren Hyperlinks einsetzen Ankerpunkte anlegen und darauf verlinken Eine Imagemap erstellen Interaktivität mit JavaScript Rollover-Bild einfügen Seite in neuem Fenster öffnen Formulare erstellen Skript für Kontaktformular einbauen

13 Workshops Dreamweaver und die Creative Suite Photoshop-Datei in Dreamweaver importieren PNG-Datei importieren und umwandeln Flash-Film in Webseite einfügen Bloggen mit WordPress WordPress installieren Installation eines Themes Gesucht und gefunden bei Google Ihre Website in Google eintragen Meta-Tags hinzufügen Website bei Google Analytics anmelden Werbeanzeigen mit Google AdSense integrieren Mashups die Welt in Ihre Website einbinden YouTube-Video in die eigene Webseite einbetten Google Maps in Ihre Webseite einbinden