Za konec bomo izdelali spletno stran, ki bo sestavljena iz treh podstrani. Spletna stran bo na vrhu imela menu, od kjer boste lahko šli na izbrano podstran. Ravno tako kot v prejšnjem poglavju bomo imeli ločene HTML in CSS datoteke. V tem primeru bomo imeli več HTML datotek; za vsako podstran svojo.
<!DOCTYPE html>
<html lang = "sl">
<head>
<meta charset = "UTF-8">
<title>Moja spletna stran</title>
<link rel = "stylesheet"
type = "text/css"
href = "stil.css" />
</head>
<body>
<h1>Moja spletna stran</h1>
<div id = "menu">
<ul>
<li><a href = "index.html">Domov</a></li>
<li><a href = "podstran1.html">Podstran1</a></li>
<li><a href = "podstran2.html">Podstran2</a></li>
<li><a href = "podstran3.html">Podstran3</a></li>
</ul>
</div>
<div id = "osrednja">
<br>
<p>Besedilo 1 1 1 1 1 1 1</p>
</div>
</body>
</html>
Pretipkajte html kodo in jo posnemite pod ime index.html, nato pa posnemite v isto mapo isto kodo še pod imeni podstran1.html, podstran2.html in podstran3.html. V obeh podstraneh popravite naslov <h1> in besedilo po svoji želji.
Bodite pozorni na naslednje:
1. Opazili ste da je HTML koda zelo preprosta. Osrednji del kode je sestavljen iz dveh sklopov. Prvi div “menu” ureja menu, drug div “osrednji” pa vsebino konkretne podstrani.
2. Div “menu” uporablja ukaz <ul> za neoštevilčen seznam in znotraj njega ukaz <li>
za posamezno točko. Med ukazoma <li> in </li> je ukaz s katerim ustvarimo spletno povezavo; v našem primeru na drugo podstran naše spletne strani.
Zahtevnejši del spletne strani je CSS koda. Pretipkajte jo in posnemite pod imenom stil.css.
#menu ul {
margin-left: -2.5em;
}
#menu li {
list-style-type: none;
width: 7em;
text-align: center;
float: left;
}
#menu a {
text-decoration: none;
color: black;
display: block;
background-color: #EEEEFF;
box-shadow: 5px 5px 5px gray;
margin-bottom: 2px;
margin-right: 2px;
border-radius: 5px;
border: 3px outset #EEEEFF;
}
#menu a:hover {
background-color: #DDDDEE;
box-shadow: 3px 3px 3px gray;
border: none;
}
#osrednja {
clear: both;
}
Bodite pozoren na naslednje:
1. za ponovitev kako določite stil spletnih povezav ponovno preberite lekcijo 32
2. oznaka “#menu ul” ureja neoštevilčene sezname <ul> v okviru id “menu”
3. list-style-type: none; odstrani pike pri neoštevilčenih seznamih
4. float-left; elemente postavimo eden poleg drugega vodoravno
5. width: 7em; določi dolžino vsakega posameznega gumba
6. margin – left: -2.5em; ko uporabljamo neoštevilčene sezname se le ti odmaknejo od roba za 2.5em; s tem ukazom odmik odstranimo
7. Potrebno je spremeniti izgled spletne povezave (#menu a {):
1. text-decoration: none; odstrani črto pri spletni povezavi
2. box-shadow: 5px 5px 5 px gray; vsaki povezavi da izgled 3D gumba
3. display: block; dober trik, ki povzroči, da cel gumb postane povezava in ne samo besedilo
4. margin-right: 2px; na desno ustvari majhen rob, da se gumbi med seboj ločijo
5. border-radius: 5px; zaokroži vogale gumba in poudari 3D učinek gumbov.
6. ustvari vtis, da se pritisnili gumb:
#menu a:hover {
background-color: #DDDDEE;
box-shadow: 3px 3px 3px gray;
border: none;
7. clear: both; nobenega drugega elementa ne bo na levo in desno;
8. <br> break line; ukaz za prelom vrstice
Za vajo poizkušaj spreminjati ali dopolnjevati kodo in nato z spletnim brskalnikom poglej spremembe.