Rozdział 3. Dreamweaver i HTML

Masz już podstawową wiedzę na temat takiego konfigurowania programu, aby odpowiadał Twoim potrzebom i upodobaniom. Mógłbyś już zacząć od wpisania kilku wierszy tekstu lub wstawienia prostej tabeli czy też mapy odnośników, aby zobaczyć jak program działa. Ten rozdział poświęcony jest podstawom korzystania z języka HTML w programie Dreamweaver. Zajmiemy się tym, co czyni dokument HTML unikatowym. Omówimy także różne sposoby tworzenia i edycji kodu HTML w programie Dreamweaver.

Niech Cię nie zmyli tytuł rozdziału. Chociaż będziemy mówić o podstawach języka HTML, przedyskutujemy także najważniejsze metody manipulowania kodem HTML z poziomu programu Dreamweaver, co oszczędzi Ci bólu głowy i czasu w przeszłości, Zaprezentowana poniżej lista wymienia główne tematy, które będziemy omawiać:

• Znaczniki i atrybuty sekcji HEAD i BODY

• Różnica między znacznikami logicznymi i fizycznymi

• Nawigacja między widokami projektu, kodu i kodu i projektu

• Rozbudowany przewodnik programu Dreamweaver po HTML, arkuszach CSS i skryptach JavaScript

• Korzystanie z opcji porządkowania kodu HTML

• Korzystanie z zewnętrznych edytorów HTML w połączeniu z programem Dreamweaver

Podstawy języka HTML

Gdy mówię ludziom z czego żyję, wydają się zdumieni. Niektórzy, przypuszczam, powinni być, ale w większości przypadków typowa reakcja jest nieco przesadzona. Odnoszę wrażenie, że ludzie uważają HTML za język „programowania”, trudny do pojęcia dla zwykłego człowieka, z którym tylko znawcy komputerów są w stanie sobie poradzić. Z drugiej strony, tradycyjni programiści, przywykli do języków C lub Perl, nie traktują HTML-a jako „prawdziwego” języka programowania, a tych wszystkich, którzy uważają inaczej, usiłują wyprowadzić z błędu. Tak więc, czym jest HTML?

HTML to język hipertekstowego znakowania (Hypertext Markup Language), który stanowi ustanowioną przez konsorcjum World Wide Web Consortium (W3C) specyfikację nakreślającą postać dokumentów prezentowanych w Internecie. Twórcy przeglądarek sieciowych sprawdzają za pośrednictwem języka HTML jak ich produkty będą wyświetlać strony WWW na ekranie Twojego komputera. Konieczność stosowania standardu wynika z następującego powodu: jeśli każdy z producentów oprogramowania zacznie stosować swój własny sposób prezentacji stron, nasza praca stałaby się nie tylko znacznie trudniejsza, ale jej rezultaty byłyby przypadkowe. Nieefektywny i rozdęty kod to inne efekty uboczne tego typu praktyki.

HTML korzysta z elementów zwanych znacznikami, aby oznaczać zwykły tekst. Znaczniki nadają specjalne atrybuty i instruują przeglądarkę jak interpretować wygląd tekstu. Format znacznika jest następujący: <ZNACZNIK>To jest zawartość</ZNACZNIK> (jest parę wyjątków, na przykład przy wstawianiu obrazu niezbędny jest tylko znacznik otwierający). Wielkość znaku nie ma w HTML-u znaczenia.

Aby lepiej zrozumieć funkcjonowanie języka HTML, spróbuj potraktować znaczniki HTML jako przymiotniki. Kolor obiektu, na przykład piłki, można opisać korzystając z takich przymiotników jak niebieska, czerwona czy żółta. Relację względem innego obiektu można z kolei wyrazić za pomocą słów takich jak: z lewej, z prawej, w centrum. Podobnie HTML pomaga opisać wygląd i ulokowanie tekstu, obrazów i innych obiektów na Twojej stronie WWW.

W idealnym świecie narysowałbyś wszystkie swoje obiekty HTML w edytorze typu WYSIWIG (What You See Is What You Get) i uzyskał idealne ich odwzorowanie w dowolnej z przeglądarek. Niestety, w rzeczywistości jest inaczej. Chociaż Dreamweaver radzi sobie doskonale z pisaniem kodu HTML, który jest zwarty i kompatybilny z większością przeglądarek, czasami po prostu czegoś nie jest w tanie zrobić. Zdarzy się także, że będziesz chciał napisać własny skrypt JavaScript lub zmodyfikować fragment kodu, który od razu zostanie umieszczony w pliku HTML. Niezależnie od wszystkiego, możesz przyjąć za pewnik, że pewnego dnia staniesz przed koniecznością edycji kodu HTML, a kiedy ten dzień nadejdzie, powinieneś być przygotowany do niego na tyle, by poradzić sobie z podstawami. Z narzędziem takim jak Dreamweaver nie mogłoby być łatwiej!

Zawartość sekcji HEAD

Dokument HTML składa się z trzech sekcji. Pierwszą otwiera znacznik <HTML>, któremu podporządkowane są wszystkie inne znaczniki. Kolejne dwie w rankingu ważności sekcje to HEAD i BODY. Znacznik <HEAD> definiuje zazwyczaj stronę WWW jako taką, lecz nie zawiera nic, co miałoby być na niej rzeczywiście wyświetlone. Są tu jedynie opisy zawartości, niezbędne dla przeglądarek sieciowych i serwisów wyszukujących. W obrębie sekcji HEAD umieszczane są na przykład: tytuł, słowa kluczowe, opis, definicja zestawu znaków, a nawet atrybut automatycznego odświeżania. Jest to także idealne miejsce na skrypty JavaScript niezbędne do działania strony WWW. Dodawanie, edycja i usuwanie znacznika <HEAD> to w programie Dreamweaver bardzo proste operacje.

Znaczniki META

Znaczniki META przekazują przeglądarkom i serwerom sieciowym informacje o stronie WWW. Boty wyszukujące także je interpretują. Informacje te to dane o autorze, słowa kluczowe, czas odświeżania i strona kodowa dokumentu. Znaczniki META powinny być umieszczane w sekcji HEAD. Ponieważ dla mniej doświadczonych użytkowników zasady korzystania z nich mogą nie być całkiem czytelne, Dreamweaver bardzo upraszcza całą operację. Zanim omówimy szczegółowo wszystkie kwestie dotyczące znaczników META, zobaczmy jak wyglądają w kodzie:

<html>

<head>

<title>Untitled Document</title>

<meta name=”keywords” content=”oto , słowa, kluczowe, dla, wyszukiwarki”>

<meta name=”description” content=”Ten znacznik zawiera opis dla botów wyszukujących.”>

<meta http-equiv=”refresh” content=”60”>

<meta http-equiv=”Content-Type” content=”text/html”; charset=iso-8859-2”>

</head>

<body bgcolor=”#FFFFFF” text=”#000000”>

</body>

</html>

Powyższy kod to prosty dokument HTML. Jedyna zawartość „ekranowa” tego dokumentu to białe tło (zostanie to wyjaśnione w punkcie omawiającym sekcję BODY). Atrybut NAME podaje informację o stronie, natomiast atrybut HTTP-EQUIV określa typ informacji nagłówka HTTP. Atrybut CONTENT podaje natomiast zawartość opisywaną przez atrybuty NAME i HTTP-EQUIV. Wiemy już co nieco na temat znaczników META, zobaczmy więc jak Dreamweaver upraszcza proces ich definiowania.

Aby wstawić znaczniki META, skorzystamy z palety obiektów (Object panel). Paletę obiektów można wyświetlać i ukrywać wybierając w menu Window pozycję Objects (lub stosując skrót klawiaturowy Ctrl+F2). Paleta umożliwia wstawiania na stronie najróżniejszych obiektów, w tym znaków, nagłówka, formularza, ramki, niewidzialnych obiektów oraz znaków specjalnych, a także innych elementów HTML. Znaczniki META oraz inne elementy sekcji HEAD można dodawać z poziomu menu Insert wybierając pozycję Head Tag.

Początek ramki

Uwaga

Panel obiektów możesz dostosować do własnych potrzeb, tak jak inne elementy składowe programu Dreamweaver. Temat ten jest omawiany w rozdziale 21., „Rozszerzenia i Extension Manager”, oraz w rozdziale 22., „Definiowanie własnych obiektów i behawiorów”.

Koniec ramki

Skupmy się na kategorii Head palety obiektów. Aby wybrać kategorię, rozwiń menu, które znajdziesz u góry palety. Kliknij ikonę określonego obiektu lub przeciągnij ten obiekt na otwarty dokument. Twoje działanie spowoduje wyświetlenie okienka dialogowego, w którym możesz wpisać dodatkowe informacje - na ich podstawie Dreamweaver będzie mógł wstawić znaczniki META.

Początek ramki

Uwaga

