Przedstawimy tu w skrócie najbardziej podstawowe szablony, które możecie bezposrednio skopiować i zaadoptować do Swoich potrzeb absolutnie "FREE".

Szablon z trzema kolumnami - HTML

Pierwszy szablon to szablon napisany w HTML, który pokazuje ogólną strukturę strony w oparciu o układ tzw trzykolumnowy.

Jest to bardzo prosty i popularny układ, polegający na tym, że tło strony stanowi jakiś odpowiednio dobrany kolor, a na nim, centralnie jest utworzona jedna duża tabela. W skład tabeli wchodzą "rzędy". Jak wiesz, każdy rząd zaczyna się od znacznika tr a kończy się znacznikiem /tr. Znaczniki te są umieszczone pomiędzy znakami "<" i ">". Dla uproszczenia nie będe ich tu używał.

Każdy rząd zawiera tzw. komórki, które zaczynają się od znacznika td a kończą znacznikiem /td. Jeżeli chcemy, aby rząd był na całą szerokość tabeli, to będzie w nim tylko jedna komórka, zaś jeżeli w rzędzie ma być kilka komórek, to należy je tam zadeklarować, przy czym należy pamiętać, że jedną komórkę też należy zadeklarować.

W naszym przkładzie strona składa się z trzech rzędów, a środkowy rząd składa się z trzech komórek, które tworzą trzy kolumny. W ten sposób, dodając rzędy lub komórki w rzędach można stworzyć dowolną strukturę, odpowiednio do naszych celów. Jeżeli tak przygotowany szablon będziemy wypełniać treścią, to zacznie on przybierać formę bardziej znajomą z Internetu - upodobni się do wielu stron internetowych.
W oparciu o ten szablon zbudowana została np. strona www.videowall.com.pl a po zmodyfikowaniu go do wersji dwukolumnowej, również strona www.zdrowie-online.info

Zwyczajowo, treść główna strony jest umieszczana w kolumnie środkowej, w kolumnie lewej umieszczamy MENU i/lub formularz kontaktowy, a w prawej, jakieś inne, istotne informacje. Oczywiście, nie są to żadne obowiązujące wytyczne, lecz sprawdzone kanony. Należy je raczej traktować jako Wskazówki. Kolumny możemy wyróznić, deklarując w kodzie strony kolor tła kolumny. Kolor tła jest również elementem wyrazu artystycznego i spełnia ważny, określony cel.

W celu skopiowania jednego rzędu (niezależnie czy to będzie rząd jednokomórkowy czy wielokomórkowy), należy zaznaczyć odpowiedni fragment kodu HTML zaczynający sie od tr i kończący się na /tr, zapisać go do schowka i wstawić w odpowiednie miejsce. Oczywiście, nie muszę dodawać, że aby to zrobić, musisz mieć opanowane podstawy języka HTML.

Jak wykorzystać ten szablon ??

• na początku musisz w swoim komputerze, w dowolnym miejscu stworzyć katalog o nazwie np. moja strona
• do tego katalogu ściągnij kolejno pliki index1.html, index2.html, sz1.css i sz2.css.
• Aby to zrobić, kliknij kolejno na każdy z nich, (na ekranie zobaczysz kod źródłowy) a następnie zapisz je do katalogu moja strona podając odpowiednie ścieżki i nadając odpowiednie nazwy.
• Z plikiem index1.html skojarzony jest plik sz1.css, a z plikierm index2.html plik sz2.css
• w katalogu moja strona powinienneś również stworzyć subkatalog grafika, w którym będziesz przechowywać pliki graficzne, oraz subkatalog o nazwie download, gdzie będą przechowywane pliki przeznaczone do ściągnięcia

Jak z tego zrobić stronę www ??

• plik index1.html został stworzony w celach dydaktycznych, dla jasnego pokazania struktury szablonu, natomiast jako plik roboczy będziemy wykorzystywać plik index2.html i na nim oprzemy tworzenie strony
• zmień nazwę pliku na index.html
• w tym miejscu należy również, albo przede wszystkim, zastanowić się nad poprawnym wypełnieniem meta tagów w częsci head, ale nie będę tego poruszał, bo nie jest to związane z głównym tematem tej sekcji, czyli z szablonami.
• zastanów się, jakie podstrony będzie zawierać Twoja strona, tzn. co bedzie się znajdować w menu. Zwykle są to takie pozycje jak: oferta, o firmie, kontakt itp.
• zanim cokolwiek ustalisz, zrób kilka eksperymentów, zmieniając parametry tabeli, rzędów i kolumn - w szczególności szerokość i zobacz jaki to będzie miało wpływ na wygląd strony. Jeżeli w bocznych kolumnach będziesz umieszczał banery, to powinieneś przewidzieć szerokość kolumny ok. 200 pixeli. Standardowa szerokość banera w tym miejscu to zwykle 180 pix.
• otwórz plik index.html i wpisz w menu ustalone nazwy podstron, zamieniając np. link1 na "oferta", link2 na "cos tam" itd, tak aby pokazały sie one w menu strony głównej (zawsze jest to plik index.html) po jej otwarciu. Nie zapomnij również o wpisaniu do menu "strona głowna"
• otwórz plik index.html i zapisz go kolejno pod uprzednio ustalonymi nazwami podstron występujących w menu.
• teraz wystarczy już tylko poszczególne podstrony wypełnić treścią i strona www jest gotowa. Można już ją przesłać na serwer.