01.10.2013 01:04
73845
Paraqitja e gomës siti (si dhe faqosja fikse) fillon me krijimin e të ashtuquajturit skelet, ose kornizë për zhvillim të mëtejshëm. Në përgjithësi, paraqitja e html është një konstruktor. Së pari, krijohet kontejneri kryesor, baza e cila më pas do të jetë përgjegjëse për gjerësinë minimale dhe maksimale të të gjithë sitit, kufijve. Nëse bëni gjithçka në mënyrë korrekte, atëherë duke ndryshuar madhësinë maksimale, mund të rrisni madhësinë maksimale të faqes pa pothuajse asnjë modifikim të kodit (dhe ndonjëherë pa to fare), për shembull, nga 1280px në 1360px ose 1920px. Mos bëni gomë pa fund, pasi është e palexueshme në monitorë të mëdhenj. Opsioni ideal do të ishte paraqitja html, e cila përfshin të gjitha rezolucionet kryesore të ekranit, duke përfshirë ato celulare, për shembull, paraqitjen e lëngshme për rezolucionet e ekranit nga 240px në 1920px.
Ka disa lloje të paraqitjes html e cila është vizualisht e ndryshme. Le t'i hedhim një vështrim të shpejtë këtyre llojeve të paraqitjes përpara se të kalojmë në ndërtimin praktik të kornizës së telit:
Llojet e ndryshme vizuale të paraqitjes janë: Paraqitja gome, faqosja fikse, shtrirja adaptive. Paraqitja e përgjegjshme mund të kombinohet me paraqitjen fluide.
Karakteristikat e çdo lloji të paraqitjes:
1) Struktura e fiksuar- aftësia e kontejnerit të faqes kryesore për të pasur të njëjtën gjerësi pavarësisht nga rezolucioni i monitorit. Nëse ekrani është më i vogël se madhësia fikse e kontejnerit kryesor, atëherë shfaqet lëvizja anësore (lëvizje majtas dhe djathtas).
2) Paraqitja e gomës- aftësia e kontejnerit të vendndodhjes kryesore për t'u shtrirë në gjerësi nga dhe në madhësitë minimale dhe maksimale të specifikuara. Paraqitja e lëngut mund të jetë pa specifikuar minimumin (nuk do të duket shumë i mirë në ekranet më të vogla se Npx, objektet statike mund të rrjedhin mbi njëri-tjetrin, nëse nuk shtoni përshtatshmërinë) ose madhësinë maksimale, atëherë do të zgjerohet pafundësisht (imagjinoni se si artikulli do të shikojë rezolucionin 7000 px, pothuajse një rresht), kështu që një paraqitje e mirë html ka gjithmonë kufij të arsyeshëm. Prandaj, gjithmonë duhet të kontrolloni rezultatin e paraqitjes në rezolucione të ndryshme dhe në shfletues të ndryshëm.
3) Paraqitja adaptive- aftësia e kontejnerit kryesor dhe e çdo elementi të faqes për t'u përshtatur me rezolucionin e ekranit, duke ju lejuar kështu të ndryshoni madhësinë e shkronjave, vendndodhjen e objekteve, ngjyrën dhe gjithçka që mund të dëshironi. Për më tepër, kjo bëhet në mënyrë dinamike, pa veprim të përdoruesit, për shembull, duke përdorur pyetje mediatike që përcaktojnë automatikisht rezolucionin e monitorit, llojin e pajisjes (celular, smartphone, tablet) dhe zëvendësojnë vlerat e specifikuara në modalitetin automatik. Kjo ofron mundësi të mëdha. Për shembull, kur kombinoni një plan urbanistik të lëngshëm dhe të përgjegjshëm, mund të personalizoni shfaqjen e faqes, duke filluar nga rezolucionet më të vogla celulare deri te monitorët më të mëdhenj. Paraqitja e përgjegjshme nuk ndikon në funksionet e lëngshme ose fikse, ajo i plotëson ato.
Prandaj, opsioni më i mirë sot do të ishte paraqitja html, e ndërtuar fillimisht si një paraqitje fluide, për shembull 980px-1920px, e modernizuar në 240px duke përdorur një paraqitje reaguese. Dallimi kryesor duhet të mbahet mend gjithmonë:
Shtrirja e gomës funksionon vetëm me kontejnerë, ndërsa faqosja e përgjegjshme funksionon si me kontejnerët ashtu edhe me përmbajtjen e tyre, duke ju lejuar të ndryshoni objekte të tilla si fontin, zëvendësimin e një objekti me një tjetër dhe shumë më tepër në varësi të rezolucionit të ekranit ose pajisjes. Prandaj, përpiquni ta merrni parasysh këtë nuancë kur planifikoni dhe krijoni projektet tuaja dhe mbani mend se sot paraqitja e lëngshme në kombinim me paraqitjen adaptive konsiderohet një formë e mirë në ndërtimin e kantierit dhe nesër mund të bëhet një standard i pashprehur. Prandaj, që më vonë të mos keni nevojë të kapni hapin, është më mirë të ecim përpara sot, duke e bërë kombinimin e mësipërm normë për veten tonë.
Vlen gjithashtu të merret parasysh vlefshmëria e faqes gjatë kodimit.... Ekziston një mendim se sot vlefshmëria ndikon në tregues, të paktën në motorin e kërkimit Google. Prandaj, kur krijoni një projekt, gjithmonë ia vlen të shikoni në verifikuesin në internet dhe të kontrolloni vlefshmërinë, dhe, nëse është e mundur, të bëni sa më të vogël praninë e gabimeve. Zakonisht faqja kryesore e faqes kontrollohet për vlefshmëri. Është e zakonshme të përcaktohet vlefshmëria e faqes me të. Vlen gjithashtu të përmendet se shumica e CMS-ve kanë kod në disa vende që nuk e kalon validimin.
Shumë shpesh kjo mund të shihet në lajmet e plota, ku ka një redaktues vizual, veçanërisht me përdorimin e tepruar të formatimit dhe lloj-lloj theksimi me anë të vetë redaktorit. Por pa këtë, askund, kështu që nëse faqja kryesore e faqes vërtetohet, atëherë do të jetë një rezultat mjaft i denjë dhe faqet e brendshme mund të kalohen sa herë që të jetë e mundur. Ndonjëherë ju duhet të redaktoni edhe në motor, gjë që jo të gjithë mund ta bëjnë, kështu që çdo gjë ka nevojë për një masë të arsyeshme dhe vlefshmëria duhet të jetë një dukuri e zakonshme për një projektues layout, një normë ditore, por në të njëjtën kohë nuk duhet të kthehet në një mania që na detyron të bëjmë vlefshmërinë për hir të vlefshmërisë. Thjesht duhet të përpiqeni të bëni sa më cilësore të jetë e mundur dhe të zvogëloni numrin e gabimeve në minimum, brenda kufijve të aftësive tuaja. Në fund, nëse ka një duzinë gabimesh, faqja nuk do të ndalojë së punuari, kështu që as ju nuk duhet të keni frikë prej tyre.
Tani le të shkojmë drejtpërdrejt në krijimin e skeletit të faqes. e cila përdor paraqitjen e lëngjeve:
Së pari, ne duhet të bëjmë një standard të përgjithshëm, si gjithmonë, doctype, etiketat e shërbimit dhe të vendosim përmbajtjen e faqes së ardhshme midis etiketave
Kështu duket trupi fillestar i faqes., e cila nuk ka ende një kornizë dhe blloqe të brendshme. Ky është vetëm informacioni i nevojshëm për shfletuesin, një bibliotekë në internet për të lexuar html5, pasi është ende vetëm një rekomandim, dhe specifikimi është ende html 4.1, megjithëse përdorimi i gjerë i html5 tashmë është në lëvizje të plotë. Gjithashtu në etiketat e shërbimit ka meta etiketa, një titull dhe një skedar i stilit css është përfshirë për dizajnin vizual të kornizës sonë.
Për të krijuar kornizën kryesore, e cila do të ulet në 240 pikselë dhe do të rritet në 1920 pikselë, dhe në një rezolucion më të madh se 1920 px për t'u rreshtuar në qendër, duhet ta vendosni kontejnerin menjëherë pas etiketës së trupit dhe ta mbyllni atë përpara etiketës së mbylljes së trupit. E gjithë pjesa tjetër e mbushjes tashmë duhet të zbatohet brenda saj.
Zakonisht ky enë quhet me emra të ngjashëm, si mbështjellës, mbështjellës etj., që do të thotë se është një bllok mbështjellës që përfshin të gjithë përmbajtjen e paraqitjes kryesore, blloqet, përmbajtjen. Prandaj, ne nuk do të rikrijojmë rrotën, por do të përpiqemi të përdorim emrat e klasave të pranuara përgjithësisht.
Një klasë është një lloj pseudonimi për çdo kontejner që mund të shkruhet një herë dhe të përdoret kudo, një numër të pakufizuar herë.
Për shembull, nëse e shkruani klasën në stilet css, le të themi redblock, dhe t'i caktojmë një sfond të kuq, atëherë çdo bllok që i caktoni këtë klasë do të ketë një sfond të kuq. Caktimi i një klase është shumë i thjeshtë. Emri i kërkuar shkruhet në thonjëza në bllokun e kërkuar, për shembull, redblock ose mbështjellës, ose privetvasya. Kjo është një klasë abstrakte që ju mendoni vetë, si një pseudonim për një qenush.
Prandaj, kontejneri ynë i mbështjellësit, të cilit vendosëm t'i caktojmë klasën e mbështjellësit, mund të duket kështu:
Por, meqenëse jemi të sigurt se do të kemi vetëm një enë mbështjellëse në të gjithë sitin, është më e përshtatshme t'i caktojmë atij jo një klasë, por një identifikues. Identifikuesi ndryshon nga klasa në atë që klasa mund të përdoret aq sa është e nevojshme, dhe mund të ketë vetëm një identifikues në faqe. Identifikuesi ka një përparësi më të lartë, pasi është një, mund t'i referoheni në mënyrë specifike. Mund të krahasohet me një radhë në një stacion treni. Të gjithë dëgjuan njoftimin në stacionin hekurudhor, për shembull, qytetarja Kutuzova Adelina Matveyevna, shkoni te dispeçeri ...
Në këtë rast, një apel për një qytetare me emrin e saj të plotë është një analog i një identifikuesi në html (ata thonë gjithashtu ID, specialist ID, ID). Dhe një apel si pasagjerë të dashur, duke dërguar një tren..
Do të jetë e krahasueshme me klasën, pasi apeli shkon për të gjithë pasagjerët, pa një apel të veçantë.
Prania e një identifikuesi nuk ndalon përdorimin e një klase, për më tepër, i njëjti emër klase dhe identifikues (ID) janë të ndryshëm, dhe ju mund t'i referoheni një blloku të tillë ose sipas klasës ose id.
Për shembull:
Një dukuri e zakonshme që ju lejon të aksesoni një bllok të caktuar në disa mënyra. Por ky informacion është i një plani të përgjithshëm, për ngrohjen. Ky mësim supozon se ju tashmë keni një minimum të të kuptuarit dhe të kuptuarit teorik të sa më sipër.
Kjo do të thotë që ne nuk do ta komplikojmë procesin e quajtur faqosje e faqes, në bazë të të cilit blloku ynë do të ketë ende një ID dhe jo një klasë, në fund të fundit, është i një lloji, por nuk kemi nevojë për një klasë shtesë. edhe këtu. Prandaj, le të jetë kështu:
Korniza e telit është gati, tani sipas rregullave html5, do të përdorim etiketat semantike që e bëjnë më të lehtë për motorët e kërkimit të kuptojnë strukturën në mënyrë që gjëja kryesore të mos kalojë pa u vënë re. Përsëri, ne nuk do të ngarkojmë përshkrimin e etiketave në këtë mësim, për këtë ekziston një seksion i veçantë në të cilin etiketat html përshkruhen në detaje, me një demonstrim dhe aftësinë për të eksperimentuar vetë.
Unë do të doja të tërhiqja vëmendjen tuaj për faktin se fillimisht mësoheni me rregullin kryesor - pjesa e përmbajtjes në sytë e motorëve të kërkimit ka peshën më të madhe, aq më e lartë është në strukturë. Prandaj, kur bëni përbërjen, duhet ta merrni parasysh këtë pa dështuar, duke ndjekur këtë rregull:
Shiritat anësor dhe fundi duhet të vendosen në kodin burim më poshtë se pjesa kryesore, e cila duhet të theksohet me etiketën e artikullit, duke treguar përmbajtjen kryesore në motorin e kërkimit. Përveç kësaj, ne do të përdorim etiketat: header, main, article, anside, footer, qëllimi i të cilave është, para së gjithash, të tregojë rëndësinë semantike dhe përparësitë në strukturë. Prandaj, faqosja e paraqitjes sonë ende jo të rrjedhshme, pas shtimit të këtyre etiketave, do të duket kështu:
Kodi HTML
Shfaq kodin
Modeli i kornizës së telit
Për faqen e ardhshme
përmbajtjen
Kështu do të duket shablloni ynë html, por për të vizualizuar paraqitjen tonë, duhet të aplikojmë stilet css. Për ta bërë këtë, ne kemi përfshirë fletën tonë të stilit css në kokë, siç pritej. Tani mund t'i drejtohemi secilit bllok.
Për këtë, ne i caktuam ato mbi klasa dhe identifikues, në mënyrë që të mos ngatërrohet një div me një tjetër. Disa etiketa semantike, që i kemi në njëjës, nuk preken nga kjo, pasi mund t'i referohemi me emër si etiketë, edhe pa klasën dhe id. Kjo do të zvogëlojë madhësinë e skedarit të stilit dhe nuk do të ndikojë në rezultatin.
Pra, me kodin html, mendoj se gjithçka është e qartë, kjo është vetëm një kornizë e ardhshme pa fytyrë, dhe faqosja fluide arrihet duke manipuluar klasat css. Paraqitja e përgjegjshme ka të njëjtat rrënjë, kjo është css. Ato ju lejojnë të bëni paraqitjen live, duke iu përgjigjur madhësisë së ekranit. Prandaj, veprimet e mëtejshme do të kryhen me fletën e stilit css.
Ne nuk do të mbulojmë çdo hyrje pasi ky është një standard që gjendet në çdo skedar stili. Ne fokusohemi vetëm në metodën që lejon që shiritat anësor të qëndrojnë të fiksuara, dhe në të njëjtën kohë pjesa qendrore shtrihet nga gjerësia minimale në atë maksimale, të cilën do ta vendosim vetë, dhe do të jetë në intervalin 240px - 1920px.
Tani përpara se të filloni të rishikoni kodin css(në të cilën nuk ka asgjë të tepërt, kam lënë vetëm atë që nevojitet për këtë mësim, plus për dukshmëri kam shtuar një sfond për blloqet dhe një lartësi minimale në mënyrë që blloqet të shihen mirë), le t'i kushtojmë vëmendje disa nuancave :
1) Nëse shikoni nga afër, fundi i faqes është jashtë kontejnerit kryesor. Kjo nuk është rastësi, pasi kjo rregullim do të bëjë të mundur shtypjen e fundit deri në fund. Unë mendoj se shumë kanë parë një fund në faqet e internetit që mbetet në fund në çdo shkallë. Dhe shumë donin të dinin se si bëhet kjo. Prandaj, unë do të shpjegoj mekanizmin gjatë rrugës, pas së cilës gjithçka do të bëhet e qartë.
2) Shumë njerëz, pasi kanë parë një fund 100% të shtrirë dhe një kokë, dhe një qendër gome në sit, tashmë e konsiderojnë atë një dizajn të përgjegjshëm. Kjo nuk është plotësisht e vërtetë, përshtatshmëria është një koncept më i gjerë dhe transformime më të përsosura, por kjo nuk mbulohet në këtë mësim. Sidoqoftë, paraqitja e lëngjeve mund të jetë e llojeve të ndryshme, duke përfshirë atë të përmendur më sipër. Prandaj, le të modernizojmë menjëherë shabllonin tonë në mënyrë që në fund koka dhe fundi të jenë gjithmonë 100%, por pjesa e dukshme e përmbajtjes që ato përmbajnë të jetë nga 240px në 1920px dhe e përqendruar.
Kjo është metoda që kam përdorur në këtë faqe.
3) Prandaj, ne duhet të shtojmë diçka tjetër në paraqitjen tonë në mënyrë që të zbatojmë idetë e përshkruara në paragrafin e dytë. Pra, në mënyrë që futeri dhe koka jonë të jenë gjithmonë 100% (zakonisht këto blloqe janë të mbushura me sfond, imazhe, etj.) dhe në të njëjtën kohë mbushja e tyre nuk shkon përtej 1920 px, do të bëjmë sa më poshtë:
1) Nxirrni
2) Le të krijojmë disa blloqe me të njëjtën klasë, për shembull, unë zakonisht e quaj atë .maxw, kështu që nuk do të devijoj nga rregullat e mia. Le ta shtojmë atë në kokë dhe në fund, dhe ta caktojmë këtë klasë në seksionin tonë kryesor me klasën .section. Ne gjithashtu do të shtojmë një kusht për versionet më të vjetra të IE, me një thirrje për një grup rregullash, me kusht që të futet nga IE< 9 (если такие пользователи еще есть), и специальный метатег metaemri="
porta e shikimit"
për raportin e saktë të shkallës në pajisje të tilla si tablet, smartphone, etj. (ka patjetër përdorues të tillë).
3) Për të kontrolluar sjelljen e blloqeve tona në rezolucionet e ekranit nën 980px, shtoni rregullat @media në fund të fletës së stilit, në të cilën shkruajmë ndryshimet e nevojshme për blloqe të caktuara, në rastin tonë për shiritat anësor. Le t'i bëjmë ato të lëvizin nën pjesën e përmbajtjes në rezolucionin e ekranit nën 980 px dhe t'i rreshtojmë në qendër.
Si rezultat, faqosja jonë html do të duket si kjo:
Kodi përfundimtar html
Shfaq kodin html
Modeli i kornizës së telit
Për faqen e ardhshme
përmbajtjen
Fleta jonë e stilit do të duket kështu:
Kodi Css
Shfaq kodin css
* (diferencë: 0; mbushje: 0;) html (lartësia: 100%;) koka, navi, seksioni, kryesore, artikulli, mënjanë, fundi (ekrani: bllok;) trupi (lartësia: 100%; gjerësia: 100%; sfond: #fefefe;) .maxw (diferencë: 0 automatik; min-gjerësia: 240 pikselë; gjerësia maksimale: 1920 px;) koka (minim-gjerësia: 240 px; gjerësia: 100%; lartësia: 220 px; sfondi: # 74C9FF;) #mbështjellës (pozicioni: relative; margjina: 0 automatik; lartësia: automatik! e rëndësishme; lartësia: 100%; / * lartësia min: 100%; - Nevojitet për të shtyrë fundin në fund * / mbushja: 5 px 0;) . seksioni ( gjerësia: 100%; mbushja: 0 0 220 pikselë; pozicioni: relative;) .seksioni: pas (përmbajtja: ""; i qartë: të dyja; shfaqja: tabela;) .mbështjellja kryesore (gjerësia: 100%; notimi: majtas; vërshimi : e fshehur ;) kryesore (mbushje: 0 240 pikselë 0 240 px; lartësia min: 350 px; diferencë: 0;) artikull (mbushje: 0 5 px; diferencë: 0 5 px; sfond: # EAF2F5; min-lartësia: 350 px;) #s_ft (lundrues: majtas; gjerësia: 240 px; margjina-majtas: -100%; majtas: 0; pozicioni: relative; sfondi: # E88139; min-lartësia: 350 px;) #s_right (fl tërshërë: majtas; gjerësia: 240 px; margjina-majtas: -240px; djathtas: 0; pozicioni: i afërm; sfond: # E86A3B; Min-lartësia: 350px; ) footer (margjina: -220 px automatike 0; gjerësia: 100%; min-gjerësia: 240 px; lartësia: 220 px; sfondi: # AFBFC6; pozicioni: relative;) / * Për shfaqje në pajisjet më të vogla se 980 px * / ekran @media dhe (min-gjerësia: 240px) dhe (gjerësia maksimale: 479px) (kryesore (mbushja: 10px;) #s_left (mbushje: 0; margjina: 0 automatik; notues: asnjë; i qartë: të dyja; majtas: 0;) #s_djathtas ( mbushje: 0; margjina: 0 automatik; lundrues: asnjë; i qartë: të dyja; djathtas: 0;)) Ekrani @media dhe (gjerësia minimale: 480 px) dhe (gjerësia maksimale: 799 px) (kryesore (mbushja: 10 px; ) #s_left (mbushje: 0; margjina: 0 automatike; float: asnjë; qartë: të dyja; majtas: 0;) #s_right (mbushje: 0; margjina: 0 automatik; float: asnjë; qartë: të dyja; djathtas: 0; ) ) Ekrani @media dhe (gjerësia min.: 800 pikselë) dhe (gjerësia maksimale: 979 px) (kryesore (mbushja: 10 px;) #s_left (mbushje: 0; margjina: 0 automatik; lundrues: asnjë; i qartë: të dyja; majtas : 0;) #s_right (mbushje: 0; margjina: 0 automatike; float: asnjë; qartë: të dyja; djathtas: 0;))
Tani le të hedhim një vështrim në hapat e fundit me paraqitjen tonë dhe të shqyrtojmë nuancat kryesore të paraqitjes së lëngut, për shkak të së cilës nuk kemi marrë një kornizë statike, por një gome.
1) Ne e zhvendosëm kokën jashtë kufijve, pasi në versionin e parë ishte brenda kontejnerit mbështjellës. Dhe kontejneri mbështjellës, nga ana tjetër, ishte maksimumi 1920 px, siç u përmend në fillim. Kjo nuk do të bënte të mundur bërjen e kokës 100% të gjerë, ajo do të qëndronte kundër 1920px mëmë. Prandaj, hoqëm gjerësinë maksimale nga zarfi dhe e sollëm jashtë, plus krijuam klasën a.maxw, së cilës i caktuam këto maksimum 1920px dhe shtrirjen në qendër. Tani kemi se 1920px do të jetë për çdo bllok me klasën .maxw. Prandaj, brenda header-it dhe footer-it vendosim një kontejner div me këtë klasë, në mënyrë që gjithçka brenda saj të shtrihet nga 240px në 1920px, dhe do të përqendrohet nëse rezolucioni është më i madh se 1920px. Kjo mund të shihet duke ndryshuar rezolucionin me shkallën, për shembull, me rrëshqitësin në opera.
2) Futeri i shtypur deri në fund. Ky është gjithashtu një tipar i rëndësishëm i paraqitjes. Këtu sekreti është ky:
Vetë footer-i ndodhet jashtë kontejnerit mbështjellës, i cili, nga ana tjetër, ka 100% lartësi. Gjithashtu një seksion që ndodhet brenda një zarfi, por që mbështillet rreth shiritave anësor dhe në qendër të vetvetes, duke e mbushur pjesën e poshtme me lartësinë e futbollit duke përdorur mbushje. Kjo krijon një hapësirë boshe në fund poshtë përmbajtjes. Meqenëse lartësia është 100%, dhe fundi i faqes është jashtë bllokut, ai zhvendoset jashtë pamjes me një distancë të barabartë me lartësinë e saj. Duke e mbushur pjesën e poshtme me mbushje: 0 0 100 px, ne po përgatisim hapësirën që fundi të kompensohet nga një lartësi negative. Kjo do të futë pjesën e sipërme në rend të kundërt, që do të thotë se do të lëvizë deri në lartësinë e saj. Ne përfundojmë me një mbushje të poshtme 100 px, një fund të faqes të zhvendosur 100 px poshtë ekranit dhe ky është një pozicion konstant. Kur i japim footer-it margjinën e komandës: -100px auto 0, kështu po e ngremë atë nga poshtë pjesës së poshtme të ekranit në zgavrën e krijuar. Si rezultat, ne kemi një fund të shtypur në fund të ekranit.
3) Paraqitja e gomës është me interes për shumë njerëz, kështu që mësimi ynë i kushtohet paraqitjes së faqes, më saktë, paraqitjes së skeletit të sitit, i cili duhet të ketë dy shirita anësor me gjerësi fikse, në rastin tonë është 240 px, por në të njëjtën kohë, në çdo ekran nga 240px në 1920px, skeleti ynë duhet të shtrihet në mënyrë arbitrare përgjatë gjerësisë, dhe faqosja html duhet të kuptojë se ne duhet të shtrijmë vetëm pjesën qendrore, mos prekni shiritin anësor!
Epo, kështu duhet të jetë. Paraqitja është gati. Na mbetet të kuptojmë pse ajo sillet në këtë mënyrë?
Kontejneri i mbështjelljes është mjaft i qartë, por si i mban faqosja html shiritat anësor ndërsa shtrin pjesën e përmbajtjes?
Gjithçka këtu nuk është aq e komplikuar sa mund të duket në shikim të parë. Layout i stileve css, kjo është gjithashtu layout, që do të thotë se i bindet disa rregullave për paraqitjen e stileve të faqes.
Një rol të rëndësishëm në këtë luhet nga dhëmbëzimi majtas dhe djathtas, të cilin e kemi përshkruar për etiketën e artikullit. Nëse shikoni kodin html, do të shohim se ekziston një kontejner i caktuar me id = kontejner, i cili ka gjerësi 100%. Brenda tij ndodhet artikulli ynë, i cili ka mbushje majtas dhe djathtas: 10px 270px. Por gjerësia për të nuk është e specifikuar, dhe duke qenë se ka ekran: bllok (ne kemi specifikuar për elementët html5 në mënyrë që ata të pushojnë së qeni inline), do të jetë gjerësia e plotë dhe pa pasur një gjerësi të qartë, mbushja brenda do të jetë brenda kontejnerit, jo pas tyre. Falë këtij kombinimi, ne kemi id = enë, brenda së cilës është artikulli me mbushje majtas dhe djathtas me 270 px. Ne kemi shirita anësor 240 pikselë dhe 20 px secila për dhëmbëzimet nga artikulli qendror.
Tani mbani mend atë që kam shkruar më lart për fundin e shtypur. Dhe nëse keni harruar: kthehuni dhe rilexoni, faqosja e lëngshme nuk është një fjalëkryq, nuk ka nevojë të merret me mend, paraqitja html kërkon saktësi dhe kujdes. Pra, paraqitja e lëngjeve përdor të njëjtin parim si futeri i shtypur në fund, vetëm se kishte një zhvendosje vertikale, dhe këtu një horizontale.
Mbyllet
Prekja e fundit është të vendosim saktë shiritat tanë anësor në mënyrë që ata të kuptojnë se ne jemi të vetëdijshëm se çfarë është faqosja e faqes dhe të shkojmë aty ku u tregojmë. Për ta bërë këtë, ju mund të lidhni logjikën. Nëse blloku nuk përshtatet në gjerësi, atëherë ai lëviz poshtë. Dhe nëse numrat negativë mbështeten në pozicionim, atëherë ne mund ta bëjmë efektin të funksionojë në rend të kundërt.
Blloku i majtë vjen i pari, kështu që le t'i japim një diferencë negative të diferencës së majtë: -100%, dhe ai do të mashtrojë veten duke u shfaqur pikërisht në hapësirën boshe që artikulli ka përgatitur për ne. Paraqitja është e mirë, paraqitja e lëngshme është edhe më e mirë, dhe paraqitja e përfunduar është edhe më e mirë, veçanërisht pas betejave të gjata. Prandaj, një gjuajtje kontrolli ndaj kundërshtarit tonë, e quajtur layout gome, është një zhvendosje e shiritit anësor të djathtë nga gjerësia e saj në të majtë. Pse u largua?
Po, sepse ishte djathtas, nuk përshtatej me 240 px, dhe u zhvendos poshtë në këndin e majtë, gjithçka është sipas rregullave, html nuk ka faj këtu, dhe css është gjithashtu me karakter. Prandaj, margin-left: -240px do të zgjidhë problemin e mbetur duke lëvizur bllokun e djathtë pikërisht në hapësirën boshe të përgatitur në të djathtë të anash.
Epo, këtu kemi ekzaminuar, renditur të gjitha vendet e hijes së paraqitjes së gomës të paraqitjes në raftet. Për shembull, ne kontrolluam gjithçka, burimet janë bashkangjitur. Layout është një biznes që kërkon aftësi të vazhdueshme, qoftë gome apo fikse. Paraqitja e përgjegjshme është një temë më vete. Ndoshta në mësimin tjetër nuk do të bëjmë një kornizë teli nga e para, ne tashmë e kemi atë. Më mirë shtojmë përshtatshmërinë ekzistueses, luajmë me fontin, ndryshojmë sfondin, imazhet në varësi të rezolucionit të ekranit, në përgjithësi, do të analizojmë në detaje nuancat e paraqitjes, më saktë, paraqitjen adaptive. Dhe mos harroni të kontrolloni vlefshmërinë e html pas paraqitjes së faqes, sigurisht që nuk do të përkeqësohet.
Më poshtë është bashkangjitur burimi me paraqitjen e përfunduar, i cili mund të shkarkohet. Nëse dëshironi të ndryshoni diçka, për shembull, numrin e shiritave anësor ose ID-të e tyre, lartësinë e kokës ose të fundit të faqes dhe ndryshime të tjera, atëherë thjesht mund të përdorni gjeneratorin falas të paraqitjes së kornizës teli në internet. Ju mund të krijoni një kornizë teli me një plan urbanistik fiks ose të merrni një plan urbanistik të lëngshëm + kushte të përcaktuara për një plan urbanistik adaptiv.
E gjithë kjo mund të bëhet në gjeneratorin tonë të shablloneve.
Paraqitja e gomës
"Paraqitja e gomës
Të gjithë shabllonet që krijuam kishin një gjerësi fikse: domethënë, gjerësia e njësive, kolonave, zonave, etj. mbetet konstante kur dritarja e shfletuesit ndryshohet. Shumica e faqeve të suksesshme komerciale e kanë përdorur këtë parim që nga ardhja e internetit. Kjo qasje është dëshmuar të jetë metoda më efektive e paraqitjes për krijimin e dizajneve cilësore në mjedise që nuk janë gjithmonë miqësore me projektuesit.
Megjithatë, nuk mund të mos e konsideroj Paraqitja "gome".- krijimi i faqeve që ndryshojnë madhësinë në varësi të zonës së shikimit.
Dizajnerët duan të krijojnë faqe interneti që marrin vërtet parasysh preferencat e përdoruesve. Prandaj, nuk mund të hidhen poshtë argumentet e forta të synuara kundër faqe me gjerësi fikse dhe ndërhyrës per Paraqitja "gome". Në thelb, një gjerësi fikse e faqes së internetit pasqyron tendencën e projektuesit për të kontrolluar përdorimin aktual, ndërsa faqet që ndryshojnë me portin e shikimit janë kryesisht të përgjegjshme ndaj nevojave të përdoruesit.
Mund të themi se me një madhësi të madhe ekrani, faqja duhet të zërë të gjithë zonën e disponueshme, dhe me një madhësi të vogël, duhet të zvogëlohet në përputhje me rrethanat. Nuk do të ishte plotësisht e drejtë të thuhet se faqosja "fluid" po përpiqet të përshtatet me të gjithë përdoruesit, por ka një detyrë të ngjashme. Interneti është një konglomerat i shumë sistemeve që u shërbejnë grupeve të mëdha të përdoruesve në mënyra që i përshtaten më mirë nevojave të tyre individuale. Pajtohem që i njëjti perceptim i përmbajtjes ose funksionalitetit të të njëjtit sajt është i pamundur. Pse pamja duhet të jetë e njëjtë për të gjithë? Paraqitja "fluid" është më e përshtatshme për internetin dhe merr parasysh më mirë pikat e forta dhe të dobëta të tij sesa faqet me madhësi fikse. Siç u përmend më herët, sa më e natyrshme të jetë zgjidhja, aq më efektive është.
Deri vonë, mundësitë e dizajnit të ueb-it nuk na lejonin të shijonim plotësisht paraqitjen "fluid". Aftësitë e reja të shfletuesit, së bashku me veçoritë e reja që i përgjigjen pajisjes në CSS dhe JavaScript, u mundësojnë projektuesve të krijojnë faqe shumë më dinamike.
Dizajnerët novatorë tani mund të bëjnë të ashtuquajturin dizajn "reagues" të uebit. Ethan Marcotte, një mbështetës i zjarrtë, argumenton se kjo qasje hap mundësi të reja:
Ju mund ta bëni sitin nga jashtë të përshtatshëm dhe tërheqës, duke përdorur teknologji standarde, në mënyrë që faqja jo vetëm të jetë më fleksibël, por edhe të përshtatet me mjedisin në të cilin zbatohet.
Këto teknologji po zhvillohen jashtëzakonisht shpejt, kështu që vendosa të mos i trajtoj në librin tim. Praktikat më të mira për dizajn të përgjegjshëm të uebit nuk janë gjetur ende.
Megjithatë, parimet bazë të projektimit mbeten të vlefshme pavarësisht nga zhvillimi i një qasjeje të re. Është gjithashtu e vërtetë që dizajnerët duhet të vazhdojnë të ndajnë fuqinë e menaxhimit të veprave të tyre artistike me përdoruesit që duan të kontrollojnë veprimet e tyre. Do të ishte gabim të mendosh se dizajni i përgjegjshëm i uebit do të thotë t'u japësh përdoruesve kontroll të plotë, sepse ajo që ata vërtet kanë nevojë është disa funksione. Përdoruesit shpresojnë që dizajnerët jo vetëm që do t'u ofrojnë atyre një lloj lëkure, por edhe do ta modifikojnë atë mjaftueshëm për t'u manipuluar.
Projektuesi duhet të marrë disa vendime për përdoruesin, por jo të gjitha, por vetëm ato që ndihmojnë në perceptim. Projektuesi i lejon përdoruesit të kontrollojë aspektet e perceptimit që janë më të rëndësishmet për qëllimet e tij, por në të njëjtën kohë përdoruesi duhet të ndjejë stabilitet dhe besueshmëri.
Dizajni i përgjegjshëm i uebit nuk e bën këtë detyrë më të lehtë. Në fakt, ai e ndërlikon atë. Do të ketë edhe më shumë situata për t'u marrë në konsideratë, më shumë kombinime të elementeve të ndërfaqes së përdoruesit në kombinime të ndryshme, të cilat do ta bëjnë të vështirë perceptimin e faqeve. Kjo e bën rrjetin edhe më të rëndësishëm për dizajnin e përgjithshëm; krijimi i një rrjeti të fortë në zemër të dizajnit të përgjegjshëm të uebit do ta bëjë atë më të qëndrueshëm dhe të besueshëm.
Të njëjtat parime të projektimit të bazuara në rrjet mund të përdoren si në paraqitjet e lëngëta ashtu edhe në dizajnet e përgjegjshme të uebit. Njësitë mund të kombinohen në kolona dhe zona, dhe madhësitë e elementeve mund të ndryshohen në varësi të parametrave kryesorë të rrjetit. Këta elementë duhet të rriten dhe tkurren në përputhje me të njëjtat parametra, por është e rëndësishme të mbani mend se jo gjithçka duhet të ndryshojë. Disa elementë mund dhe duhet të mbeten të pandryshuar. Në një mjedis ku elementët ndryshojnë përmasat pafundësisht, është shumë e rëndësishme të ruhet konsistenca, t'u ofrohen përdoruesve disa udhëzime. Me zhvillimin e kësaj teorie, do të ketë mundësi të reja për dizajnerët që punojnë në këtë fushë. Por roli qendror i projektuesit do të mbetet i pandryshuar - personi që drejton përvojën e përdoruesit.
Nga libri Adobe InDesign CS3 autori Zavgorodny VladimirParaqitja me shumë kolona Karakteristika kryesore e çdo dizajni gazete është paraqitja me shumë kolona. Meqenëse është e vështirë të imagjinohet një rresht i gjatë sa një rrip i plotë gazete, projektuesi e ndan shiritin në kolona të veçanta; numri i tyre varet nga formati i gazetës.
Nga libri i 300 programeve më të mira për të gjitha rastet autori Leontiev Vitaly PetrovichParaqitja me ilustrime Një veçori tjetër e paraqitjes së revistës që është e rëndësishme të kihet parasysh është numri më i madh i imazheve. Ndërsa një ose dy ilustrime janë të mjaftueshme për një artikull gazete (një më i shkurtër që zë një pjesë të një faqeje), atëherë artikujt më të gjatë të revistave kërkojnë
Nga libri Për çfarë ata nuk shkruajnë në librat e Delphi autori Grigoriev A.B.Dizajni përfundimtar dhe faqosja e fletëpalosjes Detyra e parë në dizajnin përfundimtar të fletëpalosjes është dizenjimi i mbishkrimit "E re", e cila me siguri ka qenë prej kohësh "një dhimbje e syve" për lexuesit tanë. Për dekorim do të zgjedhim një teknikë të thjeshtë vizuale. që përdoret kaq shpesh në
Nga libri HTML 5, CSS 3 dhe Web 2.0. Zhvillimi i faqeve moderne të internetit. autori Dronov VladimirParaqitja përfundimtare e shiritit Paraqitja përfundimtare e shiritit në rastin tonë do të reduktohet në veprimet e mëposhtme: vendosja e informacionit të shërbimit në shirit (për shembull, kokat dhe fundet); mbushja e shiritit me tekst real (programe reale televizive, përzgjedhje reale
Nga libri HTML 5, CSS 3 dhe Web 2.0. Zhvillimi i faqeve moderne të internetit autori Dronov VladimirParaqitja e tekstit Detyra e parë e paraqitjes është stilimi i tekstit të importuar. Ju gjithashtu duhet të hiqni linjat shtesë bosh (të cilat zakonisht përdoren për titujt dhe kornizat në grup), duke lënë vetëm një vijë bosh midis tekstit të kornizës dhe normales së mëposhtme.
Nga libri Mobile First! autor Wroblewski LukeParaqitja dhe shtypja paraprake e tekstit
Nga libri i autorit1.3.4.2. Rubber Line dhe Raster Operacionet Tani duhet t'i japim përdoruesit mundësinë për të vizatuar linja. Për këtë ne përdorim një linjë standarde "gome": përdoruesi shtyp butonin e majtë të miut dhe, duke e mbajtur atë, lëviz miun. Për sa kohë që butoni mbahet i shtypur,
Nga libri i autorit Nga libri i autoritParaqitja me shumë kolona Paraqitja me shumë kolona është diçka që i ka munguar dizajnit të uebit për një kohë të gjatë. Disa entuziastë e kanë zbatuar prej kohësh duke përdorur tabela ose kontejnerë, por tani ata kanë mjete "ligjore" për të ndarë tekstin në një numër arbitrar kolonash,
Nga libri i autorit7 Layout PARIMET E ORGANIZIMIT TË PËRMBAJTJES dhe elementët e ndërfaqes të përdorura në zhvillimin e dizajnit të faqeve konvencionale, padyshim, mund të jenë të dobishëm në dizajnimin e aplikacioneve në ueb celular. Por si të sigurohemi që këto parime do të zbatohen për cilindo
Vlad Merzheviç
Paraqitja e lëngut me tre kolona është padyshim paraqitja më fleksibël dhe më e personalizueshme atje. Kombinimi i përqindjeve dhe pikselëve për të specifikuar gjerësinë e kolonave ju lejon të krijoni paraqitje të ndryshme, duke i zgjedhur ato sipas nevojave tuaja. Në fig. 5.17 paraqet opsionet për paraqitjet me tre kolona, për lehtësi ato janë të numëruara.
Oriz. 5.17. Paraqitjet me tre kolona
Këtu, simboli i përqindjes (%) do të thotë se gjerësia e kolonës është specifikuar si përqindje e gjerësisë së paraqitjes, px - gjerësia e kolonës është e specifikuar në piksel dhe shenja e pafundësisë (∞) do të thotë që kolona zë hapësirën e mbetur. Pavarësisht nga bollëku i paraqitjeve të ndryshme, parimet e ndërtimit të tyre mbeten të njëjta dhe përfshijnë dy metoda kryesore: pozicionimin dhe elementët lundrues. Ju gjithashtu mund të përdorni tabela për të krijuar kolona me lartësi të barabartë.
Përdorimi i pozicionimit
Për të kontrolluar pozicionin e shtresave në lidhje me elementin prind, duhet të vendosni veçorinë e pozicionit në relative për prindin dhe absolute me elementët fëmijë që formojnë kolonat. Struktura e kodit për katër paraqitjet e para do të jetë e njëjtë dhe tregohet në shembullin 5.13.
Shembulli 5.13. Dy kolona në piksele ose tre në përqindje
Këtu kolonat numërohen sipas radhës, d.m.th. Kolona 1 është në të majtë, kolona 2 është në qendër dhe kolona 3 është në të djathtë.
Pozicionimi ka një pengesë të caktuar që kufizon përdorimin e kësaj metode - kur shtoni një fund, ai do të fshihet nën kolona. Kjo është për shkak se shtresa e paraqitjes nuk ka lartësi në vetvete, kështu që nuk e "shtyn" shtresën e fundit të faqes. Nëse një footer është absolutisht i nevojshëm në një faqe, duhet të përdorni metodën e ndërtimit të kolonave bazuar në elementë lundrues. Gjithashtu, kjo metodë nuk funksionon në IE6 për shkak të pranisë së gabimeve në të.
Për paraqitjen # 1, në të cilën gjerësia e kolonës së parë është e lëngshme dhe pjesa tjetër janë fikse, stili do të jetë si më poshtë (shembulli 5.14).
Shembulli 5.14. Paraqitja nr. 1
Header (sfondi: # D5BAE4;) .paraqitja (pozicioni: relative; / * Pozicionimi relativ * /) .faqja DIV (pozicioni: absolut; / * Pozicionimi absolut * /) .col1 (sfondi: # C7E3E4; / * Ngjyra e sfondit * / majtas: 0; / * Pozicioni i skajit të majtë * / djathtas: 300 px; / * Pozicioni i skajit të djathtë * /) .col2 (sfondi: # E0D2C7; gjerësia: 200 px; / * Gjerësia e kolonës * / djathtas: 100 px; / * Zhvendosja majtas sipas gjerësisë së kolonës 3 * /) .col3 (sfondi: # ECD5DE; gjerësia: 100 px; djathtas: 0;)
Kolonat me gjerësi të caktuar kanë një veti gjerësie, dhe pozicioni i tyre majtas ose djathtas përcaktohet nga vetia majtas ose djathtas, përkatësisht. Gjerësia e gomës së kolonës së mbetur ndërtohet pas shtimit majtas dhe djathtas në të njëjtën kohë, vlerat e të cilave janë të njëjta me gjerësinë e kolonave fikse.
Paraqitjet nr. 2 (shembulli 5.15) dhe nr. 3 (shembulli 5.16) janë ndërtuar mbi të njëjtin parim.
Shembulli 5.15. Paraqitja nr. 2
Koka (sfondi: # D5BAE4;) .paraqitja (pozicioni: relative;) .paraqitja DIV (pozicioni: absolute;) .col1 (sfondi: # C7E3E4; gjerësia: 100 px;) .col2 (sfondi: # E0D2C7; majtas: 100 px; djathtas: 200 px;) .col3 (sfondi: # ECD5DE; gjerësia: 200 px; djathtas: 0;)
Shembulli 5.16. Paraqitja nr. 3
Header (sfondi: # D5BAE4;) .faqja (pozicioni: relative;) .faqja DIV (pozicioni: absolute;) .col1 (sfondi: # C7E3E4; gjerësia: 100 px;) .col2 (sfondi: # E0D2C7; gjerësia: 200 px; majtas: 100 px;) .col3 (sfondi: # ECD5DE; majtas: 300 px; djathtas: 0;)
Paraqitja nr. 4, në të cilën gjerësia e të gjitha kolonave është vendosur në përqindje, ka disa nuanca. Nëse keni nevojë për të njëjtën gjerësi për të gjitha kolonat, mund ta vendosni në mënyrë të pjesshme (33.33%), por shfletuesi Opera nuk mund të funksionojë me përqindje fraksionale, kështu që "vrima" do të shfaqen midis kolonave (Fig. 5.18).
Oriz. 5.18. Gjerësia e kolonës, e specifikuar në përqindje të pjesshme
Në situata të tilla, duhet të kaloni në aksione të pabarabarta, për shembull, 33%, 34%, 33%, siç tregohet në shembullin 5.17.
Shembulli 5.17. Paraqitja nr. 4
Koka (sfondi: # D5BAE4;) .paraqitja (pozicioni: relative;) .paraqitja DIV (pozicioni: absolute;) .col1 (sfondi: # C7E3E4; gjerësia: 33%;) .col2 (sfondi: # E0D2C7; majtas: 33 %; gjerësia: 34%;) .col3 (sfondi: # ECD5DE; djathtas: 0; gjerësia: 33%;)
Në disa shfletues, mund të ketë një hendek të vogël midis kolonave. Zgjidhet duke përdorur vlera jo të plota, por të pjesshme të përqindjes, d.m.th. 33.3% në vend të 33%.
Paraqitjet e mbetura, në të cilat dy nga tre kolona gome, përfaqësojnë një grup të veçantë, sepse ato mund të interpretohen në mënyra të ndryshme. Pra, gjerësia e një kolone tregohet në piksel, tjetra si përqindje e gjerësisë së paraqitjes, dhe gjerësia e pjesës së mbetur llogaritet automatikisht. Në fig. 5.19 tregon qasje të ndryshme për llogaritjen e gjerësisë së kolonave duke përdorur shembullin e paraqitjes numër 5.
Oriz. 5.19. Gjerësia e dy kolonave të gomës
Në variantin e parë, gjerësia e kolonës së parë vendoset si përqindje e gjerësisë së paraqitjes, gjerësia e kolonës së dytë llogaritet automatikisht dhe kolona e tretë ka një gjerësi fikse në piksel. Në variantin e dytë, kolonat ndryshojnë ndërmjet tyre dhe gjerësia e kolonës së parë llogaritet automatikisht. Opsioni i tretë supozon se gjerësia totale e kolonave të gomës merret si 100% dhe gjerësia e kolonës së parë dhe të dytë llogariten prej saj.
Opsionet e para dhe të dyta zbatohen lehtësisht të ngjashme me kodin me dy kolona në pixel. Por në vend të gjerësisë në px, ne specifikojmë%. Shembulli 5.18 tregon stilin e paraqitjes # 5 me kolonën e parë të vendosur si përqindje.
Shembulli 5.18. Layout nr. 5. Gjerësia e kolonës së dytë është llogaritur
Header (sfondi: # D5BAE4;) .paraqitja (pozicioni: relative;) .paraqitja DIV (pozicioni: absolute;) .col1 (sfondi: # C7E3E4; gjerësia: 50%;) .col2 (sfondi: # E0D2C7; majtas: 50 %; djathtas: 200 px;) .col3 (sfondi: # ECD5DE; djathtas: 0; gjerësia: 200 px;)
Stili i paraqitjes # 5 me një kolonë të parë të llogaritur është paraqitur në Shembullin 5.19.
Shembulli 5.19. Paraqitja nr. 5. Llogaritet gjerësia e kolonës së parë
Koka (sfondi: # D5BAE4;) .paraqitja (pozicioni: relative;) .paraqitja DIV (pozicioni: absolute;) .col1 (sfondi: # C7E3E4; majtas: 0; djathtas: 200 px; margjina-djathtas: 50%;). col2 (sfondi: # E0D2C7; gjerësia: 50%; djathtas: 200 px;) .col3 (sfondi: # ECD5DE; gjerësia: 200 px; djathtas: 0;)
Kolona e parë nuk mund të vendoset në kufizimin e duhur përmes pronës së duhur, pasi vlera do të jetë 50% + 200 px, nuk ka vlera të tilla të llogaritura në CSS2. Prandaj, ne do të aplikojmë fokusin - do të kufizojmë shtresën e parë në të djathtë me një gjerësi prej 200 px në të djathtë dhe do ta zhvendosim atë majtas me gjerësinë e kolonës së dytë 50% duke përdorur margin-djathtas. Shtresa jonë është absolutisht e pozicionuar, kështu që shaka të tilla nuk do të ndikojnë në gjerësinë në asnjë mënyrë.
Opsioni i tretë me dy kolona gome kërkon një shtresë shtesë, le ta quajmë gome, në lidhje me të cilën do të vendoset gjerësia e kolonave (shembulli 5.20).
Shembulli 5.20. Paraqitja nr. 5. Gjerësia e dy kolonave në përqindje
Ndërtimi i paraqitjes nr.6 është i ngjashëm me paraqitjen nr.5, kështu që ne nuk do të ndalemi në të. Sa i përket paraqitjes numër 7, ekziston një variant për të, i cili mund të shkaktojë vështirësi. Kjo vlen për rastin kur dëshironi të bëni gjerësinë e kolonës së majtë dhe të djathtë të llogaritur dhe të barabartë me njëra-tjetrën. Për ta bërë këtë, gjerësia e kolonës së parë dhe të tretë duhet të vendoset e barabartë me 50% (Fig. 5.20).
Oriz. 5.20. Paraqitja nr. 7 me kolona me gjerësi të barabartë
Për të lënë vend për kolonën e dytë, përdorni veçorinë margin-djathtas për kolonën e parë dhe margin-majtë për të tretën. Vlera e këtyre vetive do të jetë gjysma e gjerësisë së kolonës së dytë. Pra, nëse është 200 px, atëherë ju merrni margjinën e djathtë: 100 px (shembulli 5.21).
Shembulli 5.21. Shtrirja nr. 7. Gjerësia e shtyllave të gomës është e njëjtë
Header (sfondi: # D5BAE4;) .paraqitja (pozicioni: relative;) .paraqitja DIV (pozicioni: absolute;) .col1 (sfondi: # C7E3E4; majtas: 0; djathtas: 50%; margjina-djathtas: 100px;). col2 (sfondi: # E0D2C7; gjerësia: 200 px; majtas: 50%; margjina majtas: -100 px;) .col3 (sfondi: # ECD5DE; majtas: 50%; djathtas: 0; margjina majtas: 100 px;)
Ju nuk mund ta përdorni drejtpërdrejt veçorinë width, pasi shtimi i një marzhi vetëm do të rrisë gjerësinë, jo do ta zvogëlojë atë siç na nevojitet. Prandaj, gjerësia formohet nga vetitë e vendosura njëkohësisht majtas dhe djathtas. Me pozicionimin e kolonës së dytë, është e vështirë të specifikohet vlera majtas ose djathtas, pasi do të jetë e barabartë me 50% -200px. Pra, vendosim pozicionin e margjinës së majtë në 50% (majtas: 50%), dhe më pas e zhvendosim të gjithë kolonën majtas për gjysmën e gjerësisë së saj duke përdorur veçorinë margin-left (margin-left: -100px).
Meqenëse gjerësia e disa kolonave llogaritet automatikisht, rekomandohet të kufizohet gjerësia minimale e paraqitjes duke shtuar një veçori min-width në përzgjedhësin BODY. Atëherë gjerësia e kolonave nuk do të fillojë të ulet kur të arrihet kufiri i specifikuar.
BODY (min-gjerësia: 800 px; / * Gjerësia minimale e paraqitjes * /)
Vlera min-gjerësi varet nga faqosja dhe përmbajtja e faqes dhe zakonisht përcaktohet nga përvoja.
Përdorimi i elementeve lundrues
Elementet lundruese janë një tjetër metodë e gjithanshme për ndërtimin e një shumëllojshmërie të paraqitjeve me tre kolona. Ndryshe nga pozicionimi, ju lejon të mos shqetësoheni për problemin e bodrumit, pasi bodrumi do të jetë gjithmonë i vendosur në vendin e tij nën kolonën më të lartë.
Kolonat ndërtohen duke përdorur veçorinë float në lidhje me vetitë marzh dhe gjerësi. Në varësi të paraqitjes së zgjedhur, ndryshon edhe rendi i kolonave në kod, së pari ka gjithmonë shtresa në të cilat shtohet float.
Paraqitja # 1. Altoparlanti i parë prej gome
Gjerësia e kolonës së dytë dhe të tretë specifikohet në piksel, dhe pozicioni i tyre përmes vetive float me vlerën e duhur. Për kolonën e parë, ju gjithashtu duhet të vendosni pronësinë margin-right me një vlerë të barabartë me gjerësinë totale të kolonave të mbetura (shembulli 5.22).
Shembulli 5.22. Paraqitja nr. 1
Paraqitja # 2. Altoparlanti qendror prej gome
Gjerësia e kolonës së parë dhe të tretë vendoset në piksel, dhe pozicioni i tyre vendoset përmes vetive float me vlerën e mbetur për kolonën e parë dhe djathtas për të tretën. Kolona e mesme, në mënyrë që të ruajë pamjen e saj, përmban margjinën e vetive universale, e cila vendos dhëmbëzimin majtas dhe djathtas (shembulli 5.23).
Shembulli 5.23. Paraqitja nr. 2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout Nr. 3. Altoparlant i tretë gome
Pozicioni i kolonës së parë dhe të dytë përcaktohet përmes vetive float me vlerën e majtë, për kolonën e tretë duhet të vendosni margjinën e majtë (margin-majtas) në gjerësinë totale të kolonave të mbetura (shembulli 5.24).
Shembulli 5.24. Paraqitja nr. 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Paraqitja nr. 4. Gjerësia e të gjitha kolonave është vendosur në përqindje
Për të ndërtuar këtë paraqitje, shumë opsione të bazuara në paraqitjet e mëparshme janë të përshtatshme, por në vend të pikselëve, duhet të specifikoni përqindjet. Një mënyrë tjetër tregohet në shembullin 5.25, ku përdoren vetëm vetitë float dhe gjerësia.
Shembulli 5.25. Paraqitja nr. 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Shtrirja nr. 5. Gjerësia e dy kolonave prej gome
Në fig. 5.19 është demonstruar se faqosja nr. 5, e cila ka dy kolona gome, mund të interpretohet në mënyra të ndryshme.
- Gjerësia e kolonës së parë është një përqindje e gjerësisë së paraqitjes, gjerësia e kolonës së tretë është në piksel dhe kolona e mesme zë hapësirën e mbetur.
- Gjerësia e kolonës së dytë specifikohet si përqindje e gjerësisë së paraqitjes, gjerësia e kolonës së tretë është në piksel dhe kolona e parë zë hapësirën e mbetur.
- Gjerësia totale e dy kolonave të gomës merret si 100%, dhe gjerësia e kolonave tregohet si përqindje e kësaj vlere.
Gjerësia e shtyllës së mesme të llogaritur
Këtu, gjerësia e kolonës së parë specifikohet në përqindje, dhe pozicioni i saj përcaktohet përmes vetive float me vlerën e mbetur, për kolonën e tretë, gjerësia specifikohet në piksel dhe vlera e vetive float specifikohet si drejtë. Për kolonën e mesme, mbetet vetëm për të vendosur kufijtë e majtë dhe të djathtë në gjerësinë e kolonave (shembulli 5.26).
Shembulli 5.26. Paraqitja 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Gjerësia e kolonës së parë të llogaritur
Kjo është faqosja më e ndërlikuar, pasi gjerësia e kolonës së parë nuk specifikohet drejtpërdrejt. Por për të kufizuar përmbajtjen, duhet të specifikoni një vlerë që kombinon përqindjet dhe pikselët për pronën margin-right. Në CSS2, siç është përmendur tashmë, kjo nuk mund të vendoset, kështu që shtoni një shtresë tjetër të quajtur wrap brenda shtresës col1 dhe shtoni mbushje në secilën prej këtyre shtresave. Njëra në përqindje, tjetra në piksel (shembulli 5.27).
Shembulli 5.27. Paraqitja 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Gjerësia e dy kolonave në përqindje
Në këtë plan urbanistik, gjerësia totale e kolonave të gomës merret si 100%, kështu që na duhet një shtresë shtesë kundrejt së cilës do të matet gjerësia e kolonave të brendshme. Kjo shtresë gome funksionon me col3 si një plan urbanistik me dy kolona, dhe shtresat e brendshme col1 dhe col2 janë rreshtuar horizontalisht duke përdorur veçorinë float (shembulli 5.28).
Shembulli 5.28. Paraqitja 5.3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Paraqitjet 6, 7 dhe varietetet e tyre janë ndërtuar sipas të njëjtit parim si paraqitja nr. 5, me përjashtim të paraqitjes nr. 7, në të cilën gjerësia e kolonës së majtë dhe të djathtë është gome dhe e barabartë me njëra-tjetrën.
Së pari, ne përgatisim bazën, ne tregojmë rendin e shtresave në kodin HTML.
Col1 (gjerësia: 50%; float: majtas;) .col2 (gjerësia: 200 px; float: majtas;) .col3 (gjerësia: 50%; float: djathtas;)
Kjo nuk është e gjitha, shtresat nuk formojnë ende asnjë kolonë dhe janë ndërtuar në një mënyrë krejtësisht të papërshtatshme për ne. Kërkohet të zhvendoset kolona e dytë majtas për gjysmën e gjerësisë së saj (margin-majtas: -100px) dhe të vendoset kolona e tretë në vend. Për ta bërë këtë, rrisni gjerësinë e saj në mënyrë që të jetë e barabartë ose më e madhe se 50% + 100 px (gjysma e kolonës së dytë). Vetia e majta margin me një vlerë negative është më e përshtatshme, pas së cilës do të krijohen kolonat. Ka edhe disa nuanca të tjera. Kolonat më të jashtme janë të lidhura me njëra-tjetrën, gjë që duket qartë kur lartësia e tyre tejkalon lartësinë e kolonës së mesme (Fig. 5.21).
Oriz. 5.21. Kolonat e ankoruara
Përveç kësaj, në kolonën e majtë, teksti në të djathtë, dhe në kolonën e djathtë, teksti në të majtë fshihet pas sfondit të kolonës qendrore. Kjo nuk do të vërehet nëse lartësia e kësaj kolone është e madhe, por kjo nuk është gjithmonë e mundur. Për të kapërcyer mangësitë e treguara, është e nevojshme të futni një shtresë tjetër brenda kolonave më të jashtme (në shembull, ajo quhet mbështjellje) dhe të vendosni ngjyrën e sfondit të kolonës, kufijtë dhe dhëmbëzimet e nevojshme për to. Kodi përfundimtar është paraqitur në shembullin 5.29.
Shembulli 5.29. Paraqitja nr. 7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Kufijtë dhe kufijtë në një plan urbanistik me 3 kolona
Vetia e mbushjes nuk u shtua qëllimisht në shembujt e mësipërm të paraqitjeve, pasi kodi shërben vetëm si bazë për paraqitjen, dhe ju vetë duhet të vendosni në raste specifike nëse keni nevojë për fusha në kolona apo jo. Shtimi i kufijve dhe kufijve në një element blloku rrit gjerësinë e tij, e cila duhet të merret parasysh gjatë paraqitjes. Megjithatë, gjerësia rritet vetëm nëse shtresa është vendosur në gjerësi. Le të shohim disa shembuj se ku do të ndryshojë gjerësia dhe ku jo.
Div (/ * mbushja ndikon në gjerësinë * / gjerësinë: 200 px; mbushja: 10 px;) div (/ * mbushja nuk ndikon në gjerësinë * / pozicioni: absolute; majtas: 20 px; djathtas: 20 px; mbushja: 10 px;) div (/ * mbushja ndikon në gjerësinë * / float: majtas; gjerësia: 50%; mbushja: 10 px;) div (/ * mbushja nuk ndikon në gjerësinë * / margjina-djathtas: 50%; mbushja: 10 px;)
Në ato kolona ku kërkohet mbushje ose kufi, por shtimi i tyre do të çojë në një "thyerje" të paraqitjes, mund të përdorni një shtresë të mbivendosur dhe të vendosni vetitë e nevojshme për të.
Në këtë shembull, gjerësia e shtresës e vendosur në 200 piksele nuk do të ndryshojë, por margjinat dhe një kufi do të shtohen.
Tabela si kolona
Tabela është e dobishme për krijimin e shpejtë dhe të lehtë të kolonave me të njëjtën lartësi. Kjo shpejtësi arrihet në disa mënyra. Së pari, struktura e kodit për çdo paraqitje mbetet e njëjtë, kolonat në kod, si në rastin e notave, nuk e ndryshojnë kurrë renditjen e tyre. Së dyti, gjerësia e qelizave llogaritet automatikisht në bazë të përmbajtjes së tyre, kështu që mjafton të specifikoni gjerësinë e kolonave të kërkuara, dhe pjesa tjetër do të përshtatet me gjerësinë totale të tabelës. Shembulli 5.30 tregon paraqitjen # 1 të bërë në një tabelë.
Shembulli 5.30. Paraqitja nr. 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Kolona 1 | Kolona 2 | Kolona 3 |
Shtimi i vetive të mbushjes në një përzgjedhës TD anulon atributin e mbushjes së qelizave të etiketës
