Rozdział 16. Biblioteki i szablony

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:

• Tworzenie szablonów

• Stosowanie szablonów

• Dołączanie i odłączanie szablonów

• Stosowanie szablonów wraz z dokumentami XML

• Tworzenie i stosowanie elementów bibliotecznych

• Odłączanie i usuwanie elementów bibliotecznych

• Stosowanie skryptów w elementach bibliotecznych

O szablonach

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.

Co to jest biblioteka?

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

Przygotowywanie szablonu

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.

Ćwiczenie 16.1. Tworzenie szablonu z istniejącego dokumentu HTML

Aby utworzyć szablon oparty na istniejącym dokumencie HTML:

1. Otwórz dokument HTML, który chcesz przekształcić w szablon.

2. Wybierz pozycję Save As Template w menu File.

3. Wybierz z listy rozwijanej Site okna dialogowego Save As Template nazwę witryny, a następnie podaj w polu tekstowym Save As nawę szablonu.

4. Naciśnij przycisk Save.

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:

1. Wybierz pozycję Templates z menu Window. Dreamweaver otworzy paletę Assets, w której wyświetlana będzie kategoria Templates.

2. Kliknij w oknie palety Assets przycisk New Template, u dołu okna. Ikona New Template ma postać kartki ze znakiem plus.

3. Pojawi się nazwa utworzonego szablonu - Untiled - już zaznaczona. Zastąp ją własną nazwą.

Początek ramki

Uwaga

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.

Koniec ramki

Definiowanie obszarów edytowalnych

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:

1. Otwórz plik szablonu.

2. Zaznacz zawartość, którą chcesz zdefiniować jako podlegającą edycji. Wybierz pozycję New Editable Region w menu podrzędnym Templates menu Modify (patrz rysunek 16.2). Jeśli korzystasz z szablonu tworzonego na bazie pustego dokumentu, kliknij po prostu w obszarze, który chcesz zdefiniować. Jako obszar edytowalny możesz także wskazać warstwę, tabelę lub komórkę tabeli.

Rys. 16.2. Definiowanie nowego obszaru edytowalnego w szablonie programu Dreamweaver

3. Podaj w polu Name okna dialogowego New Editable Region nazwę definiowanego obszaru. Nazwa musi być jednoznaczna. Nazwa pojawi się w kodzie źródłowym w znaczniku komentarza, lecz nie będzie wyświetlana na stronie WWW prezentowanej w przeglądarce.

Początek ramki

Uwaga

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.

Koniec ramki

Początek ramki

Uwaga

Obszar edytowalny można zdefiniować w samym szablonie, lecz nie w dokumencie, który powstał na bazie tego szablonu.

Koniec ramki

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.

Początek ramki

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.

Koniec ramki

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

Usuwanie obszarów edytowalnych

Aby usunąć obszar edytowalny:

1. Otwórz dokument.

2. Wybierz pozycję Remove Editable Region z menu podrzędnego Templates menu Modify.

3. Wskaż w oknie Remove Editable Region usuwany obszar i naciśnij OK.

Początek ramki

Uwaga

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.

Koniec ramki

Konfigurowanie właściwości szablonu

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.

Design Notes

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.

Początek ramki

Style czcionki i arkusze CSS w szablonach

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.

Koniec ramki

Stosowanie szablonów

Jeśli szablon został skonfigurowany i jest gotowy do zastosowania, możesz zacząć korzystać z niego przy tworzeniu stron HTML.

Ćwiczenie 16.2. Tworzenie nowych plików na bazie szablonu

Aby utworzyć nowy dokument bazujący na szablonie:

1. Wybierz pozycję New from Template z menu File.

2. W oknie dialogowym Select Template (patrz rysunek 16.4) wybierz z listy Site nazwę witryny, a następnie wskaż na liście Templates nazwę szablonu.

Rys. 16.4. Okno dialogowe Select Template

