10 hacków na temat Dreamweavera — 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 czynią go najbardziej ulubionym narzędziem twórców stron internetowych. Bez wątpienia to oprogramowanie ma najbardziej znane IDE (zintegrowane środowisko programistyczne), którego nie ma żadne inne oprogramowanie do tworzenia stron internetowych na obecnym rynku. Niezależnie od tego, czy są to narzędzia programistyczne, do współpracy i kodowania, Dreamweaver zapewnia przyzwoitą gamę narzędzi do zabawy dla twórców stron internetowych. Dlatego dla początkujących twórców stron internetowych ważne jest, aby wiedzieć, w jaki sposób mogą zmaksymalizować wykorzystanie programu Dreamweaver.
Wszystkie aspekty, które odróżniają doświadczonych programistów internetowych od zwykłych programistów internetowych, są ukryte pod warstwami godnych ubolewania 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, o których trzeba wiedzieć, aby sprostać wymaganiom dzisiejszego rynku. Ten artykuł pomoże ci szybko uzyskać dostęp do tych funkcji i dostarczy ci dziesięciu najlepszych pomocnych hacków, które poprawią jakość twojej pracy i znacznie poprawią twoje kodowanie.
1 Widok dynamiczny i podgląd na żywo:
Każdy wie, że Dreamweaver oferuje widok statyczny lub nasze otwarte pliki. Jednak pytanie pozostaje bez odpowiedzi na temat dynamicznych widoków aplikacji, takich jak WordPress. Aby ustawić widok dynamiczny, musimy poinformować tkacza snów o ustawieniach, które mają być używane dla widoków dynamicznych. Aby to ustawić, przejdź do ustawień żądań HTTP, klikając menu widok > Widok na żywo > opcje, a następnie wprowadź GET lub POST, które są wymagane do prawidłowego wyświetlenia aplikacji.
Następnie przełącz widok na żywo w programie Dreamweaver, który zastąpi panel Widok projektu, na działający na żywo, renderowany z perfekcyjnym pikselem WebKit Twojej strony. Następnie uzupełnij go żywym JavaScript, manipulacjami DOM, zapytaniami do bazy danych, kodem po stronie serwera i renderowanym CSS zamiast zastępczej ikony z interfejsu Design View.
2 Bootstrap do przyspieszenia nawigacji:
Nawigacja to jeden element strony w responsywnej witrynie, który powinien mieć zdolność adaptacji do potrzeb mniejszych ekranów, w przypadku których Bootstrap może bardzo pomóc. Bootstrap pozwala łatwo skonfigurować pasek nawigacyjny i przełączać się z poziomego paska na pionowy panel. Powodem jest to, że Dreamweaver obsługuje całą elastyczność nawigacji Bootstrap i jest łatwy w użyciu, jeśli chodzi o tworzenie skutecznej, responsywnej strony internetowej.
Aby szybko to zobaczyć, poniżej znajduje się krótkie demo, jak używać Bootstrap w swoim rozwoju.
Przyspieszenie nawigacji za pomocą Bootstrap rozpoczyna się od nowego okna dialogowego dokumentu programu Dreamweaver. Po prostu kliknij przycisk Bootstrap Framework w oknie dialogowym nowego dokumentu, a także zaznacz pole wyboru opcji układu przed kompilacją, aby korzystać z w pełni funkcjonalnych opcji nawigacji, takich jak;
- Standardowa, nieuporządkowana i semantycznie poprawna 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 o dzielniki.
- Sekcje lewa i prawa, które można wyrównać w razie potrzeby.
- Wbudowana responsywność.
Jeśli okaże się to trudne, istnieje inna opcja. Dreamweaver umożliwia utworzenie dostosowanego paska nawigacyjnego. Jeśli wolisz ciemną paletę, po prostu dodaj klasę .navbar-inverse do swojej
etykietka. Możesz nawet się nim bawić. Jeśli chcesz wyświetlać nawigację zawsze nad stroną, wpisz .navbar-fixe-top. Jeśli chcesz pokazać go poniżej, wpisz .navbar-fixed-bottom. Wszystkie te klasy Bootstrap są standardowe, a wskazówki do kodu Dreamweaver również obsługują te kodowanie, więc nie musisz pamiętać o całym kodowaniu. Wystarczy wpisać .navbar na wyświetlaczu elementu, a pojawi się wyskakująca lista, w której możesz wybrać żądaną opcję.
3 Zamrażanie JavaScript:
Ajax ma bardzo dynamiczną naturę. Dlatego często musimy wchodzić w interakcję ze stroną z niedostępnymi lub niewyrenderowanymi elementami podczas ładowania pierwszej strony. Te elementy mogą zostać wstrzyknięte na stronę po pewnym czasie ładowania, dlatego nie wyświetlają się przy pierwszym ładowaniu. Na przykład, gdy chcesz zmienić styl podpowiedzi, który został całkowicie zaimplementowany w JavaScript, zwykle metodycznie przeszukiwałeś swoje skrypty, aby znaleźć, gdzie został utworzony element. Zamiast przeszukiwać skrypty, spróbuj wykonać następujące czynności.
Umieść program Dreamweaver w widoku na żywo i wyrenderuj swoją stronę. Następnie naciśnij klawisz F6, aby w dowolnym momencie zatrzymać JavaScript, co pozwoli ci przeanalizować i ukierunkować dowolny kod dowolnego elementu dynamicznego na stronie. Pomoże to nie tylko w dokładnym ukierunkowaniu kodu elementu dynamicznego, ale także przyspieszy rozwój, skracając czas wyszukiwania dowolnego kodu w dynamicznej witrynie.
4 Podświetlanie kodu:
Skrypt kodowania może być bardzo mylący, jeśli nie jesteś przyzwyczajony do oglądania złożonego kodowania każdego dnia i nocy. W tym miejscu podświetlanie kodów pomaga tworzyć separacje w całym skrypcie. Zamiast poruszać oczami za krwawiącą krawędzią, Dreamweaver ma funkcję, która podkreśla kodowanie, które pomaga ci go przeczytać. 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 kliknij dwukrotnie dowolny tag, a podświetli on wszystkie wystąpienia tagu na bieżącej stronie. Należy jednak określić parametry. To narzędzie doskonale nadaje się do szybkiego identyfikowania i przechodzenia do podobnych elementów. Po podświetleniu dowolnego elementu użyj skrótu klawiaturowego f3 na komputerze PC, CMD-G na komputerze Mac), aby przeskoczyć z jednego podświetlonego elementu do następnego. Ponadto modyfikator shift może cofnąć się do poprzedniej sekcji. Co więcej, wyróżnianie kodu działa również z atrybutami i wartościami znaczników HTML, dzięki czemu można łatwo rozpoznać określone klasy.
5 Automatyczne uzupełnianie JavaScript:
Dreamweaver to świetna platforma zawierająca 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 dostarczają kody uzupełniania Javascript. Kody te przyspieszają proces programowania, 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 tego typu kodów uzupełniania jQuery i Prototype, które pomagają każdemu twórcy stron internetowych przyspieszyć swoje zadanie i stworzyć możliwie najlepszy produkt przy minimalnym wysiłku.
6 Ł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ę do tych plików 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 także użyć dowolnego nawigatora kodu, aby szybko uzyskać dostęp do kodu źródłowego CSS, który będzie miał wpływ na Twoje obecne rozwiązanie. Ten szybki dostęp do kodu źródłowego CSS skraca czas kodowania i pozwala twórcom stron internetowych skupić się na różnych aspektach procesu ich tworzenia.
7 Upiększ kody w locie:
Niezorganizowane i niechlujne wiersze kodów pokazują, że twórca tego kodowania nie był wystarczająco profesjonalny i wykwalifikowany, aby napisać kody w kolejności. Jest to również coś, co bardzo się liczy podczas optymalizacji witryny pod kątem wyszukiwarek. Jednak porządkowanie kodów i upiększanie ich nie jest tak trudne, jak ludzie sądzą. Dzięki odpowiedniej znajomości opcji programu Dreamweaver możesz organizować swoje kody w locie. Wystarczy skorzystać z opcji „Zastosuj formatowanie źródła” i dostosować je dokładnie do swoich preferencji. Aby kodowanie było przejrzyste i uporządkowane, kliknij „Formatuj kod źródłowy” na dole paska narzędzi kodowania, a następnie przejdź do „edycja > 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 > Zastosuj formatowanie źródła lub zastosowanie jej tylko do bloku kodu, wybierając opcję Zastosuj formatowanie źródła do zaznaczenia.
8 Niestrzępiące się kodowanie:
Bez względu na to, jak bardzo Adobe wyposaża program Dreamweaver w zaawansowane narzędzia i funkcje, im więcej pracujesz nad witrynami, tym więcej pracy musisz wykonać po stronie kodowania. Ta rzecz może zwiększyć twoje umiejętności, ale otworzy również drzwi do niekończących się błędów, ponieważ zbyt wiele pisania kodu nie jest łatwym zadaniem. Dreamweaver o tym wie i dlatego w najnowszej wersji Dreamweavera czyli Creative Cloud (CC) pojawiła się funkcja o nazwie Linting support. Linting to podstawowe, programistyczne narzędzie do sprawdzania składni, które jest dostępne dla CSS, HTML i JavaScript. Dzięki temu za każdym razem, gdy program Dreamweaver zidentyfikuje jakiś problem lub błąd, wysyła szereg sygnałów ostrzegawczych, zarówno ogólnych, jak i szczegółowych.
Aby uruchomić test, otwórz stronę pełną kodów w programie Dreamweaver, a zobaczysz mały zielony znacznik wyboru w kółku po prawej stronie paska stanu. Jeśli otoczony jest tylko mały zielony znacznik wyboru, wszystko jest w porządku z twoim kodem. Jeśli czerwony krzyżyk jest otoczony czerwonym kółkiem, oznacza to, że wystąpiły problemy z kodowaniem i musisz je poprawić, aby witryna działała poprawnie. Ponadto, klikając znak błędu, może przenieść Cię do kolumny i wiersza, w których popełniłeś błąd z opisem błędu. Najlepsze jest to, że ta funkcja jest nieograniczona i możesz z niej korzystać, dopóki nie uzyskasz zielonego znaku.
9 Sprawdzanie zgodnoś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 pracę, abyś nigdy nie przegapił tych podstawowych rzeczy przed rozpoczęciem tworzenia sieci. Otwórz dokument w programie Dreamweaver, dla którego chcesz sprawdzić zgodność. Z paska menu, w którym umieszczone są ikony opcji widoku kodu, podziału i projektu, znajduje się kolejna opcja, która nazywa się przyciskiem „Sprawdź stronę”.
Po kliknięciu otworzy się rozwijane menu, wybierz w nim sprawdź zgodność przeglądarki i zobacz wynik swojej zgodności w osobnym oknie.
10 Minimalizacja kodu:
Podczas kodowania dużej witryny często zdarza się, że fragment kodu zaczyna Cię irytować na ekranie. Niewiele osób wie, że można zminimalizować ten fragment kodu, naciskając tylko jeden przycisk na klawiaturze. Kiedy jesteś pewien, że nie ma potrzeby dokonywania żadnych zmian w fragmencie kodu, po prostu wybierz ten blok i kliknij „-” obok numeru linii kodu. Ten fragment zminimalizuje się i nie będzie ci przeszkadzał, dopóki go nie rozwiniesz.