10 przydatnych wskazówek i sztuczek Dreamweaver dla początkujących

Użytkownik Dreamweaver z pewnością uzna, że ​​jest to potężna elektrownia. Pakiety z mnóstwem funkcji, opcji i jednym z najbardziej znanych IDE (Integrated Development Environment) na dzisiejszym rynku. Może jednak nie spełniać kryteriów, których wymagali niektórzy programiści, Dreamweaver niezaprzeczalnie zapewnia przyzwoity zakres narzędzi do tworzenia, współpracy i kodowania. Te opcje i narzędzia są ukryte pod warstwami godnych pożałowania mniej intuicyjnych menu, dlatego udostępniamy samouczki w dzisiejszym poście.

Pokażemy Ci niektóre z najpotężniejszych funkcji programu Dreamweaver, aby pomóc Ci w szybkim dostępie do nich, a także wiele innych pomocnych sztuczek, które zapewnią Ci czas rozwoju i znacząco poprawią jakość kodu. Pełna lista po skoku.

1. Widok dynamiczny z “Na żywo”

Wiemy już, że DW oferuje statyczny widok naszych otwartych plików, ale co z tym „widoki dynamiczne” aplikacji, takiej jak WordPress?

Po pierwsze, musimy powiedzieć DW, jakich ustawień użyć, aby zaprezentować nasze„widoki dynamiczne” poprawnie. Aby to zrobić, wybierz Ustawienia żądania HTTP od Wyświetl> Opcje widoku na żywo menu, a następnie wprowadź DOSTAĆ lub SŁUPEK parametry potrzebne do poprawnego wyświetlenia aplikacji.

Następnie przechodząc na Na żywo w DW zastępuje stare Widok projektu okienko z żywym, perfekcyjnym pixelowym renderowaniem strony przez WebKit; w komplecie z żywymi Javascript, manipulacjami DOM, zapytaniami do baz danych, kodem po stronie serwera i renderowanym CSS, a nie symbolami zastępczymi, które widzisz w Widok projektu.

2. „Code Navigator” to Firebug DW

Krok dalej to wszystko Nawigator kodu i kiedy w Na żywo okno, kliknięcie ALT (kliknięcie Command-Option dla komputerów Mac) w dowolnym miejscu okna, natychmiast wyświetla kod, który renderował ten element. Podobny do tego, co możesz zobaczyć w Firefoksie / Firebug.

3. Zamrażanie JavaScript

Ze względu na dynamiczną naturę Ajaksa, wiele razy musimy wchodzić w interakcję ze stroną, na której pewne elementy nie są renderowane lub dostępne podczas ładowania pierwszej strony. Są to elementy, które są wstrzykiwane na stronę jakiś czas po załadowaniu strony. Oto przykład:

Możesz zmienić styl podpowiedzi, który jest całkowicie zaimplementowany w JavaScript. Do dzisiaj trzeba metodycznie przeszukiwać skrypty, aby znaleźć to, co było tworzone i gdzie.

Zamiast tego spróbuj tego:

Renderuj swoją stronę w Na żywo, następnie uderz F6 Zamrozić JavaScript w dowolnym momencie, pozwalając na kierowanie i analizowanie kodu związanego z dowolnym dynamicznym elementem na stronie.

4. Następny najlepszy przyjaciel Live View - „Live Code”

Podczas używania Na żywo, możesz także włączyć Kod na żywo. Kod na żywo zaktualizuje Twój kod podczas przesuwania, klikania i interakcji z elementami i elementami w Okno podglądu na żywo!

5. Automatyczne uzupełnianie JavaScript

Dreamweaver zawiera inteligentne i kompletne uzupełnienie kodu HTML i CSS, ale co z Javascriptami? Jeśli kodujesz jQuery lub Prototype w Dreamweaver, powinieneś wiedzieć, że istnieją rozszerzenia API, które zapewniają uzupełnienie kodu JavaScript. Zmniejsza potrzebne wpisywanie i może być bardzo przydatne dla szybkich programistów.

Kliknij tutaj, aby przeczytać więcej lub pobrać:

• Rozszerzenie API jQuery dla Dreamweaver
• Prototypowe rozszerzenie API dla Dreamweaver

6. Upiększyć kody w locie