3. Jeśli chcesz, aby Dreamweaver dokonał automatycznej aktualizacji strony, jeśli szablon ulegnie zmianie, zaznacz pole wyboru Update Page when Template Changes (pole to jest zaznaczone domyślnie). Jeśli wyłączysz aktualizację dokumentu przy zmianie szablonu (co odpowiada wyczyszczeniu pola), Dreamweaver utworzy nowy dokument jako plik papeterii - kopię szablonu, stanowiącą całkowicie niezależny dokument HTML, bez obszarów edytowalnych i zablokowanych. Jednocześnie podstawowe zręby strony już istnieją i nie wymagają tworzenia.

4. Kliknij przycisk Select.

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.

Dołączanie i odłączanie szablonów

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.

Dołączanie szablonu

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 nadając im nowy wygląd. Czyż nie jesteś zadowolony, że zastosowałeś szablon i aktualizacja to kwestia kilku sekund?

Początek ramki

Podpowiedź

Wybierz obszar edytowalny, w którym chcesz złożyć całą zawartość strony (która w nowym szablonie nie ma na razie swojego miejsca przeznaczenia). Po zastosowaniu szablonu, przenieś poszczególne elementy z domyślnego obszaru edytowalnego do innych obszarów edytowalnych, w których rzeczywiście chcesz je umieścić.

Koniec ramki

Aby zastosować szablon do już istniejącej strony, zastosuj się do przedstawionej poniżej procedury. Aby efekt był najlepszy, już przed utworzeniem obszarów edytowanych powinieneś wiedzieć, jaki szablon chcesz dołączyć do strony.

1. Otwórz dokument HTML, do którego chcesz dołączyć szablon.

2. W szablonie, który chcesz dołączyć, zdefiniuj obszary edytowalne o takich samych nazwach, jakie zastosowano wcześniej (pamiętaj, że nie można zastosować szablonu do innego szablonu).

3. Wybierz pozycję Apply Template to Page z menu podrzędnego Template menu Modify.

4. Wskaż nazwę witryny i wybierz z listy szablon. Pozostaw znacznik w polu wyboru Update Page When Template Changes, jeśli chcesz, aby w przypadku zmian wprowadzonych w szablonie, Dreamweaver aktualizował automatycznie stronę. Kliknij przycisk Select.

5. W wyświetlonym oknie dialogowym Choose Editable Region for Orphaned Content (pokazanym na rysunku 16.8) wskaż obszar edytowalny, w którym umieszczona zostanie „stara” zawartość (jest to „bękart” - ang. „orphaned content”, zawartość, która nie została uwzględniona w nowym szablonie). Jeśli chcesz usunąć poprzednią zawartość i zastąpić ją zawartością szablonu, wybierz pozycję None,.

Rys. 16.8. Zawartość strony, która nie została przyporządkowana obszarowi edytowalnemu nowego szablonu może być umieszczona w wybranym obszarze edytowalnym lub usunięta; jeśli chcesz się jej pozbyć, wybierz None

Odłączanie szablonu

Aby odłączyć stronę od zastosowanego szablonu:

1. Otwórz dokument.

2. Wybierz pozycję Detach from Template z menu podrzędnego Templates menu Modify.

Strona „uwolni” się od szablonu i będzie można edytować w zwykły sposób zarówno obszary zablokowane, jak i edytowalne. Kod HTML i znaczniki komentarza definiujące obszary edytowalne zostaną usunięte.

Aktualizacja stron opartych na szablonach

W przypadku zmiany szablonu Dreamweaver da Ci możliwość aktualizacji wszystkich stron utworzonych w oparciu o ten szablon. Masz także możliwość przeprowadzenia ręcznej aktualizacji za pośrednictwem menu podrzędnego Templates, które znajdziesz w menu Modify (patrz rysunek 16.2).

Ćwiczenie 16.3. Aktualizacja dokumentów współdzielących szablon

Aby we wszystkich dokumentach utworzonych na bazie tego samego szablonu uwzględnić wprowadzone w szablonie zmiany:

1. Zmodyfikuj szablon i zapisz go.

2. Wybierz pozycję Update Pages z menu podrzędnego Templates menu Modify.

3. W oknie dialogowym Update Pages (patrz rysunek 16.9) wybierz zakres aktualizacji (lecz najpierw sprawdź, czy zaznaczono pole wyboru Templates):

