Weblapprogramozás

- Oktatási segédanyag középiskolák számára

Tartalom elrendezése stíluslappal

A tanagyag utolsó fejezetében elkészítünk egy olyan weblapot, amely több fájlból áll, és ahol tartalom megjelenése stíluslapokkal van elrendezve.

Ahhoz, hogy a különbségek jól láthatók legyenek, azt a példát választom, amelyet már eddig is kétféle módon megvalósítottunk (táblázatokkal és keretekkel): Álmos Gedeon oldalát! Innentől ez példaként és vázlatként szolgálhat hasonló elrendezésű oldalak készítésénél.

Az oldal szerkezetének elkészítése rétegekkel

Ha az oldal szerkezetét is stíluslapokkal szeretnénk meghatározni, akkor ún. rétegeket (layer) kell használnunk. Egy réteg tulajdonképpen a HTML oldal egy kis darabkája, szakasza, amelyet tetszőlegesen pozícionálhatunk és formázhatunk: állíthatunk neki margót, hátteret, stb. Az egyes rétegek, tulajdonképpen kicsi felületeket fognak jelenteni az oldalunkon, és arra az esetre, ha talán egymásra lógnak, a sorrendjüket is meg lehet határozni.

Mi is rétegekkel fogunk dolgozni. Egy-egy réteget (oldalrészt) a <div> és </div> címke segítségével tudunk kijelölni a HTML kódban. A rétegeket általában az id paraméterrel azonosítjuk.

Például:

<div id="fejlec"> Ide jön az oldalon megjelenő fejléc tartalma. </div>

A megvalósítandó elrendezés

A jól ismert oldal-szerkezetet szeretnénk itt is megvalósítani:

Cím

Menü1
Menü2
Menü3

A tartalom.
Elérhetőség

Azonban most nem táblákat használunk és nem is kereteket, az egyes tartalmi részek itt rétegeket fognak jelenteni. Az egyes rétegek tulajdonságait pedig az azonosítójuk segítségével egy külön .css fájlban fogjuk beállítani.

Az oldal váza

Kezdjünk is neki a megvalósításnak! Készítsünk egy külön könyvtárat a leendő oldalunknak, és benne hozzuk létre a nyitó oldal fájlját, index.html néven! A fájl tartalma a következő legyen:

<HTML>
 <HEAD>
  <TITLE>Álmos Gedeon oldala</TITLE>
</HEAD>
 <BODY>
  <div id="Kontener">
   <div id="Fejlec">
   </div>
   <div id="Menu">
   </div>
   <div id="Tartalom">
   </div>
   <div id="Lent">
   </div>
  </div>
 </BODY>
</HTML>

Látható, hogy az oldal vázát itt a <div> címkék segítségével meghatározott rétegek fogják képezni. Van egy külső réteg, amit "Konténer"-nek neveztem el, és benne 4 másik réteg, a meghatározott funkciók szerint elnevezve.

A rétegek tulajdonságai

A következő lépésben készítsük el a külső stíluslap fájlt, amiben ezen rétegek tulajdonságait és paramétereit tudjuk majd meghatározni.

Készítsünk tehát egy új fájlt a könyvtárunkban, elso.css néven!

A következő legyen a tartalma:

#Kontener {
 width: 770px;
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 10px;
 margin-left: 20px;
 padding: 0px;
 background-image: url(papir_hatter.jpg);
}

Jelentése (sorrendben): a Konténer rétegünk (amelyik tartalmazza a többit), 770 pont széles legyen, a margói: felső: 10 pontos, jobb: automatikus, alsó: 10 pontos, bal 20 pontos, a belső szöveg távolsága a réteg szélétől mindenhol 0 pont legyen és a háttérkép legyen a papir_hatter.jpg!
Megjegyzés: azért állítottunk margót, hogy ne rögtön az oldal szélén kezdődjön a tartalom, hanem legyen egy kis hely kihagyva. Mivel a bal oldali margó meg van határozva és a jobb oldali nem, ezért bal oldalra fog rendeződni az oldal, és a jobb oldali margó automatikus lesz.

#Fejlec {
 width:750px;
 padding: 10px;
 margin: 0px;
}

Jelentése: a Fejléc rétegünk, 750 pont széles legyen, a tartalom és a réteg széle között 10-10 pont legyen kihagyva körben (így pont kijön a 770 pont szélesség), a margó 0 pont legyen mindenhol.

#Menu {
 width:210px;
 padding: 10px;
 margin: 0px;
 float: left;
}

Jelentése: a Menü rétegünk, 210 pont széles legyen, a tartalom és a réteg széle között 10-10 pont legyen kihagyva körben (ez összesen 230 pont szélesség), a margó 0 pont legyen mindenhol, és bal oldalra legyen rendezve.

#Tartalom {
 width:520px;
 padding: 10px;
 margin: 0px;
 float: right;
}

