Hapësirat e pamenduara Hapin Kufijtë e Dizajnit të Ri
Ka shumë arsye për të mos përdorur tavolina për paraqitjen . Një nga arsyet më të shpeshta që njerëzit japin për vazhdimin e përdorimit të tyre është sepse është e vështirë të bëhet faqosja me CSS. Edhe pse skriptimi i CSS ka sjellë një kurbë të të mësuarit, kur kupton se si të bësh një paraqitje të CSS, mund të befasohesh se sa e lehtë mund të jetë. Dhe sapo të mësoni, do të keni adresuar arsyeja e dytë më e shpeshtë që njerëzit japin për mosdorjen e CSS- "Është më e shpejtë për të shkruar tabela." Është më shpejt sepse ju i njihni tavolinat, por sapo të mësoni CSS, me atë.
Mbështetja e shfletuesit të pozicionimit CSS
Pozicionimi i CSS mbështetet mirë në të gjithë shfletuesit modernë . Nëse nuk po ndërton një faqe për Netscape 4 ose Internet Explorer 4, lexuesit tuaj nuk duhet të kenë ndonjë vështirësi për të parë faqet Web të pozicionuara në CSS.
Rethinking Si Ju ndërtuar një faqe
Kur ndërtoni një faqe duke përdorur tabela, duhet të mendoni në një format tabelar . Me fjalë të tjera, ju jeni duke menduar në lidhje me qelizat, rreshtat dhe kolonat. Web faqet tuaja do të pasqyrojnë këtë qasje. Kur të shkosh në një dizajn të pozicionimit CSS, do të fillosh të mendosh për faqet e tua në aspektin e përmbajtjes, sepse përmbajtja mund të vendoset kudo që të pëlqeni në shtrirjen - madje shtresa në krye të përmbajtjeve të tjera.
Faqet e internetit të ndryshme kanë struktura të ndryshme. Për të ndërtuar një faqe efektive, vlerësoni strukturën e çdo faqeje të caktuar para se të caktoni përmbajtje për të. Një faqe shembull mund të përfshijë pesë seksione të ndryshme:
- Header . Faqja kryesore në reklamën e bannerit, emri i faqes, lidhjet e lundrimit, titulli i një artikulli dhe si dhe disa gjëra të tjera.
- Kolona e djathtë . Kjo është ana e djathtë e faqes me kutinë e kërkimit, reklamat, kutitë e videove dhe zonat tregtare.
- Përmbajtja . Teksti i një artikulli, postimi në blog ose karrocat e blerjes - mishi dhe patatet e faqes.
- Inline reklama . Reklama në linjë brenda përmbajtjes.
- Footer . Navigimi i poshtëm, informacioni i autorit, informacioni mbi të drejtën e autorit, reklama më të ulëta të banderolave dhe lidhje të lidhura.
Në vend që t'i vendosni këto pesë elemente në një tabelë, përdorni elementët e seksioneve HTML5 për të përcaktuar pjesët e ndryshme të përmbajtjes dhe më pas përdorni pozicionimin CSS për të vendosur elementët e përmbajtjes në faqe.
Identifikimi i seksioneve të përmbajtjes suaj
Pasi të keni përcaktuar fushat e përmbajtjes të ndryshme të faqes tuaj, ju duhet t'i shkruani në HTML-in tuaj. Ndërkohë që mundeni, përgjithësisht, t'i vendosni seksionet tuaja në çdo mënyrë, është e mirë të vendosni më parë pjesët më të rëndësishme të faqes suaj. Kjo qasje do të ndihmojë edhe me optimizimin e kërkimit-motorëve.
Për të demonstruar pozicionimin, parashikoni një faqe me tre shtylla, por jo kokë ose footer. Ju mund të përdorni pozicionimin për të krijuar ndonjë lloj layout që ju pëlqen.
Për një paraqitje me tre kolona, përcaktoni tre seksione: kolona e majtë, kolona e djathtë dhe përmbajtja.
Këto seksione do të instanzohen duke përdorur elementin ARTICLE për përmbajtjen dhe dy elementët Seksioni për dy kolonat. Çdo gjë gjithashtu do të ketë një atribut që ta identifikojë atë. Kur përdorni atributin id, duhet të përshkruani një emër unik për çdo ID.
Vendosja e Përmbajtjes
Duke përdorur CSS, përcaktoni pozicionin për elementët tuaj ID'd. Ruaj informacionin e pozicionit tënd në një telefonatë stili si kjo:
#content {
}
Përmbajtja brenda këtyre elementeve do të marrë sa më shumë hapësirë sa të jetë e mundur, përkatësisht 100 për qind e gjerësisë së lokacionit ose faqes aktuale. Për të ndikuar në vendndodhjen e një seksioni pa e detyruar atë në një gjerësi fikse, ndërroni padding ose pronat margjina.
Për këtë paraqitje, vendosni dy kolona në gjerësi fikse dhe pastaj vendosni pozicionin e tyre absolut, kështu që ata nuk do të preken nga vendi ku gjenden në HTML.
# left-column {
pozita: absolute;
e majtë: 0;
gjerësia: 150px;
margjina e majtë: 10px;
diferencë-lartë: 20px;
ngjyra: # 000000;
mbushje: 3px;
}
# right-column {
pozita: absolute;
e majta: 80%;
lartë: 20px;
gjerësia: 140px;
mbushje-majtas: 10px;
z-indeksi: 3;
ngjyra: # 000000;
mbushje: 3px;
}
Pastaj, për zonën e përmbajtjes, vendosni kufijtë në të djathtë dhe në të majtë në mënyrë që përmbajtja të mos përputhet me dy kolonat e jashtme.
#content {
lartë: 0px;
margjina: 0px 25% 0 165px;
mbushje: 3px;
ngjyra: # 000000;
}
Përcaktimi i faqes tuaj duke përdorur CSS në vend të një tryeze HTML kërkon aftësi pak më teknike, por fitimi vjen nga hartimet më fleksibile dhe më të përgjegjshme dhe lehtësi më të madhe në bërjen e rregullimeve strukturore në faqen tuaj më vonë.