• Wybierz z listy Look In pozycję Entire Site i wskaż na umieszczonej obok liście rozwijanej nazwę witryny. W ten sposób aktualizacja obejmie wszystkie strony witryny, do których zastosowano szablony.

• Wybierz z listy Look In pozycję Files That Use i wskaż na umieszczonej obok liście rozwijanej nazwę szablonu. Aktualizacją zostaną objęte wszystkie strony, do których zastosowano wskazany szablon.

4. Naciśnij przycisk Start, aby rozpocząć proces aktualizacji.

Aby dokonać aktualizacji aktualnie otwartego dokumentu, do którego zastosowano szablon, wybierz z menu podrzędnego Templates menu Modify pozycję Update Current Page.

Początek ramki

Uwaga

Jeśli pomimo zmian wprowadzonych do szablonu nie następuje aktualizacja utworzonych na jego bazie stron, otwórz paletę Assets i ponownie zastosuj szablon, klikając przycisk Apply. Musisz sobie zdawać jednak sprawę, że w ten sposób możesz utracić zawartość obszarów edytowalnych. Inna metoda polega na sprawdzeniu bezpośrednio w dokumencie, do którego zastosowano szablon, jaki jest to szablon. W tym celu idź do dokumentu i wybierz pozycję Open Attached Template z menu podrzędnego Templates menu Modify.

Koniec ramki

Rys. 16.9. Okno dialogowe Update Pages

Stosowanie szablonów z dokumentami XML

Zawartość obszarów edytowalnych plików utworzonych na bazie szablonów można wyeksportować do formatu XML (Extensible Markup Language). Dzięki temu możliwe jest opracowywanie jej poza programem Dreamweaver. Dane XML można także zaimportować do szablonu, jeśli nazwy w pliku XML odpowiadają nazwom obszarów edytowalnych Twojego szablonu.

Gdy Dreamweaver importuje dane XML lub eksportuje obszary edytowalne jako dane XML, tworzy pary stowarzyszające zawartość szablonu (taką jak na przykład tekst) z nazwą obszaru edytowalnego, do którego zawartość należy (na przykład book_review). Są to pary typu nazwa-wartość.

Aby wyeksportować obszary edytowalne jako dane XML:

1. Otwórz dokument zawierający dane, które chcesz wyeksportować.

2. Wybierz pozycję Export Editable Regions as XML z menu podrzędnego Export menu File.

3. W oknie dialogowym Export Editable Regions as XML (patrz rysunek 16.10) wskaż sposób zapisu znaczników (sprawdź w pliku XML, aby określić, który będzie odpowiedni w Twoim przypadku) i kliknij OK.

4. Zdefiniuj nazwę pliku XML i zapisz go w odpowiednim katalogu.

Rys. 16.10. Okno dialogowe Export Editable Regions as XML

Aby zaimportować dane XML:

1. Utwórz lub otwórz szablon, do którego chcesz zaimportować zawartość w formacie XML.

2. Wybierz pozycję Import XML into Template z menu podrzędnego Import menu File.

3. Wskaż żądany plik XML i naciśnij przycisk Open.

Utworzony zostanie nowy dokument bazujący na szablonie wskazanym w pliku XML. Wszystkie obszary edytowalne tego dokumentu będą zawierać dane z pliku XML.

Jeśli struktura danych XML nie będzie prawidłowa, pojawią się problemy. Aby ich uniknąć, możesz wyeksportować z programu Dreamweaver przykładowy plik XML, a następnie wkleić oryginalny plik XML w to miejsce. Zapisz nowy plik i zaimportuj do programu Dreamweaver.

O bibliotekach

W tej części rozdziału przyjrzymy się bibliotekom witryny. Jeśli korzystałeś kiedykolwiek z aplikacji DTP, takich jak QuarkXpress, zasada działania bibliotek będzie Ci znana. Jeśli nie, wróć na początek rozdziału, gdzie znajdziesz informacje wstępne, lub czytaj po prostu dalej.

Jeśli pracujesz nad witryną zbudowaną z wielu stron, biblioteki pomogą Ci zaoszczędzić masę czasu. Celem biblioteki jest zgromadzenie w jednym miejscu elementów witryny, takich jak na przykład zestawy połączeń, w którym są one dostępne bez konieczności otwierania innego dokumentu.

