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
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!
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 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.
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.
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.
Aby wstawić znacznik META:
Rys. 3.1.
Okienko dialogowe Insert Meta
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:
Rys. 3.2.
Okienko dialogowe Insert Keywords
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:
2. Wpisz tekst stanowiący opis strony, na przykład: Download John Pickett’s favorite software, including CuteFTP, Internet Explorer, and more!
Odwiedź stronę J.K. Bowman’s Spider Food Web pod adresem www.spider-food.net, aby dowiedzieć się jak lepiej wykorzystać wyszukiwarki.
Rys. 3.3.
Okienko dialogowe Insert Description
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:
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.
Rys. 3.4.
Okienko dialogowe Insert Refresh
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:
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.
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:
Rys. 3.6.
Większość atrybutów zwyczajnie nie jest potrzebna – jedyny wyjątek to atrybut Rel
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.
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.
Gdy staniesz się ekspertem, będziesz mógł skorzystać z wielu oferowanych przez Dreamweaver sposob...
grzegorj