Az elmúlt két évben csak annyit hallottam az ügyfél(ek)től, hogy blokkok segítségével szeretné elhelyezni meglévő webhelyterv-elrendezését. Azok. neki egy DIV-re és CSS-re épülő blokk-elrendezésre van szüksége. De tényleg olyan jó ez a kód? Már régóta gondolkodom ezen. Különféle oldalakat kellett létrehoznom, amelyek közül sokat táblázatok, blokkok ill harmadik lehetőség blokkok és táblázatok.

Véleményem szerint a blokk elrendezés előnyei a táblázatos elrendezéssel szemben nyilvánvalóak, ezek a következők:

• kicsi HTML méret táblázatokhoz képest
• a blokkok fő paraméterei és jellemzői egy külön CSS fájlban tárolódnak, amelyet a böngészők tökéletesen gyorsítótáraznak, és nem kell folyamatosan betölteni.
• az a lehetőség, hogy a fő tartalmat az oldal legtetejére (magában a kódban) helyezzük el, de bármikor megjelenítsük, még a legalján is. egyszerűen beállítja a megfelelő paramétereket a blokkhoz.

De ezeken a látszólagos előnyökön kívül számos probléma és hátrány is kapcsolódik a blokk-elrendezés folyamatához és annak megjelenítéséhez. különböző böngészők(Különösen problémák merülnek fel internet böngésző 6).

Fő hátrányai amire szintén érdemes odafigyelni:

• Sokkal több időbe telik a minden böngészőben helyesen működő kód megírása és az oldal későbbi helyes megjelenítése, mint táblázatos elrendezés esetén.
• Néha az írott kód sokkal nagyobbnak bizonyul az eredetileg vártnál, ez az egyes böngészők különféle módosításai, módosításai, feltörései vagy további írási stílusai eredményeképpen történik.
• Gyakran JavaScript vagy könyvtárak, például jQuery használatához kell folyamodnia, ami szintén hatással van a legjobb módon az oldal egészére. Előfordulhat, hogy az oldal nem jelenik meg megfelelően, ha a felhasználó böngészője nem támogatja a JS végrehajtását, vagy ez a funkció le van tiltva.
• Ismét egy olyan problémás böngészővel kapcsolatban, mint az IE6. A blokk elrendezésben gyakran használják a lebegő pozicionálási paramétert (balra vagy jobbra), gyakran a blokkok ugrálnak és kúsznak egymás alatt az oldal (böngészőablak) átméretezésekor. Azt is észrevették, hogy amikor az IE Testerben (6) minden rendben működött, magában az IE6-ban is voltak folyamatos hibák.
• Nem ritka, hogy további képeket kell használni a háttér átfestéséhez vagy beállításához. Például, ha a navigációs blokkot nem lehet az oldal teljes magasságában a láblécig nyújtani, egy módszert használnak hamis oszlopok rajzolására - hamis oszlopok
• Ezenkívül az ilyen munkák költsége gyakran több, mint a táblázatos elrendezés költsége.

A végeredmény és a rá fordított idő sokszor nem igazolható. Ezért úgy gondolom, hogy érdemes alaposan átgondolni, hogyan fogsz szedni, milyen módszerrel?

Üdvözlöm a kedves olvasókat, ebben a számban az elrendezés típusairól fogunk beszélni. Biztosan mindannyian hallottatok róla blokk elrendezés és táblázatos, ma erről a két különböző megközelítésről szeretnék beszélni a weboldal elrendezésével kapcsolatban. Az előző cikkben leírtam, hogyan védjük meg az elektronikus , kicsit korábban egy konkrét példát vettünk figyelembe a modern virtuemar komponens boltjára. ingyenes CMS joomla.

Ez a cikk hasznos lesz azoknak a kezdő webfejlesztőknek, akik még csak rálépnek a "webhelykészítők" tüskés útjára, és szeretnének készíts saját weboldalakat. A tapasztalt webfejlesztők is tanulhatnak valamit maguknak, különösen a cikk összehasonlítja táblázatos és blokkos elrendezés előnyei és hátrányai.
Talán azzal kell kezdenünk, hogy mi az a weboldal elrendezés? Az elrendezéstervező megkapja a tervezőtől a jövőbeli webhely elrendezését, az elrendezéseket általában a photoshop formátumban. Az elrendezés lényegében egy rajz, csak részletesebb, amelyben az egyes elemek (menük, oldalfejlécek...) rétegekre vannak szétválasztva, ez természetesen történik, amikor egy tervező elrendezést rajzol, ráadásul nagyon kényelmes, egyszerűen másoljon rajzot egy szükséges rétegről, nézze meg a betűtípus-beállításokat stb. Tehát ez az elrendezés lényege az elrendezés átalakításában html dokumentumés CSS-szabálykészlet összeállítása.

