Dynamiczne szablony

Choć niektórzy twierdzą, że w Office 2003 indywidualnemu użytkownikowi przyda się głównie udoskonalony Outlook, śmiem twierdzić, że webmaster zachwyci się w znacznie większej mierze nowym edytorem FrontPage 2003.

Choć niektórzy twierdzą, że w Office 2003 indywidualnemu użytkownikowi przyda się głównie udoskonalony Outlook, śmiem twierdzić, że webmaster zachwyci się w znacznie większej mierze nowym edytorem FrontPage 2003.

Krytykowanie programów Microsoftu jest w modzie, zwłaszcza na internetowych forach dyskusyjnych. Szczególne cięgi zbiera od dawna FrontPage - że śmieci, że niewygodny, że w ogóle "be", w przeciwieństwie do opiewanego Dreamweavera. Używam FrontPage'a od dawna, a choć niejedna rzecz mnie w nim irytowała, upieram się, że to dobry i wygodny edytor, krytykom zaś polecam najnowszą wersję 2003 - najbardziej zatwardziali oponenci zmienią chyba zdanie.

Zaznaczenie tych opcji pomoże w pozycjonowaniu elementów na ekranie.

Zaznaczenie tych opcji pomoże w pozycjonowaniu elementów na ekranie.

Najwyraźniej Microsoft wziął sobie do serca uszczypliwości, bo pojawiło się w niej sporo udogodnień, które wszystkim użytkownikom bardzo się spodobają. Przede wszystkim znacznie udoskonalono ergonomię pracy: opcjonalny podział ekranu na część graficzną i podgląd kodu, wygodniejsza edycja kodu źródłowego, łatwiejsze aplikowanie szablonów graficznych (czyli motywów), wyświetlanie znaczników w trybie graficznym, selektor znaczników na pasku nad oknem edycji wraz z możliwością uruchamiania ich miniedytorów, lepsza obsługa stylów, magnetyczna siatka do pozycjonowania elementów, znacznie większa konfigurowalność edytora, efektywniejsze paski narzędzi, podgląd w różnych przeglądarkach i z różną rozdzielczością, optymalizacja i kontrola poprawności kodu - w sumie mnóstwo mniejszych i większych ułatwień. Jeśli dodać do tego wprowadzoną już jakiś czas temu obsługę Unikodu (a może pora rzucić hasło: "stosujmy wreszcie Unikod"?), całość staje się naprawdę komfortowym narzędziem.

Bardziej zaawansowanemu webmasterowi szczególnie się spodobają warstwy i dynamiczne szablony sieci Web (DWT - Dynamic Web Template) - one właśnie są przedmiotem naszego warsztatu.

Stare i nowe

Gotowy szablon po wypełnieniu elementami stałymi i jednym elementem zmiennym (edytowalnym).

Gotowy szablon po wypełnieniu elementami stałymi i jednym elementem zmiennym (edytowalnym).

W poprzednich wersjach FrontPage oferował tzw. obramowanie wspólne, czyli obszary, które powtarzały się na wszystkich stronach witryny - zazwyczaj umieszczano na nich logo, tytuł i system nawigacyjny. W obecnej wersji rozszerzono koncepcję - dynamiczne szablony sieci Web, czyli możliwość tworzenia szablonu, który można zastosować do wszystkich stron witryny.

W odróżnieniu od obramowania wspólnego powtarzające się elementy można umieścić w dowolnym miejscu, a nie tylko na paskach wzdłuż brzegu strony. Najwygodniej jest, oczywiście, wykorzystać do tego celu warstwy, do których można wstawić np. ilustracje, powtarzające się fragmenty tekstu czy elementy nawigacji. Z kolei elementami zmiennymi są tzw. obszary edytowalne - można je wypełniać odmienną treścią na poszczególnych stronach i tylko one są wówczas aktywne.

Po utworzeniu szablonu wystarczy zapisać go na dysku jako plik DWT, a następnie dołączać do dowolnej strony, która automatycznie wypełnia się "stałymi fragmentami gry" i pozwala edytować elementy zmienne. Można zatem w wygodny sposób ujednolicić wygląd wszystkich stron, jeśli taki jest akurat zamysł artystyczny twórcy witryny.

Tworzenie warstw i szablonu

Strona główna witryny po dołączeniu dynamicznego szablonu.

Strona główna witryny po dołączeniu dynamicznego szablonu.

Choć do stosowania DWT warstwy nie są niezbędne, ich użycie jest w pełni zasadne, skoro stałe elementy mogą się pojawiać w dowolnym miejscu strony - alternatywa to, oczywiście, użycie tabeli jako narzędzia pozycjonującego fragmenty strony.

Aby elementy stałe i zmienne nie zachodziły na siebie, trzeba zarezerwować dla nich miejsce w specjalnych pojemnikach, którymi mogą być właśnie warstwy. Pojemniki te dadzą się swobodnie przemieszczać, dzięki czemu łatwo zabezpieczymy się przed konfliktami - chyba że autor zamierza częściowo nałożyć na siebie ilustrację i tekst. To jest możliwe, jeśli akurat kolory tych elementów wzajemnie sobie nie przeszkadzają.

