Inhalt. Teil I Einführung. 1 Ein Platz im Internet. 2 Die Sprachen des Web. Vorwort... 21

Transkript

1 Inhalt Vorwort Teil I Einführung 1 Ein Platz im Internet 1.1 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 Brauche ich einen eigenen Webserver? Wie konfigurieren Sie Ihren Webspace? Die Sprachen des Web 2.1 Welche Sprachen gibt es? Hypertext Markup Language Strukturieren von Inhalten Tag-Attribute HTML-Entities Header und Body Darstellung im Browser Extensible Hypertext Markup Language (XHTML) HTML

2 2.3 Cascading Stylesheets Inline-CSS Externe CSS-Datei CSS JavaScript Ajax PHP und MySQL Webbrowser und Rendering-Engines Dreamweaver CC los geht s 3.1 Neu und interessant in Dreamweaver CC Der neue CSS-Designer jquery UI Adobe Web Fonts Fließendes Rasterlayout Erstellung von mobilen Applikationen CSS-Übergänge Detailverbesserungen Funktionen, die entfernt wurden Dreamweaver installieren und aktualisieren Updates Der Programmstart Schnellstart: Probieren Sie Dreamweaver aus Die Arbeitsumgebung 4.1 Dokumentenfenster Entwurfsansicht Live-Ansicht Code-Ansicht Teilen-Ansicht Statuszeile

3 4.2 Das Eigenschaften-Bedienfeld HTML-Modus CSS-Modus Bildeigenschaften Weitere Eigenschaften Bedienfelder Bedienfelder organisieren Bedienfelder gruppieren Das»Einfügen«-Bedienfeld Das»Dateien«-Bedienfeld Das»Verlauf«-Bedienfeld Anpassen der Arbeitsumgebung Arbeitsbereiche Voreinstellungen Synchronisationseinstellungen (neu in Dreamweaver CC) Vorschau in Browser Teil II Ein Websiteprojekt 5 Eine neue Website 5.1 Unser Beispielprojekt Responsives Webdesign Beispielwebsite herunterladen Lokaler Site-Ordner Neue Site anlegen und konfigurieren Site bearbeiten oder importieren Wechseln zwischen Sites Eine Vorlage anlegen 6.1 Vorlage entwerfen Was ist eine Vorlage? Beispiele im Web Vorlage planen

4 6.2 Ein Layout erstellen Eine Vorlage mit bearbeitbaren Bereichen erstellen Speicherort für Vorlagen Seiten mit Inhalten füllen 7.1 Neue Webseite erstellen Neue Dateien aus Vorlage erzeugen Seitentitel vergeben Seiteninhalte einfügen Texte erstellen Überschriften Listen erstellen Bilder einfügen Tabellen erstellen Erstellen einer Navigation 8.1 Hauptnavigation mit Listen erstellen Fußzeilennavigation Logo einfügen und verlinken Vorlage speichern und auf Seiten anwenden Das Design der Website mit CSS 9.1 Designen mit CSS Die CSS-Datei»layout.css« CSS-Regeln Selektoren (Was soll gestaltet werden?) Eigenschaften und Werte (Wie soll etwas gestaltet werden?) Gesamtseite gestalten

5 9.3 Kopfbereich gestalten Navigation designen Horizontale Navigation erstellen Menüelemente als Schaltflächen darstellen Hover-Effekt Hauptbereich designen Fußbereich stylen Websites testen, veröffentlichen und verwalten 10.1 Website im Browser testen Browservielfalt Browsershots Browserstack Browservorschau einstellen Website im Browser testen Alle Hyperlinks testen Browserkompatibilität und Zugänglichkeit prüfen FTP-Übertragung konfigurieren Übertragen der Site auf den Server Übertragen über das Fenster»Dateien« Übertragung im Dokumentenfenster Website synchronisieren Website verwalten Teil III Dreamweaver im Detail 11 Texte eingeben und strukturieren 11.1 Textinhalte erstellen Text eingeben Sonderzeichen eingeben Leerzeichen eingeben

