10 hacków na temat Dreamweaver – najlepszego edytora kodu dla twórców stron internetowych

Dreamweaver jest matką wszystkich działań internetowych w Internecie. Dla większości ludzi Dreamweaver to tylko narzędzie do tworzenia stron internetowych, ale tylko profesjonaliści wiedzą, że Dreamweaver to potęga.

Dreamweaver ma wiele funkcji i opcji, które sprawiają, że jest to najbardziej ulubione narzędzie twórców stron internetowych. Niewątpliwie to oprogramowanie ma najbardziej znane IDE (zintegrowane środowisko programistyczne), którego nie ma żadne inne oprogramowanie do tworzenia stron internetowych na obecnym rynku. Dreamweaver, zarówno jako narzędzia do programowania, współpracy i kodowania, zapewnia przyzwoitą gamę programistów internetowych do zabawy. Dlatego dla początkujących twórców stron internetowych ważne jest, aby wiedzieć, w jaki sposób mogą zmaksymalizować wykorzystanie Dreamweaver.

Wszystkie aspekty, które odróżniają ekspertów i zwykłych twórców stron internetowych, są ukryte pod warstwami godnych pożałowania intuicyjnych menu, dlatego nowi twórcy stron internetowych mają trudności z doskonaleniem swoich umiejętności. Jednak w tym artykule pokażę ci te ukryte i potężne funkcje programu Dreamweaver, które są bardzo ważne, aby sprostać wymaganiom dzisiejszego rynku. Ten artykuł pomoże ci szybko uzyskać dostęp do tych funkcji i dostarczy ci dziesięciu pomocnych hacków, które poprawią jakość twojej pracy i znacznie poprawią twoje kodowanie.

1. Widok dynamiczny i podgląd na żywo:

Wszyscy wiedzą, że Dreamweaver oferuje widok statyczny lub nasze otwarte pliki. Jednak pytanie pozostaje bez odpowiedzi dotyczące dynamicznych widoków aplikacji, takich jak WordPress. Aby ustawić widok dynamiczny, musimy poinformować Dreamweaver o ustawieniach, które mają być używane dla widoków dynamicznych. Aby to ustawić, przejdź do ustawień żądania HTTP, klikając menu Widok > Widok na żywo > Opcje, a następnie wprowadź polecenie GET lub POST, które jest wymagane do prawidłowego wyświetlania aplikacji.

Następnie przełącz widok aktywny w programie Dreamweaver, który zastąpi panel Widok projektu w aktywny, renderowany z dokładnością do pikseli WebKit Twojej strony. Następnie uzupełnij go za pomocą działającego kodu JavaScript, manipulacji DOM, zapytań do bazy danych, kodu po stronie serwera i renderowanego CSS zamiast ikony zastępczej z interfejsu widoku projektu.

2. Bootstrap do przyspieszenia nawigacji:

Nawigacja to jednostronicowy komponent w responsywnej witrynie, który powinien mieć zdolność adaptacji, aby zaspokoić potrzeby mniejszych ekranów, w przypadku których Bootstrap może bardzo pomóc. Bootstrap pozwala łatwo skonfigurować pasek nawigacyjny i przełączyć się z paska poziomego na panel pionowy. Powodem jest to, że Dreamweaver obsługuje całą elastyczność nawigacji Bootstrap i jest łatwy w użyciu, jeśli chodzi o tworzenie efektywnej, responsywnej strony internetowej.

Aby dać ci szybki obraz tego, poniżej znajduje się krótkie demo, jak używać Bootstrap w twoim rozwoju.

Przyspieszenie nawigacji za pomocą Bootstrap rozpoczyna się od nowego okna dialogowego dokumentu programu Dreamweaver. Po prostu kliknij przycisk Bootstrap Framework w nowym oknie dialogowym dokumentu, a także zaznacz pole wyboru opcji wstępnego kompilowania układu, aby skorzystać z w pełni funkcjonalnych opcji nawigacji, takich jak;

• Standardowa, nieuporządkowana i poprawna semantycznie lista linków.
• Miejsce na umieszczenie logo w celu umieszczenia wizerunku marki.
• Gotowy do aktywacji przycisku przesyłania i pola wyszukiwania.
• Presety dla menu rozwijanych dla elementów nawigacji podrzędnej i uzupełnij je separatorami.
• Sekcje lewa i prawa, które można wyrównać w razie potrzeby.
• Wbudowana responsywność.

