Adobe Dreamweaver CC

Websites auf Basis von HTML, CSS, jQuery und PHP5.4 erstellen

(Artikel: 15 Min.)

Websites auf Basis von HTML, CSS, jQuery und PHP5.4 erstellen

15 Min.

Profitieren Sie bei der Bearbeitung von statischen, dynamischen, Mobile- und Responsive-Projekten von der umfassenden Unterstützung für HTML5, CSS3, jQuery und PHP5.4.

Was brauche ich?

Dateien herunterladen Beispieldateien zum Üben (ZIP, 21 MB)

PDF herunterladen Schnellreferenz zu Dreamweaver

Mit Dreamweaver CC können Sie Seiten mit sauberer HTML5-Struktur entwerfen und anschließend auf einer separaten Oberfläche überprüfen, ähnlich wie beim Testen mit einem externen Browser.

Beim Webdesign mit Dreamweaver wird sauberer, mit Webstandards kompatibler Quell-Code generiert, wodurch der manuelle Programmieraufwand deutlich reduziert wird. Die Funktionen basieren auf oder unterstützen offene und moderne Technologien wie HTML5, CSS3, jQuery, PHP 5.4 und Chromium Embedded Framework (CEF), damit Entwickler Web-, Responsive-, Mobile- und dynamische Web-Projekte effizienter bearbeiten, testen und veröffentlichen können.

Hinweis: Mit den bereitgestellten HTML-, Bild- und Videodateien können Sie viele der hier beschriebenen Konzepte selbst ausprobieren.

Seiten mit HTML5-Elementen strukturieren

Wenn Sie eine neue HTML-Seite erstellen, ist in Dreamweaver CC standardmäßig der Dokumenttyp HTML5 ausgewählt. Im Bedienfeld „Einfügen“ und im gleichnamigen Menü sind die HTML5-Tags für Absätze, Artikel, Randbemerkungen, Kopf- und Fußzeilen u. Ä. aufgeführt (siehe Abbildung 1). Wenn Sie den Inhalt Ihrer Web-Seiten mit HTML5-Elementen strukturieren, können Sie darauf vertrauen, dass eine Vielzahl von Geräten und Browsern sie anzeigen können. Darüber hinaus wird das Content-Management vereinfacht.

Abbildung 1: Website-Entwurf mit HTML5-Struktur
Abbildung 1: Dieser Entwurf wurde mit HTML5-Elementen strukturiert.

Hinweis: Ausführliche Informationen über die Gestaltung einer Website mit HTML5-Strukturelementen erhalten Sie im sechsteiligen Tutorial Die erste Website mit Dreamweaver von David Power.

Webdesigns in der Live-Ansicht überprüfen und testen

Dreamweaver CC bietet mehrere Ansichten für die Erstellung und Vorschau von Webdesigns. Die Entwurfsansicht ist eine visuelle Arbeitsumgebung, in der Sie Elemente hinzufügen und zugehörige Properties definieren können. In der Code-Ansicht sehen Sie den HTML-Code der erstellten Seite und können ihn direkt bearbeiten. Die Live-Ansicht bietet Ihnen die Möglichkeit, eine Live-Vorschau Ihres Designs zu überprüfen, ohne Dreamweaver verlassen zu müssen.

In der Live-Ansicht von Dreamweaver CC werden die erstellten Web-Inhalte angezeigt und zugehörige Funktionen ausgeführt, sodass Sie das Erscheinungsbild und das Verhalten Ihrer Website prüfen können, bevor Sie das Ergebnis veröffentlichen. Das heißt, Sie müssen nicht ständig zu einem Browser wechseln, um Ihre Projekte zu testen, sondern können den Großteil Ihrer Arbeit innerhalb von Dreamweaver CC erledigen. Die Live-Ansicht bietet dieselbe Rendering-Performance und HTML5-Unterstützung wie Google Chrome. Weitere Informationen über diese Technologie finden Sie im Blogpost des Adobe Web Platform-Teams zum Thema Chromium Embedded Framework.

Hinweis: Das Tutorial Web-Seiten in der Live-Ansicht von Dreamweaver designen, bearbeiten und überprüfen enthält ausführliche Tipps zum Designen und Bearbeiten von Webcontent in der Live-Ansicht.

HTML5-Elemente rendern

