Ulkoasujen tekeminen, Opas 2
Tässä toisessa oppaassa opettelemme tekemään ulkoasun, jonka rakenne näyttää tältä:
Ulkoasussa on vasemmalla puolella navigaatio, johon tulee linkit ja voihan siihen laittaa muutakin, jos haluaa. Oikealla on sitten logo, sisältö alue ja copyright osa.
Aloitetaan siis koodamaan. Koska en jaksa tähän selostaa html-sivun runkoa, niin meneppäs tänne ja katso mitä pitää ensin tehdä.
Koska koodaamme pohjan käyttäen mahdollisimman paljon css:ää ja käytämme siihen ulkoista css tiedostoa (tässä tapauksessa css tiedoston nimi on styles.), tulee koodiin lisätä pätkä, joka hakee tyylimääritykset. Lisää siis <title> -tagin jälkeen seuraava:
<link href="styles.css" type="text/css" rel="stylesheet" title="" media="screen">
Nyt lisäämme yhteensä seitsemän (7) div -elementtiä. Neljä elementtiä, joihin tulee materiaalia ja kolme elementtiä huijataksemme selaimia, jotta ulkoasu näyttäisi siltä miltä pitää.
<div id="navigaatiokehys"> <div id="navigaatio"></div> </div> <div id="kehys"> <div id="logo">Foxytin | ulkoasun tekeminen</div> <div id="sisaltokehys"> <div id="sisalto"></div> </div> <div id="copyright"></div> </div>'
Nyt koodin pitäisi näyttää kutakuinkin tältä:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"> <link href="styles.css" type="text/css" rel="stylesheet" title="" media="screen"> <head> <body> <div id="navigaatiokehys"> <div id="navigaatio"></div> </div> <div id="kehys"> <div id="logo">Foxytin | ulkoasun tekeminen</div> <div id="sisaltokehys"> <div id="sisalto"></div> </div> <div id="copyright"></div> </div> </body> </html>
Tarkoituksemme on siis luoda vasemmalle navigaatiokehys, joka huijaa selaimia. Sen sisään laitamme navigaatio elementin, johon tulee linkit. Oikealle luomme kehyksen, joka kanssa huijaa selaimia. Sinne tulee sitten logo, sisältö ja copyright kohdat. Luomme myös sinne sisältokehyksen. Sekin huijaa selaimia, niin saamme sisällön näyttämään oikein.
Nyt voimme tehdä css tiedoston. Voit tehdä sen esimerkiksi Windowsin muistiolla (notepad). Tee ensin uusi tiedosto ja tallenna se nimellä styles. Muistaa laittaa nimen perään .css, jotta siitä tulee css tiedosto. Toki tiedoston muutos onnistuu jälkeenpäinkin, mutta tehdään nyt helpommalla tavalla. Nyt kun meillä on css tiedosto, niin aletaampas tekemään sinne määrityksiä.
Tässä teemme div -elementeille ja linkeille määritykset.
A:link{
color:#000000;
text-decoration:underline;
font-size: 80%;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight:bold;}
A:visited{
color:#000000;
text-decoration:underline;
font-size: 80%; font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight:normal;}
A:active{
color:#000000;
text-decoration:underline;
font-size: 80%;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight:normal;}
A:hover{
color:#000000;
text-decoration:none;
font-size: 80%;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight:normal;}
#kehys {
width:400px;
background-color:#ffffff;
border-style:solid;
border-width:0px;
border-color:#646464;
font-family:'Lucida Grande', Arial, Verdana;
font-size:80%;
font-weight:normal;
color: #000000;
float:right;
}
#navigaatiokehys {
width:130px;
background-color:#ffffff;
border-style:solid;
border-width:0px;
border-color:#646464;
text-align:center;
vertical-align:top;
float:left;
padding-top:100px;
}
#navigaatio {
width:130px;
background-color:#cccccc;
border-style:solid;
border-width:1px;
border-color:#646464;
font-family:'Lucida Grande', Arial, Verdana;
font-size:12px;
font-weight:normal;
color: #000000;
}
#logo {
width:400px;
height:100px;
background-color:#b4b4b4;
border-style:solid;
border-width:1px;
border-color:#646464;
font-family:'Lucida Grande', Arial, Verdana;
font-size:20px;
font-weight:normal;
color: #000000;
}
#sisaltokehys {
width:400px;
background-color:#e5e5e5;
border-style:solid;
border-width:1px;
border-color:#646464;
text-align:left;
vertical-align:top;
}
#sisalto {
font-family:'Lucida Grande', Arial, Verdana;
font-size:12px;
font-weight:normal;
color: #000000;
text-align:left;
padding:5px;
}
#copyright {
width:400px;
height:20px;
background-color:#cccccc;
border-style:solid;
border-width:1px;
border-color:#646464;
font-family:'Lucida Grande', Arial, Verdana;
font-size:12px;
font-weight:normal;
color: #000000;
text-align:center;
}
Jos et tiedä mitä ylläolevat määritykset merkitsevät, mene tänne ja tutki CSS osiota.
Lisätäämpäs nyt vähän tekstiä, jotta saamme paremman kuvan miltä ulkoasu näyttää. Eli laitamme Logoon sivun nimen, muutaman linkin ja vähän tekstiä sisältöön, sekä copyright kohtaan tekijänoikeus merkinnät.
Logon div -elementtiin:
Foxytin - ulkoasun tekeminen
Navigaation div -elementtiin:
<a href="linkki1.html">Linkki1</a><br /> <a href="linkki2.html">Linkki2</a><br /> <a href="linkki3.html">Linkki3</a><br /> <a href="linkki4.html">Linkki4</a>
Sisällön div -elementtiin:
Tähän tekstiä... Tähän tekstiä... Tähän tekstiä... Tähän tekstiä... Tähän tekstiä... Tähän tekstiä...<br> Tähän tekstiä... Tähän tekstiä... Tähän tekstiä... Tähän tekstiä... Tähän tekstiä... Tähän tekstiä...
Ja copyright div -elementtiin:
Copyright © Foxytin | 2006
Nyt tämä yksinkertainen ulkaosu on valmis. Tässä malli valmiista ulkoasusta ja tässä linkki, ulkoasun kuvaan, joka on tehty oppaan mukaan.
