--=REKLAMA=--

Zaczynamy z Joomla! 1.5/Projektowanie wyglądu witryny za pomocą szablonów

Z Joomla!WikiPL

Wersja Zwiastun (dyskusja | edycje) z dnia 02:21, 28 lip 2013

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)

Projektowanie wyglądu za pomocą domyślnych szablonów J! 1.5

Joomla w wersji 1.5.x Celem niniejszego dokumentu jest pomoc w zrozumieniu, w jaki sposób wygląd graficzny witryny w Joomla! jest osiągany przy użyciu szablonu. Jest to wstęp do tworzenia witryny, ponieważ treść i wygląd witryny Joomla! są obsługiwane oddzielnie.

Wstęp do tworzenia witryny Joomla! 1.5

Istnieją cztery aspekty projektowania nowej witryny internetowej opartej na Joomla!. Te cztery aspekty projektowania witryny odnoszą się również do wprowadzania zmian w istniejącej witrynie oraz migracji istniejącej witryny do Joomla!.

Są to:

  1. Hierarchia zawartości - sekcje, kategorie i artykuły;
  2. Spodziewani użytkownicy - co będą w witrynie przeglądać i robić, co jesteśmy im w stanie zaoferować;
  3. Układ menu i rozmieszczenie niektórych usług (funkcji) w witrynie;
  4. Projekt graficzny całej witryny.

Każdy z tych aspektów powinien się opierać na założonych celach i oczekiwaniach wobec witryny. Trzeba więc sobie jasno zdawać sprawę, co witryna ma komunikować i posiadać jej plan. Łatwiej powiedzieć niż zrobić!

Kto skorzysta z tego poradnika

  • Każdy, kto zamierza stworzyć witrynę Joomla!.

Poradnik będzie również przydatny dla kogoś, kto będzie modyfikować witrynę Joomla!. Poradnik został napisany z założeniem, że nie masz doświadczenia w projektowaniu wyglądu witryny Joomla!. Niektóre aspekty szablonów są poza zakresem tego dokumentu, ale pod koniec zamieszczono linki do materiałów dogłębnie omawiających problematykę szablonów.


Szablony i wygląd witryny

Co oznacza wygląd witryny? Pytanie może wydawać się oczywiste i odpowiedź również może wydawać się oczywista. Przynajmniej pozornie.

W Joomla rozdzielono zarządzanie projektem graficznym witryny od zarządzania zawartością. W efekcie wygląd witryny projektowany jest osobno.

Nie musimy ręcznie projektować wyglądu każdej strony - zawartość stron ładowana jest do zdefiniowanej wcześniej struktury - formy. Mogłeś już tego doświadczyć, tworząc i publikując artykuł. Gdy utworzysz artykuł, jest on umieszczany w strukturze treści. W witrynie udostępniany jest za pomocą pozycji menu. Jego wygląd na stronie kontrolowany jest przez system Joomla.

Układ i wygląd pozycji menu obsługiwane są przez system szablonów Joomla!.

Same szablony składają się z serii plików, do czego wrócimy później.

Zmień szablon, aby zobaczyć, że zmienia się wygląd

Możesz zobaczyć, jak zmienia się wygląd witryny przy użyciu różnych szablonów, co ilustruje rozdzielanie wyglądu i zawartości.

  • Skorzystaj z witryny z treścią.
Dobrym przykładem jest lokalna instalacja Joomla z przykładowymi danymi.

Joomla! instalowany jest standardowo z trzema szablonami. Możesz zobaczyć, jak one wyglądają, zmieniając domyślny szablon w lokalnej instalacji Joomla.

Zmiana szablonu

  • Zaloguj się do zaplecza witryny z przykładowymi danymi.
  • Otwórz witrynę na trzech różnych kartach przeglądarki lub w trzech oknach (dzięki temu można będzie obejrzeć stronę z różnymi szablonami).
  • Przejdź na stronę zarządzania szablonami zwaną też menedżerem szablonów:
    • Rozwiń menu Rozszerzenia,
    • Wybierz pozycję Szablony.

