Rozdział 23. Skrypty i języki oparte o znaczniki

Przychodzi taki moment w życiu każdego projektanta stron WWW, że kierowany ciekawością sięga do kodu HTML generowanego przez program Dreamweaver. Na początku kod wydaje się czarną magią, lecz z czasem zaczyna mieć sens. W rzeczywistości, wielu projektantów przechwala się, że jedynie podstawowy projekt przygotowują za pomocą Dreamweavera, a całą resztę dopracowują ręcznie, przy użyciu edytora typu Notatnik.

Dreamweaver jest mądrym narzędziem. Jego twórcom z firmy Macromedia przyświecał nadrzędny cel - stworzyć narzędzie, z którego inni będą chcieli korzystać. Wersja 4 dała projektantom szybki dostęp do tych części witryny, które są im najbardziej potrzebne - do kodu źródłowego.

W tym rozdziale zajmiemy się następującymi zagadnieniami:

• Widok kodu

• Kolory elementów kodu

• Numery wierszy

• Diagnostyka

• XML

• XHTML

Wojownik kodu

Czy jesteś wojownikiem kodu? Wojownik kodu to ktoś, kogo zainteresował proces powstawania stron WWW i zadał sobie pytanie „Jak ten trik został zrobiony? Czy ja też tak mogę?”.

A ty? Czy zdarzyło Ci się kiedykolwiek wyświetlić w przeglądarce postać źródłową strony WWW? Jeśli odpowiesz: „Tak”, jesteś wojownikiem. Twoje zainteresowanie zostało rozbudzone i ciekawość nie da Ci już spokoju - musisz wiedzieć, jak kod został napisany.

Dreamweaver rozwiązuje problemy wojowników kodu. Nie musisz już zmagać się z długimi skryptami w Notatniku, aby rozgryźć parę sztuczek. Dreamweaver pozwala wyświetlić postać źródłową dokumentu bezpośrednio z poziomu narzędzi pracujących w oparciu o ideę WYSIWYG, co pokazuje rysunek 23.1.

Rys. 23.1. Okno widoku kodu umożliwia twórcy stron WWW natychmiastowy dostęp do postaci źródłowej strony

Rozważne używanie podglądu kodu daje twórcy stron WWW niesamowite możliwości. Początkujący mogą się w ten sposób uczyć języka HTML, a doświadczeni twórcy zyskują potężne narzędzie.

Widok kodu

Przycisk włączający widok kodu jest zlokalizowany w lewym górnym rogu okna programu Dreamweaver, obok dwóch innych przycisków (patrz rysunek 23.2).

Rys. 23.2. Dreamweaver umożliwia użytkownikowi korzystanie z widoku kodu, projektu oraz widoku stanowiącego połączenie dwóch poprzednich

Te trzy przyciski umożliwiają prezentację tworzonego dokumentu w różnych widokach:

• Show Code View - przycisk widoku kodu

• Show Code and Design View - przycisk widoku kodu i projektu

• Show Design View - przycisk widoku projektu

Każdy z widoków umożliwia inny sposób pracy nad tworzoną stroną WWW.

Widok projektu

Najczęściej stosowanym widokiem jest widok projektu (Design View). Jest to jednocześnie widok domyślny. Prezentuje on wszystkie obiekty strony w taki sposób, w jaki zostaną one wyświetlone w przeglądarce. Jest więc to widok oparty o ideę WYSIWIG (What You See Is What You Get). Ponadto pozwala on przeciągać elementy - takie jak warstwy, tabele i obrazy - w inne miejsca strony, bez konieczności ingerowania w kod HTML i JavaScript.

Widok kodu

Widok kodu (Code View) jest nowością w wersji 4 Dreamweavera. Wybranie go powoduje przejście ze środowiska typu WYSIWIG do prezentacji dokumentu w postaci źródłowej. Rysunek 23.3 pokazuje okno programu Dreamweaver właśnie w widoku kodu.

Rys. 23.3. Widok kodu prezentuje dokument w postaci źródłowej

Widok kodu i projektu

Możesz w jednym widoku mieć wszystko co najlepsze w obu widokach. Pozwala na to widok kodu i projektu (Code and Design View). W jednym panelu - projektu - twórca może przeciągać obiekty na stronie, a w drugim - kodu - śledzić związane z tym zmiany w kodzie. Rysunek 23.4 prezentuje ten podwójny widok.

Rys. 23.4. W trakcie modyfikacji projektu twórca strony ma dostęp do kodu, bez konieczności przełączania się między programami

Ćwiczenie 23.1. Wyświetlenie dokumentu w widoku kodu i projektu

Widok kodu i projektu pozwala mniej doświadczonym twórcom stron WWW śledzić zmiany w kodzie HTML wygenerowane w trakcie pracy w trybie WYSIWIG. Oto jak można korzystać z tego widoku:

1. W pustym oknie dokumentu programu Dreamweaver kliknij przycisk Show Code and Design View.

2. Obserwuj panel kodu. Pomimo, iż dokument jest pusty, w panelu prezentowany jest kod HTML. Zobaczysz między innymi znaczniki <HTML>, <TITLE>, <META> i <HEAD>.

