Tableless Layouts Buka Frontiers Desain Anyar
Ana akeh alasan kanggo ora nggunakake tabel kanggo tata letak . Salah sawijining alasan sing paling kerep diparingake kanggo terus digunakake yaiku amarga ora bisa gawe tata letak karo CSS. Senajan skrip CSS mbutuhake kurva belajar, nalika sampeyan ngerti carane nggawe tata letak CSS, sampeyan bisa uga bakal kaget kanthi gampang. Lan nalika sampeyan sinau, sampeyan bakal nemtokake alasan sing paling umum kaloro wong menehi ora nggunakake CSS- "Iku luwih cepet nulis tabel." Iku luwih cepet amarga sampeyan ngerti tabel, nanging yen sampeyan sinau CSS, sampeyan bisa uga kaya cepet karo sing.
Dukungan Browser CSS Positioning
Posisi CSS uga didhukung ing kabeh browser modern . Kajaba yen sampeyan mbangun situs kanggo Netscape 4 utawa Internet Explorer 4, pembaca sampeyan dudu kesulitan ndeleng kaca web CSS sing diposiseni.
Rethinking Cara Nggawe Kaca
Nalika mbangun situs nggunakake tabel, sampeyan kudu mikir ing format tabular . Ing tembung liyane, sampeyan mikir babagan sel lan baris lan kolom. Kaca web sampeyan bakal nggambarake pendekatan iki. Nalika sampeyan pindhah menyang desain posisi CSS, sampeyan bakal miwiti mikir babagan kaca ing isi konten, amarga isi kasebut bisa ditemokake ing ngendi wae sampeyan pengin ing tata letak-malah dilapisi ing ndhuwur isi liyane.
Situs web beda duwe struktur sing beda. Kanggo mbangun kaca sing efektif, evaluasi struktur samubarang kaca sadurunge sampeyan nemtokake isi kasebut. Kaca conto bisa nyakup limang bagean sing béda:
- Header . Ngarep kanggo iklan spanduk, jeneng situs, pranala navigasi, judhul artikel lan uga sawetara bab liyane.
- Kolom tengen . Iki minangka sisih tengen kaca kanthi kotak telusuran, iklan, kothak video, lan blanja.
- Isi . Tèks artikel, postingan blog utawa kréta shopping-the meat-and-potato of the page.
- Iklan langsung . Iklan ing baris ing isi kasebut.
- Footer . Pandhu arah ngisor, informasi penulis, informasi hak cipta, iklan spanduk ngisor, lan pranala sing gegandhengan.
Tinimbang nglebokake unsur kasebut ing sajrone tabel, gunakake unsur bagean HTML5 kanggo nemtokake bagian sing beda saka isi kasebut, banjur gunakake posisi CSS kanggo nempatake elemen isi ing kaca kasebut.
Ngenali Bagéan Konten
Sawise sampeyan wis nemtokake wilayah isi sing beda ing situs sampeyan, sampeyan kudu nulis ing HTML. Nalika sampeyan bisa, umumake, nulis bagean-bagean ing urutan apa wae, iku apik kanggo nggoleki bagean paling penting saka kaca sampeyan dhisik. Pendekatan iki bakal mbantu ngoptimalake search engine, uga.
Kanggo nduduhake posisi, mbayangno kaca karo telung kolom nanging ora ana header utawa footer. Sampeyan bisa nggunakake posisi kanggo nggawe jinis tata letak sing disenengi.
Kanggo tata letak telung kolom, nemtokake telung bagean: kolom kiwa, kolom tengen, lan isi.
Bagian kasebut bakal instantiated nggunakake elemen ARTICLE kanggo isi lan loro SECTION elemen kanggo rong kolom. Kabeh bakal uga duwe atribut sing ngenali. Nalika sampeyan nggunakake id atribut, sampeyan kudu menehi jeneng unik kanggo saben id.
Posisi Konten
Nggunakake CSS, pilih posisi kanggo ID sampeyan. Simpen informasi posisi sampeyan ing telpon gaya kaya iki:
#content {
}
Isi ing unsur iki bakal njupuk akeh ruang sing bisa, yaiku 100 persen saka jembar lokasi saiki utawa kaca. Kanggo mangaruhi lokasi bagean tanpa meksa menyang ambane sing tetep, ganti padding utawa sifat wates.
Kanggo tata letak iki, ngeset rong kolom kanggo nyetel lebar lan banjur nyetel posisi sing mutlak, supaya ora bakal kena pengaruh ing endi sing ditemokake ing HTML.
# left-column {
posisi: Absolute;
kiwa: 0;
ambane: 150px;
margin-left: 10px;
margin-top: 20px;
werna: # 000000;
padding: 3px;
}
# tengen kolom {
posisi: Absolute;
kiwa: 80%;
ndhuwur: 20px;
ambane: 140px;
padding-left: 10px;
z-index: 3;
werna: # 000000;
padding: 3px;
}
Banjur kanggo area isi, atur pinggir ing sisih tengen lan kiwa supaya isi ora tumpang tindih ing rong kolom njaba.
#content {
ndhuwur: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
werna: # 000000;
}
Ngartèkaké kaca nganggo CSS tinimbang tabel HTML mbutuhaké skill sing luwih tèknis, nanging dhuwit kasebut miturut desain sing luwih fleksibel lan responsif lan luwih gampang nggawé pangaturan struktural menyang kaca sing luwih anyar.