INSTRUKCJA OBSŁUGI STRONY INTERNETOWEJ

Transkrypt

1 INSTRUKCJA OBSŁUGI STRONY INTERNETOWEJ 1. Logowanie się do panelu administracyjnego 2. System newsów 3. Dodawanie i edycja podstron 4. Moduły strony 5. Zmiana wyglądu strony 6. Galeria zdjęć 7. Forum 8. Ankiety 9. Alerty 10. Reklama na stronie 11. Partnerzy 12. Newsletter 13. Statystyki 14. Kontakt 15. Przyśpieszony kurs pisania kodu strony 16. Od autorów

2 I. Logowanie się do panelu administracyjnego 1. Logowanie się do panelu za pomocą modułu panel logowania Jeżeli na stronie znajdować się będzie moduł panelu logowania, to aby dostać się do konsoli administracyjnej należy: wpisać login i hasło, które pozwolą na zalogowanie administratora, opcjonalnie wybrać opcje zaloguj mnie automatycznie jeżeli chcemy być zalogowani od razu przy następnej wizycie na stronie, nacisnąć przycisk zaloguj się. Jeśli wszystko wykonaliśmy poprawnie, to po naciśnięciu przycisku logowania powinno nam przeładować stronę i tym samym powinniśmy ujrzeć zamiast panelu logowania, panel użytkownika z dostępnymi poniższymi opcjami: Panel administracyjny Sprawdź forum Panel użytkownika Nowe wiadomości Zobacz swoje posty Wybieramy opcję pierwszą czyli Panel Administracyjny. Po naciśnięciu tej opcji automatycznie system przenosi nas do panelu administracyjnego. 2. Logowanie się do panelu za pomocą panelu znajdującego się na forum Aby zalogować się do panelu administracyjnego poprzez forum należy sprawdzić czy po wejściu na forum w dolnej części strony istnieje panel logowania złożony z dwóch pól tekstowych (login i hasło), jeżeli tak to należy w tych polach wpisać odpowiednie dane pozwalające na poprawne zalogowanie się administratora. Jeżeli zaś takiego pola logowania na stronie głównej nie ma to alternatywnym sposobem zalogowania się po przez forum jest kliknięcie na link zaloguj, który znajduje się pod bannerem z prawej strony. Po tym zdarzeniu system powinien nas przenieść automatycznie do panelu logowania forum. 3. Alternatywne logowanie się do panelu administracyjnego Jeżeli chcemy się zalogować w inny sposób niż opisany powyżej należy wpisać w pole adresu przeglądarki: następnie wpisujemy potrzebne dane (login i hasło). Jeśli wszystko się zgadza to system powinien nas przenieść automatycznie do Panelu administracyjnego. 4. Kończenie pracy w panelu administracyjnym (wylogowanie) Aby poprawnie się wylogować należy przejść do Panelu administracyjnego, a następnie kliknąć link o nazwie wyloguj, który położony jest w górnym prawym rogu strony. Alternatywną metodą wylogowania jest przejście na forum i naciśnięcie linku Wyloguj [ admin ], który położony jest tuż pod bannerem z prawej strony.

3 II. System newsów 1. Przeglądanie i kasowanie aktualności Aby móc zobaczyć wszystkie dostępne aktualności, po poprawnym zalogowaniu musimy kliknąć w przycisk Aktualności. Poniżej menu powinna ukazać się lista aktualności (10 na stronie). Aby zobaczyć szczegóły danego newsa należy najechać myszką na dany wiersz z news'em, który się podświetli a następnie go kliknąć. System powinien automatycznie przekierować na stronę ze szczegółami. Aby poprawnie skasować wybrane aktualności należy wykonać jedną z poniższych czynności: podczas przeglądania newsów zaznaczyć kwadracik po lewej stronie wpisu, który chcemy skasować (możemy wybrać kilka wpisów naraz). W kolumnie akcja wybrać opcje usuń dla danego newsa (kasowanie pojedynczych news'ów) Wejść w szczegóły news'a i tam nacisnąć link usuń wpis 2. Dodawanie news'a Aby dodać poprawnie news'a należy wpierw wejść do działu aktualności a następnie w menu bocznym nacisnąć Dodaj newsa. Następnie uzupełniamy wymagane pola oraz w razie potrzeby opcjonalne: Tytuł (polska wersja) nagłówek news'a w języku polskim Tytuł (rosyjska wersja) nagłówek news'a w języku rosyjskim Treść newsa (polska wersja) cała treść news'a w języku polskim Treść newsa (rosyjska wersja) cała treść news'a w języku rosyjskim Plik graficzny opcjonalne zdjęcie do news'a o rozmiarze nie przekraczającym 1 MB Po uzupełnieniu wymaganych pól klikamy dodaj i jeżeli wszystko zrobiliśmy dobrze, news powinien zostać dodany i być widoczny na spisie wszystkich newsów oraz na stronie głównej. 3. Edycja newsa Edycja newsa odbywa się na takiej samej zasadzie jak jego dodawanie z tą różnicą, że zamiast kliknięcia w link dodaj newsa to klikamy w link edytuj, który znajduje się w kolumnie Akcja przy danym wpisie. Następnie system przekierowuje nas na stronę umożliwiającą edycję danego wpisu. Tak jak poprzednio uzupełniamy wymagane pola oraz w razie potrzeby opcjonalne: Tytuł (polska wersja) nagłówek news'a w języku polskim Tytuł (rosyjska wersja) nagłówek news'a w języku rosyjskim Treść newsa (polska wersja) cała treść news'a w języku polskim Treść newsa (rosyjska wersja) cała treść news'a w języku rosyjskim Plik graficzny opcjonalne zdjęcie do news'a o rozmiarze nie przekraczającym 1 MB Po uzupełnieniu wymaganych pól klikamy edytuj i jeżeli wszystko zrobiliśmy dobrze, news powinien zostać zmieniony i być widoczny na spisie wszystkich newsów oraz na stronie głównej w zmienionej formie. III. Dodawanie i edycja podstron

