Most elkészítünk egy oldalt, egy alap sablon mintával, mely
a későbbiekben könnyen újra hasznosítható lesz. Ahogy ígértem kéthasábos
elrendezésű, dives kialakítású lesz. Régebben táblázattal alakították ki az
oldalakat, de ez már elavult technika.
Először a html kódot írjuk meg
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<meta
name="description" content="Kéthasábos minta oldal
elkészítése">
<meta
name="keywords" content="weblap, minta, kéthasábos">
<link
rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<header>
</header>
<div
class="tarto">
<div
class="bal">
</div>
<div
class="jobb">
</div>
</div>
<footer>
</footer>
</body>
</html>
Deklaráljuk a DOCTYPE-ot, majd megadjuk a meta tagokat a
head részben és link tagben hivatkozunk a külső css-re, melyben a tényleges
formázást fogjuk elvégezni.
Ezután a body részében csinálunk egy fejrészt, melyet html5 szabvány szerint
headerként adunk meg. Következik egy tartó div, mely a két oszlopot magába
foglalja, ezt most a könnyebben érthetőség végett neveztem el jobb és bal-nak.
Class-ként adjuk meg, akkor a css-ben ponttal hivatkozunk rá. Megadhatjuk
id-ként is ekkor # jelet kell elé tenni. A különbség a kettő között, hogy az id
által megadott div egyszer szerepelhet az oldalon, de class-ra többször is
hivatkozhatunk.
A css-be a következő részletet írjuk:
body{background:#BBEE99;}
header{
width:1024px;
margin:0
auto;
height:150px;
background:
#b4e391;
}
.tarto{
width:1024px;
margin:0
auto;
}
.bal{
width:200px;
float:left;
min-height:100%;
background:#66FF00;
.jobb{
width:804px;
float:left;
background:#ffffff;
}
footer{
clear:both;
width:1024px;
margin:0
auto;
height:50px;
background:
#ffffff;
}
Minden div-nek fontos, hogy méretet adjunk. Jelen esetben
1024px szélességű weboldalt készítünk, melyet középre igazítunk margin: 0
auto-val. A height adja meg a magasságot, a background pedig a háttérszínt.
A bal és jobb classt balra lebegtetjük (float:left;), így ha
a méretük alapján elférnek egymás mellett, akkor úgy fog kinézni, ahogy
akartuk.
Ha már egy alap oldalt csinálunk tegyünk bele menüt és
tartalmat. A fejrészbe kerülhet logó, szlogen, vagy akár megosztó gombok is.
Most csak egy címet írunk ki rá h1-es tagek között és hogy ne legyen olyan
egyhangú, a háttérnek CSS3-mal színátmenetet adunk. Ezt már csak az explorer
régebbi változata nem támogatja, éppen ezért kell megadni egy alap színt is.
Így nem kell képként beilleszteni színátmenetes
részeket és az oldal gyorsabban megjelenik majd.
HTML kód:
<header>
<h1>Első
weboldalam</h1>
</header>
CSS formázás:
header{
width:1024px;
margin:0
auto;
height:150px;
background:
#b4e391; /* Old browsers */
background:
-moz-linear-gradient(top, #b4e391 0%,
#61c419 50%, #ffffff 100%); /* FF3.6+ */
background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391),
color-stop(50%,#61c419), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background:
-webkit-linear-gradient(top, #b4e391
0%,#61c419 50%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background:
-o-linear-gradient(top, #b4e391
0%,#61c419 50%,#ffffff 100%); /* Opera 11.10+ */
background:
-ms-linear-gradient(top, #b4e391
0%,#61c419 50%,#ffffff 100%); /* IE10+ */
background:
linear-gradient(to bottom, #b4e391
0%,#61c419 50%,#ffffff 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391',
endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
header h1{
padding:40px;
}
A háttér megadásánál minden sornál láthatod, hogy mely
böngészőre lesz hatással, azért kell ennyi féle képpen megadni.
A h1-nek adunk egy padding-ot, mely 40pixellel le és betolja
a szöveget.
Most a bal oldal lesz a menü helye, a jobb oldal a
tartalomé. A menüszerkezetet listaként definiáljuk és <a href=””></a>
tagek között adjuk meg az oldalak linkjét.
HTML kód:
<div class="bal">
<ul>
<li><a
href="index.html">Főoldal</a></li>
<li><a
href="bemutatkozas.html">Bemutatkozás</a></li>
<li><a
href="esemenyek.html">Események</a></li>
<li><a
href="Kapcsolat.html">Kapcsolat</a></li>
</ul>
</div>
CSS formázás:
.bal{
width:200px;
float:left;
min-height:100%;
background:#66FF00;
}
.bal ul{
list-style-type:none;
}
.bal li{
width:200px;
padding:10px;
height:20px;
}
.bal li a{
color:#004400;
display:block;
padding:5px
0 5px 20px;
font-size:18px;
}
.bal li a:hover{
background-color:#004400;
color:#66FF00;
}
A listának nem lesz lista jelölője, ezért állítjuk be a
list-style-type:none-t. A linknél tudjuk megadni a szöveg színét, a hoverrel
adjuk meg azt, hogy hogyan nézzen ki, ha az egér fölötte van. Adhatunk a linknek
class-t, mellyel jelölhetjük, hogy épp melyik link az aktív, hogy a látogató
számára egyértelmű legyen, hol van.
A jobb oldal egy egyszerű szöveget tartalmaz; a címet <h1></h1>
között adjuk meg, a tartalmat pedig <p></p> között, jelen esetben
egyszerű ipsum szöveget, mely mindig jó szolgálatot tesz, amikor azt akarjuk
tesztelni, hogyan fog kinézni az oldal egy hosszabb szöveggel. Ebbe teszünk egy
képet is a példa kedvéért. A <br /> a sortöréseket jelöli.
HTML kód:
<div class="jobb">
<h1>Főoldal</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc sollicitudin consequat ante, nec dictum ligula tempor sit amet. Fusce
sagittis lacinia ullamcorper. Donec justo libero, pulvinar in vehicula non,
euismod sodales lorem. Mauris erat lectus, fermentum at venenatis in, eleifend
in libero. Mauris convallis malesuada odio at consequat. Duis non leo quis
justo tempus volutpat sit amet sit amet purus. Suspendisse potenti. Sed
lobortis tortor ut ante blandit eget laoreet lacus bibendum. Aenean sollicitudin
commodo lorem in lacinia. Nunc bibendum feugiat bibendum. Aliquam adipiscing
neque et nisi pretium scelerisque. Nulla eleifend vehicula sodales. Donec erat
arcu, congue condimentum semper quis, convallis ut leo.<br /><br />
Pellentesque fringilla commodo tortor, ut dignissim diam
feugiat at. Fusce ornare sem risus. Duis vestibulum lobortis scelerisque.
Mauris at est id purus malesuada porta. In pulvinar iaculis arcu, non faucibus
tellus tempus non. Praesent pellentesque orci at ante sodales consequat. Suspendisse
quis leo et metus condimentum aliquam nec eget libero. Quisque aliquam, justo
et vehicula sagittis, ipsum libero posuere diam, vitae mattis libero libero eu
risus.
<br /><br />
<img src="rozsa.jpg" alt="rozsa"
title="rozsa" width="150">
Nam a nibh id felis commodo dignissim vel non velit. Nunc
viverra adipiscing sollicitudin. Phasellus vehicula egestas ipsum, a tristique
orci fermentum sed. Donec dictum congue leo, vel scelerisque dolor volutpat a.
Suspendisse consectetur tempor faucibus. Mauris dapibus, purus et congue
tempus, lorem nisl volutpat eros, eu pulvinar nunc magna sit amet diam.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Maecenas in magna nisl. Suspendisse vitae lorem magna, id
elementum magna.
</p>
</div>
CSS formázás:
.jobb{
width:804px;
float:left;
background:#ffffff;
padding:10px;
}
.jobb h1{
margin:10px
0;
}
.jobb p{
text-align:justify;
line-height:120%;
}
.jobb img{
float:right;
padding:5px;
}
A többi oldal kialakítása ugyanígy néz ki. Ha a menü <a
href=…> tagjában megadott néven mented el az aloldalakat, akkor kész az első
statikus oldalad. A kinézeten könnyedén tudsz javítani, jelen esetben nem
törekedtem a szép design kialakítására.
