Dreamweaver ist ein hervorragender WYSIWYG-Editor. Wenn Sie jedoch nicht daran interessiert sind, Webseiten in einer Umgebung "Was Sie sehen, was Sie erhalten" zu schreiben, können Sie Dreamweaver trotzdem verwenden, da er auch ein hervorragender Texteditor ist. Es gibt jedoch eine Reihe von Funktionen, die im Dreamweaver-Code-Editor auf der Strecke bleiben, da der Hauptfokus auf der "Entwurfsansicht" oder dem WYSIWYG-Editor des Produkts liegt.
So gelangen Sie in die Dreamweaver-Codeansicht
Wenn Sie Dreamweaver zuvor noch nie als HTML-Editor verwendet haben, haben Sie möglicherweise noch nicht einmal die drei Schaltflächen oben auf der Seite bemerkt: "Code", "Split" und "Design". Dreamweaver wird standardmäßig im Modus "Entwurf" oder im WYSIWYG-Modus gestartet. Es ist jedoch einfach, den HTML-Code anzuzeigen und zu bearbeiten. Klicken Sie einfach auf Code Taste. Oder gehen Sie zum Aussicht Menü und wählen Sie Code.
Wenn Sie nur lernen, wie Sie HTML schreiben, oder Sie ein Gefühl dafür bekommen möchten, wie sich Ihre Änderungen auf Ihr Dokument auswirken, können Sie die Codeansicht und die Entwurfsansicht gleichzeitig öffnen. Das Schöne an dieser Methode ist, dass Sie auch in beiden Fenstern bearbeiten können. So können Sie den Code für Ihr Image-Tag in HTML schreiben und dann die Entwurfsansicht verwenden, um ihn per Drag & Drop an eine andere Stelle auf der Seite zu verschieben.
Um beide gleichzeitig anzuzeigen:
- Klicke auf das Teilt Taste (zwischen Code und Design).
- In dem Aussicht Menü auswählen Code und Design.
Wenn Sie mit Dreamweaver vertraut sind, um Ihren HTML-Code zu bearbeiten, können Sie Ihre Einstellungen so ändern, dass Dreamweaver standardmäßig in der Codeansicht geöffnet wird. Am einfachsten ist es, die Codeansicht als Arbeitsbereich zu speichern. Dreamweaver wird im zuletzt verwendeten Arbeitsbereich geöffnet. Ist dies nicht der Fall, wechseln Sie einfach zum Menü Fenster und wählen Sie den gewünschten Arbeitsbereich aus.
Codeansichtsoptionen
Dreamweaver ist so flexibel, weil es viele Möglichkeiten gibt, es anzupassen und so zu arbeiten, wie Sie es möchten. Im Optionsfenster gibt es Codefarben, Code-Formatierungen, Codehinweise und Optionen zum Umschreiben von Code, die Sie anpassen können. Sie können jedoch auch einige spezielle Optionen in der Codeansicht selbst ändern.
Sobald Sie sich in der Codeansicht befinden, gibt es eine Optionen anzeigen Schaltfläche in der Symbolleiste. Sie können die Optionen auch anzeigen, indem Sie in gehen Aussicht Menü und Auswahl Codeansichtsoptionen. Die Optionen sind:
- Zeilenumbruch - Der HTML-Code wird so umbrochen, dass Sie ihn ohne horizontalen Bildlauf anzeigen können. Beachten Sie, dass bei dieser Option keine Wagenrückläufe in den Code eingefügt werden. Der Code wird nur angezeigt, um das Lesen zu erleichtern.
- Linien Nummern - Zeigt Zeilennummern entlang der Seite des Codes an. Es zeigt ein Zeilenumbruch-Symbol für Zeilen, die länger als das Ansichtsfenster umbrochen werden.
- Versteckte Charaktere - zeigt Sonderzeichen anstelle von Leerzeichen an, die auf einer Webseite angezeigt werden würden. So ersetzt ein Punkt ein Leerzeichen, ein Doppelpfeil ersetzt jede Registerkarte, und ein Pfeil oder eine Absatzmarke ersetzt jeden Zeilenumbruch.
- Markieren Sie Ungültigen Code - hebt falsches HTML hervor. Wenn Sie das gelbe Tag auswählen, erhalten Sie im Eigenschafteninspektor Hinweise zur Behebung.
- Syntaxfärbung - schaltet die Farbcodierung Ihres Codes ein oder aus. Sie ändern die Farben Ihrer Farbcodierung im Abschnitt Codefarbe der Voreinstellungen.
- Autom. Einzug - bewirkt, dass Ihr Code nach einem Wagenrücklauf automatisch eingerückt wird, wenn der Code darüber eingerückt ist. Sie können die Größe des Einzugs ändern, indem Sie die Tabulatorgröße im Abschnitt zur Codeformatierung der Voreinstellungen ändern.
Bearbeiten von HTML-Code in der Dreamweaver-Codeansicht
In der Code-Ansicht von Dreamweaver können Sie HTML-Code problemlos bearbeiten. Beginnen Sie einfach mit der Eingabe Ihres HTML-Codes. Dreamweaver bietet jedoch einige Extras, die über einen einfachen HTML-Editor hinausgehen. Wenn Sie ein HTML-Tag schreiben, geben Sie ein <. Wenn Sie direkt nach diesem Zeichen anhalten, zeigt Dreamweaver eine Liste mit HTML-Tags an. Diese werden als Codehinweise bezeichnet. Um die Auswahl einzugrenzen, beginnen Sie mit der Eingabe von Buchstaben. Dreamweaver schränkt die Dropdown-Liste auf das Tag ein, das Ihrer Eingabe entspricht.
Wenn Sie HTML noch nicht kennen, können Sie durch die Liste der HTML-Tags blättern und verschiedene auswählen, um zu sehen, was sie tun. Dreamweaver fragt Sie nach Attributen, wenn Sie ein Tag eingegeben haben. Zum Beispiel, wenn Sie eingeben <>Wird Dreamweaver auf die HTML-Tag, wobei die anderen Tags mit I beginnen. Wenn Sie fortfahren, indem Sie den Buchstaben eingeben mDreamweaver beschränkt es auf das Etikett.
Code-Hinweise enden jedoch nicht bei den Tags. Sie können Code-Hinweise verwenden, um Folgendes einzufügen:
- HTML-Attribute
- Klassen- und ID-Namen
- CSS-Eigenschaften
Wenn die Codehinweise nicht angezeigt werden, können Sie auf klicken Strg-Leertaste (Windows) oder Cmd-Leertaste (Macintosh), um sie anzuzeigen. Der häufigste Grund, warum ein Code-Hinweis möglicherweise nicht angezeigt wird, ist, wenn Sie vor dem Beenden des Tags zu einem anderen Fenster gewechselt haben. Weil Dreamweaver die Eingabe des Zeichens deaktiviert <Wenn Sie das Fenster verlassen und zurückkehren, müssen Sie die Codehinweise erneut starten.
Sie können das Code-Hinweis-Menü durch Drücken der Escape-Taste deaktivieren.
Nachdem Sie das öffnende HTML-Tag eingegeben haben, müssen Sie es schließen. Dreamweaver tut dies auf natürliche Weise. Wenn Sie das eingeben Tags schließen Option, die am besten Ihren Bedürfnissen entspricht.
Wenn Sie noch nicht bereit sind, Ihre Seiten in HTML zu bearbeiten, den Code jedoch beim Schreiben sehen möchten, sollten Sie den Code-Inspector ausprobieren. Dadurch wird der HTML-Code in einem separaten Fenster geöffnet. Es funktioniert genauso wie die Codeansicht und ist im Grunde ein abnehmbares Codeansichtfenster für das aktuelle Dokument.Um den Code-Inspector zu öffnen, gehen Sie zu Fenster Menü und wählen Sie Code Inspector oder drücken Sie die F10 Taste auf Ihrer Tastatur.
Dreamweaver formatiert den HTML-Code so, wie er angezeigt werden soll. Wenn Sie zum Beispiel drei Leerzeichen verwenden, um IMG-Tags einzurücken, aber niemals einzurücken, können Sie diese Formatierungsinformationen in den Optionen zum Umschreiben von Code angeben. Dann gehst du zum Befehle Menü und wählen Sie Quellformatierung anwenden. Dies ist eine großartige Möglichkeit, um Code, der von einer anderen Person geschrieben wurde, in ein Ihnen bekanntes Format zu bringen.
Eine Funktion, die viele HTML-Codierer nicht kennen oder nicht verwenden, ist die Möglichkeit, HTML-Code zu reduzieren. Dadurch werden die Tags nicht aus dem Dokument entfernt, sondern nur aus der Ansicht entfernt, sodass sie nicht von dem ablenken, an dem Sie gerade arbeiten. So reduzieren Sie Ihren Code:
- Wählen Sie den Codeabschnitt aus, den Sie ausblenden möchten.
- In dem Bearbeiten Menü wählen Auswahl ausblenden von dem Code Zusammenbruch Untermenü
Eine einfachere Möglichkeit besteht darin, den Code auszuwählen und dann auf die in der Zwischensteg erscheinenden Codesymbole zu klicken. Sie können auch mit der rechten Maustaste auf den ausgewählten Code klicken und wählen Auswahl ausblenden.
Wenn du alles verstecken willst außer Was markiert ist, wählen Sie Außerhalb der Auswahl reduzieren in einer der obigen Methoden.
Um ausgeblendeten Code zu erweitern, doppelklicken Sie einfach darauf. Dies öffnet den Code und wählt ihn aus. Dann können Sie die Auswahl verschieben oder löschen oder weitere Tags hinzufügen.
Sie können die Funktion zum Reduzieren und Erweitern jederzeit auf Seiten verwenden, auf denen Sie die externe Vorlage nicht bearbeiten möchten. Sie wählen einfach den Inhaltsbereich aus, den Sie bearbeiten möchten, und verkleinern ihn außerhalb. Dann schreibe dein HTML. Sie können die Seite weiterhin anzeigen Design Anzeigen oder Vorschau in einem Browser. Der ausgeblendete Code wird nicht aus dem Dokument entfernt, sondern nur vor der Ansicht ausgeblendet. Sie können es auch verwenden, wenn Sie an einer Reihe von Elementen arbeiten. Wenn Sie eine abgeschlossen haben, reduzieren Sie sie. Sie wissen, dass Sie fertig sind, wenn kein Code angezeigt wird.
