Instrukcja

To jest przykładowa treść strony... Aby ją zmienić, wczytaj ten plik (index.html) w edytorze (X)HTML, odszukaj w kodzie źródłowym strony wyrażenia:

<!--TRESC-->

oraz

<!--/TRESC-->

i umieść pomiędzy nimi własny tekst.

Pomiędzy <!--LOGO--> a <!--/LOGO--> można wpisać tekst, który pojawi się na szczycie strony. Można tam wstawić obrazek logo:

<img src="logo.jpg" alt="lol" />

Pomiędzy <!--LINKI--> a <!--/LINKI--> można wstawić powtórzoną nawigację, czyli najważniejsze linki w serwisie, do których powinien być ułatwiony dostęp. Do wpisywania linków użyj znaczników wykazu:

<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>

Oczywiście można tutaj równie dobrze wpisać zwykły tekst.

Aby dodać dodatkowy blok menu, odszukaj w kodzie źródłowym fragment zawarty pomiędzy:

<!--MENU-->

a

<!--/MENU-->

i skopiuj go bezpośrednio poniżej.

Możesz zmienić nagłówek menu, wpisjąc własny tekst pomiędzy <!--NAGLOWEK MENU--> a <!--/NAGLOWEK MENU-->.

Możesz zmienić zawartosc bloku menu, wpisjąc własny tekst pomiędzy <!--ZAWARTOSC MENU--> a <!--/ZAWARTOSC MENU-->. Do wpisywania linków użyj znaczników wykazu:

<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>

Aby dodać dodatkowy blok info, odszukaj w kodzie źródłowym fragment zawarty pomiędzy:

<!--INFO-->

a

<!--/INFO-->

i skopiuj go bezpośrednio poniżej.

Możesz zmienić nagłówek info, wpisjąc własny tekst pomiędzy <!--NAGLOWEK INFO--> a <!--/NAGLOWEK INFO-->.

Możesz zmienić zawartosc bloku info, wpisjąc własny tekst pomiędzy <!--ZAWARTOSC INFO--> a <!--/ZAWARTOSC INFO-->. Do wpisywania linków użyj znaczników wykazu:

<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>

Grafika

Aby szablon stał się kompletny, należy przygotować w dowolnym programie graficznym dodatkowe obrazy, które będą stanowiły tło graficzne odpowiednich elementów strony i zapisać je w tym samym katalogu, co plik style.css:

background.gif

Ogólne tło dokumentu, widoczne w wyższych rozdzielczościach ekranu po bokach.

top.gif

Tło pod zewnętrzną ramką szablonu. Szerokość tego elementu to 770 pikseli. Po środu jest przykryte przez właściwe wnętrze o szerokości 750 pikseli, a więc widoczny obszar tego tła występuje przy lewej i prawej krawędzi szablonu i ma szerokość minumum 10 pikseli na każdej krawędzi. Zatem aby uzyskać efekt "ramki" na brzegach szablonu, możesz przygotować grafikę o szerokości 770 pikseli z 10-cio pikselowymi pasami po bokach:

 

body.gif

Tło wnętrza strony. Szerokość tego elementu to 750 pikseli, ale oczywiście grafika tła może być dowolnych rozmiarów, ponieważ na stronie zostanie powielona.

logo.gif

Tło pod logo. Szerokość tego elementu to 750 pikseli.

linki.gif

Tło pod linkami powtórzonej nawigacji. Szerokość tego elementu to 750 pikseli, ale zwykle w tym przypadku lepszy efekt przyniesie niewysokie tło o szerokości 1 piksela, które zostanie powielone poziomo.

stopka.gif

Tło stopki. Szerokość tego elementu to 750 pikseli, jednak zwykle tę grafikę powiela się w poziomie, tzn. szerokość 1px, a wysokość taka sama jak wysokość stopki.

UWAGA! W nazwach plików wielkość liter ma znaczenie, tzn. np.: background.GIF to nie jest to samo co background.gif

Tworzenie podstron

Zasadniczo, aby utworzyć nową podstronę serwisu, trzeba skopiować cały ten dokument (index.html), zmienić w nim treść (zobacz początek tego opisu) i zapisać pod inną nazwą w pliku z rozszerzeniem *.html - np. podstrona.html. Proces ten można uprościć budując szablon w języku skryptowym PHP. Jeśli nie znasz lub nie masz dostępu do tego rodzaju skryptów, możesz w miejsce treści w pliku index.html wstawić ramkę pływającą:

<iframe name="p" src="start.html" width="100%" height="400" frameborder="0"></iframe>

(start.html to nazwa strony głównej z treścią - to nie jest index.html!), a do wszystkich linków z menu dodać atrybut:

<a target="p" href="strona.html">...</a>

Można również skorzystać ze skryptu opublikowanego w serwisie Kurs HTML w rozdziale Skrypty/AutoIFRAME, który automatycznie dopasuje wysokość ramki pływającej do jej zawartości.

Prawa autorskie

Możesz wykorzystać ten szablon to budowy dowolnej strony WWW - również komercyjnej. Oczywiście możesz się także podpisać, jako autor treści na niej zawartych.

Będzie mi bardzo miło, jeżeli wstawisz na swojej stronie banner, button lub chociaż link do serwisu Kurs HTML (bannery i buttony znajdziesz w serwisie), ale nie jest to wymagane.