10 nützliche Tipps und Tricks für Dreamweaver für Anfänger

Ein Dreamweaver-Benutzer wird mit Sicherheit sagen, was für ein Kraftpaket es ist. Vollgepackt mit vielen Features und Optionen, die zu den bekanntesten IDE (Integrated Development Environment) auf dem heutigen Markt zählen. Es erfüllt möglicherweise nicht die Kriterien, die einige Entwickler gefordert haben. Dreamweaver bietet jedoch unbestreitbar eine Reihe von Tools für Entwicklung, Zusammenarbeit und Codierung. Diese Optionen und Tools sind unter Schichten bedauerlicher, weniger intuitiver Menüs versteckt, weshalb wir im heutigen Post Tutorials anbieten.

Wir zeigen Ihnen einige der leistungsstärksten Funktionen von Dreamweaver, die Ihnen den schnellen Zugriff erleichtern, sowie viele andere hilfreiche Tricks, die Ihre Entwicklungszeit verkürzen und Ihre Codequalität erheblich verbessern. Vollständige Liste nach dem Sprung.

1. Dynamische Ansicht mit “Liveübertragung”

Wir wissen bereits, dass DW eine statische Ansicht unserer geöffneten Dateien bietet "dynamische Ansichten" einer Anwendung wie WordPress?

Zuerst müssen wir es tun sagen DW welche Einstellungen verwendet werden sollen, um unser zu präsentieren"dynamische Ansichten" korrekt. Wählen Sie dazu HTTP-Request-Einstellungen von dem Ansicht> Live-Ansichtsoptionen Menü, dann geben Sie die ein ERHALTEN oder POST Parameter, die Sie benötigen, um Ihre Anwendung korrekt anzuzeigen.

Dann durch Umschalten auf Liveübertragung in DW ersetzt es das alte Designansicht Bereich mit einem pixelgenauen Live-WebKit-Rendering Ihrer Seite; mit Live-Javascript, DOM-Manipulationen, Datenbankabfragen, serverseitigem Code und gerendertem CSS anstelle der Platzhaltersymbole Designansicht.

2. "Code Navigator" ist der Firebug von DW

Um noch einen Schritt weiter zu gehen, geht es um die Code Navigator und wenn in der Liveübertragung ALT-Klick (Befehlstaste-Wahl-Klick für Mac) an einer beliebigen Stelle des Fensters zeigt sofort den Code an, mit dem das Element gerendert wurde. Ähnlich wie Sie es derzeit in Firefox / Firebug sehen.

3. JavaScript einfrieren

Aufgrund der dynamischen Natur von Ajax müssen wir oft mit einer Seite interagieren, auf der bestimmte Elemente nicht gerendert werden oder beim Laden der ersten Seite verfügbar sind. Dies sind Elemente, die einige Zeit nach dem Laden der Seite in die Seite eingefügt werden. Hier ist ein Beispiel:

Möglicherweise möchten Sie den Stil einer QuickInfo ändern, die vollständig in JavaScript implementiert ist. Vor dem heutigen Tag müssten Sie methodisch Ihren Weg durch Ihre Skripts suchen, um herauszufinden, was wo erstellt wurde.

Versuchen Sie stattdessen Folgendes:

Rendern Sie Ihre Seite in Liveübertragung, dann schlagen F6 Sie können JavaScript jederzeit einfrieren, sodass Sie den Code, der sich auf dynamische Elemente auf der Seite bezieht, anvisieren und analysieren können.

4. Der nächste beste Freund von Live View - "Live Code"

Beim Benutzen Liveübertragung, Sie können auch einschalten Live-Code. Live-Code aktualisiert Ihren Code, wenn Sie mit der Maus auf Elemente und Elemente in klicken und darauf klicken Live View-Fenster!

5. Automatische JavaScript-Vervollständigung

Dreamweaver bietet eine intelligente und vollständige Vervollständigung von HTML- und CSS-Code, aber was ist mit Javascripts? Wenn Sie jQuery oder Prototype in Dreamweaver codieren, sollten Sie wissen, dass es API-Erweiterungen gibt, die die Javascript-Code-Vervollständigung ermöglichen. Es reduziert den Schreibaufwand und kann für schnelle Codierer sehr nützlich sein.

Klicken Sie hier, um mehr zu erfahren oder herunterzuladen:

jQuery-API-Erweiterung für Dreamweaver
Prototyp-API-Erweiterung für Dreamweaver

6. Verschönern Sie die Codes im Handumdrehen

Sieht Ihre Codepage wie unorganisierte, unordentliche Codezeilen aus? Verwenden Sie die Quellformatierung anwenden Feature und formatieren Sie es genau nach Ihren Wünschen. Um sie schnell zu löschen, klicken Sie auf Formatieren Sie den Quellcode Symbol am unteren Rand des Symbolleiste Kodierung (Bearbeiten> Symbolleisten> Codierung) und wählen Sie Code Format-Einstellungen um Ihre bevorzugte Formatierung einzustellen.