3. Korzystając z palety obiektów, wstaw na stronie tabelę (ikona Insert Table) o 3 kolumnach (pole Columns), 3 wierszach (pole Rows) i określ jej szerokość jako 75% (pole Width).

4. W panelu kodu pojawi się element TABLE. W obrębie tworzących go znaczników <TABLE> i </TABLE> znajdziesz znaczniki <TR> i <TD>. Możesz każdy z nich poddać modyfikacjom.

5. Zaznacz znacznik <TABLE WIDTH=75%> i zmień go w taki sposób: <TABLE WIDTH=600px>. Szerokość tabeli wyświetlanej w panelu projektu zmieni się z równej 75% okna przeglądarki na 600 pikseli (pamiętaj, że aby zobaczyć efekt wprowadzonych zmian, konieczne jest odświeżenie widoku projektu za pomocą przycisku Refresh Design View na pasku narzędzi okna Dreamweavera lub korzystając z klawisza F5 - przypis tłumacza).

6. Odszukaj pierwszy ze znaczników <TR> i zmień jego zawartość na taką: <TR BGCOLOR=”#CCFFCC”>. Spowoduje to zastosowanie do pierwszego wiersza tabeli jasnozielonego tła.

Nieustannie zmieniające się standardy sieciowe wymagają od twórców stron umiejętności wprowadzania modyfikacji bezpośrednio w kodzie, aby móc stosować najnowsze opcje. Jest to jeszcze ważniejsze w przypadku XML i XHTML.

Inspektor Code

Poprzednie wersje Dreamweavera umożliwiały dostęp do kodu tylko w oknie Code Inspector. Jest to pływająca paleta, którą w trakcie pracy można przycumować do innych palet. Rysunek 23.5 pokazuje ją przycumowaną do palet Objects i CSS Styles.

Rys. 23.5. Okno Code Inspector można przycumować do innych palet i inspektorów

Inspektor Code przycumowany do innych palet i inspektorów ma pewną przewagę nad widokami kodu oraz kodu i projektu. Są w nim dostępne wszystkie narzędzia i opcje widoku kodu, w więc możesz korzystać z zawijania wierszy i ich numeracji, a w trakcie prac nad stroną w widoku projektu, inspektor Code jest zawsze pod ręką,

Niestety zaleta inspektora Code jest także jego wadą. Na pływającej palecie Code Inspector ciąży ta sama klątwa, co na wszystkich pozostałych paletach: paleta zabiera cenne miejsce. Obszar roboczy na ekranie monitora ma ograniczoną powierzchnię. Dodatkowa paleta oznacza, że obszar projektu pomniejszony zostanie o zajmowany przez nią obszar.

Z tego względu o tej czwartej opcji nie mówi się wiele. Widoki kodu oraz kodu i projektu są więc lepszym rozwiązaniem.

Wizualne wsparcie

Możliwość pracy na poziomie kodu źródłowego to zasadnicze wymaganie zgłaszane przez twórców skryptów JavaScript i stron WWW. Widok kodu, dostępny w programie Dreamweaver, zaspakaja je. W celu przyspieszenia prac, widok kodu zaopatrzono w szereg narzędzi. Aby je zobaczyć, wybierz w menu View pozycję Code View Options. Są to:

• Word Wrap (zawijanie wierszy)

• Line Numbers (numeracja wierszy)

• Highlight Invalid HTML (zaznaczanie błędnego kodu HTML)

• Syntax Coloring (stosowanie kolorów do elementów kodu)

• Auto Indent (stosowanie wcięć)

Bardzo użyteczne są opcje Line Numbers i Sytax Coloring. Konieczność samodzielnego liczenia wierszy byłaby prawdziwym utrapieniem. Dzięki możliwości wyświetlenia numeracji z lewej strony kodu, analiza nawet najdłuższych skryptów nie sprawia kłopotu.

Syntax Coloring to narzędzie pozwalające zaoszczędzić czas. Poszczególnym elementom składni kodu można przyporządkować różne kolory. Na przykład zwykły HTML jest wyświetlany na niebiesko, tekst jest czarny, znaczniki <script> są czerwone, a wpisany skrypt jest zielony.

Jak zapewne przypuszczasz, ustawienia kolorów elementów kodu można dostosowywać. W tym celu otwórz okno dialogowe Preferences (wybierz pozycję Preferences w menu Edit) i wybierz kategorię Code Colors (patrz rysunek 23.6).

Rys. 23.6. Kolory elementów kodu można zmieniać

Ćwiczenie 23.2. Modyfikacja kolorów w widoku kodu

Nauczysz się teraz zmieniać kolory kodu i dowiesz się dlaczego może to być korzystne.

1. Wyświetl dokument w widoku kodu. Otwórz plik --> COLOR[Author:r] _SYNTAX.HTM, który znajdziesz na płycie CD.

2. Z lewej strony wyświetlany jest niebieski margines, a na nim numery wierszy. Elementy kodu są w domyślnych kolorach. Zajmiemy się ich dostosowaniem.

3. Wybierając z menu View pozycję Code View Options, a następnie pozycję Syntax Coloring z menu podrzędnego możesz przełączać się między opcją stosowania do kodu kolorów, a kodem w kolorze czarnym.

