Szablon strony www

Konieczne wyposażenie:

znajomość HTML -a

znajomość CSS -a

edytor tekstowy - Notepad

Typ projektowanego szablonu:

stała szerokość kolumn bocznych

zmienna – dostosowująca się do okna przeglądarki – szerokość kolumny głównej, nagłówka i stopki

% fix fix % % zobacz też inne typy szablonów trójkolumnowych

1. Utwórz główną strukturę dokumentu w HTML-u <body> <div id=" top "> </div> <div id=" wrapper ">  dodany w celu wyrównania wysokości kolumn - za pomocą css <div id=" left "> </div> <div id=" right "> </div> <div id=" content "> </div> </div> <div id=" footer "> </div> </body> Krok 1

2. Dodaj arkusz CSS. Ostyluj w nim znacznik body body { width: 90%; margin: 10px auto; } Krok 2

3. Dodaj np. kolor czcionki, kolor tła i wysokość wiersza body { width: 90%; margin: 10px auto; color: #333; background-color: #fff; line-height: 130%; } Krok 3

Krok 4 4. Nadaj styl divowi top #top { height:100px; padding: .5em; background-color: # c00000 ; }

Krok 5 h1 5. Usuń marginesy i paddingi z h1 #top h1 { padding: 0; margin: 0; }

Krok 6  w celu ukrycia przepełnienia 6. Ostyluj dodatkowy div obejmujący: wrapper # wrapper { overflow: hidden; background:#d9d9d9; }

7. Zastosuj opływanie = float, tło, paddingi i marginesy dla diva left #left { float: left; width: 160px; background-color: # 00b0f0; padding: 1em 1em 2000px; margin-bottom: -2000px; } Krok 7

8. Zastosuj opływanie = float, paddingi i marginesy dla diva right #righ { float: right; width: 160px; background-color: # ffc000; padding: 1em 1em 2000px; margin-bottom: -2000px; } Krok 8

9. Dodaj paddingi i marginesy dla diva content #content { padding: 1em 1em 2000px; margin: 0 200px -2000px; } Krok 9

10. Usuń z zawartości kolumn górne marginesy #left p, #right p { margin: 0 0 1em 0; } #content h2 { margin: 0 0 .5em 0; } Krok 10 h2 p p

11. Nadaj styl stopce – div footer, wyjdź z oblewania #footer { clear: both; height: 100%; margin: 0 auto; padding: .5em 0; background-color: # 92d050 ; overflow: hidden; } Krok 11  zabezpiecza przed rozpychaniem

Krok 12 - ostatni! © mgr Maria Ptak 12. Testuj szablon dla różnej wysokości kolumn, zmieniając ich zawartość

Po co ten div wrapper? Gdyby nie było diva wrapper , ujemnych, dolnych - ogromnych marginesów i takich samych dodatnich paddingów dla kolumn… © mgr Maria Ptak