Tableless Layouts Avatud uued kujunduspiirid
On mitmeid põhjuseid, miks mitte kasutada tabeleid paigutuse jaoks . Üks kõige sagedasemaid põhjusi, mida inimesed annavad nende jätkamiseks, on see, et CSS-i kujundust on raske teha. Kuigi CSS-skriptimine sisaldab õppimiskõverat, kui te mõistate CSS-i kujunduse tegemist, võite olla üllatunud, kui lihtne see võib olla. Ja kui sa õpid, siis on sul käsitletud teist kõige tavalisemat põhjust, miks inimesed ei anna CSS-i kasutamise eest: "Tabelite kirjutamine on kiirem." See on kiirem, sest teate tabeleid, kuid kui õpid CSSi, võib see olla sama kiire koos sellega.
CSS-positsioneerimise brauseri tugi
CSS-positsioneerimine on kõigis kaasaegsetes brauserites hästi toetatud. Kui te ei tööta Netscape 4 või Internet Explorer 4 saidi ülesehitamisel, ei tohiks teie lugejatel olla CSS-i positsioonis olevate veebilehtede vaatamise probleeme.
Veebi kujundamise ümbervaatamine
Kui loote saidi tabelite abil, peate mõtlema tabelina . Teisisõnu, mõtled te rakkude, rida ja veerge. Teie veebisaidid peegeldavad seda lähenemist. Kui liigute CSS-i positsioneerimise disaini, hakkate sisu mõttes mõtlema oma lehtedele, kuna sisu saab paigutada paigutuskohta kujutist, isegi kui see on teise sisu peal.
Erinevatel veebisaitidel on erinevad struktuurid. Efektiivse lehe loomiseks hinnake antud lehe struktuuri, enne kui sellele sisu määratakse. Näidisleht võib sisaldada viit erinevat osa:
- Pealkiri . Bännerreklaami algus, saidi nimi, navigeerimislingid, artikli pealkiri ja veel mõned asjad.
- Parem veerg . See on lehe parempoolne osa otsingukasti, reklaamide, videokastite ja ostupiirkondadega.
- Sisu . Artikli, blogipostituse või ostukorvi tekst - lehe liha ja kartul.
- Sisseehitatud reklaamid . Reklaam sisule sisestatakse.
- Jalus Alumine navigatsioon, autori teave, autoriõiguse teave, alumised bännerreklaamid ja nendega seotud lingid.
Selle asemel, et panna need viis elementi tabelisse, kasutage HTML-i sektsioonielemente sisu erinevate osade määratlemiseks ning seejärel kasutage lehe sisu elementide paigutamiseks CSS-i positsioneerimist.
Teie sisuosade määratlemine
Kui olete kindlaks määranud oma saidi erinevad sisupiirkonnad, peate need oma HTML-is kirjutama. Kuigi saate üldjuhul asetada oma sektsioonid ükskõik millises järjekorras, on hea mõte paigutada esmalt kõige olulisemad leheosad. See lähenemine aitab otsingumootori optimeerimisel samuti.
Positsioneerimise näitamiseks kujutlege lehte kolmes veerus, kuid päist ega jalustikut pole. Võite kasutada positsioneerimist, et luua teile sobivat paigutust.
Kolmekohalise paigutuse jaoks määrake kolm sektsiooni: vasak kolonn, parem veerg ja sisu.
Neid jaotisi illustreeritakse, kasutades sisu ARTICLE-elementi ja kahte veergu kahe SECTION-elemendi jaoks. Kõigil on ka omadus selle identifitseerimiseks. Kui kasutate id-atribuuti, peate igale ID-le andma unikaalse nime.
Sisu paigutamine
CSS-i kasutades määrake oma ID-de elementide positsioon. Säilitage oma asukohateave sellises stiilis kõnes:
#sisu {
}
Nende elementide sisu võtab nii palju ruumi kui võimalik, nimelt 100% praeguse asukoha või lehe laiusest. Sektsiooni asukoha mõjutamiseks, muutes selle fikseeritud laiusega, vahetage polindi või marginaali omadused.
Selle paigutuse jaoks seadistage kaks veergu fikseeritud laiusele ja seejärel määrake oma positsioon absoluutseks, nii et neid ei mõjuta see, kus neid HTML-is leitakse.
# vasakpoolne veerg {
ametikoht: absoluutne;
vasakule: 0;
laius: 150px;
margin-left: 10px;
margin-top: 20px;
värv: # 000000;
padding: 3px;
}
# parempoolne veerg {
ametikoht: absoluutne;
vasakule: 80%;
top: 20px;
laius: 140px;
padding-left: 10px;
z-indeks: 3;
värv: # 000000;
padding: 3px;
}
Seejärel määrake sisupiirkonna jaoks parempoolses ja vasakpoolses servas marginaalid, nii et sisu ei kattuks mõlema teise välise veeru poolest.
#sisu {
top: 0px;
marginaal: 0px 25% 0 165px;
padding: 3px;
värv: # 000000;
}
HTML-tabeli asemel HTML-i tabeli asemel CSS-i määramine nõuab natuke rohkem tehnilist oskust, kuid makstav tulu tuleneb paindlikumatest ja reageerimisvõimalustest ning hõlpsamini lehelt hiljem struktuurseid muudatusi teha.