Dreamweaver MX - ułatwienia i formatowanie kodu

EDYCJA KODU HTML

Program Dreamweaver umożliwia osobom znającym HTML, JavaScript, CSS czy PHP wygodną edycję kodu źródłowego dokumentów. Kolorowana składnia, kontekstowe podpowiedzi, edycja parametrów znaczników w dedykowanym panelu czy też predefiniowane fragmenty kodu znacznie ułatwiają i przyspieszają pracę.

Konfiguracja kolorów kodu

Dzięki kolorowanej składni kod jest dużo bardziej czytelny, a poruszanie się po nim, edycja oraz wyszukiwanie potencjalnych błędów łatwiejsze. Mamy możliwość zadeklarowania różnych kolorów dla takich elementów jak znaczniki, komentarze czy skrypty.

W celu zmienienia domyślnych ustawień kolorów wybieramy z menu: Edit > Preferences > Code Coloring. Zaznaczamy HTML i klikamy "Edit Coloring Scheme" (edycja schematu kolorów).

Dreamweaver posiada predefiniowane kolory i style dla różnych elementów HTML, CSS i Java Script.

Możemy zmieniać takie parametry jak kolor tekstu, kolor tła, pogrubienie, kursywę czy podkreślenie. W poniższym przykładzie zmienione zostało tło pod znacznikami struktury tabel.

Istnieje także możliwość ustawienia kolorów dla poszczególnych znaczników przy pomocy edytora biblioteki znaczników (Tag Library Editor). Będzie o nim mowa w dalszej części artykułu.

Podpowiedzi (Code Hints)

Pomocną opcją jest automatyczny sufler, który wyświetla nam listę dostępnych znaczników w trakcie ręcznej edycji kodu. Po wpisaniu lewego nawiasu (<) pojawia się okno, z którego możemy wybrać żądany znacznik - wyszukujemy go wpisując pierwsze litery nazwy, następnie po wciśnięciu spacji mamy do dyspozycji listę atrybutów znacznika/parametrów funkcji. Jeżeli dla danego parametru są dostępne tylko konkretne wartości (na przykład przy wyrównaniu tekstu - może być on wycentrowany, wyrównany do prawej/lewej lub do obu stron), to wybieramy je z listy, w pozostałych przepadkach uzupełniamy ręcznie.

W celu konfiguracji podpowiedzi wybieramy: Edit > Preferences > Code Hints.

Mamy do wyboru następujące opcje:

• Enable Auto Tag Completion - umożliwienie automatycznego uzupełniania kodu
• Enable Code Hints - włączenie automatycznych podpowiedzi w trybie edycji kodu. Nawet gdy je wyłączymy, zawsze możemy wywołać listę naciskając kombinację klawiszy CTRL+spacja
• Delay - opóźnienie z jakim Dreamweaver będzie wyświetlał podpowiedzi
• Menus - wybór konkretnych list, z których podpowiedzi będziemy korzystać

Tag inspector

Panel "Tag inspector" służy do wygodnej edycji poszczególnych znaczników, których używamy w kodzie źródłowym naszej strony.

Panel otwieramy wybierając: Window > Tag Inspector.

Gdy klikniemy na dowolny znacznik (w panelu lub oknie edycji kodu) - zostanie wyświetlona lista możliwych parametrów oraz ich aktualne wartości.

Tag Library Editor

W prawym dolnym rogu okna mamy dostępne ikonki:

1. Odświeżenie widoku
2. Edytor biblioteki znaczników (Tag Library Editor)
3. Edycja znacznika (Tag Editor)

Edytor biblioteki znaczników (menu: Edit > Tag Libraries) pozwala nam na ustalanie formatu i edytowanie właściwości znaczników, ich parametrów oraz wartości.

Formatowanie znaczników

Line Breaks - określenie w którym miejscu ma być przejście do nowej linii (before - przed, after - po, inside - w obrębie znacznika)
Contents - sposób w jaki zostanie zamieszczona zawartość znacznika
Case - określenie wielkości liter, którymi znacznik będzie pisany. Mamy do wyboru: Default (domyślny), Lowercase (małe litery), Uppercase (duże litery) oraz Mixed Case (duże i małe litery - w okienku dialogowym musimy podać jak ma wyglądać zapis znacznika)
Set Default - określenie domyślnej wielkości liter dla wszystkich znaczników

W analogiczny sposób formatujemy parametry znaczników. Możemy zadeklarować jaką wielkością liter będą pisane, jakiego są typu oraz jakie mogą przyjmować wartości.

SKRÓTY KLAWIATUROWE

Korzystanie z kombinacji klawiszy celem wykonania poleceń, wyświetlenia okien lub paneli (zamiast mozolnego wybierania opcji z menu przy pomocy myszki) znacznie przyspiesza pracę, gdy tylko przyzwyczaimy się do ich używania. Dreamweaver oferuje predefiniowaną listę skrótów klawiaturowych (Keyboard Shortcuts), którą możemy dowolnie modyfikować w zależności od naszych preferencji i przyzwyczajeń (menu: Edit > Keyboard Shortcuts).

1. Duplikacja biblioteki skrótów
2. Zmiana nazwy
3. Eksport wszystkich skrótów do pliku HTML
4. Usunięcie biblioteki skrótów

Current Set - wybów aktywnego zbioru skrótów. Oprócz standardowego zestawu Dreamweaver’a, mamy także do wyboru skróty używane w programach HomeSite, BBEdit oraz Dreamweaver w wersji 3.0.
Commands - wybór kategorii komend, które chcemy edytować. W oknie poniżej wyświetlona zostanie lista wszystkich komend pogrupowanych tematycznie
Shortcuts - wyświetla skróty klawiaturowe przypisane do danej komendy

Add Item (+) - dodaje nowy skrót dla danego polecania. Klikając na + dodajemy pusty skrót do którego możemy przypisać kombinację klawiszy z okna PressKey. Do danej komendy możemy podpiąć nie więcej niż dwie kombinacje skrótów
Remove Item (-) - usunięcie skrótu z listy
Press Key - wyświetla naciśniętą kombinację klawiszy
Change - dodaje kombinację klawiszy widoczną w okienku Press Key do listy skrótów lub podmienia podświetlony skrót na nowy

Jeżeli mamy zamiar używać predefiniiowanego zestawu skrótów klawiaturowych, to na stronach Macromedii znajduje się ich pełne zestawienie w formacie pdf.

Agnieszka Richter

Artykuł został napisany dla Optimus Pascal S.A. Publikowanie całości lub fragmentów niniejszego artykułu jest zabronione bez zgody właściciela.
   

[ Strona główna ] [ Uwagi ogólne ] [ Błędy przy tworzeniu stron ]
[ Przykazania webdesignera ] [ Artykuły ] [ Linki ] [ Słowo od autorki ]

Copyright © 1999-2004, Kaila Studio. Wszelkie prawa zastrzeżone.
Agnieszka 'Kaila' Richter - aga@kailastudio.com.pl
Ostatnia aktualizacja: 31 października 2004