Adobe Dreamweaver CS6

Transkript

1 Hussein Morsy Adobe Dreamweaver CS6 Der praktische Einstieg

2 Inhalt Vorwort 26 Teil I Einführung 1 Ein Platz im Internet 1.1 Wie kommt meine Site ins Internet? 26 Was ist eine Website? 26 Ein Platz im WWW Die eigene Domain 27 Was ist eine Domain? 28 Subdomains 28 Top-Level-Domains 29 Ist meine Domain noch frei? 29 Domains registrieren Einen Provider finden 32 Auswahl eines Webhosters 32 Das passende Angebot finden 33 Brauche ich einen eigenen Webserver? 34 Wie konfigurieren Sie Ihren Webspace? 34 2 Die Sprachen des Web 2.1 Welche Sprachen gibt es? Hypertext Markup Language 39 Strukturieren von Inhalten 40 Tag-Attribute 41 HTML-Entities 41 Header und Body 41 Darstellung im Browser 42 Extensible Hypertext Markup Language (XHTML) 42 HTML5 43

3 Inhalt 2.3 Cascading Stylesheets 44 Externe CSS-Datei 44 CSS JavaScript Ajax PHP und MySQL Webbrowser und Rendering-Engines 49 3 Dreamweaver CS6 - los geht's 3.1 Neues in Dreamweaver CS6 54 Fließendes Rasterlayout 55 Multiscreen-Vorschau 55 Erstellung von mobilen Applikationen 56 CSS-Übergänge 56 Detailverbesserungen Dreamweaver installieren und aktualisieren 58 Updates Der Programmstart Schnellstart: Probieren Sie Dreamweaver aus 60 Ihre erste HTML-Seite erstellen 60 Eine Website mit Hyperlinks und Bildern erstellen 65 4 Die Arbeitsumgebung 4.1 Dokumentenfenster 74 Entwurfsansicht 74 Live-Ansicht 75 Code-Ansicht 76 Teilen-Ansicht 76 Statuszeile 77 Der Code-Navigator Das Eigenschaften-Bedienfeld 79 Texteigenschaften 79 6

4 CSS-Eigenschaften 80 Bildeigenschaften 80 Weitere Eigenschaften 81 Eigenschaftsfenster in zwei Darstellungen Bedienfelder 81 Bedienfelder organisieren 81 Bedienfelder gruppieren 82 Das»Einfügen«-Bedienfeld Anpassen der Arbeitsumgebung 84 Arbeitsbereiche 84 Voreinstellungen 84 HTAAL5 voreinsteüen 85 Teil II Ein Websiteprojekt 5 Eine neue Website 5.1 Unser Beispielprojekt 90 Beispielwebsite herunterladen 91 Lokaler Site-Ordner Neue Site anlegen und konfigurieren Site bearbeiten oder importieren 94 Wechseln zwischen Sites 95 6 Eine Vorlage anlegen 6.1 Vorlage entwerfen 98 Was ist eine Vorlage? 98 Beispiele im Web 99 Vorlage planen Ein Layout erstellen Beispielinhalte erstellen Eine Vorlage mit bearbeitbaren Bereichen erstellen Speicherort für Vorlagen 109

5 flpb '"halt 7 Seiten mit Inhalten füllen 7.1 Neue Webseite erstellen 112 Neue Dateien aus Vorlage erzeugen 113 Seitentitel vergeben Seiteninhalte einfügen 116 Texte erstellen 117 Überschriften 119 Listen erstellen 119 Bilder einfügen 120 Tabellen erstellen Erstellen einer Navigation 8.1 Hauptnavigation 128 AAenüeinträge bearbeiten Fußzeilennavigation Vorlage speichern und auf Seiten anwenden Das Design festlegen 9.1 Erstellen von Grafik-Segmenten 140 Das Kopf-Segment 141 Das Inhalts-Segment 141 Das Fuß-Segment Aufbau von CSS-Dateien 142 CSS-Datei bearbeiten CSS-Regeln für das Layout der Beispielwebsite 146 Die CSS-Regel»body«148 Die CSS-Regel Die CSS-Regel Die CSS-Regel Die CSS-Regel Die CSS-Regel».Container«149».header«151»h1«153».content«155».sidebart«155 Die CSS-Regel».footer«156 8

