Wählen Sie „Datei“ > „Neu“.
Zuletzt aktualisiert am
1. Mai 2021
- Dreamweaver-Benutzerhandbuch
- Einführung
- Dreamweaver und Creative Cloud
- Arbeitsbereiche und Ansichten in Dreamweaver
- Sites einrichten
- Dreamweaver-Sites
- Lokale Version Ihrer Site einrichten
- Verbindung mit einem Publishing Server herstellen
- Testserver einrichten
- Site-Einstellungen importieren und exportieren
- Vorhandene Websites von einem Remote-Server in Ihren lokalen Site-Stammordner kopieren
- Barrierefreie Funktionen in Dreamweaver
- Erweiterte Einstellungen
- Site-Voreinstellungen für die Übertragung von Dateien festlegen
- Proxyserver-Einstellungen in Dreamweaver festlegen
- Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
- Git in Dreamweaver verwenden
- Dateien verwalten
- Dateien öffnen und erstellen
- Dateien und Ordner verwalten
- Dateien vom Server abrufen/auf dem Server bereitstellen
- Dateien einchecken und auschecken
- Dateien synchronisieren
- Dateien auf Unterschiede vergleichen
- Dateien und Ordner in Ihrer Dreamweaver-Site von Operationen ausschließen (Cloaking)
- Design Notes für Dreamweaver-Sites aktivieren
- Potenzielle Gatekeeper-Angriffe verhindern
- Layout und Entwurf
- CSS
- Grundlegendes zu Cascading Stylesheets
- Gestalten von Seitenlayouts mit CSS Designer
- CSS-Präprozessoren in Dreamweaver verwenden
- Voreinstellungen für CSS-Stile in Dreamweaver festlegen
- CSS-Regeln in Dreamweaver verschieben
- Inline-CSS in Dreamweaver in eine CSS-Regel umwandeln
- Mit div-Tags arbeiten
- Verläufe auf den Hintergrund anwenden
- CSS3-Übergangseffekte in Dreamweaver erstellen und bearbeiten
- Code formatieren
- Seiteninhalt und Elemente
- Seiteneigenschaften festlegen
- CSS-Eigenschaften von Überschriften und Links festlegen
- Mit Text arbeiten
- Text, Tags und Attribute suchen und ersetzen
- DOM-Bedienfeld
- In der Live-Ansicht bearbeiten
- In Dreamweaver die Kodierung von Dokumenten festlegen
- Elemente im Dokumentfenster auswählen und anzeigen
- Texteigenschaften im Eigenschafteninspektor festlegen
- Rechtschreibprüfung für Web-Seiten durchführen
- Horizontale Linien in Dreamweaver verwenden
- Schriftkombinationen in Dreamweaver hinzufügen und ändern
- Mit Elementen arbeiten
- Datumsangaben in Dreamweaver einfügen und aktualisieren
- In Dreamweaver Favoritenelemente erstellen und verwalten
- Bilder in Dreamweaver einfügen und bearbeiten
- Medienobjekte hinzufügen
- Videos in Dreamweaver einfügen
- HTML5-Videos einfügen
- SWF-Dateien einfügen
- Audioeffekte hinzufügen
- In Dreamweaver HTML5-Audiodateien einfügen
- Mit Bibliothekselementen arbeiten
- Arabischen und hebräischen Text in Dreamweaver verwenden
- Hyperlinks und Navigation
- jQuery-Widgets und -Effekte
- Websites programmieren
- In Dreamweaver programmieren
- Programmierumgebung in Dreamweaver
- Voreinstellungen für Code festlegen
- Codehervorhebung anpassen
- Code schreiben und bearbeiten
- Codehinweise und Codevervollständigung
- Code aus- und einblenden
- Code mit Codefragmenten wiederverwenden
- Code-Linting
- Code optimieren
- Code in der Entwurfsansicht bearbeiten
- Mit den Head-Inhalten von Seiten arbeiten
- Server-Side Includes in Dreamweaver einfügen
- Tag-Bibliotheken in Dreamweaver verwenden
- Benutzerdefinierte Tags in Dreamweaver importieren
- JavaScript-Verhalten (allgemeine Anweisungen)
- Integrierte JavaScript-Verhalten anwenden
- XML und XSLT
- Server-seitige XSL-Transformationen in Dreamweaver durchführen
- Client-seitige XSL-Transformationen in Dreamweaver durchführen
- Zeichenentitäten für XSLT in Dreamweaver einfügen
- Code formatieren
- Produktübergreifende Arbeitsabläufe
- Erweiterungen für Dreamweaver installieren und verwenden
- In-App-Updates in Dreamweaver
- Microsoft Office-Dokumente in Dreamweaver einfügen (nur Windows)
- Mit Fireworks und Dreamweaver arbeiten
- Mithilfe von Contribute Inhalte in Dreamweaver-Sites bearbeiten
- Dreamweaver-Business Catalyst-Integration
- Personalisierte E-Mail-Kampagnen erstellen
- Vorlagen
- Dreamweaver-Vorlagen
- Vorlagen und vorlagenbasierte Dokumente erkennen
- Dreamweaver-Vorlagen erstellen
- Bearbeitbare Bereiche in Vorlagen erstellen
- Wiederholende Bereiche und Tabellen in Dreamweaver erstellen
- Optionale Bereiche in Vorlagen verwenden
- Bearbeitbare Tag-Attribute in Dreamweaver definieren
- Verschachtelte Vorlagen in Dreamweaver erstellen
- Vorlagen bearbeiten, aktualisieren und löschen
- XML-Inhalte in Dreamweaver exportieren und importieren
- Vorlage auf ein vorhandenes Dokument anwenden oder aus dem Dokument entfernen
- Inhalte in Dreamweaver-Vorlagen bearbeiten
- Syntaxregeln für Vorlagen-Tags in Dreamweaver
- Markierungseinstellungen für Vorlagenbereiche festlegen
- Vorteile von Vorlagen in Dreamweaver
- Mobilgeräte und Multiscreen
- Dynamische Websites, Seiten und Web-Formulare
- Grundlegendes zu Web-Anwendungen
- Computer für die Entwicklung von Anwendungen einrichten
- Fehlerbehebung bei Datenbankverbindungen
- Verbindungsskripts in Dreamweaver entfernen
- Dynamische Seiten entwerfen
- Quellen für dynamischen Inhalt – Überblick
- Quellen für dynamische Inhalte definieren
- Dynamische Inhalte in Seiten einfügen
- Dynamischen Inhalt in Dreamweaver ändern
- Datenbankdatensätze anzeigen
- Live-Daten in Dreamweaver bereitstellen und Fehlerbehebung bei der Anzeige
- Benutzerdefinierte Serververhalten in Dreamweaver hinzufügen
- Formulare mit Dreamweaver erstellen
- Formulare zum Sammeln von Benutzerinformationen verwenden
- ColdFusion-Formulare in Dreamweaver erstellen und aktivieren
- Web-Formulare erstellen
- Verbesserte HTML5-Unterstützung für Formularelemente
- Formularentwicklung mit Dreamweaver
- Visuelles Entwickeln von Anwendungen
- Master- und Detailseiten in Dreamweaver erstellen
- Such- und Ergebnisseiten erstellen
- Datensatz-Einfügeseiten erstellen
- Datensatz-Aktualisierungsseiten in Dreamweaver erstellen
- Datensatz-Löschseiten in Dreamweaver erstellen
- ASP-Befehle zum Ändern von Datenbanken in Dreamweaver verwenden
- Registrierungsseiten erstellen
- Anmeldeseiten erstellen
- Seiten erstellen, auf die nur autorisierte Benutzer zugreifen können
- Ordner in ColdFusion mit Dreamweaver schützen
- ColdFusion-Komponenten in Dreamweaver verwenden
- Websites testen, in der Vorschau anzeigen und veröffentlichen
- Fehlerbehebung
Durch die Unterstützung von jQuery Mobile in Dreamweaver können Sie in kurzer Zeit eine Webanwendung entwickeln, die auf den meisten Mobilgeräten funktioniert und sich jeweils an die Größe des Geräts anpasst.
Erstellen einer Webanwendung mit jQuery Mobile
Öffnen einer jQuery Mobile-Starterseite oder Erstellen einer HTML5-Seite
Mithilfe der jQuery Mobile-Starterseiten in Dreamweaver können Sie eigene Anwendungen erstellen. Sie können die Webanwendungsentwicklung auch mit einer neuen HTML5-Seite beginnen.
Die jQuery Mobile-Starterseiten bieten HTML-, CSS-, JavaScript- und Bilddateien an, die Sie bei der Entwicklung Ihrer ersten Anwendung unterstützen. Sie können CSS- und JavaScript-Dateien verwenden, die zusammen mit Dreamweaver installiert worden sind, oder Dateien von einem CDN oder von Ihrem eigenen Server.
Hinweis:
In der Codeansicht zeigen die Tags <link> und <script src>, wo die verknüpften Dateien liegen.
Einfügen von jQuery Mobile-Komponenten aus dem Bedienfeld „Einfügen“
Sie können jQuery Mobile-Komponenten aus dem Bedienfeld „Einfügen“ in die HTML-Seite einfügen. Die jQuery Mobile-CSS- und -JavaScript-Dateien definieren den Stil und das Verhalten der Komponenten.
CDNs und lokale jQuery Mobile-Dateien
CDNs
Ein CDN (Content Delivery Network) ist ein Computer-Netzwerk, das Kopien von Daten enthält, die an verschiedenen Stellen im Netzwerk hinterlegt worden sind. Wenn Sie eine Webanwendung mit einer URL zu einem CDN erstellen, werden für diese Anwendung die in der URL angegebenen CSS- und JavaScript-Dateien verwendet. Standardmäßig verwendet Dreamweaver das jQuery Mobile-CDN.
Sie können aber auch URLs zu CDNs anderer Sites wie Microsoft oder Google verwenden. In der Codeansicht können Sie die Serveradresse der in den Tags <link> und <script src> angegebenen CSS- und JavaScript-Dateien ändern.
Die vom CDN heruntergeladenen Dateien sind schreibgeschützt.
Lokale jQuery Mobile-Dateien
Beim Installieren von Dreamweaver werden die jQuery Mobile-Dateien auf Ihren Computer kopiert. Wenn Sie sich für die (lokale) jQuery Mobile-Starterseite entscheiden, wird eine HTML-Seite geöffnet, die mit lokalen CSS-, JavaScript- und Bilddateien verknüpft ist.
Starterseiten für jQuery Mobile
Dreamweaver bietet folgende jQuery Mobile-Starterseiten für die Anwendungsentwicklung an.
jQuery Mobile (CDN)
Verwenden Sie diese Starterseite, wenn die jQuery Mobile-Bibliothek auf einem CDN liegt.
jQuery Mobile (lokal)
Verwenden Sie diese Starterseite, wenn die Elemente lokal gespeichert sind oder die Anwendung auch ohne Internet-Verbindung funktionieren soll.
jQuery Mobile (PhoneGap)
Verwenden Sie diese Starterseite, wenn die Webanwendung bei der Bereitstellung als mobile Anwendung auf Funktionen von Mobilgeräten zurückgreift. Weitere Informationen finden Sie unter Verpacken von Webanwendungen.
Erstellen von Anwendungen für mobile Geräte mithilfe von Starterseiten
-
-
Wählen Sie eine der folgenden Befehlsfolgen:
„Seite aus Beispiel“ > „Mobile Starter“ > „jQuery Mobile (CDN)“.
„Seite aus Beispiel“ > „Mobile Starter“ > „jQuery Mobile (lokal)“.
-
Klicken Sie auf „Erstellen“.
Aktivieren Sie für die erstellte Seite die Option „Hyperlinks fortlaufend aufrufen“ (mit „Ansicht“ > „Live-Ansicht-Optionen“) und aktivieren Sie die Live-Ansicht (mit „Ansicht“ > „Live-Ansicht“). Verwenden Sie die Navigationskomponenten, um die Funktionalität der Anwendung zu testen.
Verwenden Sie die Optionen im Popupmenü „Multi-Screen“, um zu sehen, wie der Entwurf auf Geräten mit unterschiedlich großem Display angezeigt wird. Deaktivieren die Live-Ansicht, so dass Sie wieder in der Entwurfsansicht arbeiten können.
-
Wählen Sie im Bedienfeld „Einfügen“ („Fenster“ > „Einfügen“) im Popupmenü links oben die Option „jQuery Mobile“ aus. Im Bedienfeld werden Komponenten angezeigt, die Sie in eine Webanwendung einfügen können.
-
Platzieren Sie in der Entwurfsansicht den Cursor dort, wo die Komponente eingefügt werden soll, und klicken Sie im Bedienfeld „Einfügen“ auf die entsprechende Komponente. Falls ein Dialogfeld eingeblendet wird, passen Sie die Komponenten mithilfe der jeweiligen Optionen an.
-
(jQuery Mobile - lokal.) Beim Speichern der HTML-Datei werden die jQuery Mobile-Dateien, einschließlich der Bilddateien, in einen Ordner im HTML-Verzeichnis kopiert.
Zeigen Sie eine Vorschau der Seite an, indem Sie die Live-Ansicht aktivieren. Einige der CSS-Klassen werden nur in der Live-Ansicht angewendet.
Erstellen von Webanwendungen für mobile Geräte aus einer neuen Seite
Die Komponente „Seite“ ist der Container für alle anderen jQuery Mobile-Komponenten. Fügen Sie daher zuerst die Komponente „Seite“ ein, bevor Sie weitere Komponenten in die Seite einsetzen.
-
Wählen Sie „Datei“ > „Neu“.
-
Wählen Sie „Leere Seite“ > „HTML“.
Einige der jQuery Mobile-Komponenten verwenden HTML5-spezifische Attribute. Um sicherzustellen, dass bei der Überprüfung die HTML5-Regeln eingehalten werden, wählen Sie aus dem Popupmenü „Dok.typ“den Dokumenttyp „HTML5“ aus.
-
Wählen Sie im Bedienfeld „Einfügen“ („Fenster“ > „Einfügen“) im Popupmenü links oben die Option „jQuery Mobile“ aus. Im Bedienfeld werden die jQuery Mobile-Komponenten angezeigt.
-
Ziehen Sie vom Bedienfeld „Einfügen“ die Komponente „Seite“ in die Entwurfsansicht.
-
Wählen Sie im Dialogfeld „jQuery Mobile-Dateien“ einen Verknüpfungstyp aus:
Remote (CDN)
Wenn die jQuery Mobile-Dateien auf einem Remote-CDN-Server liegen, können Sie die Verbindung mit dieser Option herstellen. Wenn Sie keine eigene Site mit den jQuery Mobile-Dateien eingerichtet haben, sollten Sie hier die Standardoptionen für jQuery-Site übernehmen. Sie können auch andere CDN Server verwenden.
Lokal
Es werden die in Dreamweaver verfügbaren Dateien angezeigt. Um einen anderen Ordner anzugeben, klicken Sie auf „Durchsuchen“ und wählen den Pfad zu dem Ordner mit den jQuery Mobile-Dateien aus.
Die CSS- und JavaScript-Dateien werden in einen temporären lokalen Ordner kopiert, bis Sie die HTML-Datei auf Ihrem Computer speichern. Nach dem Speichern der HTML-Datei werden die zugehörigen jQuery Mobile- und Bilddateien in einen Ordner im Stammverzeichnis der Site kopiert.
-
Legen Sie die Eigenschaften der Komponente „Seite“ fest.
-
Platzieren Sie in der Entwurfsansicht den Cursor dort, wo die Komponente eingefügt werden soll, und klicken Sie im Bedienfeld „Einfügen“ auf die entsprechende Komponente. Falls ein Dialogfeld eingeblendet wird, passen Sie die Komponenten mithilfe der jeweiligen Optionen an.
Zeigen Sie eine Vorschau der Seite an, indem Sie die Live-Ansicht aktivieren. Einige der CSS-Klassen werden nur in der Live-Ansicht angewendet.
Verwenden eigener Dateien und Ordner
Sie können auch eigene CSS- und JS-Dateien für Ihre Anwendung erstellen. Ihre Dateien müssen auf jeden Fall die Namen jquery.mobile.js, jquery.mobile.css und jquery.js erhalten.
Wenn Sie eigene Ordner verwenden, führen Sie die folgenden Schritte aus:
Laden Sie die unkomprimierte Version der jQuery 1.5-Kernbibliothek von der Site http://docs.jquery.com/Downloading_jQuery#Download_jQuery herunter.
Speichern Sie die Datei in dem Kernordner, der auch die anderen Ressourcen enthält.