Zakładamy, że wiesz, jak utworzyć szkielet witryny, czyli stronę główną i podstrony wszystkich szczebli, powiązane ze sobą.

Utwórz nową stronę i zapisz ją od razu jako plik szablon.dwt, wybierając typ Dynamiczny szablon sieci Web (*.dwt).

Każda zmiana szablonu powinna być uwzględniona na połączonych z nim stronach witryny.

Każda zmiana szablonu powinna być uwzględniona na połączonych z nim stronach witryny.

Załóżmy dla uproszczenia, że strona składa się z czterech bloków: ilustracji, tytułu, systemu nawigacyjnego i bloku przeznaczonego do wypełnienia dowolną treścią.

Aby wygodnie pracować, w menu Widok rozwiń polecenie Linijka i siatka, a następnie zaznacz Pokaż linijkę, Pokaż siatkę iPrzyciągaj do siatki.

Wybierz w menu Wstaw polecenie Warstwa. W analogiczny sposób wstaw trzy dalsze warstwy, określając pozycję założonych czterech bloków. Przed wstawieniem każdej z warstw zabierz kursor myszy z poprzedniej, aby były niezależne od siebie. Warstwy można rozszerzać i przesuwać - wystarczy kliknąć etykietę "Layer", aby ukazały się ich zaczepy.

Zmiana motywu szablonu zostanie automatycznie uwzględniona na wszystkich dołączonych stronach.

Zmiana motywu szablonu zostanie automatycznie uwzględniona na wszystkich dołączonych stronach.

Trzy warstwy wypełnij stałymi elementami - grafiką, tytułem i systemem nawigacyjnym (Wstaw | Nawigacja | Pasek oparty na strukturze nawigacyjnej).

Kliknij prawym przyciskiem myszy czwartą warstwę i wybierz polecenie Zarządzaj regionami edytowalnymi. W oknie Regiony edytowalne wpisz nazwę regionu Edycja i kliknij przycisk Dodaj, a potem Zamknij. Zapisz ostateczną postać szablonu na dysku.

Uwaga techniczna: warstwy są oparte na wycinkach DIV i pozycjonowane w sposób absolutny. Przykładowy kod warstwy wygląda następująco:

<div style="position: absolute; width: 155px; height: 210px; z-index: 1; left: 10px; top: 15px" id="layer1">

Na załączonym ekranie widać także panel Okienko zadań | Warstwy. Zwróć uwagę na współczynnik Z (tzw. z-index) przy poszczególnych warstwach - im wyższa wartość, tym wyżej w stosie znajduje się dana warstwa. Jeśli zechcesz nałożyć na siebie częściowo dwie warstwy, zmiana współczynnika Z pomoże zmodyfikować ich kolejność.

Dołączanie szablonu do witryny

DWT Browser znacznie ułatwia zarządzanie szablonami zapisanymi w różnych folderach.

DWT Browser znacznie ułatwia zarządzanie szablonami zapisanymi w różnych folderach.

Na liście folderów zaznacz myszą wszystkie strony, do których chcesz zastosować zbudowany przed chwilą szablon, i w menu Format wybierz polecenie Dynamiczny szablon sieci Web | Dołącz dynamiczny szablon sieci Web. W oknie Dołączanie dynamicznego szablonu sieci Web wybierz plik szablon.dwt i kliknij przycisk Otwórz. Edytor dołączy szablon do wszystkich stron i wyświetli komunikat o przebiegu akcji - w menu Plik wybierz od razu polecenie Zapisz wszystko.

Zauważ, że trzy ramki z elementami stałymi są zablokowane (kursor myszy ma postać przekreślonego kółka), natomiast edycji można dokonywać jedynie w ramce, która została zdefiniowana jako obszar edytowalny. Wszystkie strony wyglądają tak samo, choć oczywiście w ramce z systemem nawigacyjnym pojawiają się różne elementy, zależnie od sposobu zdefiniowania tego systemu (tworzenie nawigacji nie jest przedmiotem naszego warsztatu).

Modyfikacje

Jeśli w przyszłości zmienisz nieco zawartość szablonu i zapiszesz go na dysku, program stwierdzi, że do szablonu dołączone są strony witryny i zaproponuje ich modyfikację.

Pamiętaj też, że zmieniając motyw, musisz zmodyfikować motyw szablonu, bo to on decyduje o graficznej postaci witryny.

Oczywiście do witryny można dołączyć wiele dynamicznych szablonów, opierając poszczególne jej fragmenty na odmiennych szablonach (np. zmieniająca się kolorystyka stron różnych działów firmy), można też odłączyć któryś szablon, a zastosować inny.

DWT Browser

Firma DPA Software oferuje program DWT Browser, wygodne narzędzie do organizowania, przeglądania i stosowania w witrynach dynamicznych szablonów. Kosztuje 30 dolarów ( http://www.frontlook.com - 30-dniowa wersja testowa) i przyda się wszystkim zaawansowanym webmasterom.


Zobacz również