CMS Lab 04 Szablony

dr inż. Piotr Czapiewski

Systemy zarządzania treścią

Laboratorium 4

Joomla! – tworzenie szablonów

Cel ćwiczenia:

Opanowanie podstaw tworzenia szablonów dla systemu Joomla!

Przebieg ćwiczenia:

1. Instalacja systemu Joomla!

• Zainstaluj Joomla! ze standardowymi przykładowymi danymi lub wykorzystaj wcześniej przygotowaną witrynę.

2. Tworzenie szkieletu prostego szablonu

• Utworzymy szablon o nazwie SzablonTestowy. Załóż na dysku katalog dla tego szablonu:

[joomla]\templates\SzablonTestowy\

• W powyższym katalogu utwórz plik index.php zawierający podstawowy szkielet dokumentu HTML – będzie to główny plik naszego szablonu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</head>

<body>

Test

</body>

</html>

• Aby Joomla! „zauważyła” nasz szablon, w katalogu szablonu musimy umieścić plik XML

z opisem – templateDetails.xml:

<?xml version="1.0" encoding="windows-1250"?>

<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"

"http://dev.joomla.org/xml/1.5/template-install.dtd">

<name>SzablonTestowy</name>

<author>Jan Kowalski</author>

<description>Przykładowy szablon</description>

<files>

<filename>index.php</filename>

</files>

</install>

W pliku templateDatils.xml umieść właściwe dane: nazwę szablonu, autora, datę utworzenia. W sekcji <files> muszą pojawić się odniesienia do wszystkich plików wchodzących w skład szablonu – na razie jest to tylko jeden plik, index.php.

• Przejdź do panelu administracyjnego Joomla! , do w menu Rozszerzenia->Szablony. Na liście szablonów powinien być widoczny nasz nowoutworzony SzablonTestowy – ustaw go jako domyślny.

Strona 1

dr inż. Piotr Czapiewski

Systemy zarządzania treścią

Laboratorium 4

• Sprawdź wygląd strony frontowej.

• W głównym pliku szablonu przygotuj tabelę HTML odpowiadającą następującemu układowi strony:

<nagłówek>

<ścieżka nawigacji>

<główna część strony>

• W komórkach tabeli umieścimy odpowiednie elementy witryny. Określ szerokość każdej kolumny (w %, np. 25%, 50% i 25%), nadaj komórkom atrybut id, odpowiednio o wartości: naglowek, szukaj, nawigacja, lewe_menu, glowna, prawe_menu

• Dla lepszego uwidocznienia układu strony wypełnij tymczasowo komórki tekstem (np. takim samym jak id) oraz nadaj tabeli atrybuty:

border="1" width="80%"

• Sprawdź wygląd strony frontowej.

Strona 2

dr inż. Piotr Czapiewski

Systemy zarządzania treścią

Laboratorium 4

3. Dodawanie modułów do szablonu

• Aby wyświetlić w wybranym miejscu część zawartości strony, umieszczamy w pliku szablonu następujący znacznik:

<jdoc:include type="modules" name="top" style="none" />

gdzie atrybut type oznacza rodzaj wyświetlanej zawartości (w tym przypadku: moduł), name – jej identyfikator (w tym przypadku: wyświetlany będzie moduł o nazwie top), a style – sposób wyświetlania (w tym przypadku: bez dodatkowego formatowania).

• Umieść w odpowiednich komórkach tabeli znaczniki wyświetlające moduły: top, breadcrumb (ścieżka nawigacji), user4 (pole wyszukiwania), left, right oraz footer.

• Sprawdź wygląd strony frontowej.

4. Dodawanie głównej treści do szablonu

• Aby umieścić w szablonie zasadniczą treść strony, dodaj w odpowiednim miejscu znacznik:

<jdoc:include type="component" style=" none" />

• Sprawdź wygląd strony frontowej.

5. Dodawanie arkusza CSS

• W katalogu szablonu załóż podkatalog css, stwórz w nim plik template.css

• W arkuszu CSS umieść kilka prostych reguł, np.:

body {

font-family: Helvetica,Arial,sans-serif;

color: #333;

}

• W pliku szablonu, w nagłówku, umieść odwołanie do arkusza CSS:

type="text/css" />

type="text/css" />

• Sprawdź wygląd strony frontowej.

• Dodaj odwołanie do pliku arkusza css/template.css w pliku opisującym szablon templateDetails.xml

• Zamiast budować od podstaw arkusz CSS dla witryny, łatwiej jest zmodyfikować któryś z gotowych arkuszy. Skopiuj zawartość pliku template.css z szablonu rhuk_milkyway i wklej do swojego pliku CSS. Sprawdź wygląd strony frontowej.

• Zmodyfikuj kilka wybranych reguł lub dodaj nowe (np. dodaj reguły dla identyfikatorów lewe_menu, prawe_menu, glowna)

Strona 3