In der Live-Ansicht von Dreamweaver CC werden Elemente mit höherer Präzision gerendert als in früheren Dreamweaver-Versionen. In Abbildung 2 sehen Sie, wie unterschiedlich ein DIV-Element mit einem Rahmenradius und wiederholendem Verlauf in Dreamweaver CS6 (und früheren Versionen) und jetzt in Dreamweaver CC dargestellt wird. Bei der früheren Version der Live-Ansicht links wird der Rahmenradius nicht gerendert. Die aktuelle Live-Ansicht rechts stellt diese DIV-Property so dar, wie sie in modernen Browsern umgesetzt wird.

Abbildung 2: Rendering von Elementen mit Rahmenradius und wiederholendem Verlauf in der Live-Ansicht von Dreamweaver CS6 (links) und Dreamweaver CC (rechts)
Abbildung 2: In der Live-Ansicht werden Elemente mit definiertem Rahmenradius und wiederholenden Verläufen präzise gerendert.

HTML5-Formularelemente und Plug-ins in der Vorschau überprüfen

Jetzt können Sie das Verhalten von Formularen und Elementen direkt in der Live-Ansicht testen. Beim Überprüfen von HTML5-Elementen wie Popup-Menüs oder Kalenderoberflächen in der Live-Ansicht werden diese Elemente genauso ausgeführt wie in einem Browser, der die HTML5-Spezifikation unterstützt (siehe Abbildung 3).

Hinweis: Die Beispieldateien enthalten ein Formular, mit dem Sie das Verhalten der verschiedenen Formularelemente direkt in der Live-Ansicht testen können.

Abbildung 3: Vorschau und Test von HTML5-Formularelementen in der Live-Ansicht
Abbildung 3: HTML5-Formularelemente werden in der Live-Ansicht genauso wie im Browser ausgeführt.

HTML5-Inhalte mit erweiterter Codec-Unterstützung in der Vorschau überprüfen

Da die Live-Ansicht von Dreamweaver CC eine Vielzahl neuer Codecs unterstützt, können Sie beim Testen Ihrer Web-Seiten auch HTML5-Video und HTML5-Audio abspielen. Medieninhalte lassen sich direkt innerhalb der Dreamweaver CC-Arbeitsumgebung überprüfen. Sie müssen also nicht jedes Mal den Browser öffnen, wenn Sie Video- und Audioinhalte im Layout testen möchten. Alle Inhalte, die die in Tabelle 1 aufgeführten Video- und Audio-Codecs verwenden, können in der Live-Ansicht wiedergegeben werden.

Video Audio
Theora
MP3
H.264 AAC
  Vorbis
  pcm_u8
  pcm_s16le
  pcm_s24le
  pcm_f32le
  pcm_s16be
  pcm_s24be

HTML-Elemente überprüfen

Verwenden Sie den Prüfmodus von Dreamweaver CC zur schnellen Bearbeitung von Seitenelementen. Wenn Sie im Prüfmodus den Cursor über ein Element bewegen, wird eine QuickInfo mit den Properties angezeigt, z. B. Breite, Höhe, Klassen und IDs. Das Überprüfen von Code in Dreamweaver CC erfolgt ähnlich wie die Elementprüfung im Google Chrome-Browser.

Sie erhalten direktes visuelles Feedback und müssen nicht mühsam nach den Property-Werten suchen. Gehen Sie folgendermaßen vor, um dieses Feature selbst zu testen:

  1. Starten Sie Dreamweaver CC.

  2. Öffnen oder erstellen Sie eine neue Web-Seite.

  3. Aktivieren Sie die Live-Ansicht, und klicken Sie auf „Überprüfen“.

  4. Bewegen Sie den Cursor über ein Element, und die zugehörigen Properties werden eingeblendet. Im Prüfmodus werden Lineale sowie Informationen über die Rand-, Auffüllungs- und Rahmenwerte des ausgewählten Elements angezeigt (siehe Abbildung 4).

    Abbildung 4: Bewegen Sie den Cursor über ein Element, um eine QuickInfo mit den Properties anzuzeigen.
    Abbildung 4: Bewegen Sie den Cursor über ein Element, um eine QuickInfo mit den Properties anzuzeigen.

    Wenn Sie mit der Prüfung von Elementen in Google Chrome vertraut sind, kommen Sie mit dem Prüfmodus von Dreamweaver CC schnell zurecht (siehe Abbildung 5).

