Cadre în HTML, tabele imbricate, css, de frontieră de stabilire
Fig. 3.1. Cadrul obtinut de frontiera parametru
imita Netscape frameului tri-dimensională, browser-ul Opera, în general, păstrează culoarea nemodificată, și Internet Explorer face un cadru solid.
Exemplul 3.1. Utilizarea frontierei
| conținut |
parametru de frontieră definește grosimea marginilor, borderColor - culoarea sa, cellpadding stabilește distanța de la cadru la conținutul tabelului.
tabele imbricate
O altă metodă simplă și versatil pentru construirea unui cadru, care funcționează la fel în browsere diferite, bazate pe suprapunerea celor două tabele una față de cealaltă. Dacă luăm un dreptunghi, de exemplu, hârtie roșie și pe partea de sus a acesteia va impune un alt dreptunghi de culoare albă, un pic mai mici, putem vedea cadrul roșu. Numai că în loc de o foaie de hârtie folosind parametrul bgcolor tag-ul TABLE, tabele și culorile sunt definite.
Exemplul 3.2. Utilizarea tabelelor imbricate
|
În partea superioară lățimea set de masă și înălțime ca parametru tabel bgcolor dorit seturi cadru de culoare, cellspacing atribuie zero și controale cellpadding grosime frontieră. Cu cât această valoare este, mai gros va fi rama.
Pentru masa de interne, este necesar să se precizeze culoarea diferită de culoarea exteriorului, care coincide cu culoarea fundalului paginii web, în exemplu, de exemplu, set alb. cellspacing Parametru sau cellpadding (în acest caz, nu contează pe care să o utilizeze) distanța de la frontieră cadru la conținutul tabelului.
Lățimea și înălțimea mesei interioare trebuie să se potrivească cu lățimea și înălțimea mesei exterioare.
Notă: textul liniei de transfer HTML adaugă automat un spațiu. În cazul în care granița în unele locuri se transformă mai gros decât se dorește, ar trebui să elimine spațiile suplimentare între tag-uri, și, astfel, reduce numărul de rânduri.
Culoarea de umplere a celulei de masă
Folosind culoarea de fundal a celulelor de masă - unul din modurile universale și comune pentru a crea cadre. Crearea unui tabel (fig. 3.2) și se umple cu celulele extreme corecte de culoare (Fig. 3.3).
Grosimea ramei determinată de lățimea și înălțimea celulelor. Asigurați-vă că pentru a plasa în interiorul celulelor lonjeronul de masă - un model clar de 1 cu 1 pixel (în acest exemplu este numit spacer.gif), în caz contrar în browser-ul Netscape, această metodă nu va funcționa.
Exemplul 3.3. Crearea de umbrire culoare cadru de celule de masă
| înălțime = "2"> | ||
| înălțime = "2"> | conținut | înălțime = "2"> |
| înălțime = "2"> | înălțime = "2"> |
Acest exemplu este un cadru roșu 2 pixeli grosime, se pare mai elegant. Parametrii tabel cellpadding cellspacing și echivalat cu zero, astfel încât cadrul rămâne grosimea dorită și fără lacune. Dacă puneți un tabel în interiorul textului, acesta va adera la cadru, care este urât și greu de citit. Pentru a adăuga decalaje pot fi create în acest scop, celule suplimentare, utilizați un tabel cuibărit sau de a folosi stiluri.
Notă: Metoda de mai sus este sensibil la diferiți parametri, astfel încât în cazul redare incorecte a cadrului, verificați următoarele:
cadru decorativ
După tăiere model pe partea 8 obțin fragmente:
Cadru fragment a cincea nu este (5.gif), pentru că avem o înlocuiți conținutul. Acum, creați un tabel de 3x3, așa cum este prezentat în Fig. 3.2 și în celulele sale loc desenele create.
Exemplul 3.4. Crearea unui cadru decorativ
| width = "1"> | ||
| conținut | ||
| width = "1"> |
Tabelul parametrilor de frontieră, cellpadding cellspacing și trebuie să fie zero, altfel liniile nu vor acosta unele cu altele.
Cornere inserate ca modele normale cu ajutorul tag-ul IMG, dar liniile orizontale și verticale trebuie să fie stabilite cu fundalul unei celule de tabel, setarea de fundal. Acest lucru va face cadru nostru scalabile și dimensiunea acesteia va varia în funcție de conținutul.
Pentru linia de strâns între ele și între ele nu a existat nici o lacune, este necesar să se specifice toate dimensiunile de celule și modele.
În celulele care fundalul sunt plasate linii orizontale și verticale, este necesar să se pună un distanțier - este fie un spațiu sau transparent, în format GIF dimensiunea imaginii 1 cu 1 pixel (în exemplul de fișier numit spacer.gif). Acest lucru se face pentru a păcăli browser-ul Netscape, care nu prezintă conținutul celulei atunci când acesta este gol.
Metoda de mai sus vă permite să creați aproape orice fel de cadru.
Utilizarea stilurilor
Folosind stiluri de cadru pot fi aplicate la orice bloc-tag, de exemplu, punctul (tag P) și tag-ul Tabelul DIV. Stiluri vă permit să creați un cadru este mai simplu și mai convenabil decât folosind tabele și oferă diferite tipuri de cadre, care sunt prezentate în Fig. 3.6.
Fig. Cadrul 3.6 tip se stabilesc cu stilurile
Primele două tipuri de frame-uri - punctat și punctate browsere acceptate Netscape și Internet Explorer numai cu versiuni mai vechi.
Cadrul este setat parametrul cel mai ușor de frontieră. ceea ce indică imediat aspectul, grosimea și culoarea.
Exemplul 3.6. Utilizarea stilurilor
Atunci când se lucrează pe tehnologia computerului necesar să se așeze în jos, astfel încât
mâinile cu antebrațele formează un unghi drept, ochi pus pe
30-40 cm distanță de suprafața de lucru a monitorului.
Exemplul folosește o margine dublă, a cărui grosime este compus din lățimea liniei și spațiere. Așa că rama nu este în contact cu textul, liniuță din cadrul la conținutul opțiunii umplutură.
Notă: browserul Netscape 4.x nu se adaugă un cadru pentru tabele și limitează lățimea cadrului și conținutul său.
Realizat de uCoz