Korzystając z narzędzi menedżera, możesz zmienić domyślny szablon na inny. Po instalacji jako domyślny ustawiony jest szablon MikyWay (Drga Mleczna).

  • Zaznacz pole opcji przy szablonie Ja Purity i kliknij przycisk Domyślny w przyborniku.
  • Przejdź na drugą z otwartych kart przeglądarki (albo do drugiego okna) i odśwież widok, aby zobaczyć zmieniony szablon.
  • Następnie jeszcze raz w menedżerze szablonów zmień szablon domyślny na Beez i odśwież widok na trzeciej karcie przegladarki.

Obejrzyj wszystkie trzy strony, zwracając uwagę na:

  • kolory,
  • położenie menu,
  • rozmieszczenie na ekranie.

To, co widzisz, zależy od szablonu, jaki jest w użyciu. (W standardowej instalacji Joomla! domyślnie ustawiony jest szablon MilkyWay, ale ilustracje w tej serii dokumentów pochodzą z witryny, w której używany jest szablon ja_purity).

Ekran menedżera szablonów - jako domyślny jest ustawiony szablon ja_purity.

W wykazie znajdują się trzy szablony dostarczane z Joomla! Tutaj użyty jest szablon ja_purity. Zauważ, że możesz:

  • ustawić szablon domyślny,
  • edytować szablon.

Szablon domyślny jest jednym z obsługujących witrynę i zwykle odnosi się do całej witryny. Zmiana domyślnego szablonu zmienia wygląd stron witryny.

Zmiana domyślnego szablonu

  • Kliknij w polu opcji, aby wybrać jeden z szablonów.
  • Kliknij przyborniku przycisk Domyślne.

Aby zobaczyć rezultat zmiany:

  • Kliknij przycisk Podgląd.

Wyświetla się strona główna witryny z domyślnym szablonem.

Można również:

  • Przejść do okna z widokiem witryny i ją odświeżyć.

Witryna będzie mieć inny wygląd, choć zawartość będzie taka sama. Po zmianie szablonu odśwież widok na kolejnej karcie przeglądarki, aby porównać strony i wychwycić różnice.

Podsumowanie: Szablony dostarczane z Joomla!

Beez
http://docs.joomla.org/Beez
Wykorzystuje CSS (Cascading Style Sheet) do formatowania układu. Wymaga doświadczenia, aby go dostosować do swoich potrzeb.
Rhuk_milkyway
http://docs.joomla.org/Tutorial:Customising_the_Milkyway_template
Jest to domyślny szablon systemu. Ma tylko kilka ustawień.
JA_purity
http://docs.joomla.org/Ja_purity
Jest wysoce konfigurowalny i zawiera dużą liczbę parametrów. Posiada największą elastyczność, bez konieczności modyfikowania kodu.

Zmiany przy użyciu menedżera szablonów

Szablony Rhuk_milkyway i ja_purity pozwalają na pewne zmiany, których można dokonać ustawiając ich parametry w edytorze szablonu.

Rhuk_milkyway

  • Ustaw szablon Rhuk_Milkyway jako domyślny.
  • Kliknij nazwę szablonu lub zaznacz pole opcji przy szablonie i kliknij przycisk Edytuj w przyborniku.

Na ekranie pojawi się edytor szablonu. W szablonie Rhuk_Milkyway można zmienić niektóre kolory.

  • Wybróbuj inne kolory - zaznacz wybrany kolor.
  • Kliknij przycisk Zastosuj

albo

  • Odśwież stronę (strony), aby zobaczyć wyniki,

lub

  • Kliknij przycisk Podgląd, który pokazuje, jak strona będzie wyglądać, gdy zmiany zostaną wprowadzane.

