Hogyan működik a sablonok oldalak
Ahhoz, hogy megértsük, hogyan kell dolgozni sablonok, helyszínek, részletesen elemzik egy egyszerű sablon téma „Business” alatt №4873.
A kezdéshez töltse le a sablon fájlt 4873. és csomagolja ki a számítógépen.
Az archívum áll 6 html-fájlok és képek mappába képekkel. Elemezzük az index.html fájlt. screenshot amelyek a bal oldalon látható.
Azonnal meg kell jegyezni, hogy a minták által lefektetett több táblázat, beágyazott. A mi feladatunk annak biztosítása lesz, hogy megértsük ezt a táblát „gazdaság” annak érdekében, hogy mit és hol van. Vágjunk bele.
Ide kötelező címkék html-dokumentum:
- nyitó HTML tag;
- head címke a dokumentum HEAD. amely tartalmaz:
- oldal címe;
- meghatározás oldalon kódolás;
- belső stíluslapot.
Változások a HTML kódot az oldal:
Látjuk, hogy az oldal szedése a főtábla, amely lefedi a teljes oldalt. A táblázat a következő öt sort és két oszlopot. A jobb oldali oszlopban egyesíti mind az öt sort és tulajdonképpen egyetlen sejt.
Nézzük inkább jobb oldali cellában:
Változások a HTML kódot az oldal:
Blue kiemelt kódot leírja az első sorban a bal oldali oszlopban, és a jobb oldali oszlopban:
- az első sorban a bal oldali oszlop a mérési minta 1.jpg 750 * 73 (valójában a szélessége a mintát, és meghatározza a szélessége a teljes bal oldali oszlop);
- címkézni jobb oldali cellában egyesíti mind az 5 vonalak segítségével az attribútum rowspan = „5”. ahol a méretei a sejt tele az egész helyet a jobb és alsó (attribútumok magasság = „100%” width = „100%”);
- A jobb oldali cellában mellékelt táblázatot, amely már azonosított, amely 5 sor:
- Háttér Az első sor tele van egy mintázat r1.jpg. ahol a húr egy magassága 97 pixel, és kitölti a teljes szélességét;
- Háttér A második sorban van töltve egy mintát r2.jpg. ahol a húr magassága 39 pixel és kitölti az egész szélességében
- háttérben a harmadik sorban van töltve a szín # 9CB775. ahol a húr egy magassága 176 pixel, és kitölti a teljes szélességét;
- háttérben a negyedik sor tele van fehér, és a húr kitölti az egész szélességét és magasságát a maradék;
- Háttér Az ötödik sorban van töltve egy mintát bak3.jpg. ahol a húr egy magassága 37 pixel, és kitölti a teljes szélességét;
Ezután fogunk foglalkozni a fennmaradó négy sor az első oszlopban. A második sorban a főtábla tartalmaz egy beágyazott táblázatok.
Változások a HTML kódot az oldal:
Blue kiemelt kódot leírja a második sorban a bal oldali oszlopban.
A harmadik sorban a főtábla áll egy bonyolultabb „fészkelő babák”, amely négy beágyazott táblázatok.
- A harmadik sorban tartalmaz egy beágyazott táblázat (piros), amely két sejtek: f.jpg bal oldali cella tartalmazza a kép; jobb oldali cella tartalmaz egy beágyazott táblázat (sárga);
- beágyazott sárga tábla, viszont két sor: a felső sorban a felhasználásra szánnak, mint egy háttérképet 2.jpg, és tartalmaz egy gombot, és a keresett kifejezést; alsó sorban tartalmaz egy beágyazott táblázat (rózsaszín);
- beágyazott rózsaszín asztal két sejtek: Négy linkeket bal sejt; jobb oldali cella tartalmaz egy beágyazott táblázat (kék);
- beágyazott kék tábla az utolsó beágyazott táblázat áll, és csak egy cella. Táblázat például háttérkép használ t1.jpg.
Fordítson különös figyelmet a használata a div formázni a különböző alkatrészeket.
Általában semmi bonyolult, ha szét a darabokat. A fő probléma -, hogy ne vesszenek el mindezen számos beruházás és megfelelően intézkedik a záró tag.
A negyedik sor a fő táblázat tartalmazza ugyanazt a 4 beágyazott táblázatok, de ezek nem minden egymásba ágyazott.
Azt kell mondanom, hogy a túlnyomó többsége a sablonok ezen az oldalon, lefektetett elve szerint a beágyazott táblázatok. Remélem, hogy a sablonok szétszerelés elv itt tárgyalt segít megérteni a kódot. Táblázatok segítségével sokat segít, és megkönnyíti a kialakítása az elrendezés az oldal. Hadonászó asztalok tökéletesen kivetni tetszőlegesen bonyolult design. Azonban mindig tudja, mikor kell abbahagyni. Való túlzott táblázatok egyrészt megnehezíti kód olvasás; másrészt lassítja a böngészőt. Annak érdekében, hogy, mint minden üzleti - itt meg kell tudni, hogy mikor kell abbahagyni.
Ha valaki a fenti anyag valóban segített a szétszerelés minták, én nagyon boldog lesz. Sőt, boldog leszek, és hálás, ha hajlandó megmutatni a saját változatát sablonok - ilyen munkát én szívesen fel a helyszínen.