INSTRUKCJA UŻYTKOWANIA SZABLONÓW
z serwisu:
Spis treści
1. Jakie oprogramowanie? 2
2. Jaką wiedzę muszę posiadać, aby poprawnie obsługiwać szablony? 2
3. Przydatne odnośniki 2
4. Pobrałem szablon, co dalej? 2
5. Edycja konkretnego szablonu 3
6. Wstawianie szablonu na aukcje Allegro.pl 6
Na początek przyda się prosty edytor plików HTML. Osobiście korzystam
i polecam program Zajączek w wersji 4.1 (do ściągnięcia tutaj). Najważniejsze atuty tej aplikacji to prostota obsługi, intuicyjne menu, wiele przydatnych, ułatwiających pisanie stron opcji. Oczywiście nie narzucam nikomu używania własnego edytora :-)
Niektórym użytkownikom może się przydać również oprogramowanie graficzne, np. Adobe Photoshop, GIMP, czy PaintShopPro. Niestety tego wątku nie będę rozwijał, gdyż ta dziedzina jest naprawdę obszerna. Polecam korzystanie z wielu tutoriali dostępnych masowo w Internecie.
Szablony, które umieszczam w serwisie oparte są na języku HTML
i kaskadowych arkuszach styli – CSS.
Na dobry początek, aby móc w łatwy sposób edytować i pisać samemu pliki .html polecam lekturę najpopularniejszego kursu o języku hypertekstowym – kliknij tutaj. Pod tym linkiem znajduje się spis poleceń (znaczników) języka HTML. Proponuję ponadto podstawowy kurs na temat styli CSS (odsyłacz style z linku powyżej).
Uwierzcie, że przyswojenie tych informacji (których nie jest na pewno mało) przyda się Wam, nie tylko do edycji moich szablonów, ale być może do stworzenia w przyszłości własnych stron WWW.
1. http://webmaster.helion.pl/kurshtml/ - kurs HTML
2. http://webmaster.helion.pl/kurshtml/style/style.htm - kurs CSS
3. http://www.kurshtml.boo.pl/ - kurs HTML i CSS
4. http://kurs.browsehappy.pl/Kurs/Spis - kurs HTML i CSS
Po ściągnięciu szablonu, należy go wypakować (np. Winrar’em) do wskazanego folderu. Standardowo każdy szablon aukcji posiada:
1. plik <nazwa_szablonu>.html
2. folder images z grafiką szablonu
3. skrót do strony www.szablony-allegro.com.url
Najważniejszym plikiem jest plik .html. Edytując ten plik, możemy wpisywać dane według naszych potrzeb: opisy aukcji, bloki informacyjne (kontakt, wysyłka, płatności itp.) i inne. Zawiera on również wbudowany arkusz styli, który uatrakcyjnia wizualnie nasz szablon.
Przejdźmy do edycji na przykładzie poniższego szablonu numer 2:
Po rozpakowaniu możemy zauważyć następujące elementy (rozdział 4):
powyżej zawartość folderu images
Następnie musimy zmodyfikować plik 2.html. W tym celu uruchamiamy edytor (Zajączek lub inny). Po otwarciu, ujrzymy kod HTML naszego szablonu.
Ważne!
Linijka z poniższym kodem (w tym wypadku linijka nr 7):
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
(linijka ta określa poprawne kodowanie dla polskich znaków diaktrycznych np. „ą”, ”ł” itp.)
Będzie nam potrzebna (tylko i wyłącznie) podczas edycji naszego szablonu na naszym twardym dysku. Serwis Allegro.pl nie pozwala na dodawanie tego fragmentu kodu do opisu przedmiotu.
Dlatego na koniec edycji szablonu, należy usunąć tą linijkę z kodu.
Linijki 1-5:
Zawierają komentarz z informacją skąd szablon został pobrany – proszę nie usuwać tego fragmentu kodu (patrz: Regulamin na stronie).
Linijki 8-54:
Między znacznikami <style>, a </style> umieszczony został kaskadowy arkusz styli CSS. Opisane zostały tutaj kolory fontów w formacie szesnastkowym, kolory tła, stopień pisma, marginesy itp. Można tutaj dowolnie modyfikować dane elementy szablonu, oczywiście do tego potrzebna jest nam wiedza z zakresu CSS.
Poniżej przykład stylu z opisem:
body {
font-family: Tahoma; krój fontu
font-size: 8pt; stopień pisma
color: #000000; kolor fontu
background-color: #f8f4f0; kolor tła
margin-top: 0px; margines górny zewnętrzny
margin-bottom: 0px; margines dolny zewnętrzny
font-weight: normal; „waga“ fontu
}
table.glowna {
width:679px; szerokość głównej tabeli
td.txtlewo {
background-color:#ffffff; kolor tła
font-family:Tahoma; krój fontu
font-size:8pt; stopień pisma
color:#5b5b5b; kolor fontu
vertical-align: top; wyrównanie w pionie (do góry)
td.txtprawo {
background-color: #ffffff; kolor tła
line-height:20px; interlinia (odstęp między kolejny wierszami, dokładniej – między dolną linią I wiersza a górną linią tekstu II wiersza)
td.boki {
background-color:#d8c8ba; kolor tła
div.polewo {margin:5px;} margines zewnętrzny (góra, dół, lewo, prawo 5 pikseli)
div.poprawo {margin:5px;} margines zewnętrzny (góra, dół, lewo, prawo 5 pikseli)
A:link {text-decoration:none; color:#c40705;} kolor linku nieodwiedzonego
A:visited {text-decoration:none; color:#c40705;} kolor linku odwiedzonego
A:active {text-decoration:none; color:#c40705;} kolor linku aktywnego
A:hover {text-decoration:underline; color:#c40705;} kolor linku przy najechaniu na niego kursorem
Linijki 57-65:
W tym miejscu w naszym kodzie, musimy wpisać nasze odnośniki do naszego profilu z Allegro (według opisów poniżej):
<!-- NIE USUWAĆ! Uzupełnij tutaj swoje linki z Allegro-->
<map name="2_04">
<area href="link do naszych przedmiotów" shape="rect" coords="63,6,150,27" alt="">
<area href="link do naszych komentarzy" shape="rect" coords="172,6,260,28" alt="">
<area href="link do wysyłania maila przez Allegro" shape="rect" coords="283,7,366,27" alt="">
<area href="link do strony O mnie" shape="rect" coords="390,5,443,27" alt="">
<area href="link do Dodaj do ulubionych" shape="rect" coords="461,4,600,28" alt="">
</map>
<!-- NIE USUWAĆ! -->
np. link do komentarzy (na zielono podajemy nasz nr ID z Allegro):
http://allegro.pl/show_user.php?uid=3478547
Linijki 66-115:
Zawarta jest w nich nasza tabela, na której opiera się ten szablon. Tutaj będziemy wpisywać nasze opisy przedmiotów, obrazki itp.
Linijki 80-89:
Tutaj znajdują się bloki informacyjne (kontakt, płatności, wysyłka i regulamin aukcji). Ich edycja jest bardzo prosta.
<!-- wysyłka, kontkat itp-->
<img src="images/kontakt.jpg" width="164" height="40" alt=""><br><br>
kontakt<br><br>
<img src="images/przesylka.jpg" width="164" height="40" alt=""><br><br>
przesyłka<br><br>
<img src="images/platnosci.jpg" width="164" height="40" alt=""><br><br>
przelew<br><br>
<img src="images/regulamin.jpg" width="164" height="40" alt=""><br><br>
regulamin
<!-- wysyłka, kontakt itp koniec -->
W miejsce pogrubionych na zielone tekstów, wstawiamy nasze informacje, odpowiednie dla dane bloku informacyjnego.
Często zdarza mi się odbierać od Użytkowników mojego serwisu z pytaniem:
Dlaczego po wstawieniu szablonu (jakiegokolwiek) na aukcje Allegro, nie wyświetlają mi się obrazki?
W szablonie (na przykładzie tego, który opisuje w tej instrukcji) występuje 6 obrazków. Każdy z nich musi znajdować się na własnym serwerze lub serwisie, który umożliwia upload obrazków.
W tym wypadku należy zmieniać znacznik IMG i jego parametr SRC wg wzoru:
<img src="images/regulamin.jpg" width="164" height="40" alt="">
na np.
<img src="http://www.moj-serwer.com.pl/images/regulamin.jpg" width="164" height="40" alt="">
Linijki 94-111:
Między komentarzami wstawiamy opis naszej aukcji. Można oczywiście stosować własny kod HTML/CSS. Standardowo jest tam regulamin korzystania z szablonów.
Linijki 116-118:
W tych linijkach zawarty został graficzny przycisk z odnośnikiem do serwisu www.szablony-allegro.com. Zgodnie z regulaminem, proszę o nie usuwanie tego kodu, gdyż narusza to prawa autorskie do korzystania z szablonów.
...
Dex12