Tableless Layouts misokatra ny New Design Frontiers
Misy antony maro tsy tokony hampiasana tabilao ho an'ny layout . Ny antony iray matetika mahatonga ny olona hampiasa azy ireo dia satria sarotra ny manao layout amin'ny CSS. Na dia mamoaka boky fianarana ho an'ny CSS aza ny script CSS, rehefa takatrao ny fomba fanaovana CSS layout, dia mety ho gaga amin'ny fomba tsotra ianao. Ary raha vao mianatra ianao, dia efa niresaka ny antony faharoa mahazatra indrindra ny olona manome ny tsy fampiasana CSS - "Mora kokoa ny manoratra latabatra." Mora haingana ianao satria fantatrao latabatra, fa rehefa mianatra CSS ianao dia mety ho haingana be miaraka amin'izany.
Fanohanana ny tranokala CSS
Ny toerana misy ny CSS dia tsara tohana amin'ny browser rehetra maoderina . Raha tsy manangana tranokala ho an'ny Netscape 4 na Internet Explorer 4 ianao, ny mpamaky dia tsy tokony hanana olana amin'ny fijerena ny pejy webn'ny CSS.
Fanavaozana ny fomba hanamboaranao pejy
Rehefa manangana tranokala mampiasa latabatra ianao, dia tsy maintsy mieritreritra ao anaty endrika tabilao . Raha lazaina amin'ny teny hafa dia mihevitra ny cellules sy ny andalana sy ny tsanganana ianao. Ireo pejy web anao dia haneho izany fomba fijery izany. Rehefa mifindra amin'ny famolavolan'ny CSS ianao, dia hanomboka hieritreritra ny pejinao amin'ny endriky ny votoatiny ianao, satria ny votoaty dia azo apetraka any amin'izay tianao tianao ao amin'ny layout-na dia misy mirakitra amin'ny zavatra hafa aza.
Ny tranonkala samihafa dia manana rafitra samihafa. Mba hananganana pejy mahomby, dia ambarao ny rafitry ny pejy nomena alohan'ny hanomezana votoaty azy. Ny pejy ohatra dia mety ahitana fizarana dimy miavaka:
- Header . Tranonkala ho an'ny dokam-barotra, ny anaran'ny tranonkala, ny rohy mankany amin'ny navigation, ny lohatenin'ny lahatsoratra ary koa ny zavatra hafa.
- Tsanganana havanana . Ity no lafiny ankavanana amin'ny pejy miaraka amin'ny boaty fikarohana, dokam-barotra, boaty video ary sehatry ny fividianana.
- Content . Ny lahatsoratry ny lahatsoratra, lahatsoratra bilaogy na karatra fivarotana-ny karazan-tsakafo ao amin'ny pejy.
- Sary an-tserasera . Ireo dokam-barotra voalaza ao anaty votoaty.
- Footer . Ny fikarohana ambanin'ny pejy, ny fampahalalana momba ny mpanoratra, ny fampitam-baovao momba ny zon'ny mpamorona, ny dokambarotra ambany kokoa, ary ireo rohy mifandray.
Raha tokony hametraka ireo singa dimy ao anaty latabatra, ampiasao ireo singa fizarana HTML5 mba hamaritana ireo ampahany samihafa ao amin'ny votoaty, ary ampiasao ny fametrahana CSS hametraka ireo singa ao amin'ny pejy.
Fantaro ireo sehatr'ireo votoaty
Rehefa avy namaritra ny faritra misy votoatin'ny tranokalanao ianao dia mila manoratra azy ireo ao amin'ny HTML anao. Na dia azonao atao aza ny mametraka ny fizaranao amin'ny alàlan'ny baiko, dia tsara ny mametraka ny ampahany manan-danja indrindra ao amin'ny pejinao voalohany. Ity fomba ity dia hanampy amin'ny fanatsarana ny maotera, koa.
Mba hampisehoana ny fametrahana, dia mametra pejy iray misy rojo telo fa tsy header na footer. Azonao atao ny mampiasa ny toerana misy anao mba hamoronana karazana lay izay tianao.
Ho an'ny fametrahana sehatr'asa telo, dia mamaritra fizarana telo: tsanganana havia, sehatra havanana, ary votoaty.
Ireo fizarana ireo dia hampiasaina amin'ny fampiasana ny singa ARTICLE ho an'ny votoaty sy singa SECTION roa ho an'ireo andry roa. Ny zava-drehetra koa dia hanana toetra iray mamaritra azy io. Rehefa mampiasa ny toetra id, dia tokony hanonona anarana manokana ho an'ny id rehetra ianao.
Manoritra ny votoatiny
Ampiasao ny CSS, mamaritra ny toerana misy ny singa ID'd. Arovy ny fampahalalana momba ny toerana misy anao amin'ny fomba fiantsoana toy izao:
#content {
}
Ny votoaty ao anatin'ireny singa ireny dia haka toerana betsaka araka izay tratra, izany hoe 100 isan-jaton'ny habaka misy ny toerana misy ankehitriny na ny pejy. Raha te hanova ny toerana misy ny fizarana iray ianao nefa tsy manery azy amin'ny sakany voafaritra, dia manova ny fonosana na ny marika.
Ho an'ity rindrambaiko ity dia apetraho ireo tsanganana roa ireo ary apetraho tanteraka ny toerana misy azy, mba tsy hisy fiantraikany amin'ny toerana hita ao amin'ny HTML.
# left-column {
toerana: absolute;
havia: 0;
width: 150px;
margin-left: 10px;
margin-top: 20px;
loko: # 000000;
padding: 3px;
}
# right-column {
toerana: absolute;
havia: 80%;
top: 20px;
width: 140px;
padding-left: 10px;
z-index: 3;
loko: # 000000;
padding: 3px;
}
Avy eo, ho an'ny faritra afahana, mametraha ny sisiny havia sy havia mba tsy hivezivezivezin'ny votoaty ireo rojo ivelan'ny tsanganana.
#content {
top: 0px;
margin: 0px 25% 0; 165px;
padding: 3px;
loko: # 000000;
}
Ny famaritana ny pejinao amin'ny fampiasana CSS fa tsy tabila HTML dia mitaky fahaizana matihanina kokoa, fa ny karama dia manaraka avy amin'ny famolavolan-kevitra mavesa-danja kokoa sy mora kokoa amin'ny fanatsarana ny fanovana eo amin'ny pejy manaraka.