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ć:

q       Znaczniki i atrybuty sekcji HEAD i BODY

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

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

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

q       Korzystanie z opcji porządkowania kodu HTML

q       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.

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.

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

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.

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.

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.

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...