Descărcați folderul CD pentru cursul "Lecții HTML și CSS" (141 Mb)
Arhitectura tabelară este o metodă destul de comună de aspect.
Dacă tabelul este folosit pentru aspectul paginii și designul, atunci se numește modelul de aspect.
Figura 1 arată aspectul site-ului, în Figura 2 - în verde este indicat tabelul, care este baza structurii acestui site. Pentru a vă asigura că nu a fost vizibilă grila de pâine, se utilizează un tabel cu o margine invizibilă. Pentru a face acest lucru, eticheta TABLE specifică atributul border = "0".
Figura 1. Aspectul amplasamentului
Figura 2. Tabelul care stă la baza aspectului site-ului
Toată varietatea mijloacelor de proiectare a tabelelor poate fi redusă la trei tipuri:
- "Fix" (greu),
- Design "din cauciuc" și
- Combinată dintre primele două.
1. Design tabular "fix" (aspect) al site-ului
Cu un design "fix", aspectul paginii este creat pe baza tabelelor cu o anumită lățime, de exemplu, o tabelă de paiete cu o lățime de 1000px
.
Exemplul 1. Proiectarea site-ului "fix". Figura 3 prezintă un exemplu de cod de proiectare fix (dur) bazat pe o tabelă de pană de 1000px. În Figura 4 - aspectul acestui aspect.
Alegerea lățimii mesei depinde de orientarea monitoarelor utilizatorului pe rezoluția specifică. Astfel, pentru rezoluția orizontală 1024px - necesar să se ia lățimea tabelelor de prototipuri 960-980 pixeli pentru lățimea ekrana1280px - lățimea mesei poate lua prototipuri 1200-1220px etc.
În acest caz, site-ul va fi afișat pe întreaga lățime a ecranului pe rezoluții mai mari monitoare de pe ambele părți ale aspectul site-ului va rămâne un spațiu gol de pe monitoare cu un ecran de rezoluție mai mică va apărea în partea de jos a barei de defilare orizontală.
1. Implementați o pagină web bazată pe figurile 3 și 4. Salvați fișierul.
2. Schimbarea dimensiunii browserului, analiza comportamentului layout-ului.
2. Designul tabelar (aspectul) tabelului "Rubber" al site-ului
"Locașul de cauciuc" se caracterizează prin utilizarea de tabele de lățime, date în procentaj din lățimea browserului. În acest caz, pagina va reveni în funcție de lățimea browserului.
Exemplul 2. Proiectarea "cauciucului" site-ului. Figura 5 prezintă un exemplu de cod pentru proiectarea "cauciucului", care se bazează pe o masă de pană cu lățimea de 100% a ecranului. În Figura 6 - aspectul acestui aspect.
1. Implementați o pagină web bazată pe figurile 5 și 6. Salvați fișierul.
2. Schimbarea dimensiunii browserului, analiza comportamentului layout-ului.
3. Proiectarea combinată a site-urilor web
Puteți crea o structură flexibilă a site-ului combinat (Figura 7) - o combinație de design "fix" și "cauciuc". atunci când lățimea unora dintre celulele din tabel este definit de o valoare absolută (în pixeli), și acele celule care au de a face cu cauciuc sunt stabilite ca procent din lățimea mesei de aspect, sau (lățime) parametrul lățime nu este specificat deloc. De exemplu:
În exemplul de mai sus, lățimea celulei "cauciuc" nu este specificată și va varia în funcție de spațiul liber rămas al ecranului.
Deci, dacă lățimea ecranului este de 1600 pixeli, lățimea celulei "cauciuc" va fi 1600-100-50-150 = 1300 pixeli.
Dacă lățimea ecranului este de 1280 de pixeli, lățimea celulei "cauciuc" va fi de 1280-100-50-150 = 980 pixeli.
Dacă lățimea ecranului este de 1024 pixeli, lățimea "celulă de cauciuc" va fi 1024-100-50-150 = 724 pixeli.
Exemplul 3. Combinația de design "fix" și "cauciuc". Figura 8 prezintă un exemplu de cod pentru un design combinat, bazat pe o masă de pană cu lățimea de 100% a ecranului. În figura 9 - aspectul acestui aspect.
1. Implementați o pagină web bazată pe figurile 8 și 9. Salvați fișierul.
2. Schimbarea dimensiunii browserului, analiza comportamentului layout-ului.
Cel mai adesea, componenta layout constă nu dintr-un tabel, ci din mai multe tablouri imbricate. Acest lucru vă permite să extindeți posibilitățile de a crea un design complex. vă permite să creați rețele de structuri complexe.
Exemplul 4. Un loc de cauciuc cu mese imbricate
1. Implementați o pagină Web bazată pe figurile 10 și 11. Salvați fișierul.
2. Schimbarea dimensiunii browserului, analiza comportamentului layout-ului.
1. Folosind elementele site-ului MyHouse.ru creați două pagini web cu un aspect tabular combinat al site-ului.
2. În partea de sus a site-ului, plasați un text derulant.
3. În partea stângă a site-ului - meniul, în partea dreaptă - conținutul paginii web.
4. Pe fiecare pagină web un hyperlink care duce la o altă pagină creată de dvs. Link-urile hyperlink-uri trebuie să fie reciproce, și anume Din prima pagină ar trebui să existe o tranziție la cea de-a doua pagină și, respectiv, din a doua pagină, mergeți la prima pagină.
Articole similare
Trimiteți-le prietenilor: