Tableless Layouts Magbukas sa New Design Frontier
Adunay daghang mga rason nga dili gamiton ang mga lamesa alang sa layout . Usa sa labing kanunay nga mga hinungdan nga gihatag sa mga tawo alang sa padayon nga paggamit niini tungod kay lisud ang paghimo sa layout sa CSS. Bisan tuod ang CSS scripting naglakip sa curve sa pagkat-on, kon imong masabtan kon unsaon paghimo ang layout sa CSS, mahibulong ka tingali sa kasayon niini. Ug sa higayon nga imong makat-unan, imong gihisgutan ang ikaduha nga kasagaran nga rason nga gihatag sa mga tawo alang sa dili paggamit sa CSS- "Mas paspas ang pagsulat sa mga lamesa." Mas dali kini tungod kay nahibal-an nimo ang mga lamesa, apan sa higayon nga imong makat-unan ang CSS, tingali sama ka dali uban niana.
Suporta sa Browser sa CSS Positioning
Ang posisyon sa CSS maayong pagsuporta sa tanang modernong mga browser . Gawas kon ikaw nagtukod og usa ka site alang sa Netscape 4 o Internet Explorer 4, ang imong mga magbabasa kinahanglan nga dili maglisud sa pagtan-aw sa imong CSS-positioned Web nga mga pahina.
Pagpalandong Pag-usab sa Unsaon nga Paghimo og Pahina
Kon nagtukod ka og usa ka site nga naggamit sa mga lamesa, kinahanglan nga maghunahuna ka sa tabular format. Sa laing mga pulong, naghunahuna ka sa mga selula ug mga linya ug mga kolum. Ang imong mga panid sa Web magpakita niini nga paagi. Kon mobalhin ka sa usa ka disenyo sa positioning sa CSS, magsugod ka sa paghunahuna sa imong mga panid sa termino sa sulod, tungod kay ang sulod mahimong ibutang sa bisan asa nga imong gusto sa layout-bisan sa ibabaw sa ubang mga sulod.
Ang nagkalainlain nga mga website adunay lain-laing estruktura Aron maugmad ang usa ka epektibo nga panid, timbang-timbanga ang istruktura sa bisan unsang gihatag nga pahina sa dili pa nimo itudlo ang sulod niini. Ang panid nga pananglitan mahimong maglakip sa lima ka lain-laing seksyon
- Pangulo . Ang balay ngadto sa advertisement sa bandila, ang ngalan sa site, mga link sa pag-navigate, usa ka titulo sa artikulo ug ingon man pipila ka mga butang.
- Tuo nga kolum . Kini ang husto nga bahin sa panid sa kahon sa search, mga ad, mga video box, ug mga dapit sa pagpamalit.
- Kontento . Ang teksto sa usa ka artikulo, post sa blog o shopping cart-ang karne-ug-patatas sa panid.
- Inline ads . Ang mga paanunsiyo sa sulod sa sulod.
- Footer . Ang ubos nga nabigasyon, impormasyon sa tigsulat, impormasyon sa copyright, ubos nga mga ad sa banner, ug may kalabutan nga mga link.
Inay ibutang ang lima ka mga elemento sa usa ka lamesa, gamita ang mga elemento sa seksyon sa HTML5 aron ipaila ang nagkalainlain nga mga bahin sa sulod, ug dayon gamit ang CSS positioning aron ibutang ang mga elemento sa sulod sa panid.
Pag-ila sa Imong Mga Seksyon sa Nilangkob
Human nimo masaysay ang nagkalainlain nga mga dapit sa sulod sa imong site, kinahanglan nimo isulat kini sa imong HTML. Samtang mahimo nimo, sa kinatibuk-an, ibutang ang imong mga seksyon sa bisan unsa nga pagkahan-ay, maayo nga ideya nga ibutang una ang pinakaimportante nga mga bahin sa imong panid. Kini nga paagi makatabang sa pag-optimize sa search engine.
Aron ipakita ang pagpwesto, palandunga ang usa ka panid nga may tulo ka kolum apan walay header o footer. Mahimo nimo gamiton ang pagpwesto aron mahimo ang bisan unsa nga klase sa layout nga imong gusto.
Alang sa tulo ka kolum nga layout, ipasabut ang tulo ka seksyon: wala nga kolum, tuo nga kolum, ug sulod.
Kini nga mga seksyon gimugna gamit ang elemento sa ARTICLE alang sa sulod ug duha ka SEKSYON elemento alang sa duha ka mga kolum. Ang tanan usab adunay usa ka kinaiya nga nagpaila niini. Sa diha nga ikaw naggamit sa id nga kinaiya, kinahanglan ipasidungog ang usa ka talagsa nga ngalan alang sa matag id.
Pagpahiluna sa Content
Paggamit sa CSS, ipaila ang posisyon alang sa imong ID nga mga elemento. Ibutang ang impormasyon sa imong posisyon sa estilo nga tawag nga sama niini:
#content {
}
Ang sulod sulod niini nga mga elemento moangkon kutob sa mahimo, nga mao ang 100 porsyento sa gilapdon sa kasamtangan nga nahimutangan o sa panid. Aron makaapekto sa nahimutangan sa usa ka seksyon nga dili mapugos kini sa usa ka gilapdon nga lapad, usbon ang padding o ang mga kabtangan sa margin.
Alang niini nga layout, ipahimutang ang duha ka mga kolum sa gipalapad nga gilapdon ug dayon ibutang ang ilang posisyon nga hingpit, aron dili kini maapektuhan kung diin kini makita sa HTML.
# left-column {
posisyon: hingpit;
wala: 0;
lapad: 150px;
margin-left: 10px;
Giklaseklase: 20px;
kolor: # 000000;
padding: 3px;
}
# right-column {
posisyon: hingpit;
wala: 80%;
ibabaw: 20px;
lapad: 140px;
padding-left: 10px;
z-index: 3;
kolor: # 000000;
padding: 3px;
}
Dayon alang sa sulod nga dapit, ibutang ang mga gilay-on sa tuo ug sa wala aron ang sulod dili mag-overlap sa duha ka kolum sa gawas.
#content {
top: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
kolor: # 000000;
}
Ang pag-define sa imong panid gamit ang CSS imbes sa usa ka lamesa sa HTML nagkinahanglan og gamay nga teknikal nga kahanas, apan ang kabayaran nagsunod gikan sa labaw ka flexible ug responsive nga mga disenyo ug labaw nga kasayon sa paghimo sa structural adjustment sa imong pahina sa ulahi.