Als responsives Webdesign wird eine Entwicklungsmethode für Websites bezeichnet, die für Browser auf Desktops, Tablets, Smartphones und anderen mobilen Endgeräten optimiert sind und auf einem einzelnen Entwurf beruhen.
Die neuen Funktionen für responsives Webdesign in Dreamweaver CC 2015 umfassen die Unterstützung visueller Bootstrap-Tools und die Möglichkeit zum Hinzufügen von Bootstrap-Komponenten, einen ziehbaren Scrubber in der Live-Ansicht und visuelle Umschaltpunkte für Medienabfragen.
Bootstrap ist ein beliebtes Framework, das das Layout und die Funktionalität für Websites bereitstellt, aber bei Bedarf einfaches Ändern ermöglicht.
Ich kann die neuen Funktionen auch für ein vollkommen neues responsives Website-Design verwenden.
Im neuen Dokumentdialog gibt es Optionen zur Definition eines responsiven Designs auf Basis eines neuen oder vorhandenen Bootstrap-Stylesheets.
Ich klicke auf die Registerkarte "Bootstrap" und wähle die Option zum Erstellen einer neuen Bootstrap-CSS-Datei.
Dann gebe ich die Anzahl der Spalten und die Größe der drei Layouts an.
Für meine Zwecke übernehme ich die Vorgaben, klicke auf "Erstellen" (Create) und speichere meine Datei.
Anhand dieser Einstellungen erzeugt Dreamweaver den CSS- und JavaScript-Code sowie die Schriftarten und legt die entsprechenden Bootstrap-Dateien in Ordnern ab.
Diese Dateien definieren das Raster, das das Basis-Layout der Website liefert.
Ich lösche Platzhaltertext, passe mit dem Scrubber die Größe der Live-Ansicht an und klicke, um zusätzliche Umschaltpunkte zu einer neuen CSS-Datei hinzuzufügen, ohne meine Basis-Bootstrap.css zu verändern.
Durch Doppelklicken erweitere ich die Live-Ansicht.
Bootstrap-Komponenten sind wiederverwendbare, formatierte Komponenten wie Buttons, responsive Bilder, Karussells, Navigationsleisten und andere Elemente zur raschen Definition von Layout und Stil.
Hier füge ich die Container-Komponente hinzu, die den Großteil des Inhalts meiner Seite enthalten wird.
Meine Seite ist nun fast vollständig.
Ich füge nur noch ein paar Bilder aus der Mediensammlung hinzu.
Mit dem DOM-Bedienfeld gelange ich schnell zu der Spalte im Kunstbereich, in der ich eine Zeile für die Bilder einfügen möchte.
Ich verwende die Bootstrap-Komponente "Rasterzeile mit Spalte" (Grid Row with column), um die Zeile mit vordefinierten Spalten einzufügen.
Drei Spalten sollten reichen.
Ich bestätige die Vorgabe und klicke auf "OK".
In der Live-Ansicht in Dreamweaver sehen wir, dass der Klassenselektor automatisch auf die Zeilen- und Spalten-DIVs aus dem Bootstrap-Stylesheet angewendet wird.
Ich lege weitere vordefinierte Selektoren aus dem Bootstrap-Stylesheet zur Definition der entsprechenden Spaltenbreite fest, damit die Spalten sich an den Inhalt anpassen und das Layout auf Tablets und Smartphones perfekt angezeigt wird.
Dann füge ich das Bild ein und verschachtele es in jeder Spalte.
Ich habe noch zwei weitere Bilder, die ich in diesem Abschnitt hinzufügen möchte.
In der Live-Ansicht kann ich meinem Raster problemlos weitere Zeilen und Spalten hinzufügen.
Ich kann in der letzten DIV-Spalte der Zeile auf dieses Symbol klicken, um Spalten für die beiden letzten Bilder hinzuzufügen.
Die Bootstrap-Klassen werden in Echtzeit aktualisiert, sodass ich die Auswirkungen auf mein Design sofort sehen kann.
Abschließend klicke ich auf "Visuelle Medienabfrage-Haltepunkte" (Visual Media Query Break Points), um die verschiedenen Layouts visuell zu testen.
Anders als die Creative Suite-Versionen ist Dreamweaver CC ein komplettes Werkzeug für die Erstellung moderner, responsiver Websites.
Installieren Sie das aktuelle Update für Dreamweaver, und lernen Sie die neuen Funktionen kennen.
