Začnimo torej z menijem, ki se prikaže v zgornjem oknu.
Za ta meni ste že naredili precej priprav. Zagotovo se spomnite lepega preliva barv, ki je bil shranjen kot grafika s eno piko. Prav ta zdaj pride v poštev. Pred tem pa mora biti ustvarjena ustrezna HTML-struktura za območje menija. To bi lahko izgledalo takole:
<div class="header"> <div class="header-top"> <h1>Vaš davčni svetovalec</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Domov</a></li> <li><a href="#">O nas</a></li> <li><a href="#">Kako delamo</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impresum</a></li> </ul> </div> <div class="header-img"> </div> </div>
Za oblikovanje ozadja je vključena grafika s eno piko, ki se ponavlja navpično, dokler ni celoten element izpolnjen.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Nato lahko oblikujemo meni. Načeloma ni posebnosti, ki bi jih bilo treba upoštevati. Pomembni so dejansko vedno samo naslednji vidiki v takih menijih:
• Skrijte oznake seznama s list-style-type: none;.
• Poskrbite, da se vnosi seznama prikažejo en ob drugem.
Tukaj delam - kot že veste - z vrstico prelivanja, ki je izvedena prek grafike. Danes je seveda na voljo še veliko drugih možnosti za menije. Na primer si predstavljajte JavaScript okvire, kot je jQuery. Predstaviti vse te možnosti bi tu seveda presegalo obseg. Obstaja veliko spletnih generatorjev, prek katerih lahko z nekaj kliki ustvarite menije. Enega izmed njih - brez presoje, ali je najboljši svoje vrste - najdete na http://www.cssmenubuilder.com/.
Odločil sem se za naslednjo varianto:
.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;
}
Pomemben je pravzaprav samo stanje pri drsenju. Ko se to zgodi, se prikaže druga ozadnja grafika.
Desni meni
Spletna stran nima samo zgornjega menija, prav tako se prikaže meni v desnem delu okna.
Ta meni spada v div območje s class vsebina-na-desni. Za razvojno fazo strani sem tja včasih vnesel le posebne vsebine.
<div class="vsebina-na-desni"> <h2>Glavni meni</h2> <ul> <li><a href="#">Povezava 1</a></li> <li><a href="#">Povezava 2</a></li> <li><a href="#">Povezava 3</a></li> <li><a href="#">Povezava 4</a></li> <li><a href="#">Povezava 5</a></li> <li><a href="#">Povezava 6</a></li> <li><a href="#">Povezava 7</a></li> <li><a href="#">Povezava 8</a></li> <li><a href="#">Povezava 9</a></li> <li><a href="#">Povezava 10</a></li> </ul>
Območje najprej postavite na ustrezno mesto in v želeni velikosti.
.vsebina-na-desni {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Nadaljujemo z določitvijo dejanskega menija. Tokrat so vnosi postavljeni en pod drugim. Paziti morate samo, da se oznake seznama skrijejo. Preostanek oblikovanja menija je v vaših rokah.
.vsebina-na-desni ul {
list-style-type: none;
}
.vsebina-na-desni ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.vsebina-na-desni ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.vsebina-na-desni ul li a:hover {
color: #0b90d6;
}V brskalniku bi morala biti zdaj videti naslednja slika:
Spodnji meni
V spodnjem delu spletne strani bo še eno meni. Tukaj na portalu PSD-Tutorials.de je takšno meni prav tako uporabljeno za povezave do splošnih informacij.
Na naši spletni strani je tudi napotilo o avtorskih pravicah. Obe stvari sta dejansko precej običajni za spletne strani. Prvič spet HTML-struktura.
<div class="bottom"> <ul> <li><a href="index.html">Domov</a></li> <li><a href="#">O nas</a></li> <li><a href="#">Novice</a></li> <li><a href="#">Pregledno središče</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impresum</a></li> <li><a href="#">Sitemap</a></li> </ul> <p>© Avtorske pravice 2014 by PSD-Tutorials.de</p> </div>
Gre za preprost seznam ul. Vsak vnos seznama vsebuje menijski vnos. Pod ul seznamom je p element, kjer je napotilo o avtorskih pravicah. Kar zmanjka, je seveda CSS sintaksa.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Kako oblikujete spodnji del, je seveda povsem odvisno od vas. Sama uporabljam prehod barv. Lahko pa na primer uporabite enobarvno ozadje ali takoj uporabite CSS3 sintakso. Pri grafični varianti je pomembno, da se ponavljanje prepreči z background-repeat: no-repeat;.
Najprej si oglejmo rezultat:
Kar opazimo tu, so bele črte, ki so prikazane ob posameznih menijskih vnosih. Te so določene z različnimi nastavitvami border-left, kar v bistvu pomeni, da se nastavitve nanašajo na levi rob elementa.
Celotna sintaksa za spodnji meni je potem takšna:
.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;
}
Tu je posebnost v primerjavi z zgornjim menijem. Dejansko v primeru preleta ne naloži dodatne grafike. Da bi obiskovalcem vseeno sporočili, da so z miškinam kazalcem nad povezavo, so posamezne povezave podčrtane, ko se zgodi dogodek preleta.
Na koncu tega vadnika so osnovni koraki do spletne strani opravljeni. Kar manjka sedaj, je polepšanje strani. Več o tem v naslednjih vadnicah.