Ja_purity

  • Ustaw szablon JA Purity jako domyślny.
  • Kliknij nazwę szablonu lub zaznacz pole opcji przy szablonie i kliknij przycisk Edytuj w przyborniku.

Na ekranie pojawi się edytor szablonu. Masz tu więcej możliwości zmian, niż w pozostałych szablonach. Wypróbuj je podobnie, jak poprzednio. Pamiętaj, aby nacisnąć ikonę Zastosuj przed podglądem.

Inne zmiany za pomocą strony Edytuj szablon

Zauważ, że w przyborniku są również opcje Edytuj HTML i Edytuj CSS. Przyciski te dają dostęp do plików szablonu, w których można dokonywać różnych zmian. Omówienie tych możliwości wykracza poza zakres tego dokumentu. Modyfikacje kodu HTML i CSS udokumentowane są w innym miejscu.

Co to są szablony i gdzie się znajdują?

Szablony to zestawy plików css, xml, php, html i graficznych, które współpracują ze sobą. Są one przechowywane w katalogu /templates witryny. Na serwerze lokalnym można zobaczyć te pliki u siebie. Jeśli korzystasz z istniejącej witryny internetowej, możesz nie być w stanie wyświetlić tych plików (są na serwerze, który zazwyczaj - ze względu na bezpieczeństwo - dostępny jest tylko dla kilku osób).

Położenie plików szablonu ja_purity w przykładowej witrynie - instalacja lokalna
  • Użyj instalacji lokalnej

Nie należy tych plików edytować czy usuwać - oczywiście.

Szablony znajdują się w katalogu /templates. W katalogu każdego szablonu istnieją liczne foldery z odpowiednimi plikami, kontrolującymi wygląd i zmiany parametrów, które mogą być dokonane w szablonie na stronie menedżera.

Więcej o szablonach

Nie jesteś ograniczony do korzystania z jednego z szablonów dostarczanych z Joomla! Jeśli chcesz, możesz użyć innego szablonu. Aby to zrobić:

  • Pobierz szablon z internetu i zainstaluj go - są one często bezpłatne, ale czasami trzeba za nie zapłacić.
  • Napisz sam nowy szablon.

Aby skorzystać z zaprojektowanego szablonu, trzeba go znaleźć, pobrać (czasem najpierw kupić) i zainstalować. Potrzebne są do tego pewne umiejętności informatyczne i znajomość zaplecza Joomla!. Omówienie tego wykracza zakresem poza dokumenty w tej serii, ale poniżej wskazujemy zasoby w sieci, omawiające ten temat.

Pisanie własnego szablonu również jest poza zakresem dokumentów w tej serii. Musisz posiadać umiejętności kodowania i być swego rodzaju programistą, który tworzy swój własny kod, przynajmniej dla części witryny. Niektóre wprowadzenia do korzystania z CSS są bardzo pomocne. Istnieje także kilka szczegółowych opracowań w formie dokumentów on-line i książek.

Planowanie witryny

Ten cykl mówi o tworzeniu witryny, która wykorzystuje Joomla! oraz korzysta z jednego z szablonów dołaczonych do Joomla!

  • Zatem wszystko, co musisz zrobić, planując witrynę, to zdecydować, który z szablonów ma najładniejszy wygląd i ustawić go jako szablon domyślny.

I pamiętaj, że możesz zmieniać szablony po utworzeniu witryny.

Więcej informacji

Podstawowe informacje na temat szablonów

  • Skrócona instrukcja obsługi. Zawiera fragment na temat własnego projektu i pisania własnych szablonów.

Więcej o kwestiach szczegółowych

Rozszerzona dokumentacja

Książki Zobacz Książki i referencje. Wszystkie książki zawierają materiały o szablonach. Najbardziej szczegółowe omówienie w Joomla! Biblia

Dziękujemy za wkład

» Stefan Wajda [zwiastun],