6 11.2 Inhalte strukturieren Überschriften Absätze Einrückungen Vorformatierte Absätze Listen Hervorhebungen Importieren aus Word Word-HTML optimieren Texte aus der Zwischenablage einfügen Stylesheets und Word Arbeiten mit CSS 12.1 Was sind Cascading Stylesheets? Vorteile von CSS Externe und interne CSS CSS in Vorlagen einsetzen Methoden zur CSS-Erstellung CSS-Regeln über Seiteneigenschaften einstellen CSS-Regeln über Eigenschaften-Bedienfeld einstellen CSS-Regeln mit dem CSS-Designer verwalten Die vier Bereiche des Bedienfelds»CSS-Designer« Effekte mit CSS-Übergängen Bilder einfügen 13.1 Bilder bearbeiten Bildformate für das Web GIF JPEG PNG SVG

7 13.3 Bilder einfügen und bearbeiten Bilder einfügen Bilder austauschen Rollover-Bilder einsetzen Bildeinstellungen Alternativtext eingeben Bildgröße einstellen Bilder zuschneiden Helligkeit und Kontrast anpassen Bild scharf stellen Zusammenarbeit mit Photoshop CC Bilder aus der Zwischenablage einfügen Bilder in Photoshop bearbeiten Voreinstellungen Tabellen erstellen 14.1 Sonderfall Webtabellen Erstellen einer Tabelle Eigenschaften von Tabellen Tabellen markieren Einstellungen für komplette Tabellen vornehmen Höhe und Breite anpassen und zurücksetzen Eigenschaften von Tabellenbereichen Spalten, Zeilen und Zellen auswählen Einstellungen für Tabellenbereiche Tabellenzellen gruppieren Spalten und Zeilen hinzufügen und löschen Tabellen sortieren Tabellen mit CSS gestalten Hyperlinks einsetzen 15.1 Navigieren mit Hyperlinks Funktionsweise von Hyperlinks

8 Das Wichtigste: die URL Hyperlinks anlegen in Dreamweaver Externe und interne Hyperlinks Löschen von Hyperlinks Seite in neuem Fenster öffnen Links innerhalb einer Webseite Spezielle Hyperlinks anlegen Leere Links Links Imagemaps Download-Links Interaktivität mit JavaScript und jquery UI 16.1 Was ist JavaScript? JavaScript in Dreamweaver integrieren JavaScript im Eigenschaften-Bedienfeld Rollover-Bild mit JavaScript JavaScript über Verhalten integrieren Funktionsweise eines Verhaltens Ein Verhalten einfügen Aktionen hinzufügen Aktionen bearbeiten und löschen Ereignis festlegen jquery UI Widgets einfügen Das Accordion-Widget Das Tabs-Widget Formulare erstellen 17.1 Eigenschaften von Formularen Erstellen von Formularen Formularbereich einrichten

9 Aufbau eines Formularelements Formularelemente einfügen Formularfelder im Überblick Einfache Textfelder Kennwortfelder Mehrzeilige Textfelder/Textbereich Auswahllisten Kontrollkästchen Optionsschalter Schaltflächen Versteckte Felder Dateifeld Feldgruppe HTML5-Formularfelder Telefon URL Zahl Datum Weitere Felder wie Farbe, Woche etc Formulare gestalten Formulare mit Tabellen gestalten Formulare mit CSS gestalten Formulare validieren Validierung mit HTML JavaScript für Browser ohne HTML5-Validierung Kontaktformular mit PHP-Skript Mobile Websites 18.1 Websites für mobile Geräte entwickeln Responsives Webdesign Wie funktioniert responsives Webdesign? Seite mit flexiblem Layout anlegen Layout für mobile Geräte

10 Layout für Tablet-Geräte Layout für Desktopgeräte Mobile Web-Apps mit jquery Mobile Charakteristika von mobilen Websites Was ist jquery Mobile? Eine Web-App mit Dreamweaver CC erstellen Native mobile Apps mit PhoneGap ein Ausblick Teil IV Über Dreamweaver hinaus 19 Bloggen mit WordPress 19.1 Was sind Weblogs? WordPress Weblog mit WordPress erstellen WordPress installieren WordPress administrieren WordPress-Templates/Themes Gesucht und gefunden bei Google 20.1 Tipps zur Suchmaschinenoptimierung Verwenden Sie Titel und»alt«-attribute Metatags Website von anderen Websites verlinken Was Sie unbedingt vermeiden sollten Ihre Website mit Google bekannt machen Besucherstatistiken mit Google Analytics Google Analytics einrichten Anzeigen mit Google AdWords Geld verdienen mit Google AdSense