Sie können auch auf die Formatierungsoption zugreifen Befehle> Quellformatierung anwenden oder wenden Sie es nur auf einen ausgewählten Codeblock an, indem Sie die Option auswählen Anwenden der Quellformatierung auf die Auswahl Möglichkeit.

7. Holen Sie sich Widgety

Klicken Sie einfach auf Dreamweaver-Symbol erweitern (es sieht aus wie ein Zahnrad) in Ihrer Anwendungsleiste und wählen Sie Suchen Sie nach Web-Widgets. Sie gelangen so zum Adobe Exchange, wo Sie zusätzliche Widgets von Anbietern wie Yahoo !, JQuery und viele andere finden können.

8. Subversion und Dreamweaver

Und ja, Dreamweaver unterstützt Subversion (SVN). Für Entwickler, die SVN verwenden, um die Revisionskontrolle ihres Projekts aufrechtzuerhalten, könnte dies eine gute Nachricht sein. Dreamweaver-Entwickler Andrew Voltmer diskutieren So können Sie Subversions mit Dreamweaver verwenden.

9. Keine redundanten Styles mehr

Viele Leute verwenden Dreamweaver als eine Möglichkeit, Inhalte visuell zu aktualisieren, wie beispielsweise ein Textverarbeitungsprogramm. Vor Dreamweaver CS4 kann dies zu redundanten CSS-Regeln führen, wie z .Klasse 1, .Klasse 2, und so weiter. Wechseln Sie in Dreamweaver CS4 einfach zwischen Eigenschafteninspektor zu HTML Modus (klicken Sie auf das HTML-Symbol auf der linken Seite des Inspektors), und Sie verabschieden uns von all dem überflüssigen CSS, indem Sie nur das entsprechende HTML-Markup einfügen.

10. Formularvalidierung leicht gemacht

Möchten Sie Ihre Formularfelder überprüfen, sind Sie jedoch besorgt, dass Sie von Grund auf neu erstellen müssen? Keine Bange. Wählen Sie einfach ein vorhandenes Formularelement aus, z. B. ein Textfeld, und wenden Sie ein an Spry-Validierungs-Widget von dem Einfügen> Spry-Menü. Kontrollieren Sie dann die Validierungsanforderungen wie Mindest- oder Maximalzeichen direkt aus der Eigenschafteninspektor.

Bonus: 3 weitere

11. Einfach auf verwandte Dateien zugreifen

Wenn Sie eine HTML- oder PHP-Datei öffnen, sehen Sie oben im Dokumentfenster eine Reihe von abhängigen Dateinamen wie CSS, Javascript und sogar enthaltene Dateien für PHP. Sie können problemlos zu diesen Dateien wechseln, Änderungen vornehmen und speichern, ohne sie zu öffnen. Wenn Sie in der Leiste "Verwandte Dateien" auf eine Datei klicken, wird deren Quelle in der Codeansicht und die übergeordnete Seite in der Entwurfsansicht angezeigt. Oder verwenden Sie den Code Navigator, um schnell auf CSS-Quellcode zuzugreifen, der sich auf Ihre aktuelle Auswahl auswirkt.

12. Überprüfen Sie die Browserkompatibilität

Öffnen Sie das Dokument, das Sie auf Kompatibilität prüfen möchten. Suchen Sie in derselben Menüleiste, in der Sie auf die Ansichten Code / Split / Design zugreifen, ganz rechts nach 'Seite überprüfen' Taste.

Wenn Sie darauf klicken, wird ein Dropdown-Menü angezeigt. Wählen Sie 'Überprüfen Sie die Browserkompatibilität'. Das Ergebnisfenster der Browserkompatibilität Im unteren Bereich des Fensters werden alle Probleme angezeigt, die Sie ansprechen müssen.

Hinweis: Neue Versionen von IE auf dem Mac werden NICHT geprüft! Um auszuwählen, welche Browser zum Testen verwendet werden sollen, wählen Sie Seite überprüfen > die Einstellungen aus dem menü.

13. Vorschau von PHP-Seiten

Mit Dreamweaver können Sie PHP-Codes in der Software ausführen und in der Vorschau anzeigen. So wird es eingerichtet.

Fertig machen