Abbildung 5: Elementprüfung in Dreamweaver CC
Abbildung 5: Überprüfen Sie Seitenelemente, und aktualisieren Sie Properties, ohne den Quell-Code durchsuchen zu müssen.

Hinweis: Um die Darstellung von CSS-Properties und HTML5-Elementen effektiv zu testen, stellen Sie sicher, dass Sie die neuesten Browser-Versionen installiert haben.

Seiten mit CSS3 formatieren

Der CSS Designer ist ein visuelles Werkzeug zur Definition von CSS3-Stilen, -Dateien und Media Queries sowie zur Anwendung von CSS3-Properties auf Seitenelemente.

CSS-Quellen definieren und suchen

Im CSS Designer-Bedienfeld im Bereich „Quellen“ stehen drei Optionen für die CSS-Quelle einer Seite zur Auswahl. Sie können eine neue CSS-Datei erstellen, eine vorhandene Datei anhängen oder das CSS auf der Seite definieren (siehe Abbildung 6). Alle Quellen werden in diesem Bereich aufgelistet. Wenn Sie das CSS-Layout anpassen möchten, wählen Sie einfach die entsprechende Quelle aus.

Abbildung 6: Im Bedienfeld „CSS Designer“ werden alle CSS-Quellen aufgeführt.
Abbildung 6: Im Bedienfeld „CSS Designer“ werden alle CSS-Quellen aufgeführt.

Beziehungen zwischen HTML-Elementen und CSS-Selektoren visualisieren

Wenn Sie Elemente in der Live-Ansicht auswählen, werden die zugehörigen CSS-Selektoren hervorgehoben. So können Sie die Beziehung zwischen HTML-Elementen und den dafür verwendeten CSS-Regeln nachvollziehen. Klicken Sie im Bedienfeld „CSS Designer“ auf einzelne Selektoren, um Elemente hervorzuheben und zu überprüfen (Abbildung 7). Anschließend können Sie ein Element auswählen und mithilfe von verschiedenen Bedienfeldern Änderungen vornehmen oder Optionen aktualisieren, anstatt die Code-Ansicht durchsuchen zu müssen.

Abbildung 7: Selektor im CSS Designer-Bedienfeld; das zugehörige HTML-Element ist hervorgehoben
Abbildung 7: Klicken Sie auf einen Selektor im CSS Designer-Bedienfeld, um das davon betroffene HTML-Element hervorzuheben.

In Dreamweaver CC können Sie einfach auf einen Selektor im Bedienfeld „CSS Designer“ im Bereich „Selektoren“ klicken und gelangen direkt zum zugehörigen CSS-Abschnitt in der Code-Ansicht. Die Properties des Selektors können Sie direkt in der Code-Ansicht oder im CSS Designer-Bedienfeld unter „Eigenschaften“ bearbeiten. Wenn Sie im Selektoren-Bereich des CSS Designer-Bedienfelds den Cursor über einen Selektornamen bewegen, wird eine QuickInfo mit den Selektordetails angezeigt (siehe Abbildung 8).

Abbildung 8: QuickInfo im CSS Designer-Bedienfeld mit den CSS-Properties eines Selektors; zugehörige Abschnitte werden in der Code- und in der Live-Ansicht hervorgehoben
Abbildung 8: Bewegen Sie den Cursor über einen Selektor im CSS Designer-Bedienfeld, um eine QuickInfo mit den CSS-Properties anzuzeigen. Die entsprechende Auswahl wird sowohl in der Code- als auch in der Live-Ansicht hervorgehoben.

Visuelle Änderungen im Bereich „Eigenschaften“ vornehmen

Der Eigenschaften-Bereich des CSS Designer-Bedienfelds interagiert mit der Live-Ansicht, sodass Sie die CSS-Properties eines Elements ändern und gleichzeitig eine Vorschau des Resultats anzeigen können.

Bearbeiten Sie zum Beispiel die Eigenschaften des Schlagschattens beim Video-Container in den bereitgestellten Projektdateien (siehe Abbildung 9).

 

Abbildung 9: Navigieren Sie in der Live-Ansicht zum Eigenschaften-Bereich des CSS Designer-Bedienfelds, um CSS-Properties zu ändern und in der Vorschau zu überprüfen.
Abbildung 9: Navigieren Sie in der Live-Ansicht zum Eigenschaften-Bereich des CSS Designer-Bedienfelds, um CSS-Properties zu ändern und in der Vorschau zu überprüfen.