Jeśli uważasz, że jest to trudne, jest inna opcja. Dreamweaver umożliwia tworzenie niestandardowego paska nawigacyjnego. Jeśli wolisz ciemną paletę, po prostu dodaj klasę .navbar-inverse do tagu <nav>. Możesz nawet się nim bawić. Jeśli chcesz wyświetlać nawigację zawsze nad stroną, wpisz .navbar-fixe-top. Jeśli chcesz pokazać to poniżej, wpisz .navbar-fixed-bottom. Wszystkie te klasy Bootstrap są standardowe, a podpowiedzi do kodu programu Dreamweaver również obsługują to kodowanie, więc nie musisz pamiętać o całym kodowaniu. Wystarczy wpisać .navbar na wyświetlaczu elementu, a otrzymasz listę podręczną, w której możesz wybrać żądaną opcję.

3. Zamrożenie JavaScriptu:

Ajax ma bardzo dynamiczny charakter. To dlatego wiele razy, gdy musimy wchodzić w interakcję ze stroną z niedostępnymi lub nierenderowanymi elementami podczas ładowania pierwszej strony. Te elementy mogą zostać wstrzyknięte na stronę po pewnym czasie ładowania, dlatego nie wyświetlają się przy pierwszym załadowaniu. Na przykład, gdy chcesz zmienić styl podpowiedzi, która została zaimplementowana w całości w JavaScript, metodycznie przeszukiwałeś skrypty, aby znaleźć element, w którym został utworzony. Zamiast przeszukiwać skrypty, wypróbuj poniższe.

Umieść swój Dreamweaver w podglądzie na żywo i wyrenderuj swoją stronę. Następnie naciśnij klawisz F6, aby w dowolnym momencie zamrozić JavaScript, co pozwoli Ci przeanalizować i skierować dowolny kod dowolnego dynamicznego elementu na stronie. Pomoże to nie tylko w ukierunkowaniu dokładnego kodu elementu dynamicznego, ale także przyspieszy rozwój, skracając czas wyszukiwania dowolnego kodu w dynamicznej witrynie internetowej.

4. Podświetlenie kodu:

Skrypt kodowania może być bardzo mylący, jeśli nie jesteś przyzwyczajony do oglądania złożonego kodu każdego dnia i nocy. W tym miejscu podświetlanie kodów pomaga tworzyć separacje w całym skrypcie. Zamiast poruszać oczami krwawiącą krawędzią, Dreamweaver ma funkcję, która podkreśla kod, który pomaga w jego odczytaniu. W tym celu otwórz preferencje programu Dreamweaver i włącz sekcję podglądu technologii. Następnie kliknij opcję włączania podświetlania kodu i pozwól Dreamweaverowi zrobić swoje. Jednak może być konieczne zaktualizowanie wersji programu Dreamweaver, ponieważ ta funkcja jest dostępna tylko w najnowszej wersji.

Po włączeniu opcji podświetlania wystarczy dwukrotnie kliknąć dowolny tag, a podświetli on wszystkie wystąpienia tagu na bieżącej stronie. Należy jednak określić parametry. To narzędzie świetnie nadaje się do szybkiego identyfikowania i przechodzenia do podobnych elementów. Po podświetleniu dowolnego elementu użyj skrótów klawiszowych f3 na PC, CMD-G na Macu), aby przeskoczyć z jednego podświetlonego elementu do następnego. Ponadto modyfikator przesunięcia może cofać się do poprzedniej sekcji. Co więcej, podświetlanie kodu działa również z atrybutami i wartościami znaczników HTML, dzięki czemu można łatwo dostrzec określone klasy.

5. Automatyczne uzupełnianie JavaScript:

Dreamweaver to świetna platforma, na której inteligentne i kompletne kody HTML i CSS. Chociaż niektórzy uważają, że JavaScript nie jest kompletny. W przypadku jQuery lub Prototype w Dreamweaver powinieneś wiedzieć, że istnieją rozszerzenia API, które udostępniają kody uzupełniania Javascript. Kody te przyspieszają proces rozwoju, ponieważ przy użyciu tych kodów nie ma potrzeby wpisywania całych skryptów i są bardzo przydatne dla szybkich programistów.

Dreamweaver to jedyne oprogramowanie do tworzenia stron internetowych, które umożliwia korzystanie z takich kodów ukończenia jQuery i Prototype, które pomagają każdemu programiście internetowym przyspieszyć jego zadanie i stworzyć możliwie najlepszy produkt przy minimalnym wysiłku.

6. Uzyskaj łatwy dostęp do powiązanych plików:

CSS i JavaScript to nazwy niezależnych plików, które widzisz po otwarciu plików HTML i PHP. Podczas otwierania pliku PHP możesz go zobaczyć w górnej części okna. Ponieważ wszystkie te opcje są umieszczone z przodu, możesz łatwo przełączać się na te pliki i wprowadzać zmiany, które można zapisać nawet bez ich otwierania. Po kliknięciu dowolnego pliku na pasku powiązanych plików, który pokaże jego źródło w widoku kodu i stronę nadrzędną w widoku projektu.