Zuerst auswählen Seite? ˅ -> Neue Seite von der oberen navigation.
Sie werden beide sehen Basic und Erweiterte Site-Definition Options-Registerkarten. Fahren wir fort, indem Sie das auswählen Registerkarte Erweiterte Site-Definition.
Geben Sie einen Ordnernamen für die Site in das entsprechende Feld ein (für dieses Beispiel verwenden wir "myphp" als Ordnernamen.).
Erstellen Sie einen weiteren Ordner mit dem Namen "images", indem Sie dessen Namen in das Feld "Default Images Folder" eingeben.
Unter dem Lokale Info, Geben Sie die folgenden Werte in die Felder ein:
- Site-Name: der Name der Site. Nur in Dreamweaver verwenden
- Lokaler Stammordner: Dies ist der Name der Site, an der Sie arbeiten werden. Achten Sie darauf, die Sites so zu benennen, dass Konflikte minimiert oder Namen verwirrt werden.
- Standardordner für Bilder: Dies ist optional, es wird jedoch empfohlen, es jetzt zu erstellen, da die meisten Websites in gewissem Umfang Bilder verwenden. Hier 'sucht' DW während der Kodierungsphase, um Bilder in Ihre Dokumente einzufügen.
- Links relativ zu: Hier wird festgelegt, wie die Dokumentverknüpfung in Dreamweaver behandelt wird. Sie können entweder Dokument oder Stamm auswählen. Die Unterschiede zwischen den beiden sind:
  - Dokument relativ - Fügt einen Pfad relativ zu der Datei, die Sie gerade bearbeiten, und dem Element ein, mit dem verknüpft wird.
  - Root Relative - Verwendet /, wodurch das Dokument / die Datei in Bezug auf den ROOT-Ordner verknüpft wird.
  - Eine andere Alternative besteht darin, den Serverkonfigurationsdateien Konfiguration hinzuzufügen. Da es sich um eine fortgeschrittenere Aufgabe handelt, werden wir jetzt nur noch Dokumentrelativ verwenden.
- HTTP-Adresse: Geben Sie den Site-Stammordner für Ihr Projekt ein
- Links, bei denen die Groß- und Kleinschreibung beachtet wirdHinweis: Dreamweaver überprüft, ob bei einer Datei im Projekt beim Hochladen auf den Server die Groß- und Kleinschreibung beachtet werden kann. Benachrichtigungen werden angezeigt, wenn Sie Folgendes verwenden: Site -> Links prüfen. Sie können es aktiviert lassen, wenn Sie möchten. Ich persönlich lasse es nicht aktiviert, da ich Dateien immer in Kleinbuchstaben benenne. Großbuchstaben werden nicht empfohlen.
- Zwischenspeicher: Aktivieren Sie das Kontrollkästchen Cache aktivieren.
In dem Remote Info Richten Sie entweder Ihren FTP- oder einen anderen Zugriff auf einen Remote-Server ein oder lassen Sie den Zugriff auf Keine.
In dem Server testen Wählen Sie auf der Seite die Option aus, die sich auf den Dateityp / das zu testende System bezieht.
Versionskontrolle wird für dieses Beispiel nicht verwendet. Sie können es also leer lassen, wenn Sie nicht damit vertraut sind.
Cloaking ermöglicht das Platzieren von .psd-, .fla- und anderen Quelldateien in Ihrem Site-Ordner, und DW ignoriert sie beim Hochladen / Aktualisieren Ihrer Site.
Design-Hinweise sind ideal für ein Webdesign-Team, da es die Änderungen an den Dateien speichert. Es ist standardmäßig geprüft und es ist gut, wenn wir diesen Weg verwenden.
Verlassen Spalte der Dateiansicht, Beitragen, und Vorlagen als Standard.
Das Spry Die Seite zeigt einfach auf den Spry-Ordner, der automatisch in Dreamweaver enthalten ist. Das muss nicht geändert werden. Wenn alle Einstellungen abgeschlossen sind, klicken Sie auf OK.

Vorschau von PHP in Dreamweaver

Öffnen Sie nun eine PHP-Datei und nehmen Sie die erforderlichen Änderungen vor. Um diese Datei einfach in Dreamweaver anzuzeigen Drücken Sie die Taste F12 Die Ergebnisse werden in Ihrem Standardbrowser angezeigt. Sie können den verwendeten Browser ändern Bearbeiten -> Einstellungen -> Vorschau im Browser. Dies ermöglicht eine kürzere Bearbeitungszeit bis zur Vorschau, und Sie müssen keine langen URLs in Ihre Browserleiste eingeben oder eine andere Serversoftware verwenden, um die PHP-Dateien zu rendern. Dies alles spart Zeit!

Das ist alles. Happy Dreamweaver'ing :-)

Anmerkung des Herausgebers: Dieser Beitrag wird von geschrieben Jesse Matlock für Hongkiat.com. In den letzten 6 Jahren hat sich Jesse mit UI-Design, App-Entwicklung und Web-Trends befasst. Er ist Gründer und Designleiter eines kleinen, wenn auch sehr talentierten Entwicklungsteams, das sich auf die Entwicklung von App-Anwendungen konzentriert.