Powiedzmy, że chcesz umieścić na każdej stronie witryny logo firmy, dane personalne, adres, numery telefonów oraz informacje o prawach autorskich. Zamiast wpisywać te dane osobno na każdej stronie, wpisz je raz i zapisz logo razem z tekstem jako element biblioteczny. Za pośrednictwem bibliotek masz możliwość automatycznej aktualizacji wszystkich stron, które zawierają dany obiekt. Tak więc jeśli numer telefonu firmy zmieni się, możesz zaktualizować za jednym zamachem wszystkie strony, na których go użyto, o ile oczywiście stanowi on element biblioteki.

Biblioteka jest dostępna z poziomu palety Assets. Przygotowane przeze mnie elementy biblioteczne obejmują różne kombinacje danych, co pozwala przeprowadzać aktualizację tych elementów w całej witrynie w czasie zaledwie kilku sekund.

Biblioteki witryny różnią się zasadniczo od szablonów. Biblioteki zawierają elementy strony, natomiast szablony obejmują swym działaniem całe strony. Elementy biblioteczne można stosować całkowicie swobodnie. Jeśli chcesz umieścić na stronie zestaw danych, który został zapisany jako element biblioteczny, nie wymaga to żadnego planowania.

Tworzenie i stosowanie elementów bibliotecznych

Utworzone elementy biblioteczne są zapisywane w folderze Library witryny, nad którą aktualnie pracujesz. W folderze tym umieszczane są wszystkie elementy biblioteczne witryny, a każdy z nich ma rozszerzenie nazwy .lbi.

Tak jak szablony mają swój folder, tak i elementy biblioteczne nie powinny być umieszczane w innym miejscu, niż folder Library. Nie powinieneś także zapisywać w tym folderze plików innych niż pliki .lbi. Dreamweaver musi dla każdego z elementów bibliotecznych określić adres względny. Musi więc dokładnie wiedzieć, gdzie dany element się znajduje.

Początek ramki

Podpowiedź

Jeśli przy próbie utworzenia elementu bibliotecznego Dreamweaver zwraca błąd wraz z komunikatem, że nie może odnaleźć foldera Library, załóż ten folder sam, pamiętając, by nazwa zaczynała się od wielkiej litery L, i zapisz go w swojej witrynie. Następnie powtórz próbę utworzenia elementu bibliotecznego.

Koniec ramki

Pamiętaj, że jeśli element biblioteczny zawiera obraz, nie należy zmieniać ulokowania tego obrazu. Jeśli przesuniesz obraz do innego katalogu, przy wstawianiu elementu bibliotecznego na stronie pojawi się ikona informująca o niemożności załadowania obrazu.

Aby przygotować element biblioteczny:

1. Zaznacz w widoku projektu te informacje, które chcesz zapisać jako element biblioteki.

2. Wybierz w menu Window pozycję Library (lub kliknij ikonę Library w oknie palety Assets - ma ona postać otwartej książki).

3. Kliknij przycisk New Library Item, u dołu okna palety Assets. Narysowana na nim jest kartka papieru ze znakiem plus (patrz rysunek 16.11).

Rys. 16.11. Paleta Library w programie Dreamweaver

4. Podaj krótką nazwę obiektu.

Obiekt pojawi się na liście kategorii Library palety Assets.

Aby zastosować element biblioteczny w dokumencie:

1. Umieść punkt wstawiania w tym obszarze dokumentu, gdzie chcesz wstawić element biblioteczny.

2. Wyświetl kategorię Library palety Assets i wskaż obiekt na liście pojedynczym kliknięciem (dwukrotne kliknięcie spowoduje otwarcie go do edycji).

3. Naciśnij przycisk Insert, w lewym dolnym rogu okna, lub przeciągnij obiekt na stronę. Wstawiany element pojawi się w tym miejscu dokumentu, w którym znajdował się punkt wstawiania.

Wszystkie elementy biblioteki wstawione do dokumentu są obwiedzione obramowaniem, które wskazuje na ich powiązania z biblioteką. Kolor obramowania można zmienić, można też wyłączyć jego wyświetlanie. Odpowiednie ustawienia są dostępne w oknie dialogowym Preferences (wybierz pozycję Preferences w menu Edit, a następnie wskaż kategorię Highlighting).

