Wie man Elemente mit Floats in Dreamweaver ausrichten
Designer oft ein Bild, ein Tag oder ein anderes Element nach links oder rechts von einer Web-Seite in Dreamweaver ausrichten und wickeln Sie dann einen beliebigen Text oder andere Inhalte rund um das Element. Das Bild wird auf der rechten Seite der Spalte ausgerichtet, so dass der Text daneben auf der linken Seite umschließt. In den folgenden Schritten erfahren Sie, wie Sie Stile wie diese zu erstellen.
CSS bietet viele Vorteile, wenn es darum geht, Elemente wie diese Ausrichtung, aber die Art und Weise Sie diese Stile eingerichtet ist nicht so offensichtlich, wie man auf den ersten erwarten könnte, weil Sie die Schwimmer Option verwenden.
Nachdem Sie verstehen, dass Sie Elemente wie Bilder, auf der linken oder rechten Seite einer Seite schwimmen kann, ist es ziemlich einfach, Arten zu schaffen, dieses Ziel zu erreichen. In dieser Übung lernen Sie zwei Arten zu erstellen, die zum Ausrichten von Bildern nach links und rechts von einer Seite, komplett mit einer kleinen Marge nur ideal sind, wo Sie es brauchen.
Die CSS-Layouts in Dreamweaver CC bereits enthalten Schwimmer Stile, die Sie ausrichten Elemente nach rechts und links verwenden können. Diese Klasse Stile werden benannt .fltlft (Für, Sie haben es erraten, float links) und .fltrt (Für Schwimmer rechts).
So erstellen Sie zwei Klassen Stile, die Sie Bilder und andere Elemente links und rechts von einer Seite ausrichten verwenden können, um 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.
Doppelklicken Sie auf den neuen Namen und bearbeiten Sie es wie gewünscht.
Obwohl Sie diese Stile nennen kann, was auch immer Sie bevorzugen, sind die Ausrichtung Stile häufig im Zusammenhang mit dem abgekürzten fltrt und fltlft genannt, die für Schwimmer rechts stehen und jeweils links schweben.
Zum Beispiel, wenn Sie einen Stil ausrichten Elemente auf der linken Seite zu erstellen, würden Sie es nennen .fltlft.
Im Eigenschaftenfenster klicken Sie auf das Symbol, das Float nach links setzt.
Verwenden Sie die Randeinstellungen im Eigenschaftenfenster ein Rand um die Floats zu schaffen.
Es ist gut, Praxis-Marge Raum der gegenüberliegenden Seite von dem Schwimmer Einstellung hinzuzufügen. Wenn Sie einen Stil erstellen möchten, ein Bild auf der linken Seite zu schweben, fügen Sie 5 oder 10 Pixel Platz bis zum rechten Rand Feld. Wenn Sie ein Bild auf der linken Seite der Seite auszurichten, wird ein Spielraum zwischen dem Bild und jedes andere Element erstellt werden, die neben dem Bild umschließt.
Wählen Sie das Bild oder ein anderes Element, das Sie auf der Seite ausrichten möchten.
Wählen Sie den Namen des Stils Sie aus der Klasse Dropdown im Eigenschafteninspektor erstellt.
Die Stilregeln, die Sie definiert, wenn Sie den Stil erstellt werden automatisch übernommen. Wenn Sie ein Bild in einer Textseite ausgewählt hätte, wäre das Bild auf der linken Seite der Seite zu bewegen, und der Text würde wickeln um es mit einem Spielraum zwischen dem Bild und Text.
Wiederholen Sie die Schritte 1-7, einmal mit dem Schwimmer auf der rechten und 5 bis 10 Pixeln Randraum am linken Rand Feld in der Box Kategorie, und wieder mit dem Float auf links und 5 bis 10 Pixeln Randraum im rechten Rand-Feld in der Box Kategorie.