Weblapprogramozás

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

Tartalom elrendezése táblázattal

Ahogy az előző fejezetben már írtam, az oldalak tartalmának elrendezésének egyik igen hatásos módja a táblázattal való elrendezés. Ilyenkor egy (esetleg több) táblázat alkotja az oldal vázát (általában szegély nélkül). A következőkben ennek a technikáját nézzük meg, el fogunk készíteni egy oldalt, amely egy professzionális weboldal alapja is lehetne.

A megvalósítandó terv

Álmos Gedeon szeretne magának egy honlapot készíteni. Egy nyitóoldalt tervezett, a mondanivalóját pedig 3 témára osztotta fel. Az oldal tetejére szeretne egy címet, az oldal aljára pedig az elérhetőségét elhelyezni. A középső részen, baloldalon lehessen navigálni az oldalak között, a jobb oldalon pedig maga a tartalom legyen!

Az elrendezési terv valahogy így néz ki:

Cím

Menü1
Menü2
Menü3

A tartalom.
Elérhetőség

 

Az első lépések

Készítsük el az oldalt! Ehhez, mivel tudjuk, hogy egy összetettebb, több fájlból álló weboldalt fogunk készíteni, létrehozunk egy új könyvtárat. A könyvtár neve legyen "AlmosGedeon"!

Az első oldal

Először is a nyitó oldalt fogjuk megtervezni, majd ennek minimális átalakításával megkaphatjuk a többi oldalt is! Mivel tudjuk, hogy ez lesz a nyitó oldalunk, a honlapszerkesztés szabályainak megfelelően "index.html"-nek nevezzük el. Hozzuk létre ezt a fájlt az AlmosGedeon könyvtárban!

Írjuk bele a HTML kód vázát, majd ezt foguk kitölteni később:

<HTML>
 <HEAD>
  <TITLE>Álmos Gedeon oldala</TITLE>
 </HEAD>
 <BODY>

 </BODY>
</HTML>

A szerkezet létrehozása

Tudjuk, hogy az oldal szerkezetét táblázat(ok) fogják adni. Azt a megoldást választjuk, hogy két táblázatot helyezünk egymásba. Az első táblázat 3 soros és 1 oszlopos lesz, a második pedig a középső sorba fog kerülni, egy 1 soros, 2 oszlopos táblázat.

Szúrjuk bele a HTML kódba, a táblázatokat definiáló kódokat!

<table>
 <tr>
  <td> Cím </td>
 </tr>
 <tr>
  <td>
      <table>
       <tr>
        <td> Menük </td>
        <td> Tartalom. </td>
       </tr>
      </table>
  </td>
 </tr>
 <tr>
  <td> Elérhetőség. </td>
 </tr>
</table>

Állítsuk be a táblázatok paramétereit:

  • egyik táblázatnak se legyen szegélye
  • mindkettő legyen 700 pont széles
  • a cellaköz (cellspacing) mindkettőben legyen 0
  • a cellamargó (cellpadding) a nagyban legyen 10, a kicsiben 20
  • a nagynak legyen háttere a következő kép: papir_hatter.jpg

(Az utolsó ponthoz töltsük le a képet, a készülő oldal könyvtárába, az index.html mellé!)

<table width="700" border="0" cellpadding="10"
   cellspacing="0" background="papir_hatter.jpg">
 <tr>
  <td> Cím </td>
 </tr>
 <tr>
  <td>
        <table width="700" border="0"
           cellspacing="0" cellpadding="20">
       <tr>
        <td> Menük </td>
        <td> Tartalom. </td>
       </tr>
      </table>
  </td>
 </tr>
 <tr>
  <td> Elérhetőség. </td>
 </tr>
</table>

Most pedig állítsuk be a cellák nagyságát és igazítását, a belekerülő szövegnek megfelelően:

  • a felső sor magassága legyen 100 pont
  • az alsó sor magassága legyen 60 pont,
  • és vízszintes igazítása: "középre"
  • a belső táblázat bal oldali cellájának nagysága legyen 200 pont,
  • és vízszintes igazítása legyen "balra"
  • mindkét belső cella függőleges igazítása legyen "felülre"

<table width="700" border="0" cellpadding="10"
   cellspacing="0" background="papir_hatter.jpg">
 <tr>
  <td height="100"> Cím </td>
 </tr>
 <tr>
  <td>
    <table width="700" border="0"
      cellspacing="0" cellpadding="20">
       <tr>
         <td width="200" align="left" valign="top">
          Menük
         </td>
         <td valign="top">
          Tartalom.
         </td>
       </tr>
      </table>
  </td>
 </tr>
 <tr>
  <td height="60" align="center"> Elérhetőség. </td>
 </tr>
</table>

A tartalom hozzáadása

A szerkezet kész, a nehezén túl vagyunk, most már csak fel kell tölteni a megfelelő tartalommal a táblázatunkat.

A címet 1-es címsorral fogjuk megoldani, színesen, félkövéren, dőlten, és választunk egy, az oldal többi részétől eltérő betűtípust (természetesen a felső cellába kell ezeket beilleszteni):

<h1><i><font color="navy" face="Arial, Helvetica, sans-serif">Álmos Gedeon internetes kikötője </font></i></h1>

Ugyancsak egyszerű dolgunk van a lábléccel, ide a név és új sorba az elérhetőség kerül (alsó cella tartalma):

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

Baloldalra egy menüt szeretnénk, ahonnan a többi oldalra el lehet jutni (bal oldali belső cella tartalma):

<p>
 <b>Nyitó oldal</b><br>
 <a href="tartalom_1.html">Első Téma</a><br>
 <a href="tartalom_2.html">Második téma</a><br>
 <a href="tartalom_3.html">Harmadik téma</a>
</p>

(A többi oldal menüje teljesen hasonló lesz, annyi lesz a különbség, hogy amelyiken éppen vagyunk a négy közül, az lesz félkövéren kiemelve, és a többi lesz a hivatkozás.)

A jobb oldalra pedig elkészítjük a nyitó oldal tartalmát (csak példa). A vidámabb megjelenés érdekében a következő képet is elhelyezzük az oldalon: Smiley2.gif (jobb oldali belső cella tartalma):

<p><i><b>Kedves látogató!</b></i></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">

Az oldalunk ezennel elkészült, megtekinthető a következő linkre kattintva: Tartalom példa

Figyeljük meg, hogy a többi oldal az első oldal mintájára készült. Nem volt más dolgom, csak a bal oldali menüt kicsit megváltoztatni, és a jobb oldali tartalmakat átírni. Ezzel a technikával viszonylag egyszerűen tudunk meglehetősen igényes oldalakat készíteni!

Most már elárulhatom, hogy nem véletlenül készítettük el így ezt az oldalt. A professzionális honlapszerkesztő programokba ugyanis (mint pl. a Macromedia Dreamweaver), ez a funkció be van építve. Az első, elkészült oldalunkat "sablonként" el tudjuk menteni, majd készíthetünk a sablon alapján több különböző oldalt. Később, utólag módosítva a sablont, az összes többi, erre épülő oldal is változni fog! Ötletes... :)

Tartalom elrendezése keretek segítségével >>

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