3. Laboratóriumi gyakorlat 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 <div> é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 <div> elemet úgy lehet egymás mellé illeszteni 1
(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. <div> 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ó <div>, 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ű <div> 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; 2
background-color: #FFFACD; p#logo { font-size: 8em; margin-left: 40px; display: inline; div#header { height: 200px; /*border: 1px red solid;*/ background-color: #8fbc8f; div#footer { /*border: 1px red solid;*/ background-color: #8fbc8f; div#main { /*border: 1px solid green;*/ background-color: #FFE4B5; div#left { /*border: 1px solid blue;*/ width: 65%; div#holder { /*border: 1px solid green; */ background-color: #DCDCDC; div#c-left { height: 200px; background-color: lightgray; text-align: right; div#c-right { float:right; width: 65%; height: 200px; background-color: gray; border-left: 1px solid maroon; padding-left: 4px; margin-left: 4px; text-align: left; div#right { width: 35%; float: right; background-color: #FFE4B5; div#c-left p { margin:0; 3
/* menu */ ul#menu { /* position: relative;*/ bottom: 3px; left: 10px; list-style-type: none; padding: 0px; margin:0px; #menu li { display: inline; float: left; margin: 2px; font-size: 12pt; text-align: center; width: 8em; ul#menu li a { text-decoration: none; background-color: #808000; padding-left: 5px; padding-right: 5px; color: #FFFACD; ul#menu li a:hover { background-color: #6B8E23; ul#menu li a:link { background-color: #F0E68C; color: #556B2F; ul#menu li a:visited { background-color: #FFA500;.clearer { clear: both; /* szovegek */ div#c-right h1 { div#c-right p { #right li { 4
#c-right a { color: lightgray; border: 0; div#footer p { font-size: 10pt; text-align: center; padding-top: 10px; padding-bottom: 10px; A HTML kód pedig az alábbi: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>html elemek</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- header elem --> <div id="header"> <p id="logo">a</p> <!-- a menu elem az "a" utan koveetkezik, es mivel blokk ala kerul lehet relativ ehez a helyhez vagy abszolut a heder-hez kepest pozicionalni --> <ul id="menu"> <li class="item"><a href="#">menu pos 1</a></li> <li class="item"><a href="#">menu pos 2</a></li> <li class="item"><a href="#">menu pos 3</a></li> <li class="item"><a href="#">menu pos 4</a></li> <li class="item"><a href="#">menu pos 5</a></li> </ul> <!-- end header --> <!-- fo tartalmi div elem --> <div id="main"> <!-- jobb oldali ablak --> <!-- ez lebegni fog a bal oldali mellett --> <div id="right"> <ul> <li>első listaelem</li> <li>második listaelem</li> <li>harmadik listaelem</li> </ul> <ul> <li>első listaelem</li> <li>második listaelem</li> <li>harmadik listaelem</li> </ul> <!-- jobb oldali ablak vege--> <div id="left"> <!-- bal oldali nagy ablak --> <div id="holder"> <!--bal oldali nagy ablak - atrtalamzo div --> <!--tartalom ismetlodik --> 5
<div id="c-left"> <!-- a tartalom bal oldali --> <div id="c-right"> <!-- a tartalom jobb oldali ablaka --> <!-- ez lebeg a c-left mellett --> <h1>mi az én?</h1> <p>valaki az ablakból nézegeti a járókelőket. Mondhatom-e, ha én is arra megyek, hogy azért állt oda, mert engem akart látni? <a href="#">folytatás...</a> </p> <p>2008.03.01</p> <hr style="width:90%"> <!--tartalom ismetlodik --> <div id="c-left"> <div id="c-right"> <h1>mi az én?</h1> <p>valaki az ablakból nézegeti a járókelőket. Mondhatom-e, ha én is arra megyek, hogy azért állt oda, mert engem akart látni? <a href="#">folytatás...</a> </p> <p>2008.03.01</p> <!-- end holder --> <div class="clearer"> <!--left--> <div id="footer"> <p> 2008</p> <!-- footer --> <!-- main --> </body> </html> 6