Websites und Apps mit jQuery-Widgets erweitern

jQuery-Widgets sind kleine Web-Applikationen, die die Funktionalität und Formatierung von Webdesigns ergänzen. jQuery ist eine JavaScript-Bibliothek, die von gängigen Browsern unterstützt wird. jQuery-Widgets ersetzen das Spry-Framework, die proprietäre Technologie von Adobe für Akkordeon-, Datumsauswahl-, Button- und Registerkartenelemente in dynamischen Webdesigns.

Im Menü „Einfügen“ und im gleichnamigen Bedienfeld stehen zwei Kategorien von jQuery-Widgets zur Auswahl (siehe Abbildung 10).

  • jQuery UI – jQuery-Widgets wie „Accordion“, „Tabs“, „Progressbar“ und „Buttons“ für Desktop-ähnliche Funktionen
  • jQuery Mobile – jQuery-Widgets wie „Seite“, „Listenansicht“, „Reduzierbarer Block“ und „Kennwort“ für Apps

 

Abbildung 10: jQuery UI- und jQuery Mobile-Widgets sind im Bedienfeld „Einfügen“ bzw. im Menü „Einfügen“ verfügbar.
Abbildung 10: jQuery UI- und jQuery Mobile-Widgets sind im Bedienfeld „Einfügen“ bzw. im Menü „Einfügen“ verfügbar.
Abbildung 10: jQuery UI- und jQuery Mobile-Widgets sind im Bedienfeld „Einfügen“ bzw. im Menü „Einfügen“ verfügbar.

jQuery UI verwenden

Wenn Sie jQuery UI-Widgets in Ihrem Seiten-Design testen möchten, sehen Sie sich das Video Mit Dreamweaver Web-Seiten mit jQuery-Widgets erstellen an. Um die Übungen nachzuvollziehen, verwenden Sie die Datei „jquery.html“, die zu den Beispieldateien für dieses Tutorial gehört.

jQuery Mobile verwenden

Wie Sie jQuery Mobile-Widgets für Apps nutzen, erfahren Sie in den folgenden Tutorials, für die auch Projektdateien zum Herunterladen verfügbar sind:

 

Websites mit PHP 5.4 entwickeln

Dreamweaver CC unterstützt PHP 5.4. Damit haben Sie Zugriff auf PHP-Server-Funktionen bei der Entwicklung von Websites, die mit einem Content-Management-System (CMS) wie WordPress oder Drupal verknüpft sind.

Nachdem Sie Dreamweaver CC an einen lokalen Webserver für die PHP-Seiten Ihrer Website angebunden haben, können Sie dynamische Websites lokal auf Ihrem Computer programmieren und testen, bevor Sie sie zur Veröffentlichung weitergeben. Bei der Bearbeitung in der Code-Ansicht zeigt Dreamweaver CC Codehints an, die die Einhaltung der PHP5.4-Syntax sicherstellen.

Wie Sie Dreamweaver mit einem lokalen Server verbinden, erfahren Sie in Paul Tranis Video zum Thema Einrichtung von WordPress in Dreamweaver. Oder sehen Sie sich den ausführlichen Screencast Faster theming of dynamic, CMS-based sites in Dreamweaver von Kristin Long von der Firma MIGHTYminnow an.

 

Nächste Schritte

Im Blog des Adobe Dreamweaver-Teams erfahren Sie mehr über künftige Updates für Dreamweaver. Laden Sie Dreamweaver CC noch heute herunter, und erleben Sie selbst, wie Sie mit diesen neuen Funktionen in kurzer Zeit ausdrucksstarken Webcontent erstellen.

Ihre Meinung ist gefragt.

Das war schon alles! Damit ist dieses Training abgeschlossen. Teilen Sie uns Ihre Meinung zu diesem Tutorial mit.


preran-kumar-83x83

Preran Kumar

Preran Kumar ist der Hauptansprechpartner bei Fragen zu Web-Produkten von Adobe in sozialen Netzwerken. Er kommuniziert über verschiedene soziale Plattformen mit Kunden, um ihnen bei der Lösung technischer Probleme zu helfen. Im Laufe seiner Karriere hat Kumar an den unterschiedlichsten Projekten für die verschiedensten Bereiche mitgewirkt, von der Kosmetikbranche über Produktverpackungen bis hin zu Webdesigns.