Szablon bez tabelek…

Dodał Lisu w Webmaster dnia 27 listopada 2008 | 1 Komentarz

W tym poście napiszę jak zakodować prosty szablon z użyciem xhtml 1.0 strict i css. Motyw nie będzie zawierał żadnej grafiki, ale wstawienie jej nie powinno być problemem.

1. Na sam początek otwieramy jakiś edytor stron, w moim przypadku będzie to PSPad i tworzymy nowy dokument.

2. Potem wstawiamy początek pliku xhtml czyli:

<?xml version='1.0&#8242; encoding='utf-8&#8242;?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8&#8242; />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<title>Jakaś nazwa strony</title>
</head>
<body>

3. W miejscu gdzie jest napisane „Jakaś nazwa strony” podajemy tytuł naszej witryny.

4. Teraz wpisujemy kod odpowiedzialny za układ (szablon będzie się składał z nagłówka, lewej i prawej strony oraz stopki):

<div id="tabela">
<div id="top">treść nagłówka</div>
<div id="lewa">treść lewej strony</div>
<div id="prawa">treść prawej strony</div>
<div id="stopka">treść stopki</div>
</div>

5. Teraz mamy już podstawowy zarys strony w xhtml’u. Pomiędzy div’ami wstawiamy to co chcemy mieć w danym miejscu np. obrazki, teksty, skrypty itp.

6. Dokument kończymy kodem:

</body>
</html>

7. Zapisujemy nasz plik pod nazwą np. index.xhtml .

8. Następnie tworzymy nowy dokument, tym razem css.

9. Tworzymy podstawowe klasy czyli:

body {
background-color : #555;
color : #000000;
font-family : Verdana;
font-size : 11px;
}
a {
color : #000000;
text-decoration : none;
}
a:hover {
color : #ff0000;
text-decoration : underline;
}

Klasa „body” odpowiedzialna jest za główny wygląd strony, „a” za link, a „a:hover” za link po najechaniu. „color” oznacza kolor tekstu, „background-color” kolor tła, „text-decoration” dekoracje tekstu, „font-family” krój czcionki, a „font-size” rozmiar czcionki w pikselach.

10. Teraz tworzymy klasy, które zostaną użyte przez nasz szablon:

#tabela {
width: 1000px;
background-color: #fff;
display: block;
border: 1px solid #000;
margin-left: auto;
margin-right: auto;
}
#top {
width: 100%;
height: 50px;
background-color: green;
}
#lewa {
float: left;
width: 300px;
background-color: orange;
}
#prawa {
float: right;
width: 700px;
background-color: yellow;
}
#stopka {
clear: both;
width: 100%;
height: 50px;
background-color: maroon;
}

„width” oznacza szerokość, „height” wysokość, „float” po której stronie ma być obiekt, „display” wyświetlanie.

11. Plik zapisujemy pod nazwą „styles.css” w folderze z plikiem „index.xhtml”.

12. Gotowe!

1 Komentarz »

  1. Lisu mówi:

    Może się to komuś przyda :P

    comment-bottom

RSS z komentarzami do tego posta. TrackBack URL

Zostaw komentarz