10 Hacks über Dreamweaver – Der beste Code-Editor für Webentwickler
Der Dreamweaver ist die Mutter aller webbasierten Aktivitäten im Internet. Für die meisten Menschen ist Dreamweaver nur ein Tool zum Erstellen von Websites, aber nur die Profis wissen, dass Dreamweaver das Kraftpaket ist.
Dreamweaver hat viele Funktionen und Optionen, die es zum beliebtesten Tool der Webentwickler machen. Zweifellos verfügt diese Software über die bekannteste IDE (Integrated Development Environment), die keine andere Webentwicklungssoftware auf dem aktuellen Markt hat. Entweder die Entwicklungs-, Kollaborations- und Codierungswerkzeuge, der Dreamweaver bietet den Webentwicklern eine anständige Auswahl zum Spielen. Aus diesem Grund ist es für Webentwickler-Anfänger wichtig zu wissen, wie sie die Nutzung von Dreamweaver maximieren können.
Alle Aspekte, die erfahrene Webentwickler von gewöhnlichen Webentwicklern unterscheiden, sind unter Schichten von bedauerlichen intuitiven Menüs verborgen, weshalb es neuen Webentwicklern schwer fällt, ihre Fähigkeiten zu verbessern. In diesem Artikel werde ich Ihnen jedoch die verborgenen und leistungsstarken Funktionen von Dreamweaver zeigen, die sehr wichtig sind, um die Anforderungen des heutigen Marktes zu erfüllen. Dieser Artikel hilft Ihnen, schnell auf diese Funktionen zuzugreifen, und stellt Ihnen die zehn hilfreichsten Hacks zur Verfügung, die die Qualität Ihrer Arbeit und Ihre Codierung erheblich verbessern.
1 Dynamische Ansicht und Live-Ansicht:
Jeder weiß, dass der Dreamweaver die statische Ansicht unserer geöffneten Dateien anbietet. Allerdings bleibt die Frage nach den dynamischen Ansichten einer Anwendung wie WordPress unbeantwortet. Um die dynamische Ansicht festzulegen, müssen wir Dreamweaver die Einstellungen mitteilen, die für die dynamischen Ansichten verwendet werden sollen. Um dies einzustellen, gehen Sie zu den HTTP-Anforderungseinstellungen, indem Sie auf Ansicht > Live-Ansicht > Optionsmenü klicken, und geben Sie dann das GET oder POST ein, das erforderlich ist, um Ihre Anwendung korrekt anzuzeigen.
Schalten Sie danach die Live-Ansicht in Dreamweaver um, die das Design-Ansicht-Bedienfeld in das Live-, pixelgenau gerenderte WebKit Ihrer Seite ersetzt. Vervollständigen Sie es dann mit Live-Javascript, DOM-Manipulationen, Datenbankabfragen, serverseitigem Code und gerendertem CSS anstelle des Platzhaltersymbols aus der Design View-Oberfläche.
Die Navigation ist die eine Seitenkomponente in der responsiven Website, die die Anpassungsfähigkeit haben sollte, um die Anforderungen kleinerer Bildschirme zu erfüllen, für die Bootstrap sehr hilfreich sein kann. Mit Bootstrap können Sie Ihre Navigationsleiste einfach einrichten und vom horizontalen Streifen zum vertikalen Panel wechseln. Der Grund dafür ist, dass Dreamweaver die gesamte Navigationsflexibilität von Bootstrap unterstützt und die Funktion einfach zu verwenden ist, wenn es darum geht, eine effektive, reaktionsschnelle Website zu entwickeln.
Um Ihnen einen schnellen Überblick zu geben, folgt eine kurze Demo zur Verwendung von Bootstrap in Ihrer Entwicklung.
Die Beschleunigung der Navigation mit Bootstrap beginnt mit dem neuen Dokumentdialog von Dreamweaver. Klicken Sie einfach auf die Schaltfläche Bootstrap Framework im Dialogfeld „Neues Dokument” und aktivieren Sie auch das Kontrollkästchen für die Option „Pre-Build-Layout”, um die voll funktionsfähigen Navigationsoptionen zu verwenden, z.
- Standardmäßige, ungeordnete und semantisch korrekte Linkliste.
- Ein Bereich für die Logoplatzierung, um das Markenimage zu platzieren.
- Bereit, die Schaltfläche „Senden” und das Suchfeld zu aktivieren.
- Voreinstellungen für Dropdown-Menüs für Unternavigationselemente und vervollständigen Sie es mit den Trennlinien.
- Linke und rechte Abschnitte, die bei Bedarf ausgerichtet werden können.
- Eingebaute Reaktionsfähigkeit.
Wenn Sie es schwierig finden, gibt es eine andere Option. Mit Dreamweaver können Sie die benutzerdefinierte Navigationsleiste erstellen. Wenn Sie die dunkle Palette bevorzugen, fügen Sie einfach die Klasse .navbar-inverse zu Ihrer hinzu
Schild. Damit kann man sogar spielen. Wenn Sie Ihre Navigation immer über der Seite anzeigen möchten, geben Sie .navbar-fixe-top ein. Wenn Sie es unten anzeigen möchten, geben Sie .navbar-fixed-bottom ein. Alle diese Bootstrap-Klassen sind Standard, und die Dreamweaver-Codehinweise unterstützen diese Codierung ebenfalls, sodass Sie nicht die gesamte Codierung im Auge behalten müssen. Sie müssen nur .navbar in die Elementanzeige eingeben, und Sie erhalten die Popup-Liste, in der Sie Ihre gewünschte Option auswählen können.
3 JavaScript einfrieren:
Der Ajax hat eine sehr dynamische Natur. Aus diesem Grund müssen wir oft mit der Seite mit nicht verfügbaren oder nicht gerenderten Elementen beim Laden der ersten Seite interagieren. Diese Elemente könnten nach einiger Zeit des Ladens in die Seite eingefügt werden, weshalb sie beim ersten Laden nicht angezeigt werden. Wenn Sie beispielsweise das Design des Tooltips ändern möchten, der vollständig in JavaScript implementiert ist, haben Sie sich früher methodisch durch Ihre Skripts gesucht, um herauszufinden, welches Element wo erstellt wurde. Anstatt die Skripte zu durchsuchen, versuchen Sie Folgendes.
Bringen Sie Ihren Dreamweaver in die Live-Ansicht und rendern Sie Ihre Seite. Drücken Sie dann die F6-Taste, um das JavaScript jederzeit einzufrieren, sodass Sie jeden Code eines beliebigen dynamischen Elements auf der Seite analysieren und anvisieren können. Dies hilft Ihnen nicht nur dabei, den genauen Code des dynamischen Elements zu ermitteln, sondern beschleunigt auch Ihre Entwicklung, indem die Zeit für die Suche nach Code innerhalb der dynamischen Website verkürzt wird.
4 Code hervorheben:
Ein Skript zum Codieren kann sehr verwirrend sein, wenn Sie nicht daran gewöhnt sind, jeden Tag und jede Nacht komplexe Codierungen zu sehen. Hier hilft Ihnen die Hervorhebung der Codes, Trennungen im gesamten Skript zu erstellen. Anstatt Ihre Augen mit der Blutung zu bewegen, hat Dreamweaver eine Funktion, die die Codierung hervorhebt, die Ihnen hilft, sie zu lesen. Öffnen Sie dazu die Voreinstellungen von Dreamweaver und schalten Sie den Abschnitt „Technologievorschau” ein. Klicken Sie dann auf die Option zum Aktivieren der Codehervorhebung und lassen Sie Dreamweaver seine Arbeit tun. Möglicherweise müssen Sie jedoch Ihre Dreamweaver-Version aktualisieren, da diese Funktion nur in der neuesten Version verfügbar ist.
Sobald Sie die Hervorhebungsoption aktiviert haben, doppelklicken Sie einfach auf ein beliebiges Tag, und es werden alle Instanzen des Tags auf der aktuellen Seite hervorgehoben. Die Parameter sollten jedoch definiert werden. Dieses Tool eignet sich hervorragend zum schnellen Identifizieren und Aufrufen ähnlicher Elemente. Sobald Sie ein beliebiges Element markiert haben, verwenden Sie die Tastenkombinationen f3 auf dem PC, CMD-G auf dem Mac), um von einem markierten Element zum nächsten Element zu springen. Außerdem kann der Verschiebungsmodifikator zum vorherigen Abschnitt zurückgehen. Darüber hinaus funktioniert die Codehervorhebung auch mit den Attributen und Werten der HTML-Tags, sodass Sie die spezifischen Klassen leicht erkennen können.
5 Automatische JavaScript-Vervollständigung:
Dreamweaver ist eine großartige Plattform mit intelligenten und vollständigen HTML- und CSS-Codes. Einige Leute glauben jedoch, dass JavaScript nicht vollständig ist. Im Fall von jQuery oder Prototype sollten Sie in Dreamweaver wissen, dass es API-Erweiterungen gibt, die Javascript-Vervollständigungscodes bereitstellen. Diese Codes beschleunigen den Entwicklungsprozess, da durch die Verwendung dieser Codes keine ganzen Skripte eingegeben werden müssen und für schnelle Programmierer ziemlich praktisch sind.
Dreamweaver ist die einzige Webentwicklungssoftware, mit der Sie solche jQuery- und Prototyp-Vervollständigungscodes verwenden können, die jedem Webentwickler helfen, seine Aufgabe zu beschleunigen und mit minimalem Aufwand das bestmögliche Produkt zu produzieren.
6 Greifen Sie einfach auf die zugehörigen Dateien zu:
CSS und JavaScript sind die Namen unabhängiger Dateien, die Sie sehen, wenn Sie die HTML- und PHP-Dateien öffnen. Während Sie die PHP-Datei öffnen, können Sie sie oben im Fenster sehen. Da diese alle Optionen im Vordergrund platziert sind, können Sie einfach zu diesen Dateien wechseln und Änderungen vornehmen, die gespeichert werden können, ohne sie überhaupt zu öffnen. Wenn Sie auf eine beliebige Datei in der Leiste für zugehörige Dateien klicken, wird deren Quelle in der Codeansicht und die übergeordnete Seite in der Entwurfsansicht angezeigt.
Darüber hinaus können Sie jedes beliebige Codenavigator-Tool verwenden, um schnell auf den CSS-Quellcode zuzugreifen, der sich auf Ihre aktuelle Lösung auswirkt. Dieser schnelle Zugriff auf den CSS-Quellcode verkürzt die Programmierzeit und ermöglicht es dem Webentwickler, sich auf die verschiedenen Aspekte seines Entwicklungsprozesses zu konzentrieren.
7 Verschönern Sie die Codes im Handumdrehen:
Unorganisierte und chaotische Codezeilen zeigen, dass der Entwickler dieser Codierung nicht professionell und geschickt genug war, um die Codes in der richtigen Reihenfolge zu schreiben. Dies ist auch etwas, das bei der Suchmaschinenoptimierung der Website viel zählt. Es ist jedoch nicht so schwierig, Ihre Codes zu organisieren und zu verschönern, wie die Leute glauben. Mit der richtigen Kenntnis der Dreamweaver-Optionen können Sie Ihre Codes spontan organisieren. Verwenden Sie einfach die Option „Quellformatierung anwenden” und reformieren Sie sie genau nach Ihren Wünschen. Um Ihre Codierung sauber und ordentlich zu gestalten, klicken Sie unten in der Codierungssymbolleiste auf „Quellcode formatieren” und gehen Sie dann zu „Bearbeiten > Symbolleisten > Codierung”. und wählen Sie dann die „Codeformateinstellungen”, um Ihre bevorzugte Einstellung festzulegen.
Eine andere Möglichkeit, Ihr Skript zu organisieren, besteht darin, auf die Formatierungsoption über Befehle > Quellformatierung anwenden zuzugreifen oder sie nur auf einen Codierungsblock anzuwenden, indem Sie die Option Quellformatierung auf Auswahl anwenden auswählen.
8 Fusselfreie Codierung:
Unabhängig davon, wie sehr Adobe den Dreamweaver mit leistungsstarken Tools und Funktionen ausstattet, je mehr Sie an den Websites arbeiten, desto mehr Arbeit müssen Sie auf der Codierungsseite erledigen. Dieses Ding kann Ihre Fähigkeiten verbessern, aber es wird auch die Türen für endlose Fehler öffnen, da zu viel Schreiben von Codierungen keine leichte Aufgabe ist. Dreamweaver weiß das, und deshalb gibt es in der neuesten Version von Dreamweaver, der Creative Cloud (CC), eine Funktion namens Linting-Unterstützung. Linting ist ein grundlegendes Tool zur Überprüfung der Programmiersyntax, das für CSS, HTML und JavaScript verfügbar ist. Dadurch sendet Dreamweaver jedes Mal, wenn es ein Problem oder einen Fehler identifiziert, eine Reihe allgemeiner und spezifischer Meldungen.
Um den Test auszuführen, öffnen Sie eine Seite voller Codes in Dreamweaver und Sie sehen ein kleines grünes Häkchen in einem Kreis auf der rechten Seite der Statusleiste. Wenn nur ein kleines grünes Häkchen eingekreist ist, ist mit Ihrem Code alles in Ordnung. Wenn ein rotes Kreuz rot eingekreist ist, gibt es einige Probleme mit Ihrer Codierung, und Sie müssen sie überarbeiten, damit Ihre Website ordnungsgemäß ausgeführt wird. Darüber hinaus können Sie durch Klicken auf die Markierung des Fehlers zu der Spalte und Zeile gelangen, in der Sie den Fehler mit der Fehlerbeschreibung gemacht haben. Das Beste daran ist, dass es für diese Funktion keine Begrenzung gibt und Sie sie verwenden können, bis Sie die grüne Markierung nicht mehr erhalten.
9 Überprüfung der Browser-Kompatibilität:
Die Browsing-Fähigkeit ist eines der grundlegendsten Dinge jedes Webentwicklungsprozesses. Aus diesem Grund hat Dreamweaver es Ihnen einfacher gemacht, damit Sie diese grundlegenden Dinge nie verpassen können, bevor Sie mit der Webentwicklung beginnen. Öffnen Sie das Dokument in Dreamweaver, für das Sie die Kompatibilität überprüfen möchten. In der Menüleiste, in der die Symbole für Code-, Teilungs- und Entwurfsansichten platziert sind, gibt es eine weitere Option, die als „Seite prüfen”-Schaltfläche bezeichnet wird.
Beim Klicken öffnet sich ein Dropdown-Menü, wählen Sie darin Browser-Kompatibilität prüfen und sehen Sie das Ergebnis Ihrer Kompatibilität in einem separaten Fenster.
10 Codeminimierung:
Beim Codieren für die große Website kommt es oft vor, dass Sie ein Stück Code auf dem Bildschirm irritiert. Nur sehr wenige Menschen wissen, dass sie diesen Kodierungsblock minimieren können, indem sie einfach eine Taste auf der Tastatur drücken. Wenn Sie sicher sind, dass keine Änderungen an dem Codierabschnitt vorgenommen werden müssen, wählen Sie einfach diesen Block aus und klicken Sie auf „-” neben der Codezeilennummer. Dieser Brocken wird minimiert und stört Sie nicht, bis Sie ihn erweitern.