Tässä oppaassa kerrotaan/opastetaan, miten teet simppelisti pohjan, käyttäen html:ää ja CSS:ää. Pohjan rakenteen näät kuvasta:
En käyttänyt yhtään kuvaa tämän tekoon. Käytin ainoastaan väri koodeja jotka näet tyylin kohdasta.
Nytten kun tiedät minkälainen on tulossa niin rupeamme kokoamaan koodia seuraavasti.
Ensiksi tee ulkoasulle rakenne:
(tallenna muotoon .html)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sivusi nimi</title>
<link rel="stylesheet" href="tyyli.css" type="text/css">
</head>
<body>
<!--Tähän tulee sisältö-->
<!--Tähän tulee alla oleva koodi-->
</body>
</html>
Sitten lisäämme rakenteen sisään seuraavat asiat.
<table align="center" width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" class="logo">
<!--Logo teksti tähän !-->
<h2><B>Sivusi nimi tänne !</B></h2>
</td>
</tr>
<tr>
<td align="center" class="navi">
<!--Navigaation linkit tähän -->
<a href="#">Linkki</a>
<a href="#">Linkki</a>
<a href="#">Linkki</a>
<a href="#">Linkki</a>
<a href="#">Linkki</a>
<a href="#">Linkki</a>
<a href="#">Linkki</a>
<a href="#">Linkki</a>
</tr>
<tr>
<td class="sisa">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="valikko">
<!--Vasemman puoleiseen, teksti tähän -->
<p>
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum
claritatem. Investigationes demonstraverunt lectores legere me lius quod ii
legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum.
</p>
</td>
<td valign="top" class="sisalto">
<!--Keskelle tekstit tähän, eli sisältö kohtaan -->
<p>
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum
claritatem. Investigationes demonstraverunt lectores legere me lius quod ii
legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus
parum claram, anteposuerit litterarum formas humanitatis per seacula quarta
decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari,
fiant sollemnes in futurum.
</p>
<p>
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum
claritatem. Investigationes demonstraverunt lectores legere me lius quod ii
legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus
parum claram, anteposuerit litterarum formas humanitatis per seacula quarta
decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari,
fiant sollemnes in futurum.
</p>
</td>
</tr>
</table>
<tr>
<td class="alin">
<!--Tekijämerkinnät tänne-->
© Sivun nimi 2004-2006
</td>
</tr>
</table>
Tämän lisäksi jotta saat pohjasta toimivan niin sinun täytyy tehdä CSS tiedosto.
Luo vaikka muistiolla uusi tiedosto laitat alla olevan koodin siihen ja nimeät sen
tyyli.css tiedostoksi
Alla olevasta näät vielä minun koodini jota voi tietenkin muokata haluamaksesi.
body {
background:white; /* määrittää taustavärin */
}
td {
color:#000;
font-family:Arial;
font-size:12px;
}
.logo {
width:700px; /* Logon leveys */
height:100px; /* Logon korkeus */
border:1px solid black; /* Reunaviiva väri */
background:#636363; /* jos haluat kuvan tähän niin laita background-image:url('kuvanosoite'); */
}
.navi {
width:700px;
height:25px;
border:1px solid black;
border-top:0px; /* Ylintä reunaviivaa ei näy */
background:#898989; /* jos haluat kuvan tähän niin laita background-image:url('kuvanosoite'); */
}
.sisa {
width:750x;
border:1px solid black;
border-top:0px;
}
.valikko {
background-color:white;
padding:4px; /* Kuinka paljon reunoista teksti on */
width:150px;
border:0px;
}
.sisalto {
background-color:white;
padding:4px;
width:600px;
border-left:1px solid black;
}
.alin {
padding:2px;
background-color:#f9f9f9;
width:750px;
height:30px;
border:1px solid black;
border-top:0px;
color:black;
}
a {
color:#464646; /* Linkin väri */
text-decoration: underline; /* jos haluat että linkeissä ei näy alleviivausta niin laita 'underline' kohtaan "none" */
}
a:hover { /* Linkin hover-tehosteen väri */
color:#000000;
text-decoration: none ;
}
Ja näin sinulla pitäisi olla valmis sivupohja, jota voit vaikka käyttää omilla sivuillasi ulkoasuna.
Täältä vielä minun lopputulokseni:
http://www.hemiplace.com/oppaat/sivupohja_opas/Pieniä selvityksiä:<table> ja </table> = Taulukko alkaa ja loppuu
<tr> ja </tr> = Uusi rivi alkaa ja loppuu
<td> ja </td> = Rivi alkaa ja päättyy
width="arvo" = Leveys esim. 600px tai 60%
cellpadding="arvo" = Solun tekstin väli reunaviivaan
cellspacing="arvo" = Solujen ja rivien väli
align="arvo" = Taulukon sijainti vaakatasossa. Mahdollisia arvoja mm. left,right,center
valign="arvo" = Tekstin sijainti pystytasossa. Mahdollisia arvoja mm."top,middle,bottom"
class="nimi" = Nimetään osa jota css:ään laitettavat arvot säätävät.
<!-- jotaki--> = Merkitätään osia koodista. Ei näy sivuilla.