Jeśli po kliknięciu obiektu okienko dialogowe nie pojawi się, powinieneś sprawdzić ustawienia kategorii General okna Preferences, a dokładniej stan pola wyboru Show Dialog When Inserting Objects. Pole to powinno być zaznaczone. Jeśli nie jest, zaznacz je lub wyświetl zawartość sekcji HEAD wybierając w menu View pozycję Head Content. Umożliwi to zaznaczenie elementów i dokonanie ich zmiany z poziomu okienka dialogowego ich właściwości (Property Inspector). Inny sposób wyświetlenia zawartości sekcji HEAD polega na wybraniu Head Content na pasku View Options.

Koniec ramki

Ćwiczenie 3.1 Wstawianie różnych typów znacznika META

Znaczniki META mają niezliczoną liczbę odmian. Możesz wprowadzić dowolny typ danych dla znacznika META, ale poprawna interpretacja znacznika zależy od przeglądarki i serwera sieciowego.

Część I. Wstawianie znaczników META

Aby wstawić znacznik META:

1. Kliknij ikonę Meta na palecie obiektów.

2. Wybierz z listy Attribute atrybut Name.

3. Podaj w polu Value wartość atrybutu - w tym przypadku copyright.

4. Wpisz w polu Content tekst Copyright 2000 Blurred Vision Studios L.L.C. jako zawartość.

5. Okienko dialogowe powinno mieć postać taką jak na rysunku 3.1. Naciśnij OK.

Rys. 3.1. Okienko dialogowe Insert Meta

Część II. Wstawianie znacznika zawierającego słowa kluczowe (obiekt Keyword).

Ten obiekt wstawia znacznik META ze słowami kluczowymi, z których korzystają boty wyszukujące. Niektóre z botów przyjmują tylko określoną liczbę słów, ważne jest więc, aby dobrać „treściwe” słowa kluczowe, w pełni opisujące stronę. Słowa kluczowe wprowadza się w polu tekstowym Keyword, oddzielając je przecinkami. Aby wstawić znacznik META dla słów kluczowych:

1. Kliknij na palecie obiektów obiekt Keyword.

2. Wpisz słowa kluczowe freeware, shareware, programs, download w polu tekstowym Keywords.

3. Jeśli na swoim ekranie widzisz to, co na rysunku 3.2, kliknij OK.

Rys. 3.2. Okienko dialogowe Insert Keywords

Część III. Wstawianie znacznika META zawierającego opis (obiekt Description).

Ten obiekt umożliwia dołączenie krótkiego opisu na temat strony. Wyszukiwarki także korzystają z tej zawartości, aby katalogować Twoją stronę. Opis strony - w postaci pełnych zdań - wprowadza się w polu tekstowym Description. Aby wstawić tego typu znacznik META:

1. Kliknij na palecie obiektów ikonę Description.

2. Wpisz tekst stanowiący opis strony, na przykład: Download John Pickett's favorite software, including CuteFTP, Internet Explorer, and more!

3. Rysunek 3.3 pokazuje jak w tym momencie powinien wyglądać ekran Twojego komputera. Kliknij OK.

Początek ramki

Uwaga

Odwiedź stronę J.K. Bowman's Spider Food Web pod adresem www.spider-food.net, aby dowiedzieć się jak lepiej wykorzystać wyszukiwarki.

Koniec ramki

Rys. 3.3. Okienko dialogowe Insert Description

Część IV. Wstawianie znacznika META powodującego odświeżenie strony (obiekt Refresh)

Ten znacznik META spowoduje odświeżenie strony po czasie zdefiniowanym w polu tekstowym Delay. Przyciski opcji sekcji Action pozwalają wybrać między odświeżeniem strony wyświetlanej (Refresh This Document) a załadowaniem nowej (Go To URL). Jeśli tworzysz stronę z wiadomościami, która jest aktualizowana co 30 sekund, może być celowe zautomatyzowanie odświeżania co 30 sekund lub co minutę. Jeśli natomiast przeniosłeś swoją stronę na nowy serwer sieciowy, ale nadal pod starym adresem gromadzą się odwiedzający, możesz ustalić czas opóźnienia na 10 sekund, a następnie skierować użytkowników pod nowy adres URL. Aby automatycznie odświeżyć stronę lub załadować stronę spod innego adresu URL:

Początek ramki

Uwaga

Zachowaj ostrożność definiując czas opóźnienia przed odświeżeniem strony. Wartość 0 (zero) spowoduje natychmiastowe odświeżenie. Stanowiłoby to dla użytkownika niewątpliwą niedogodność i skłoniłoby go do porzucenia Twojej strony. Podobnie, nie jest dobrym pomysłem zmuszanie użytkowników do podziwiania komunikatu, że strona została przeniesiona pod inny adres, ale za chwilę zostaną oni tam skierowani. Przyjmij jako zasadę, że w takich sytuacjach rozsądne przedziały czasowe to 5-10 sekund.

Koniec ramki

1. Kliknij na palecie obiektów ikonę Refresh.

2. Wpisz w polu tekstowym Delay wartość 7 jako czas opóźnienia przed odświeżeniem strony.

3. Wybierz jeden z przycisków opcji w sekcji Actions. Wybranie Refresh This Document spowoduje cykliczne odświeżanie strony, co n sekund podanych w polu Delay.

4. Jeśli wybierzesz opcję Go To URL, musisz podać także adres URL, pod który ma się skierować przeglądarka po n sekundach podanych w polu Delay.

5. Rysunek 3.4 pokazuje okienko dialogowe Insert Refresh. Ekran Twojego komputera powinien wyglądać podobnie. Naciśnij OK.

Rys. 3.4. Okienko dialogowe Insert Refresh

Część V. Wstawianie znacznika META zawierającego informację o katalogu (obiekt Base)

Ten znacznik umożliwia zmianę katalogu, względem którego wyznaczane są ścieżki względne. Ścieżka jest definiowana w polu tekstowym Href. Istnieje także możliwość wskazania celu, do którego pozycja ma zostać załadowana (lista rozwijana Target). Jeśli chcesz, aby wszystkie połączenia na Twojej stronie były otwierane w nowym oknie lub w tej samej ramce, określ to tutaj. W ten sposób nie będzie konieczne definiowanie celu dla każdego połączenia osobno.

Aby wstawić znacznik META zawierający informację o katalogu:

1. Kliknij na palecie obiektów ikonę Base.

2. Wpisz adres http://www.mynewsite.com/old/, względem którego wyznaczane będą ścieżki względne.

3. Jeśli chcesz, wybierz z listy Target cel, aczkolwiek w tym ćwiczeniu powinieneś po prostu pozostawić to pole puste.

4. Powinieneś uzyskać efekt taki, jak na rysunku 3.5. Naciśnij OK.

Rys. 3.5. Jako cel połączeń, możesz wybrać _blank, _parent, _self lub _top

Gdyby „prawdziwa” ścieżka http://www.mynewsite.com/old/docs/webpage.htm, ścieżka przypisana przez znacznik META miałaby postać: http://www.mynewsite.com/old/webpage.htm.

Część VI. Wstawianie znacznika definiującego połączenie (obiekt Link)

Ten znacznik ma zupełnie inne funkcje niż znacznik definiujący połączenie między dokumentami i umieszczany zazwyczaj w sekcji BODY. Służy on do określania relacji między dokumentem a innymi plikami zewnętrznymi. Najczęściej jest stosowany do dołączania pliku zawierającego arkusze stylów. Aby wstawić taki znacznik na stronie WWW:

1. Kliknij na palecie obiektów ikonę Link.

2. Podaj ścieżkę dostępu do zewnętrznego pliku i jego nazwę. W tym ćwiczeniu jest to: styles/textfont.css.

3. Możesz podać identyfikator ID. Jest to specjalny identyfikator pliku zewnętrznego, do którego ma prowadzić połączenie. Na razie jednak pozostaw to pole puste. Możesz także nadać plikowi tytuł (pole tekstowe Title) - jest to krótki opis pliku, a jego rola jest podobna jak rola tytułu w przypadku dokumentu HTML. To pole także pozostaw w tej chwili puste.

4. Możesz także zdefiniować atrybuty Rel i Rev. Atrybut Rel określa relację z dołączanym plikiem. Możliwe wartości tego atrybutu to stylesheet, contents, copyright i index. Wpisz stylesheet, aby wskazać relację z arkuszem stylów. Rev określa dokładnie odwrotną relację i ma identyczne wartości jak atrybut Rel. Pozostaw to pole puste.

5. Powinieneś uzyskać efekt taki, jak na rysunku 3.5. Naciśnij OK.

Rys. 3.6. Większość atrybutów zwyczajnie nie jest potrzebna - jedyny wyjątek to atrybut Rel

Wstawianie skryptów

Umieszczenie w kodzie źródłowym strony WWW skryptów to najlepsza metoda, aby interakcję z użytkownikiem przenieść na kolejny poziom. W połączeniu z arkuszami stylów, JavaScript i inne języki skryptowe stanowią podstawę tego, co nazywamy dynamicznym HTML-em lub
DHTML-em. Odwiedź witrynę WWW firmy Microsoft (www.microsoft.com) i powędruj po jej stronach, aby zobaczyć DHTML w akcji.

