Jak się robi szablon

Jak się robi szablon??

Wyróżniamy dwa rodzaje szablonów:
[przykład] - 1) szablon ciągnący się dół (tak jak poniżej)

[przykład] - 2) szablon z suwakami <--- jeżeli chcesz nauczyć się robić ten drugi, to kliknij

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

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 - znajdują się w górnym rogu grafiki i w przypadku tego szablonu wszystkie obrazki powinny być na górze. Do tego ozdobiłam obrazek żółtawą ramką.

0x01 graphic

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.

0x01 graphic

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:) Następnie trzeba skopiować ten kawałek grafiki zaznaczony na czerwono, który ma się ciągnąć w dół, gdy tekst na blogu wydłuża się. Nieważna jest wysokość (grubość) tego paska, natomiast musi być on tak samo długi jak obraz Twojego szablonu. Wytnij go, skopiuj do nowego dokumentu i zapisz np. jako "pasek.jpg". Swój szablon tak samo lepiej zapisz - np. jako szablon.jpg (oczywiście te czerwone linie, które zakreśliłam, są tylko pomocnicze)

0x01 graphic

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

Pierwsza cześć kodu wygląda tak:

<html>

<head>

<title> {nazwa bloga} </title>

body, p, td {font-family: Verdana;

font-size: 10px; line-height:14px ; color: #000000; cursor:arrow; }

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 - wielkości i czcionki nie trzeba zmieniać, chyba że istnieje taka potrzeba natomiast w kwestii zmiany kolorów (czcionki, tła, odnośników) najlepiej skorzystać z generatora.

Druga część kodu wygląda tak:

A:link {COLOR: #42881B; HEIGHT: 1px; TEXT-DECORATION: none;}

A:visited {COLOR: #42881B; HEIGHT: 1px; text-decoration: none;}

A:active { COLOR: #324701; HEIGHT: 1px; TEXT-DECORATION: none;}

A:hover {color: #648D03; height:0; text-decoration: none; cursor:hand; font-weight: bold}

<!--

body {

scrollbar-arrow-color: #42881B;

scrollbar-darkshadow-color: #000000;

scrollbar-track-color: #B6D603;

scrollbar-face-color: #000000;

scrollbar-shadow-color: #B6D603;

scrollbar-highlight-color: #B6D603;

scrollbar-3dlight-color: #000000;}

-->

</STYLE>

</head>

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"):

0x01 graphic
<-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).

Trzeci fragment kodu to:

<p>

<br>{blog}

<b>Ten szablon różni się od szablonu z suwakami, tym, że są one niepotrzebne, gdyż jeżeli tekst przestanie się mieścić, blog wydłuża się, i zachowuje wygląd prostokąta dzięki temu paskowi, który powtarza się i powtarza. Tylko, że gdy tekstu jest bardzo dużo to podczas przesuwania w dół, powoli zanika grafika u góry, czyli w tym przypadku cytrynki.</b>

<br><br>| Lay&html by <a href="mailto:kumpela@gorzow.mm.pl">Misuri</a> dla <a href="http://www.szablonart.za.pl">www.szablonart.za.pl </a> |<BR>

Następnie: <body bgcolor="#000000" - kolor tła (wpisać w cudzysłowiu); background="przyklad/pasek.jpg" - to jest adres tego paska w szablonie "cytrynka", który musiałam skopiować - bo cała grafika do szablonu, i pasek, i szablon powinny znajdować się na serwerze, żeby mieć adres (więcej informacji na temat grafiki na serwerze tutaj) style="background-repeat:repeat-y;" topmargin="0" leftmargin="0"> - to oznacza, że ten pasek ma się powtarzać oraz marginesy, ale radzę tu nic nie zmieniać. Następnie: <img border="0" src="przyklad/szablon.jpg" width="700" height="600"> - jest to lokalizacja do szablonu, który musi być umieszczony na serwerze, tak samo jak pasek. W miejscu width ="" (szczerokość) i height=""(wysokość) należy podać wymiary szablonu, które ustawiałeś w Paincie w atrybutach obrazu. Następnie przychodzi kolej na element w kodzie, przy którym zatrzymamy się nieco dłużej : <div id=Layer1 style="z-index: 1; left: 44; width: 343; position: absolute; top: 335; height: 265" 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 tekst Twojego bloga. Aby się w tym nieco zorientować, przygotowałam pomocniczy obrazek:

0x01 graphic

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

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, 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".
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 id=Layer1 style="z-index: 1; left: 467; width: 199; position: absolute; top:49; height: 551" align="center"> - jest to umieszczenie pola z linkami (czy menu) na szablonie, 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:

0x01 graphic

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.

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łem 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>" 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. To właśnie pomiędzy znacznikami <div> i </div> wstawiacie wszelkiego rodzaju dodatki blogowe, migające teksty, avatary - to wszystko co ma być widoczne bezpośrednio na blogu. 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 tutaj.

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

<html>

<head>

<title> {nazwa bloga} </title>

body, p, td {font-family: Verdana ;

font-size: 10px; line-height:14px ; color: #000000; cursor:arrow; }

Pozdrawiam ;)

Dla chomikuj.pl CimonekxD

Wyszukiwarka

Podobne podstrony:
poradnik jak sie robi dzieci
MICHALKIEWICZ JAK SIĘ ROBI CUDA (2)
Jak się robi wyroby?ramicxzne?gła
JAK SIĘ ROBI ANALIZĘ DZIEŁA, Sztuka-MODA
Jak się robi herbatę, smieszne teksty
Jak sie robi dzieci
poradnik jak sie robi dzieci 2
Jak się robi podłogi
Jak to się robi poza Polską
Pozycjonowanie i optymalizacja stron WWW Jak to sie robi
oto jak to sie robi!! G
Jak to się robi buty
Jak to się robi w Niemczech - Podatek kościelny w działaniu, Katechistan - kraju Polan powstań z kol
oto jak to sie robi 3
Jak to się robi - skarpety tkane igłą, Słowianie - Wikingowie

więcej podobnych podstron