AP Erstellen von Divs in Adobe CS5 Dreamweaver

Erstellen von APs in Adobe CS5 Dreamweaver - Dummies

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver verwendet CSS-positionierte virtuelle Container oder Boxen, durch das DIV-Tag, 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. Jedem DIV-Tag kann ein eindeutiger ID-Stil zugewiesen werden, um seine Position, sein Aussehen und seine Größe zu steuern.

Das Platzieren von Inhalten erfordert häufig zwei Schritte: Erstellen des DIV-Tags und anschließendes Erstellen des entsprechenden Stils. Mit dem AP Div-Werkzeug können Sie Kästchen frei auf der Seite zeichnen und Inhalte darin platzieren.

AP Div ist die Abkürzung für absolute DIV; Ein Element mit einer absoluten Position wird an einer bestimmten Position auf der Seite fixiert. Wenn Sie ein AP-Div zeichnen, wird seine Position normalerweise mithilfe der oberen und linken CSS-Eigenschaften festgelegt, wobei die obere linke Ecke der Seite als Bezugspunkt dient.

CSS behandelt jedes Element auf einer Seite als eine Box, die Inhalt enthält. bezeichnet als das CSS Box-Modell. Obwohl CSS ein Feld als das am meisten enthaltene Element auf einer Seite (wie eine Tabelle oder eine Liste) ansehen kann, werden DIV-Tags am häufigsten verwendet, um virtuelle Felder zu erstellen, die Sie zum Positionieren von Text, Bildern und sogar andere Kästen.

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

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

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

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

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

    Klicken Sie auf die Seite und ziehen Sie sie mit dem Werkzeug AP Div zeichnen, um eine Box zu erstellen.
  4. Bewegen Sie den Mauszeiger über den Rand der Box, bis er zu einer Hand wird. Klicken Sie einmal und die Griffe erscheinen auf allen Seiten.

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

  6. 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.

  7. 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.

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

Wenn Sie eine AP-Div auf der Seite zeichnen, fügt Dreamweaver ein Tag ein, um die Box zu erstellen, und erstellt einen ID-Selektor, der 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 im Eigenschafteninspektor auch jedem DIV eine Klassenregel zuweisen.

Jede AP-Div, die Sie zeichnen, wird automatisch im AP Elements-Fenster aufgelistet (wählen Sie Fenster → AP-Elemente, um es anzuzeigen. Das AP Elements-Panel kann Ihnen helfen, AP-Divs auf der Seite auszuwählen, auszublenden und anzuzeigen.

das AP Elements-Bedienfeld, um AP Divs auf Ihrer Seite auszuwählen, auszublenden und neu anzuordnen.