Erstellen von APs in Adobe Dreamweaver CS6 - Dummies

Adobe Dreamweaver CS6 verwendet CSS-gesteuerte virtuelle Container oder Boxen, , die vom DIV-Tag erstellt wurden, um Inhalte auf einer Seite frei zu positionieren. Das DIV -Tag ist ein einfaches Tag, das zum Erstellen von Bereichen für Inhalte auf Ihrer Seite verwendet wird.

Sie können DIV-Tags an verschiedenen Stellen in Dreamweaver erstellen, einschließlich des Bereichs "Layout" im Bedienfeld "Einfügen". Jedem DIV-Tag kann ein eindeutiger ID-Stil zugewiesen werden, um seine Position, sein Aussehen und seine Größe zu steuern. Der Vorgang des Platzierens von Inhalten erfordert häufig zwei Schritte: Erstellen des DIV-Tags und anschließendes Erstellen des zugehörigen Stils.

Dreamweaver erleichtert diese Aufgabe mit dem AP Div-Werkzeug, mit dem Sie Kästchen frei auf der Seite zeichnen und Inhalte darin platzieren können.

CSS behandelt die meisten Containerelemente auf einer Seite als Boxen ; Dieser Ansatz, der als CSS Box-Modell bezeichnet wird, ermöglicht es diesen Elementen, einheitliche Eigenschaften wie Füllung, Ränder, Breite, Höhe und Ränder gemeinsam zu nutzen.

Obwohl CSS fast jedes beliebige Element auf einer Seite als Box betrachten kann (z. B. eine Tabelle oder eine Liste), werden DIV-Tags am häufigsten verwendet, um virtuelle Felder zu erstellen, die Sie zum Positionieren von Text, Bildern und sogar verschachtelt verwenden können. Boxen.

Jedes Feld kann seine eigene Breite, Höhe, Position (über die oberen und linken Eigenschaften), Rand, Ränder und Füllung haben; jeder wird mit den entsprechenden CSS-Eigenschaften gesetzt.

Gehen Sie folgendermaßen vor, um AP (Absolute-Positioned) Divs zu erstellen:

1. Erstellen Sie eine neue Seite oder öffnen Sie eine vorhandene Seite von Ihrer Site.

2. Wählen Sie im Bedienfeld "Einfügen" die Kategorie "Layout" aus.

3. Wählen Sie das Werkzeug AP Div zeichnen aus.

   Der Cursor erscheint als Fadenkreuz, wenn Sie ihn zurück über die Seite bewegen.

4. Klicken Sie auf eine beliebige Stelle auf der Seite und ziehen Sie, um eine neue AP-Div zu zeichnen. Lassen Sie die Maustaste los.

   

5. Bewegen Sie den Mauszeiger über den Rand der Box, bis er sich in einen 4-Wege-Pfeil verwandelt. Klicken Sie einmal und die Griffe erscheinen auf allen Seiten.

6. Klicken Sie auf einen dieser Griffe und ziehen Sie sie, um die Größe des Rahmens vertikal oder horizontal zu ändern.

7. Um die Box zu verschieben, klicken Sie sie an und ziehen Sie sie auf die Registerkarte, die sich an ihrer oberen linken Ecke befindet, und platzieren Sie die Box dort, wo Sie sie auf der Seite haben möchten.

   Sehen Sie sich den Eigenschafteninspektor an, und Sie sehen den Namen sowie viele der aufgelisteten DIV-Eigenschaften.

8. Wenn das Bedienfeld CSS-Stile nicht geöffnet ist, wählen Sie Fenster → CSS-Stile, um es zu öffnen. Klicken Sie im Bereich "Alle" links neben das Stylesheet (), um es zu erweitern.

   Sie sehen einen neuen # apDiv1 ID-Stil, der an die neue AP-Div, die Sie erstellt haben, angehängt ist. Für jedes neue erstellte DIV ordnet Dreamweaver apDiv in der Reihenfolge der Erstellung eine entsprechende Nummer zu.

   

9. Klicken Sie in das neue Feld, um neue Inhalte einzugeben, einzufügen oder einzufügen.

Wenn Sie eine AP Div auf der Seite zeichnen, geschieht Folgendes: Dreamweaver fügt ein Tag ein, um die Box zu erstellen, und erstellt eine CSS-ID-Auswahl, die die Position, Breite, Höhe und andere Eigenschaften des DIV speichert.

Nachdem Sie eine AP Div erstellt haben, können Sie Inhalte direkt darin eingeben, einfügen oder einfügen. Sie können dem DIV auch im Eigenschafteninspektor eine Klassenregel zuweisen - meistens für die Formatierung von Inhalten, wobei der ID-Selektor zur Steuerung der Position und der Abmessungen verwendet wird.