Verwenden Sie Dreamweaver, um Webseiten-Tags schnell zu bearbeiten
Autor:Eve Cole
Aktualisierungszeit:2009-06-01 01:02:43
Ich frage mich, ob Sie die Angewohnheit haben, Code von Hand zu schreiben. Zum Beispiel: Wenn Sie einen CSS-Code oder einen Javascript-Code in eine Zelle einfügen möchten, wie können Sie das schnell und bequem tun?
Obwohl Dreamweaver uns die Codeansicht zur Verfügung gestellt hat, müssen wir sie immer noch manuell finden und hin und her wechseln. Obwohl Sie die Codeansicht und die Bearbeitungsansicht auch nebeneinander verwenden können, nimmt sie die Hälfte des Bildschirmplatzes ein, wodurch der ohnehin schon kleine Bearbeitungsbereich noch überfüllter wird. Gibt es einen besseren Weg? Die Antwort ist ja.
Nehmen wir als Beispiel Dreamweaver 8 und gehen davon aus, dass das Dreamweaver-Bedienfeldlayout für alle das Standardlayout ist. Überprüfen Sie, ob sich über dem Eigenschaftenbereich eine Reihe kleiner Beschriftungen befindet. (Wenn Sie MX nicht verwenden, befindet sich das Tag in der Statusleiste.) Beispiel: Wenn Sie ein neues leeres HTML-Dokument erstellen, sollte das kleine Tag oben <body> lauten. Bitte schauen Sie sich das Bild unten an:
Der auf dem Bild mit einem roten Rahmen markierte Ort ist unser heutiger Protagonist. Werfen wir zunächst einen Blick auf „Tags umschließen“. Geben Sie ein paar Wörter auf der Seite ein, wählen Sie sie aus, wählen Sie im Kontextmenü „Tags umbrechen“ aus, geben Sie „<strong>“ (ohne Anführungszeichen) in das Popup-Dialogfeld „Tags umbrechen“ ein und drücken Sie dann die Eingabetaste. Wurde der zuvor ausgewählte Text fett dargestellt? Gehen Sie zum Quellcode und sehen Sie sich den ausgewählten Text an. Sie können versuchen, einige andere Tags hinzuzufügen, wie zum Beispiel: <a>, <p>. Sie können hier auch Attribute direkt eingeben. Beispiel: <p style="color:#CC0000">. Hier ist nur eine allgemeine Erklärung. Wenn Sie Fragen haben, schauen Sie bitte in der Hilfe von Dreamweaver nach.
Lassen Sie uns darüber sprechen, wie Sie den Tag-Selektor anwenden.
Wenn wir gerade den Cursor auf den fett gedruckten Text bewegen, werden wir feststellen, dass nach <body> ein zusätzliches <strong> steht. Das bedeutet, dass sich außerhalb des Textes, an dem sich der Cursor befindet, ein <strong>-Tag und außerhalb des <strong>-Tags ein <body>-Tag befindet. Als nächstes fügen wir eine weitere Tabelle hinzu, bewegen den Cursor in die Tabelle und sehen uns die Struktur der Tags an. Ich glaube, dass Freunde mit einigen Grundkenntnissen in HTML in der Lage sein sollten, es leicht zu verstehen.
Angenommen, wir möchten nun eine Tabelle einfügen und diese mithilfe von CSS um 10 Pixel nach unten verschieben. Fügen Sie zunächst eine Tabelle ein und bewegen Sie dann den Cursor in die Tabelle. Zu diesem Zeitpunkt sollten Sie die Wörter <body><table><tr><td> im Tag-Selektor sehen. Klicken Sie dann mit der rechten Maustaste auf die Tabellenbezeichnung und Sie sehen vier Optionen. Tags löschen, Tags bearbeiten, Klassen festlegen und IDs festlegen.
Tag löschen: Tag löschen. (Es gibt einige spezielle Tags, die nicht gelöscht werden können. Zum Beispiel: <table>, <tr>, <td>, <body>...)
Tags bearbeiten: Attribute zu Tags hinzufügen, Attribute ändern usw.
Klasse festlegen: Fügen Sie diesem Tag eine Klasse hinzu. (d. h. Kategorien von CSS)
ID festlegen: Fügen Sie diesem Tag eine ID hinzu. (d. h. CSS-ID)
Hier bearbeiten wir das Tag und fügen dann am Ende das Attribut style="margin-top:10px" hinzu, was der normalen Methode zum Schreiben von Quellcode entspricht. Drücken Sie dann die Eingabetaste. Die Bearbeitung ist abgeschlossen. Wenn Sie den Effekt in Dreamweaver nicht sehen können, verwenden Sie bitte den Browser zur Vorschau.
Es gibt noch einen anderen Weg, der Ihnen gefallen könnte. Wählen Sie Fenster → Tag-Inspektor. Wenn Sie ein Tag auswählen, werden hier alle Attribute des aktuell ausgewählten Tags angezeigt. Sie können hier auch schnell bearbeiten. Die hier eingegebenen Attribute müssen keine Anführungszeichen enthalten. Drücken Sie nach der Bearbeitung die Eingabetaste, um zu bestätigen.
Hier verraten wir Ihnen nur die Methode und hoffen, dass jeder davon profitieren kann.