4. Strona WWW zawiera prostą animację Flash. Oprócz animacji jest na niej także prosty skrypt JavaScript, który powiększa sekwencję wideo. Przyjrzyj się skryptowi. Znacznik otwierający <SCRIPT> jest w kolorze czerwonym. Rozpoczyna on skrypt JavaScript. Znacznik zamykający także jest czerwony. Kod JavaScript między oboma znacznikami jest w różnych kolorach: na przykład deklaracja zmiennej, var, w wierszu 8., jest koloru niebieskiego, a jej nazwa (FDK_loaded) jest czarna. Niżej, w wierszu 33., rozpoczyna się skrypt, który identyfikuje stosowany moduł dodatkowy. Znaczniki <OBJECT> i <EMBED> to znaczniki firm Microsoft i Netscape stosowane do identyfikacji modułów dodatkowych. Na przykład znacznik <OBJECT> jest czerwony. Zauważ jednak, że znacznikowi Netscape także przyporządkowany został identyfikujący go unikatowy kolor - znacznik <EMBED> jest niebieski, podobnie jak znaczniki przenoszące parametry. W następnym punkcie dowiesz się, jak to zmienić.

5. Wybierz z menu Edit pozycję Preferences. W wyświetlonym oknie dialogowym Preferences wybierz kategorię Code Colors. Przewiń listę Tag Specific, aż natrafisz na EMBED. Kliknij opcję wyboru koloru i wpisz w polu koloru jego kod szesnastkowy #009933.

6. Zaznacz pole wyboru Apply Color to Tag Contents. Wymusi to zastosowanie koloru #009933 także do zawartości znacznika <EMBED>. Naciśnij OK.

7. Wiersze 39-40 będą teraz w kolorze zielonym. Poeksperymentuj, zmieniając kolory skryptów.

Oprócz opcji Syntax Coloring i Line Numbers masz do dyspozycji narzędzia Word Wrap i Auto Indent. Oba pozwalają poprawić sposób prezentacji skryptów. Opcja Word Wrap wymusza zawijanie długich wierszy, które uciekają z pola widzenia. Stwarza to wrażenie, iż skrypt zajmuje kilka linii. W rzeczywistości jest on nadal w jednym wierszu. Udowadnia to wyłączenie opcji Word Wrap. Rysunek 23.7 pokazuje jak wygląda zawijanie wierszy kodu. Analizując przykład, zwróć uwagę na numery wierszy. Pewne linie kodu nie są numerowane - jest to efekt zawijania.

Rys. 23.7. Narzędzie Word Wrap pozwala zobaczyć kod, który w normalnym widoku pozostałby ukryty poza prawą krawędzią okna edytora

Narzędzie Auto Indent wprowadza wcięcia do określonych sekcji kodu. Dreamweaver stosuje takie wcięcia automatycznie, przy generowaniu kodu w widoku projektu. Kod, w którym zastosowano wcięcia, jest łatwiejszy w odbiorze. Jednak wcięcia nie zawsze są stosowane - mogą nie być, gdy kod powstał w innym programie lub napisano go ręcznie. Wówczas odczytanie kodu jest trudniejsze. Aby je ułatwić, można zastosować opcję Auto Indent.

Początek ramki

Uwaga

Zastosowanie opcji Auto Indent nie zmienia kodu. Stanowi tylko wizualną pomoc w jego odczycie, taką samą jak włączenie zawijania wierszy czy zastosowanie różnych kolorów do poszczególnych elementów kodu. Wyłączenie opcji powoduje przywrócenie poprzedniej struktury kodu.

Koniec ramki

Ostatnim z narzędzi wspomagających pracę w widoku kodu jest opcja Highlight Invalid HTML. Mówiąc w skrócie, opcja powoduje zaznaczenie na żółto kodu HTML, który nie jest rozpoznawany przez program Dreamweaver. Na przykład znaczniki, które nie zostały poprawnie zamknięte, pojawią się na jasnożółtym tle.

Pomoc podręczna

Przy nieustannie rozbudowującym się słownictwie programistycznym (HTML, CSS, JavaScript itd.), coraz łatwiej zapomnieć do czego dany element służy. Czy znacznik <B> działa tak samo jak znacznik <STRONG>? Aby uporać się z tym problemem, Dreamweaver udostępnia twórcom stron nieocenione narzędzie: paletę Reference.

Aby ją wyświetlić, możesz skorzystać ze skrótu Ctrl+Shift+F1 (użytkownicy komputera Macintosh wybierają Cmd+Shift+F1) lub wybrać w menu Window pozycję Reference. Rysunek 23.8 prezentuje paletę Reference.

Rys. 23.8. Paleta Reference to proste w użyciu narzędzie informacyjne

Paleta Reference działa tylko wtedy, gdy włączono opcję Syntax Coloring. Jest to narzędzie kontekstowe. Co to znaczy? Zaznacz znacznik w widoku kodu i kliknij na pasku narzędzi przycisk Reference. Najpierw zostanie przeanalizowany typ kodu: HTML, JavaScript lub CSS. Odnośniki na temat kodu pochodzą z książek opublikowanych przez O'Reilly Press. Na rysunku 23.9 paleta Reference prezentuje informacje na temat znacznika <TD>. W oknie wyświetlany jest opis znacznika oraz przykłady jego zastosowania. Im bardziej złożone znaczniki, tym bardziej rozbudowane informacje na ich temat.

