W swoim folderze roboczym, w katalogu szablony, utwórz katalog szablonwitryny a w nim dokument szablonwitryny.html (wykorzystaj plik szablonstrony.htm, metodę kopiuj-wklej) zawierający następujący kod:
<!DOCTYPE html> <html> <head> <title>Formatowanie witryny</title> </head> <body> <iframe src="naglowek.html" id="naglowekwitryny"> <a href="naglowek.html">naglowek</a> </iframe> <iframe src="menu.html" id="menuwitryny"> <a href="menu.html">menu</a> </iframe> <div id="naglowek"> Nagłówek strony </div> <div id="tresc"> Treść strony </div> <div id="informacje"> Informacje dodatkowe </div> <div id="stopka"> Stopka strony </div> <iframe src="stopka.html" id="stopkawitryny"> <a href="stopka.html">stopka</a> </iframe> </body> </html>
Utwórz w katalogu szablonwitryny pusty plik style.css z kodowaniem UTF-8. W źródle pliku szablonwitryny.html, w elemencie head dopisz kod. Zapisz dokument i otwórz go w przeglądarce.
<title>Szablon witryny</title> <link rel="stylesheet" href="style.css"> </head>
W folderze szablonwitryny utwórz dokument naglowek.html (wykorzystaj plik szablonstrony.html, metodę kopiuj-wklej) zawierający następujący kod:
<!DOCTYPE html> <html> <head> <title>Nagłówek witryny</title> <link rel="stylesheet" href="style.css"> </head> <body id="bodynaglowek"> Nagłówek witryny </body> </html>
W folderze szablonwitryny utwórz dokumenty menu.html (wykorzystaj plik menu.html, metodę kopiuj-wklej) popraw odpowiednio kod:
<title>Menu nawigacyjne witryny</title> <link rel="stylesheet" href="style.css"> </head> <body id="bodymenu"> Menu nawigacyjne witryny </body>
W folderze szablonwitryny utwórz dokumenty stopka.html (wykorzystaj plik menu.html, metodę kopiuj-wklej) popraw odpowiednio kod:
<title>Stopka witryny</title> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body id="bodystopka"> Stopka witryny </body>
W pliku style.css z folderu szblon2 popraw i dodaj kod:
body {
background: rgb(204,204,204);
width: 987px;
margin: 10px auto;
}
iframe {
border: none;
}
#naglowekwitryny {
width: 100%;
height: 50px;
}
#menuwitryny {
width: 100%;
height: 100px;
}
#naglowek {
background: rgb(204,204,204);
}
#tresc {
background: rgb(255,255,255);
}
#informacje {
display: none;
}
#stopka {
background: rgb(0,0,0);
}
#stopkawitryny {
width: 100%;
height: 25px;
}
#bodynaglowek, #bodymenu, #bodystopka {
overflow: hidden;
}
#bodynaglowek {
background: rgb(51,51,51);
}
#bodymenu {
background: rgb(102,102,102);
}
#bodystopka {
background: rgb(153,153,153);
}
Zapisz zmiany i otwórz w przeglądarce plik szablonwitryny.html z folderu szablonwitryny.
Umieść pliki i foldery na serwerze.