Layout, czyli szablony
Wpisał: Stefan Wajda [zwiastun]   
10.02.2006.

Twoja witryna winna mie? niepowtarzalny wygl?d. W Joomla mo?esz uzyska? taki efekt dzi?ki szablonom. Mo?esz dobra? taki szablon, który odpowiada? b?dzie najlepiej za?o?eniom witryny.

Szablon ma ogromne znaczenie praktyczne:

  • internautom umo?liwia ?atw? orientacj? w zawarto?ci serwisu,
  • redaktorom i administratorom pozwala planowo zarz?dza? dodawaniem i publikowaniem zawarto?ci.
  • silnikowi Joomli wskazuje, gdzie i jak? zawarto?? umieszcza? oraz jak j? formatowa?.

Szablon, nazywany te? templatk? [ ang. templates ], skórk? lub layoutem, okre?la uk?ad kompozycyjny strony i wszystkie istotne cechy wygl?du graficznego: kolorystyk?, kszta?t i rozmiar czcionek, wygl?d nag?ówków, itd.

Szablon - layout serwisu

W szablonie okre?lone s?:

  • g?ówny obszar prezentacji,
  • pozycje modu?ów,
  • sta?e elementy strony, np. logo, stopka.

Gdy u?ytkownik kliknie odno?nik w menu g?ównym lub w lokalnym albo odno?nik, znajduj?cy si? np.  w module, to:

  • w g?ównym obszarze prezentacji umieszczany jest element serwisu skojarzony z odno?nikiem,
  • zmienia si? dobór i uk?ad modu?ów oraz ich zawarto??,
  • nie zmienia si? zawarto?? sta?ych elementów.

Z tej cz??ci dowiesz si?:

Kilka szablonów w??czonych jest do pakietu ?ród?owego Joomla! Mo?esz stworzy? w?asny szablon albo znale?? odpowiedni dla Twojego serwisu w repozytoriach plikow dla Joomla!:

Pobranie szablonu

Aby pobra? pakiet instalacyjny szablonu:

  1. Stwórz na dysku lokalnym w swoim katalogu plików Joomla folder /templates
  2. Kliknij jeden z odno?ników powy?ej, by otworzy? stron? WWW z szablonami.
  3. Wybierz szablon, który chcesz pobra?.
  4. Klikni na odno?nik: Pobierz, Download lub inny, np. nazw? pakietu.
  5. W oknie dialogowym wska? utworzony w swoim komputerze katalog /templates i naci?nij przycisk Zapisz.

Porada: Mo?esz pobra? od razu kilka pakietów z szablonami. Wybrane pakiety zainstalujesz w swojej witrynie, a nast?pnie - po ewentualnej modyfikacji - opublikujesz ten najbardziej spe?niaj?cy Twoje oczekiwania.

S? dwie g?ówne metody instalacji szablonu:

  • za pomoc? FTP - przes?anie plików szablonu na serwer,
  • za pomoc? instalatora Joomla.

Pierwsza metoda jest prostsza. Wystarczy bowiem rozpakowa? pakiet ?ród?owy szablonu na swoim komputerze i przes?a? rozpakowany zestaw plików do katalogu twoja_joomla/templates/nazwa_szablonu na serwerze.

T? metod? mo?esz w krótkim czasie umie?ci? na serwerze kilka szablonów.

Metoda druga nie jest trudniejsza, ale mo?e sprawia? k?opoty, gdy serwer pracuje w tzw. bezpiecznym trybie [ SafeMode=On ] albo gdy nie jest obs?ugiwana biblioteka ZLIB.

Je?li chcesz skorzysta? z instalatora Joomla:

  1. W panelu administratora przejd? do menu Instalatory ⇒ Szaty - witryna

    Image

  2. Sprawd?, czy mo?liwe jest zapisywanie w katalogu /templates,
  3. W oknie instalatora przejd? do pozycji Instaluj z pakietu ⇒ Pakiet instalacyjny

    Image

  4. Kliknij przycisk Przegl?daj. Otworzy si? okno umo?liwiaj?ce przeszukanie plików na Twoim komputerze lokalnym.
  5. Wska? plik pakietu instalacyjnego i naci?nij przycisk Otwórz. Powrócisz do okna instalatora.
  6. Kliknij przycisk Wczytaj plik i zainstaluj [ Upload file & Install ].

Otrzymasz komunikat, ?e instalacja nowego szablonu zako?czy?a si? pomy?lnie.

Uwaga: Dysponujesz jeszcze opcj? Instaluj z katalogu. W przypadku szablonów nie jest ona zbyt przydatna. Trzeba bowiem posy?a? wcze?niej pliki na serwer, a skoro tak, to mo?na je pos?a? od razu do katalogu /templates.

Publikacja szablonu

Po instalacji szablon trzeba opublikowa?. W tym celu:

  1. Kliknij odno?nik Przejd? do wykazu szablonów
  2. Zaznacz przy szablonie, który chcesz opublikowa?, pole wyboru:

    Image

  3. Kliknij w górnym pasku narz?dzi ikone lub odno?nik Domy?lnyDefault ].