Rys. 23.9. Paleta Reference

Ćwiczenie 23.3. Korzystanie z palety Reference

W kolejnych punktach znajdziesz opis korzystania z palety Reference:

1. Otwórz plik COLOR_SYNTAX.HTM, który znajdziesz na płycie CD. Wyświetl go w widoku kodu.

2. Zaznacz w wierszu 2. znacznik <HEAD> i uruchom paletę Reference klikając przycisk <?> na pasku narzędzi. Jaki uzyskałeś efekt? W oknie palety wyświetlona została informacja na temat znacznika <HEAD> pochodząca z O'Reilly HTML Reference.

3. Zaznacz w wierszu 10. wyraz function i ponownie kliknij przycisk Reference. Wynik wskazuje, że jest to termin JavaScript, a w oknie palety wyświetlane jest jego wyjaśnienie.

Paleta Reference to wspaniałe narzędzie, które pomoże Ci zrozumieć nową składnię kodu.

Usuwanie błędów

Przy ręcznej modyfikacji kodu pomyłki zdarzają się zawsze. Wszyscy je robią, a szczególnie wówczas, gdy kod jest skomplikowany. Aby zminimalizować prawdopodobieństwo błędu w skrypcie, Dreamweaver udostępnia narzędzie usuwania błędów, które dokona analizy skryptu.

Ćwiczenie 23.4. Usuwanie błędów

Narzędzie usuwania błędów - Debugger - działa w sprzężeniu z przeglądarką. Aby zobaczyć je w działaniu:

1. Otwórz plik DEBUG.HTM, który znajdziesz na dołączonej do książki płycie CD. W kodzie źródłowym tego dokumentu popełniono z premedytacją kilka błędów. Najpierw jednak wyświetl stronę w przeglądarce - naciśnij F12. Błędy uniemożliwiają poprawne wykonanie skryptów. JavaScript to język czarno-biały - skrypt albo działa, albo nie działa.

2. Teraz raz jeszcze wyświetl stronę, lecz tym razem korzystając ze skrótu Alt+F12. Inicjuje to narzędzie usuwania błędów.

3. Narzędzie uruchomi się i zatrzyma na wierszu 8. Zgłosi komunikat, że składnia tej linii kodu nie jest poprawna. Twórca strony może teraz dokonać analizy kodu, aby określić przyczynę błędu. I rzeczywiście - pierwszy wyraz to VARS, a poprawna deklaracja zmiennej to var. Zmień postać wyrażenia i zapisz dokument.

4. Uruchom ponownie narzędzie testowania. Tym razem zatrzyma się ono na wierszu 32. Jeśli wiersz ten nie zostanie zaznaczony, naciśnij przycisk Go to Line. Tu także określ przyczynę błędu. Zastąp otwierającą wiersz cyfrę 4 wyrazem for. To usunie błąd.

Dzięki narzędziu usuwania błędów polowanie na błędy w kodzie trwa znacznie krócej.

Twarzą w twarz z XML

Oto początek nowej ery. Skromna przeglądarka zaczyna się zmieniać. Nowy, ubogi kuzyn zastępuje HTML i może stać się „lingua franca” sieci Internet - to XML, eXtensible Markup Language.

XML to środowisko skryptowe, które w żaden sposób nie zależy od wsparcia przeglądarki. Strona nie musi już być tworzona pod kątem przeglądarek Netscape Navigator 3, 4 i 6 i z uwzględnieniem wszystkich odmian przeglądarek Internet Explorer. XML odbiera przeglądarce obsługę standardów i oddaje ją w ręce twórcy stron. No dobrze, a jak się to odbywa?

Struktura języka XML wydaje się być podobna do struktury języka HTML. Strony tworzone są przez umieszczoną w znacznikach zawartość. Znaczniki nie formatują jednak zawartości. Za wygląd dokumentu w urządzeniach odbiorczych (na ekranie, na wydruku) odpowiadają już zewnętrzne kaskadowe arkusze stylów lub przeznaczone dla dokumentów XML arkusze stylów XSL (Extensible Stylesheet Language), informujące o sposobie prezentacji elementów objętych poszczególnymi znacznikami. Przeglądarka, niezależna od domyślnych standardów, zmuszana jest do prezentacji dokumentów XML zgodnie z wizją ich twórcy.

Oto przykład fragmentu postaci źródłowej dokumentu XML:

<?xml version=”1.0”?>

<newsfeed>

<chanel cid=”about.entertainment.hl”

title=”About.com: Entertainment”

date=”05/03/2000”

time=”11:17 PST”>

<headline

href=””http://log.isyndicate.com:8880/pscripts/hit/kixbiqvkczawz%2526ijwcb.mvbmzbiqvumvb.pt%2526pbbx%253a%252f%252fzilqw.ijwcb.kwu%252fmmzbiqvumvb%252fzilqw%252ftqjzizg%252femmstg%252fii597355i.pbu%25258nXU%253d10_656_B”

date=””Thu, May 04, 2000 11:05 AM”

