Layout, czyli szablony



Podobne dokumenty
Layout, czyli szablony

Jak stworzyć stronę WWW drużyny harcerskiej. dh Paweł Wnuk

darmowe zdjęcia - allegro.pl

Pokaz slajdów na stronie internetowej

Instalacja systemu zarządzania treścią (CMS): Joomla

autor poradnika - KS Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej

Nowe notowania epromak Professional

Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji

Joomla! Instalacja. Pobierz pakiet instalacyjny. instalacji XAMPP

Zasady tworzenia podstron

Tworzenie prezentacji w MS PowerPoint

Creative Photos. program do tworzenia kompozycji fotoksiążek instrukcja instalacji i obsługi

Nowe notowania epromak Professional

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda

Personalizowanie wirtualnych pokojów

Wstęp 5 Rozdział 1. Instalacja systemu 13. Rozdział 2. Logowanie i wylogowywanie 21 Rozdział 3. Pulpit i foldery 25. Rozdział 4.

UWAGA: poniższe procedury przygotowane zostały w oparciu o program HiTi PhotoDesiree 2 w wersji

Instrukcja instalacji systemu. CardioScan 10, 11 i 12

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

DODAWANIE ARTYKUŁÓW DO STRONY INTERNETOWEJ

edycja szablonu za pomocą programu NVU

WAŻNE! colour.me Google Fonts tutaj

Poradnik korzystania z usługi FTP

Spis treści. Rozdział 2. Graficzna oprawa witryny...z Stosowanie motywu...s...s.. 19

Sigplus. Galeria w Joomla

INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ

Edytor tekstu OpenOffice Writer Podstawy

Jak zamówić zdjęcia przez FotoSender?

Zadanie 11. Przygotowanie publikacji do wydrukowania

PRZEWODNIK PO SERWISIE BRe BROKERS Rozdział 6

I. Informacje ogólne. Jednym z takich systemów jest Mambo.

BIBLIOTEKA LOKALNE CENTRUM WIEDZY PRAKTYCZNEJ PRZEWODNIK PO NARZĘDZIACH WARSZTAT NR 1: ARKUSZE KALKULACYJNE - MINI SKRYPT

Kurs obsługi systemu CMS. Prawie wszystkie treści wyświetlające się na stronie są zlokalizowane w dziale artykuły.

Zadanie 9. Projektowanie stron dokumentu

SPIS TREŚCI. Sposób pierwszy... 3 Sposób drugi Ikony banków Ikony dostawców Strona1

Płace Optivum. 1. Zainstalować serwer SQL (Microsoft SQL Server 2008 R2) oraz program Płace Optivum.

DOKUMENTY I GRAFIKI. Zarządzanie zawartością Tworzenie folderu Dodawanie dokumentu / grafiki Wersje plików... 7

Dokumentacja systemu NTP rekrut. Autor: Sławomir Miller

Instrukcja pobrania i instalacji wersji testowej Invest for Excel

Nagrywamy podcasty program Audacity

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ

5.2. Pierwsze kroki z bazami danych

Zalogowanie generuje nowe menu: okno do wysyłania plików oraz dodatkowe menu Pomoc

Instrukcja instalacji systemu. CardioScan 10, 11 i 12

Zmiana logo. Dziękujemy za wybór naszych rozwiązań. apjoo od Apláuz. Wspólnie przebrniemy przez proces konfiguracji strony www i wstawiania treści.

Tomasz Greszata - Koszalin

I. Spis treści I. Spis treści... 2 II. Kreator szablonów Tworzenie szablonu Menu... 4 a. Opis ikon Dodanie nowego elementu...

Pokażę w jaki sposób można zrobić prostą grafikę programem GIMP. 1. Uruchom aplikację GIMP klikając w ikonę na pulpicie.

Kadry Optivum, Płace Optivum

Rozdział 2. Konfiguracja środowiska pracy uŝytkownika

Instrukcja do zdjęć. Instrukcja krok po kroku umieszczania zdjęd na aukcji bez ograniczeo. MD-future.

Jak zrobić klasyczny button na stronę www? (tutorial) w programie GIMP

Komputerowa obróbka zdjęć. Komputerowa obróbka zdjęć

1. Pobieranie i instalacja FotoSendera

