HTML Design 2

Akárcsak CGI Script rovatunkban, itt is átmegyünk kicsit a gyakorlatba. Jelen kiadásunkban egy lekerekített sarkokkal, és vékony kerettel rendelkezô HTML oldal megvalósítását fogjuk látni. Merthogy nincs unalmasabb, még ha lehet is játszani vele, mint a kizárólag szögletes táblázatcellákból és elemekbôl felépített HTML oldal.

Lássunk is neki a hozzávalók és a nehézségek összegyûjtésének. Az oldal egy teljesen normális táblázatra fog felépülni. A különbség annyi lesz csupán, hogy ennek a táblázatnak le fogjuk kerekíteni a sarkait. Ha nem számolunk a vékony kerettel, amit fentebb megígértünk, akkor könnyen beláthatjuk, hogy egy 3x3-as táblázattal ez már könnyedén megoldható. Ha feketének vesszük a hátteret, és fehérnek a táblázatunk hátterét, akkor csupán négy negyed körcikket kell készítenünk, és ha a táblázat celláit 1, 2, 3, 4, 5, 6, 7, 8, 9 számokkal megszámozzuk, akkor az 1, 3, 6 és 9-es számú cellákba kell elhelyeznünk ôket, és ezen cellák hátterét áttetszôként meghagyni. A többi, 2, 4, 5, 6 és 7-es cellák hátterét viszont fehérre kell beállítanunk. A dolog valahogy így kell kinézzen (a jobb áttekinthetõség miatt meghagytuk a táblázathatárokat):

1	2	3
4	5	6
7	8	9

A körcikkeket nagyon egyszerûen elkészíthetjük bármely rajzprogramban, ha készítünk egy befillezett kört, és utána feldaraboljuk négy részre. Mint HTML gyártó emberkék jobb ha alaposan begyakoroljuk képek feldarabolását, mert ha minôségi oldalakat akarunk csinálni, tökéletes összhatással, akkor bizony néha sokfelé kell darabolnunk képeket, és azt is pontosan elôre fel kell mérnünk, hol is kell felszeletelni ôket: mert míg belejövünk számtalanszor lesz úgy, hogy a munka végén ott ülünk az összerakhatatlan puzzle közepén, és rájövünk, hogy ezt vagy azt a részt nem is így kellett volna vágni...

Igen ám, eddig meg is volnánk, csakhogy megígértük a vékony - legyen most mondjuk piros - keretet ennek a táblázatnak, és a táblázatnak továbbra is teszôlegesen méretezhetônek kell lennie ahhoz, hogy használhassuk.

Mi változik tehát? Immár nem 3x3, hanem 5x5-ös táblázatunk lesz. És bár kezdésként ismét egy fillezett kört fogunk darabolni, amelynek kerete van, immár nem 4, hanem 16 részre kell felszabdalnunk - sôt, szükségünk lesz még egy kis, piros színû kockára, amely négyzet alakú, és mindkét oldala akkora, mint amilyen széles a piros csíkunk.

Hogy erre miért van szükség? Ugyanis a browserek egy része hajlamos arra, hogy az üres táblázatcelláknak a default font magasságát adják. Ha azonban a csík szélességével megegyezô kockánkat beletesszük, akkor mindenképpen ô fogja a magasságot meghatározni, így pont olyan széles lesz mint kell.

Ha egytôl huszonötig megszámozzuk a cellákat, akkor ezeket a kis kockákat a 3, 11, 15 és 23 számú cellákba kell elhelyeznünk.

A körünket felvagdosva - a negyed körcikkeinket még négy részre vágva a piros csík szélei mentén - négy fekete kis kocskát kapunk, amit az 1, 5, 20 és 25-ös cellákba kell elhelyeznünk, kapunk négy vízszintes piros csíkot, amelyek fele fekete, ezeket a 2, 4, 21 és 24 cellákba, négy ugyanilyet, csak függôlegeset, amelyeket a 6, 10, 16, 20 cellákba és végül négy lecsípett szélû fehér körívet némi piros széllel, meg némi fekete csücsökkel, amelyeket a 7, 9, 17 és 19 mezôkbe kell elhelyeznünk. Huhh... Valahogy így:

 

				5
		8	9	10
11	12	13	14	15
	17	18	19	20
21	22	23	24	25

 

Ha pedig ez megvan, akkor a tulajdonképpeni tartalmat a középsô, tehát 13-as cellába pakolni, valamint beállítani a táblázat és a cellák néhány adatát:

border="0"
cellspacing="0"
cellpadding="0"
vspace="0"
hspace="0"

A table tagnál a border="0", cellpadding="0", cellspacing="0" paramétereket kell mindenképpen megadnunk. Az elsô és utolsó két oszlop td tagjainál (tehát 1, 2, 4, 5, etc.) pedig meg kell adnunk a width="1" paramétert, hogy csak a középsô mezô mérete változhasson.

Ha pedig ezeket az utolsó módosítasokat is megcsináltuk akkor tulajdonképpen készen is vagyunk... Lehet az egészet tartalommal megtölteni.

Jó vagdalkozást mindenkinek...

Emeric SH