In diesem Tutorial sehen wir uns die Startvorlagen von Dreamweaver CC an.
Dazu rufe ich zunächst den Arbeitsbereich „Entwurf“ (Design) auf.
Neue Dateien auf Basis einer Startvorlage erstellt man genauso wie jede andere neue Datei.
Ich wähle „Datei > Neu“ (File > New) und dann „Startvorlagen“ (Starter Templates) links im Dialogfeld „Neues Dokument“ (New Document).
Im Ordner „Reaktionsfähige Vorlagen“ (Responsive Starters) stehen fünf Vorlagen zur Auswahl: „Infoseite“ (About page), „Blog-Beitrag“ (Blog post), „E-Commerce“, „E-Mail“ und „Portfolio“.
Wie der Ordnername schon andeutet, enthält jede Startvorlage ein responsives Design mit ausformuliertem HTML-Code.
Mit einem Klick auf eine Vorlage werden eine Vorschau und eine Beschreibung rechts angezeigt.
Ich wähle die Vorlage „Infoseite“ (About page) und klicke auf „Erstellen“ (Create).
Im nächsten Fenster werde ich gefragt, wo die neue Web-Seite gespeichert werden soll.
Ich speichere die Datei im Projektordner unter dem Namen „about.html“.
Im Fenster mit der Aufforderung zur Speicherung der abhängigen Dateien klicke ich auf „Kopieren“ (Copy).
Im Bedienfeld „Dateien“ (Files) sehen Sie, dass dadurch bereits eine Site eingerichtet wurde, im Projektordner.
Die Site umfasst die Seite „about.html“ und ergänzende Dateien.
Die Infoseite ist in der Ansicht „Teilen“ (Split) geöffnet.
Sehen wir uns den Code der Vorlage in der Code-Ansicht an.
Während ich nach unten scrolle, sehen Sie die Struktur, die in standardmäßigem HTML5 verfasst ist.
Wenn ich in der Live-Ansicht Design-Elemente auswähle, wird die Auswahl in der Code-Ansicht aktualisiert.
Die HTML-Blöcke in der Vorlage lassen sich bearbeiten.
Ich kann Elemente hinzufügen, entfernen und duplizieren.
Nun wähle ich die CSS-Datei aus, um die Formatierung und die Media Queries einzusehen.
Die Stile oben legen das Grund-Layout fest.
Die Abschnitte mit Media Queries weiter unten bestimmen die stilistischen Änderungen bei verschiedenen Bildschirmgrößen.
Ich wähle „Datei > Vorschau in Browser“ (File > Preview in Browser).
Das responsive Vorlagen-Design passt sich an die Breite des Bildschirms an.
Startvorlagen lassen sich leicht anpassen mit den Coding- und visuellen Tools von Dreamweaver CC.
Im Bedienfeld „CSS Designer“ wähle ich unter „Quellen“ (Sources) die Datei „aboutPageStyle.css“ und dann das BODY-Tag unter „Selektoren“ (Selectors).
Ich klicke auf das Symbol für den Hintergrund im Bedienfeld „Eigenschaften“ (Properties) und ändere die Hintergrundfarbe in Schwarz.
Dann füge ich ein Kachelbild hinzu und setze „background-attachment“ auf „fixed“.
In der Live-Ansicht wähle ich das Textelement aus und ändere im Bedienfeld „CSS Designer“ die Farbe in Weiß.
Jedes Textattribut lässt sich auf diese Weise ändern.
Es geht ganz einfach: entweder Stile visuell im Bedienfeld „CSS Designer“ definieren oder den Code in der Code-Ansicht bearbeiten.
Jetzt ersetze ich ein Bild.
Ich wähle es in der Live-Ansicht aus und klicke auf das Popup-Menü mit den HTML-Attributen, um zum neuen Bild zu navigieren.
Mein Projektordner enthält bereits Bilder.
Ich wähle die Datei „feature_259x259.png“ aus.
Das neue Design nimmt langsam Form an.
Um Text einzufügen, kann ich ihn über die Zwischenablage kopieren oder direkt in der Live- oder Code-Ansicht eingeben.
Vorlagenelemente lassen sich beliebig ergänzen oder entfernen.
Die Vorlagen sind so konzipiert, dass man mit HTML-Blöcken als Ausgangspunkt beginnt und sie so lange bearbeitet, bis das Design fertig ist.
Im fertigen Design sehen Sie, dass ich viele HTML-Blöcke aus der Originalvorlage entfernt habe.
Ich verwende nur die Elemente, die ich für mein Design benötige.
Ich wähle „Vorschau im Browser“ (Preview in Browser), um das Ergebnis zu prüfen.
Das fertige Design passt sich automatisch an den Bildschirm an.
So einfach erstellen Sie eine Web-Seite auf Basis einer Startvorlage.
Probieren Sie alle Startvorlagen aus, und passen Sie sie an Ihren jeweiligen Bedarf an.
Damit sparen Sie viel Zeit beim Designen.
