Pagina cadru a paginii web

Arhivarea tabelară este un nume condițional pentru metoda aspectului paginii.

Cu metoda tabulară de aspect, scheletul paginilor site-ului este creat folosind eticheta

. adică, baza structurală a paginii este un tabel în care celulele conțin unul sau altul.







Aceasta este cea mai obișnuită metodă de a face pagini web. Avantajul aspectului tabular este acela că este simplu și rapid în execuție. În plus, paginile care au o masă în centrul lor sunt afișate corect în diferite browsere.

Cred că deja cunoașteți principalele etichete ale tabelelor: acestea sunt etichetele

și nu poate exista de la sine. Eticheta necesară
. crearea unui rând și a unei celule a mesei, respectiv. Și, de asemenea, știți, probabil, de bază de lucru cu tabele în HTML. Dacă nu, atunci vă sfătuiesc să citiți mai întâi despre asta.

Și acum să mergem direct la crearea unui cadru de pagină prin metoda de aspect tabelar.

În general, aspectul cu crearea de tabele este realizat astfel încât granițele tabelelor și celulelor lor să fie invizibile (atributul border = "0"). Voi crea tabele care au granite (atributul border = "1"). Deci, veți fi mai ușor de navigat.

Pasul 1. Masa principală

Propun să menționez tabelul original principal. Facem acest lucru pentru a evita confuzia, deoarece vor fi create tabele suplimentare.

Aici merită menționat următorul punct important. etichetă

. Adică rândul de masă este creat numai dacă există cel puțin o celulă în acesta.

Masa principală
Limita site-ului
Linia principală
subsol
 
 
 

În ceea ce privește lățimea mesei principale, după cum puteți vedea, am instalat-o fixă: egală cu 1000 px. Puteți seta orice lățime, dar nu o face mai mult decât rezoluția ecranului. De exemplu, dacă aveți o rezoluție de 1280x1024. este de dorit ca lățimea mesei principale să nu depășească 1280 px. altfel o parte din acesta nu va fi vizibilă, iar în fereastra browserului va apărea o bară de defilare orizontală.

Și dacă un anumit număr de utilizatori au o rezoluție a ecranului mai mică decât a dvs., de exemplu 1024x768. În acest caz, lățimea mesei principale este mai mare de 1024 px. unii dintre utilizatori nu vor fi confortabil să vizualizeze paginile site-ului dvs., deoarece vor trebui să utilizeze o bară de derulare orizontală.

Există o cale de ieșire din asta. Puteți seta lățimea la 100%. Apoi, lățimea mesei va fi ajustată la dimensiunea ferestrei browserului.

De asemenea, puteți seta valoarea atributului înălțime al etichetei

. care stabilește înălțimea mesei. Lăsați înălțimea mesei principale să fie de 700 px.

Ar trebui să știi. că valorile înălțimii și lățimii tabelului nu sunt constante, adică tabelul nu devine mai mic, dar mai mult poate - totul depinde de dimensiunea conținutului acestuia.

Pasul 2. Tabela de conținut

Creați un tabel în celula rândului principal. Vom numi tabelul pentru conținut - acesta va conține conținutul principal al paginii.

De obicei, un tabel pentru conținut constă din trei coloane, adică are un rând și trei celule care formează coloane.

Masa principală
Limita site-ului

Sfârșitul liniei principale


subsol
 
Începerea liniei principale

Setați lățimea și înălțimea tabelului pentru conținutul la 100%

Celula tabelă stângă pentru conținut
Celula centrală a mesei pentru conținut
Celula dreaptă a tabelului pentru conținut

     






 

Lățimea și înălțimea tabelului pentru conținut sunt setate la 100%. Astfel, se întinde imediat pe întreaga lățime a mesei principale și întreaga înălțime a liniei principale.

Pasul 3. Alinierea verticală

După cum puteți vedea din pașii anteriori, conținutul celulelor de tabelă este aliniat în plan orizontal cu marginea din stânga în mod prestabilit și în planul vertical cu mijlocul.

