So erstellen Sie eine einspaltige Fluid Grid Layouts in Dreamweaver
Bevor Sie eine komplizierte Fluid Grid Design in Dreamweaver zu schaffen tauchen in, sollten Sie eine einfachere versuchen. Beginnen Sie mit einer einfachen, ein Säulen Fluid Grid Layouts erstellen, die folgenden einfachen Anweisungen:
Wählen Sie Datei-Neu.
Das Fenster Neues Dokument wird geöffnet. Hinweis: Stellen Sie sicher, dass Sie die Website Setup-Prozess abgeschlossen haben, bevor Sie auf einem neuen Fluid Grid Layouts anfangen zu arbeiten.
Von der linken Seite des Bildschirms, wählen Fluid Grid Layouts.
Das Fenster Neues Dokument Optionen ändern, um die Fluidrasteroptionen.
Geben Sie die Anzahl der Spalten, die Sie in jeder der drei Layouts wollen.
Um Spalten hinzufügen oder entfernen, wählen Sie das Textfeld über jede Spalte der Reihe nach und geben Sie die Anzahl der Spalten, die Sie wollen.
Geben Sie den Prozentsatz des Browserfensters Sie jedes Layout abdecken wollen.
Wählen Sie das Textfeld unter jedem Layout wiederum aus und geben Sie eine Zahl für den Prozentsatz an Speicherplatz Sie das Layout wollen abzudecken, wenn das Design in einem Browser-Fenster angezeigt wird. Zum Beispiel ist standardmäßig das Desktop-Layout mit 90 Prozent des zur Verfügung stehenden Raumes aufzunehmen gesetzt, aber man konnte es zu 95 Prozent ändern sich mehr Design-Raum zu geben und den Randraum zu reduzieren.
Ändern Sie den Prozentsatz der Spaltenbreite die Höhe der Randraum zwischen jeder Spalte zu ändern.
Standardmäßig setzt Dreamweaver jede Marge von 25 Prozent des zur Verfügung stehenden Raum zu übernehmen.
Verwenden Sie die Dropdown-Liste einen Doctype angeben.
Standardmäßig werden die Fluid Grid Layouts mit dem HTML5 Doctype erstellt. Es sei denn, man den Doctype ändern müssen mit anderen Formatierungen in Ihrer Website verwendet mehr kompatibel zu sein, ist HMTL5 die empfohlene Option für ansprechende Web-Designs.
Klicken Sie auf Erstellen.
Der Dialog Speichern unter öffnet sich bereit, eine CSS-Datei zu speichern.
Geben Sie einen Namen für Ihre CSS-Datei und klicken Sie auf Speichern.
Eine neue HTML-Datei öffnet sich in der Dreamweaver-Arbeitsbereich, ist aber noch nicht gespeichert. Die CSS-Datei, die Sie genannt wird gespeichert und der Name wird im Bedienfeld Dateien sichtbar.
Hinweis: Im Gegensatz zu dem Prozess der Schaffung anderer Arten von Seiten in Dreamweaver wird die CSS-Datei gespeichert, und die erste HTML-Datei wird in einem späteren Schritt gespeichert.
Wählen Sie Datei-Speichern
Das Dialogfeld wird geöffnet.
Geben Sie einen Namen für die HTML-Datei, und klicken Sie auf OK.
Das Dialogfeld wird geschlossen und ein Hinweis erscheint in Dreamweaver Sie, dass Ihr Fluid Grid Layouts erfordert zwei zusätzliche Dateien zu informieren: boilerplate.css und respond.min.js.
Klicken Sie auf OK, um die boilerplate.css und respond.min.js Dateien auf Ihre Website Ordner zu kopieren.
Alle drei Dateien werden auf dem Panel-Dateien hinzugefügt und Sie kehren zu Ihrem neu benannten HTML-Datei öffnen im Dreamweaver-Arbeitsbereich.
Geben Sie der Seite einen Titel von Text in das Feld Titel an der Spitze des Arbeitsbereichs eingeben.
Und das schließt den Prozess einen neuen Satz von Dateien für Ihr Fluid Grid Layouts zu erstellen.