Desenele fără tablă deschid noi frontiere de design
Există multe motive să nu folosiți tabelele pentru aspect . Unul dintre motivele cele mai frecvente pe care oamenii le dau pentru continuarea folosirii lor este că este greu de făcut aspectul cu CSS. Deși scripting-ul CSS implică o curbă de învățare, atunci când înțelegeți cum să faceți schema CSS, s-ar putea să vă surprindeți cât de ușor poate fi. Iar odată ce ați învățat, ați abordat cel de-al doilea motiv cel mai frecvent pe care oamenii îl dau pentru că nu utilizează CSS - "Este mai rapid să scrieți mese". Este mai rapid pentru că știți mese, dar odată ce ați învățat CSS, ați putea fi la fel de repede cu ce.
Sprijin pentru browser pentru poziționarea CSS
Poziționarea CSS este bine susținută în toate browserele moderne . Cu excepția cazului în care construiți un site pentru Netscape 4 sau Internet Explorer 4, cititorii dvs. nu ar trebui să aibă probleme în vizualizarea paginilor Web CSS poziționate.
Regândirea modului în care construiți o pagină
Când construiți un site utilizând tabele, trebuie să vă gândiți într-un format tabelar . Cu alte cuvinte, vă gândiți în termeni de celule și rânduri și coloane. Paginile dvs. web vor reflecta această abordare. Când vă deplasați la un design CSS de poziționare, veți începe să vă gândiți la paginile dvs. în ceea ce privește conținutul, deoarece conținutul poate fi plasat oriunde doriți în aspect - chiar și în straturi deasupra altor conținuturi.
Site-urile diferite au structuri diferite. Pentru a construi o pagină eficientă, evaluați structura oricărei pagini date înainte de al atribui conținutului. O pagină de exemplu poate conține cinci secțiuni distincte:
- Header . Acasă la anunțul banner, numele site-ului, legăturile de navigare, titlul articolului și câteva alte lucruri.
- Coloana din dreapta . Aceasta este partea dreaptă a paginii cu caseta de căutare, anunțurile, casetele video și zonele de cumpărături.
- Conținut . Textul unui articol, post de blog sau coș de cumpărături - carnea și cartofii paginii.
- Anunțuri inline . Anunțurile sunt incluse în interiorul conținutului.
- Footer . Navigarea de jos, informații despre autor, informații privind drepturile de autor, anunțuri bancare inferioare și linkuri similare.
În loc să puneți cele cinci elemente într-un tabel, utilizați elementele de secționare HTML5 pentru a defini diferite porțiuni ale conținutului și apoi utilizați poziționarea CSS pentru a plasa elementele de conținut pe pagină.
Identificarea secțiunilor de conținut
După ce ați definit diferitele zone de conținut ale site-ului dvs., trebuie să le scrieți în codul HTML. În timp ce, în general, puteți plasa secțiunile în orice ordine, este o idee bună să plasați mai întâi cele mai importante părți ale paginii dvs. Această abordare va ajuta și la optimizarea motorului de căutare.
Pentru a demonstra poziționarea, imaginați o pagină cu trei coloane, dar fără antet sau subsol. Puteți utiliza poziționarea pentru a crea orice tip de aspect care vă place.
Pentru un aspect în trei coloane, definiți trei secțiuni: coloana din stânga, coloana din dreapta și conținutul.
Aceste secțiuni vor fi instanțiate utilizând elementul ARTICOL pentru conținutul și două elemente SECTION pentru cele două coloane. Totul va avea și un atribut care îl identifică. Când utilizați atributul id, trebuie să atribuiți un nume unic pentru fiecare id.
Poziționarea conținutului
Folosind CSS, definiți poziția elementelor dvs. ID'd. Stocați informațiile despre poziția dvs. într-un apel de stil astfel:
#content {
}
Conținutul în aceste elemente va ocupa cât mai mult spațiu posibil, și anume 100% din lățimea locației curente sau a paginii. Pentru a afecta locația unei secțiuni fără al forța la o lățime fixă, modificați proprietățile de umplere sau margine.
Pentru acest aspect, setați cele două coloane la lățimi fixe și apoi setați poziția lor absolută, astfel încât acestea să nu fie afectate de locul unde se găsesc în codul HTML.
# stânga-coloană {
poziția: absolută;
stânga: 0;
lățime: 150px;
margin-stânga: 10px;
margin-top: 20px;
culoare: # 000000;
padding: 3px;
}
# right-column {
poziția: absolută;
stânga: 80%;
top: 20px;
lățime: 140px;
padding-left: 10px;
z-index: 3;
culoare: # 000000;
padding: 3px;
}
Apoi, pentru zona de conținut, setați marginile din dreapta și din stânga, astfel încât conținutul să nu se suprapună celor două coloane din afară.
#content {
top: 0px;
margine: 0px 25% 0 165px;
padding: 3px;
culoare: # 000000;
}
Definirea paginii dvs. utilizând CSS în locul unei tabele HTML necesită o abilitate mai puțin tehnică, dar câștigul rezultat rezultă din designuri mai flexibile și mai receptive și mai ușor de efectuat ajustări structurale ale paginii dvs. mai târziu.