6 CSS-Regel für die Links in der Fußzeile erstellen 159 CSS-Regeln für die Navigation Websites testen, veröffentlichen und verwalten 10.1 Website im Browser testen 166 Browservielfalt 166 Browsershots 167 Browservorschau einstellen 168 Website im Browser testen 170 Webseite im Adobe BrowserLab testen 170 Alle Hyperlinks testen 171 Browserkompatibilität und Zugänglichkeit prüfen FTP-Übertragung konfigurieren Übertragen der Site auf den Server 176 Übertragen über das Fenster»Dateien«176 Übertragung im Dokumentenfenster 179 Website synchronisieren Website verwalten 182 Teil III Dreamweaver im Detail 11 Texte eingeben und strukturieren 11.1 Textinhalte erstellen 188 Text eingeben 188 Sonderzeichen eingeben 189 Leerzeichen eingeben Inhalte strukturieren 191 Überschriften 191 Absätze 192 Einrückungen 193 Vorformatierte Absätze 194 Listen 195 Hervorhebungen 196 9

7 Inhalt 11.3 Importieren aus Word 197 Word-HTML optimieren 197 Texte aus der Zwischenablage einfügen 198 Stylesheets und Word Arbeiten mit CSS 12.1 Was sind Cascading Stylesheets? 204 Vorteile von CSS 205 Externe und interne CSS 205 CSS in Vorlagen einsetzen Methoden zur CSS-Erstellung CSS für Einsteiger 207 CSS über Seiteneigenschaften 208 CSS über das Eigenschaften-Bedienfeld Fortgeschrittene CSS-Techniken 215 Das Fenster»CSS-Stile«216 Neuen CSS-Stil erstellen 217 CSS-Stile bearbeiten 224 CSS-Stile-Eigenschaften 224 Überprüfen-Modus 226 CSS-Regeln löschen oder deaktivieren 226 Klassen-Selektoren umbenennen 227 CSS-Stile Texten zuweisen 227 Externe Stylesheets verknüpfen 229 Stylesheets verschieben 230 CSS-Übergänge Bilder einfügen 13.1 Bilder bearbeiten Bildformate für das Web 238 GIF 239 JPEG 240 PNG

8 Inhalt 13.3 Bilder, Platzhalter und Hintergründe 242 Bilder einfügen 242 Bild-Platzhalter einsetzen 244 Bilder oder Platzhalter austauschen 245 Rollover-Bilder einsetzen Bildeinstellungen 246 Alternativtext eingeben 247 Bildgröße einstellen 247 Bilderzuschneiden 249 Helligkeit und Kontrast anpassen 250 Bild scharf stellen Tabellen erstellen 14.1 Tabellen für Daten und Layout Verschiedene Tabellenansichten 256 Standard-Ansicht 256 Erweiterte Ansicht Erstellen einer Tabelle Eigenschaften von Tabellen 260 Tabellen markieren 260 Einstellungen für komplette Tabellen vornehmen 262 Höhe und Breite anpassen und zurücksetzen Eigenschaften von Tabellenbereichen 263 Spalten, Zeilen und Zellen auswählen 264 Einstellungen für Tabellenbereiche 265 Tabellenzellen gruppieren 266 Spalten und Zeilen hinzufügen und löschen Tabellen sortieren Hyperlinks einsetzen 15.1 Navigieren mit Hyperlinks 272 Funktionsweise von Hyperlinks 272 Das Wichtigste: die URL 273 1

