Sablon kétszintű menüvel

Többszintű menürendszert akkor érdemes készíteni, ha a weblap több mint 15 oldalból áll. A sablonban alkalmazott kétszintű menüvel 100-200 oldal érhető el 2 kattintáson belül, bármelyik oldalon is álljon éppen a felhasználó.

A könnyű kezelhetőség ára az, hogy a weblap szerkezete lényegesen bonyolultabb, mint amilyen egyszintű menü esetén lenne. A problémát nem csak a menürendszer elkészítése jelenti. Általában a legnehezebb feladat a tartalom elrendezése olyan logika mentén, amit a felhasználók könnyen átlátnak.

Egy kész weblap a HTML fájlokkal, a beillesztett képekkel, stb. akár több száz fájlból is állhat. Ezeket mindenképpen alkönyvtárakba kell rendezni azért, hogy átlátható legyen a fájlszerkezet. A sablont úgy alakítottam ki, hogy a gyökérkönyvtárban van az index.html nevű főoldal, az abba beillesztett kép(ek), és azok a fájlok, amelyeket a teljes weblap használ (stiluslap.css, logo.gif). A főmenü minden pontjához tartozik egy alkönyvtár, azokban van az összes többi fájl. (A sablon alkönyvtáraiban is van egy-egy index.html nevű fájl. Ezek üres HTML dokumentumok. Biztonságtechnikai funkciójuk van. A webszerverek általában úgy vannak beállítva, hogy ha kapnak egy kérést egy könyvtár letöltésére, akkor a könyvtárban lévő index.html fájlt küldik el a böngészőknek, ha van ilyen. Ha a könyvtárban nincs index.html nevű fájl, akkor kilistázzák a könyvtár tartalmát. Egy hacker számára pedig a könyvtárak tartalma hasznos információ, látja hogy mit érdemes támadni.)

Javaslom, hogy a sablonban szereplő fájloknak és könyvtáraknak adj beszédes neveket. (A menüt alkotó linkekben is módosítanod kell az elérési utat.) Az ezzel járó munka bőven megtérül a későbbi módosítások során.

Tipp: Azt később is megváltoztathatod, hogy milyen menüpontokon illetve linkeken keresztül érjenek el a felhasználók egy-egy anyagot a weblapodon. Viszont egy működő weblap esetén soha ne változtasd meg egy fájl elérési útját a könyvtárszerkezetben. (Ne nevezd át illetve ne helyezd át a webtárhelyedben a fájlokat és az alkönyvtárakat.) Ez azért fontos, mert ellenkező esetben a kívülről a weblapod belsejébe mutató linkek – például a keresők találati listáiból - nem fognak célt érni, vagyis potenciális látogatókat veszítesz el. (A külső linkek mindig a HTML fájlok abszolút elérési útvonalát tartalmazzák.)

Tipp: Mielőtt elkezded a sablon testreszabását, legalább azt el kell döntened, hogy mennyi pontból álljon a főmenü. A főmenü minden oldalról látszik, ha azon változtatsz, akkor az összes addig elkészült HTML fájlodon módosítanod kell. A legjobb, ha a teljes menürendszert és fájlszerkezetet létrehozod, mielőtt elkezded a tartalmad HTML dokumentumokba „öntését”.

A menü testreszabása

A főmenü és az almenü kezdetét és végét megjegyzésekkel jelöltem a sablon HTML kódjában.

Új almenü pont létrehozása

Azok a HTML fájlok, amelyek ugyan azon főmenü ponthoz tartoznak, közös almenüvel rendelkeznek. Tehát ha egy új oldallal bővíted a weblapodat, akkor az még néhány korábban elkészült HTML fájl módosítását is igényli. Egy új oldal beillesztését a következők szerint célszerű végrehajtanod:

• A már meglévő – és azonos főmenühöz tartozó - HTML fájlokba illeszd be az új almenü pontot. Például:

  <p class="almenu"><a class="almenulink"
     href="ujoldal.html">Új oldal</a></p>

• Készíts másolatot az egyik HTML fájlról és nevezd át a másolatot (az új fájlnév például: ujoldal.html).

• Az új fájlban az új menüpont lesz a kiválasztott menüpont, tehát abban az új menüpont sorát módosítani kell erre:

  <p class="almenukiv">Új oldal</p>

• Amelyik sor a másolt fájlban kiválasztott menüpont volt, azt az új fájlban módosítsd át kattintható menüponttá.

Tipp: Ha sok almenü pont van, azt ne egyesével hozd létre. Készíts egy HTML fájlt üres tartalommal, amiben az összes almenü pont benne van. Ezt sablonként használva hozd létre a többi HTML fájlt, amelyekben csak azt kell módosítanod, hogy melyik a kiválasztott menüpont.

Új főmenü pont létrehozása

A főmenü a weblap összes oldaláról látszik, ezért a főmenü módosítása lényegesen macerásabb művelet, mint egy új pont beillesztése valamelyik almenübe. A következő lépéseket kell végrehajtanod:

• A már meglévő HTML fájlokban – mindegyikben - létre kell hozni egy főmenü pontot tartalmazó szakaszt az új menüponttal és az ahhoz tartozó fájl elérési útjával. Ez valahogy így fog kinézni:

  <td class="elhelyez"><p class="fomenu">
     <a class="fomenulink" href="../fomenu4/oldal41.html">
        Újmenüpont</a></p></td>

Tipp: A menüben lehetőleg egyszavas menüpontok legyenek. Ha mégis két szóból álló menüpontot akarsz, akkor szóköz helyett használd a &nbsp; karaktert. (Normál szóközt használva a böngészők bizonyos feltételek esetén kétsorossá alakíthatnák a két szóból álló menüpont megjelenítését, ami elrontaná az összképet.)

Tipp: Az első fájl módosítása során másolj le egy meglévő menüpontot és írd át a href attribútum tartalmát és az új menüpont szövegét. A többi fájlban már csak egy egyszerű másolás-beillesztés műveletre lesz szükség és a href attribútum tartalmára kell figyelni. Például a főoldal kódjában az új menüponthoz tartozó fájl elérési útja így néz ki: href="fomenu4/oldal41.html". (A különbség összesen három karakter: a főoldalról nem kell visszalépni egy alkönyvtárat.)

• Hozz létre egy új alkönyvtárat. (A fenti példánál maradva ennek fomenu4 lenne a neve.)
• Valamelyik régi alkönyvtárból másolj át egy HTML fájlt az új alkönyvtárba.
• Az átmásolt fájlban módosítsd a főmenüt. Az újonnan létrehozott menüpont lesz a kiválasztott menüpont, az összes többi főmenüpontnak kattinthatónak kell lennie.
• Hozd létre az új főmenüpont almenü rendszerét a fentebb leírtak szerint.

Tipp: A sablon elemeinek pozicionálása egy olyan táblázattal van megoldva, amelynek három oszlopa van. Az első oszlopban van a bal oldali menü, a másodikban a tartalmi rész, a harmadik oszlop üres. A sablon módosításával a harmadik oszlop is felhasználható, például a témádhoz kapcsolódó linkeket helyezhetsz el benne. (A webkalap.hu oldalain a harmadik oszlopban vannak a reklámok.) Ha tartalmat helyezel el a harmadik oszlopban, akkor a stíluslapon módosítsd az oszlop szélességét!