Początek ramki

Podpowiedź

Aby przeciągnąć element biblioteczny z biblioteki na stronę tworząc kopię, która już na starcie jest odłączona od biblioteki, wciśnij w trakcie przeciągania klawisz Ctrl.

Koniec ramki

Edycja elementów bibliotecznych

Wszelkie zmiany wprowadzone w danym elemencie bibliotecznym zostaną natychmiast uwzględnione wszędzie tam, gdzie został on użyty.

Gdy klikniesz dwukrotnie nazwę na liście kategorii Library palety Assets lub klikniesz przycisk Open inspektora Property (wcześniej musisz zaznaczyć element biblioteki w dokumencie - przypis tłum.), Dreamweaver otworzy element biblioteczny w nowym oknie. Ten nowy dokument służy jedynie do edycji elementu biblioteki, nie jest więc samodzielnym dokumentem, który może być opublikowany w Internecie.

Aby otworzyć element biblioteczny do edycji:

1. Zaznacz element biblioteki w aktualnie otwartym dokumencie i kliknij przycisk Open w inspektorze Property (patrz rysunek 16.12) lub kliknij dwukrotnie ikonę elementu na liście Library w oknie palety Assets.

Rys. 16.12. Stosowanie elementu bibliotecznego w programie Dreamweaver 4

2. Wprowadź zmiany w oknie edycji (kolor tła będzie szary).

3. Wybierz pozycję Save z menu File.

4. W oknie dialogowym Update Library Items (patrz rysunek 16.13) kliknij przycisk Update, jeśli chcesz, aby zmiany zostały wprowadzone w całej witrynie (w przeciwnym razie musisz odłączyć element biblioteczny od biblioteki).

Rys. 16.13. Okno dialogowe Update Library Items

Dreamweaver dokona aktualizacji stron i wyświetli w oknie dialogowym Update Pages raport podsumowujący ten proces. Zamknij okno edycji elementu biblioteki, aby powrócić do dokumentu.

Odłączanie i usuwanie elementów bibliotecznych

Czasami aktualizacja wszystkich wystąpień danego elementu bibliotecznego w dokumencie nie jest pożądana. W takim przypadku konieczne jest odłączenie od biblioteki i usamodzielnienie tych wystąpień elementu, których nie chcesz aktualizować. Pamiętaj jednakże, że nie będą one już automatycznie aktualizowane.

Aby odłączyć element, zaznacz go i kliknij w inspektorze Property przycisk Detach from Original (patrz rysunek 16.12). Alternatywnie możesz zaznaczyć element, kliknąć prawym klawiszem myszki (lub kliknąć przy wciśniętym klawiszu Ctrl) i wybrać z menu kontekstowego pozycję Detach from Original. Możesz także przeciągnąć element z listy Library do okna dokumentu przy wciśniętym klawiszu Ctrl.

Aby usunąć element biblioteczny z aktualnie otwartego dokumentu, zaznacz go i naciśnij jeden z klawiszy - Delete lub Backspace.

Aby pozbyć się elementu z biblioteki, wybierz pozycję Library z menu Window i wskaż ikonę usuwanej pozycji w kategorii Library palety Assets. Kliknij ikonę kosza, prawym dolnym rogu okna palety - Dreamweaver zapyta, czy na pewno chcesz usunąć wskazany element. Pamiętaj, że usunięcie elementu bibliotecznego oznacza, że wszystkie jego wystąpienia w dokumentach witryny staną się samodzielne i nie będą już automatycznie aktualizowane. Jednocześnie nie oznacza to, że wszystkie one znikną z dokumentów.

Odtwarzanie elementu bibliotecznego

Aby odtworzyć brakujący element biblioteki lub zastąpić go, zaznacz element w dokumencie i kliknij w inspektorze Property przycisk Recreate.

Z tego przycisku możesz także skorzystać, jeśli przypadkowo zapisałeś element biblioteczny folderze niewłaściwej witryny (lub go przez przypadek usunąłeś - przypis tłum.).