Dacă alinierea orizontală într-o celulă este, de obicei, lăsată în mod implicit, atunci localizarea conținutului din centrul celulei din planul vertical este rareori satisfăcută de cineva.

Prin urmare, utilizând atributul valign al etichetei

. setați alinierea verticală a conținutului acelor celule pentru care este necesar. În principiu, pentru conținutul celulelor, setați alinierea verticală de-a lungul marginii superioare.

Masa principală
Limita site-ului. Conținutul celulei este aliniat la marginea superioară.

Sfârșitul liniei principale


subsol
 
Începerea liniei principale

Tabele pentru conținut

Celula stângă a tabelului pentru conținut. Conținutul celulei este aliniat la marginea superioară.
Celula centrală a mesei pentru conținut. Conținutul celulei este aliniat la marginea superioară.
Celula dreaptă a tabelului pentru conținut

     

 

Pasul 4. Completați tabelul: capacul, subsolul și conținutul

Deci, în pasul anterior, am terminat formarea scheletului nostru (deși poate fi remodelat și poate face orice schimbare în orice moment).

Acum, hai să mergem la completarea mesei principale. Să începem cu capacul.

Am luat o imagine care a fost capacul site-ului meu și a redus-o la dimensiunea corespunzătoare: Vă reamintesc că lățimea mesei principale și, în consecință, celula sub antet este de 1000 px.

Cunoscând înălțimea imaginii, setați înălțimea corespunzătoare pentru celula alocată antetului: 121 px.

Mergeți la subsol: celula de jos a mesei principale, care este "subsolul" paginii, va fi umplută cu albastru (atributul bgcolor al etichetei

setează culoarea de fond a celulei) și o facem în înălțime egală cu 35 px.

Apoi, editează tabelul pentru conținut: setați lățimea celulei din stânga la 250 px. și celula dreaptă - 150 px. Celula centrală ocupă tot spațiul liber: lățimea sa devine egală cu 600 px.

Masa principală

Limita site-ului.

Sfârșitul liniei principale


Subsolul. Fundal albastru deschis


Începerea liniei principale

Tabele pentru conținut

Celula stângă a tabelului pentru conținut. Conținutul celulei este aliniat la marginea superioară.
Celula centrală a mesei pentru conținut. Conținutul celulei este aliniat la marginea superioară.
Celula dreaptă a tabelului pentru conținut

     

 

În celula din stânga a tabelului pentru conținut, am plasat meniul de navigare pe site, iar în centru - textul.

Pasul 5. Desenați frontierele

Acesta este ultimul pas în care vom trasa granițele.

Am făcut următoarele: pentru marginea antetului site-ului și a celulei centrale a mesei principale, am ales aceeași culoare ca și "subsolul", iar celulele tabelului pentru conținut au margini închise la culoare. Toate limitele sunt realizate printr-o linie continuă și au o grosime de 1 px.

Masa principală

Limita site-ului. Margine albastră deschisă

Sfârșitul liniei principale


Subsolul. Fundal albastru deschis


Începerea liniei principale

Tabele pentru conținut. Bord albastru deschis

Celula stângă a tabelului pentru conținut. Conținutul celulei este aliniat la capătul superior al acesteia
Celula centrală a mesei pentru conținut. Conținutul celulei este aliniat la capătul superior al acesteia
Celula dreaptă a tabelului pentru conținut. Margine albastră închisă

     

 

În acest sens, probabil, finalizăm crearea cadrului paginii prin metoda structurii tabulare.

Puțin mai târziu voi continua să dezvolt această temă: vom complica ușor scheletul nostru, inclusiv în el încă o linie pentru meniul de navigare de sus; puteți plasa, de exemplu, în coloana din stânga o altă masă, împărțind-o astfel în părți etc.

Cu toate acestea, puteți să o faceți singur. În același timp, asigurați materialul trecut!







Articole similare

Trimiteți-le prietenilor: