SZABLON TWOJEJ STRONY INTERNETOWEJ INSTRUKCJA

Transkrypt

1 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).

2 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

3 Rys.4. Informacja ilustrowana utworzona za pomocą modułu NEWS II Rys. 5. Strona statyczna pojedyncza strona do której kieruje element menu 3

4 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

5 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

6 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: 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

7 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

8 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

9 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

10 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 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

11 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

12 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

13 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

14 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

15 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

16 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 daniel_m@vp.pl lub poprzez formularz na stronie autora 16