Jak się robi szablon?


Wyróżniamy dwa rodzaje szablonów:
[przykład] - 1) szablon ciągnący się dół <--- jeżeli chcesz nauczyć się robić ten pierwszy, to kliknij
[przykład] - 2) szablon z suwakami (tak jak poniżej)

Robienie szablonu składa się z dwóch etapów:
1) Stworzenie grafiki szablonu
2) Kod HTML do szablonu

My zaczniemy od etapu pierwszego, czyli od stworzenia grafiki. Możemy to zrobić np. w Paincie - bo zakładam, że każdy akurat ma ten program - ale równie dobrze można robić szablony w bardziej zaawansowanych programach takich jak Photoshop, GIMP, Corel Draw czy Paint Shop Pro.

Etap I
1. Otwieramy nowy dokument i ustawiamy atrybuty jego wielkości - tradycyjnie szablony mają wymiary 800/600 więc można ustawić właśnie takie (Obraz--->Atrybuty). Następne kroki będę opisywała na przykładzie jednego z moich szablonów. Nie musisz oczywiście robić szablonu w takim stylu, jak ja - wystarczy spojrzeć na inne szablony - ich zróżnicowanie jest po prostu niewyobrażalne, ale chciałam podać najbardziej tradycyjny i czytelny przykład szablonu.

2. Następnie można ustalić kolor tła (tłem może być też obrazek lub tekstura) i inne ozdoby - a potem wkleić tam jakąś grafikę, którą chcesz tam mieć, np. jakiś kwiatek albo cokolwiek. Ja np. wybrałam cytrynki na czarnym tle - są one na górze, ale równie dobrze obrazek może być na samym dole - gdzie chcesz. Do tego ozdobiłam obrazek żółtawą ramką.


3. Potem można zaznaczyć obszary, w jakich mają być: blog i linki - możesz to zrobić w postaci prostokątów, tak jak ja, lub w postaci ramek, czegokolwiek - można też w ogóle nic nie zaznaczać i wtedy na blogu nie będzie widać gdzie zaczyna się pole z blogiem i linkami - a gdzie się kończy. Myślę jednak, że na początek z prostokątami wygląda to czytelnie, bo od razu widać, gdzie co jest.


4. Teraz można napisać nad tymi zielonkawymi prostokątami "blog" i "linki", oraz można się podpisać na szablonie, że to Twoje wykonanie. Oczywiście inne pomysły napisów we własnym zakresie:) Da się zauważyć, że te zielonkawe prostokąty kończą się - i w momencie gdy tekst przestanie się w nich mieścić, pojawią się specjalne suwaki (tzw.scrolle), które umożliwią przesuwanie tekstu w dół. Teraz wystarczy tylko zapisać szablon - np. jako szablon.jpg




Wszystkie obrazki powinny być zapisane w jednym z dwóch formatów:

a) GIF - dla grafik składających się z mniej niż 256 kolorów. Format ten obsługuje przezroczystość oraz animacje.
b) JPG - dla grafik wielokolorowych, najczęściej o większych rozmiarach. Nie obsługuje przezroczystości ani animacji. Nie zajmuje dużo miejsca.

Innych formatów nie należy używać ponieważ zajmują niepotrzebnie dużo miejsca na serwerze i długo się wczytują!


Po zapisaniu szablonu i paska w postaci grafiki przyszła pora na trudniejszą część - dopasowanie do szablonu kodu html. Teraz w podpunktach przedstawię kolejne części kodu szablonu z cytrynką i omówię co to w ogóle wszystko jest. Aby to wszystko lepiej zrozumieć radzę skopiować od razu pełny kod tego szablonu do notatnika (ten kod znajduje się u dołu tej strony) i uważnie czytać opisy poszczególnych fragmentów kodu - żeby zrozumieć. Jeżeli ukończyliście już Etap I (czyli tworzenie grafiki do szablonu) to można w notatniku od razu przekształcać kod do swojego szablonu.

Etap II
1) Pierwsza cześć kodu wygląda tak:

A więc - każdy kod html rozpoczyna się <html> i kończy </html>. W nagłówku <head> </head> mieszczą się informacje dotyczące strony, nie widać ich jednak bezpośrednio na stronie - korzysta z nich przeglądarka. W miejscu {nazwa bloga} należy wpisać oczywiście nazwę bloga, wyświetlaną na pasku przeglądarki. "<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">" - cała ta linijka jest bardzo ważna, gdyż jest to kodowanie znaków - czyli, krótko mówiąc, język, jaki będzie na blogu (jeżeli jest błąd w kodowaniu czesto widać takie śmieszne znaczki pojawiające się w miejscach "ą","ę","ó",ć,"ś" itp.). Następnie przechodzimy do elementów koloru, wielkości i rodzaju czcionki oraz kursora, jaki będzie na blogu. Wystarczy wpisać tam odpowiednie parametry - w kwestii kolorów najlepiej skorzystać z generatora.

2) Druga część kodu wygląda tak:

Tu jest dalsza część stylów - jeśli chodzi o efekty i kolory linek (od A:link do A:hover włącznie z nawiasami) to polecam zajrzeć tutaj. Teraz omówimy kolory suwaków (scrolli) (czyli siedem linijek zaczynających się od "scrollbar"):

Myślę, że sam obrazek sporo wyjaśnia, ale jeżeli nie, dopowiem trochę. Każda linijka zaczynająca się w kodzie od "scrollbar" zawiera informacje dotyczące kolorów poszczególnych części suwaka. Jeżeli chcesz te suwaki dopasować do swojego bloga to zachęcam do dokładnego przyjrzenia się obrazkowi i dobrania właściwych kolorów właściwemu elementowi. W tym wypadku również warto skorzystać z generatora kolorów - bo zwykle podaje się tam kolory w hex (pamiętaj o znaczkach"#" - przed każdym kodem koloru).
Następnie następuje koniec nagłówka i stylów - a przychodzi kolej na całą zawartość znaczników <body></body> - ciała dokumentu (czyli tego, co widać bezpośrednio na witrynie/blogu).





