En siksi avataan muistio tai muu HTML-ohjelma editorien toiminnasata en ole varma, mutta voithan kokeilla.
Ensin tee kuvat joita käytät taustoina
sitten laitetaan perus HTML-runko
<html>
<head>
<title>Sivusinimi</title>
</head>
<body>
Sisältö tulee tähän
</body>
</html>
Sitten tehdään taulukko, apua taulokon tekoon täältä
Nyt teen aika erikoisen taulukon, mutta sitä voi soveltaa
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="logo" height="100" colspan="5">
</td>
</tr>
<tr>
<td height="40" width="75">
</td>
<td class="valikko" height="40" width="150">
</td>
<td class="valikko" height="40" width="150">
</td>
<td class="valikko" height="40" width="150">
</td>
<td height="40" width="75">
</td>
</tr>
<tr>
<td class="yla" height="20" colspan="5">
</td>
</tr>
<tr>
<td class="sisalto" height="300" colspan="5" valign="top">
</td>
</tr>
<tr>
<td class="ala" height="20" colspan="5">
</td>
</tr>
</table>
Taulukko tehdään body tagien väliin, tässä selitykset mitä mitkin määräävät
height=solun korkeus
width=solun leveys
colspan=monen solun leveinen solu on
class=ilmoittaa solun "luokan" eli mikä class niin sen tausta mikä tyyleissä on määritetty
Sitten määritetään solujen taustakuvat, laita koodi title tagien alle head tagien valiin
<style type="text/css">
BODY {
}
A:link { text-decoration: none; color: #000000;}
A:visited { text-decoration: none; color: #000000;}
A:active { text-decoration: none; inderline: #000000;}
A:hover { text-decoration: underline; color: #000000;}
.teksti {
font-family: verdana;
color: #OOOOOO;
font-size: 16px;
}
.logo {
background-image: url("logo4.jpg");
text-align: center;
height: 150px;
font-family: verdana;
color: white;
font-size: 30px;
}
.valikko {
background-image: url("linkkitausta2.jpg");
text-align: center;
height: 40px;
}
.yla {
background-image: url("ylapalkki2.jpg");
text-align: center;
height: 17px;
font-family: verdana;
color: white;
font-size: 30px;
}
.sisalto {
background-image: url("tekstialue4.jpg");
padding-top: 5px;
padding-bottom: 5px;
padding-left: 25px;
padding-right: 25px;
}
.ala {
background-image: url("Alapalkki2.jpg");
text-align: center;
height: 20px;
}
</style>
Selitykset
background-image: url("kuvannimi.jpg");=solun taustakuva
link=linkin väri
visited=käytetyn linkin väri
active=linkkin väri kun kursori on sen päällä
hover=pitää olla sama kuin active muuten värit ei vaihdu(niin mä luulisin)
.nimi {=määrittää luokan nimen jota tarvitaan solujen luokkien määrittämisessä
nyt on taulukko ja tyylit kunnossa joten sitten vain laittamaan sisältöä
Tässä oma tekeleeni on juuri nyt pois käytöstä, epähuomiossa poistin sen serveriltä ja koneelta, väännän joku päivä uuden
