10 einfache, aber nützliche Dreamweaver-Tipps und -Tricks für Anfänger

Veröffentlicht: 2019-06-27

Adobe Dreamweaver ist ein leistungsstarkes Tool für Webdesigner. Dreamweaver bietet eine visuelle Designoberfläche und einen Code-Editor zum Entwickeln von Websites. Obwohl es sowohl Vor- als auch Nachteile hat, ermöglicht es Ihnen die breite Palette an Funktionen, Websites effektiv zu erstellen.

Inhaltsverzeichnis ausblenden
1. Löschen Sie die Zeilenumbrüche:
2. Denken Sie daran, eine Site zu definieren:
3. Erhöhen Sie die Schriftgröße Ihres Codes:
4. CSS-Hintergrund ausschalten Kurzschrift:
5. Stile mit CSS Designer kopieren:
6. Beseitigen Sie die Navigationsleiste:
7. Verwalten Sie Ihre Dateien:
8. Entscheiden Sie sich für den Tag-Selektor:
9. Verwenden Sie Schnipsel:
10. WordPress und Dreamweaver verbinden:

Hier sind 10 einfache, aber nützliche Dreamweaver-Tipps und Tricks für Anfänger.

1. Löschen Sie die Zeilenumbrüche:

Beim Kopieren von Text aus einem Dokument, einer E-Mail oder einer Word-Datei nach Dreamweaver kommt es zu Zeilenumbrüchen am Ende von Absätzen oder Zeilen. Das Link-Break-Zeichen <br> signalisiert das Zeilenende, sodass jeder Text danach in der darunter liegenden Zeile angezeigt wird. Diese Zeichen sind unsichtbar und daher schwer zu entfernen. Obwohl Dreamweaver diese Zeichen normalerweise nicht hervorhebt, können Sie die Einstellungen im Einstellungsmenü so ändern, dass das Programm ein kleines gelbes Symbol anzeigt, das Zeilenumbrüche anzeigt. Sobald die Zeilenumbrüche sichtbar sind, können Sie sie einfach löschen.

2. Denken Sie daran, eine Site zu definieren:

Die Arbeit mit Dreamweaver wird oft mit der Arbeit mit einem Word-Dokument verwechselt. Beim Entwerfen einer Website geht es jedoch nicht um das Erstellen einer Datei, sondern um das Erstellen einer Website mit einer Sammlung zusammenhängender Dateien wie Bildern, JavaScript-Dateien, Webseiten und CSS-Dateien. Benutzer, die dies nicht verstehen, vergessen oft, wie wichtig es ist, eine Website einzurichten. Dreamweaver bietet einen einfach einzurichtenden Site-Prozess. Es bietet Informationen über den Speicherort der Dateien Ihrer Site und lässt Sie eines der vielen Dreamweaver-Verwaltungstools auswählen. Diese Tools übertragen Ihre Datei auf Ihren Webserver, überprüfen fehlerhafte Links und erstellen eine Website mit Vorlagen.

3. Erhöhen Sie die Schriftgröße Ihres Codes:

Mit der Dreamweaver-Funktion zum Anpassen der Schriftgröße können Sie die Codegröße in wenigen einfachen Schritten erhöhen. Um Ihre Schriftgröße zu erhöhen, wählen Sie zuerst „Dreamweaver“ > „Einstellungen“, klicken Sie dann auf die Kategorie „Schriftarten“, wählen Sie die neue Größe aus und klicken Sie auf „OK“. Das hilft Ihnen, den Code gut lesbar zu machen und Sie können lange an der Entwicklung Ihrer Website arbeiten, ohne Ihre Augen zu belasten.

4. CSS-Hintergrund ausschalten Kurzschrift:

Eines der Features von CSS ist die Hintergrundeigenschaft. Mit dieser Funktion können Sie Ihrem Hintergrund Farbe oder Bilder hinzufügen. Die Shorthand-Eigenschaft von Dreamweaver verkürzt den dreizeiligen Code auf nur eine Zeile, die ein Bild, eine Farbe und eine Wiederholungseigenschaft definiert. Dies kann sicherlich das Definieren von Hintergrundeigenschaften erleichtern, aber wenn Sie eine Eigenschaft in der Kurzform belassen, behandelt der Webbrowser sie als „keine“. Wenn Sie beispielsweise beim Ändern von Hintergründen nur die Bildeigenschaft angeben, entfernt der Webbrowser die vorhandene Farbe aus dem vorherigen Hintergrund. Daher ist es besser, die CSS-Hintergrundkurzschrift auszuschalten, um dieses Problem zu vermeiden.

5. Stile mit CSS Designer kopieren:

Mit CSS Designer können Sie die Stile Ihrer Webseite optisch aufwerten. Wenn Sie weitere Funktionen des CSS-Designers verwenden möchten, klicken Sie mit der rechten Maustaste auf einen beliebigen Selektor, um Kopier- oder Duplizierungsvorgänge zu verwenden. Mit diesen Optionen können Sie Stile von einem Selektor zu einem anderen kopieren. Diese Stile umfassen Hintergrund, Text, Animation oder Rahmen. Wenn Sie einen gesamten Selektor kopieren möchten, verwenden Sie den Standardbefehl Duplizieren oder Duplizieren in Medienabfrage für einen gezielten Ansatz. Diese Abkürzungen sparen Ihnen viel Zeit und sorgen für ein konsistentes Styling.