Meg kell jegyezni, hogy az elrendezés kreatív folyamat, természetesen nem olyan, mint a Photoshopban való elrendezés megrajzolása, de ennek ellenére ebben van egy kis kreativitás, különösen a kezdeti szakaszban, majd a tapasztalatok növekedésével az elrendezési folyamat gépesíthető. Az elrendezés minőségét az határozza meg, hogy az oldal elrendezése mennyiben tér el az elrendezéstől.

Az elrendezés típusai

Ahogy a címben is szerepel az elrendezés lehet blokk vagy táblázatos. Blokk elrendezésben a webhelyelemek blokkokkal ( div ), táblázatos elrendezésben táblázatokat ( táblázat ) használnak.

Táblázatos elrendezés

Táblázatos elrendezés a weboldalkészítés korai napjaiban használták, népszerű volt a kezdő webfejlesztők körében. Meg kell jegyezni, hogy sok webmester még most is elég hatékonyan kezeli az elrendezési táblázatokat, ahogy mondják - a mester fél a munkától. Én személy szerint jobban szeretem a blokkos elrendezést, mint a táblázatos elrendezést, de most nem az ízekről beszélünk. Az ötlet az oldal táblázatos bemutatásán alapul. Mint ismeretes, az oldalak túlnyomó többsége tipikus szerkezettel rendelkezik, amely egy adott feladathoz részletezhető. Vegyük például a webhely tipikus változatát

amely tartalmazza a fejlécet, a tartalomterületet, a jobb oldalsávot és a láblécet, ez nem egy trükkös szerkezete a blogomnak. Mi megvalósítjuk ezt a szerkezetet asztal

egy sapka
tartalom	oldalsáv
lábléc

a táblázatot egy meghatározott fix szélességre kell beállítani, ha az elrendezésnek fix szélessége van, vagy 100%-ra, ha az elrendezés folyékony, ebben az esetben a táblázat a képernyő felbontásától függően megnyúlik, hogy illeszkedjen a képernyő szélességéhez.

A táblázatos elrendezés előnyei és hátrányai:

• Könnyen érthető, nincs szükség mélyebb HTML és CSS ismeretekre (+ )
• Intuitív felépítés, minimális CSS-szabályok (+ )
• Nehéz megérteni a HTML kódot bonyolultabb webhelyszerkezettel (- )
• Amíg a teljes táblázat nincs betöltve, nem jelenik meg a képernyőn (-)
• Komplex tervezés átfedő elemekkel nem kivitelezhető (- )
• Sok redundáns kód (-)

Nézzük meg közelebbről a 4. pontot. A tény az, hogy HTML táblázatokúgy vannak kialakítva, hogy a böngésző ne tudja előre, hogyan rajzoljon táblázatot a tartalmával, amíg az nincs betöltve, amíg a táblázat utolsó ábrája be nem töltődik, a táblázat nem jelenik meg a böngésző képernyőjén, ami arra készteti a felhasználókat, hogy elhagyják az oldalt anélkül, hogy megvárnák az oldal megjelenését, mert a látogató egy ideig semmit sem lát a képernyőn. Úgy tűnik, az oldal lelassul, sőt, a böngésző megvárja, amíg a táblázat összes eleme betöltődik.

blokk elrendezés

A blokk elrendezése azon a tényen alapul, hogy a blokk HTML elemek, általában függőlegesen helyezkednek el, felülről lefelé egymás után, abban a sorrendben, ahogyan a HTML kódban előfordulnak. Ezenkívül a blokkoknál beállítható a felhajtóerő tulajdonság ( úszó:bal | jobbra | egyik sem | örököl). Ha egy blokkhoz a float:left tulajdonságot adjuk meg, akkor az balra lesz igazítva, és az összes többi blokk figyelmen kívül hagyja, mert ha ez a blokk nem létezne, kivéve a szöveget, akkor az azonos tulajdonságkészlettel rendelkező többi blokk tördelődik. körülötte jobbra, mennyivel engedi meg a képernyő vagy elem szélességét. Megjegyzendő, hogy bármely elem blokkká tehető a display:block tulajdonság beállításával, kezdetben csak a div elemek számítanak alapból blokk elemnek, a nem blokk elemeknél (span, p ) a float tulajdonság figyelmen kívül marad és az ilyen elemek a szokásos módon fentről lefelé vannak elrendezve. Annak érdekében, hogy a float tulajdonságot ne hagyja figyelmen kívül, be kell állítani az elemek display:block tulajdonságát.

