Co nas trzyma na tym globie prócz siły ciążenia?
Ćwiczenie 24 - Szablony i inne atrakcje
Wprowadzenie:
W ostatnim ćwiczeniu poświęconym Joomli zajmiemy się modyfikacją wyglądu naszej witryny poprzez zmianę szablonu lub też zmianę schematu kolorów. Dodamy również galerię zdjęć i księgę gości.
Jeżeli chodzi o wykonanie samych ćwiczeń, to istnieją trzy możliwości ich zaliczenia:
- pierwsza - wykonanie wszystkich zrzutów ekranowych zgodnie z poleceniami i tak samo jak w krokach ćwiczenia - podstawą zaliczenia będzie folder z tymi zrzutami, dokumentujący cała pracę
- druga - wykonanie wszystkich kroków zgodnie z poleceniami na komputerze nauczycielskim w pracowni komputerowej
- trzecia - własny portal zbudowany na Joomli istniejący w sieci WWW
Czynności należy rozpocząć od uruchomienia serwera EasyPHP, uruchomienia przeglądarki i otwarcia obu części Joomli: Witryny i Zaplecza (do Zaplecza należy się zalogować, używając loginu: admin i hasła podanego podczas instalacji Joomli).
Przygotować również należy pięć paczek z szablonami dla Joomli. Można je pobrać z tego miejsca:
- daydreamer-lt.zip (483KB)
- ja_purity.zip (396KB)
- siteground-j15-70.zip (273KB)
- themza_j15_14.zip (453KB)
- thermoplastic.zip (75KB)
Lub też wiele innych szablonów ze strony: http://www.templatki.com
Z paska menu należy wybrać: Rozszerzenia, zakładkę: Instalator i kliknąć:
Następnie w oknie instalatora Joomli klikamy przycisk: Przeglądaj... i z określonej lokalizacji wczytujemy plik z szablonem: daydreamer-lt.zip. Następnie klikamy przycisk: Wczytaj plik & Zainstaluj:
Pierwszy szablon został zainstalowany:
Czynności w Krokach 2 i 3 powtarzamy jeszcze cztery razy i po kolei instalujemy pozostałe szablony. W efekcie wszystkie pięć szablonów należy wczytać i zainstalować:
- daydreamer-lt.zip
- ja_purity.zip
- siteground-j15-70.zip
- themza_j15_14.zip
- thermoplastic.zip
Następnie z paska menu wybieramy: Rozszerzenia, zakładkę: Szablony i klikamy:
W panelu zarządzania szablonami jest lista wszystkich zainstalowanych szablonów. Wybieramy pierwszy szablon: beez i zaznaczamy pole przy tym słowie, następnie klikamy przycisk: Domyślnie:
Po stronie Witryny zaszła zmiana - został wczytany nowy szablon i strona wygląda inaczej:
Czynności z Kroku 5 należy powtórzyć jeszcze pięć razy, tak aby wszystkie szablony nadawały po kolei wygląd Witrynie:
Szablon: daydream:
Szablon: JA_Purity:
Szablon: siteground-j15-70:
Szablon: themza_j15_14:
Szablon: thermoplastic:
Na koniec pracy z szablonami należy ponownie ustawić jako domyślny szablon: rhuk_milkyway. Następnie należy kliknąć łącze do tego szablonu:
Otworzy się panel edycji szablonu. Można tu dokonać zmiany koloru dominującego, w tym celu wystarczy wybrać w części: Parametry: Wariant kolorystyczny: Czerwony i Wariant tła: Czerwony i zapisać zmiany:
Takie zmiany zaszły po stronie Witryny:
Następnie należy wrócić do niebieskiego jako koloru dominującego w szablonie rhuk_milkyway.
Kolejnym zadaniem w tym ćwiczeniu będzie zbudowanie galerii zdjęć.
W tym celu wykorzystany zostanie gotowy komponent: phocagallery. Pobrać go można z tego miejsca: com_phocagallery_v2.1.0_RC.zip (578kB).
Z paska menu w Zapleczu wybieramy: Rozszerzenia, zakładkę: Instalator i klikamy:
Następnie w oknie instalatora Joomli klikamy przycisk: Przeglądaj... i z określonej lokalizacji wczytujemy plik z komponentem: com_phocagallery_v2.1.0_RC.zip. Następnie klikamy przycisk: Wczytaj plik & Zainstaluj:
Komponent został zainstalowany. Teraz należy uruchomić wewnętrzny instalator Phoca Gallery - w tym celu klikamy przycisk: Install:
Dodatek został zainstalowany:
Kolejny krok to utworzenie galerii zdjęć. Z paska menu wybieramy: Komponenty, zakładkę: Phoca Gallery i Categories i klikamy:
Otworzył się panel zarządzania kategoriami Phoca Gallery. Klikamy przycisk: Utwórz:
W edytorze kategorii Phoca Gallery nadajemy tytuł galerii zdjęć: Galeria zdjęć i zapisujemy:
Nowa galeria została zapisana:
W tym kroku dodamy zdjęcia do galerii, w tym celu należy uprzednio przygotować kilka zdjęć i umieścić je we właściwym katalogu. W przypadku lokalnego serwera EasyPHP ścieżka do folderu zdjęć jest następująca: C:\Program Files\EasyPHP 3.0\www\joomla\images\phocagallery - w folderze phocagallery umieszczamy te zdjęcia
Z paska menu wybieramy: Komponenty, zakładkę: Phoca Gallery i Images i klikamy:
Zdjęcia można dodawać pojedynczo lub większą ilość naraz. W tym kroku dodamy całą grupę zdjęć. Wybieramy przycisk: Multiple Add:
Zdjęcia zostały dodane. Tutaj można jeszcze podjąć decyzję o ewentualnym wykluczeniu któregoś zdjęcia. Jeżeli decyzja została podjęta i wybór dokonany - klikamy przycisk: Zapisz:
Phoca Gallery w tym momencie generuje miniatury obrazów:
Wszystkie miniatury zostały wykonane:
Teraz należy utworzyć nową pozycję menu dla Witryny. Z paska menu w Zapleczu wybieramy: Menu, zakładkę: Main Menu* i klikamy:
W panelu zarządzania pozycjami menu klikamy przycisk: Utwórz:
Teraz otwiera się panel wyboru pozycji menu. Klikamy łącze: Phoca Gallery:
Po rozwinięciu się listy klikamy łącze: Phoca Gallery Category Layout:
W edytorze pozycji menu wpisujemy tytuł: Galeria obrazów, Nadrzędna pozycja: Góra, Opublikowane: Tak. W części: Parametry: podstawowe wybieramy kategorię: Galeria zdjęć i zapisujemy:
Kolejna pozycja menu została zapisana:
Po stronie Witryny również pojawiła się nowa pozycja menu: Galeria obrazów:
Po kliknięciu łącza do Galerii obrazów otwiera się podstrona z miniaturami:
Po kliknięciu miniatury zdjęcie się powiększa:
Ostatni komponent dodany w tym ćwiczeniu to księga gości. Pobrać można ją z tego miejsca: com_phocaguestbook_v1.3.1.zip (370KB).
Z paska menu w Zapleczu wybieramy: Rozszerzenia, zakładkę: Instalator i klikamy:
Następnie w oknie instalatora Joomli klikamy przycisk: Przeglądaj... i z określonej lokalizacji wczytujemy plik z komponentem: com_phocaguestbook_v1.3.1.zip. Następnie klikamy przycisk: Wczytaj plik & Zainstaluj:
Komponent został zainstalowany. Teraz należy uruchomić wewnętrzny instalator Phoca Guestbook - w tym celu klikamy przycisk: Install:
Dodatek został zainstalowany. Klikamy przycisk: Guestbooks:
W panelu zarządzania Phoca Guestbook klikamy przycisk: Utwórz:
W edytorze Phoca Guestbook wpisujemy tytuł księgi gości: Księga gości, zaznaczamy Tak przy Opublikowane i zapisujemy:
Księga gości została zapisana. teraz należy dodać nową pozycję menu po stronie Witryny. Z paska menu w Zapleczu wybieramy: Menu, zakładkę: Main Menu* i klikamy:
W panelu zarządzania pozycjami menu klikamy przycisk: Utwórz:
Teraz otwiera się panel wyboru pozycji menu. Klikamy łącze: Phoca Guestbook:
Po rozwinięciu się listy klikamy łącze: Phoca Guestbook:
W edytorze pozycji menu wpisujemy tytuł: Księga gości, Nadrzędna pozycja: Góra, Opublikowane: Tak. W części: Parametry: podstawowe wybieramy księgę: Księga gości i zapisujemy:
Kolejna pozycja menu została zapisana:
Po stronie Witryny, po kliknięciu łącza: Księga gości otwiera się podstrona z księgą gości gotową do edycji:
Na tym kończy się to kolejne i ostatnie ćwiczenie poświęcone Joomli.
Istnieją trzy możliwości zaliczenia tego ćwiczenia:
- pierwsza - wykonanie wszystkich zrzutów ekranowych zgodnie z poleceniami i tak samo jak w krokach ćwiczenia - podstawą zaliczenia będzie folder z tymi zrzutami, dokumentujący cała pracę
- druga - wykonanie wszystkich kroków zgodnie z poleceniami na komputerze nauczycielskim w pracowni komputerowej
- trzecia - własny portal zbudowany na Joomli istniejący w sieci WWW