Dreamweaver MX 2004 von Grund auf(4)
Autor：Eve Cole
Aktualisierungszeit：2009-05-31 21:02:51
Die Verwendung von Ebenen <BR> Eine Ebene ist ein Bereich einer Webseite. Der größte Reiz besteht darin, dass jede Ebene überlappen kann und Sie entscheiden können, ob jede Ebene sichtbar ist Gleichzeitig besteht die Möglichkeit, hierarchische Beziehungen zwischen Ebenen anzupassen. Nachdem Sie die Layer-Technologie beherrschen, können Sie leistungsstarke Seitensteuerungsfunktionen für Webseiten bereitstellen.
Ebene erstellen
Um die Funktion der Ebene zu veranschaulichen, erstellen wir zunächst einen einfachen Beispieleffekt wie in Abbildung 1 dargestellt (Abbildung 1).
Abbildung 1
Der erste Schritt besteht darin, eine neue Seite in Dreamweaver MX 2004 zu erstellen und den Befehl „Einfügen→Ebenenobjekte→Ebene“ auszuführen. Zu diesem Zeitpunkt erscheint im Bearbeitungsfenster ein schwarzer rechteckiger Rahmen, der die eingefügte Ebene darstellt. Wenn die Maus über die rechteckige Rahmenlinie bewegt wird, verwandelt sich die Maus in die Form eines Kreuzpfeils. Wenn Sie mit der Maus klicken, erscheinen 8 schwarze, durchgezogene Quadrate um die Rahmenlinie herum, und in der oberen linken Ecke befindet sich ein leeres Quadrat, das darauf hinweist dass diese Ebene ausgewählt ist.
Tipp: Ziehen Sie mit der Maus das ausgefüllte Quadrat, um die Größe der Ebene zu ändern, und ziehen Sie das leere Quadrat in der oberen linken Ecke, um die Position der Ebene zu ändern.
Der zweite Schritt besteht darin, mit der Maus in die Ebene zu klicken, „China Computer Education News“ einzugeben und dann den Text im Fenster des Eigenschaftenfensters auf Blau zu setzen.
Der dritte Schritt besteht darin, auf den Ebenenrand zu klicken, um die Ebene auszuwählen, dann den Befehl „Bearbeiten→Kopieren“ auszuführen, um die aktuelle Ebene zu kopieren, dann mit der Maus in andere leere Bereiche des Bearbeitungsfensters zu klicken und „Bearbeiten→Einfügen“ auszuführen. Befehl, sodass im Bearbeitungsfenster eine weitere Ebene angezeigt wird, diese sich derzeit jedoch überlappen und Sie die Ebene verschieben müssen, bevor Sie die beiden Ebenen sehen können.
Der vierte Schritt besteht darin, die Textfarbe einer der Ebenen in Schwarz zu ändern und die Ebenenposition so zu verschieben, dass sich die Positionen der beiden Ebenen um einige Pixel unterscheiden, wodurch ein Schatteneffekt entsteht (Abbildung 2).
Abbildung 2
Drücken Sie nach Abschluss der oben genannten Vorgänge die Taste „F12“, um eine Vorschau anzuzeigen. Sie können den in Abbildung 1 gezeigten Effekt im IE-Browser sehen.
Verschachtelte Ebenen
Die sogenannte verschachtelte Ebene bezieht sich auf eine Ebene, die in einer anderen Ebene erstellt wurde. In Abbildung 3 ist beispielsweise eine typische verschachtelte Ebene dargestellt (Abbildung 3). Tatsächlich ist die Erstellung einer solchen verschachtelten Ebene sehr einfach. Erstellen Sie einfach eine übergeordnete Ebene, klicken Sie mit der Maus in die Ebene und fügen Sie erneut eine Ebene ein. Verschachtelte Ebenen bedeuten jedoch nicht, dass sich die Unterebene innerhalb der übergeordneten Ebene befinden muss. Zwischen ihnen besteht eine Vererbungsbeziehung.
Abbildung 3
Die Funktion der Vererbung besteht darin, die Sichtbarkeit der Unterebene mit der der übergeordneten Ebene konsistent zu halten. Da viele dynamische Webseiten-Spezialeffekte durch die Steuerung der Sichtbarkeit der Ebene erzielt werden, ändert sich die Sichtbarkeit der übergeordneten Ebene Die Unterschicht ändert sich ebenfalls. Darüber hinaus kann die Vererbungsbeziehung auch die relative Position der untergeordneten Ebene und der übergeordneten Ebene unverändert lassen. Wenn wir beispielsweise die übergeordnete Ebene verschieben, wird auch die untergeordnete Ebene mit verschoben. Dies ist beim Dynamisieren sehr nützlich Webseiten.
Ebenen-Z-Reihenfolge
Im Vergleich zu Tabellen besteht der größte Vorteil von Ebenen darin, dass sie sich überlappen können. Um anzuzeigen, welche Ebene oben und welche unten liegt, muss für jede Ebene eine Seriennummer festgelegt werden. Das bedeutet, dass zusätzlich zu den X- und Y-Koordinaten des Bildschirms künstlich eine Z-Achse senkrecht zum Bildschirm hinzugefügt wird.
Wie in Abbildung 4 gezeigt, unterscheiden sich die vier Ebenen im linken Bereich offensichtlich von den vier Ebenen im rechten Bereich. Es ist auch sehr einfach, die Reihenfolge der Ebenen anzupassen, indem Sie sie einfach mit der Maus anklicken und unten platzieren , mittlere und Die oberste Ebene reicht aus. Diese Operationsmethode scheint jedoch etwas umständlich zu sein, wenn viele Ebenen vorhanden sind, und es ist unpraktisch, sie später anzupassen, sodass wir Anpassungen über das Ebenenbedienfeld vornehmen können.
Abbildung 4
Führen Sie zunächst den Befehl „Fenster→Ebenen“ aus, um das Ebenenbedienfeld zu aktivieren. Zu diesem Zeitpunkt sehen Sie das in Abbildung 5 dargestellte Bedienfeldfenster. Wählen Sie hier einfach die Ebene aus, deren Seriennummer geändert werden muss Klicken Sie mit der Maus und ziehen Sie die Maus nach oben oder unten, wenn eine horizontale Linie zwischen den beiden Ebenen erscheint, die Sie einfügen möchten, sodass Sie die „Z-Reihenfolge“ jeder Ebene ändern können.
Abbildung 5
Tipp: Klicken Sie direkt auf den Wert des Feldes „Z“, um ihn auf die erforderliche Ebenenebene zu ändern.
Erstellen Sie Tabellen mithilfe von Ebenen
Obwohl die Verwendung von Ebenen zum Auffinden von Webseitenelementen viel bequemer ist als die Verwendung von Tabellen, unterstützen nur Browser ab IE 4.0 die Ebenenfunktion, damit Freunde, die ältere Browser verwenden, die Arbeit sehen können, an deren Erstellung Sie so hart gearbeitet haben. Am besten konvertieren Sie die Ebene in eine Tabelle.
Der erste Schritt besteht darin, im oberen Teil des in Abbildung 5 gezeigten Fensters das Kontrollkästchen „Überlappungen verhindern“ zu aktivieren, damit sich die einzelnen Ebenen nicht überlappen können, da sonst während des Konvertierungsvorgangs eine Warnmeldung angezeigt wird.
Der zweite Schritt besteht darin, den Befehl „Ändern→Konvertieren→Ebenen in Tabelle“ auszuführen. Zu diesem Zeitpunkt sehen Sie das in Abbildung 6 gezeigte Fenster (Abbildung 6). Wählen Sie „Am genauesten“ aus „Transparente GIFs verwenden“ bzw. „Transparente GIFs verwenden“. Erstere erstellt durch präzise Konvertierung eine Zelle für jede Ebene, um sicherzustellen, dass der Abstand zwischen den einzelnen Zellen mit einem transparenten GIF-Bild gefüllt wird Browser Alle sehen gleich aus.
Abbildung 6
Der dritte Schritt besteht darin, den Konvertierungsvorgang von der Ebene zur Tabelle abzuschließen, nachdem Sie auf die Schaltfläche „OK“ geklickt haben.
Tipp: Dreamweaver MX 2004 bietet auch die Konvertierungsfunktion von Tabellen in Ebenen und die Schritte sind ähnlich.
Wenn Sie Ihre eigenen Webseiten farbenfroh gestalten möchten, müssen Sie die Layer-Technologie beherrschen. Andernfalls werden Sie in Zukunft bei der Erstellung dynamischer Webseiten auf viele Schwierigkeiten stoßen. Daher wird empfohlen, dass Sie sich eingehend mit der obigen Einführung befassen Beherrschen Sie die Schichtentechnologie.
