Lessons HTML és CSS, 7. lecke
1. Alapvető fogalmak
Sok web-tervezők inkább moduláris elrendezés az oldalon. amely végre a címke
Az egység - ez gyakori téglalap alakú terület, amelynek több, tulajdonságok, mint például a keret, a területen, és a párnázás (1. ábra). Tartalom blokk bármi lehet - szöveg, kép, listák, űrlapok kitöltése, navigációs menü, stb
Frame (határ) - egy hurok, amelyre lehet határozni, jellemzők, mint a vastagsága, színe és típusa (szaggatott, szilárd, pontozott).
Fields (padding) - elválasztására a blokk tartalmát a hatálya alól, hogy a szöveg, például, nem volt egy „tompa”, hogy a falak a blokk.
Behúzások (különbözet) - egy üres tér között, a különböző egységek, amely lehetővé teszi egy előre meghatározott távolságban elhelyezni két egység egymáshoz képest.
Blocks, valamint egy táblázatot - ez elemei mindig található az oldalon függőlegesen. Azaz, ha a kód oldalon rögzített két egymást követő blokkokat, akkor jelenik meg a böngésző egy másikat. Ha kell, hogy tegyen egy pár blokk vízszintesen, a saját tulajdonságai adják nevezett paraméter „wrap» (float). De később ezt.
Ebben a cikkben fogunk létrehozni egy web-oldalt a blokkokat. Először hozzon létre egy konténert, amelyben a mi egymásra halmozott dobozok blokkokat. Az érthetőség kedvéért, az egyes egységek saját színe. A végeredmény kell lennie, mint a ábrán látható. 2.
A tartály tartalmazza öt modulból áll:
TOP - cap hely, általában tartalmazza a cég logóját, nevét, címét és szlogenek, keresés, navigáció;
CENTER - tartalmazza a fő az oldal szövegében;
FOOTER - site pince tartalmazó szerzői jogi és egyéb információkat a helyszín lehet előidézni a navigáció, ami annak a jele a jó ízlés.
A teszt a honlapunkon, szükségünk van egy minimum három legnépszerűbb böngésző - opera, Fire Fox, az Internet Explorer.
Leírás web-oldal többnyire történik a CSS dokumentumot.
2. „fix” design blokk elrendezés
1. Hozzon létre egy új dokumentumot a Jegyzettömb kiterjesztésű css, és mentse el mystyle.css.
2. Hozzon létre egy HTML-dokumentumot, és mentse el ugyanabban a mappában.
Meghatároztuk a honlapunkon összhangban DOCTYPE nevű Szigorú 1.0.
A követelmények nagyon szigorúak - Az összes tag, amelyek nem rendelkeznek a záró pár kell végződnie tér egy perjel / zárás előtt hegyes zárójel. De aztán ő is néz ki, mint egy DOCTYPE tag! Miért van az, hogy nem ez a különbség egy perjel? Egy egyszerű! Azt akartam, így a fejlesztők ilyen szigorú szabályok. De ez az egyetlen eset, amikor a szabály nem működik.
4. Az egyik vonal között címkék
és mystyle.css csatolja a dokumentumot egy dokumentum HTML (3. ábra).5. be a kódot, mint a 4. ábrán látható, a stíluslap.
# Ez a jel azt mondja, hogy ez az elem egy egyedi attribútumot használják a HTML dokumentumban egy div tag egyszerre.
6. hozzáadása mystyle.css cap hellyel (5. ábra).
7. add HTML dokumentum következő kódot a címke test (6. ábra).
És akkor a következő (7.).
A következő lépés a webhely elrendezését elrendezése a három blokk egymás vízszintesen ebben a blokk-kódolás, jellemzően használt úszóelem. Ez lehetővé teszi más elemeket tekerje körül a blokk jobbra vagy balra.
8. Nyissa meg a css-dokumentumot, és adjuk hozzá a következő kódot (8. ábra).
9. után azonnal a záró címke
illessze be a következő kódot (9. ábra).10. Nyissa meg a HTML-dokumentumot egy böngészőben. Meg kell nézni a következő (10. ábra).
11. Most adjunk hozzá egy blokk láblécet magad. A böngésző kell tüntetni a következő (11. ábra).
Tekintsük az attribútumok a relatív és abszolút.
Néha kell helyezni valamilyen blokk egy szigorúan meghatározott pozícióját a szülő.
Tekintsük a legegyszerűbb kódot.
- HTML-dokumentumban a szervezetben, amely be a kódot, ahogy a 12. ábrán látható.
Tegyük fel, hogy egy olyan helyre szeretne gyermeket blokk 20 pixel a bal oldalon és alul a bal felső sarokban a szülői egység.
Próbáljunk megtenni (vagyis a gyermek teljesen helymeghatározó egység viszonyítva a szülő).
2. Hozzon létre egy stíluslap, hogy melyik típusú kódlistá a 13. ábrán.
3. Ellenőrizze a web-oldalt a böngészőben. Itt van, mi történt (14. ábra). Ez nem az, amit akarunk, nem? A gyermek elem nem ment anyám és nagyapám (azaz TEST)!
A probléma megoldódott egészen egyszerűen, a szülő kap egy további pozíció: a relatív;
4. Változtassuk meg a kódot a stíluslapok ábra szerint 15.
5. Ellenőrizze a web-oldalt a böngészőben. Az eredmények a 16. ábrán Rate különbség.
Készítsen egy web-oldal, a megjelenése, amely látható az alábbi 17. ábra
3. "Rubber" blokk elrendezés saytmetodom
A feladatok az 1. és 2. megvizsgáltuk a „fix” által tervezett blokk elrendezés, mint Minden egység egy pontos érték szélessége és magassága pixelben.
Abban az esetben, „gumi” konstrukció blokk méret van megadva százalékában a képernyő szélességét. Magasság blokk mérete határozza meg a blokk tartalmát.
Feladat 3. Készítsen egy „gumi” blokk elrendezés a 18. ábrán látható.
1. Hozzon létre egy HTML kódolású dokumentum, amint azt a 19. ábra Mentse el a dokumentumot.
2. Hozzon létre egy stíluslap a 20. ábrán látható Mentse el a dokumentumot. Meg kell kap egy eredményt a 18. ábra ka.
3. méretének változtatása a böngésző, viselkedésének elemzéséhez az elrendezés.
4. Kombinált blokk elrendezés
Kombinált blokk elrendezés magában foglalja mind a fix szélességű blokkokat, és blokkolja százalékában a képernyő szélességéhez.
4. feladat létrehozása egy kombinált blokk elrendezés, mint a 21. ábrán látható.
1. Készítsen egy HTML-kódolású dokumentum, amint azt a 22. ábra.
2. Hozzon létre egy stíluslap ábra 23. Mentse el a dokumentumot. Meg kell kap egy eredményt a 21. ábra ka.
3. méretének változtatása a böngésző, viselkedésének elemzéséhez az elrendezés.
az elrendezés követelményeknek: