Najprej morate storiti potrebne priprave za namestitev spletne strani. Ustvarite želeno strukturo imenika. Ta bi lahko na primer izgledala takole:
steuerberater
---images
---css
To je zelo tipična struktura imenika. Na glavno raven postavite HTML strani. Datoteke CSS gredo v imenik css-, medtem ko v imenik images- shranite vse slike. V imenik images- dodajte vse slike, ki ste jih prej izrezali iz postavitve.
Postavitev osnovnega ogrodja
V imeniku css- ustvarite novo datoteko CSS. To datoteko nato vključite v svojo HTML datoteko. (V mojem primeru bo HTML datoteka imenovana index.html). Ta datoteka je od zdaj naprej osrednja točka naslednjih vadnic.
Najprej v index.html vstavite že znano osnovno ogrodje HTML.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vaš davčni svetovalec</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Bodite pozorni, da vključite tudi datoteko s stilom. In sedaj lahko začnete.
Zunanji element predstavlja div kontejner.
<div class="main-container"> </div>
Ta kontejner lahko takoj oblikujete s CSS sintakso.
.main-container {
width: 100%;
float: left;
}
Osnovni kontejner bo opremljen s širino 100 odstotkov in plava na levo. Prednost točno določene širine 100 odstotkov je, da lahko na primer vstavite ozadje z barvnim prehodom. To ozadje bi nato zasedalo celotno širino zaslona.
Ustvarim še dva dodatna div elementa znotraj glavne mape.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div>
Tudi te elemente oblikujete. Dejansko območje vsebine dobi širino 1000 slikovnih pik. S tem, ko navedete margin: 0px auto;, se doseže tudi horizontalno izravnavanje elementa.
.container {
width: 1000px;
margin: 0px auto;
}
Nadaljujem s formatiranjem elementa strani.
.page {
width: 1000px;
float: left;
padding: 40px 0px 0px 0px;
}
Ta element je dejansko območje vsebine strani. V njem boste postavili vse nadaljnje elemente. Tudi temu elementu je dodeljena fiksna širina 1000 slikovnih pik. Navedba padding poskrbi za določitev notranjih prostorov. Z zgornjo navedbo je zgornji notranji odmik nastavljen na 40 slikovnih pik, ostali robovi pa na 0 slikovnih pik.
Zdaj smo že ustvarili (grobo) strukturo postavitve.
Zdaj je čas, da to strukturo napolnite s vsebino. Stran najprej razdelite na tri vrstice.
• Glava
• Vsebina
• Noga
Za to definirajte tri dodatna področja div.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Tudi ta tri področja seveda formatirajte s CSS.
.top {
background-color: #f6f7f7;
width: 980px;
float: left;
padding: 0px 10px 10px 10px;
}
.content {
width: 980px;
float: left;
padding-top: 8px;
}
.bottom {
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Zdaj lahko nadaljujete z oblikovanjem posameznih področij.
Najprej se lotimo glave strani. Ta je ponovno sestavljena iz več elementov:
• Logotip/Naslov
• Zgornje meni
• Velika slika
Ta tri elemente definirate znotraj top.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Vaš davčni svetovalec</h1> </div> <div class="topmenu"> Zgornji meni </div> <div class="header-img"> </div> </div>
To je osnovna struktura glave strani. Tudi to bo seveda oblikovano s CSS.
.header {
width: 980px;
float: left;
}
.header-top {
width: 980px;
height: 87px;
float: left;
}
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
.header-img {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 980px;
height: 213px;
float: left;
}
Sintaksa vsebuje dve "posebnosti". Najprej si oglejte vsebino razreda topmenu. Tukaj opazimo dve navedbi o ozadju.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Vključena je enopiksna grafika menue.jpg. Ta prikazuje znani barvni prehod v zgornjem meniju. Z določitvijo background-repeat: repeat-x; se slika vodoravno ponavlja tako dolgo, dokler ni element popolnoma zapolnjen.
Razdelitev vsebinskega območja
Nadaljujemo z območjem strani, kjer se v končni fazi prikažejo vsebine. To se zgodi znotraj div-elementa vsebina. To območje je razdeljeno na različne elemente. Najprej obstaja majhna predstavitvena slika in dobrodošli pozdrav.
Pripadajoča sintaksa HTML izgleda tako:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Dobrodošli na naši spletni strani</h1> <p>Sledi besedilo dobrodošlice</p> </div> </div>
To območje je torej prav tako razdeljeno na dva dela. Na levi strani je prikazana slika, na desni strani pa dobrodošel pozdrav. Ključna je pri tem razredu content-image.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Ta razred obdaja sliko in pozdrav. V okviru content-image obstajata spet dve dodatni območji.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Dobrodošli</div>
Če želite namesto takšnega dvodelnega prikaza prikazati le veliko sliko ali kaj drugega, združite ti dve območji v en div-element. Sintaksa CSS za dvodelno različico pa je videti takole:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Rezultat bi se moral sedaj prikazati v brskalniku na naslednji način:
Nadaljujemo s tremi drugimi elementi:
• levim besedilnim poljem,
• desnim besedilnim poljem,
• desnim menijem.
Sintaksa HTML v tem primeru je naslednja:
<div class="predstavitveni"> <div class="levo"> Posoda za besedilo na levi </div> <div class="desno"> Posoda za besedilo na desni </div> </div> </div> <div class="vsebina-desno"> Desni meni </div> </div>
In seveda tudi tukaj CSS-sintaksa:
.predstavitveni {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.levo {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.desno {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.vsebina-desno {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}Na koncu tega vadnika je osnovna struktura naše spletne strani.
To osnovno strukturo je treba sedaj seveda še napolniti z ustrezno vsebino. To se bo zgodilo v naslednjem vadniku.
