Svetainės maketavimas atliekamas dviem pagrindiniais būdais: lenteliniu ir blokiniu div maketus. Dėl CSS naudojimo blokų išdėstymas yra funkcionalesnis ir suteikia daugiau funkcijų.

Kaip veikia blokas?

Šio tipo išdėstymui atlikti naudojami du failai ( index.html ir style.css) su kodu HTML ir atitinkamai svetainės stilių.

Pirmajame faile jie rašomi tiesiogiai div- konteineriai, kurie yra savotiškas išdėstymo pagrindas, o antrasis apibūdina mūsų stiliaus ypatybes ir padėtį div- konteineriai.

Norėdami stebėti atliktų manipuliacijų rezultatus realiuoju laiku, naršyklės adreso juostoje turite įvesti: http://URL/testas.

Išdėstymo pagrindai

Dviejų stulpelių išdėstymas, kurį bandysime sukurti, gali būti pavaizduotas taip:

Visi mūsų maketo elementai turi būti sudėti į vieną bendrą, kad būtų galima nustatyti viso maketo parametrus. Bendrinamo konteinerio turinys bus div-s, kurios sudaro atskirus blokus. Naudojant CSS galime pritaikyti šiuos parametrus: dydį, vietą puslapyje, stilius ir spalvą.

Blokuoti svetainės išdėstymą

Kiekvienas išdėstymo elementas turi būti dedamas į atskirą konteinerį naudojant žymą div. Byloje CSS reikia pridėti elemento ypatybes, apibrėžiant elementų išvaizdos ir išdėstymo parametrus (plotis, aukštis, šriftas, dydis ir pan.).

Kad nesusipainiotumėte, kiekviename konteineryje turite įvesti šio bloko pavadinimą, jis atrodys maždaug taip:

"http://www.w3.org/TR/html4/loose.dtd">

Kepuraitė

Kairysis stulpelis

Puslapio turinys

Rūsys

Baigę manipuliacijas, turite atidaryti failą Stilius.css ir apibūdinkite šių konteinerių stilius. Visų pirma, būtina apibūdinti pagrindinių žymų stilius Turinys ir HTML, panaikindami puslapio paraštę, kad būtų užtikrintas suderinamumas tarp naršyklių:

kūnas, html (
paraštė: 0px;
užpildymas:0px;
}

kūnas, html (
paraštė: 0px;
užpildymas:0px;
}
#maket (
plotis: 800 pikselių;
paraštė: 0 automatinis;
}
#header(
fono spalva:#C0C000;
}
#left(
fono spalva:#00C0C0;
plotis: 200 pikselių;
plūdė:kairėje;
}
#turinys(
fono spalva:#8080FF;
paraštė-kairė: 202px;
}
#footer(
fono spalva: #FFC0FF;
}

Norėdami gauti išsamesnę meistriškumo klasę, kaip sukurti svetainę remiantis div, galite žiūrėti šiuos vaizdo įrašus:

https://www.youtube.com/watch?v=omyeH5h1lqA
https://www.youtube.com/watch?v=SQ7cWIy63yI

Pamokos tikslas:Įvadas į blokais pagrįstą CSS išdėstymą. Įgyti blokinio svetainės maketo naudojimo įgūdžių

• Dirbant su sluoksniais arba, kitaip tariant, blokais ir div elementais, pagrindinė našta tenka CSS, nes Be savybių sluoksniai praktiškai nieko.
• Deja, dirbant su blokais vis dar kyla problemų dėl kelių naršyklių suderinamumo. Tie. tos pačios savybės duoda skirtingus rezultatus skirtingose ​​naršyklėse. Siekiant kovoti su tokiomis problemomis, yra vadinamieji įsilaužimai. Nulaužti– tai technikų rinkinys, kai atskiroms naršyklėms pateikiamas kodas, kurį supranta tik ši naršyklė, o kiti ignoruoja.

Išskirtinės lentelės išdėstymo savybės