time=”11:05 PST”>Webcasters of the World Unite</headline>

<headline

href=””http://log.isyndicate.com:8880/pscripts/hit/kixbiqvkczawz%2526ijwcb.mvbmzbiqvumvb.pt%2526pbbx%253a%252f%252femjewzab.ijwcb.kwu%252fmvmzbiqvumvb%252fzilqw%252femjewzab%252ftgjzizig%252fii505755i.pbu%25258nXU%253d10_657_B”

date=””Thu, May 04, 2000 11:05 AM”

time=”11:05 PST”>Elements of Bad Design</headline>

<headline

href=””http://log.isyndicate.com:8880/pscripts/hit/kixbiqvkczawz%2526ijwcb.mvbmzbiqvumvb.pt%2526pbbx%253a%252f%252fktiaaqkbd.ijwcb.kwu%252fmvmzbiqvumvb%252fktiaaqkbd%252ftqjzizg%252femmstg%252fii505655i.pbu%25258nXU%253d10_656_B”

date=””Wed, May 03, 2000 11:17 AM”

time=”11:17 PST”>Senator Coleman?</headline>

</channel>

<channel cid=”hollywood.news”

title=”Hollywood Online: News”

date=”05/04/2000”

time=”04:03 PST”>

<headline

href=””http://log.isyndicate.com:8880/pscripts/hit/kixbiqvkczawz%2526pwttgewwl.vmea%2526pbbx%253a%252f%252feee.pwttgewwl.kwu%252fvmea%252fbwxabwzqma%252f50-59-7555%252fpbut%252f6-8.pbut”

date=””Thu, May 04, 2000 04:03 PM”

time=”04:03 PST”>EXTRA: All About the &apos;Disgusting&apos; Rap</headline>

<headline

href=””http://log.isyndicate.com:8880/pscripts/hit/kixbiqvkczawz%2526pwttgewwl.vmea%2526pbbx%253a%252f%252feee.pwttgewwl.kwu%252fvmea%252fbwxabwzqma%252f50-59-7555%252fpbut%252f6-9.pbut”

date=””Thu, May 04, 2000 04:03 PM”

time=”04:03 PST”>B.O. FORECAST: &apos;Gladiator&apos; Steps Into Ring</headline>

</channel>

</newsfeed>

Jest to prosty dokument XML pobierający informacje. Formatowanie zostanie wprowadzone w przeglądarce za pośrednictwem zewnętrznego kaskadowego arkusza stylów.

Na dokument XML składają się następujące elementy:

• Treść o narzuconej strukturze

• Definicja typu dokumentu

• CSS i XLS

XML to pierwszy język, który jest naprawdę niezależny od platformy systemowej oraz internetowych urządzeń i produktów. Poprawnie sformatowany dokument XML będzie wyświetlany zarówno w oknie przeglądarki (na przykład takiej jak Netscape Navigator 6), na ekranie telefonu komórkowego Nokia (przy wykorzystaniu WML, Wireless Markup Language), jak i w urządzeniach takich jak pager Motorola i Palm PDA.

Treść o narzuconej strukturze kontra treść o narzuconym wyglądzie

Struktura dokumentu XML tworzona jest za pomocą znaczników i ma następującą postać:

<?xml version=”1.0”>

<library>

<Book>

<Title>Flash 5 Magic</Title>

<Author>Scott Hamlin and David Emberton</Author>

<Category>Web Publishing </Category>

</Book>

<Book>

<Title>Inside Dreamweaver 4</Title>

<Author>Various</Author>

<Category>Web Publishing </Category>

</Book>

<Book>

<Title>Dreamweaver 4 Magic</Title>

<Author>Al. Sparber</Author>

<Category>Web Publishing </Category>

</Book>

</library>

Pierwszy wiersz kodu definiuje dokument jako dokument XML: <?xml version=”1.0”>. Taka deklaracja musi się znaleźć w każdym dokumencie XML, aby umożliwić jego prawidłową interpretację.

Struktura XML-a przypomina strukturę HTML-a. Dokument w języku XML, tak jak w przypadku HTML, przechowywany jest w zwykłym pliku tekstowym. Podobnie jak w przypadku HTML, składa się na niego treść, z której za pomocą znaczników wyodrębnione zostały mniejsze elementy i opisana została struktura logiczna dokumentu. Jednak prawda jest taka, że znaczniki XML nie mają nic wspólnego ze znacznikami HTML. Jeśli usiłowałbyś wyświetlić dokument XML w przeglądarce Netscape Navigator 4, nie rozpoznałaby ona dokumentu i nie byłaby w stanie go sformatować.

Główną zaletą dokumentu XML jest brak informacji o atrybutach elementów. Znaczniki mogą być zarządzane i modyfikowane za pomocą skryptów przez serwer przysyłający dokumenty lub w przeglądarce WWW za pomocą języka JavaScript i CSS.

Dzięki wydzieleniu zawartości, dokument może być używany przez wiele programów. Ten sam plik XML można dostarczyć przeglądarce Internet Explorer i odtwarzaczom Flash.

Możliwości te można zobaczyć w programie Dreamweaver, a szczególności sposób, w jaki program używa języka XML do sterowania swoimi funkcjami.

Ćwiczenie 23.5. XML w programie Dreamweaver