4 IV. Moduły strony

5 V. Zmiana wyglądu strony

6 VI. Galeria zdjęć

7 VII. Forum

8 VIII. Ankiety

9 IX. Alerty

10 X. Reklama na stronie

11 XI. Partnerzy

12 XII. Newsletter

13 XIII. Statystyki

14 XIV. Kontakt

15

16 XV. Przyśpieszony kurs pisania stron 1. Przejście w tryb pisania kodu strony Aby przejść z trybu wizualnego dodawania treści do trybu kodowania należy nacisnąć na panelu mini edytora ikonkę z napisem HTML (druga od prawej w środkowym rzędzie). Wówczas otworzy nam się okno z fragmentem kodu strony, który wkleiliśmy / napisaliśmy. 2. Zapoznanie się z podstawowymi komendami języka HTML Hierarchia znaczników Poniżej prezentuje znaczniki które będą najczęściej używane w edycji kodu HTML: i. <div></div> - globalny znacznik w którym powinny się znajdować pozostałe znaczniki. Wszystko co za nim będzie w nowej linii. ii. <p></p> - znacznik paragrafu, w którym powinien znajdować się tekst oraz opcjonalnie znaczniki span i strong. UWAGA! Używanie tego znacznika powoduje podwójne odstępy między kolejnym znacznikiem. iii. <span></span> - znacznik służący do edycji fragmentów tekstu. iv. <strong></strong> - znacznik pogrubiający wybrany fragment. Pogrubienie tekstu Aby poprawnie pogrubić tekst należy wstawić dany fragment w następujący znacznik <strong></strong> np. Ala ma kota, <strong>kot</strong> ma Alę. da nam efekt: Ala ma kota, kot ma Alę. Kursywa Wstawienie kursywy odbywa się w nieco inny sposób niż zaprezentowany powyżej. Aby wstawić kursywę w tekst należy przypisać do znacznika <span></span> odpowiedni styl np. Ala ma kota, <span style= font-style:{wartość}; >kot</span> ma Alę. W miejsce {wartość} należy wpisać jedną z poniższych wartości: i. normal tekst bez pochyleń ii. italic prawdziwa kursywa iii. oblique tekst pochyły powyższy wpis stosując wartość italic da nam efekt: Ala ma kota, kot ma Alę. Podkreślenie Wstawianie podkreślenia będzie wykonywane na tej samej zasadzie co kursywy tzn. będziemy przypisywać odpowiedni styl dla znacznika <span></span> np.

