Wie Verwenden von Layout-Optionen in Dreamweaver CSS Property Panel
An der Spitze des CSS-Designer Eigenschaftenfenster finden Sie die CSS-Eigenschaften häufig verwendet, um Seitenlayouts erstellen. Sie verwenden diese Optionen zu Höhe, Breite, Ausrichtung, Positionierung und Abstand angeben. Diese Einstellungen sind ideal für die Erstellung von Seitenlayouts mit Klasse und ID Arten, Dinge zu tun wie align Bilder und Positions Tags mehrspaltigen Layouts zu erstellen.
Sie können die Layout-Optionen in der CSS-Eigenschaft Panel verwenden, um diese Werte zu setzen:
Breite: Angeben, eine Breite für jedes Element, das seine Abmessungen angegeben, wie beispielsweise einem Tag haben kann. Größe Optionen sind Pixel (px), Punkt (pt), Pica (pc), Prozent (%), em, rem, ex, und ch.
Höhe: Geben Sie eine Höhe für jedes Element, das seine Abmessungen angegeben haben können.
Min und Max Breite: Geben Sie minimalen und maximalen Breiten für Tags und andere Blockelemente. Diese Optionen sind nützlich, wenn Sie die Breite als Prozentsatz des Browserfensters angeben. Zum Beispiel können Sie die Baubreite bei 80 Prozent des Browser-Fensters, eingestellt und dann einer maximalen Breite von 1000 Pixel festgelegt, das Layout, um zu verhindern gestreckt immer breiter als 1000 Pixel.
Min und Max Höhe: Geben Sie minimalen und maximalen Höhen für Tags und andere Blockelemente.
Marge: Stellen Sie die Menge an Speicherplatz um ein Element. Ränder können verwendet werden, um Raum zwischen dem Rand eines Elements und andere Elemente auf der Seite, beispielsweise zwischen einem Bild und Text oder zwischen zwei Etiketten zu erstellen. Sie können die Marge separat für oben, rechts, unten und links eingestellt. Padding wird in Pixel, Punkt, Zoll, Zentimeter, Millimeter gemessen, Pica, ems, EXS und Prozente.
Polsterung: Legt die Höhe des Raumes innerhalb der Grenzen eines Elements. Zum Beispiel können Sie Polsterung zu schaffen Raum zwischen den Grenzen eines Tags und deren Inhalt verwenden. Sie können Polster separat für oben, rechts, unten und links eingestellt. Padding wird in Pixel, Punkt, Zoll, Zentimeter, Millimeter gemessen, Pica, ems, EXS und Prozente.
Einstellen Polsterung und Randabstand kann tückisch sein. Wenn Sie margin und padding auf ein Element hinzufügen, wie ein Bild oder ein Tag, erhöhen Sie die Gesamtgröße dieses Elements und die Menge an Speicherplatz in der Layout erfordert.
Position: Die Option für die Position, die von dem unteren Teil des Layout-Abschnitt der Eigenschaftenfenster verändert die Art und Weise Elemente auf einer Seite positioniert sind. Die Positionierung kann dramatisch die Art und Weise Elemente auf Blockebene zu ändern (wie zB Tabelle, Liste, header, Absatz und Tags) in einem Browser angezeigt werden.
Erben: Sie brauchen nicht diese Standardoption angeben. Es sei denn, eine andere Option ausgewählt ist, erbt jedes Element die Positionierung seines Elternelements.
Statisch: Platzieren Sie den Gehalt an seinem Ort innerhalb der Strömung des Dokuments. Standardmäßig werden alle HTML-Elemente, kann positioniert sind statisch.
Absolute: Verwenden, um die oberen und linken Koordinaten, welche die Position eines Elements relativ zu der oberen linken Ecke des Browserfensters oder der oberen linken Ecke eines Elements zu steuern, die das Element enthält.
Fixed: Positionieren Sie ein Element in Bezug auf die linke obere Ecke des Browsers. Der Inhalt eines Elements feste Positionierung unter Verwendung bleibt konstant, auch wenn sich der Benutzer nach unten scrollt oder über die Seite.
Relativ: Verwenden Sie eine Position relativ zu dem Punkt, an dem Sie das Element in die Seite oder relativ zu ihrem Container einzufügen.
Schweben: Elemente ausrichten, wie Bilder und Tags, nach links oder rechts von einer Seite oder einem anderen Behälter zu verursachen Text oder andere Elemente um sie herum zu wickeln. Klicken Sie auf die Symbole auf dem Float-Feld die folgenden vier Optionen festlegen: Vererben, rechts, links, oder Keine.
Klar: Verhindern schwimmenden Inhalte von überlappend einen Bereich nach links oder rechts oder an beiden Seiten eines Elements. Diese Option ist nützlich, wenn ein Floats, wie ein Tag in einer eigenen Spalte zu erstellen, ein weiteres Blockelement überlappt, wie ein Tag verwendet, um die Fußzeile einer Seite zu erstellen.
Überlauf-x und -y: Sagen Sie den Browser, wie der Inhalt eines Elements angezeigt werden, wenn der Behälter, wie ein Tag, nicht des Elements gesamte Höhe oder Breite passen. Überlauf-Optionen sind
Sichtbar:Halten Inhalte, wie ein Bild oder Text, sichtbar, auch wenn es über die festgelegte Höhe oder Breite eines Behälters aufweitet.
Versteckt:Abgeschnitten, um den Inhalt, wenn sie die Größe des Behälters überschreitet. Diese Option bietet keine Bildlaufleisten.
Scrollen:In Bildlaufleisten an den Behälter unabhängig davon, ob dessen Inhalt die Größe des Elements überschreitet.
Auto:Machen Sie Scrollbalken erscheinen nur, wenn der Inhalt eines Behälters seine Grenzen überschreitet.
Anzeigen: Angeben, ob oder wie ein Element in einem Browser zu rendern. Sie können beispielsweise die Positionierung einer ungeordneten Liste von horizontal durch die Wahl Inline zu vertikal ändern oder ein Element zu verbergen, sie unsichtbar zu machen, indem Sie Keine auswählen. Sie können die Display-Option mit einer Skriptsprache verwenden, um die Darstellung von Elementen dynamisch zu ändern.
Sichtweite: Kontrollieren Sie, ob der Browser ein Element anzeigt. Die Sichtbarkeitsoptionen sind
Erben:Das Element hat die Sichtbarkeit des Elements in dem es enthalten ist (der Standard).
Sichtbar: Das Element wird angezeigt.
Versteckt:Das Element wird nicht angezeigt.
Zusammenbruch: Für die Verwendung mit HTML-Tabellen. Collapse kann verwendet werden, um eine Spalte oder Zeile zu entfernen, ohne den Rest des Tabellenlayout zu beeinflussen.
Z-Index: Steuern der Position eines Elements auf der Z-Koordinate, die die Stapelreihenfolge der Elemente in Bezug zueinander steuert. Höhere numerierten Elemente überlappen unteren nummerierten Elemente.
Opazität: Kontrollieren Sie die Opazität Ebene für ein Element von 0,0 (vollständig transparent) bis 1,0 (völlig undurchsichtig). Zum Beispiel, wenn Sie 0,5 in der Opazität Feld eingeben, wird die Opazität eines Elements zu 50 Prozent reduziert werden.