A float:right a blokkot jobbra igazítja, és az összes többi blokk figyelmen kívül hagyja, vagy körbefordul, ha ugyanaz a tulajdonság van beállítva, és ha két vagy több blokk a megadott tulajdonsággal egy sorban megy a kódban, akkor az elsőként érkező blokk lesz az első a jobb oldalon a kódban, a többi pedig körbetekered a bal oldalon.

A float:none tulajdonság törli a blokk lebegő hatását, de ez nem jelenti azt, hogy a blokk a szokásos módon fentről lefelé kerül, ha egy lebegő effektussal rendelkező blokk van fent, akkor az alsó blokk figyelmen kívül hagyja a felsőt egyet, és állj alatta, hogy ebben a blokkban ne kelljen a clear:both tulajdonságot beállítani. Hú, nehéz igaz? Csak első pillantásra tűnik, valójában minden logikus és egyszerű, csak gyakorolni kell.

float:inherit – beállítja a felhajtóerő tulajdonságot, ugyanazt, mint a szülőblokkot (az a blokk, amelybe ez a gyermekblokk be van ágyazva).

Konkrét példák kellenek, úgy érzem, nem meggyőző, kiderül. Készítsünk egy egyszerű példát, kezdésnek, az alapot, egy 400 pixel szélességű piros dobozt. 350 pixel magas. és igazítsa a képernyő közepéhez.

most hozzá kell adni ehhez a blokkhoz még pár blokkot, zöldet és szürkét 100 pixel magassággal és szélességgel, a szürke blokk magassága 120 pixel.

Látható, hogy a blokkok alulról felfelé az általános áramlásban vannak elrendezve, abban a sorrendben, ahogy a kódban előfordulnak, először zöld, majd szürke a végén kék. Adjunk a zöld blokknak float:left tulajdonságot, hogy a szürke és kék blokkok figyelmen kívül hagyják.

amint látja, a szürke blokk figyelmen kívül hagyta a zöld tömböt, és beállt alá, a zöld blokk, mintegy önmagában, a kék blokk sorakozott fel a szürke mögött. Állítsunk körbe az összes blokkot.

Látható, hogy a blokkok egymás után sorakoztak abban a sorrendben, ahogy a kódban megjelennek. Próbáljunk meg két blokkot egymás mellé helyezni, a harmadikat pedig a szokásos módon lent. Ehhez el kell távolítani a float:left tulajdonságot a harmadik blokkból, de ez nem elég, mivel az első két blokk alá fog bemászni, ahogy korábban láttuk. Ennek elkerülése érdekében be kell állítania a clear:both tulajdonságot a harmadik blokkra;

Így alakult a szerkezet, a blokkok szélességének beállításakor figyelembe vették, hogy a keret 1 pixeles. növeli a blokk méretét, így a fejléc mérete 398 pixelre van állítva. nem 400 pixel.

A blokk elrendezés előnyei és hátrányai:

• Az oldal kisebb súlya a kevesebb kód miatt (+ )
• Komplex tervezés megvalósítása átfedő blokkokkal (+ )
• Nehéz elsajátítani, a táblázatos elrendezés könnyebb (- )
• Gyakrabban kell megoldani a böngészők közötti kompatibilitási problémákat. a blokkok átfedhetik egymást a képernyőfelbontás módosításakor, méretezéskor (- )

Én személy szerint táblázatos elrendezéssel kezdtem, most blokk elrendezést használok, elég régen elsajátítottam, könnyű volt, bár számos hátránya van, ismerősebb és könnyebben használható a blokk elrendezés.

Ennyit kedves olvasók, térjetek vissza gyakran.

