Strona jest częścią serwisu www.szablon-blogowy.prv.pl
Jak zrobić szablon?
Postaram się tu wytłumaczyć jak zrobić szablon na bloga, choć nie mówię, że będzie to łatwe, na pewno bedziecie mieli jeszcze wiele pytań...
Szablon robiony divami (bez scrolli, "długi")
1. Otwieramy Paint. Ustawiamy wielkość obrazu na 700x600 pikseli [Obraz -> Atrybuty -> Szerokość:700 Wysokość:600 -> OK]. To taka standardowa wielkość. Choć można sobie później zmieniać te wymiary podczas tworzenia grafiki i dopasowywać wedle naszych gustów:)
2. Wklejamy jakieś zdjęcie, grafikę, rysujemy coś, cokolwiek co chcemy mieć na szablonie. Ja wybrałam lilię. Wokół zdjęcia narysowałam linie, które także znalazły swoje miejsce niżej, jako ramki tabelki, w której będą notki, a w drugiej kolumnie będą linki. Dodałam napisy i wypełniłam kolorem zielonym wszystko co pozostało. Zapisujemy ten plik w formacie *.bmp czyli zwyczajnie w Paincie.
3. Nadal jesteśmy w Paincie. Zaznaczamy cały dolny poziomy pasek naszego szablonu, tak jak niżej. Obojętnie jaką bedzie miał on wysokość, ważne, żeby zaznaczona była cała szerokość obrazka. Chodzi o to, żeby odciąć kawałek grafiki, którą będziemy powtarzać jako tło.
4. Kopiujemy [Edycja -> Kopiuj]. Otwieramy nowy Paint (nowy dokument) i wklejamy to co skopiowaliśmy. Zapisujemy w tym samym folderze co zapisaliśmy naszą grafikę. (Zakładam z góry, że zapisaliście tamtą grafikę:)
Pasek ten będzie służył nam jako tło: grafika jest "krótka" i jeśli notek będzie więcej, szablon będzie przewijany w dół i w dół, i tam w tle też musi być jakiś obrazek. Będzie nim kawałek naszej grafiki. Będzie on się tam bez końca powtarzał.
Pamiętajcie, aby po wklejeniu paska do nowego dokumentu nie pozostało wokół niego białe lub inne tło.
5. Nastał czas na trudniejszą część: HTML. Lecz jeśli pozna się go dokładnie, nie jest on wcale taki straszny jak się wydaje:) Zaczynamy od podstaw. Wytłumaczę teraz elementy tegoż oto kodu. Zaczynamy.
a) każdy kod HTML zaczyna się znacznikiem <html>, kończy znacznikiem </html>
b) po znaczniku <html> jest "główka" <head>, w której zawarte są informacje dla przeglądarki, których nie widać bezpośrednio na stronie, ale są bardzo istotne.
- linijka <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">, która oznacza kodowanie. Jest to najodpowiedniejsze dla naszego trudnego języka polskiego:)
- pomiędzy tagami <title> a </title> zawarty jest tytuł naszego bloga, jaki będzie wyświetlany na górnym pasku przeglądarki
- <style> są to tzw. Efekty linków. Więcej informacji tutaj
c) teraz zaczyna się dopiero pole do popisu - tag <body>. Tutaj jest wszystko to, co widzimy na naszym blogu.
- w tagu <body> zawarte są polecenia. "Bgcolor" to kolor tła, "Background" to obrazek tła. W przypadku omawianego szablonu obrazkiem tła, jest skopiowany przez nas wcześniej pasek. Jego adres URL wpisujemy: Background="tutaj adres tego paska"
- <IMG style="LEFT: 0; POSITION: absolute; TOP: 0" src="images/szablon1.jpg" border=0> To jest nasza grafika, czyli szablon. Wpisujemy to tak jakbyśmy wstawiali na bloga zwykły obrazek, czyli <IMG src="adres obrazka,grafiki" border=0>
Dodajemy tylko polecenie "style". Atrybuty: "left" odległość w pikselach od lewej krawędzi, "top" odległość od górnej krawędzi.
- zostały nam już tylko kolumny z notkami i linkami. Żeby ustawić ich stałe miejsce w szablonie, wpisujemy:
<div style="position: absolute; top: 300; left: 10; width: 400; padding:3px; overflow:auto; text-align:center; z-index:0;">. Top - odległość w pikselach od góry, left - od lewej, width - szerokość kolumny (tej kolumny nie widać, ale można to nazwać też szerokością tekstu, który tam bedzie się znajdował). Zamiast tych liczb wstawiacie swoje na oko, potem to już dopracowujecie.
A więc po wpisaniu czegoś takiego, wstawiamy do środka tekst np. linki, buttony i takie tam pierdółki i zamykamy to tagiem </div>. Żeby zrobić kolejną kolumnę na notki, robicie tak samo, tylko trzeba zmienić wartości, żeby ten tekst był w innym miejscu.
- zakańczamy znacznikami </body></html>.
- a oto cały kod HTMl omawianego szablonu:
- a oto gotowy szablon tutaj.
Jeżeli już zrobicie cały szablon samodzielnie to zmieńcie sobie podpis pod nim na swój, w końcu sami go zrobiliście:) Byłabym wtedy wdzięczna za link do mojej strony na Waszym blogu:)
??? w które miejsce w kodzie wstawić przygotowaną grafikę? Tło (pasek) wstawiacie zamiast mojego pliku w miejsce, gdzie pisze "images/pasek.jpg" (o okolicach body), a główną grafikę, czyli np. jakieś zdjęcie wstawiacie zamiast "images/szablon1.jpg". Oczywiście wstawiacie tak adresy URL swoich plików. Aby były one widoczne w internecie trzeba założyć swoje konkto WWW np. na interia.pl i wgrać tam te pliki. TU więcej na ten temat. W razie problemów pisać w Księdze:)
Zobacz także:
Jeżeli robisz szablon po raz pierwszy i nie masz jeszcze konta WWW i nie wiesz jak je założyć, zapraszam do odpowiedniego działu -> Zakładanie konta (serwer WWW)