Tarkime, kad reikia sukurti puslapio šabloną su antrašte, porašte ir dviem stulpeliais.
Skirtumai:

Fiksuoto dizaino arba
standus blokų išdėstymas (dvi stulpeliai)

• Fiksuotas išdėstymas apima tam tikro pločio sluoksnių naudojimą, kuris nustatomas pagal vartotojo monitoriaus skiriamąją gebą.
• Kadangi tarp tinklo vartotojų populiariausia monitoriaus raiška yra 1024×768, patartina sutelkti dėmesį į ją. Bendras blokų plotis šiuo atveju yra 900–1000 pikselių (nedidelė pikselių dalis reikalinga slinkties juostoms ir naršyklės langų kraštinėms).
• Pagrindinis blokas su turiniu dedamas centre, tada „laisvos“ paraštės aplink kraštus atrodo gerai net ir esant didelei monitoriaus skyrai.

1 pav. Fiksuoto dizaino pavyzdys

Pavyzdys: sukurkite fiksuotą svetainės dizainą pagal aukščiau pateiktą vaizdą

• Visus pagrindinius puslapio elementus „suskirstome“ į blokus taip:
  • 1 blokas- pirmasis sluoksnis (id = "shapka"),
  • 2 ir 3 blokai yra viename bloke (id = "konteineris"),
  • 2 blokas- sluoksnis su meniu (id = "meniu"),
  • 3 blokas- sluoksnis su turiniu (id = "turinys"),
  • 4 blokas— sluoksnis su id="bottom" .

Leiskite mums schematiškai pavaizduoti blokų išdėstymą:

1. Nustatykite „antraštės“ ypatybes (1 blokas)

• Bendrą sluoksnių plotį pasirenkame „iš akies“ - 750 pikselių.

paraštė-dešinė: automatinis; paraštė-kairė: automatinis;

• arba nustatykite aukštį naudodami įtrauką

Pavyzdžiui:

paminkštinimas viršuje: 15px; paminkštinimas apačioje: 15 pikselių;

pamušalas-viršus: 15px; paminkštinimas-apačioje: 15px;

Visas antraštės kodas:

#shapka( text-align: left; /* Lygiuoti vidinį turinį į kairę */ plotis: 750 pikselių; /* Bloko plotis ir bendras plotis */ fonas: #900000; /* Fono spalva */ aukštis: 50 pikselių; /* Aukštis blokas */ paraštė dešinėje: auto /* Automatinė įtrauka į dešinę */ paraštė į kairę: automatinė /* Automatinė įtrauka į kairę */ užpildymas: 10 taškų )

2. Sukurkite konteinerio ypatybes

• Nustatykite sudėtinio rodinio plotį: jis turi būti 750 pikselių + 20 pikselių (bendras išdėstymo plotis + užpildymas bendrame išdėstymo plotyje). Tie. konteineris neturi užpildymo, todėl padidinkite jo plotį 10 pikselių kairėje ir 10 pikselių dešinėje
• Jei išdėstymas turi tilpti į kairę ekrano pusę, naršyklė tai padarys automatiškai. Mūsų atveju mes centruosime konteinerio bloką

#container ( plotis: 770 piks.; /* Sluoksnio plotis arba (išdėstymo plotis + 20) */ paraštė dešinėje: automatinė; /* Automatinė įtrauka į dešinę */ paraštė-kairė: automatinė; /* Automatinė įtrauka į kairę */ )

3. Sukurkite 2 bloko meniu savybes

• 2 sluoksnio numeris, kurio plotis 200 pikselių (plotis)
• Tam pačiam sluoksniui (meniu) nustatome srautą aplink gretimą bloką, t.y. turtas plūduriuoja: kairėje
• Vidines paraštes nustatome taip, kad tekstas „nepriliptų“ prie sluoksnio krašto (padding savybė)
• Nustatykite teksto ir fono spalvą (fonas, spalva)