A tervezők között gyakran vannak viták a választás körül elrendezési módszer. Néhányan inkább blokk elrendezés, más webmesterek általában táblázatos módszer. Ez a kérdés meglehetősen ellentmondásos, és mindkét mesternek igaza van a maga módján. Vannak helyzetek, amikor érdemes használni blokk elrendezés, van olyan is, amikor a legjobb lehetőség használni fogja táblázatos elrendezés. De mindenesetre a módszer kiválasztásakor építeni kell néhány jellemzőre, amelyek mind a táblázatban, mind a táblázatban rejlenek blokk elrendezés. Fő jellemzője ezeknek a módszereknek vannak előnyei és hátrányai, amelyeket az alábbiakban tárgyalunk.

Az elrendezési táblázatok előnyei:

• Az elrendezési táblázatok sokkal könnyebbek, mint a blokkok;
• Alacsony felbontás esetén a táblázatok nem fedik egymást
• Böngészőkön átívelő webhely létrehozása egyszerű.

A táblázatos elrendezés hátrányai:

• Nagyszámú kód;
• Nem minden terv lehet szedett táblázat.

A blokk elrendezés előnyei:

• Kis mennyiségű kód, amely jelentősen csökkenti a webhely súlyát;
• Magasabb rakodási sebesség az asztalokhoz képest;
• Bármilyen bonyolultságú mintát készíthet.

A blokk elrendezés hátrányai:

• A felbontás csökkenésével a blokkok leesnek vagy egymásba futnak;
• Problémás a böngészők közötti kompatibilitás;
• A szedés nehezebb, mint a táblázatok.

Íme ezeknek a módszereknek a fő előnyei és hátrányai oldal elrendezés, de a gyakorlatban a legtöbb esetben mindkét módszer alkalmazása szükséges. Használat blokk elrendezés, sokkal jobb, mint a táblázatos, de csak azzal a feltétellel, hogy el lehet érni helyes megjelenítés oldalak minden böngészőben és bármilyen monitor felbontásban. Abban az esetben, ha az elrendezéstervezőnek nincs sok tapasztalata, érdemes az elrendezési táblázatokat használni, a készség növekedésével át lehet váltani blokk elrendezés.

Most arról fogunk beszélni mi a különbség a táblázatos és a blokk elrendezésű webhelyek között. Miután az oldalt a tervező kigondolta, el kell helyezni és az egyedi igényekhez igazítani kell. Az elrendezés alatt értse meg a html+css vagy a html használatát. A leggyakoribb az első lehetőség. Vannak más, bonyolultabb elrendezési lehetőségek is, de nem minden böngésző támogatja ezeket. A HTML elrendezés táblázatos (tábla) és blokk (div) formátumú. És minden lehetőségnek megvannak a maga előnyei és hátrányai.

Táblázatos elrendezés

A táblázatos elrendezés beágyazott táblázatok segítségével jön létre. Szinte minden böngésző helyesen olvassa el az ilyen típusú elrendezést, mivel sokkal korábban hozták létre, mint a blokk. Ha több oszlopos kialakításra van szüksége, akkor a táblázatos elrendezés ideális erre. Szólni kell a táblázatok használatával történő elrendezés hiányosságairól. Jelentős számú beágyazott tábla esetén túl nehézkes kód jön létre, amelyet nehéz szerkeszteni. A táblázatos elrendezéssel létrehozott webhelyek nincsenek elég jól indexelve kereső motorok. Ezért a tartalmukban jó oldalak nem mindig foglalják el az első helyet a keresési eredmények között.

Blokk elrendezés

A blokk-elrendezéssel készült webhelyeket kompaktabb kód használata jellemzi, és ezért kisebb súlyt használnak. A blokk elrendezés nagyon kényelmesen használható, a rétegek vagy blokkok átfedhetik egymást. Az optimalizálók azt a tényt használják ki, hogy a HTML-kód alsó része a tetejére helyezhető. A blokk elrendezésének negatív oldala a használat bonyolultsága. Meg kell értened a CSS 1-et és a 2-es verziót, és készül a harmadik, ami még több funkcióval fog rendelkezni. A "folyékony" elrendezésű webhelyek létrehozása bizonyos nehézségeket okoz, de a világhálón elegendő utasítást találhat arra vonatkozóan, hogyan teheti ezt blokkban egyszerűen. Mivel sok finomságot kell ismernie a blokk-elrendezésben, tapasztaltabb és hozzáértőbb elrendezéstervezők és webtervezők használják. Ezért az elrendezési blokkokkal rendelkező webhelyeket létrehozó webstúdiók szolgáltatásai drágábbak, különösen azért, mert még mindig vannak, akik a régi verziókat használják.