17 Ala ma kota, <span style= text-decoration:{wartość}; >kot</span> ma Alę. W miejsce {wartość} należy wpisać jedną z poniższych wartości: i. none tekst bez podkreśleń ii. underline tekst podkreślony iii. overline tekst nadkreślony (kreska nad tekstem) iv. line-through - tekst przekreślony v. blink tekst migający powyższy wpis stosując wartość underline da nam efekt: Ala ma kota, kot ma Alę. Łączenie styli Jeżeli chcemy nadać kilka styli dla danego znacznika np. dla tekstu znajdującego się w znaczniku p chcemy nadać pogrubienie, rozmiar 14px, kolor czerwony i podkreślenie to możemy wykonać powyższą czynność po przez złączenie styli CSS np. <p style= font-size:14px; font-weight:bold; color:#ff0000; text-decoration:underline; > Ala ma kota, kot ma Alę. </p> da nam efekt: Ala ma kota, kot ma Alę. Wyrównanie do lewej, prawej, centrowanie, justowanie Wyrównanie tekstu nadaje się poprzez nadanie znacznika globalnego <div></div> oraz własności wyrównania dla niego np. <div style= text-align:{wartość}; >Ala ma kota, kot ma Alę.</div> Dalszy tekst! W miejsce {wartość} należy wpisać jedną z poniższych wartości: i. left tekst do lewej ii. right tekst do prawej iii. center centrowanie tekstu iv. justify justowanie tekstu (wyrównanie do lewej i prawej) powyższy wpis stosując wartość center da nam efekt da nam efekt: Dalszy tekst! Ala ma kota, kot ma Alę. Uwaga: czasami się zdarza, że powyższe polecenie nie daje oczekiwanego efektu. W takim wypadku należy użyć dodatkowego znacznika <div></div> z nadaniem mu automatycznej szerokości np.: <div style= width:auto; > <div style= text-align:{wartość}; >Ala ma kota, kot ma Alę.</div> Dalszy tekst! </div>

18 Ustawienia paragrafów i nagłówków Aby poprawnie ustawić nagłówek możemy skorzystać z poniższych znaczników: i. <h1>nagłówek</h1> - nagłówek stopnia pierwszego powinien być raz użyty ii. <h2>nagłówek</h2> - -//- drugiego do określania ważnych tytułów iii. <h3>nagłówek</h3> - -//- trzeciego do określania średnio ważnych tytułów iv. <h4>nagłówek</h4> - -//- czwartego do określania mniej ważnych tytułów v. <h5>nagłówek</h5> - -//- piątego do określania mało ważnych tytułów vi. <h6>nagłówek</h6> - -//- szóstego do określania rzeczy mało istotnych Nagłówki od h2 do h6 możemy używać wielokrotnie zaś h1 tylko raz. Ponadto do każdego nagłówka trzeba przypisać taką wartość jak wielkość czcionki (pozostałe wartości np. kolor, pogrubienie itp. są opcjonalne). Pamiętajmy również o tym, że nagłówek h1 ma być największym rozmiarem pisany, h2 mniejszym, h3 jeszcze mniejszym itd. np. <h1 style= fotn-size:16px; font-weight:bold; >Ala ma kota, kot ma Alę.</h1> da nam efekt: Ala ma kota, kot ma Alę. Zaś taki zapis: <h2 style= fotn-size:14px >Ala ma kota, kot ma Alę.</h2> da nam efekt: Ala ma kota, kot ma Alę. Nadawanie kolorów Nadawanie kolorów jest rzeczą bardzo prostą i analogiczną do poprzednich instrukcji tzn. aby nadać kolor wybranemu kawałkowi strony należy w jakimś znaczniku np. <span></span>, <div></div>, <p></p> nadać styl koloru np. <div style= color:#ffcc00; > <p style= color:#ff0000; > Ala ma kota, <span style= color:#000099; >kot</span> </p> ma Alę. </div> da nam efekt: Ala ma kota, kot ma Alę. Tabele W celu zaprezentowania danych tabelarycznych na stronie możemy użyć tabelek, czyli struktur zbudowanych z wierszy i kolumn. Aby stworzyć prostą tabelkę z 3 wierszami i 4 kolumnami, z czarnym 1px obramowaniem i szerokością 500px należy wpisać taki kod: <table cellspacing= 0 cellpadding= 0 style= border:1px # solid; width:500px; > <tr> <td style= border-right:1px # solid; border-bottom:1px # solid; >pierwsza

