Először is az oldal felállításához szükséges előkészületeket kell megtennetek. Készítsetek meg a kívánt könyvtárszerkezetet. Ez például így nézhet ki:
steuerberater
---images
---css
Ez egy teljesen tipikus könyvtárszerkezet. A HTML oldalakat a főszintű mappába kell helyezni. A CSS fájlok a css- könyvtárba kerülnek, míg az összes képet az images- könyvtárba mentitek. Tehát a images- könyvtárba azt a képeket helyezzétek el, amelyeket előzőleg kivágtatok a tervezésből.
Az alapváz felállítása
Hozzatok létre egy új CSS fájlt a css- könyvtárban. Ezt követően a HTML fájlban be kell illesztenetek. (A példámban a HTML fájl neve index.html lesz). Ez a fájl innentől kezdve a következő tutoriálisok központi pontja lesz.
Először is illesszétek be az ismert HTML alapvázatot az index.html fájlba.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Az adótanácsadód</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Ügyeljetek arra is, hogy az stíluslap fájlt is beillesztitek. Most már kezdődhet a munka.
A külső elem egy div-konténer.
<div class="main-container"> </div>
Ezt a konténert azonnal formázhatjátok CSS szintaxis segítségével is.
.main-container {
width: 100%;
float: left;
}
A fő konténer 100%-os szélességet kap és balra floatol. Az 100%-os szélesség előnye: például egy színátmenetes háttérképet lehet beilleszteni. Ez a háttér végigfut a teljes képernyő szélességén.
Létrehozok még két további div-elemet a fő konténeren belül.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div>
Ezeket az elemeket szintén formázni kell. Az efektív tartalomterület 1000 képpontra lesz beállítva. Az margin: 0px auto; megadásával az elem vízszintesen középre igazítódik.
.container {
width: 1000px;
margin: 0px auto;
}
Folytatjuk a page elem formázásával.
.page {
width: 1000px;
float: left;
padding: 40px 0px 0px 0px;
}
Ez az elem az oldal efektív tartalomterülete. Ide kerülnek az összes többi elem. Ez az elem szintén 1000 képpontra lesz beállítva. A padding megadása definiálja a belső margókat. Ebben az esetben a felső belső margót 40 képpontra, a többi oldalakat pedig 0 képpontra állítjuk be.
Ezzel már megvalósítottuk az elrendezés grobális struktúráját.
Most az a feladat, hogy ezt a struktúrát tartalmakkal töltitek meg. Első lépésként az oldalt három sorra kell osztani.
• Fejléc
• Tartalom
• Láb
Ehhez három további div-területet kell meghatározni.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Ezeket a három területet természetesen CSS segítségével is formázni kell.
.top {
background-color: #f6f7f7;
width: 980px;
float: left;
padding: 0px 10px 10px 10px;
}
.content {
width: 980px;
float: left;
padding-top: 8px;
}
.bottom {
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Az egyes területeket most tovább formázhatjátok.
Először foglalkozzunk az oldal fejrészének formázásával. Ez ismét több elem összességéből áll össze:
• Logó/Cím
• Felső menü
• Nagy kép
Ezt a három elemet a top-on belül kell meghatározni.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Az adótanácsadód</h1> </div> <div class="topmenu"> A felső menü </div> <div class="header-img"> </div> </div>
Ez az oldal fejrészének alapstruktúrája. Ez ismét természetesen CSS segítségével lesz formázva.
.header {
width: 980px;
float: left;
}
.header-top {
width: 980px;
height: 87px;
float: left;
}
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
.header-img {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 980px;
height: 213px;
float: left;
}
A szintaxis két "különlegességet" tartalmaz. Először is nézzük meg a topmenu osztály tartalmát. Itt két háttérképre vonatkozó utasítás tűnik fel.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Az egy pixel széles menue.jpg kép van beillesztve. Ez az ismert felső menü színátmenetét mutatja be. A background-repeat: repeat-x; utasítással a kép vízszintesen ismétlődni fog, amíg az elem teljesen ki nem tölthető.
A tartalomterület felosztása
Folytatjuk az oldal területével, ahol végül a tartalmak megjelennek. Ez a div elemen belül a content. Ez a terület különböző elemekre oszlik. Először is van egy kis bemutató kép, valamint üdvözlő üzenet.
Ehhez tartozó HTML szintaxis a következő:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Welcome to our website</h1> <p>This is a welcoming text</p> </div> </div>
Ez a terület szintén két részre van felosztva. Bal oldalon megjelenik a kép, jobb oldalon pedig az üdvözlő üzenet. Fontos elem itt az content-image osztály.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Ez az osztály tartalmazza a képet és az üdvözlő üzenetet. Az content-image belül újabb két rész van.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Welcome</div>
Ha ezt a kétrészes felosztást egy nagy képpel vagy valami mással szeretnétek helyettesíteni, akkor ezeket a részeket egy div elembe kell összefogni. A két elemes változat CSS szintaxisa pedig így néz ki:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}A végeredménynek a böngészőben így kell megjelennie:
Folytatjuk három másik elemmel:
• egy baloldali szövegdobozzal,
• egy jobb oldali szövegdobozzal,
• a jobboldali menüvel.
A HTML szintaxis ebben az esetben a következő:
<div class="teaser"> <div class="left"> Tartalom bal oldalt </div> <div class="right"> Tartalom jobb oldalt </div> </div> </div> <div class="content-right"> A jobboldali menü </div> </div>
Természetesen itt is szerepel a CSS szintaxis:
.teaser {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.left {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.right {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}Ennek a bemutató anyagnak az alapstruktúrája a weboldalunké.
Ezt az alapstruktúrát természetesen még meg kell tölteni a megfelelő tartalmakkal. Ezt a következő bemutató fogja szemléltetni.