To ćwiczenie

1. Odszukaj na dołączonej do książki płyty CD rozszerzenie MX157851_SITEIMPEXP1_0_3.MXP i zainstaluj je, korzystając z menedżera rozszerzeń. Rozszerzenie umożliwia eksport ustawień konfiguracyjnych witryny do pliku XML. Plik ten można następnie zaimportować do innych wersji Dreamweavera. Dzięki temu pełny zestaw ustawień konfiguracyjnych Twojej witryny jest w nich natychmiast dostępny, bez konieczności ręcznej konfiguracji witryny.

2. Otwórz Dreamweavera. Wybierz z menu File pozycję Export, a następnie pozycję Export Site z menu podrzędnego. W oknie dialogowym Export Site wybierz witryny, które chcesz wyeksportować. Kliknij przycisk Export, a w oknie Select Destination for Exported Site wskaż Pulpit jako miejsce docelowe dla eksportowanego pliku.

3. Plik zostanie wyeksportowany pod nazwą DWSITES.XML. Dwukrotne kliknięcie nazwy otworzy plik w oknie programu Dreamweaver. Analiza pliku w widoku projektu nie ma sensu. Wyświetl więc go w widoku kodu. Strona została zapisana w formacie XML.

4. Aby użyć tego dokumentu, wybierz z menu File pozycję Import, a następnie pozycję Import Site z menu podrzędnego. Dreamweaver zinterpretuje XML w celu skonfigurowania strony.

Początek ramki

Uwaga

Internet Explorer 5+ najlepiej sobie radzi z obsługą języka XML. W przeglądarkach Internet Explorer 4.01+ jest nieco gorzej. Natomiast Netscape Navigator 6 także nie ma kłopotów z XML.

Koniec ramki

Dostosowywanie znaczników

„Rozszerzalność” języka XML jest pochodną jego elastyczności. W przedstawionym wcześniej przykładzie plik XML miał najprostszą z możliwych formę. Składały się na nią deklaracja typu i parę prostych znaczników. Możesz rozbudować ten dokument. Możesz dodać bogatsze informacje poprzez rozbudowanie dokumentu. Pod wieloma względami przypomina to umieszczanie zawartości w poszczególnych polach tabeli bazy danych. Kolejny przykład pokazuje, jak proste jest wstawienie do pliku nowego znacznika <Decription>:

<?xml version=”1.0”>

<library>

<Book>

<Title>Inside LightWave [6]</Title>

<Author>Dan Ablan</Author>

<Description>Inside LightWave [6] is not just another rehash of the doc set. Its comprehensive tutorials take you to the completion stages for several real world projects.

</Description>

<Category>Web Publishing </Category>

</Book>

<Book>

<Title>Harry Potter and the Goblet of Fire</Title>

<Author>J.K. Rowling</Author>

<Description>Harry Potter is now in his fourth year at Hogwarts. Prepare yourself for his most exciting adventures yet!

</Description>

<Category>Childrens/Adventure </Category>

</Book>

</library>

Znaczniki można szybko dodawać w Dreamweaverze, w pełnej zgodzie ze standardami XML. Edytor Quick Tag Editor potrafi umieścić zaznaczony fragment w wybranych znacznikach (patrz rysunek 23.10).

Rys. 23.10. Quick Tag Editor umożliwia dodawanie zniaczników HTML i własnych znaczników XML i zawsze pamięta o znacznikach zamykających

Dodatkowe informacje na temat języka XML znajdziesz pod adresami www.xml.org, www.biztalk.org i www.w3.org. Każda z witryn prezentuje szereg informacji na temat najnowszych wersji DTD (Document Type Definition), słownictwa XML i obsługi w produktach różnych producentów. Rewolucja XML już nadchodzi, a stanie się faktem wcześniej niż później.

Przejście do XHTML 1.0

19 grudnia 2000 to ważny dzień dla języka HTML. Tim Berners-Lee, twórca WWW i obecny dyrektor W3C (World Wide Web Consortium) ogłosił standard XHTML 1.0 (eXtensible Hypertext Markup Language). XHTML przede wszystkim uwzględnia potrzeby wielu twórców: utworzenia standardu HTML opartego na XML. XHTML to pierwsza ważniejsza zmiana w języku HTML od 1997 roku.

Wprowadzenie do języka HTML zgodności z XML

Aby język HTML był zgodny z XML i stał się językiem modułowym, konieczne jest respektowanie szeregu zasad składni. Najważniejszą z nich jest zasada prawidłowego zarządzania znacznikami. Przeglądarki dość swobodnie obsługują HTML. Kwestia zamknięcia znaczników (takich jak na przykład <H1>) nie zawsze jest istotna, czego przykładem jest też znacznik <p>. Oto kod HTML, który zostanie poprawnie zinterpretowany przez każdą przeglądarkę:

<html>

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

<p><font face=”Arial” size=”4”>Ten tekst będzie poprawnie wyświetlany.

<p>Nawet jeśli niektóre znaczniki nie zostaną prawidłowo zamknięte.