Początek ramki

Uwaga

Chociaż skrypty można umieszczać zarówno w sekcji HEAD, jak i BODY, zaleca się, aby wszystkie niezbędne skrypty pojawiały się raczej w sekcji HEAD. Ta technika będzie stosowana w tej książce.

Koniec ramki

Gdy staniesz się ekspertem, będziesz mógł skorzystać z wielu oferowanych przez Dreamweaver sposobów umieszczania skryptów w kodzie HTML. Zazwyczaj będą to skrypty JavaScript lub VBScript, aczkolwiek w przypadku korzystania z programu Dreamweaver częściej są to skrypty JavaScript.

Początek ramki

Uwaga

W Internecie znajdziesz setki wstępnie przygotowanych skryptów, z których możesz korzystać na swoich stronach WWW. Procedurę kopiowania skryptów i wklejania ich kodzie ułatwiają w programie Dreamweaver specjalnie zaprojektowane skrypty zwane rozszerzeniami, które automatyzują cały proces. Te z rozmachem zaprojektowane skrypty umożliwiają skonfigurowanie wszystkich akcji i właściwości niezbędnych do funkcjonowania skryptu, w przyjaznym użytkownikowi środowisku graficznym (GUI). Rozszerzenia zostały omówione w rozdziale 21.

Koniec ramki

Ćwiczenie 3.2. Wstawianie skryptu JavaScript lub VBScript

Zanim przystąpisz do wstawiania skryptu do kodu HTML, sprawdź, czy wyświetlana jest paleta obiektów (wybierz pozycję Objects w menu Window lub zastosuj Ctrl+F2), i czy wybrana jest kategoria Invisibles.

Aby wstawić skrypt:

1. Umieść punkt wstawiania w tym miejscu strony WWW, gdzie chcesz wstawić skrypt, a następnie wybierz na palecie obiektów obiekt Script. Okno dialogowe Insert Script można także wyświetlić wybierając w menu Insert pozycję Invisible Tags, a potem pozycję Script w menu podrzędnym.

2. Musisz teraz określić rodzaj wstawianego skryptu. Na liście rozwijanej Languages masz do dyspozycji opcje dla JavaScript i VBScript. Jeśli nie znasz numeru wersji języka JavaScript, wybierz po prostu pozycję JavaScript. Tak właśnie zrób w tym ćwiczeniu.

3. W polu tekstowym Content możesz teraz wpisać kod skryptu. Będzie to skrypt JavaScript firmy Macromedia pozwalający na wstępne ładowanie obrazów. Oto on:

<!--