Kopiowanie elementów bibliotecznych

Jeśli z pewnych elementów bibliotecznych chciałbyś skorzystać także w innej witrynie, a nie tylko tam, gdzie zostały utworzone, możesz je po prostu skopiować.

Aby skopiować element biblioteczny, zaznacz jego ikonę w kategorii Library palety Asstes (by wyświetlić paletę Assets, wybierz pozycję Library w menu Window), a następnie kliknij prawym klawiszem myszki lub kliknij przy wciśniętym klawiszu Ctrl, by wyświetlić menu kontekstowe. Wybierz w nim pozycję Copy to Site (patrz rysunek 16.14) i wskaż nazwę witryny, do której chcesz skopiować zaznaczony element.

Rys. 16.14. Pozycja Copy to Site w menu kontekstowym wywołanym w oknie palety Library

Początek ramki

Podpowiedź

Menu kontekstowe palety Library pozwala także znaleźć element biblioteczny w dokumencie.

Koniec ramki

Elementy biblioteczne korzystające ze skryptów JavaScript

Gdy tworzysz elementy biblioteczne, które zawierają behawiory programu Dreamweaver, w pliku elementu umieszczana jest tylko procedura obsługi zdarzenia (onClick, onLoad lub onMouseOver). Same funkcje JavaScript nie są kopiowane do pliku. Dreamweaver wstawia odpowiednie funkcje w sekcji HEAD dopiero po zastosowaniu elementu bibliotecznego w dokumencie.

Można utworzyć element biblioteczny zawierający ręcznie wpisane skrypty JavaScript, jeśli przy wstawianiu kodu zastosujesz behawior Call JavaScript. W przeciwnym przypadku skrypty nie zostaną w nim zawarte.

Ze względu na sposób, w jaki Dreamweaver obsługuje behawiory w elementach bibliotecznych, nie jest możliwa ich modyfikacja w oknie edycji palety Library.

Aby zmodyfikować behawiory:

1. Otwórz dokument zawierający element biblioteczny, odłącz go od oryginału i wprowadź w behawiorach żądane zmiany.

2. Będąc nadal w dokumencie, odtwórz element biblioteczny, zaznaczając go i naciskając przycisk Recreate w inspektorze Property (patrz rysunek 16.12). Możesz także usunąć stary behawior w kategorii Library palety Assets i utworzyć nowy element biblioteczny o tej samej nazwie (pamiętaj, by nie tylko nazwa była identyczna, lecz także wielkość liter).

3. Aby dokonać aktualizacji elementów we wszystkich dokumentach, które zawierały poprzedni element biblioteczny, wybierz pozycję Update Pages w menu podrzędnym Library menu Modify, a następnie wybierz File That Use i wskaż nazwę elementu na liście rozwijanej obok listy Look In.

4. Sprawdź, czy zaznaczone jest pole wyboru Library Items, i naciśnij przycisk Start.

Dreamweaver zaktualizuje strony i przedstawi raport tej operacji w oknie Update Pages.

Podsumowanie

Ten rozdział poświęcony był automatyzacji procesu budowania i aktualizacji witryn przy wykorzystaniu szablonów i elementów bibliotecznych. W przypadku szablonów pewne obszary strony lub zestawu stron można zdefiniować jako edytowalne lub zablokowane. Pozwala to zapobiec zmianom projektu i wyglądu witryny oraz ułatwia aktualizację witryny. Szablony są tworzone, edytowane, aktualizowane i stosowane do stron z poziomu kategorii Templates palety Assets. Są przechowywane w folderze Templates, a ich pliki mają rozszerzenie nazwy .dwt (pochodzi to od „Dreamweaver Template”).

Biblioteka witryny to kolekcja elementów, takich jak tekst i obrazy, które można zapisać i stosować wielokrotnie w całej witrynie. Elementy biblioteczne są przechowywane w folderze Library, a ich pliki mają rozszerzenie nazwy .lbi (co pochodzi od „Library Item”). Modyfikacja elementu bibliotecznego jest uwzględniana na wszystkich stronach, na których element ten został użyty, chyba że odłączono go od oryginału.

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

2 G:\DREAM_trans\rozdz16.doc

---