Szablony i biblioteki witryny pomagają w programie Dreamweaver automatyzować proces budowania i aktualizacji witryn. Jak zobaczysz, można tworzyć, a następnie zapisywać te elementy, aby wskazać, które części witryny mogą być modyfikowane. Za pomocą szablonów i bibliotek można wprowadzać uniwersalne zmiany oraz nadawać zwarty wygląd i jednolity ton wszystkim stronom witryny.
W tym rozdziale omówimy następujące zagadnienia:
q Tworzenie szablonów
q Stosowanie szablonów
q Dołączanie i odłączanie szablonów
q Stosowanie szablonów wraz z dokumentami XML
q Tworzenie i stosowanie elementów bibliotecznych
q Odłączanie i usuwanie elementów bibliotecznych
q Stosowanie skryptów w elementach bibliotecznych
Jeśli Twoja witryna składa się z podobnych stron, lub jeśli chciałbyś nadać jednolity ton wszystkim jej stronom, pomogą Ci szablony. Szablony pozwalają wskazać te części witryny, w których wprowadzanie zmian jest możliwe oraz te, gdzie jakiekolwiek modyfikacje są niedozwolone. Zapewniają więc stronom spójny wygląd, zapobiegając jednocześnie zmianom projektu. Raz przygotowany szablon można udostępnić innym członkom zespołu pracującego nad witryną.
Nawet ci, którzy nigdy nie korzystali z Dreamweavera, mogą nauczyć się dołączania do szablonów informacji. Zalety szablonów stają się szczególnie widoczne wówczas, gdy zawartość stron WWW przygotowują ludzie, którzy nie mają wielkiego doświadczenia i w związku z tym mogliby wprowadzić niezły bałagan. Jeśli zastosowany zostanie szablon, osoby te wpiszą po prostu opracowywaną przez siebie zawartość lub wstawią elementy graficzne w obszarach udostępnionych do edycji. Pozostała część strony będzie zabezpieczona przed ich ingerencją.
Korzystanie z szablonów nie jest zalecane tam, gdzie częste są głębokie zmiany układu i projektu witryny. Szablony natomiast bardzo ułatwią przygotowanie stron podrzędnych, zawierających proste informacje. Na przykład można się nimi posłużyć przygotowując strony witryn e-komercji, prezentujących kolejne pozycje oferty handlowej. Jeśli wolisz korzystać z łatwiejszego sposobu powielania szeregu obiektów (takich jak na przykład obrazy paska nawigacji) lub kodu HTML definiującego atrybuty tekstu, skorzystaj z kaskadowych arkuszy stylów lub stylów HTML. Możesz także przekształcić swój kod w obiekt biblioteczny. Tworzeniem takich obiektów zajmiemy się w drugiej części tego rozdziału.
Druga część tego rozdziału poświęcona jest korzystaniu z bibliotek programu Dreamweaver. Nie pomijaj tej części, nawet jeśli nie jesteś zainteresowany stosowaniem szablonów, bowiem szablony i biblioteki dają zdecydowanie różne możliwości.
Bibliotekę można tak skonfigurować, aby przechowywała wszystkie powtarzalne elementy witryny. Powiedzmy, że na wszystkich stronach podrzędnych witryny chcesz, tuż nad informacją o prawach autorskich, umieścić logo firmy. Możesz zestawić te dwa elementy w dokumencie programu Dreamweaver, zapisać je razem w bibliotece i wielokrotnie stosować z poziomu palety Library klikając przycisk Insert.
Rozwińmy ten scenariusz w czasie: załóżmy, że po kilku miesiącach pojawia się nowe logo firmy i trzeba zamienić stare logo nowym. Wszystko, co jest w tym przypadku konieczne, to edycja poprzednio zapisanego elementu bibliotecznego. Po zastąpieniu go wersją zmodyfikowaną, wszystkie strony, na których był on umieszczony, zostaną natychmiastowo zaktualizowane. Wyobraź sobie, jak opadną szczęki Twoim kolegom, gdy zobaczą, jak szybko pracujesz (choć możesz ten sekret zachować tylko dla siebie).
Wiesz już więc, do czego można wykorzystać elementy biblioteczne, a ponieważ interesują Cię także szablony, zobaczymy teraz, jak one działają.
Przygotowanie szablonu jest proste, jeśli rozumie się jego istotę i sposób, w jaki Dreamweaver z niego korzysta.
Tworząc szablon, sporządzasz dokument, który będzie stanowił model dla innych dokumentów. Jesteś więc twórcą odbitki. Sam szablon nie powinien pojawić się w Internecie. Opublikowane zostaną tylko strony, które powstały na jego bazie.
Szablon powinien zawierać elementy wspólne wszystkim dokumentom programu Dreamweaver, które zostaną utworzone na jego osnowie. Mogą to być na przykład elementy takie jak baner reklamowy, pasek nawigacji i obraz logo. Będą one stanowiły stałą zawartość strony, która nie podlega edycji. Szablon musi także zawierać obszary o zmiennej zawartości, różnej na różnych stronach, takiej jak na przykład tekst. Te obszary są określane mianem obszarów edytowalnych.
Szablony są zapisywane w folderze Templates, który stanowi folder podrzędny głównego foldera witryny. Nie musisz go sam tworzyć, bowiem Dreamweaver robi to automatycznie. Wszystkie szablony w tym folderze mają rozszerzenie nazwy .dwt.
Twoje szablony powinny być zawsze umieszczane w folderze Templates – postaraj się o tym pamiętać. Nie powinieneś także zapisywać w tym folderze innych plików (a więc o innym niż .dwt rozszerzeniu). Zdefiniowanie wszystkich względnych połączeń z wielu różnych ulokowań to dla programu Dreamweaver ciężka praca – jeśli program nie znajdzie szablonu tam, gdzie się go spodziewa, może wystąpić błąd.
Szablon można przygotować wykorzystując istniejący dokument HTML lub stworzyć go od zera, z pustego dokumentu. Tworzenie i korzystanie z szablonu możliwe jest tylko w widoku projektu (Design View). W widoku kodu (Code View) wszystkie polecenia, które odnoszą się do szablonów, będą nieaktywne.
Aby utworzyć szablon oparty na istniejącym dokumencie HTML:
Początek ramki
Uwaga
Jeśli dokument, który chcesz zapisać jako szablon, powstał na bazie innego szablonu, musisz najpierw odłączyć wcześniej zastosowany szablon.
Koniec ramki
Aby przygotować zupełnie nowy szablon, otwórz najpierw pusty dokument, a następnie:
Definiując w szablonie połączenia, staraj się korzystać z ikony foldera lub opcji Point to File – obie możliwości są dostępne w inspektorze Property.
Wynika to z tego, że jeśli szablon bazuje na istniejącym dokumencie HTML, Dreamweaver umieszcza plik w folderze Templates, a następnie wprowadza odpowiednie modyfikacje w nazwach ścieżek dostępu, aby zapewnić poprawne działanie połączeń.
Tam gdzie to możliwe powinieneś za wszelką cenę unikać ręcznego wpisywania adresów URL, ponieważ często skutkiem tego są zerwane połączenia na stronach WWW utworzonych na bazie szablonu. Zawsze zresztą Dreamweaver lepiej poradzi sobie z zapisem ścieżek dostępu niż Ty.
Po utworzeniu szablonu, musisz wskazać obszary edytowalne czy też te części dokumentu, których zawartość jest inna na różnych stronach. Obszary edytowalne oznaczane są w pliku szablonu jako obszary zaznaczone kolorem (domyślnie jest to kolor jasnoniebieski). U góry obszarów pojawiają się opisowa nazwa oraz umieszczone w nawiasach dodatkowe informacje. Domyślny kolor zaznaczenia można zmienić w ustawieniach Preferences – patrz rozdział 2., „Dostosowywanie programu Dreamweaver do własnych potrzeb”.
Rysunek 16.1 prezentuje szablon otwarty w oknie programu Dreamweaver z już zaznaczonymi obszarami edytowalnymi.
Rys. 16.1.
Przykładowy szablon Dreamweavera z obszarami edytowalnymi
Obszary edytowalne przeznaczone są na te informacje, które w każdym z dokumentów HTML utworzonych na bazie szablonu będą różne. Informacje te obejmują tekst, obrazy czy też pliki multimedialne, takie jak sekwencje wideo Flash, lub aplety języka Java. Obszary nie oznaczone jako edytowalne zostaną zablokowane i przy tworzeniu nowych stron opartych na tym szablonie nie będzie do nich dostępu.
Tworząc stronę na bazie szablonu (wybierz New from Template z menu File), możesz kliknąć w obszarze edytowalnym i umieścić w nim nowe dane, a następnie zapisać stronę jako odrębny plik HTML. Obszary zablokowane, nie podlegające edycji, pozostaną identyczne na wszystkich stronach opartych na tym samym szablonie, a ich modyfikacja nie będzie możliwa.
Jeśli chciałbyś zmienić któryś z nieedytowalnych obszarów, musisz zmiany wprowadzić w samym szablonie. Tylko tam można modyfikować obszary zablokowane. Nie jest to natomiast możliwe na stronach utworzonych na bazie tego szablonu. Musisz sobie zdawać sprawę także i z tego, że wszelkie ewentualne zmiany wprowadzone w nieedytowalnych obszarach szablonu, zostaną uwzględnione na wszystkich stronach witryny, które powstały na bazie tego szablonu.
Aby zdefiniować obszar edytowalny:
Rys. 16.2.
Definiowanie nowego obszaru edytowalnego w szablonie programu Dreamweaver
Obszary edytowalne możesz definiować korzystając z menu kontekstowego. Kliknij prawym klawiszem myszki w obszarze, w którym chcesz umieścić obszar edytowalny, i wybierz z menu kontekstowego pozycję New Editable Region. Do dyspozycji masz też skrót klawiaturowy Ctrl+Alt+V.
Wszystkie obszary edytowalne pojawiają się w menu podrzędnym Templates menu Modify. Znacznik obok nazwy danego obszaru oznacza, że obszar ten jest aktualnie zaznaczony. Jeśli strona jest bardzo długa lub skomplikowana, a konieczne jest zlokalizowanie obszaru edytowalnego, wówczas to menu okazuje się bardzo użyteczne. Wybierz z niego żądaną nazwę obszaru edytowalnego, a Dreamweaver zaznaczy obszar w dokumencie.
Obszar edytowalny można zdefiniować w samym szablonie, lecz nie w dokumencie, który powstał na bazie tego szablonu.
Nowo utworzony obszar edytowalny pojawi się obwiedziony prostokątnym obramowaniem w kolorze jasnoniebieskim. Jeśli chcesz zmienić kolor zaznaczenia, wyświetl okno dialogowe Preferences (wybierając pozycję Preferences w menu Edit) i wybierz w nim kategorię Highlighting. Wybierz następnie inny kolor z palety.
Nazwa nowego obszaru edytowalnego pojawia się w jego górnym lewym rogu. Jeśli chcesz do niej dołączyć dodatkowe informacje na temat obszaru, wpisz je w nawiasach klamrowych, które pojawiają się pod nazwą. Ani nazwa, ani dodatkowe informacje nie zostaną wyświetlone w przeglądarce prezentującej strony utworzone na bazie szablonu.
Podpowiedź
Jeśli chcesz zmienić nazwę obszaru edytowalnego, zaznacz ją, wywołaj edytor kodu (Ctrl+T) i zmień nazwę w kodzie HTML (patrz rysunek 16.3). Zwróć uwagę, że spacje oznaczone są jako %20. Możesz także skorzystać z menu kontekstowego i wybrać z niego pozycję Edit Tag.
Pracując w obrębie szablonu, traktuj obszary edytowalne tak, jakby były obiektami. Dwukrotne kliknięcie zakładki nazwy spowoduje zaznaczenie całego obszaru. Obszary edytowalne możesz także usuwać oraz kopiować do Schowka, zaznaczając je wcześniej podwójnym kliknięciem.
Rys. 16.3.
Zmiana nazwy obszaru edytowanego za pomocą edytora kodu Tag Editor
Aby usunąć obszar edytowalny:
Kod HTML pliku szablonu oraz pozycji utworzonych na bazie szablonu można wyświetlić w widoku kodu (Code View) lub inspektorze Code (F10). W kodzie źródłowym Dreamweaver oznacza obszary edytowalne za pomocą #BeginEditable i #EndEditable. Wszystko, co znajduje się w obrębie znaczników komentarza możesz dowolnie modyfikować. Komentarze nie zawierają informacji zastrzeżonych.
Wszelkie zmiany, które zostaną wprowadzone w szablonie, pojawią się także na stronach utworzonych na jego bazie. Jeśli na przykład otworzysz plik szablonu i zmienisz kolor połączeń na ostry różowy, ostro różowe połączenia pojawią się na wszystkich stronach WWW bazujących na tym szablonie. Dotyczy to także innych właściwości, takich jak tytuł strony, szerokości marginesów oraz stosowanie obrazu jako tła.
Kolory połączeń, tytuł strony oraz obraz jako tło można zdefiniować w fazie tworzenia szablonu w oknie Page Properties, które wywołasz wybierając pozycję Page Properties w menu Modify.
Musisz mieć świadomość, że właściwości strony nie mogą stanowić obszaru edytowalnego. Oznacza to, że kolor tła, marginesy i kolory połączeń będą takie same na wszystkich stronach utworzonych przy użyciu tego samego szablonu. Jeśli chciałbyś wprowadzić na którejś ze stron zróżnicowanie, musiałbyś najpierw odłączyć szablon. Próba zmiany wspomnianych właściwości w pliku bazującym na szablonie zostanie zignorowana.
Aby utworzyć dziennik Design Notes dla strony HTML powstałej na bazie szablonu, kliknij w widoku Site Files nazwę pliku i wybierz pozycję Design Notes z menu File (lub kliknij prawym klawiszem myszki i wybierz tę pozycję z menu kontekstowego). W ten sposób uzyskasz dostęp do okna dialogowego Design Notes, w którym możesz umieszczać informacje o pliku.
Szablony mogłyby się wydawać się idealnym rozwiązaniem dla tych projektantów, którzy muszą swoje idealnie zaprojektowane i wykonane strony WWW przekazywać studentom lub innym początkującym twórcom do dalszej modyfikacji, z pełną świadomością, że nie będą oni w stanie sformatować wszystkiego wystarczająco staranie. Jeśli akurat jesteś w takiej sytuacji, musisz jednak pamiętać, że przy stosowaniu szablonów mogą pojawić się problemy z zachowaniem wydanego przez Ciebie sposobu formatowania tekstu.
Jeśli chcesz dla obszarów edytowalnych szablonu określić kroje czcionek, ich rozmiary, kolory i style, radzę skorzystać z tekstu zastępczego. Sformatuj tekst zastępczy jak chcesz, nadając mu taką postać, jaką chcesz ujrzeć na wszystkich stronach WWW tworzonych na bazie szablonu. Treść tekstu zastępczego powinna wskazywać użytkownikowi szablonu, że należy go zmienić (na przykład Nazwa pory roku). Tekst ten powinien zostać przygotowany przed zdefiniowaniem obszarów edytowalnych. Następnie zaznacz tekst zastępczy i zdefiniuj jako obszar edytowalny.
Dzięki metodzie tekstu zastępczego zachowanie specyfikacji krojów czcionek, rozmiaru, stylu i koloru staje się prostsze. Jak bowiem sam stwierdziłem, zmiany formatowania tekstu zawartego w nawiasach nie są uwzględniane w dokumentach tworzonych na bazie tego szablonu.
Musisz też wiedzieć, że w dokumentach utworzonych na bazie szablonu, style CSS, linie czasowe, skrypty JavaScript i wszelkie znaczniki umieszczane w sekcji HEAD dokumentu, nie będą odgrywały żadnej roli. Jeśli bowiem do dokumentu zostanie zastosowany szablon, sekcja HEAD tego dokumentu zostaje zablokowana. Jedynym znacznikiem sekcji HEAD, który można modyfikować w takim dokumencie, jest znacznik <TITLE>. W wersji 4 programu Dreamweaver można jednakże dodawać do stron bazujących na szablonach behawiory – na umieszczenie takich skryptów Dreamweaver zezwala, natomiast nie pozwoli na wprowadzanie własnych skryptów lub na jakąkolwiek ręczną modyfikację kodu.
Jeśli absolutnie koniecznie musisz dokonać zmian w sekcji HEAD dokumentu, nadal możesz oprzeć go o szablon, lecz po zbudowaniu strony, powinieneś szablon odłączyć.
Jeśli chcesz zastosować style CSS, przygotuj zewnętrzny arkusz stylów i utwórz w szablonie połączenie prowadzące do tego pliku. W ten sposób możesz później dodać w pliku zawierającym style CSS nowe style lub klasy i zastosować je do nowych stron zbudowanych na bazie szablonu.
Jeśli szablon został skonfigurowany i jest gotowy do zastosowania, możesz zacząć korzystać z niego przy tworzeniu stron HTML.
Aby utworzyć nowy dokument bazujący na szablonie:
Rys. 16.4.
Okno dialogowe Select Template
Cała zawartość strony w utworzonym dokumencie będzie obwiedziona obramowaniem, wskazującym, że strona powstała na bazie szablonu. Nazwa szablonu zostanie wyświetlona obok zakładki Template, w prawym górnym rogu. Jeśli przesuniesz wskaźnik myszki nad stroną, zauważysz, że w zablokowanych obszarach ma on postać przekreślonego kółka, co odpowiada symbolowi No. Symbol ten znika nad obszarami edytowalnymi.
Aby dodać lub zmienić zawartość obszarów edytowalnych, zaznacz obszar, klikając dwukrotnie nazwę na jego zakładce. Możesz także zaznaczyć obszar za pomocą myszki i wprowadzić nową zawartość.
Pamiętaj, aby najpierw zaznaczyć nawiasy i umieszczoną w nich zawartość, następnie nacisnąć klawisz Delete, i dopiero potem przystąpić do wpisywania w obszarze edytowalnym nowego tekstu lub wstawiania w nim obrazów czy też plików multimedialnych – jeśli nie zachowasz tej kolejności, nawiasy mogą pojawić się w przeglądarce.
Po dodaniu zawartości, wybierz pozycję Save w menu File i nadaj swojej stronie nazwę.
Rysunek 16.5 pokazuje stronę HTML, którą przygotowałem na bazie szablonu o nazwie Cards. Rysunek 16.6 prezentuje tę samą stronę w oknie przeglądarki. Zwróć uwagę, że nazwy obszarów edytowalnych nie są w przeglądarce wyświetlane.
Rys. 16.5.
Strona utworzona w programie Dreamweaver 4 na bazie szablonu Cards
Rys. 16.6.
Znaczniki obszarów edytowalnych i zablokowanych nie są w przeglądarce wyświetlane
Ten sam szablon posłużył do przygotowania strony przedstawionej na rysunku 16.7.
Rys. 16.7.
Ta strona także powstała na bazie szablonu Cards
Liczba stron, które możesz wygenerować stosując jeden szablon jest praktycznie nieograniczona. Dopóki pole wyboru Update Page When Template Changes jest przy tworzeniu strony (za pomocą polecenia New from Template z menu File) zaznaczone, aby zmienić właściwości strony lub układ obszarów zablokowanych, musisz jedynie wprowadzić modyfikacje w samym szablonie.
Podstawową korzyścią płynącą ze stosowania szablonów jest możliwość wprowadzenia podstawowych modyfikacji jednocześnie na wielu stronach. Teraz zajmiemy się kwestiami dołączania szablonu i wyłączania stron spod jego wpływu.
Wyobraź sobie, że chcesz zastosować szablon do strony już istniejącej. Być może masz nowy projekt, w którym nazwy obszarów edytowalnych są identyczne jak w starym projekcie, i chcesz zaktualizować swoje strony ...
Wolf-1