3) Trzeci fragment kodu to:


Następnie: <body bgcolor="#000000" - kolor tła (wpisać w cudzysłowiu); <IMG style="LEFT: 0; POSITION: absolute; TOP: 0" src="przyklad/szablon2.jpg" border= "0"> - to właśnie jest wstawienie grafiki do szablonu, czyli tego, co było robione w "Etapie I". Grafika szablonu musi zostać umieszczona na serwerze i w cudzysłowiu zamiast adresu do szablonu "cytrynka" powinien być adres do Twojej grafiki na serwerze (więcej informacji na temat grafiki na serwerze tutaj) Następnie przychodzi kolej na element w kodzie, przy którym zatrzymamy się nieco dłużej : <div style="z-index: 0; left: 458; visibility: visible; overflow: auto; width: 217; position: absolute; top:49; height: 538" align="center">. Nic tu nie trzeba zmieniać, oprócz wartości "left, width, top i height" - te liczby przy nich oznaczają, w którym miejscu na szablonie będzie menu wraz z linkami na Twoim blogu. Wiadomo, że tekst bloga ma być w zielonkawym polu oznaczonym "BLOG", a tekst menu ma się znajdować w zielonkawym dłuższym polu podpisanym "LINKI" - a żeby tak było, trzeba wpisać odpowiednie wartości; odległości w pikselach. Aby się w tym nieco zorientować, przygotowałam pomocniczy obrazek:

Te strzałki są tylko pomocnicze, a teraz opowiem, jak ustalić te wszystkie odległości:
left - czerwona strzałka - odległość od lewej krawędzi szablonu do krawędzi zielonego pola z menu i linkami.
width - czarna strzałka - szerokość zielonkawego pola, w którym ma być potem menu wraz z linkami.
top - niebieska strzałka - odległość od górnej krawędzi szablonu do górnej krawędzi zielonkawego pola.
height - różowa strzałka - wysokość zielonkawego pola, w którym potem ma być potem menu wraz z linkami.

W jakimś programie graficznym wystarczy zmierzyć te odległości w swoim szablonie - i wpisać je w odpowiednim miejscu: top, height, left, weight. Jeszcze jedno: w zależności od tego, jak ma być sformatowany tekst na blogu i linkach, czy ma być wyśrodkowany, wyjustowany, wyrównany do prawej, lub do lewej - w miejscu align="center"> w cudzysłowiu zamiast "center" możesz jeszcze wpisać "justify", "left", lub "right".
Następnie aż do zakończenia "</div>" w tym polu z menu i linkami znajdują się rzeczy widoczne bezpośrednio na blogu takie jak: Księga Gości, Linki, Archiwum (ujęte w "{}" nawiasy) - oraz dużo innych. Jeżeli nie robisz szablonu na blog.pl - radzę zmienić w tych miejscach kod, aby dopasować do swojego serwisu. Więcej informacji na temat zmiany kodu znajdziesz t u t a j. Zamiast podpisu "Lay&html" by Misuri można umieścić własny podpis - oczywiście o ile grafika i szablon są Twojego wykonania. Następna linijka kodu: <div style="z-index: 0; left: 32; visibility: visible; overflow: auto; width: 366; position: absolute; top: 335; height: 251" align="center"> - jest to początek pola z blogiem i wymiary warunkujące na tym, w którym miejscu na szablonie ma się ono znajdować (tak jak z linkami), czyli tak samo jak wtedy: musisz podać odpowiednie paramentry: left, width, top, height. Jeżeli to jeszcze nie jest jasne - spójrz na następny obrazek:


left - czerwona strzałka - odległość od lewej krawędzi szablonu do krawędzi zielonego pola z blogiem
width - czarna strzałka - szerokość zielonkawego pola, w którym ma być potem tekst bloga.
top - niebieska strzałka - odległość od górnej krawędzi szablonu do górnej krawędzi zielonkawego pola.
height - różowa strzałka - wysokość zielonkawego pola, w którym potem ma być tekst bloga.



Zaznaczam, że ustawienie odpowiednich wymiarów jest bardzo ważne, ponieważ jeżeli wpiszesz je źle, tekst bloga lub menu będzie w zupełnie innym miejscu, niż powinien. Często pojawiają się pytania, jak wyznaczyć te wymiary. Można to zrobić po prostu w Paincie. Zrobiłam jeszcze jeden pomocniczy rysunek, który możecie sobie przeanalizować, klikając tutaj Wiem, że te wymiary są najbardziej wredne ze wszystkich tych rzeczy podczas robienia szablonu - wyjaśniam więc tam metodę ich wyznaczania jak najlepiej potrafię. Istnieją np. programy, za pomocą których bardzo łatwo się to robi, np. ja mam HTML Slicer, który jest częścią dobrego programu graficznego.


Następnie aż do zakończenia "</div>" znajduje się tekst Twojego bloga, tam raczej nie umieszcza się dodatków blogowych, można umieścić pod {blog} swój podpis, dedykację, numer gg, żeby było wiadomo, kto jest autorem szablonu (o ile jest on wykonany przez Ciebie).

To już koniec kodu - a oto cały kod do szablonu "cytrynka" :


[Zobacz ten szablon]



(Jeżeli nadal coś jest niejasne lub błędne i chciał(a)byś, żebym tu o tym napisała - powiadom mnie o tym!)


ALL RIGHTS RESERVED. WRITTEN BY MISURI. ©! [2005]