Uwaga: Do wykazu szablonów mo?esz przej?? tak?e bezpo?rednio z menu administratora, wybieraj?c opcj?: WitrynaSzablonySzaty - witryna.

Image

Pobrany z sieci szablon mo?esz zmodyfikowa?. Nie jest to zadanie trudne, ale wymaga pewnego zmys?u graficznego. W nag?ówkach wielu szablonów umieszczane s? identyfikuj?ce wydawc?, cel i tematyk? serwisu obrazki - winietki, logo.To pierwszy element, który zauwa?a odwiedzaj?cy witryn?. Warto wi?c zadba? o wymian? tego elementu szablonu z sieci na w?asny.

Materia?y i narz?dzia

Przede wszystkim potrzebujesz odpowiedniego materialu graficznego - fotografii czy obrazu, a najlepiej wielu do wyboru. Przejrzyj swoje zbiory. Zapewne znajdziesz w nich niejedno zdj?cie, która mog?oby by? wizytówk? Twojej witryny. Je?li nie znajdziesz takiego - wykonanie serii zdj??, spo?ród których wybierzesz pó?niej to jedno, najciekawsze, nie stanowi dzi? ?adnego problemu.

Potrzebujesz równie? programu do edycji grafiki. Nie tylko do tego zadania. Dobry edytor grafiki to podstawowe narz?dzie projektanta strony WWW. Skorzystaj z upowszechnianego bezp?atnie na warunkach GNU/GPL, bardzo dobrego ju? programu GIMP, dost?pnego w wersji dla Linuxa i Windows.

Pobierz pakiet instalacyjny GIMP-a.

Od zdj?cia do winietki

Aby przygotowa? w?asny obrazek do nag?ówka szablonu, wykonaj nast?puj?ce czynno?ci:

  1. Uruchom swój program graficzny. Tutaj skorzystamy z PhotoShopa.
  2. W katalogu /images swojego szablonu odszukaj obrazek nag?ówka i wczytaj go do edytora.
  3. Odczytaj wymiary obrazka: szeroko?? i wysoko??.
  4. Zeskanuj wybrane za podstaw? nowego obrazka zdj?cie lub wczytaj je z aparatu cyfrowego

    Image

  5. Ustaw parametry funkcji PrzytnijCrop ] w Twoim programie graficznym: szeroko?? [ Width ] i wysoko?? [ Height ] - jak oryginalnego nag?ówka, rozdzielczo?? [ Resolution ] - 72 pikseli/cal.

    Image

  6. Narz?dziem PrzytnijCrop ] wyznacz na zdj?ciu obszar, który pos?u?y Ci za winiet?. B?d? niestandardowy! Zaznacz taki obszar, w którym b?dzie i co? symbolicznego, i co? intryguj?cego. To nie jest trudne. Mo?esz przecie? przeprowadzi? wiele prób.

    Image

  7. Narz?dziem do wprowadzania tekstu wpisz krótk? nazw? Twojej witryny. Mo?e to by? np. nazwa firmy. Ustal odpowiedni rozmiar i krój czcionki.
  8. Skorzystaj z narz?dzia definiowania efektów warstw [ Layers ]. Zastosuj jeden z efektów do warstwy napisu. Na przyk?ad:
    • Blending Options, by nada? napisowi pewien poziom przezroczysto?ci,
    • Drop Shadow czy te? Bevel and Emboss, by uzyska? efekt dwuwymiarowo?ci.
  9. Umie?? napis w jednym z typowych miejsc, np. w lewym górnym lub w prawym dolnym rogu.
  10. Wybierz w menu PlikFile ] opcj? Save for Web, a w oknie dialogowym ustaw: format, zwykle: .JPG, jako?? [ Quality ] - 30 lub 60 (High).
  11. Nadaj zapisywanej winiecie tak? nazw?, jak? ma oryginalny obrazek nag?ówka, np. header_short i kliknij przycisk OK.

    Image

  12. Prze?lij plik z winiet? do katalogu /templates/twoj_szablon/images/ na serwerze.
  13. Wywo?aj w przegl?darce swoj? witryn? - zobaczysz efekt.

    Image

Nawet je?li Ci? jeszcze nie satysfakcjonuje w pe?ni, mo?esz przyst?pi? do kolejnych zada?. Przygotowanie witryny troch? przecie? potrwa. W tym czasie Twoje my?li b?d? kr??y? wokó? koncepcji graficznej witryny, zw?aszcza winiety. Wrócisz do opracowania tej wymarzonej pó?niej, gdy oswoisz si? z Joomla!.

Zaprojektowanie w?asnego szablonu wymaga znajomo?ci HTML i CSS. Je?li chcesz zaprojektowa? w?asny szablon, skorzystaj z wybranej z poni?szej listy poradników:

Opracowania i t?umaczenia polskie

Opracowania w j?zyku angielskim

Zmieniony ( 05.03.2006. )