11 21 Mashups YouTube, Facebook und Co. integrieren 21.1 YouTube-Videos einbinden Google Maps integrieren Twitter-Timeline integrieren Empfehlungslinks zu sozialen Netzwerken Nützliche Software der Creative Cloud 22.1 Die Adobe Creative Cloud Apps für Bildverarbeitung und Verwaltung Adobe Photoshop CC Adobe Photoshop Lightroom Adobe Bridge Apps für Animationen Adobe Flash CC Adobe Edge Animate CC Apps zur Bearbeitung von Websites Adobe Muse Adobe Edge Inspect Adobe Edge Reflow CC Adobe Edge Code CC Index

12 Index Index 1-Bit-Transparenz <blockquote> de gov museum org A Abhängige Datei übertragen Abo Absatz HTML vorformatierter in HTML Absatz (HTML-Tag) Absatzschrift Absoluter Link Abstand CSS Accordion-Widget , 278 Adobe Application Manager... 59, 379 Adobe Bridge Adobe Creative Cloud Adobe Edge Animate CC... 58, 383 Adobe Edge Code Adobe Edge Inspect Adobe Edge Reflow Adobe Fireworks Adobe Flash CC Adobe Muse Adobe Photoshop Adobe Photoshop Lightroom Adobe Web Fonts Ajax Aktion bearbeiten entfernen hinzufügen Aktualisieren... 73, 176 Aktuelles Dokument überprüfen ALL-INKL.COM Alpha Alt Alt-Attribut Alternativtext , 221 Android Formulare Animation erstellen Software Ankerpunkt , 257 Ansichtsmodi Anzeigen Aperture App für Apples App Store bereitstellen Application Manager Applikation mobile Arbeitsbereiche zusammenstellen Arbeitsbereichlayout Arbeitsumgebung anpassen.. 80 ASP Attribut Aufzählungspunkte Auswahlliste Auszeichnungssprache Automatisierung über das Verlauf-Bedienfeld B Banner Bannerbereich Barrierefreiheit , 238 Bearbeitbarer Bereich... 97, 109 Bedienfeld Dateien... 79, 92 Eigenschaften Einfügen gruppieren Verlauf Bedienfeldgruppe... 76, 77 Bedienfeldmenü Beispielprojekt Beispielwebsite herunterladen Benutzeroberflächenelemente Besucherstatistik Bild austauschen , 274 CSS einfügen... 64, 78, 114, 218 Einstellungen Helligkeit in Photoshop bearbeiten Kontrast neu auflösen nicht angezeigtes Proportionen verkleinern vorausladen zuschneiden Bildeigenschaft Bilderordner Bildformat, Web Bildgröße einstellen Bildoptimierung Bildschaltfläche Bildverarbeitung, Software. 379 Blindtextgenerator Blog Blogger body... 41, 137 boilerplate.css , 132 Bookmark Titel Box-Modell box-sizing Browser

