instrukcja_szablon_3 - DM

SZABLON TWOJEJ STRONY INTERNETOWEJ
INSTRUKCJA
Prezentowany system przeznaczony jest dla osób, które chcą stworzyć i opublikować w
sieci własną stronę internetową.
Pozwala on na zarządzanie serwisem (stroną) z poziomu przeglądarki WWW. Nie
wymaga bazy danych – oparty jest na plikach tekstowych. Napisany został w języku PHP.
Wykorzystano w nim skrypty Java oraz kaskadowe arkusze stylów CSS.
Rys. 1. Fragment strony głównej
•
•
•
•
•
•
•
System ma konstrukcję modułową i wykorzystuje między innymi:
moduł NEWS I – pozwala on na zamieszczanie obszernych informacji tekstowych. Na
stronie z newsami wyświetlane są ich skróty z odsyłaczem do pełnej treści
moduł NEWS II – pozwala na zamieszczanie niezbyt obszernych tekstów ilustrowanych
kilkoma (kilkunastoma) zdjęciami.
moduł galerii internetowych – umoŜliwia zarządzanie galeriami internetowymi (tworzenie
nowych galerii, modyfikację istniejących i ich usuwanie)
moduł slidera – pozwala na zamieszczenie na stronie głównej dynamicznego pokazu
slajdów
moduł kalendarza – wyświetla na stronie bieŜący miesiąc i wskazuje bieŜącą datę
formularz kontaktowy – do przesyłania wiadomości przez uŜytkowników
panel administracyjny – dostępny po zalogowaniu
System daje moŜliwości swobodnego tworzenia struktury strony poprzez tworzenie kategorii i
elementów menu (szczególy w dalszej części).
Rys.2. Strona z informacjami utworzonymi za pomocą modułu NEWS I – zakładka Aktualności
Rys. 3. Menu serwisu. Widoczne grupy opcji NAWIGACJA i TESTY oraz elementy menu
zawarte w tych grupach. PoniŜej formularz logowania i licznik odwiedzin
2
Rys.4. Informacja ilustrowana utworzona za pomocą modułu NEWS II
Rys. 5. Strona statyczna – pojedyncza strona do której kieruje element menu
3
Rys. 6. Strona wykazu galerii – moduł GALERIE
INSTALACJA I URUCHOMIENIE
Pobraną paczkę (plik ZIP) naleŜy rozpakować na dysku Twojego komputera. Wszystkie
wyodrębnione katalogi i pliki naleŜy przesłać na serwer za pomocą klienta FTP, lub w sposób
określony przez dostawcę usługi hostingowej, do katalogu głównego Twojego konta.
JeŜeli jest to wymagane (bywa to róŜne u dostawców usług hostingowych) naleŜy
zmienić prawa dostępu do plików tekstowych (z rozszerzeniem .TXT) w katalogu głównym i
wszystkich podkatalogach. W zasadzie nie jest to konieczne.
Zalogować się do panelu administracyjnego – login: admin, hasło: admin i dokonać
stosownych zmian w konfiguracji w sposób przedstawiony poniŜej.
UWAGA: Przed wykonaniem jakichkolwiek czynności naleŜy zapoznać się z instrukcją.
4
Rys. 7. Strona główna panelu administracyjnego
Rys. 8. Wybór opcji menu do zmiany danych administratora
1) Zmiana danych administratora
W formularzu naleŜy wprowadzić aktualny login i hasło, a następnie nowy login i nowe
hasło. Dozwolone są wielkie i małe litery oraz cyfry. Login i hasło powinno być
kombinacją wielkich i małych liter oraz cyfr (tak, aby było trudne do odgadnięcia).
Zmieniony login i hasło naleŜy zapisać i zapamiętać.
Uwaga: Odzyskiwanie hasła moŜliwe jest tylko poprzez edycję pliku config.php za
pośrednictwem klienta FTP lub bezpośrednio na koncie hostingowym.
5
Rys. 9. Formularz do zmiany danych administratora
2) Zmiana parametrów konfiguracyjnych
Po wybraniu opcji Konfiguracja WWW -> Parametry strony naleŜy wpisać:
• pełny adres internetowy strony postaci: http://www.twojadomena.pl
• tytuł jaki będzie wyświetlany w pasku przeglądarki
• zwięzły opis strony określający jej rodzaj, dziedzinę lub charakter (niezbędny dla
wyszukiwarek)
• słowa kluczowe oddzielone przecinkami, dobrane w taki sposób, aby wyszukiwarki
mogły odnaleść stronę (jeŜeli nie wiesz jak to zrobić – poczytaj w Internecie o
pozycjonowaniu stron www)
• tytuł w nagłówku strony (aktualnie jest Tu wstaw tytuł serwisu). Pole to moŜe
pozostać puste np. wtedy gdy tytuł jest zawarty w grafice strony.
• podtytuł w nagłówku strony – analogicznie jak wyŜej
• kaskadowy arkusz stylów – naleŜy wpisać nazwę własnego pliku CSS. JeŜeli
korzystamy z istniejących tego pola nie naleŜy zmieniać
• graficzne logo (aktualnie jest to plik tu_logo.png). Pole to moŜe zostać puste lub
naleŜy wpisać nazwę obrazka z rozszerzeniem. Obrazek powinien mieć wymiary
100x100 pikseli i znajdować się na serwerze. Jak przesłać obrazek na serwer – w
dalszej części instrukcji .
• liczba newsów na stronę – określamy ile newsów będzie wyświetlane na jednej
stronie (newsy są stronicowane).
Formularz do wprowadzania parametrów konfiguracyjnych strony zawiera stosowne
objaśnienia.
6
MODUŁY
Po wybraniu opcji Konfiguracja WWW -> Moduły
moŜliwe jest ustalenie widoczności modułów poprzez
zaznaczenie /odznaczenie/ odpowiedniego pola wyboru.
W przypadku modułu galerii nie jest moŜliwe jego
ukrycie w tej opcji. Aby link do galerii nie był widoczny
naleŜy go ukryć w opcji Menu -> Konfiguracja menu.
Formularz do manipulowania modułami przedstawiono na
rys. 11.
Rys.10. Wybór opcji Moduły
Rys. 11. Formularz do włączania/wyłączania modułów – zawiera opisy modułów
Uwaga: Formularz logowania powinien być zawsze widoczny, bo jego ukrycie uniemoŜliwi
zalogowanie się do panelu administracyjnego.
SLIDER
Jest to moduł wyświetlający pokaz slajdów złoŜony z kilku (kilkunastu) obrazów o tych
samych wymiarach (szerokość x wysokość) w pikselach. JeŜeli ma ustawioną widoczność
wyświetlany jest w górnej części strony głównej. Widoczność oraz wymiary określa się w opcji
Moduły. Maksymalna szerokość slidera wynosi 600 pikseli.
Aby utworzyć własny slider naleŜy przygotować na lokalnym komputerze serię obrazów
(JPG) o tych samych wymiarach, usunąć stare obrazy i załadować te przygotowane.
Formularz do edycji slidera zawiera stosowne objaśnienia
7
Rys. 12. Formularz do tworzenia slidera
SKÓRKI
Czyli motywy graficzne strony. Opracowując system koncentrowałem się główne na jego
funkcjonalności, a nie na oprawie graficznej.
W opcji tej moŜliwe jest wybranie odpowiadającego motywu graficznego. Aby utworzyć
własny motyw graficzny naleŜy podmienić pliki graficzne z zachowaniem ich nazw i wymiarów.
Pliki graficzne strony (oraz ich wymiary) moŜna podejrzeć w opcji Kasowanie ->
Kasowanie obrazów wybierając katalog Grafika strony. Do tworzenia grafiki strony niezbędny
jest jakiś program graficzny. Przy zmianie oprawy graficznej moŜe się okazać niezbędna edycja
pliku CSS (kaskadowego arkusza stylów).
Rys. 13. Strona wyboru motywu graficznego
8
KATEGORIE I ELEMENTY MENU – zarządzanie strukturą serwisu
1) Konfiguracja menu
Rys. 14. Formularz podglądu i ustawień kategorii i elementów menu
Tworzenie menu i zarazem struktury serwisu naleŜy rozpocząć od usunięcia zbędnych
kategorii menu. Zaznaczenie kategorii do usunięcia spowoduje skasowanie kategorii,
wszystkich elementów menu naleŜących do kategorii oraz wszystkich katalogów i plików
powiązanych z usuwaną kategorią (opcja Menu->Konfiguracja menu).
MoŜliwe jest takŜe usuwanie poszczególnych elementów menu. Czynność ta jest
nieodwracalna, dlatego kasowanie naleŜy wykonywać rozwaŜnie.
Poszczególne elementy menu, jak równieŜ kategorie mogą zostać ukryte – trzeba
odznaczyć pola wyboru. Ukryte elementy i kategorie nie będą widoczne na stronie.
Kategorii NAWIGACJA oraz elementu START nie moŜna usunąć. Z uwagi na specyfikę
zaleca się ukrywanie elementów menu: KONTAKT, GALERIA, bo ich skasowanie uniemoŜliwi
korzystanie z formularza kontaktowego i galerii internetowych.
2) Kategorie menu
Po usunięciu zbędnych kategorii (zostały utworzone do celów poglądowych) moŜna
tworzyć własne odpowiednio do potrzeb i charakteru serwisu. Po wybraniu opcji Kategorie
menu wyświetlany jest formularz zawierający wykaz istniejących kategorii i pole do
wprowadzania nazwy tworzonej nowej kategorii (patrz rysunek). Po wprowadzeniu nazwy i
naciśnięciu dodaj zostanie utworzona nowa kategoria. Domyślnie nie jest ona widoczna. Jej
widoczność naleŜy ustalić w opcji Konfiguracja menu.
9
Rys. 15. Formularz podglądu istniejących i tworzenia nowej kategorii
3) Elementy menu
Tworzenie nowego elementu menu rozpoczyna się od wybrania kategorii (grupy opcji).
Następnie wprowadza się nazwę elementu jaka będzie widoczna w menu na stronie oraz
nazwę strony wewnętrznej (bez spacji) lub link do strony zewnętrznej. Dla przykładu: nazwa
strony to onet.pl, a link to http://www.onet.pl
W przypadku tworzenia elementu kierującego do strony wewnętrznej zostanie ona
utworzona w katalogu głównym, wygenerowany link do niej postaci index.php?id=strona.
Zawartość strony moŜna edytować w opcji Edycja ->Inne działy (o czym w dalszej części)
Utworzone elementy menu domyślnie nie są widoczne (zmiana widoczności w opcji
Konfiguracja menu).
Rys. 16. Formularz do tworzenia nowego elementu menu
4) Moduł newsów I
Opcja ta pozwala na utworzenie elementu menu oraz struktury plików i katalog do
prezentowania informacji w oparciu o moduł news I. NaleŜy wybrać kategorię menu, a
następnie podać nazwę elementu menu, nazwę strony(bez spacji) i nazwę katalogu do
przechowywania newsów (nazwa katalogu musi być inna niŜ nazwa strony). Opcję tę
nazwałem klonowaniem modułu news I. Moduł moŜna klonować wielokrotnie w zaleŜności od
potrzeb serwisu. Utworzony nowy element menu domyślnie jest niewidoczny.
10
5) Moduł newsów II
Opcja ta działa analogicznie do poprzedniej, z tym, Ŝe klonowany jest moduł news II
GRUPA OPCJI EDYCJA
1) Newsy I – nowy
W opcji tej tworzy się nowego newsa (w oparciu o moduł news I). JeŜeli wpis ma być
ilustrowany naleŜy rozpocząć od załadowania zdjęcia z lokalnego komputera. Następnie trzeba
wybrać odpowiedni element menu (katalog), wprowadzić tytuł, skrót informacji oraz pełną
informację.
Pola tytuł i skrót informacji pozwalają na wprowadzanie tekstu bez jego formatowania. Pole
pełna informacja jest prostym edytorem i pozwala na formatowanie tekstu.
Opcja pozwala na tworzenie wielu wpisów w jednej zakładce, które potem będą wyświetlane
na stronie począwszy od najnowszej. DuŜa liczba wpisów jest dzielona na strony. Liczba
wpisów na jednej stronie określona jest w konfiguracji strony.
Rys. 17. Formularz do tworzenia informacji w oparciu o moduł news I
2) Newsy I – edycja
W opcji tej wyświetlany jest formularz zawierający wykaz wszystkich newsów oraz pola
wyboru. Po dokonaniu wyboru newsa przechodzi się do edytora, gdzie wprowadzane będą
stosowne zmiany. Wymienić moŜna równieŜ ilustrację wpisu.
11
Rys. 18. Formularz z wykazem newsów i polami wyboru do edycji
3) Newsy II – nowy
W opcji tej tworzy się nowego newsa (w oparciu o moduł news II). Wpis moŜe być
ilustrowany jednym, kilkoma lub kilkunastoma zdjęciami. Tworzenie newsa rozpoczynamy od
wyboru elementu menu (katalogu) i załadowania zdjęć. Następnie naleŜy podać tytuł oraz treść
newsa.
Rys. 19. Formularz do tworzenia informacji w oparciu o moduł news II
12
4) Newsy II – edycja
Opcja ta działa analogicznie jak opcja Newsy I – edycja, z tym Ŝe wybierany jest do edycji
news utworzony za pomocą modułu news II.
W przypadku edytowania informacji utworzonych za pomocą modułu news II nie jest
moŜliwe (w tej wersji) wymienianie, dodawanie lub usuwanie ilustracji. JeŜeli zachodzi potrzeba
wprowadzenia zmian w ilustracjach wpisu to, niestety, trzeba go usunąć i zastąpić nowym z
innymi ilustracjami.
5) Inne działy
W ten sposób nazwano opcję przeznaczoną do edytowania
stron statycznych serwisu. Strony statyczne są generowane
automatycznie z chwilą tworzenia nowego elementu menu.
Aby edytować zawartość strony statycznej naleŜy ją wybrać
z rozwijanej listy i przejść do edytora naciskając przycisk
Edytuj (patrz rysunek obok).
Treść strony głównej zawarta jest w pliku index2.in,
zakładki kontakt – w pliku kontakt.in.
Rys. 20. Wybór pliku do edycji
Ponadto lista zawiera wszystkie nazwy utworzonych stron statycznych (jako przykład jest to
strona o nazwie statyczna.in).
Rys. 21. Okno edytora zawierające edytowany plik statyczna.in
13
Do treści stron statycznych mogą być dodawane obrazy (zdjęcia), które przechowywane są
w katalogu Ilustracje. Aby umieścić zdjęcie na stronie statycznej naleŜy je najpierw załadować
do katalogu Ilustracje za pomocą opcji Upload->Przesyłanie obrazów. Następnie w menu
edytora wybrać przycisk obrazek. Pojawi się okienko, w którym naleŜy podać nazwę obrazka, a
właściwie ścieŜkę do obrazka postaci: ilustracje/nazwaobrazka.jpg.
Uwaga: Wymiary obrazka nie mogą być zbyt duŜe (szerokość max 560 pikseli)
GALERIE
Wybranie tej opcji przekierowuje do panelu administracyjnego modułu galerii, gdzie
moŜliwe jest:
• tworzenie nowej galerii – utworzenie nowej galerii polega na załadowaniu zdjęć,
podaniu tytułu i opisu galerii. Tytuł i opis są opcjonalne.
• edycję istniejącej galerii – moŜliwe jest dodanie zdjęć do galerii, zmianę tytułu i opisu
• kasowanie galerii – moŜna usuwać pojedyncze zdjęcia z wybranej galerii lub usunąć
całą galerię
• obejrzenie statystyk galerii – wyświetlany jest wykaz galerii z podaniem liczby zdjęć i
daty dodania oraz ogólne podsumowanie – liczba galerii ogółem, liczba zdjęć ogółem
UPLOAD
1) Przesyłanie obrazów
Rys. 22. Formularz do ładowania obrazów do wybranego katalogu
Opcja ta umoŜliwia przesyłanie plików graficznych do katalogu ilustracje lub do katalogu
zawierającego elementy graficzne strony. MoŜliwe jest podanie własnej nazwy obrazka,
określenie wymiarów do jakich ma zostać przeskalowany, lub zaznaczenie pola wyboru jeŜeli
obrazek ma być załadowany w oryginalnych wymiarach.
14
Odpowiednie określenie parametrów ładowanego obrazka umoŜliwia przygotowanie
ilustracji dla stron statycznych (wymiary, nazwa) oraz podmianę plików graficznych strony przy
zachowaniu ich nazw i wymiarów.
2) Przesyłanie plików
Opcja ta umoŜliwia przesyłanie plików dowolnego typu do wybranego katalogu. Katalog, do
którego ma być przesłany plik, wybiera się z rozwijanej listy.
GRUPA OPCJI KASOWANIE
1) Kasowanie newsów I
Rys. 23. Formularz wyboru newsów do skasowania w wybranej opcji menu (katalogu)
W opcji tej moŜliwe jest usuwanie wybranych wpisów utworzonych za pomocą modułu
news I. Po wybraniu katalogu (nazwy elementu menu) wyświetlany jest wykaz newsów z
polami wyboru ich skasowania. Zaznaczone wpisy zostaną usunięte.
2) Kasowanie newsów II
Opcja działa analogicznie do poprzedniej, z tym Ŝe dotyczy wpisów utworzonych za
pomocą modułu news II.
15
3) Kasowanie obrazów
Rys. 24. Formularz do usuwania obrazów (plików graficznych) z wybranego katalogu
Opcja umoŜliwia usuwanie plików graficznych z wybranego katalogu. Po wybraniu
katalogu wyświetlany jest formularz zawierający obrazy znajdujące się w katalogu. Podawana
jest ich nazwa oraz wymiary w pikselach. Są tam teŜ pola wyboru obrazów przeznaczonych do
usunięcia.
Uwaga: Nie naleŜy bez uzasadnionej potrzeby kasować obrazów w katalogu Grafika
strony. Zdecydowanie popsuje to wygląd strony.
UWAGI KOŃCOWE
•
•
•
•
•
System był optymalizowany dla przeglądarki Mozilla Firefox (1024x768) i w innych
przeglądarkach moŜe nie działać poprawnie.
System jest darmowy, moŜe być dowolnie modyfikowany i rozpowszechniany
Proszę o nie usuwanie linku do strony autora umieszczonego w stopce.
Autor nie ponosi odpowiedzialności za ewentualne błędy w działaniu systemu i powstałe
w wyniku tego szkody
Wszelkie pytania dotyczące systemu moŜna kierować na adres [email protected] lub
poprzez formularz na stronie autora www.dm.o12.pl/kontakt
16