Töltsd le a CD mappa, hogy tanulmányozza a tanfolyam „Lessons HTML és a CSS» (141 MB)
Táblázatos elrendezés - meglehetősen gyakori a mai elrendezés módszer.
Ha egy táblázatot használjuk oldal elrendezés és design a design, ez az úgynevezett prototípus.
Az 1. ábra a megjelenését az oldalon, a 2. ábra - jelöli a zöld asztal, ami az alapja az elrendezés ezen az oldalon. Ahhoz, hogy egy fejlesztési rács nem volt látható, egy táblázatban egy láthatatlan határ. Erre a „0” border = attribútuma a tag TABLE.
1. ábra: Megjelenés az oldalon
2. ábra A táblázat alapját képező helyszínrajzokat
Minden különböző tervezési táblázatok segítségével csökkenteni lehet három típusba sorolhatók:
"Rögzített" (kemény),
„Gumi” tervezési és
Kombinációja az első kettő.
1. „Fixed” tábla tervezése (layout) a helyszínen
A „fix” oldal elrendezés tervezés alapján létrejött egy bizonyos szélessége a táblázat, mint például elrendezés táblázat szélessége 1000px
.
1. példa: "Fixed" website design. A 3. ábra egy példa a kódot egy rögzített (hard) tervezése, alapján az elrendezés táblázat szélessége 1000px. 4. ábra - a megjelenése az elrendezés.
A választás a szélessége a táblázat az orientációtól függ egy bizonyos felbontású monitorok számára. Így a vízszintes felbontás 1024 képpont - szükséges, hogy a szélessége a prototípus táblázatok 960-980 pixel ekrana1280px szélesség - a szélessége a táblázat vehet prototípus 1200-1220px stb
Ebben az esetben az oldal jelenik meg a teljes képernyő szélességének monitorokon a nagyobb felbontás mindkét oldalán a webhely elrendezését marad egy üres helyet monitorok kisebb felbontású képernyő alján lévő vízszintes görgetősáv.
1. Végre egy web-oldalt a számadatok alapján a 3. és 4. Mentse a fájlt.
2. Állítsa be a méret a böngésző, viselkedésének elemzéséhez az elrendezés.
2. „Rubber” tábla tervezése (layout) a helyszínen
A „gumi site” jellemzi a táblázatok használata szélesség százalékában határozzák meg a szélessége a böngészőt. Ebben az esetben, az oldal pereverstyvatsya böngészőtől függően széles.
2. példa: "Rubber" website design. Az 5. ábra egy példa a kódot „gumi” tervezési, alapuló elrendezés táblázat 100% a szélessége a képernyő. 6. ábra - a megjelenése az elrendezés.
1. Végre egy web-oldalt a számadatok alapján az 5. és 6. Mentse el a fájlt.
2. Állítsa be a méret a böngésző, viselkedésének elemzéséhez az elrendezés.
3. Kombinált site design
Akkor, hogy egy kombinált rugalmas struktúra a helyszínen (7. ábra). - kombinációja egy „rögzített” és a „gumi” design. amikor a szélessége néhány sejt a táblázat határozza meg abszolút értéke (pixel), valamint azok a sejtek, amelyek köze gumi vannak beállítva százalékában a szélessége a elrendezés táblázat, vagy a (szélesség) szélessége paraméter nincs megadva egyáltalán. Például:
A fenti példában, a szélessége „gumi” cella nincs megadva, és megfelelően változik a fennmaradó rendelkezésre álló helyet a képernyőn.
Így, ha a képernyő szélessége 1600 képpont, szélessége „gumi” sejt 1600-100-50-150 = 1300 pixel.
Ha a szélessége a képernyő 1280, szélessége „gumi” sejt 1280-100-50-150 = 980 pixel.
Ha a szélessége a képernyő 1024 pixeles szélesség „gumi sejt” lesz 1024-100-50-150 = 724 pixel.
3. példa A kombináció a „rögzítve” és „gumi” design. A 8. ábra egy példa a kombinált kód tervezési, alapuló elrendezés táblázat 100% a szélessége a képernyő. 9. ábra - a megjelenése az elrendezés.
1. Végre egy web-oldalt a számadatok alapján a 8. és 9. Mentse el a fájlt.
2. Állítsa be a méret a böngésző, viselkedésének elemzéséhez az elrendezés.
Leggyakrabban ál komponens nem egyetlen asztal, és több egyedi módon egymásba egyik a másikban. Ez lehetővé teszi, hogy bővítse a lehetőségeket teremt komplex design. Ez lehetővé teszi, hogy ál-grid összetett struktúra.
4. példa Gumi helyszínen beágyazott táblázatok
1. Végre egy web-oldalt a számadatok alapján a 10. és 11. Mentse el a fájlt.
2. Állítsa be a méret a böngésző, viselkedésének elemzéséhez az elrendezés.
1. Az elemek MyHouse.ru oldalon, hozzon létre két weblap egy tábla elrendezés együttes honlapján.
2. A weboldal tetején elhelyezhet egy görgethető.
3. A bal része a helyszínen - a menü jobb oldalán - a tartalmát a web-oldalt.
4. Minden weboldal hivatkozás, amely elvezet a másik, akkor hozzon létre egy oldalt. A hivatkozás kölcsönösnek kell lennie, azaz a Az első oldalon kell, hogy lépjen a második oldal és a második oldal, illetve az első oldalon.