Przeglądarka trzymająca się ściśle definicji XHTML-Strict nie wyświetliłaby tekstu reprezentowanego w tym kodzie. Przede wszystkim znaczniki <p> i <font> nie mają znaczników zamykających. Obowiązujący w obrębie XML ścisły sposób zarządzania znacznikami wymaga, aby wszystkie znaczniki zostały prawidłowo zamknięte. Ponadto znacznik <font> nie jest obsługiwany w XHTML. Formatowanie wprowadzane jest tylko poprzez kaskadowe arkusze stylów. W przedstawionym dokumencie brakuje także deklaracji typu dokumentu. Deklaracja taka powinna otwierać kod i identyfikować dokument jako dokument XML oraz podawać ulokowanie pliku DTD, który pomaga zinterpretować znaczniki XML.

Aby podany w przykładzie kod działał poprawnie jako XHTML, musi mieć następującą postać:

<?xml version=”1.0”?>

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”

”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>XHTML Page</title>

<style type=”text/css” xml:space=”preserve”>

body {

background-color: #FFFFFF;

color: #000000;

}

P {

Font-Family: Arial;

Font_size: 14pt;

}

</style>

</head>

<body>

<p>Ten tekst będzie poprawnie wyświetlany.</p>

</html>

Początek ramki

Uwaga

Jeśli korzystasz z Dreamweavera, można szybko przygotować kod HTML do przekształcenia w postać XHTML rezygnując ze znacznika <font>. Formatowanie tekstu za pomocą kaskadowych arkuszy stylów pozwoli na płynne przejście do formatu XHTML.

Koniec ramki

W dokumencie pojawiły się pewne nowe elementy. Natychmiastowa zmiana, widoczna na pierwszy rzut oka, to deklaracja XML, umieszczona na początku kodu. Typ dokumentu to: html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN, jest to wersja Strict języka XHTML.

Istnieją trzy typy języka XHTML: Strict, Transitional i Frames. XHTML-Strict jest implementacją języka XHTML zgodną ze standardem XHTML 1.0. XHTML-Transitional to definicja XHTML, która dopuszcza stosowanie w składni znaczników specyfikacji HTML 4.0 w celu umożliwienia przejścia z jednego języka do drugiego. XHTML-Frames to wersja języka, która akceptuje stosowanie ramek Netscape na stronach XHTML.

Kolejny wiersz kodu: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd, skierowuje przeglądarkę do miejsca, z którego może ściągnąć odpowiedni plik DTD niezbędny do interpretacji dokumentu.

Przestrzeń nazw jest zdefiniowana w znaczniku <HTML>. Podany jest w nim adres określający lokalizację przestrzeni nazw w Internecie.