Projektowanie przy uz yciu motywo w częś c 1: informacje podśtawowe

Kadry Optivum, Płace Optivum. Jak przenieść dane na nowy komputer?

Problemy techniczne. Jak udostępnić dane na potrzeby wykonania usługi serwisowej lub wdrożeniowej? Zabezpieczanie plików hasłem

Wikispaces materiały szkoleniowe

TWORZENIE DANYCH DO DRUKU W PROGRAMIE MICROSOFT POWERPOINT 2013

Przewodnik po Notowaniach Statica mdm 4

Wstęp. Skąd pobrać program do obsługi FTP? Logowanie

JDK 7u25 NetBeans Zajęcia 1 strona - 1

Tomasz Grześ. Systemy zarządzania treścią, cz. II

Zadanie1: Odszukaj w serwisie internetowym Wikipedii informacje na temat protokołu http.

PORADNIK Zasady i zalecenia pracy z plikami oraz tekstem na stronach nowego portalu SGH (na platformie SharePoint)

Przewodnik... Tworzenie Landing Page

INSTRUKCJA EDYCJI PROFILU OSOBOWEGO W SERWISIE

Wstęp 5 Rozdział 1. Przeglądarki 7

Przewodnik Szybki start

Microsoft Office 365

Własna strona WWW w oparciu o CMS

INSTRUKCJA INSTALACJI SZABLONU ALLEGRO V1.01i

Pakiet AutoRun Menu. Sławomir Pogodziński. Podyplomowe Studium Programowania i Zastosowań Komputerów

Instrukcja tworzenia strony internetowej w serwisie twojobiekt.pl

Dodatki. Dodatek A Octave. Język maszyn

Podręcznik użytkownika

Przed skonfigurowaniem tego ustawienia należy skonfigurować adres IP urządzenia.

Podręcznik użytkownika programu. Ceremonia 3.1

Podstawy tworzenia prezentacji w programie Microsoft PowerPoint 2007

Uruchamianie bazy PostgreSQL

INSTALACJA SERWERA LOKALNEGO TYPU WAMP NA PRZYKŁADZIE PAKIETU KRASNAL SERV 2.7

Zadanie1: Odszukaj w serwisie internetowym Wikipedii informacje na temat protokołu ftp.

Konfiguracja oprogramowania w systemach MS Windows dla kont z ograniczonymi uprawnieniami

Spis treści. FAQ: /PL Data: 30/06/2015. Instalacja polskiej wersji LOGO! Soft Comfort. 1 Pobranie pliku 2

JAK ZAPROJEKTOWAĆ WYGLĄD STRONY INTERNETOWEJ W KREATORZE CLICK WEB?

JAK EDYTOWAĆ MULTIMEDIA W KREATORZE CLICK WEB?

WIZUALIZER 3D APLIKACJA DOBORU KOSTKI BRUKOWEJ. Instrukcja obsługi aplikacji

I. Logowanie do panelu admina

KATEGORIE OBRAZKOWE REALIZACJA

Przewodnik instalacji i rozpoczynania pracy. dla DataPage+ 2012

Kadry Optivum, Płace Optivum. Jak przenieść dane na nowy komputer?

Spis treści. Warto zapamiętać...2. Podstawy...3

MasterEdytor. Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA

Instrukcja obsługi systemu zarządzania treścią w MDK

Wirtualna tablica. Padlet: Padlet nazywany jest wirtualną tablicą, ścianą lub kartką strony internetowej.

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Synchronizator plików (SSC) - dokumentacja

Skrócona instrukcja funkcji logowania

Kopiowanie przy użyciu szyby skanera. 1 Umieść oryginalny dokument na szybie skanera stroną zadrukowaną skierowaną w dół, w lewym, górnym rogu.

Transkrypt:

Layout, czyli szablony 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. 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ę: skąd i jak pobrać szablon? jak zainstalować szablon? jak zmodyfikować szablon?

