Joten aloitetaan valikosta, joka näkyy yläikkunassa.
Olette jo tehneet paljon valmistelutyötä tätä valikkoa varten. Muistatte varmasti hienon väriliukuman, joka tallennettiin yhden pikselin grafiikaksi. Juuri sitä käytetään nyt. Ennen sitä on kuitenkin luotava oikea HTML-rakenne valikkoalueelle. Se voisi näyttää tältä:
<div class="header"> <div class="header-top"> <h1>Verotoimistosi</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Etusivu</a></li> <li><a href="#">Tietoa meistä</a></li> <li><a href="#">Toimintatapamme</a></li> <li><a href="#">Yhteystiedot</a></li> <li><a href="#">Tietoa</a></li> </ul> </div> <div class="header-img"> </div> </div>
Taustan muotoiluun lisätään yhden pikselin grafiikka ja se toistetaan pystysuunnassa niin monta kertaa, että koko elementti täyttyy.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Sitten valikkoa voidaan muotoilla. Tässä ei ole periaatteessa mitään erityistä huomioitavaa. Tällaisissa valikoissa tärkeitä ovat yleensä seuraavat näkökohdat:
• Poista luettelon pisteet käyttämällä list-style-type: none;.
• Varmista, että luettelon kohdat näytetään rinnakkain.
Olen tällä hetkellä töissä – kuten tiedätte jo – väriliukumalla, joka toteutetaan grafiikan avulla. Nykyään valikoille on tietysti monia muita vaihtoehtoja. Esimerkiksi JavaScript-kehystyökalut kuten jQuery. Kaikkien näiden mahdollisuuksien esittely tässä yhteydessä olisi luonnollisesti liian laaja. On kuitenkin jo olemassa monia verkkopohjaisia generaattoreita, joiden avulla valikoiden luominen on helppoa muutamalla klikkauksella. Yksi näistä – ilman arviointia, onko se nyt paras laatuaan – löytyy osoitteesta http://www.cssmenubuilder.com/.
Olen kuitenkin valinnut seuraavan vaihtoehdon:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Tärkeintä on itse asiassa vain hover-tila. Kun tämä tapahtuu, näytetään toinen taustakuva.
Oikea valikko
Sivustolla ei ole pelkästään ylävalikkoa, myös oikean ikkunan alueella näkyy valikko.
Tämä valikko kuuluu div-osaan, jolla on luokka content-right. Sivuston kehitysvaiheessa olen laittanut sinne vain dummy-sisältöä.
<div class="content-right"> <h2>Päävalikko</h2> <ul> <li><a href="#">Linkki 1</a></li> <li><a href="#">Linkki 2</a></li> <li><a href="#">Linkki 3</a></li> <li><a href="#">Linkki 4</a></li> <li><a href="#">Linkki 5</a></li> <li><a href="#">Linkki 6</a></li> <li><a href="#">Linkki 7</a></li> <li><a href="#">Linkki 8</a></li> <li><a href="#">Linkki 9</a></li> <li><a href="#">Linkki 10</a></li> </ul>
Alue sijoitetaan aluksi oikeaan paikkaan ja haluttuun kokoon.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Jatketaan varsinaisen valikon määrittelyä. Tällä kertaa merkinnät ovat kuitenkin peräkkäin. Joten sinun on varmistettava, että luettelon pisteet piilotetaan. Muu valikon muotoilu jää lopulta teidän päätettäväksenne.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}Selaimessa pitäisi näkyä seuraavanlainen kuva:
Alaosaan valikko
Verkkosivuston alaosassa on toinen valikko. Täällä PSD-Tutorials.de-sivustolla käytetään myös tällaista valikkoa tarjotakseen linkkejä yleisiin tietoihin.
Sivustollamme on myös tekijänoikeusmerkintä. Molemmat asiat ovat tyypillisiä verkkosivustoille. Aluksi HTML-rakenne.
<div class="bottom"> <ul> <li><a href="index.html">Koti</a></li> <li><a href="#">Meistä</a></li> <li><a href="#">Uutiset</a></li> <li><a href="#">Hallintakeskus</a></li> <li><a href="#">Yhteystiedot</a></li> <li><a href="#">Tekijänoikeusilmoitus</a></li> <li><a href="#">Sivukartta</a></li> </ul> <p>© Tekijänoikeus 2014 by PSD-Tutorials.de</p> </div>
Se on yksinkertainen ul-lista. Jokainen listakohta sisältää valikon kohteen. ul-listan alapuolella on p-elementti, jossa tekijänoikeusilmoitus sijaitsee. Nyt puuttuu tietysti taas CSS-syntaksi.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Miten muokkaatte alaosaan jää, jää lopulta teidän päätettäväksenne. Käytän taas väriasteikkoa. Voit kuitenkin esimerkiksi käyttää yksinkertaista taustaväriä tai jopa CSS3-syntaksia. Graafisen version tapauksessa on kuitenkin ratkaisevaa, että toistaminen estetään background-repeat: no-repeat; avulla.
Katsotaan ensin tulosta:
Mikä tässä erottuu, ovat valkoiset viivat, jotka näytetään jokaisen valikon kohdan vieressä. Nämä määritellään erilaisten border-left-antojen avulla, jotka lopulta tarkoittavat, että määritykset viittaavat kuhunkin kohteen vasempaan reunaan.
Kokonaisuudessaan alavalikon syntaksi näyttää tältä:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Erikoisuus verrattuna ylävalikkoon on täällä. Itse asiassa hover-tilassa ei myöskään ladata lisägrafiikkaa. Kävijöille kuitenkin kerrotaan, että linkkiä koskettaessa ne alleviivataan, jos hover-tapahtuma tapahtuu.
Tämän oppaan lopussa perussivuston perustoimet on suoritettu. Mitä vielä puuttuu, on sivuston kaunistaminen. Lisätietoa siitä sitten seuraavissa oppaissa.