Czy Twoja strona kodowa wygląda jak niezorganizowane, niechlujne linie kodu? Użyj Zastosuj formatowanie źródła funkcja i sformatuj ją dokładnie według własnych preferencji. Aby szybko je wyczyścić, kliknij Formatuj kod źródłowy ikona na dole Pasek narzędzi kodowania (Edytuj> Paski narzędzi> Kodowanie) i wybierz Ustawienia formatu kodu aby ustawić preferowane formatowanie.

Możesz również uzyskać dostęp do opcji formatowania z Polecenia> Zastosuj formatowanie źródła lub zastosuj go tylko do wybranego bloku kodu, wybierając Zastosuj formatowanie źródła do zaznaczenia opcja.

7. Uzyskaj szerokie spektrum

Po prostu kliknij Rozszerz ikonę Dreamweaver (wygląda jak bieg) w pasku aplikacji i wybierz Przeglądaj w poszukiwaniu widżetów internetowych. Spowoduje to przejście do Adobe Exchange, gdzie można znaleźć dodatkowe widgety od takich dostawców, jak Yahoo !, JQuery i wiele innych.

8. Subversion & Dreamweaver

I tak, Dreamweaver obsługuje Subversion (SVN). Dla programistów, którzy używają SVN do utrzymania kontroli wersji swojego projektu, może to być dobra wiadomość. Twórca tkaczy snów Andrew Voltmer omawia jak korzystać z Subversions z Dreamweaver.

9. Nie więcej zbędnych stylów

Wiele osób używa Dreamweaver jako sposobu na wizualną aktualizację treści, na przykład edytora tekstu. Przed Dreamweaver CS4 może to spowodować niepotrzebne reguły CSS .Klasa 1, .klasa 2, i tak dalej. W Dreamweaver CS4 po prostu przełącz swój Inspektor nieruchomości do HTML tryb (kliknij ikonę HTML po lewej stronie Inspektora), a pożegnasz się z tym nadmiarowym CSS, wstawiając tylko odpowiedni znacznik HTML.

10. Łatwość weryfikacji formy

Chcesz zweryfikować swoje pola formularza, ale martwisz się, że będziesz musiał odbudować od podstaw? Bez obaw. Wystarczy wybrać istniejący element formularza, taki jak pole tekstowe, i zastosować a Widget Spry Walidacja od Wstaw> menu Spry. Następnie kontroluj wymagania dotyczące walidacji, takie jak minimalne lub maksymalne znaki bezpośrednio z poziomu Inspektor nieruchomości.

Bonus: 3 więcej

11. Łatwo uzyskaj dostęp do powiązanych plików

Kiedy otworzysz plik HTML lub PHP, zobaczysz teraz wiersz zależnych nazw plików, takich jak CSS, Javascript, a nawet dołączone pliki dla PHP, w górnej części okna dokumentu. Możesz łatwo przełączać się na te pliki, wprowadzać zmiany i zapisywać je, nawet bez ich otwierania. Po kliknięciu dowolnego pliku na pasku Pliki powiązane zobaczysz jego źródło w widoku Kod i stronę nadrzędną w widoku Projekt. Lub użyj Code Navigator, aby szybko uzyskać dostęp do kodu źródłowego CSS, który wpływa na bieżący wybór.

12. Sprawdź zgodność przeglądarek

Otwórz dokument, który chcesz sprawdzić pod kątem zgodności; z tego samego paska menu, gdzie dostęp do widoków kodu / podziału / projektu, spójrz w prawo na „Sprawdź stronęprzycisk.

Kliknięcie go spowoduje rozwinięcie rozwijanego menu, wybierz „Sprawdź zgodność przeglądarki” The Okno wyników zgodności przeglądarki pojawi się na dole okna z wszelkimi problemami, które musisz rozwiązać.

Uwaga: to NIE sprawdzi nowych wersji IE na Macu! Aby wybrać przeglądarki, które mają być używane do testowania, wybierz Sprawdź stronę > Ustawienia z menu.

13. Podgląd stron PHP

Dreamweaver umożliwia uruchamianie i podgląd kodów PHP w oprogramowaniu. Oto jak go skonfigurować.

Rozpoczęcie