6. Beseitigen Sie die Navigationsleiste:

Adobe Dreamweaver CS5 wird mit einer Browser-Navigationssymbolleiste geliefert. Diese Symbolleiste wurde für die Verwendung mit der Live-Ansichtsoption von Dreamweaver erstellt. Beide Optionen finden Sie im Dokumentfenster. Die Live-Ansicht wird verwendet, um eine Vorschau Ihrer Webseite anzuzeigen. Bei einer Live-Ansicht können Sie auf den Link klicken und zu einer bestimmten Seite wechseln. Die Navigationssymbolleiste zeigt die Position der neuen Seite an und ermöglicht Ihnen ein einfaches Navigieren zwischen den Seiten. Sie können diese Symbolleiste ausblenden, wenn sie nicht verwendet wird, indem Sie die Browser-Navigationsoption im Abschnitt Ansicht > Symbolleisten deaktivieren.

7. Verwalten Sie Ihre Dateien:

Alle Dateien sind im Bedienfeld „Dateien“ vorhanden, wenn Sie eine Site mit Dreamweaver einrichten. Sie können dieses Dateifenster für viele Funktionen verwenden, z. B. umbenennen, verschieben und den Namen der Datei hervorheben. Dies ist wahrscheinlich üblich und Sie wissen vielleicht alles, aber Webseiten unterscheiden sich von normalen Dateien. Webseiten haben Bilder, Links zu anderen Webseiten und CSS-Stile aus einer externen Stylesheet-Datei. Das normale Umbenennen eines Bildes, einer Webseite oder einer CSS-Datei über den Windows Explorer kann zu fehlerhaften Links führen. Wohingegen Dreamweaver es Ihnen ermöglicht, Links automatisch zu aktualisieren, wenn Sie eine Datei über das Dateibedienfeld verschieben oder umbenennen. Auf diese Weise gibt es keine defekten Links.

8. Entscheiden Sie sich für den Tag-Selektor:

Beim Anwenden des CSS-Klassenstils kann das präzise Hinzufügen oder Entfernen des Tags schwierig sein. Für die Auswahl präziser Zeilen ist der Tag-Selektor von Dreamweaver am besten geeignet. Der Tag-Selektor befindet sich unten links im Dokumentfenster. Dieser Selektor zeigt alle HTML- und anderen Tags, die um den Text herum vorhanden sind. Sie können bestimmte Tags auswählen, indem Sie auf ein verfügbares Tag in der Tag-Auswahlleiste klicken. Das hervorgehobene Tag zeigt an, dass das Tag ausgewählt ist.

9. Verwenden Sie Schnipsel:

Dreamweaver stellt Ausschnitte bereit, die Kernstücke des Codes sind, die viel Zeit sparen können. Snippets werden über Creative Cloud synchronisiert, wodurch sichergestellt wird, dass sie auf jedem System verfügbar sind. Sie können die am häufigsten verwendeten als Tastenkürzel zuweisen. Wenn Sie Tastenkombinationen bearbeiten möchten, öffnen Sie das Tastaturkürzel-Design und duplizieren Sie den Standardsatz. Wählen Sie dann die Snippet-Kategorie unterhalb des Befehlsbereichs aus, um Ihre Favoriten auszuwählen. Sie finden dann eine Liste aller verfügbaren Snippets, einschließlich der von Ihnen erstellten. Der schwierigste Teil besteht darin, herauszufinden, welche Tastaturkombinationen nicht verwendet werden. Dies kann jedoch durch die Verwendung eines Modifikators gelöst werden.

10. WordPress und Dreamweaver verbinden:

Dreamweaver und WordPress sind ein tolles Team. Sie können WordPress-Seiten mit dem dynamischen Datei-Toolset von Dreamweaver entwerfen und ändern. Dieses Toolset enthält benutzerdefinierte Filter, dynamisch verknüpfte Dateien und standortspezifische Codehinweise. Der schwierige Teil besteht darin, herauszufinden, wie man mit Dreamweaver mit anderen Site-Seiten arbeitet. Sie sollten zuerst mit der index.php-Datei beginnen, die im Stammverzeichnis der WordPress-Site vorhanden ist, und von dort aus navigieren. Sie können den Pfad direkt zur Webadresse hinzufügen oder die Dreamweaver-Funktion verwenden, um auf einen Link zu klicken. Nachdem die Seite angezeigt wird, befinden sich CSS und andere Tools in Dreamweaver in Ihrer Kontrolle.

Adobe Dreamweaver eignet sich hervorragend zum Erstellen einer Website. Neben grundlegenden Funktionen wie Code-Vervollständigung, Code-Komprimierung und Syntaxhervorhebung verfügt es über einige erweiterte Funktionen wie Code-Introspektion und Echtzeit-Syntaxprüfung. Diese genannten Tipps helfen Ihnen dabei, Ihre Website effizienter zu erstellen. Wenn Sie nach Tools suchen, um eine Website ohne viel Codierung zu erstellen, sehen Sie sich diese Tools zum Erstellen von Websites an.