Egyoszlopos elrendezés - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

Egyoszlopos elrendezés

A weboldalunk fő szerkezeti elemei:

Fejléc: Rendszerint az oldal vagy cég logóját és nevét tartalmazza. Esetleg reklámot. Az oldal bal felső sarkának kiemelt szerepe van, hiszen a felhasználók rendszerint ott kezdik az oldal olvasását.
Menüsor: A legfontosabb navigációs elemek (menüpontok) gyűjtőhelye.
Tartalom: A konkrét oldalon közreadott egyedi tartalom.
Lábléc: Céginfó, jogi információk, az oldal készítőjének linkje a leggyakoribb elemei.

A fenti elemeket egy tároló elemben helyezzük el. A tároló elem szélességének és magasságának megadásával meghatározzuk az oldal megjelenítésére használt terület méretét. A fő szerkezeti elemeknél, így már elegendő csupán a magasságot meghatározni.

A style jellemzőben használható stílusdefiníciókról a CSS3 fejezetben részletesen lesz szó.

Példa:

Forráskód


<body>
 <div id="tarolo" style="height:400px;width:400px;">
   <div id="fejlec" style="background-color:#98FB98;height:50px;"> 
     Webáruház neve és lógója 
   </div>
   <div id="menu" style="background-color:#6B8E23;height:30px;text-align:center;"> 
     Termkek | Vásárlás | Kapcsolatok 
   </div>
   <div id="tartalom" style="background-color:#98FB98;height:260px;"> 
     Az oldal tarlama
   </div>
   <div id="lablec" style="background-color:#6B8E23;height:30px;text-align:center;"> 
     Céginfó, jogi információk
   </div>
 </div>
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_div2.html