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:
q Widok kodu
q Kolory elementów kodu
q Numery wierszy
q Diagnostyka
q XML
q XHTML
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.
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:
q Show Code View – przycisk widoku kodu
q Show Code and Design View – przycisk widoku kodu i projektu
q Show Design View – przycisk widoku projektu
Każdy z widoków umożliwia inny sposób pracy nad tworzoną stroną WWW.
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 (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
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
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:
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.
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.
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:
q Word Wrap (zawijanie wierszy)
q Line Numbers (numeracja wierszy)
q Highlight Invalid HTML (zaznaczanie błędnego kodu HTML)
q Syntax Coloring (stosowanie kolorów do elementów kodu)
q 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ć
Nauczysz się teraz zmieniać kolory kodu i dowiesz się dlaczego może to być korzystne.
w źródle na CD jest w wierszu 10 błąd w wyrazie FUNCTION – obcięto F
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.
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
W kolejnych punktach znajdziesz opis korzystania z palety Reference:
Paleta Reference to wspaniałe narzędzie, które pomoże Ci zrozumieć nową składnię kodu.
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.
Narzędzie usuwania błędów – Debugger – działa w sprzężeniu z przeglądarką. Aby zobaczyć je w działaniu:
Dzięki narzędziu usuwania błędów polowanie na błędy w kodzie trwa znacznie krócej.
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ż ze...
Wolf-1