19 kolumna</td> <td style= border-right:1px # solid; border-bottom:1px # solid; >druga kolumna</td> <td style= border-right:1px # solid; border-bottom:1px # solid; >trzecia kolumna</td> <td rowspan= 2 >czwarta kolumna w scalona z pierwszym i drugim wierszem</td> </tr> <tr> <td style= border-right:1px # solid; border-bottom:1px # solid; colspan= 2 >pierwsza i druga kolumna scalona</td> <td style= border-right:1px # solid; border-bottom:1px # solid; >trzecia kolumna</td> </tr> <tr> <td style= border-right:1px # solid; >pierwsza kolumna</td> <td style= border-right:1px # solid; >druga kolumna</td> <td style= border-right:1px # solid; >trzecia kolumna</td> <td>czwarta kolumna</td> </tr> </table> Efekt działania: pierwsza kolumna druga kolumna trzecia kolumna czwarta kolumna w scalona z pierwszym i pierwsza i druga kolumna scalona trzecia kolumna drugim wierszem pierwsza kolumna druga kolumna trzecia kolumna czwarta kolumna Tabelki to dużo bardziej rozbudowany temat dlatego też odsyłam do strony internetowej z pełnym wyjaśnieniem zasady działania tabelek. Strona podana w punkcie 3. Nadawanie wymiarów Aby nadać wymiary danemu znacznikowi (w naszym wypadku będzie to: table, div lub img) np. w celu wyświetlanie tekstu do danego miejsca to należy do wybranego znacznika przypisać styl z komendą width np. <table cellspacing= 0 cellpadding= 0 style= width:200px; > <tr> <td>jakieś dane</td> </tr> <tr> <td>jakieś dane</td> </tr> </table> da nam efekt (oczywiście bez obramowania): Jakieś dane Jakieś dane Linki i obrazki

20 Linki inaczej zwane odnośnikami są to elementy aktywne osadzone na tekście lub innym znaczniku, gdzie po naciśnięciu dany element poprowadzi nas na wybrana stronę www / itp. Aby stworzyć odnośnik musimy się posłużyć znacznikiem <a></a> np.: Ala ma kota, <a href= title= pod słowem kot kryje się link >kot</a> ma Alę. Napisz <a href= mailto:mojadresmail@server.com title= Napisz do mnie >mail</a> do mnie. da nam efekt: Ala ma kota, kot ma Alę. Napisz mail do mnie. Pole title jest nie obowiązkowe i można je pominąć, jednak zalecane jest jego używanie. Aby dodać obrazek należy wpisać znacznik img wraz z nadaniem podstawowych wartości np. <img src= alt= jakiś opis /> pole alt może zostać puste. Nowa linia Aby zrobić przejście do nowej linii należy użyć polecenia: <br /> np.: Ala ma kota, <br />kot ma Alę. da nam efekt: Ala ma kota, kot ma Alę. Odstępy między wierszami Aby stworzyć odstęp między wierszami pisanego tekstu w paragrafie lub div'ie należy nadać znacznikowi odpowiedni styl np.: <div style= line-height:20px >Ala ma kota, kot ma Alę.</div> <p>jakiś tekst</p> da nam efekt: Ala ma kota, kot ma Alę. jakiś tekst Listowanie Aby stworzyć listę punktowaną (<ul></ul>) ewentualnie numerowaną (<ol></ol>). Dla każdego znacznika możemy użyć tak jak wyżej styli np. z pogrubieniem, podkreśleniem, marginesami itp. np.: <ul style= color:#ff0000; > <li>punkt 1</li> <li>punkt 2</li>

21 <li>punkt 3</li> <li>punkt 4</li> </ul> da nam efekt: punkt 1 punkt 2 punkt 3 punkt 4 Lista numerowana: <ol style= color:#000099; > <li>punkt 1</li> <li>punkt 2</li> <li>punkt 3</li> <li>punkt 4</li> </ol> da nam efekt: 1. punkt 1 2. punkt 2 3. punkt 3 4. punkt 4 Marginesy i odstępy Marginesy służą do wprowadzania odległości między jednymi znacznikami a innymi np. chcemy by tekst w znaczniku div był 20px niżej od tekstu w znaczniku p oraz odsunięty od lewej o 5px to robimy w ten sposób: <p style= font-weight:bold; >Ala ma kota,</p><div style= margin:20px 0 0 0; >kot ma Alę.</div> da nam efekt: Ala ma kota, kot ma Alę. i teraz tak, instrukcja margin jest zbudowana z czterech wartości: i. pierwsza wartość oznacza margines od góry, ii. druga wartość oznacza margines od prawej strony, iii. trzecia wartość oznacza margines od dołu, iv. czwarta wartość oznacza margines od lewej, Czasami użycie instrukcji margin nie przynosi efektu, wówczas należy margin zastapić instrukcją padding. czyszczenie niepotrzebnych wartości Często zdarza się, że podczas kopiowania tekstu z programu MS Word strona nie wygląda

22 tak jak byśmy chcieli i dodatkowo pojawiły się dodatkowe znaczni w postaci np.: { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } ></p> Wówczas podczas edycji strony w trybie HTML trzeba się ich pozbyć! 3. Linki pomocnicze - przykładowy wykaz kolorów - przykładowy kurs języka HTML - inny rodzaj kursu - obsługa tabelek XVI. Od autorów

23