Dreamweaver to świetny edytor WYSIWYG, ale jeśli nie interesuje Cię pisanie stron internetowych w środowisku "jakie widzisz, to co dostajesz", nadal możesz używać programu Dreamweaver, ponieważ jest to również świetny edytor tekstów. Ale jest wiele funkcji, które znikają w edytorze kodu Dreamweaver, ponieważ główny nacisk kładzie się na "widok projektu" lub część edytora WYSIWYG produktu.
Jak uzyskać dostęp do widoku kodu Dreamweaver
Jeśli nigdy nie używałeś programu Dreamweaver jako edytora HTML, możesz nawet nie zauważyć trzech przycisków u góry strony: "Kod", "Podziel" i "Projekt". Program Dreamweaver jest domyślnie uruchamiany w trybie "Widok projektu" lub w trybie WYSIWYG. Łatwo jest jednak przejść do przeglądania i edytowania kodu HTML. Po prostu kliknij Kod przycisk. Lub przejdź do Widok menu i wybierz Kod.
Jeśli dopiero uczysz się pisać w HTML lub chcesz dowiedzieć się, w jaki sposób zmiany wpłyną na twój dokument, możesz jednocześnie otworzyć widok kodu i widok projektu. Piękno tej metody polega na tym, że możesz edytować także w obu oknach. Możesz więc napisać kod znacznika graficznego w HTML, a następnie użyć widoku projektu, aby przenieść go do innej lokalizacji na stronie metodą przeciągania i upuszczania.
Aby wyświetlić oba naraz, należy:
- Kliknij na Rozdzielać przycisk (pomiędzy Kod i Projekt).
- w Widok menu, wybierz Kod i projekt.
Gdy będziesz już wygodnie używać Dreamweaver do edycji swojego kodu HTML, możesz zmienić swoje preferencje, aby domyślnie otwierać Dreamweaver w widoku kodu. Najprostszym sposobem jest zapisanie widoku kodu jako obszaru roboczego. Dreamweaver otworzy się w ostatnim obszarze roboczym, z którego korzystałeś. Jeśli tak nie jest, po prostu przejdź do menu Okno i wybierz odpowiedni obszar roboczy.
Opcje widoku kodu
Program Dreamweaver jest tak elastyczny, ponieważ ma wiele sposobów na jego dostosowanie i sprawienie, by działał tak, jak chcesz. W oknie opcji znajduje się kolorowanie kodu, formatowanie kodu, podpowiedzi do kodu i opcje przepisywania kodu, które można dostosować. Ale możesz również zmienić niektóre specjalne opcje w samym widoku kodu.
Gdy jesteś w widoku kodu, istnieje Zobacz opcje przycisk na pasku narzędzi. Możesz również wyświetlić opcje, przechodząc do Widok menu i wybór Opcje widoku kodu. Dostępne są następujące opcje:
- Zawijanie tekstu - opakowuje kod HTML, aby można było go przeglądać bez przewijania w poziomie. Zauważ, że ta opcja nie wstawia żadnych znaków powrotu karetki do kodu, po prostu wyświetla kod, dzięki czemu jest łatwiejszy do odczytania.
- Numery linii - wyświetla numery linii wzdłuż boku kodu. Pokazuje symbol zawijania linii dla linii, które zawijają się dłużej niż okno widoku.
- Ukryte postacie - wyświetla znaki specjalne zamiast białych znaków wyświetlanych na stronie internetowej. Tak jak kropka zastępuje spację, podwójny znak zastępuje każdą zakładkę, a znacznik pilcrow lub akapitu zastępuje każdą linię podziału.
- Podświetl Nieprawidłowy kod - Podkreśla HTML, który jest nieprawidłowy na żółto. Jeśli wybierzesz żółty znacznik, Inspektor właściwości poda wskazówki, jak to naprawić.
- Kolorowanie składni - włącza lub wyłącza kodowanie kolorów twojego kodu. Zmieniasz kolory swojego kodowania kolorów w sekcji kolorowania preferencji.
- Automatyczne wcięcie - powoduje, że twój kod jest automatycznie wcięty po powrocie karetki, jeśli kod nad nim jest wcięty. Możesz zmienić rozmiar wcięcia, zmieniając rozmiar tabulatora w sekcji formatowania kodu preferencji.
Edytowanie kodu HTML w widoku kodu Dreamweaver
Edytowanie kodu HTML w widoku kodu Dreamweaver jest łatwe. Po prostu zacznij pisać swój kod HTML. Ale Dreamweaver zapewnia ci kilka dodatków, które rozszerzają go poza podstawowy edytor HTML. Po rozpoczęciu pisania tagu HTML wpisujesz <. Jeśli zatrzymasz się zaraz po tej postaci, Dreamweaver wyświetli listę tagów HTML. Są to tak zwane wskazówki do kodu. Aby zawęzić wybór, zacznij pisać litery - Dreamweaver zawęzi listę rozwijaną do tagu, który pasuje do wpisywanego tekstu.
Jeśli jesteś nowy w HTML, możesz przewijać listę tagów HTML i wybierać różne, aby zobaczyć, co robią. Dreamweaver będzie nadal monitować o atrybuty po wpisaniu tagu. Na przykład, jeśli wpiszesz <>Dreamweaver zostanie przeniesiony do Tag HTML z innymi tagami zaczynającymi się od I. Jeśli kontynuujesz, wpisując literę m, Dreamweaver ograniczy to do etykietka.
Wskazówki do kodu nie kończą się jednak na tagach. Możesz użyć wskazówek do wstawienia kodu:
- Atrybuty HTML
- Nazwy klas i identyfikatorów
- Właściwości CSS
Jeśli wskazówki do kodu nie pojawiają się, możesz uderzyć Ctrl-spacja (Windows) lub Cmd-spacja (Macintosh), aby je wyświetlić. Najczęstszym powodem, dla którego wskazówka dotycząca kodu może nie być wyświetlana, jest przełączenie do innego okna przed zakończeniem tagu. Ponieważ Dreamweaver jest kluczem do pisania postaci <, jeśli opuścisz okno i wrócisz, będziesz musiał ponownie uruchomić wskazówki do kodu.
Możesz wyłączyć menu wskazówek do kodu, naciskając klawisz Escape.
Po wpisaniu otwierającego tagu HTML musisz go zamknąć. Dreamweaver robi to w naturalny sposób. Jeśli wpiszesz Zamknij tagi opcja, która najlepiej odpowiada Twoim potrzebom.
Jeśli nie jesteś jeszcze gotowy, aby przejść do edycji stron w HTML, ale chcesz obejrzeć kod w jego oryginalnej wersji, powinieneś wypróbować inspektora kodu. Spowoduje to otwarcie kodu HTML w osobnym oknie. Działa tak, jak widok kodu, i faktycznie jest w zasadzie odłączalnym oknem widoku kodu dla bieżącego dokumentu.Aby otworzyć inspektora kodu, przejdź do Okno menu i wybierz Inspektor kodu lub uderz w F10 klucz na klawiaturze.
Dreamweaver będzie formatować kod HTML, ale chcesz go wyświetlić. Na przykład, jeśli użyjesz 3 spacji do wcięcia, ale nigdy nie wciętych tagów IMG, możesz określić te informacje o formatowaniu w opcjach przepisywania kodu. Potem idziesz do Polecenia menu i wybierz Zastosuj formatowanie źródła. To świetny sposób na uzyskanie kodu napisanego przez kogoś innego w znanym Ci formacie.
Cechą, której wielu programistów HTML nie wie lub nie używa, jest możliwość zwinięcia kodu HTML. Nie usuwa to tagów z dokumentu, ale po prostu je usuwaj z widoku, aby nie rozpraszały one nad tym, nad czym pracujesz. Aby zwinąć swój kod:
- Wybierz sekcję kodu, którą chcesz ukryć.
- w Edytować menu, wybierz Zwiń wybór z Kod Collapse podmenu
Prostszym sposobem jest wybranie kodu, a następnie kliknięcie ikon zwinięcia kodu, które pojawiają się w rynnie. Możesz także kliknąć prawym przyciskiem myszy na wybrany kod i wybrać Zwiń wybór.
Jeśli chcesz wszystko ukryć z wyjątkiem co jest podświetlone, wybierz Collapse Outside Selection w dowolnej z powyższych metod.
Aby rozwinąć zwinięty kod, wystarczy dwukrotnie go kliknąć. To otwiera kod i wybiera go. Następnie możesz przenieść ten wybór, usunąć go lub dodać do niego dodatkowe znaczniki.
Możesz korzystać z funkcji zwijania i rozwijania przez cały czas na stronach, na których nie chcesz edytować zewnętrznego szablonu. Wystarczy wybrać obszar zawartości, który chcesz edytować i zwinąć na zewnątrz. Następnie napisz swój kod HTML. Nadal możesz wyświetlić tę stronę Projekt wyświetl lub wyświetl podgląd w przeglądarce. Zwinięty kod nie jest usuwany z dokumentu, po prostu ukryty przed przeglądaniem. Możesz go również użyć, gdy pracujesz nad serią przedmiotów. Kiedy skończysz, zwiń go. Wiesz, że skończyłeś, gdy nie ma kodu.