13 Index Browser (Forts.) Adresszeile in Vorschaufunktion einbinden Standardformatierung Browserfenster öffnen Browserkompatibilität BrowserLab Browserliste Browsershots Browserstack Browservorschau Button C Cache Cascading Stylesheets CSS cctld CMS Code-Ansicht Content-Management-System CMS Copyright einfügen Copyright-Symbol Creative Cloud , 378 CS6, Rasterlayout funktioniert nicht CSS... 44, 131, 193, 252 Abstand Eigenschaften Eigenschaften-Bedienfeld einbinden Erstellung externer Stil Grundlagen Hintergrundfarbe Hintergrundgrafik Hyperlink-Stil interner Stil in Vorlage einsetzen mit CSS-Designer bear - beiten Rollover-Effekt Schriftart Schriftfarbe Schriftgröße Seiteneigenschaften Seitenrand Selektor Vorteile zu Tabelle hinzufügen CSS CSS-Datei erstellen CSS-Designer 55, 136, 197, 204 CSS-Klassen CSS-Modus CSS-Regel , 133, 194 definieren verwalten CSS-Stil , 194 CSS-Transitions CSS-Übergänge... 58, 197, 208 CSS Zen Garden D Datei abhängige aus Vorlage löschen neu umbenennen Dateien-Bedienfeld Dateifeld Dateitypen / Editoren Dateiverwaltung Datenbank default font Denic Design Desktopgröße Digitalkamera , 217 Display div-tag , 318 Dokumentenfenster Domain frei? IDN-Domain TLD Umlaute Domainname Download-Link , 263 Dreamweaver CC neu Dreamweaver-Template Druckversion Dummy-Link dwt (Dateiendung) E Eigenschaften Hintergrund Layout Rahmen Text Eigenschaften-Bedienfeld Eigenschaftsinspektor Einchecken Einfügen Bild Tabelle , 236 Einfügen-Bedienfeld jquery Mobile Einrückung HTML Einstellungen Formularfeld Adresse Link , 260 Betreffzeile Verknüpfung »Empfehlen«-Link Entwurfsansicht... 70, 180 Ereignis festlegen Erscheinungsbild (CSS) Erscheinungsbild (HTML) Excel

14 Index F Facebook einbinden Fadenkreuz , 255 FAQ Feldgruppe Fettschrift File Transfer Protocol Firefox Fireworks Flash Flash-Film integrieren Flash-Player Flash-Plugin Flash SWF Flash-Videos Fld. Rasterlayout... 97, 314 flexibles Layout Fließendes Rasterlayout 97, 314 neues Format einstellen Formular , 284 Aktion Beschriftung mit CSS Danke-Seite Eigenschaften Element einfügen erstellen gestalten GET Kennwort mit CSS gestalten , 300 mit Tabellen gestalten Muster Passwort PHP-Skript Platzhalter POST Schaltflächen Senden-Schaltfläche überprüfen Upload validieren Verborgen Versandmethode Zurücksetzen Formularbereich einrichten Formulareingaben überprüfen Formularelement Aufbau Auswahlliste Dateifeld einfügen Feldgruppe Kennwortfeld Kontrollkästchen Optionsschalter Schaltfläche Text Textbereich versteckte Felder Formularfeld Datum Farbe Telefon URL Woche Zahl Foto, Bildformat FTP Einstellungen FTP-Benutzerdaten FTP-Server einrichten Fußbereich Design Fußzeilennavigation G Gameserver Gehe zu URL Gesamttabelle Gestaltung gestalten GET GIF GIF-Animation Gliederungspunkte global Google , 355 Bildersuche URL anmelden Google AdSense Google AdWords , 363 Google Analytics , 359 einrichten Google Chrome Google Earth Google+ einbinden Google-Index Google-Konto Google Mail Google Maps gradient Groß-/Kleinschreibung bei Hyperlinks überprüfen gtld H h Hauptbereich Design Hauptnavigation erstellen Header Head-Tag, Beschreibung Helligkeit Hervorhebung, HTML Hintergrundbild Hintergrundfarbe , 250 CSS Hintergrundgrafik Hintergrundverlauf Home Homepage... 88, 108, 163 Horizontale Navigation Host Europe GmbH Hotspot Hover-Effekt , 208, 268 HTML HTML HTML5-Boilerplate HTML5-Formularfelder