Co więcej, możesz również użyć dowolnego nawigatora kodu, aby szybko uzyskać dostęp do kodu źródłowego CSS, który wpłynie na Twoje obecne rozwiązanie. Ten szybki dostęp do kodu źródłowego CSS skraca czas kodowania i pozwala programiście internetowym skoncentrować się na różnych aspektach procesu rozwoju.

7. Upiększ kody na bieżąco:

Niezorganizowane i niechlujne linie kodów pokazują, że twórca tego kodowania nie był wystarczająco profesjonalny i wykwalifikowany, aby pisać kody w kolejności. Jest to również coś, co bardzo się liczy podczas optymalizacji strony pod kątem wyszukiwarek. Jednak uporządkowanie kodów i ich upiększenie nie jest tak trudne, jak ludzie sądzą. Dzięki odpowiedniej znajomości opcji programu Dreamweaver możesz organizować swoje kody na bieżąco. Po prostu użyj opcji „Zastosuj formatowanie źródła” i zmień ją dokładnie według swoich preferencji. Aby kodowanie było czyste i uporządkowane, kliknij "Formatuj kod źródłowy" u dołu paska narzędzi do kodowania, a następnie przejdź do "edytuj> paski narzędzi> kodowanie", a następnie wybierz "ustawienia formatu kodu", aby ustawić preferowane ustawienie.

Innym sposobem uporządkowania skryptu jest uzyskanie dostępu do opcji formatowania z polecenia Polecenia > Zastosuj formatowanie źródła lub zastosowanie go tylko do bloku kodu, wybierając opcję Zastosuj formatowanie źródła do zaznaczenia.

8. Kodowanie bez kłaczków:

Bez względu na to, ile Adobe wyposaży Dreamweaver w zaawansowane narzędzia i funkcje, im więcej pracujesz w witrynach internetowych, tym więcej pracy musisz wykonać po stronie kodowania. Ta rzecz może zwiększyć twoje umiejętności, ale otworzy również drzwi niekończących się błędów, ponieważ zbyt częste pisanie kodu nie jest łatwym zadaniem. Dreamweaver o tym wie, dlatego w najnowszej wersji programu Dreamweaver, czyli Creative Cloud (CC), dostępna jest funkcja o nazwie Obsługa Lintinga. Linting to podstawowe narzędzie do sprawdzania składni programistycznej, dostępne dla CSS, HTML i JavaScript. Dzięki temu za każdym razem, gdy Dreamweaver zidentyfikuje jakikolwiek problem lub błąd, wysyła szereg błysków, zarówno ogólnych, jak i szczegółowych.

Aby uruchomić test, otwórz stronę pełną kodów w programie Dreamweaver, a po prawej stronie paska stanu zobaczysz mały zielony znacznik wyboru w kółku. Jeśli jest otoczony tylko mały zielony znacznik wyboru, wszystko jest w porządku z twoim kodem. Jeśli czerwony krzyżyk jest otoczony na czerwono, oznacza to, że istnieją pewne problemy z kodowaniem i musisz je poprawić, aby poprawnie uruchomić swoją witrynę. Co więcej, kliknięcie w znacznik błędu może przenieść Cię do kolumny i wiersza, w którym popełniłeś błąd wraz z opisem błędu. Najlepsze w tym jest to, że nie ma ograniczeń tej funkcji i możesz z niej korzystać, dopóki nie uzyskasz zielonego znaku.

9. Sprawdzenie kompatybilności przeglądarek:

Możliwość przeglądania jest jedną z najbardziej podstawowych rzeczy w każdym procesie tworzenia stron internetowych. Właśnie dlatego Dreamweaver ułatwił ci to, aby nigdy nie przegapić tych podstawowych rzeczy przed rozpoczęciem tworzenia stron internetowych. Otwórz w programie Dreamweaver dokument, którego zgodność chcesz sprawdzić. Z paska menu, w którym umieszczone są ikony opcji widoków kodu, podziału i projektu, jest jeszcze jedna opcja, która nazywa się przycisk „Sprawdź stronę”.

Po kliknięciu otworzy się rozwijane menu, wybierz w nim sprawdź kompatybilność przeglądarki i zobacz wynik kompatybilności w osobnym oknie.

10. Minimalizacja kodu:

Podczas kodowania na dużą stronę internetową często zdarza się, że kawałek kodu zaczyna irytować Cię na ekranie. Bardzo niewiele osób wie, że można zminimalizować ten fragment kodu, naciskając tylko jeden przycisk na klawiaturze. Jeśli masz pewność, że nie ma potrzeby dokonywania żadnych zmian w fragmencie kodu, po prostu zaznacz ten blok i kliknij „-” obok numeru linii kodu. Ten kawałek zminimalizuje się i nie będzie ci przeszkadzał, dopóki go nie rozszerzysz.