Tableless Layouts Buksan ang Bagong Mga Frontier ng Disenyo
Maraming mga kadahilanan na huwag gumamit ng mga talahanayan para sa layout . Isa sa mga madalas na dahilan na ibinibigay ng mga tao sa patuloy na paggamit nito ay dahil mahirap gawin ang layout sa CSS. Kahit na ang CSS scripting ay nagsasangkot ng curve sa pag-aaral, kapag naiintindihan mo kung paano gagawin ang layout ng CSS, maaari kang magulat kung gaano kadali ito. At sa sandaling matutunan mo, matutunan mo ang ikalawang pinaka-karaniwang dahilan na ibinibigay ng mga tao para sa hindi paggamit ng CSS- "Mas mabilis itong magsulat ng mga talahanayan." Mas mabilis ito dahil alam mo ang mga talahanayan, ngunit sa sandaling matutunan mo ang CSS, maaari kang maging mabilis may na.
Suporta sa Browser ng CSS Positioning
Ang pagpoposisyon ng CSS ay sinusuportahan nang mabuti sa lahat ng mga modernong browser . Maliban kung ikaw ay nagtatayo ng isang site para sa Netscape 4 o Internet Explorer 4, ang iyong mga mambabasa ay hindi dapat magkaroon ng anumang problema sa pagtingin sa iyong mga pahina ng Web na nakaposisyon sa CSS.
Rethinking Paano Gumawa Ka ng Pahina
Kapag nagtatayo ka ng isang site na gumagamit ng mga talahanayan, kailangan mong mag-isip sa isang hugis na talaan ng pormat. Sa ibang salita, nag-iisip ka sa mga tuntunin ng mga cell at row at column. Ang iyong mga pahina sa Web ay sumasalamin sa diskarteng ito. Kapag lumipat ka sa isang disenyo sa pagpoposisyon ng CSS, sisimulan mo ang pag-iisip ng iyong mga pahina sa mga tuntunin ng nilalaman, dahil ang nilalaman ay maaaring mailagay sa kahit saan na gusto mo sa layout-kahit na naka-layered sa ibabaw ng iba pang nilalaman.
Iba't ibang mga website ay may iba't ibang mga istraktura. Upang bumuo ng isang epektibong pahina, suriin ang istraktura ng anumang ibinigay na pahina bago mo italaga ang nilalaman dito. Ang isang pahina ng halimbawa ay maaaring magsama ng limang natatanging mga seksyon:
- Header . Tahanan sa advertisement ng banner, ang pangalan ng site, mga link sa nabigasyon, isang pamagat ng artikulo at pati na rin ang ilang iba pang mga bagay.
- Kanang haligi . Ito ang kanang bahagi ng pahina na may kahon sa paghahanap, mga ad, mga video box, at mga lugar ng pamimili.
- Nilalaman . Ang teksto ng isang artikulo, post sa blog o shopping cart-ang karne-at-patatas ng pahina.
- Mga inline na ad . Ang mga advertisement ay nasa linya sa loob ng nilalaman.
- Footer . Ang ibaba nabigasyon, impormasyon ng may-akda, impormasyon sa copyright, mas mababang mga ad sa banner, at mga kaugnay na link.
Sa halip na ilagay ang mga limang elemento sa isang table, gamitin ang mga elemento ng seksyon ng HTML5 upang tukuyin ang iba't ibang bahagi ng nilalaman, at pagkatapos ay gamitin ang pagpoposisyon ng CSS upang ilagay ang mga elemento ng nilalaman sa pahina.
Pagkilala sa iyong mga Seksyon ng Nilalaman
Pagkatapos mong matukoy ang iba't ibang mga lugar ng nilalaman ng iyong site, kailangan mong isulat ang mga ito sa iyong HTML. Habang maaari mong, sa pangkalahatan, ilagay ang iyong mga seksyon sa anumang pagkakasunud-sunod, magandang ideya na ilagay ang pinakamahalagang bahagi ng iyong pahina muna. Ang diskarte na ito ay makakatulong sa pag-optimize ng search engine, pati na rin.
Upang ipakita ang pagpoposisyon, makita ang isang pahina na may tatlong hanay ngunit walang header o footer. Maaari mong gamitin ang pagpoposisyon upang lumikha ng anumang uri ng layout na gusto mo.
Para sa isang layout ng tatlong haligi, tukuyin ang tatlong mga seksyon: kaliwang hanay, kanang haligi, at nilalaman.
Ang mga seksyon na ito ay instantiated gamit ang ARTICLE element para sa nilalaman at dalawang SEKSYON elemento para sa dalawang haligi. Ang lahat ay magkakaroon din ng isang katangian na tumutukoy dito. Kapag ginamit mo ang id attribute, dapat mong idagdag ang isang natatanging pangalan para sa bawat id.
Puwesto ang Nilalaman
Paggamit ng CSS, tukuyin ang posisyon para sa iyong mga elemento ng ID. I-imbak ang impormasyon ng iyong posisyon sa estilo ng tawag tulad nito:
#content {
}
Ang nilalaman sa loob ng mga elementong ito ay aabutin ng mas maraming espasyo hangga't makakaya, katulad ng 100 porsiyento ng lapad ng kasalukuyang lokasyon o ng pahina. Upang maapektuhan ang lokasyon ng isang seksyon nang hindi pinipilit ito sa isang nakapirming lapad, baguhin ang padding o ang mga katangian ng margin.
Para sa layout na ito, itakda ang dalawang haligi sa mga nakapirming lapad at pagkatapos ay itakda ang kanilang posisyon absolute, upang hindi sila maaapektuhan ng kung saan matatagpuan ang mga ito sa HTML.
# kaliwa-haligi {
posisyon: absolute;
kaliwa: 0;
lapad: 150px;
margin-left: 10px;
margin-top: 20px;
kulay: # 000000;
padding: 3px;
}
# right-column {
posisyon: absolute;
kaliwa: 80%;
itaas: 20px;
lapad: 140px;
padding-left: 10px;
z-index: 3;
kulay: # 000000;
padding: 3px;
}
Pagkatapos ay para sa lugar ng nilalaman, itakda ang mga gilid sa kanan at kaliwa upang ang nilalaman ay hindi magkakapatong sa dalawang labas na mga haligi.
#content {
itaas: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
kulay: # 000000;
}
Ang pagtukoy sa iyong pahina gamit ang CSS sa halip na isang HTML na talahanayan ay nangangailangan ng kaunting teknikal na kasanayan, ngunit ang kabayaran ay sumusunod mula sa mas nababaluktot at tumutugon na mga disenyo at mas madali sa paggawa ng mga pagsasaayos sa estruktura sa iyong pahina sa ibang pagkakataon.