Ala ma kota, kot ma Alę.

INSTRUKCJA OBSŁUGI STRONY INTERNETOWEJ
WWW.MALA-ROSJA.PL
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
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: http://profil.mala-rosja.pl/ 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.
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
IV. Moduły strony
V. Zmiana wyglądu strony
VI. Galeria zdjęć
VII. Forum
VIII. Ankiety
IX. Alerty
X. Reklama na stronie
XI. Partnerzy
XII. Newsletter
XIII. Statystyki
XIV. Kontakt
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.
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.
ii.
iii.
iv.
v.
none – tekst bez podkreśleń
underline – tekst podkreślony
overline – tekst nadkreślony (kreska nad tekstem)
line-through - tekst przekreślony
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.
ii.
iii.
iv.
left – tekst do lewej
right – tekst do prawej
center – centrowanie tekstu
justify – justowanie tekstu (wyrównanie do lewej i prawej)
powyższy wpis stosując wartość center da nam efekt da nam efekt:
Ala ma kota, kot ma Alę.
Dalszy tekst!
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>
•
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 #000000 solid; width:500px;”>
<tr>
<td style=”border-right:1px #000000 solid; border-bottom:1px #000000 solid;”>pierwsza
kolumna</td>
<td style=”border-right:1px #000000 solid; border-bottom:1px #000000 solid;”>druga
kolumna</td>
<td style=”border-right:1px #000000 solid; border-bottom:1px #000000 solid;”>trzecia
kolumna</td>
<td rowspan=”2”>czwarta kolumna w scalona z pierwszym i drugim wierszem</td>
</tr>
<tr>
<td style=”border-right:1px #000000 solid; border-bottom:1px #000000 solid;”
colspan=”2”>pierwsza i druga kolumna scalona</td>
<td style=”border-right:1px #000000 solid; border-bottom:1px #000000 solid;”>trzecia
kolumna</td>
</tr>
<tr>
<td style=”border-right:1px #000000 solid;”>pierwsza kolumna</td>
<td style=”border-right:1px #000000 solid;”>druga kolumna</td>
<td style=”border-right:1px #000000 solid;”>trzecia kolumna</td>
<td>czwarta kolumna</td>
</tr>
</table>
Efekt działania:
pierwsza kolumna
druga kolumna
trzecia kolumna
pierwsza i druga kolumna scalona
trzecia kolumna
pierwsza kolumna
trzecia kolumna
druga kolumna
czwarta kolumna w
scalona z pierwszym i
drugim wierszem
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
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 /
email itp. Aby stworzyć odnośnik musimy się posłużyć znacznikiem <a></a> np.:
Ala ma kota, <a href=”http://www.google.pl/” title=”pod słowem kot kryje się link”>kot</a> ma Alę.
Napisz <a href=”mailto:[email protected]” 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=”http://www.strona.pl/linkDoObrazka.jpg” 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>
<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
tak jak byśmy chcieli i dodatkowo pojawiły się dodatkowe znaczni w postaci np.:
<p>&lt;!-- @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } &gt;</p>
Wówczas podczas edycji strony w trybie HTML trzeba się ich pozbyć!
3. Linki pomocnicze
• http://szablony.blogowicz.info/koloryrgb.php
• http://www.kurshtml.boo.pl/html/zielony.html
• http://algorytmy.pl/doc/xhtml/
• http://www.pagetutor.com/table_tutor/index.html
XVI. Od autorów
- przykładowy wykaz kolorów
- przykładowy kurs języka HTML
- inny rodzaj kursu
- obsługa tabelek