XHTML nie dopuszcza formatowania tekstu za pomocą znaczników <font> i <body>. Formatowanie wprowadzają więc w przykładowym dokumencie kaskadowe arkusze stylów. Kolor tła został zdefiniowany jako biały (#FFFFFF), a kolor tekstu jako czarny (#000000). Styl zawartości znacznika <P> został określony jako Arial o rozmiarze 14pt.

Pozostała część dokumentu ma postać taką samą jak w HTML-u, aczkolwiek nie zawiera znaczników formatujących.

Są to tylko nieliczne ze zmian, które trzeba wprowadzić, by dokument uczynić zgodnym z formatem XHTML. Konieczna jest rezygnacja z wielu znaczników HTML stosowanych przez twórców stron. Jak już wspomniano, znacznik <FONT> trzeba zastąpić arkuszem CSS. To samo dotyczy znacznika <CENTER>. Funkcje tego znacznika powinien przejąć arkusz CSS. Znacznik <I> wymaga zastąpienia równoważnym znacznikiem <EM>, a znacznik <B> należy zamienić na znacznik <STRONG>.

Dreamweaver tworzy kod, który jest natychmiast gotowy do przekształcenia w postać XHTML. Musisz pamiętać o kilku tylko zasadach:

• Nie stosuj znacznika <FONT>. Aby unikać tego znacznika, nie wprowadzaj formatowania tekstu z poziomu inspektora Text Properties, lecz stosuj kaskadowe arkusze stylów.

• Znacznik <HTML> musi zostać zmodyfikowany w widoku kodu do takiej oto postaci:

<?xml version=”1.0”?>

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”

”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

• Nie zapominaj o znacznikach zamykających. Na przykład wszystkie znaczniki <P> powinny mieć swoje znaczniki zamykające </P>.

Jeśli będziesz trzymał się tych trzech zasad, nie ma powodu, aby utworzone w programie Dreamweaver dokumenty HTML nie dały się przekonwertować do postaci XHTML.

Pełny opis procedury dostosowywania dokumentu do standardu XHTML znajdziesz w witrynie W3C, pod adresem www.w3.org/MarkUp. Jest tam także dostępna wyczerpująca dokumentacja nowego standardu oraz połączenia do narzędzi konwersji stron napisanych w języku HTML 4 do postaci XHTML.

W3C dostarcza zestaw narzędzi do przekształcania stron w postać XHTML. Narzędzia te znajdziesz na stronach witryny W3C HTML Validation Service, pod adresem http://validator.w3.org. Jedno z nich, HTML Tidy, pozwala konwertować źle napisane dokumenty HTML, na przykład takie jak dokumenty generowane przez edytor Microsoft Word, do postaci zgodnej ze standardem XHTML.

XHTML a HTML 4

HTML 4 wykazuje dużo podobieństw do języka XHTML. W obu językach formatowanie wymaga stosowania kaskadowych arkuszy stylów i niezbędne jest zamykanie znaczników akapitu. Pod wieloma względami XMTML stanowi po prostu odmianę języka HTML 4, spełniającą zasady składni języka XML. Dzięki stworzeniu wersji języka HTML 4 będącej pochodną języka XML, szereg rozszerzeń, dodawanych w przyszłości do XHTML-a, będzie mogło mieć postać modułową.

XHTML 1.0 pozwala nowym urządzeniom internetowym - pomocnikom cyfrowym PDA, konsolom do gier i interaktywnym odbiornikom TV - korzystać z najnowszych standardów WW. Wszystko, co jest potrzebne, to przeglądarka, która potrafi zinterpretować XML i definicje typu dokumentu. Projektant nadal może używać edytorów tekstowych, aby w nich tworzyć swoje strony.

Wobec gwałtownie zmieniającego się oblicza Internetu, dodanie modułowego i rozszerzalnego języka jakim jest XHTML, to naturalne dopasowanie się.

Problemy zgodności z wersją przeglądarki

Programiści i twórcy korzystający z nowych, dopiero kształtujących się technologii, zawsze staną wobec następującego problemu: Czy powinno się korzystać z nowej opcji obsługiwanej tylko przez wersje przeglądarek najnowszej generacji, mając pełną świadomość, że niewielu odbiorców korzysta z takiego oprogramowania? Czy nie należałoby w takim razie skupić się na szerszej grupie użytkowników i przyjąć kryterium zgodności ze starszymi wersjami przeglądarek?

Jest to drażliwa kwestia. Pomocne w jej rozwiązaniu jest przeanalizowanie raportów serwera dla Twojej witryny. Każdy serwer sieciowy generuje pliki tekstowe (raporty), w których zgromadzone są informacje o odwiedzających witrynę. Wśród przechwyconych informacji można znaleźć typ przeglądarki stosowanej do oglądania stron. Programy, takie jak WebTrends, interpretują dane raportów i prezentują je w użytecznej postaci graficznej.

Obecnie na rynku przeglądarek dominuje Internet Explorer - ten typ przeglądarek stanowi 80%wszystkich, z których 90% to wersje 5+. Z pozostałych 20% użytkowników trzy czwarte korzysta z Netscape 4+, a reszta z przeglądarek takich jak Netscape 1-3, AOL, Mozilla, Netscape 6, Opera i innych. Dane te pochodzą witryny Nielsen/Netratings (www.nielsennetratings.com). Dlatego witryna tworzona pod kątem użytkowników przeglądarek Netscape 4 i Internet Explorer 5 będzie miała najszerszy potencjalnie krąg odbiorców. Tylko 5% internautów nie będzie w stanie zobaczyć strony.

Możesz zapytać, „Czy w takim razie jest sens tworzyć pod kątem wszystkich przeglądarek?”. Odpowiedź zależy od tego, czy te 5% stanowi dla Ciebie wartość uzasadniającą projektowanie dla wszystkich przeglądarek.

Znacznie prościej jest tworzyć witryny dla sieci lokalnych. W wielu firmach określono odgórnie standard przeglądarki dla całego przedsiębiorstwa. To, czy jest to Netscape 2, czy Internet Explorer 6, nie ma znaczenia. Wiedząc jaki program zostanie użyty do prezentacji stron WWW, można poszerzyć stosowany zestaw narzędzi. Jeśli projektant wie, że w całej sieci lokalnej zainstalowano na przykład przeglądarkę Internet Explorer 6, może umieścić formatowanie tekstu w kaskadowych arkuszach stylów. O ile w tym przypadku może on mieć całkowitą pewność, że strona zostanie wyświetlona prawidłowo, to w Internecie prawdopodobieństwo spada do 80%.

Twórca stron internetowych zawsze musi wiedzieć, jakie przeglądarki są aktualnie najpopularniejsze. Tylko w tym roku wypuszczono przeglądarki Netscape 6 i MSDN Explorer. Każda z nich wywrze znaczący wpływ na sposób projektowania i budowy stron WWW. Rozeznanie w kwestii stosowanego przez użytkowników oprogramowania pozwala właściwie zaplanować sposób konstrukcji stron witryny.

Podsumowanie

Kod źródłowy to samo serce strony WWW. Dreamweaver udostępnia zestaw narzędzi, który ułatwi Ci rozpoczęcie prac nad tworzeniem stron WWW. Przyjdzie jednak moment, kiedy będziesz musiał sięgnąć bezpośrednio do kodu. Widok kodu (Code View) nie tylko daje dostęp do postaci źródłowej dokumentu, lecz także do narzędzi ułatwiających analizowanie i edycję kodu.

Liczba „języków” sieciowych nieustannie rośnie. Umiejętność samodzielnego pisania kodu stron jest niezbędna, aby w pełni zrozumieć strony WWW jutra.

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

2 G:\DREAM_trans\rozdz23.doc

w źródle na CD jest w wierszu 10 błąd w wyrazie FUNCTION - obcięto F

---