Jelentése: a Tartalom rétegünk, 520 pont széles legyen, a tartalom és a réteg széle között 10-10 pont legyen kihagyva körben (ez összesen 540 pont szélesség), a margó 0 pont legyen mindenhol, és ez pedig jobb oldalra legyen igazítva! (Így a Tartalom és Menü réteg együtt pont kiadja a 230+540=770 pont szélességet.)

#Lent {
 width:750px;
 text-align: center;
 padding: 10px;
 margin: 0px;
 clear: both;
}

Jelentése: a Lent rétegünk, 750 pont széles legyen, a tartalom és a réteg széle között 10-10 pont legyen kihagyva körben (ez összesen 770 pont szélesség), a margó 0 pont legyen mindenhol, és alá kerüljön minden rétegnek, amelyikhez bal, vagy jobb oldali igazítás meg van adva!

Mentsük el az egészet az elso.css fájlba! Ezzel az oldal szerkezete elkészült, már csak tartalmat kell meghatározni!

A tartalom feltöltése

Szerkesszük meg a fejlécet!

Legyen a már jól ismert szöveg, egyes címsorral: "Ámos Gedeon internetes kikötője". Ehhez a Fejléc réteg tartalmát kell ehhez kitölteni:

<div id="Fejlec">
  <h1>Álmos Gedeon internetes kikötője</h1>
</div>

Az eredeti oldalon ez Navy (tengerészkék) színű volt, dőlt és Arial betűtípusú. Ahhoz, hogy itt is így nézzen ki, nem írunk mást a fejlécbe, hanem egy új CSS szabályt hozunk létre, amely a Fejlécen belüli <h1> címkére fog vonatkozni (egy összetett szelektor segítségével), és pont ezeket a paramétereket tartalmazza.

Az új szabály az elso.css bájlban:

#Fejlec h1 {
 color: navy;
 font-style: italic;
 font-family: Arial, Helvetica, sans-serif
}

 

Töltsük ki a lábléc tartalmát is!

Ehhez természetesen a Lent réteg tartalmát kell kitölteni:

<div id="Lent">
 <p>
  Álmos Gedeon <br>
  <a href="mailto:almos.gedeon@valamicim.hu">
   almos.gedeon@valamicim.hu</a>
 </p>
</div>

Az eredeti oldalon ez középen volt, úgyhogy egy újabb CSS szabályt kell létrehoznunk, amely a Lent rétegbeli <p> címkére fog vonatkozni:

#Lent p {
 text-align: center;
}

 

Következhet a Menü megszerkesztése!

Ehhez négy hivatkozást kell elhelyeznünk a megszokott formában, a Menu rétegen belül:

<div id="Menu">
 <a href="index.html">Nyitó oldal</a><br>
 <a href="tema_1.html">Első téma</a><br>
 <a href="tema_2.html">Második téma</a><br>
 <a href="tema_3.html">Harmadik téma</a>
</div>

Ha szeretnénk, könnyen lehetne formázni az <a> címkét is a #Menu a szelektorral az előbbiekhez hasonlóan, azonban most ettől eltekintünk.

 

Most már csak a tartalom van hátra!

A tartalmat a Tartalom réteg szerkesztésével hozzuk létre:

<div id="Tartalom">
 <p class="kiemelt">Kedves látogató!</p>
 <p>Ezen az oldalon hasznos információkat találsz a     következő témában: .......</p>
 <p>Ide jön az oldal szövege.</p>
 <p><img src="Smiley2.gif" width="100" height="102"></p>
</div>

Az eredeti megoldásban a "Kedves látogató!" rész félkövér volt és dőlt. Ezt most is stíluslappal oldjuk meg: felveszünk egy új osztályt (a Tartalom rétegen belül), és ezt megadjuk a megfelelő <p> címkénél, ahogy fent látható.

Az új osztály definíciója:

#Tartalom .kiemelt {
 font-weight: bold;
 font-style: italic;
}

Ezzel elkészült az első oldalunk, megtekinthető itt: index.html,
a hozzá tartozó CSS fájl szöveges változata: elso_css.

A továbbiakban nincs más dolgunk, mint elkészíteni a többi három fájlt az elsőnek a mintájára. (Az elkészült fájlok a forrásoknál letölthetőek.)

Ha megnézzük az oldalak forrását, látható, hogy sokkal egyszerűbbek és átláthatóbbak, mint a többi megvalósítás, amiket idáig néztünk. Ezen kívül a közös stíluslap fájl segítségével könnyen és gyorsan átalakítható az egész weblap kinézete! Nem véletlen, hogy ez az a technika, amelyet előszeretettel használnak a honlapszerkesztők, kiegészítve a komolyabb honlapszerkesztő szoftverek sablon-kezelési funkciójával.

Tovább az összegzéshez >>

Weblapprogramozás oktatása középiskolában - Készült: 2007