9 15.2 Hyperlinks anlegen in Dreamweaver 274 Externe und interne Hyperlinks 275 Links innerhalb einer Webseite 276 Löschen von Hyperlinks Spezielle Hyperlinks anlegen 279 Leere Links Links 279 Imagemaps 281 Download-Links 283 Automatische Weiterleitung Interaktivität mit JavaScript 16.1 Wie funktioniert JavaScript? JavaScript im Eigenschaften-Bedienfeld JavaScript über Menüs einfügen JavaScript über Verhalten integrieren 290 Funktionsweise eines Verhaltens 291 Ein Verhalten einfügen 292 Aktionen hinzufügen 295 Aktionen bearbeiten und löschen 296 Ereignis festlegen Das JavaScript-Framework Spry 298 Sryp-Funktionen einfügen Widgets: Skripte übernehmen Formulare erstellen 17.1 Eigenschaften von Formularen Erstellen von Formularen 305 Formularbereich einrichten Formularelemente 306 Aufbau eines Formularelements 306 Formularelemente einfügen

10 Einfache Textfelder 308 Kennwortfelder 309 Mehrzellige Textfelder/Textbereich 309 Auswahllisten 310 Kontrollkästchen 311 Optionsschalter 312 Schaltflächen 313 Versteckte Felder 314 Dateifeld 314 Feldgruppe Formulare gestalten 315 Formulare mit Tabellen gestalten 315 Formulare mit CSS gestalten Formularüberprüfung einbauen mit Spry 322 Felder überprüfen 323 Eigene Fehlermeldungen festlegen 324 Spry-Überprüfungen bearbeiten Benutzereingaben per Skript auslesen Mobiles Web 18.1 Websites für mobile Geräte entwickeln Responsive Webdesign 331 Wie funktioniert Responsive Webdesign? 332 Seite mit flexiblem Layout anlegen 332 Layout für mobile Geräte 335 Layout für Tablet-Geräte 338 Layout für Desktopgeräte Mobile Web-Apps mit j'query Mobile 341 Charakteristika von mobilen Websites 342 Was ist jquery Mobile? 343 Eine Web-App mit Dreamweaver CS6 erstellen 343 Neue Seite hinzufügen und verlinken Native mobile Apps mit PhoneGap-ein Ausblick 351

11 Teil IV Über Dreamweaver hinaus 19 Dreamweaver und die Creative Suite 19.1 Die Creative Suite Adobe Photoshop CS6 357 Photoshop-Dateien in Dreamweaver importieren 357 Bilder aus der Zwischenablage einfügen 359 Bilder in Photoshop bearbeiten 360 Voreinstellungen Adobe Fireworks CS6 362 Fireworks-Dateien in Dreamweaver importieren 363 Bilder in Fireworks bearbeiten Adobe Flash CS6 364 So funktioniert Flash 364 Plugin erforderlich 365 Flash-Filme integrieren 365 Eigenschaften von Flash Adobe Bridge Bloggen mit Word Press 20.1 Was sind Weblogs? Leistungsmerkmale von WordPress Weblog mit WordPress erstellen 371 WordPress installieren WordPress administrieren 377 Einloggen im Administrationsbereich 377 Schreiben von Beiträgen 378 Verwalten von Beiträgen Word Press-Templates 379 Themes anpassen 382

12 21 Gesucht und gefunden bei Google 21.1 Ihre Website mit Google bekannt machen Tipps zur Suchmaschinenoptimierung 387 Verwenden Sie Titel und»alt«-attribute 388 AAeta-Tags 389 Website von anderen Websites verlinken 391 Was Sie unbedingt vermeiden sollten Besucherstatistiken mit Google Analytics 392 Google Analytics einrichten Anzeigen mit Google AdWords Geld verdienen mit Google AdSense Mashups YouTube, GoogleMaps und Twitter integrieren 22.1 YouTube-Videos einbinden Google AAaps integrieren Twitter integrieren 408 Index 408