15 Index HTML5-Formularvalidierung HTML5-Validierung , 305 HTML-Attribut align HTML-Dokument prüfen HTML-Entity... 41, 181 HTML-Tag <br> <em> <form> <h1> <img> in Statuszeile <link> <ol> <p> <strong> <table>... 40, 239 Übersicht <ul> https Hyperlink... 26, 41, 75, 127, 158, 252, 253 absoluter anlegen entfernen externer Farbe , 200 innerhalb der Website interner JavaScript einfügen korrigieren leerer löschen Prüfung relativer testen Zustand Hyperlinks (CSS) Hyperlink-Stil Hypertext Transfer Protocol (HTTP) I ICANN ID IDN-Domain IDs Illustrator Imagemap erstellen img Impressum Inhaltsbereich Inhalt strukturieren Inline-CSS Inline-Stil... 45, 201 Innenabstand CSS Installation Interaktives Menü Internet Explorer , 161 ios, Formulare IP-Adresse... 27, 28, 253 IP-Adressraum iphone iphoto J Java JavaScript... 39, 47, 266 Alert-Fenster öffnen Befehl in Dreamweaver inte - grieren manuell Rollover-Bild Syntax über Verhalten integrieren Verhalten JavaScript-Validierung 304, 307 JPEG jquery jqueryassets jquery Mobile , 324 Seite hinzufügen jquery-mobile-projekt jquery UI... 55, 276 Accordion Tabs JSP Jumbotron K Kennwortfelder Klassen-Selektor Kodierungstyp Konfigurationsdatei Kontakt Kontaktformular Kontrast Kontrollkästchen vorausgewählt Kopfbereich gestalten Kopfzeile Kostenloser Webspace Kursiv L Layout erstellen für Desktopgeräte für mobile Geräte für Tablet-Geräte mit Tabellen layout.css Leerer Link Leerzeichen , 186 geschütztes Leerzeile , 186 line-height Link Hyperlink Linkpopularität Linux-Server Liste , 186 erstellen geordnete

16 Index Liste (Forts.) ungeordnete verschachtelte Listenelement Live-Ansicht... 66, 71 Logo... 94, 97 einfügen Größe anpassen scharf Lokale Info Lokale Navigation Lokaler Site-Ordner... 88, 89 M Markup Language Mashup Mashup-Sammlung max-height Maximalbreite Media Query , 314 Medienabfrage , 314 Menü interaktives Menüelemente als Schaltflächen Menüpunkt verlinken Metatag , 354 Description für mobile Geräte hinzufügen Keywords min-height Mobile Applikationen Mobile First Mobiles Web , 312 Mobile Web-Apps Mobile Website Charakteristika erstellen Mobilgerätgröße Moblogs MySQL... 34, 49 N Native App Definition mit Phonegap Navigation... 94, 122 Fußbereich gestalten mit CSS lokale mit Liste erstellen mit Schaltflächen Navigationsmenü Neu auflösen , 223 neue Funktionen Neue Site Neue Webseite Nic Nur verwendete O Objekt onabort onclick ondblclick onload onmousedown onmouseout onmouseover onmouseup Opera Optionsschalter Ordner erstellen P padding Palette Passwortabfrage Passwort-Textfeld Pattern PDF-Datei Pfadangabe Pflichtfeld Phlogs PhoneGap Photoshop aus der Zwischenablage voreinstellen Photoshop-Datei einfügen PHP... 34, 39, 49, 72 Pixelgrafik Place Holder Platzhalter Plugin überprüfen PNG Polyfills Popup-Meldung POST , 287 Primärbrowser Programmstart Protokoll Provider... 27, 32 PSD Punkt erstellen R Randstärke , 237 Ranking Rasteransicht anschalten Rasterlayout aus CS fließendes... 56, 314 Rautezeichen Redesign Registerkarten Reguläre Ausdrücke in Formularen Relativer Link Rendering-Engine respond.min.js Responsives Layout erstellen mit Adobe Edge Reflow Responsives Webdesign 87, 313 Funktionsweise Responsive Webseiten