#menu ( plotis: 200 piks.; /* Sluoksnio plotis */ slankioji: kairėn; spalva: balta; /* Teksto spalva */ fonas: #008080; /* Fono spalva */ užpildymas: 10 piks.; /* Vidinės paraštės aplink turinį */ )

4. Sukurkite 3 bloko – turinio savybes

• Nustatykite sluoksnio plotį nuo 770 piks. iki 200 piks. = 570 piks. Bet! Kadangi užpildymą nustatome tiek 2, tiek 3 blokuose, turime atimti dar 40 pikselių: 20 – meniu bloko užpildymui, o 20 – turinio bloko užpildymui. Gaukime sluoksnio plotį 770 piks. – 200 tšk. – 40 piks. = 530 piks.
• Mes nustatome apvyniojimą plaukioti: kairėje , neįskaitant „Internet Explorer“ naršyklės klaidos: jei nenustatysite nuosavybės, tarp sluoksnių atsiras tarpas. Be to, jei šios savybės nenustatysite, blokas atsiras už meniu bloko ir tik jo turinys (tekstas) tekės aplink meniu bloką dešinėje.
• Nustatykite fono spalvą (foną) ir vidines paraštes (pamušalas)

#content ( /* Dešinysis stulpelis */ plotis: 550 tšk.; /* Sluoksnio plotis */ slankusis: kairėje; /* Apvyniojimas gretimu sluoksniu */ užpildymas: 10 pikselių; /* Vidinės paraštės aplink turinį */ fonas: #e0e0e0; /* Fono spalva */ )

5. Sukurkite 4 bloko ypatybes – „rūsys“

• Nustatykite sluoksnio plotį iki 750 pikselių
• Šiam blokui reikia nuimti įvyniojimą, t.y. nustatyti aiškią savybę
• Vidinių užpildymo paraščių nustatymas
• Nustatykite fono (fono) ir teksto (spalvos) spalvą
• Centruokite bloką (paraštė - dešinė ir paraštė - kairė)

#bottom( width:750px; /* Sluoksnio plotis */ clear:left; /* grąžina blokavimą ir padėkite sluoksnį kairėje */ užpildymas: 10 pikselių; /* Vidinės paraštės aplink turinį */ fonas:#444; /* background */ color :#fff /* text color */ margin-right: auto /* Automatinis įtraukimas į dešinę */ margin-left: automatinis */ )

Galutinis kodas: viskas kartu

<stiliaus tipas = "text/css" >

1
2
3
4

Rezultatas:



2 pav. Tvirtas blokų išdėstymas su dviem kolonomis

Fiksuotas trijų stulpelių dizainas

Naudojant fiksuotą trijų stulpelių išdėstymo dizainą, yra du pagrindiniai modulinio tinklelio kūrimo būdai:

1. Ypatybės naudojimas stulpeliams išdėstyti vienas šalia kito.
2. Naudojant tų CSS savybių rinkinį, skirtą sluoksniams nustatyti.

Panagrinėkime pirmąjį atvejį.

Plūduriuojančios savybės naudojimas trijų stulpelių išdėstymui

Įjungta ryžių. 3— turto panaudojimo trijų stulpelių išdėstymui rezultatas. Tiesą sakant, naudojami 6 sluoksniai – atskirai stulpelių antraštėms ir atskirai pačioms stulpelėms.

Ryžiai. 3. Pataisytas trijų stulpelių dizainas

Pavyzdys: sukurti tinklalapį su trijų stulpelių išdėstymu, parodytu ryžių. 3. Naudokite fiksuoto bloko išdėstymo metodus