function M_preloadedImages() { //v.3.0

var d=document; if(d.images) { if(!d.M_p) d.M_p=new Array();

var i,j=d.MM_p.lenght,a=M_preloadImages.arguments; for(i=0;

i<a.lenght; i++)

if (a[i].indexOf(”#”) !=0) { d.MM_p[j]=new Image;

d.MM_p[j++].src=a[i];}}

}

//-->

4. Okienko Insert Script powinno prezentować się tak jak to z rysunku 3.7. Naciśnij OK.

Rys. 3.7. To narzędzie wstawiania skryptów JavaScript jest odpowiednie dla początkujących użytkowników, docelowo jednak należy się nastawić na ręczne wprowadzanie skryptu bezpośrednio do kodu HTML

Aby wprowadzić zmiany w skrypcie, sprawdź, czy umieszczono znacznik obok pozycji Invisible Elements, w menu podrzędnym Visual Aids menu View. Teraz kliknij ikonę skryptu w swoim dokumencie i przejdź do okna właściwości skryptu (Property Inspector). Możesz w nim zmienić język skryptu (lista rozwijana Language), kliknąć przycisk Edit, aby ręcznie wprowadzić zmiany w oknie edycji kodu , oraz określić, czy skrypt będzie wykonywany po stronie klienta czy serwera (lista rozwijana Type). Możesz także dołączyć skrypt zewnętrzny podając nazwę pliku w polu Source lub wybierając samodzielnie ten plik, klikając ikonę folderu obok tego pola.

Niektóre starsze przeglądarki nie rozpoznają skryptów. Aby to obejść, powszechnie zaleca się umieszczanie skryptów w znacznikach komentarza. Dzięki temu starsze przeglądarki pominą kod skryptu zamiast wyświetlić go jako zwykły tekst lub też zwrócić błąd. Dreamweaver pamięta o tym w przypadku własnych skryptów, ale jeśli ręcznie wpisujesz kod, musisz sam zadbać o umieszczenie w komentarzu. Oto przykład:

<script language=”JavaScript”>

<!-- To jest początek komentarza

function my_function(parameter1,parameter2)

{

tu umieść wszystkie skrypty

}

//--> To koniec komentarza

</script>

Początek ramki

Uwaga

Jeśli chcesz dołączyć skrypt zewnętrzny, pozostaw pole Content okna dialogowego Insert Script puste. Dodanie „pustego” skryptu umożliwia zdefiniowanie połączenia z poziomu okna Property Inspector. Podobnie, jeśli chcesz skorzystać z napisanego wcześniej skryptu, i decydujesz się na dołączenie go jako pliku, pamiętaj, aby wyczyścić pole Content.

Koniec ramki

Sekcja BODY

Rzeczywista zawartość strony WWW - a więc to, co widzi użytkownik - znajduje się w sekcji BODY dokumentu HTML. Jest tu niemal wszystko, na co napotykasz odwiedzając witrynę sieciową, a więc tekst, obrazy, tabele, itd. Dreamweaver robi doskonałą robotę umożliwiając Ci skupienie się na projektowaniu strony zamiast dłubać w skomplikowanym kodzie. Projektowanie w programie Dreamweaver jest tak intuicyjne, że jeśli coś można umieścić na stronie WWW, to na pewno metoda jest bardzo prosta.

Znaczniki logiczne i fizyczne

Definiując zawartość strony WWW musisz wiedzieć, jakiego typu znacznika chcesz użyć. Są dwa typy: znaczniki logiczne i fizyczne. Znaczniki logiczne (lub inaczej stylu) definiują relację względem znaczników najbliższych na stronie. Natomiast znacznik fizyczny jest specyficzny, bez względu na to, jakie znaczniki go otaczają. Przykładem jest rozmiar tekstu. W przypadku zastosowania stylu logicznego, użyłbyś znacznika <BIG>. Styl fizyczny wymagałby użycia wyrażenia, na przykład takiego: <FONT SIZE=6>. Wybór między nimi jest sprawą smaku, czasami jednak, przed rzuceniem strony na pożarcie głodnym i niecierpliwym użytkownikom Internetu, warto wiedzieć jaki efekt zostanie osiągnięty. Chociaż style fizyczne mogą do pewnego stopnia być pomocne w realizacji celu, określenie pozycji elementów strony w punktach lub pikselach przy wykorzystaniu arkuszy stylów daje większą kontrolę nad wyglądem tych elementów. Arkusze stylów omawiane są w rozdziale 12., „Korzystanie z kaskadowych arkuszy stylów”.

Pytałem wielu twórców stron, czy wolą style logiczne, czy też fizyczne. Większość odpowiadała, że jeśli nie arkusze stylów, to style fizyczne. Istnieją nieliczne wyjątki, gdy style logiczne są niewątpliwie niezwykle wygodne. Weźmy przykłady kodu z tej książki. Można je bez trudu zapisać korzystając ze znacznika frazy <CODE>. Znacznik ten wpływa na kilka różnych elementów formatowania wprowadzanego przez Ciebie tekstu, co jest zdecydowanie bardziej efektywne od stosowania zestawu znaczników fizycznych.

Początek ramki

Uwaga

Dreamweaver nie obsługuje automatycznego wstawiania wszystkich znaczników logicznych stylu. Jeśli decydujesz się na korzystanie ze znaczników logicznych, które nie są obsługiwane przez interfejs programu (dotyczy to zresztą wszystkich takich znaczników, nie tylko logicznych), musisz albo ściągnąć rozszerzenie, które rozwiąże ten problem (o ile takie rozszerzenie istnieje), albo ręcznie wpisywać kod, korzystając z dostępnych w programie Dreamweaver metod. Większość z tych znaczników, których Dreamweaver nie chce wstawiać automatycznie, albo nie jest obsługiwana przez najpopularniejsze przeglądarki sieciowe, albo została wycofana z najnowszych specyfikacji języka HTML. Edycja kodu HTML jest omawiana w kolejnych punktach tego rozdziału.

Koniec ramki

Wybór stylu jest w istocie wyborem. Oba rodzaje znaczników mają swoje zalety, mają także wady. Nie należy ich jednak traktować jako przeciwstawnych sobie sił, lecz jako odrębne narzędzia, które mogą być wspólnie użyte do utworzenia poprawnej i efektywnej strony WWW.

Komentarze kodu HTML

Każdy programista powie Ci, że komentowanie kodu jest niezwykle istotne. W przypadku złożonych programów i podprogramów, komentarze pozwalają podzielić odpowiedzialność między członków zespołu. Źle napisane komentarze (lub ich brak) zaowocują nocną bezsennością i bólem głowy, gdy parę miesięcy później będziesz chciał coś zmienić w swoim kodzie.

Uwaga powyższa dotyczy także kodu HTML. Chociaż komentarze w kodzie HTML nie są tak żywotnie istotne jak w poważnych językach programowania, są jednak użyteczne. W komentarzach zawarte są nie tylko uwagi i wyjaśnienia, lecz także informacje ukryte. Często klient nie chce, aby na zamówionej przez niego stronie WWW pojawiała się informacja o autorach. W takiej sytuacji ewentualni klienci odwiedzający tę stronę nie znaleźliby adresu firmy, która stronę przygotowała. Dzięki komentarzom, można na początku kodu HTML umieścić krótki tekst z odpowiednią informacją. Tekst ten, jako ukryty, nie będzie wyświetlany w oknie przeglądarki, ale wszyscy zainteresowani będą mogli go przeczytać wyświetlając postać źródłową strony.

Początek ramki

Uwaga

Dreamweaver wyposażony jest w narzędzie Design Notes, które bardzo przypomina komentarze HTML, lecz jego rola ogranicza się do poziomu lokalnego. Użytkownik lub grupa osób współpracujących nad projektem mają dostęp do tych uwag z poziomu programu w efektywnie sformatowanym oknie. Narzędzie Design Notes zostało omówione w rozdziale 15., „Opcje pracy grupowej”.

Koniec ramki

Ćwiczenie 3.3. Wstawianie i edycja komentarzy

Poprzedni przykład był może zbyt daleko idący, ale cel był jasny. Umieszczanie komentarzy stanowi dobrą metodę biernego reklamowania się, wyjaśniania stosowanych technik i prezentowania informacji, które nie powinny być wyświetlane w oknie przeglądarki. W tym ćwiczeniu wstawisz do kodu komentarz, a następnie zmienisz go. Aby wstawić komentarz, będzie Ci potrzebna paleta obiektów - sprawdź, czy jest wyświetlana (wybierz pozycję Objects w menu Window lub zastosuj Ctrl+F2) - a na niej kategoria Invisibles. Teraz wykonaj takie oto operacje:

1. Umieść punkt wstawiania w tym miejscu strony, w którym chcesz umieścić komentarz, a następnie wybierz z palety obiektów Insert Comment. Okienko dialogowe Insert Comment można wyświetlić wybierając w menu Insert pozycję Invisible Tags, a następnie pozycję Comment w menu podrzędnym.

2. Wpisz w polu tekstowym Comment tekst komentarza: This page was designed by Blurred Vision Studios. Check us at: http://www.bvstudios.com/.

3. Twoje okienko Insert Comment powinno prezentować się tak, jak okienko z rysunku 3.8. Naciśnij OK.

Aby wprowadzić w komentarzu zmiany, sprawdź najpierw, czy umieszczony jest znacznik obok pozycji Invisible Elements w menu podrzędnym Visual Aids menu View. Następnie:

1. Zaznacz ikonę komentarza w dokumencie.

2. Kliknij w polu Comment okienka dialogowego właściwości (Property Inspector) i zastąp tekst bvstudios.com tekstem level67.net. Efekt tej operacji prezentuje rysunek 3.9.

Początek ramki

Uwaga

Chociaż zajmujemy się tutaj komentarzami umieszczanymi w sekcji BODY, nic nie stoi na przeszkodzie, aby umieszczać komentarze w sekcji HEAD. Czasami rzeczywiście twórcy strony zależy na umieszczeniu komentarza na samym początku kodu (tak jak w przypadku komentarza z autoreklamą). Znaczniki komentarza jako jedne z niewielu mogą być umieszczane nawet przed znacznikiem otwierającym <HTML>, niemal zawsze pierwszym znacznikiem dokumentu HTML. Nie wpływają one w żaden sposób na układ lub wygląd strony, a oglądającym postać źródłową umożliwiają zapoznanie się z komentarzem już na wstępie.

Koniec ramki

Rys. 3.8. Komentarze nie tylko mogą pomóc w reklamie Twojej pracy, ale także w przypomnieniu sposobów rozwiązania określonych kwestii, gdy w pół roku później będziesz wprowadzał na stronie zmiany
Rys. 3.9. Zaznacz ikonę komentarza w dokumencie, a w polu Comment okna właściwości wyświetlony zostanie tekst komentarza

Atrybuty strony

Nowy dokument otwierany w programie Dreamweaver nosi domyślny tytuł Untitled Document. Jedną z pierwszych rzeczy, od której zaczniesz projektowanie strony WWW, będzie najprawdopodobniej zmiana tego tytułu na taki, który będzie wyświetlany użytkownikom w trakcie ładowania strony. Jeśli jesteś nowicjuszem, należy Ci się krótkie wyjaśnienie. Tytuł strony WWW jest wyświetlany w górnym lewym rogu okna przeglądarki wyświetlającej stronę WWW. Rysunek 3.10 pokazuje, o co chodzi. Inne atrybuty, które być może będziesz chciał zmienić, to kolor i rodzaj tła (obraz jako tło) lub kolor połączeń. Okienko dialogowe Page Properties umożliwia takie zmiany.

Rys. 3.10. Zwróć uwagę na tytuł strony. Strona zaopatrzona w tytuł sprawia zdecydowanie bardziej profesjonalne wrażenie, niż Untitled Document

Początek ramki

Uwaga

Jeśli nie wiesz jeszcze, jak nazwać swój dokument, możesz ściągnąć i zainstalować rozszerzenie Paula Madara AutoTitle Untitled Documents, które automatycznie przekształca nazwę dokumentu w tytuł strony. Być może nie zawsze efekt końcowy będzie najszczęśliwszy, ale i tak lepszy niż tytuł domyślny. Zawsze możesz wrócić i zmienić tytuł później. Ściąganie dodatków, ich instalacja oraz stosowanie omówione jest w rozdziale 21.

Koniec ramki

Istnieje kilka metod wyświetlenia okienka dialogowego Page Properties (patrz rysunek 3.11). Można zastosować skrót klawiaturowy Ctrl+J, wybrać pozycję Page Properties w menu Modify, lub kliknąć prawym klawiszem myszki dowolnym obszarze okna dokumentu, wolnym od obiektów (wyjątek tu stanowi tekst, o ile nie jest umieszczony w tabeli lub obszarze innego obiektu), i wybrać z menu kontekstowego pozycję Page Properties.

Początek ramki

Uwaga

Klawiatury nowej generacji są wyposażone w specjalny klawisz, który działa tak, jak prawy klawisz myszki. Jeśli kursor znajduje się w „otwartej” przestrzeni okna dokumentu, możesz nacisnąć ten klawisz i korzystając z klawiszy ze strzałkami nawigować do pozycji Page Properties. Wspomniany klawisz nosi nazwę klawisza aplikacji i jest ulokowany z lewej strony prawego klawisza Ctrl. Klawiatury starszego typu mogą go nie mieć.

Koniec ramki

Rys. 3.11. W tym okienku dialogowym możesz zdefiniować wiele właściwości, w tym także tytuł strony

Oto lista atrybutów dostępnych w oknie Page Properties:

• Title - jest to tytuł strony WWW. Gdy przeglądarki sieciowe interpretują Twój dokument HTML, umieszczają zawartość tego pola na swoim pasku tytułu. Także serwisy wyszukujące korzystają z tytułu strony, aby wyświetlić notkę o Twojej stronie WWW. Tytuł jest najczęściej dołączany jako tekst opisujący stronę. Sposób definiowania tytułu strony w kodzie HTML jest następujący: <TITLE>Tytuł Twojej Strony</TITLE>.

Początek ramki

Uwaga

Teraz, w wersji 4 programu Dreamweaver, tytuł strony możesz w dowolnej chwili modyfikować bezpośrednio w oknie dokumentu. Pierwszy sposób polega na skorzystaniu z paska narzędzi. Sprawdź więc, czy pasek jest wyświetlany (wybierz pozycję Toolbar w menu View). Wpisz następnie żądany tytuł w polu Title paska narzędzi. Oto inny sposób: umieść znacznik obok pozycji Head Content w menu View (lub kliknij ikonę View Options na pasku narzędzi i wybierz pozycję Head Content) i kliknij ikonę Title. Tytuł strony staje się wówczas dostępny w inspektorze Property (wybierz pozycję Properties w menu Window, aby je wyświetlić). Z tej drugiej metody możesz korzystać także, aby zmienić inną zawartość sekcji HEAD.

Koniec ramki

• Background Image - ten atrybut umożliwia wskazanie obrazu jako tła strony. Dopuszczalne formaty pliku graficznego to GIF, JPEG, a nawet PNG. Jeżeli rozmiary obrazu są mniejsze niż zawartość sekcji BODY, tło zostanie złożone z powtórzeń obrazu - kafelków - ułożonych poziomo i pionowo.

W tym miejscu niezbędne są pewne wyjaśnienia. Jeśli nie chcesz, aby tło strony zostało złożone z powtórzeń obrazu, możesz (i musisz) zastosować kaskadowe arkusze stylów (CSS). Arkusze CSS zostały omówione szczegółowo w rozdziale 12. Składnia wyrażenia definiującego obraz jako tło jest następująca: <BODY BACKGROUND=”nazwa_obrazu.gif”>. Jak widzisz, ten atrybut pojawił się w znaczniku <BODY>. Pewne atrybuty (takie jak te, definiujące tło strony) muszą być umieszczane w znacznikach HTML i nie korzystają z własnych znaczników. Modyfikują one bądź rozszerzają pierwotną funkcję znacznika nadrzędnego. Podobnie, nie wszystkie właściwości strony definiowane są w znaczniku <HEAD>, ale ponieważ sterują wyglądem całej strony, umieszczane są właśnie tu.

Początek ramki

Uwaga

Korzystając z kaskadowych arkuszy stylów możesz narzucić zakaz składania tła strony z kafelków. W rozdziale 12. dowiesz się, jak to zrobić.

Koniec ramki

• Background - ten atrybut definiuje kolor tła strony. Kliknij próbkę koloru, aby rozwinąć paletę i wybrać kolor tła. Skorzystaj z próbnika, jeśli chcesz kolor pobrać z elementu na ekranie. Możesz także stworzyć własny kolor, wybierając ikonę System Color Picker. Paleta kolorów domyślnych zawiera kolory bezpieczne, obsługiwane w Internecie, które powinny wyglądać mniej więcej tak samo na każdym komputerze.
  Aby wybrać kolor z innej palety, rozwiń menu, które znajdziesz z prawej strony palety (klikając przycisk ze strzałką), i wybierz jedną z możliwości: Color Cubes, Continuous Tone, Windows OS, Mac OS lub Greyscale. Tylko kolory Color Cubes i Continuous Tone są w pełni bezpieczne. Jednak umieszczenie znacznika obok pozycji Snap to Web Safe sprawi, że Dreamweaver automatycznie będzie wybierał bezpieczny kolor najbliższy żądanemu. Kolory są reprezentowane w kodzie HTML przez liczby szesnastkowe, a składnia definicji koloru tła jest następująca: <BODY BGCOLOR=”#000000”>, gdzie #000000 to szesnastkowa reprezentacja koloru.

Początek ramki

Uwaga

Możesz korzystać także z tekstowych oznaczeń kolorów, wprowadzonych przez Netscape w wersji 1.1 przeglądarki Netscape Navigator. Zalecane są jednak kody szesnastkowe, ponieważ nie wszystkie przeglądarki interpretują oznaczenia tekstowe.

Koniec ramki

• Text - ten atrybut określa kolor tekstu na stronie WWW, nie będącego tekstem połączenia. Kliknij próbkę koloru, aby rozwinąć paletę i wybrać kolor tekstu. Składnia wyrażenia określającego kolor tekstu jest następująca: <BODY TEXT=”#339933”>.

• Links, Visited Links i Active Links - tutaj możesz wybrać kolory połączeń tekstowych na swojej stronie. Ustawienie Links określa kolor wszystkich nie odwiedzanych połączeń. Active Links to kolor wybieranych połączeń, a Visited Links, kolor połączeń odwiedzonych. Składnia kodu definiującego kolor połączenia jest taka: <BODY LINK=”#33FF00” VLINK=”#666666” ALINK=”#666600”>. Kolory pojawią się dopiero w oknie przeglądarki. W oknie dokumentu programu Dreamweaver wszystkie połączenia będą miały kolor taki jak połączenia nie odwiedzone.

• Left Margin, Top Margin, Margin Width i Margin Height - te ustawienia umożliwiają zdefiniowanie w pikselach wartości marginesów, które zastąpią wartości domyślne ustalane przez przeglądarkę. Microsoft stosuje marginesy lewy (leftmargin) i górny (topmargin), natomiast Netscape korzysta z atrybutów określających szerokość (marginwidth) i wysokość (marginheight). Składnia wyrażenia definiującego marginesy strony WWW jest następująca: <BODY LEFTMARGIN=”0” TOPMARGIN=”0” MARGINWIDTH=”0” MARGINHEIGHT=”0”>. Pozostawienie tych pól tekstowych pustych oznacza zaakceptowanie wartości domyślnych przeglądarki, które rzadko są równe zero. Aby zostały zastosowane marginesy zerowe, musisz im tutaj aktywnie przypisać wartości zerowe.

• Documect Encoding - jest to strona kodowa dokumentu, która określa kodowanie znaków na twojej stronie WWW. Domyślne kodowanie w większości przypadków to Western (Latin 1). Po zdefiniowaniu nowego typu, konieczne jest ponowne załadowanie strony. Składnia wyrażenia definiującego kodowanie znaków jest następująca: <META HTTP-EQUIV=”Content-type” CONTENT=”text/html; Character Set”>. Dodatkowe informacje na temat znaczników META znajdziesz w następnym punkcie.

• Tracing Image, Image Transparency - pierwsze z ustawień umożliwia wskazanie obrazu stosowanego jako „kalka” strony. Z kolei suwak Image Transparency pozwala dopasować przeźroczystość obrazu, aby odróżniał się od zawartości strony. Kalki w połączeniu z warstwami to szybka i prosta metoda tworzenia stron WWW. Została ona omówiona w rozdziale 10., „Korzystanie z warstw”. Składnia wyrażenia HTML jest w tym przypadku następująca: <BODY TRACINGSRC=”obraz_nazwa.gif” TRACINGOPACITY=”100”>. Kalka nie jest wyświetlana w przeglądarce - stanowi jedynie dla projektanta strony WWW punkt odniesienia.

• Document Folder - nie jest to opcja, którą można modyfikować. Jest to po prostu informacja o folderze lokalnym przechowującym bieżący dokument i ścieżce dostępu do niego. Informacja ta pojawi się dopiero wówczas, gdy dokument zostanie zapisany. Modyfikacja ulokowania dokumentu jest możliwa w oknie Site. Rozdział 13. „Okno Site i organizacja plików” dostarczy Ci więcej informacji na temat zarządzania plikami.

• Site Folder - nie jest to opcja, którą można modyfikować. Jest to po prostu informacja o folderze lokalnym przechowującym pliki witryny i ścieżce dostępu do niego. Podobnie jak poprzednio, modyfikacja ulokowania folderu jest możliwa w oknie Site. W rozdziale 13. dowiesz się jak definiować folder witryny.

Edycja kodu HTML

W programie Dreamweaver dostępnych jest kilka sposobów modyfikacji kodu HTML. Dokładnie rzecz biorąc istnieją cztery podstawowe metody, z których trzy odnoszą się do aktualnie stosowanego widoku strony. W programie masz do dyspozycji trzy widoki: projektu, (Design View), kodu i projektu (Code and Design View) i kodu (Code View). Aby przełączyć się do innego widoku, kliknij ikonę żądanego widoku na pasku narzędzi lub wybierz w menu View odpowiednią pozycję: Code, Code and Design lub Design.

Widok projektu (Quick Tag Editor)

Widok projektu (Design View) to nie tylko widok domyślny dla otwieranego dokumentu HTML, lecz także, jak się wydaje, najbardziej popularny z widoków. Oferuje bowiem twórcom stron WWW wybitnie projektowe środowisko pracy. Zapewnia więc efektywną pracę także i tym, którzy nie radzą sobie dobrze z kodem HTML, jest również użyteczny przy wstępnej fazie projektowania strony WWW i przy jej aktualizacji. Widok projektu jako taki nie udostępnia bezpośrednio kodu HTML, lecz Dreamweaver wyposażony jest w specjalny edytor - Quick Tag Editor - dzięki któremu nawet przy pracy w tym trybie możliwe jest wprowadzanie zmian w kodzie HTML.

Początek ramki

Uwaga

Chociaż widok projektu jest widokiem domyślnym dla dokumentów HTML, w przypadku plików innego typu, ustawienia określające ich domyślny sposób prezentowania są inne. Na przykład pliki źródłowe JavaScript (*.js) otwierane są domyślnie w widoku kodu. Odpowiednie ustawienia są dostępne w oknie dialogowym Preferences, dla kategorii File Types/Editors. Tryb zmiany ustawień został omówiony w rozdziale 2., „Dostosowywanie programu Dreamweaver do własnych potrzeb”.

Koniec ramki

Początek ramki

Uwaga

Dostęp do edytora Quick Tag Editor jest możliwy we wszystkich trzech widokach, ale omówienie tej kwestii najlepiej pasuje do punktu poświęconego widokowi projektu.

Koniec ramki

Aby uruchomić edytor Quick Tag Editor, wybierz pozycję Quick Tag Editor z menu Modify, zastosuj skrót Ctrl+T lub kliknij ikonę Quick Tag Editor, ulokowaną przy prawej krawędzi okienka właściwości Property Inspector.

Quick Tag Editor ma trzy tryby edycji, zależnych od aktualnie wybranego fragmentu kodu HTML: Insert HTML, Edit Tag i Wrap Tag. Choć Dreamweaver zazwyczaj trafnie wybiera tryb edycji, możesz przełączać się do pozostałych stosując skrót Ctrl+T.

Początek ramki

Uwaga

Skrót klawiaturowy Ctrl+T to jedyna droga prowadząca do kolejnych trybów edycji kodu HTML edytora Quick Tag Editor. Pozostałe metody stosowane do uruchamiania edytora zawodzą, bowiem Quick Tag Editor znika, gdy uaktywnienie przenoszone jest w inne miejsce.

Koniec ramki

Quick Tag Editor można ulokować w dowolnym miejscu ekranu - wystarczy kliknąć jego pasek tytułu i przeciągnąć. Jest to pomocne w pewnych sytuacjach, ponieważ Quick Tag Editor zazwyczaj pojawia się nad aktualnie zaznaczonym elementem lub nad kursorem. Wyjątek od tej zasady stanowi otwieranie edytora z poziomu okienka dialogowego właściwości Property Inspector. W tym przypadku okno edytora pojawia się obok okna właściwości. Chociaż większości użytkowników może to nie przeszkadzać, niektórzy nie lubią, gdy lista Tag Hints zasłania zaznaczony element (ustawienia edytora Quick Tag Editor można dostosować w okienku dialogowym Preferences, w kategorii Quick Tag Editor - informacje na temat tego okna znajdziesz w rozdziale 2).

Początek ramki

Uwaga

Aby przełączać się między widokami projektu i kodu, możesz stosować skrót klawiaturowy Ctrl+Tab. Musisz jednak być w jednym z widoków, aby przełączyć się do drugiego.

Koniec ramki

Tryb Insert HTML

Tryb Insert HTML to tryb domyślny, w którym zgłasza się Quick Tag Editor w przypadku, gdy wywołany zostanie bez wcześniejszego zaznaczenia elementu. W oknie edytora wyświetlane są tylko oba nawiasy ostre - otwierający i zamykający. Możesz tu wpisać same znaczniki, znaczniki z atrybutami oraz zawartość. Po wpisaniu, naciśnij po prostu Enter, a kod zostanie wstawiony do dokumentu. Ostatnio wstawiony znacznik i zawartość zostaną wyróżnione. Jeśli przerwiesz na chwilę pisanie, pojawi się lista Tag Hints, pokazana na rysunku 3.12, z propozycjami adekwatnymi do tego, co już wpisałeś. Po wpisaniu definicji znacznika i zawartości, nie musisz wprowadzać znacznika zamykającego. Quick Tag Editor zrobi to sam, co dodatkowo upraszcza zadanie. Ten tryb można stosować do wstawiania znaczników, które nie są automatycznie umieszczane w kodzie przez program, na przykład otoczonego złą sławą znacznika <marquee> (znacznik ten występuje na liście Tag Hints).

Początek ramki

Uwaga

Kliknięcie w obszarze projektu jest równoważne naciśnięciu klawisza Enter. W tym przypadku jednak kod nie zostanie podświetlony. Aby zamknąć Quick Tag Editor bez wprowadzania zmian w kodzie, naciśnij Esc. Przełączając się między trybami edycji edytora za pomocą skrótu Ctrl+T, pamiętaj także, że spowoduje to wprowadzenie zawartości edytora do kodu HTML.

Koniec ramki

Rys. 3.12. Lista Tag Hints to cena pomoc, jeśli nie pamiętasz wszystkich dostępnych znaczników

Tryb Edit Tag

Jeśli zaznaczysz element i wywołasz edytor Quick Tag Editor, pojawi się on domyślnie w trybie Edit Tag. W trybie tym, w przeciwieństwie do pozostałych trybów, prezentowany jest zaznaczony znacznik wraz z atrybutami. Aby zmodyfikować wyrażenie, zmień po prostu atrybuty oraz zawartość i naciśnij Enter (patrz rysunek 3.13). Podobnie jak w trybie Insert HTML, kliknięcie w obszarze projektu spowoduje wprowadzenie modyfikacji do kodu.

Tryb ten jest szczególny użyteczny przy wprowadzaniu atrybutów, które nie są obsługiwane przez Dreamweaver. Tak więc, możesz automatycznie wygenerować podstawowy fragment kodu, a następnie ręcznie, z poziomu edytora Quick Tag Editor, wprowadzić atrybuty, których Dreamweaver nie obsługuje.

Rys. 3.13. Edycja połączenia przy wykorzystaniu edytora Quick Tag Editor

Początek ramki

Uwaga

Inny sposób wywołania edytora Quick Tag Editor w trybie Edit Tag polega na skorzystaniu z menu kontekstowego. Wskaż żądany znacznik, kliknij prawym klawiszem myszki i wybierz z menu pozycję Edit Tag.

Koniec ramki

Tryb Wrap Tag

Jeśli zaznaczony element to niesformatowany tekst lub obiekt, Quick Tak Edytor zamelduje się w trybie Wrap Tag (patrz rysunek 3.14). Znacznik, który wybierzesz i umieścisz w polu definicji edytora „zawrze” w sobie zaznaczony element. Jeśli na przykład zaznaczony został tekst: To powinien być tekst pogrubiony,... ale nie jest, naciśnięcie Ctrl+T umożliwia szybkie zastosowanie pogrubienia - wystarczy po prostu wstawić między nawiasami B (<B>). Gdy naciśniesz Enter, zaznaczony tekst pojawi się jako pogrubiony.

Rys. 3.14. Znacznik, który pojawi się tutaj zawrze w sobie zaznaczony element

Początek ramki

Uwaga

Jeśli zaznaczony fragment zawiera otwierający lub zamykający znacznik HTML, Quick Tag Editor pojawi się w trybie Edit Tag, a znacznik nadrzędny zostanie zaznaczony.

Koniec ramki

Widok kodu i Code Inspector

Chociaż to miło korzystać z szybkiej i niezawiłej metody wstawiania i edycji kodu HTML, którą udostępnia Quick Tag Editor, umiejętność radzenia sobie z większymi blokami kodu pomoże początkującym lepiej zrozumieć wszystko to, co dzieje się na stronie WWW. Z kolei dla użytkowników przyzwyczajonych do tworzenia stron WW w edytorach tekstowych, takich jak Homesite, BBEdit czy innych, jest to łagodne przejście do świata WYSIWIG.

Początek ramki

Uwaga

Tu uwaga na marginesie. Dreamweaver jest teraz wyposażony w debuger JavaScript, który może być pomocny w rozwiązywaniu problemów ze skryptami. Narzędzie to zostało omówione w rozdziale 19., „Tworzenie skryptów JavaScript w programie Dreamweaver”.

Koniec ramki

Dreamweaver udostępnia dwie metody prezentacji kodu HTML (w rzeczywistości cztery, jeśli doliczyć widok kodu i projektu, który stanowi kombinację dwóch widoków, oraz edytor Quick Tag Editor). Pierwsza z nich to Code Inspector. Narzędzie Code Inspector było już obecne we wcześniejszych wersjach programu. Nowością w wersji 4 jest natomiast widok kodu. Zarówno widok kodu (Code View) jak i Code Inspector mają ten sam interfejs i funkcje. Różnica polega jedynie na tym, że Code Inspector pojawia się w samodzielnym, pływającym po ekranie oknie, a widok kodu to podstawowy interfejs edycji.

Początek ramki

Uwaga

Coraz więcej projektantów zaczęło korzystać przy projektowaniu stron WWW z dwóch monitorów. Jeden monitor pokazuje stronę w widoku projektu, natomiast drugi służy jako pulpit prezentujący palety i inne narzędzia. Tu mogłoby się znaleźć miejsce dla okna Code Inspector. Rosnąca popularność pracy na dwóch monitorach w pewnym, aczkolwiek mniejszym, stopniu jest wynikiem pojawienia się w programie Dreamweaver nowej opcji - widoku kodu i projektu. Tym widokiem zajmiemy się w następnym punkcie.

Koniec ramki

Aby przełączyć się do widoku kodu, kliknij ikonę Show Code View na pasku narzędzi lub wybierz pozycję Code w menu View. Bezpośrednie przełączenie między widokami projektu i kodu jest możliwe także przy pomocy skrótu Ctrl+Tab (pamiętaj jednak, że ta metoda jest skuteczna tylko wtedy, gdy jesteś w jednym z widoków). Aby otworzyć okno Code Inspector, naciśnij klawisz F10 lub wybierz pozycję Code Inspector w menu Window. Do dyspozycji masz także ikonę na mini-pasku szybkiego uruchamiania.

W widoku kodu (lub w oknie Code Inspector - te terminy mogą być stosowane wymiennie, a rozróżnienie wprowadzono jedynie w celu wyjaśnienia), można wstawiać obrazy i inne elementy HTML w taki sam sposób jak w widoku projektu. Jednak zamiast obrazu w postaci graficznej, widzisz go w postaci kodu HTML. Zmiany wprowadzane w widoku kodu nie są natychmiast implementowane. Aby zobaczyć ich efekt, musisz skorzystać z jednej z metod:

• Nacisnąć F5.

• Zastosować skrót Ctrl+Spacja.

• Kliknąć ikonę Refresh na pasku narzędzi lub w oknie właściwości Property Inspector.

• Przełączyć się do widoku projektu klikając ikonę Show Design View na pasku narzędzi lub stosując skrót Ctrl+Tab.

Menu otwierane ikoną View Options na pasku narzędzi udostępnia najczęściej stosowane w widoku kodu polecenia. Polecenia te są dostępne również w menu View jako menu podrzędne Code View Options. Oto wyjaśnienia funkcji poszczególnych pozycji:

• Word Wrap - określa czy kod HTML ma być obłamywany do nowego wiersza, gdy osiągnięty zostanie brzeg ekranu. Ta opcja jest używana jedynie jako narzędzie ułatwiające zrozumienie kodu w trakcie jego edycji lub przy prezentacji postaci źródłowej strony WWW z przeglądarki sieciowej. Obłamywanie kodu nie wpływa na sposób wyświetlania strony.

• Line Numbers - powoduje wyświetlenie numerów wierszy na lewym marginesie okna (patrz rysunek 3.15). Opcja jest użyteczna przy rozwiązywaniu problemów z kodem.

• Highlight Invalid HTML - powoduje zaznaczenie kodu uznanego przez program za błędny.

• Syntax Coloring - powoduje zastosowanie do elementów kodu kolorów zdefiniowanych w kategorii Code Colors okna dialogowego Preferences.

• Auto Indent - automatycznie wprowadza do kodu wcięcia zdefiniowane w kategorii Code Format okna dialogowego Preferences.

Rys. 3.15. Jeśli zajmiesz się na serio pisaniem skryptów JavaScript, numery wierszy staną się Twoimi najlepszymi przyjaciółmi

Inna użyteczna możliwość dostępna w widoku kodu to nawigacja w kodzie, do której dostęp daje ikona Code Navigation. Ta znajdująca się na pasku narzędzi ikona pozwala na nawigację między funkcjami JavaScript umieszczonymi w dokumencie. Jest to szybka i efektywna metoda poruszania się po kodzie JavaScript.

Widok kodu i projektu

Stosowany w widoku projektu Quick Tag Editor jest w większości wypadków wystarczający, ale czasami pojawia się konieczność edycji całego bloku tekstu lub zestawu znaczników. Nieustanne wywoływanie tego edytora byłoby w takiej sytuacji dokuczliwe i spowalniałoby pracę. Podobnie, jeśli jesteś nowicjuszem w świecie znaczników HTML i nie bardzo wiesz do czego „to” w rzeczywistości służy, to analiza kodu źródłowego HTML może być pomocna, aby nauczyć się czytać i analizować kod. Niestety nieustanne przełączanie się między widokami projektu i kodu jest czasochłonne i nużące.

Aby z tym skończyć, w wersji 4 programu Dreamweaver pojawił się jako novum łączony widok kodu i projektu. Umożliwia on bezpośrednią kontrolę nad projektem i kodem HTML prezentując stronę WWW zarówno w postaci WYSIWIG, jak i kodu źródłowego. Aby przełączyć się do widoku kodu i projektu, wybierz w menu View pozycję Code and Design lub kliknij ikonę Show Code and Design View na pasku narzędzi. Obszar roboczy okna zostanie wówczas podzielony na dwa panele. Domyślnie, kod HTML wyświetlany jest w górnym panelu, a widok projektu w dolnym.

Aby przełączać się między panelami, możesz korzystać ze skrótu klawiaturowego Ctrl+Tab, lub pozycji Switch Views menu View (pomocna jest także myszka - wystarczy kliknąć w żądanym panelu - przypis tłum.). Istnieje także możliwość zamiany miejscami obu paneli - innymi słowy panel projektu można przerzucić na górę. W tym celu wybierz z menu View pozycję Design View on Top lub z rozwijanego menu Options dostępnego na pasku narzędzi (patrz rysunek 3.16).

Rys. 3.16. Opcje dostępne w widoku kodu i projektu

Dostosować można także wzajemne proporcje obszarów zajmowanych przez panele widoków. Wystarczy za pomocą myszki przeciągnąć pasek je oddzielający (jest to linia pozioma wyświetlana bezpośrednio pod paskiem przewijania (o ile on jest) w panelu widoku kodu). Nad paskiem wskaźnik myszki zmienia swą postać, co jest wskazówką, że można dostosować wysokość okna. Kliknij więc i przeciągnij pasek w odpowiednie miejsce.

Nawet jeżeli dokonujesz edycji strony w widoku projektu, wszelkie zmiany są natychmiast odzwierciedlane w kodzie prezentowanym w panelu widoku kodu. Jedną z największych zalet tego widoku, a szczególnie dla tych, którzy dopiero rozpoczynają swe zmagania z językiem HTML, jest to, że po wstawieniu obrazu, zastosowaniu do tekstu pogrubienia, czy też po jakiejkolwiek innej operacji, widok kodu aktualizuje się natychmiast, co pozwala zobaczyć fragmenty kodu wstawione w każdym z kroków tworzenia strony. Niewątpliwie jest to pomocne przy nauce języka HTML.

Modyfikacje kodu HTML w panelu widoku kodu nie są już tak natychmiastowo przenoszone do panelu widoku projektu. Możesz wprowadzać w kodzie zmiany, ale na efekty zaczekasz. Aby je zobaczyć, musisz odświeżyć panel widoku projektu w taki sam sposób , w jaki to robiłeś w widoku kodu.

Paleta Reference

Z biegiem czasu niewątpliwie nauczysz się wielu znaczników HTML, niezależnie od swoich wcześniejszych doświadczeń. Jednak zapamiętanie wszystkich to sprawa trudna. Nawet jeżeli wszystkie poznasz, to na pewno próba opisania ich jednakowo precyzyjnie stanowiłaby pewne wyzwanie. Dodaj do tego jeszcze niezliczoną ilość atrybutów, elementów CSS, JavaScript i innych języków skryptowych, z których masz możność korzystać, a uzyskasz setki, jeśli nie tysiące elementów do zapamiętania. Większość osób potrzebowałaby najprawdopodobniej słownika, aby pomóc sobie w uporządkowaniu wszystkich możliwości.

Dreamweaver przyznaje tu słuszność i udostępnia całkowicie swobodnie pływający po ekranie, lecz zintegrowany z interfejsem programu, szeroko rozbudowany słownik i przewodnik po HTML-u, języku JavaScript i arkuszach CSS. Aby do niego dotrzeć, wybierz pozycję Reference w menu Window lub zastosuj skrót Ctrl+Shift+F1. Rozmiar czcionki możesz kontrolować, wybierając pozycję Small Font (mała czcionka), Medium Font (średnia) lub Large Font (duża) z rozwijanego menu otwieranego w prawym górnym rogu palety Reference.

Początek ramki

Uwaga

Na pasku narzędzi znajdziesz ikonę Reference - ona także zaprowadzi Cię do palety Reference, w której automatycznie pojawi się opis aktualnie zaznaczonego znacznika (lub punktu wstawiania).

Koniec ramki

Jak skorzystać z palety Reference:

1. Wybierz książkę, z której chcesz korzystać. Masz do wyboru: O'Reilly CSS Reference, HTML Reference i JavaScript Reference. Wyboru dokonujesz z listy rozwijanej Book za pomocą myszki lub klawiszy ze strzałkami. Klawisze PgUp i PgDown są także obsługiwane.

2. W zależności od wybranej książki, możesz teraz wybrać z listy styl, znacznik lub obiekt i wyświetlić na jego temat informacje.

3. Po wybraniu elementu z książki, wyświetlony zostanie jego ogólny opis (patrz rysunek 3.7, na którym pokazany jest opis znacznika <BLINK>). W opisie podana jest składnia, przykłady oraz ogólna charakterystyka funkcji danego elementu. Książka dla stylów CSS zawiera jedynie opisy, natomiast książki dotyczące języków HTML i JavaScript prezentują bogate informacje na temat atrybutów, właściwości i metod. Aby wybrać atrybut stowarzyszony ze znacznikiem HTML, czy też właściwość lub metodę obiektu JavaScript, skorzystaj z listy rozwijanej.

Paleta Reference jest kontekstowa. Oznacza to, że po zaznaczeniu znacznika w widoku kodu dowolnego z widoków i przełączeniu się do palety Reference, automatycznie wyświetlona zostanie informacja na temat wskazanej pozycji. Ta opcja działa tylko wówczas, gdy włączona jest opcja prezentacji elementów kodu w różnych kolorach.

W górnej części obszaru roboczego palety Reference znajdziesz wzmiankę na temat kompatybilności wybranego elementu z przeglądarkami Netscape Navigator i Internet Explorer, a jeśli jest kompatybilny, to dowiesz się, od której wersji. Jest tu także informacja dotycząca specyfikacji, w których element się pojawił (a więc na przykład CSS 1, HTML 4 lub DOM 1). Dodatkowe informacje to kwestia dziedziczenia stylu (książka CSS) oraz konieczności znacznika zamykającego (książka HTML).

Rys. 3.17. Paleta Reference prezentuje opis zaznaczonego w kodzie elementu. Na przykład <BLINK> to jeden ze znaczników - myślę, że większość projektantów stron WWW przyzna mi rację - który powinien być używany z niezwykłą ostrożnością

Czyszczenie kodu HTML

Po przygotowaniu strony WWW, bez wątpienia wielokrotnie wracałeś do niej i ślęczałeś nad kodem wiele razy, sięgając nawet po zewnętrzny edytor (tym zajmiemy się w następnym punkcie), a wszystko po to, aby strona była dokładnie taka, jaką ją sobie wyobraziłeś. Wreszcie koniec pracy, czyż nie?

No, cóż, to zależy od tego, jak dobrze sobie radzisz z pisaniem kodu HTML. Nie skłamię - jest w tym także pewna doza szczęścia. Większość jednak czasu zajmą Ci puste znaczniki (znaczniki, które nie mają żadnej zawartości między znacznikiem otwierającym a zamykającym), powtórzone znaczniki (które pojawiają się kilkakrotnie) i inny trudny do odczytania nieprawidłowy kod.

W programie Dreamweaver czyszczenie kodu HTML to proces bardzo prosty. Aby wyczyścić kod, wybierz pozycję Clean Up HTML z menu Commands. Po wybraniu w okienku dialogowym Clean Up HTML operacji porządkowania kodu (patrz rysunek 3.18), naciśnij OK. Cała operacja zajmie dłuższą lub krótszą chwilę, co zależy od złożoności i długości dokumentu HTML.

Rys. 3.18. Wyczyszczenie kodu HTML jest zawsze zalecane, szczególnie wówczas, gdy ktoś inny „dobierał się” do Twojego kodu

Oto lista dostępnych w okienku dialogowym Clean Up HTML opcji:

• Empty Tags - umożliwia usunięcie znaczników, które nie mają żadnej zawartości między znacznikiem otwierającym a zamykającym. Na przykład para <i></i> to znacznik pusty, który zostałby usunięty. Natomiast wyrażenie: <i>to jest kursywa</i> pozostałoby.

• Redundant Nested Tags - usuwa znaczniki zagnieżdżone. Znacznik zagnieżdżony to znacznik, którego znacznik nadrzędny jest taki sam. Dotyczy to także atrybutów. Na przykład w wyrażeniu: <U>To musi być podkreślone, aby ludzie <U>WIEDZIELI</U> co chcę powiedzieć</U> element U obejmujący wyraz „wiedzieli” zostałby usunięty.

• Non-Dreamweaver HTML Comments - usuwa komentarze umieszczone na stronie za pomocą innego niż Dreamweaver narzędzia.

• Dreamweaver HTML Comments - usuwa komentarze wprowadzone do kodu Twojej strony przez program Dreamweaver. W efekcie tego Dreamweaver przestałby rozpoznawać dany dokument jako stronę utworzoną w oparciu o szablon (jeżeli był to szablon). Przy aktualizacji szablonu, taka strona nie byłaby już aktualizowana. W podobny sposób wpłynęłoby to na elementy z biblioteki oraz na działanie opcji Roundtrip - komentarze są w niej wykorzystywane do stowarzyszania obrazów z plikami źródłowymi .png.

• Specific Tag(s) - usuwa wskazane znaczniki, takie jak na przykład <B>, które zawadzają Ci w dokumencie. Możesz wpisać w polu tekstowym kilka znaczników, oddzielając je przecinkami (na przykład b, blockquote). Usunięte zostaną zarówno znaczniki otwierające, jak i zamykające.

• Combine Nested <font> Tags When Possible - ta opcja pozwala połączyć kilka znaczników formatowania czcionki w jeden znacznik, jeśli poszczególne znaczniki zawierają różne atrybuty (lub gdy podobne atrybuty mają identyczną wartość). Oto przykład: <font color=”#339933”><font face=”Arial, Helvetica, sans-serif”> Tak sformatowany tekst jest koloru zielonego, a zastosowana czcionka to Arial</font></font>; po scaleniu znaczników, definicja wyglądałaby tak: : <font color=”#339933” face=”Arial, Helvetica, sans-serif”>.

• Show Logon Completion - umożliwia wyświetlenie raportu, w którym zawarta jest informacja o procesie czyszczenia kodu.

Korzystanie z edytorów zewnętrznych

Gdy oswoisz się nieco z edycją kodu HTML w widoku kodu lub jeśli zawsze z tym sobie dobrze radziłeś, a i teraz nie chcesz wyjść z wprawy, możesz sięgnąć po zewnętrzne edytory kodu HTML. Chociaż edytor zewnętrzny jest całkowicie niezależny od programu Dreamweaver, ten ostatni jest w stanie zintegrować się z edytorem tekstowym. Opcja ta nosi nazwę Roundtrip HTML.

Co to jest Roundtrip HTML?

Roundtrip HTML jest bardziej procesem niż czymkolwiek innym - jest to proces otwierania edytora zewnętrznego, modyfikacji dokumentu w osobnym programie, zapisywania pliku i automatycznego śledzenia przez Dreamweaver zmian i wprowadzania ich do pliku. Po dokonaniu modyfikacji kodu w edytorze zewnętrznym, Dreamweaver będzie chciał ponownie załadować dokument. Umożliwi mu to zinterpretowanie zmienionego kodu HTML i przepisanie go już z uwzględnieniem zmian, zgodnie z ustawieniami kategorii Code Rewriting okna dialogowego Preferences. Należy pamiętać, że Dreamweaver nie zmieni znaczników, których nie rozpoznaje. Oznaczy takie znaczniki jako niepoprawne, lecz ich nie przepisze. Jest to użyteczne przy edycji dokumentów ColdFusion lub Acive Server Pages (.ASP) w programie Dreamweaver.

Homesite, BBEdit, TextPad i Notepad

Homesite to domyślny edytor zewnętrzny dostarczany z programem Dreamweaver w wersji dla Windows. BBEdit to domyślna wersja dla systemu Macintosh. Aby skorzystać z edytora zewnętrznego, musisz zdefiniować w programie Dreamweaver ustawienia umożliwiające poprawne rozpoznawanie edytora:

1. Wybierz pozycję Preferences w menu Edit i wskaż kategorię File Types/Editors. Okno dialogowe Preferences można wywołać korzystając ze skrótu klawiaturowego Ctrl+U.

2. Kliknij przycisk Browse, z prawej strony pola External Code Editor (jeśli korzystasz z komputera Macintosh, przeczytaj uwagę poniżej).

3. Nawiguj do właściwego programu .exe i naciśnij przycisk Open.

Możesz tu także określić sposób reakcji programu Dreamweaver na zmodyfikowany plik. Możesz także zdecydować, czy przed otwarciem pliku w edytorze zewnętrznym należy go zapisać.

Początek ramki

Uwaga

Dreamweaver dla komputerów Macintosh jest zintegrowany z programem BBEdit, który jest dostarczany na płycie CD zawierającej program. Jeśli chcesz korzystać z innego edytora, musisz usunąć znacznik z pola Enable BBEdit Integration. Integracja z BBEdit działa podobnie jak widok kodu - śledzona jest pozycja punktu wstawiania lub obszaru zaznaczonego i na tej podstawie automatycznie uwzględniane są zmiany wprowadzone w którymkolwiek z programów.

Koniec ramki

Aby uruchomić edytor i wyświetlić w nim bieżący dokument, wybierz w menu Edit pozycję Edit with nazwa_Edytora lub zastosuj skrót klawiaturowy Ctrl+E.

Podsumowanie

W tym rozdziale przekonałeś się, jak rozbudowanym i mocnym narzędziem staje się Dreamweaver, gdy pojawia się konieczność ręcznej edycji kodu HTML. Poznałeś podstawy języka HTML i jego struktury, dowiedziałeś się także jak nawigować między trzema widokami oferowanymi przez Dreamweaver i jak z nich korzystać. Mówiliśmy również o palecie Reference (która powinna stać się stałym towarzyszem twórców stron WWW) oraz o ostatnich zabiegach kosmetycznych, którym poddawane są strony WWW - o czyszczeniu kodu HTML.

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 G:\DREAM_trans\rozdz03.doc

---