HTML sablon tervezése A gyakorlat célja: Egy összefüggő HTML illetve CSS nyelvet használó oldal tervezése, amely később sablonként is használható. Felkészüléshez szükséges anyagok: 1. A 2-es és 3-as segédlet (HTML,CSS) 2. A bibliográfia HTML illetve CSS szekcióiban megjelölt Interneten található segédletek. A gyakorlat menete: A gyakorlaton mindenki készít egy saját HTML sablont egy elképzelt honlapra, amelynek ceruzával készített rajzával jön a laborra.
A sablon tervezése Amennyiben döntöttünk egy weboldal tartalmairól, és kialakítottuk azokat a felületeket amelyeken a tartalmak megjelennek, egy vázlatot készítünk erről, mint pl. az alábbi:
-leírjuk a fejléc, lábléc, tartalmi területek méreteit, és meghatározzuk, hány dobozból tudjuk megépíteni őket, illetve milyenek a dobozok közti összefüggések. -a példa oldal vízszintesen 3 részből (1-fejléc , 2-3-4 tartalom és 5- lábléc) áll -a tartalom 2 ablakra, jobb és bal oldali ablakokra oszlik ( 2-3 és 4) -a bal oldali ablakban ugyancsak 2 részre oszló tartalom ismétlődik többször. A 2-3 elemek alkotnak egy tartalmi részt, és ez ismétlődhet többször. -nevet adunk a tartalmi felületeknek, és első lépésként kiépítünk egy
és <span> elemekből kialakított vázat -meghatározzuk az egyes ablakok magasságát, szélességét, és azt, hogy hogyan kell viselkedniük ha nincs bennük tartalom illetve ha túlcsordul a tartalom Az alábbi példa azt a módszert használja, hogy két
elemet úgy lehet egymás mellé illeszteni 1
Webtechnológia gyakorlatok
(egyébként a blokk tulajdonság miatt egymás alá kerülnének), hogy az egyiket a másik oldalán lebegtetjük. Így a fenti példa megoldható úgy, hogy a 4 a 2-3 oldalán, a 3 pedig a 2 oldalán lebeg. Így a 2-3 -nak szüksége van még egy összetartó szerkezetre. Az alábbi implementálás egy a sok lehetséges közül.
elemeket használ az ablakok megadására, és a fent leírt lebegtetést az egymás melletti elhelyezésre. Az ablakok nevei: main - az összest összetartó
, left a 2-3-at összefogó, right a jobb oldali ablak, ezen kívül a 2-3 at a left-ben egy holder nevű
fogja össze. A css állomány minden fontosabb div elemnek külön id-t ad. Ha a "nagy" felosztással megvagyunk, a kis keretekbe megtervezzük a megjelenítendő HTML szövegeket. A honlap megjelenése az alábbi lehet:
A css állomány tartalma: body { margin: 0px; width: 80%; margin-left:auto; margin-right: auto;