• Apibrėžkime tris sluoksnius antraštėms (#header...) ir tris sluoksnius stulpeliams (#col...).
• Kadangi stulpeliai ir jų antraštės yra dviejose skirtingose ​​eilutėse, juos sujungsime į konteinerius (class="container").
• Gauname scheminį blokų išdėstymo vaizdą:

Gauname tokią html struktūrą:

2. Antraštių (antraštės... parinkiklis) ir stulpelių (stulpelio... parinkiklis) stilių pridėjimas

• Stulpelių ir antraščių plotį padarysime visiems vienodus. Kadangi yra 3 stulpeliai, o vidutinis puslapio plotis turėtų būti maždaug 700-900 pikselių, stulpelio plotį nustatysime į 250 pikselių.

#header1, #header2, #header3, #col1, #col2, #col3 (plotis: 250 piks.; /* Stulpelio plotis */ )

• Pridėkime vidines paraštes (įtraukas iš teksto turinio) – užpildymą ir išorines įtraukas, kad tarp stulpelių būtų vietos. Kadangi ypatybės nustatomos visiems stulpeliams iš karto, o pats išdėstymas yra ne centre, o išlygiuotas į kairę, įtrauką nustatysime tik vienoje pusėje – kairėje – visiems stulpeliams vienu metu (margin-left ).

#header1, #header2, #header3, #col1, #col2, #col3 ( plotis: 250 tšk.; /* Stulpelio plotis */ užpildymas: 5 pikseliai; /* Paraštės aplink tekstą */ paraštės kairėje: 5 pikseliai; /* Kairė paraštė * / )

• Taip pat viršuje pridėsime išorinę paraštę, užtikrinančią vertikalų tarpą tarp antraščių ir stulpelių, taip pat paraštę antraštėms nuo puslapio viršaus (margin-top).

#antraštė1, #antraštė2, #antraštė3, #stulpelis1, #stulpelis2, #stulpelis3 ( ... plaukioti: kairėje; )

• Pridėkite blokų kraštą ir nustatykite šrifto parametrus (šrifto šeima, šrifto svoris, šrifto dydis, spalva).

#header1, #header2, #header3, #col1, #col2, #col3 ( ... kraštinė: 1px vientisa juoda; /* Kraštinė aplink sluoksnį */ šriftų šeima: Verdana, Arial, be serifo; /* Ne šriftas arba smulkintas šriftas */ šrifto dydis: 80% /* Šrifto dydis */ spalva: balta */ )

Mes gauname kodą:

#header1 , #header2 , #header3 , #col1 , #col2 , #col3 ( plotis : 250px ; /* Stulpelio plotis */ pamušalas: 5px; /* Paraštės aplink tekstą */ /* Viršutinis paminkštinimas */ plūdė: kairė; /* Sujungti stulpelius horizontaliai */ /* Kraštinė aplink sluoksnį */ /* Neserijinis arba sans serif šriftas */šrifto svoris: paryškintas; /* Pusjuodis pavadinimo tekstas */šrifto dydis: 80%; /* Šrifto dydis */ spalva: balta; /* Pavadinimo teksto spalva */ }

#header1, #header2, #header3, #col1, #col2, #col3 ( plotis: 250 tšk.; /* Stulpelio plotis */ užpildymas: 5 pikseliai; /* Paraštės aplink tekstą */ paraštės kairėje: 5 piks.; /* Kairė paraštė * / paraštės viršus: 2px; /* Viršutinė paraštė */ plaukimas: kairėn /* Stulpelių sujungimas horizontaliai */ kraštinė: vientisas juodas /* Rėmas aplink sluoksnį: Verdana, Arial, sans-serif; /* Ne serif arba sans serif šriftas */ šrifto svoris: paryškintas /* šrifto dydis: 80% /* Šrifto dydis */ spalva: balta;

• Kiekvienam parinkikliui nustatykime foną atskirai.

#header1 ( fonas : #B38541 ; ) #header2 ( fonas : #008159 ; ) #header3 ( fonas : #006077 ; ) #col1 ( fonas : #EBE0C5 ; ) #col2 ( fonas : #BBE1C4 ; ) #col3 ( fonas #ADD0D9 ;

#header1 ( fonas: #B38541; ) #header2 ( fonas: #008159; ) #header3 ( fonas: #006077; ) #col1 ( fonas: #EBE0C5; ) #col2 ( fonas: #BBE1C4; ) #col3 ( fonas: #ADD0D9;

Pažiūrėkime į tarpinį rezultatą:

Ryžiai. 4. Tarpinis rezultatas

3. Konteinerių stiliaus nustatymas

• Dabar reikia sujungti antraštes ir stulpelius į atskirus konteinerio sluoksnius ir suteikti jiems tinkamą stilių - atšaukti vyniojimą (išvalyti)

.container (aišku: abu; /* Atšaukia plūdinį vyniojimą */ }

Konteineris (skaidrus: abu; /* Atšaukia plūdinį įvyniojimą */ )

• Dabar belieka pakeisti teksto šriftą stulpeliuose, keičiant jo dydį, stilių ir spalvą.

#col1, #col2, #col3 ( šriftų šeima: "Times New Roman", Times, serif; /* Serif arba serif šriftas */ šrifto dydis: 100%; /* Šrifto dydis */ šrifto svoris: normalus ; /* Normalus stilius */ spalva: juoda /* Teksto spalva */ )

Galutinis kodas: viskas kartu

Rezultatas:

Ryžiai. 5. Rezultatas

Sluoksnio padėties nustatymas trijų stulpelių išdėstymui

Paimkime kaip pavyzdį maketą, susidedantį iš trijų stulpelių, atskirtų skiriamąja linija (6 pav.).

Ryžiai. 6. Sluoksnių išdėstymas trijų stulpelių išdėstymui su skirstytuvu

Pavyzdys: sukurti tinklalapį su trijų stulpelių išdėstymu su skiriamąja linija, parodyta ryžių. 6. Naudokite fiksuoto išdėstymo metodus su sluoksnių padėtimi

1. HTML kodo struktūros sukūrimas

• Šiam išdėstymui kiekvienam stulpeliui pakanka sukurti tris div sluoksnius.

Taigi struktūra bus paprasta:

2. Stulpelių stilių pridėjimas

• Nustatykime vienodą stulpelių plotį (plotį) ir vidines paraštes vertikaliai ir horizontaliai (padding).

#col1, #col2, #col3 (plotis: 250px; /* Stulpelio plotis */ užpildymas: 0 6px; )

• Norėdami pašalinti sluoksnių blokavimą, t.y. norėdami juos išdėstyti vienas šalia kito horizontaliai, turite nustatyti css float savybę.

#col1, #col2, #col3 { plotis: 250 piks; /* Stulpelio plotis */ kamšalas: 0 6 piks; /* Paraštės vertikaliai ir horizontaliai */ plūdė: paliko; /* Apvyniokite sluoksnius */ }

#col1, #col2, #col3 (plotis: 250px; /* Stulpelio plotis */ užpildymas: 0 6px; /* Vertikalios ir horizontalios paraštės */ slankioji: kairė; /* Sluoksnio apvyniojimas */ )

• Kadangi skiriamoji sienelė turi būti tik vidinėse sluoksnių pusėse, rėmelį reikia pridėti tik prie dviejų sluoksnių vienoje pusėje (kraštinėje).

#col1, #col2, #col3 (plotis: 250px; /* Stulpelio plotis */ užpildymas: 0 6px; /* Vertikalios ir horizontalios paraštės */ slankioji: kairė; /* Sluoksnio apvyniojimas */ ) #col1, #col2 ( kraštinė -dešinėje: 1px solid #000 /* Eilučių parinktys dešinėje nuo teksto */ )

Trijų stulpelių dizainas paruoštas!

Sveiki, draugai!

Mes ir toliau studijuojame maketavimą ir šiandien pereiname prie įdomiausios dalies.

Tikrai jau girdėjote šią koncepciją "bloko išdėstymas". Tačiau neišmanančiam žmogui ši sąvoka nieko nereiškia. Todėl: kas žino – gerai padaryta! Kas nežino, skaitykite atidžiau.

Bloko išdėstymas yra tinklalapio kodo išdėstymas naudojant universaliąsias sudėtinio rodinio žymas