17 Index Retina-Displays Rollover-Bild , 268 vorausladen Rollover-Effekt Rollover erstellen mit CSS- Übergängen Ruby on Rails S Safari Schaltfläche , 294 Schrift , 214 Schriftart , 202 für Website festlegen Schrifteigenschaften Schriftfarbe , 202 Schriftgröße , 202 Secure FTP Seite bei Vorlagenänderung aktualisieren in neuem Fenster öffnen , 271 Seiteneigenschaften festlegen Seiteninhalt , 106 einfügen Seitenrand Seitentitel... 65, 109 Seitentyp Sekundärbrowser Selektor , 207, 301 erstellen Punkt Raute Sencha Touch Senden-Schaltfläche Serverseitige Validierung Serververhalten Shop Site aktive anlegen... 61, 88 bearbeiten erstellen Grundeinstellungen importieren konfigurieren synchronisieren Web-URL wechseln Site-Definition Site-Name Site-Ordner Entfernt Lokal Sitevorlagen Smartphone Sonderzeichen... 41, 181 soziale Netzwerke, einbinden Spalte auswählen einfügen hinzufügen löschen Spaltenbreite Spaltenmenü Spiel Spry... 48, 55, 59, 276, 304 Spry-Menüleiste SSL Startfenster Startseite Startvorlagen Statuszeile STRATO AG Stylesheets CSS Subdomain Suchmaschine , 352 Suchmaschinenoptimierung 353 SVG Synchronisationseinstellungen Synchronisieren T Tabelle an Browserfenster anpassen auswählen Barrierefreiheit Breite einfügen... 78, 118 erstellen , 235 Größe Größe zurücksetzen Hintergrundfarbe Höhe in Tabelle erstellen Kopfzeile , 244 Linien markieren mit CSS gestalten Randstärke sortieren Spalte Spalte auswählen Spaltenbreiten verändern 119 Umbruch Zeile , 236 Zeile auswählen Zellabstände Zellauffüllung Zelle ausrichten Zelle auswählen Zelle markieren Zellen gruppieren Tabellenbereich Eigenschaften Tabellenbreite Tabelleneinstellungen Tabellengröße, fest Tabellen-ID Tabellen-Klasse Tabellenlayout, Nachteile Tabellenlinien Tabellenzelle ausrichten gruppieren markieren table-cell Tablet-PC Tablet-PC-Größe Tablets Tabs-Widget einfügen Tabulator

18 Index Tag Tag <canvas> Tag-Leiste Tag-Selektor Tag <video> Teilen-Ansicht Tel Template Templates-Ordner Text eingeben... 62, 180 erstellen text-align Textbereich formatieren mit CSS text-decoration Texteigenschaften Textfeld , 289 Breite mit CSS bestimmen mehrzeiliges Passwortfeld Textinhalt TLD Top-Level-Domain Tracking-Code Traffic Transfervolumen Transparenz Twitter Typekit U Überschrift HTML Überschrift (CSS) Überschriftgröße Überschrift (HTML-Tag) Umbruch harter weicher Unicode-Zeichensatz Update URL Aufbau bei Google anmelden V Vektorformat Vektorgrafik Verborgen Verhalten , 270 Browserfenster öffnen einfügen Einstellungen Funktionsweise neues Fenster Verhalten (Funktion) Verknüpfung Verlauf-Bedienfeld Versandmethode Verschachtelte Liste Verschlüsselung Verstecktes Feld Video einbinden Visuelle Hilfsmittel Vordefinierte Betreffzeile Voreinstellungen Vorformatierter Absatz HTML Vorlage anwenden entwerfen erstellen mit bearbeitbaren Bereichen öffnen planen speichern , 129 Speicherort Vorlagendatei Vorleseprogramm Vorschaufunktion W Web-App Definition mit Dreamweaver erstellen neue Seite hinzufügen Seite verlinken Webbrowser... 51, 158 Webhoster... 27, 32 Weblog , 338 mit WordPress erstellen Webseite... 26, 88 aus Vorlage bearbeiten einzeln übertragen erstellen Größe herunterladen mit fließendem Rasterlayout erstellen neu speichern Webserver... 27, 34, 168, 169, 174, 176 Website... 26, 85, 86 ändern auswählen , 170 erstellen mit Hyperlinks für mobile Geräte gestalten in Google eintragen prüfen synchronisieren testen testen im Browser übertragen , 170, 171 verwalten , 175 von anderen Websites verlinken Website bei Google Analytics anmelden Webspace kostenloser Webstandards Webstatistik

19 Index Webtabelle Widget einfügen , 278 Word importieren Zwischenablage Word-HTML optimieren WordPress , 339 administrieren Beiträge verwalten Beitrag schreiben erweitern mit Plugins installieren Tellerrand Templates , 346 Theme installieren Themes Themes anpassen WP-Gallery WYSIWYG X XHTML (Extensible Hypertext Markup Language) XML Y YouTube einbinden YouTube-Video einbetten Z Zeichen Zeile auswählen einfügen bei Tabelle hinzufügen löschen Zeilenwechsel Zellabstand Zellauffüllung Zelle auswählen einfügen Zellraum Zielregel Zitat Zugänglichkeit Zurücksetzen Zuschneiden-Werkzeug Zwischenablage Zwischenspeicher