{mospagebreak title=szablony do wyboru&heading=wygląd witryny} 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!: Joomla Templates Gallery: polski serwis, ponad 500 szablonów, miniatury. Joomlaos.de: ok 600 szablonów, forma galerii, łatwe przeglądanie, miniatury. JoomlaYa.com: ok. 600 szablonow, trudne przeglądanie, miniatury. JoomlaResource.com: ok. 170 szablonów, łatwe przeglądanie, miniatury. JoomlaTurkiye.org: ok. 150 szablonów, łatwe przeglądanie, miniatury. JoomlaHut ok. 500 szablonow, łatwe przeglądanie, miniatury. Design for Mambo: kilkadziesiąt, łatwe przeglądanie, miniatury. Free Joomla Templates: niewielki, ale ciekawy zestaw, miniatury. Mambosolutions.com: ok. 30 szablonow, łatwo przeglądać, pełny podgląd. Joomlatemplates.com: kilkanaście, łatwo przeglądać, pełny podgląd. Concept Design.nl: bardzo ciekawy, choć niewielki zestaw, pełny podgląd. Polskie Centrum Joomla: kilkadziesiąt, łatwo przeglądać, miniatury. Pobranie szablonu Aby pobrać pakiet instalacyjny szablonu: Stwórz na dysku lokalnym w swoim katalogu plików Joomla folder /templates

Kliknij jeden z odnośników powyżej, by otworzyć stronę WWW z szablonami. Wybierz szablon, który chcesz pobrać. Klikni na odnośnik: Pobierz, Download lub inny, np. nazwę pakietu. 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. {mospagebreak title=instalacja szablonu} 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: W panelu administratora przejdź do menu Instalatory Szaty witryna {mosimage{/mosimage} Sprawdź, czy możliwe jest zapisywanie w katalogu /templates,

W oknie instalatora przejdź do pozycji Instaluj z pakietu Pakiet instalacyjny Kliknij przycisk Przeglądaj. Otworzy się okno umożliwiające przeszukanie plików na Twoim komputerze lokalnym. Wskaż plik pakietu instalacyjnego i naciśnij przycisk Otwórz. Powrócisz do okna instalatora. 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: Kliknij odnośnik Przejdź do wykazu szablonów Zaznacz przy szablonie, który chcesz opublikować, pole wyboru: Kliknij w górnym pasku narzędzi ikone lub odnośnik Domyślny [ Default ]. Uwaga: Do wykazu szablonów możesz przejść także bezpośrednio z menu administratora, wybierając opcję: Witryna Szablony Szaty witryna. {mospagebreak title=modyfikacja szablonu} 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 GIMPa. Od zdjęcia do winietki Aby przygotować własny obrazek do nagłówka szablonu, wykonaj następujące czynności: Uruchom swój program graficzny. Tutaj skorzystamy z PhotoShopa. W katalogu /images swojego szablonu odszukaj obrazek nagłówka i wczytaj go do edytora. Odczytaj wymiary obrazka: szerokość i wysokość. Zeskanuj wybrane za podstawę nowego obrazka zdjęcie lub wczytaj je z aparatu cyfrowego Ustaw parametry funkcji Przytnij [ Crop ] w Twoim programie graficznym: szerokość [ Width ] i wysokość [ Height ] jak oryginalnego nagłówka, rozdzielczość [ Resolution ] 72 pikseli/cal. Narzędziem Przytnij [ Crop ] 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. 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. 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. Umieść napis w jednym z typowych miejsc, np. w lewym górnym lub w prawym dolnym rogu. Wybierz w menu Plik [ File ] opcję Save for Web, a w oknie dialogowym ustaw: format, zwykle:.jpg, jakość [ Quality ] 30 lub 60 (High). Nadaj zapisywanej winiecie taką nazwę, jaką ma oryginalny obrazek nagłówka, np. header_short i kliknij przycisk OK. Prześlij plik z winietą do katalogu /templates/twoj_szablon/images/ na serwerze. Wywołaj w przeglądarce swoją witrynę zobaczysz efekt.

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!. {mospagebreak title=własny szablon} 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 Podstawy szablonów szata graficzna Szatki templatki Poprawny szablon dla Joomla Zaawansowane projektowanie szablonów CSS w Joomla CSS w Joomla Szykowne narożniki, czyli Nifty Corners pattemplate Prostota szablonu opartego na PatTemplate Opracowania w języku angielskim A guide to creating Mambo 4.5.x or Joomla 1.0.x templates Joomla / Mambo Layout Template Creation Mambo CSS Template Tutorial Template explained CSS Overview Understanding Joomla / Mambo CSS in 5 minutes Style master css tutorial