Eli oppaan päätarkoituksena ei ole opettaa kuinka sivupohja tehdään vaan yleisesti näytetään kuinka yksinkertaisia DIV:it ovat kun niillä rakennetaan sivupohja. DIV oppaita on monia, joten monet aloittelijatkin varmasti tietävät mitä DIV:it ovat, mutteivat osaa välttämättä soveltaa sitä sivupohjiin. Opas on suunnattu juuri
aloittelijoille, jotka eivät vielä omaa DIVejä. Tämän oppaan jälkeen voin melkein luvata, että kaikki osaavat tehdä DIV:eistä jotain sillä se on yksinkertaisesti vaan niin yksinkertaista. DIVejä kannattaa muokata CSS:llä, joten oppaassa kerrotaan vähän CSS:stäkin. Ja vielä muistutan, että oppaan tarkoitus on kertoa DIV:eistä, joten muut asiat jätetään taka-alalle. Mutta nyt kuitenkin aloitetaan sivupohjan teko.
Aluksi teemme normaalit HTML asiat, joista enemmän löytyy;
<html>
<head>
<title>Yksinkertainen div-opas</title>
</head>
<body>
</body>
</html>
Sitten lisäämme tuohon vielä tarvittavat merkinnät;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> //* Täällä kerrotaan tarkasti --> (internet sivu ) http://www.timovirtanen.com/?p=7#mikadoctype
<html>
<head>
<title>Yksinkertainen div-opas</title>
<link rel="stylesheet" media="screen" type="text/css" href="tyyli.css" /> //* Näin voimme luoda toimivan CSS-tiedoston
</head>
<body>
</body>
</html>
Nyt lisäämme <div> merkinnät niinkuin haluamme. Mahdollistamme yksinkertaisuuden huippuunsa, joten teemme sivupohjaan logon, navin, sisällön ja ala palkin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> //* Täällä kerrotaan tarkasti --> (internet sivu ) http://www.timovirtanen.com/?p=7#mikadoctype
<html>
<head>
<title>Yksinkertainen div-opas</title>
<link rel="stylesheet" media="screen" type="text/css" href="tyyli.css" /> //* Näin voimme luoda toimivan CSS-tiedoston
</head>
<body>
<div id="runko"> //* Runkoon määritellään esimerkiksi leveys (width). Tästäkin enemmän CSS-tiedostossa.
<div id="logo"> //* Nyt merkitsemme logon. Tähän voisi kirjoittaa vaikka tekstiä, mutta nyt käytän kuvia.
</div>
<div id="navi"> //* Navi eli navigaatio. Linkit tulee tähän.
</div>
<div id="sisalto"> //* Sisältö tulee tänne. Venyy vaikka maailman ääriin.
</div>
<div id="ala"> //* Tähän tulee usein Copyrightit
</div>
</div>
</body>
</html>
Nyt on periaatteessa rakennettu eräänlainen "pohja", joten nyt voimme aloittaa CSS osion, mutta muista tallentaa tuo edellinen koodi
.html muotoon.
Tässä on muutamia CSS-oppaita, jos joku ei vielä niistä paljoa tiedä tai haluaa kerrata;
- http://koti.mbnet.fi/~petepe/css1/
- http://www.hemiplace.com/forum/index.php?topic=1126.0
- http://www.hemiplace.com/forum/index.php?topic=1127.0Nyt jatkamme sivupohjaamme menemällä CSS koodiin.
body{ //* body korvaa <body>:n edellisestä koodista
background-color: black;
margin: 0;
padding: 0;
text-align: center;
font: 13px verdana;
}
#runko{ //* tämä on nyt sitten se runko
margin-top: 10px;
text-align: left;
margin-left: auto;
margin-right: auto;
width: 800px;
}
#logo{ //* Logo tulee tähän
height: 120px;
border: 0px solid black;
background: url(logo.jpg);
font: 24px verdana;
color: white;
text-align: center;
padding-top: 40px;
margin-bottom: 0px;
}
#navi{ //* Navi tulee tähän
height: 35px;
border: 0px solid black;
background: url(navi.jpg);
font: 24px design block;
color: black;
text-align: center;
padding-top; 0px;
margin-bottom: 0px;
}
#sisalto{ //* Sisalto tulee tähän.
height: 100%;
border: 0px solid black;
background: url(sisalto.jpg);
font: 15px ariel;
color: black;
text-align: left;
padding-top; 0px;
margin-bottom: 0px;
}
#ala{ //* Alapalkkia voit puolestaan muokata tässä.
height: 35px;
border: 0px solid black;
background: url(navi.jpg);
font: 16px ariel;
color: black;
text-align: center;
padding-top; 0px;
margin-bottom: 0px;
}
a { //* Tästä voit muokata linkkien väriä, fonttia jne.
color: black;
text-decoration: none;
font-family: Carbon block;
}
a:hover {
color: black;
text-decoration:none;
font-family: Carbon block;
}
Nuo CSS-merkinnät, jotka juuri kerroin löytyy CSS-oppaista joita on ympäri internettiä, joten en niistä jaksa enempää tarinoida.
Nyt olemme päässeet oppaan loppuun ja oma tekeleeni on tässä (kuvana);
Nyt kun osaat luultavasti DIV:ien yksinkertaisen käytön niin voit alkaa opetella vähän vaativampia sivupohjia;