1. Najpierw wybierz Teren -> Nowa strona z górnej nawigacji.
2. Zobaczysz oba Podstawowy i Zaawansowana definicja witryny karty opcji. Przejdźmy przez wybranie Karta Zaawansowana definicja witryny.
3. Wprowadź nazwę folderu dla witryny w odpowiednim polu (w tym przykładzie użyjemy „myphp” jako nazwy folderu).
4. Utwórz inny folder o nazwie „images”, wpisując jego nazwę w polu „Default Images Folder”.
5. Pod Informacje lokalne, wprowadź następujące wartości w polach:
   • Nazwa strony: nazwa witryny. Do użycia tylko w programie Dreamweaver
   • Lokalny folder główny: To jest nazwa witryny, w której będziesz pracować. Pamiętaj, aby nazywać witryny w sposób minimalizujący konflikty lub mylące nazwy.
   • Folder Domyślne obrazy: Jest to opcjonalne, ale zaleca się, aby utworzyć je teraz, ponieważ większość witryn będzie w pewnym stopniu wykorzystywać obrazy. W tym miejscu DW „szuka” wstawiania obrazów do dokumentów podczas fazy kodowania.
   • Linki Względne: Określa sposób obsługi łączenia dokumentów w programie Dreamweaver. Możesz wybrać Dokument lub Korzeń. Różnice między nimi są następujące:
     • Względny dokument - wstawi ścieżkę względną do pliku, który pracujesz i elementu, do którego jest podłączony.
     • Root Relative - Używa / co powoduje, że dokument / plik jest powiązany z folderem ROOT.
     • Inną alternatywą jest dodanie pewnej konfiguracji do plików konfiguracyjnych serwera. Będąc bardziej zaawansowanym zadaniem, pozostaniemy na razie przy użyciu dokumentu względnego.
   • Adres HTTP: wprowadź folder główny witryny dla swojego projektu
   • Linki uwzględniające wielkość liter: Dreamweaver sprawdzi, czy podczas przesyłania na serwer dowolny plik w projekcie może mieć problem z wielkością liter. Powiadomienia będą wyświetlane po użyciu: Witryna -> Sprawdź linki w całym serwisie. Możesz zostawić to zaznaczone, jeśli chcesz. Osobiście nie pozostawiam tego sprawdzonego, ponieważ zawsze nazywam pliki małymi literami. Wielkie litery nie są zalecane.
   • Pamięć podręczna: Zaznacz Włącz pamięć podręczną.
6. w Zdalne informacje Strona, albo skonfiguruj FTP lub inny dostęp do zdalnego serwera, albo pozostaw Access to None.
7. w Serwer testujący wybierz opcję, która odnosi się do typu / systemu, który będziesz testować.
8. Kontrola wersji nie zostanie użyty w tym przykładzie, więc możesz zostawić go pustym, chyba że go znasz.
9. Maskowanie pozwala umieścić pliki .psd, .fla i inne pliki źródłowe w folderze witryn, a DW zignoruje je podczas przesyłania / aktualizowania witryny.
10. Uwagi do projektu są idealne dla zespołu projektantów stron internetowych, ponieważ zachowują notatkę o zmianach dokonanych w plikach. Domyślnie jest zaznaczone i dobrze, abyśmy mogli z niego korzystać w ten sposób.
11. Pozostawiać Kolumna widoku pliku, Przyczynić się, i Szablony jako domyślny.
12. The Żwawy strona wskazuje na folder zasobów Spry, który jest automatycznie dołączany do programu Dreamweaver. Nie ma potrzeby tego zmieniać. Po zakończeniu każdego ustawienia kliknij dobrze.

Podgląd PHP w Dreamweaver

Teraz otwórz plik PHP i wprowadź potrzebne zmiany. Aby wyświetlić ten plik w Dreamweaver po prostu naciśnij klawisz F12 a wyniki będą wyświetlane w domyślnej przeglądarce. Możesz zmienić używaną przeglądarkę Edytować -> Preferencje -> Podgląd w przeglądarce. Pozwala to na szybszy czas edycji do podglądu, eliminuje konieczność wpisywania długich adresów URL na pasku przeglądarki lub używania innego oprogramowania serwera do renderowania plików PHP, co pozwala zaoszczędzić czas!

To wszystko. Szczęśliwy Dreamweaver :-)

Nota redaktora: Ten wpis jest napisany przez Jesse Matlock dla Hongkiat.com. Przez ostatnie 6 lat Jesse zanurzał się w projektowaniu interfejsu użytkownika, tworzeniu aplikacji i trendach internetowych. Jest założycielem i kierownikiem projektowym małego, choć bardzo utalentowanego zespołu programistycznego, który koncentruje się na tworzeniu aplikacji na zamówienie.