Wie ein Seitenlayout mit CSS Margins in Dreamweaver zum Zentrum
Dreamweaver können Sie Ihr Layout mit CSS Margen zu zentrieren. Viele Webseiten-Designs sind auf der Seite zentriert, so dass sie zwischen den Seiten des Browser-Fensters zu schweben scheinen, egal wie breit oder schmal das Fenster wird. Dies hilft, die Illusion erzeugen, die das Design der Seite füllt, auch wenn der Browser-Fenster viel breiter als die Seitengestaltung ist.
Die meisten Webseiten-Designs mit CSS erstellt diesen Effekt zu erzielen, indem ein Tag zu schaffen, die alle Seiteninhalt umgibt und dann einen Stil zu diesem Tag Anwendung, die eine Stilregel enthält, die diesen Tag die Mitte. Wie Sie in den folgenden Schritt-für-Schritt-Anleitung zu entdecken, einen Stil zu schaffen ist ein Tag zum Zentrum nicht so offensichtlich, wie Sie sich vorstellen können, ist aber leicht zu implementieren.
Gängige Praxis ist es, einen ID-Stil für den Tag zu verwenden, die Ihre Design-Zentren und es zu nennen #Verpackung oder #Container.
Wenn Ihre Seite nicht bereits mit einem Tag um alle Ihre Inhalte eingerichtet, hier ist ein Tipp eines hinzuzufügen. Klicken Sie zuerst auf und ziehen, um den gesamten Text, Bilder und andere Inhalte auf der Seite. Dann Insert-Layout-Objekte-Div-Tag wählen. Im Dialogfeld Tag einfügen Div, stellen Sie sicher, dass die Verpackung um Selection-Option aus dem Einfügen der Dropdown-Liste ausgewählt ist.
Lassen Sie den Rest der Felder leer und klicken Sie auf OK, um einen Tag um alle Inhalte Ihrer Seite hinzuzufügen, und Sie sind für die Schritte bereit, die folgen.
Um eine ganze Seite Design Center, stellen Sie sicher, dass ein Tag den gesamten Inhalt der Seite umgibt, und gehen Sie folgendermaßen vor:
Klicken Sie auf das Pluszeichen in der CSS-Designer Selektoren Panel.
Je nachdem, was man auf der Seite ist, einen neuen Stil Namen oder ein leeres Feld, in dem Sie einen Stilnamen in die Selektoren Panel hinzugefügt eingeben.
Doppelklicken Sie auf den Namen auszuwählen, die Dreamweaver zum Panel hinzugefügt und es Sie für Ihren neuen Stil wollen den Namen zu ändern, oder klicken Sie auf das leere Feld auszuwählen und einen Namen eingeben.
Wenn kein Name hinzugefügt wird, geben Sie den Namen, den Sie in das leere Feld wünschen. Sie können den Stil einen beliebigen Namen geben, aber stellen Sie sicher, dass eine Periode vor dem Namen eingeben, wenn Sie eine Klasse-Stil, oder ein # Zeichen für eine ID-Stil erstellen.
Im Eigenschaftenfenster geben Sie die Breite, Ränder und andere Formatierungseinstellungen, die Sie festlegen möchten.
Die Breite für die Container-Tag wird auf 980 Pixel festgelegt. Hier ist der Trick, ein Tag wie diese Zentrierung: Stellen Sie die linken und rechten Rand auf Auto. Auf diese Weise fügt ein Browser automatisch eine gleiche Menge an Randraum auf jeder Seite des Etiketts, effektiv es auf der Seite zu zentrieren.
Wählen Sie die ID, die den Inhalt aller auf der Seite umgibt.
Um sicherzustellen, dass Sie den richtigen Tag ausgewählt haben, klicken Sie den Cursor irgendwo im Hauptteil der Seite zu platzieren und dann den Tag in die am weitesten links im Quick Tag Selector am unteren Rand des Arbeitsbereichs aufgelistet klicken.
Mit dem Tag ausgewählt haben, wählen Sie den Namen der Stil, den Sie aus dem ID-Dropdown-Liste im Eigenschafteninspektor erstellt.
Die Stilregeln, die Sie definiert, wenn Sie den Stil erstellt werden, mit dem Tag automatisch übernommen. In diesem Beispiel ist das Ergebnis, dass die Größe des Tags auf 980 Pixel geändert wird breit und dem Tag und alle Inhalte werden auf der Seite zentriert.
Nicht alle Funktionen funktionieren, wenn Dreamweaver wird zur Live-Ansicht. Obwohl der Live-Ansicht eine gute Möglichkeit ist, wie Entwürfe Ihrer Seite, um eine Vorschau in den meisten modernen Web-Browsern aussehen wird, ist die Verwendung der Live-View-Funktion macht viele von Dreamweaver-Editing-Tools unbrauchbar. Wenn zum Beispiel erscheint der Eigenschafteninspektor abgeblendet, wenn Sie es verwenden möchten, stellen Sie sicher, dass die Live-Taste deaktiviert ist.