Panouri - unul dintre elementele preferate ale webmasterilor. Panoul este un element foarte universal, poate fi folosit, de exemplu, ca antet al site-ului:
sau meniul orizontal:
Pentru ca panoul să fie frumos, trebuie să i se dea volum, granițe decorative, umbre, astfel încât grafica nu poate fi eliminată. Cea mai ușoară modalitate este să salvați întregul panou ca imagine și să îl inserați într-o pagină HTML ca element img sau ca fundal al unui element container. În același timp, această metodă este cea mai puțin flexibilă și convenabilă, deoarece panoul va avea o dimensiune rigidă. De obicei, pentru a crea panouri "din cauciuc" (adică, ușor de redimensionat), se utilizează funcția browserelor care procesează imagini de fundal.
Un element de container, indiferent dacă este vorba de o celulă de tabelă sau de o casetă div, poate fi setat la o imagine de fundal utilizând imaginea de fundal stil CSS. Dacă dimensiunea elementului este mai mare decât dimensiunea imaginii de fundal, browserul va duplica automat imaginea de fundal orizontal și vertical, completând astfel întreaga suprafață a elementului cu fundalul. De exemplu, creați o imagine de fundal simplă cu o dimensiune de 16x16 pixeli (imaginea este mărită de 4 ori):
și folosiți-o ca imagine de fundal pentru un tabel cu o dimensiune de 160x160 pixeli:
Browserul a umplut complet masa cu un fundal, duplicând imaginea de fundal de 10 ori pe orizontală și pe verticală. Cu ajutorul fundal repeta CSS-stil, puteți seta modul de duplicare de fundal: repeta-x - duplica numai pe orizontală, repetați-y - duplica numai pe verticală, se repetă - duplicat pe orizontală și pe verticală (implicit), fără repetare - nu duplicat .
Această caracteristică este, de asemenea, utilizată pentru a crea panouri grafice "din cauciuc". Algoritmul pentru crearea unui panou cu lățimea dinamică este după cum urmează:
2. Determinați porțiunea panoului cu o textura uniformă întinsă orizontal. Pentru aceasta este necesar să selectați părțile de încadrare (faceți acest lucru mental, adică noi nu trasăm liniile):
3. Piesele de încadrare din stânga și din dreapta trebuie tăiate din panoul comun și salvate ca imagini separate panel_left.jpg și panel_right.jpg;
4. Din partea intermediară, tăiați o bandă de înălțime a imaginii egală cu înălțimea panoului și o lățime de 1-5 pixeli și salvați, de asemenea, ca imagine separată panel_center.jpg. Ca rezultat, ar trebui să obținem trei imagini mici: panel_left.jpg, panel_center.jpg, panel_right.jpg:
5. Creați un tabel HTML cu un rând și trei celule. Am setat înălțimea mesei egală cu înălțimea panoului și o lățime arbitrară. Prima și a treia celulă au stabilit lățimea corespunzătoare lățimii cadrelor de imagine panel_left.jpg și panel_right.jpg:
6. În prima și a treia celulă a mesei, plasăm elementele img care afișează imaginile noastre. În celula centrală, setați imaginea de fundal panel_center.jpg și duplicați-o orizontal. Acest lucru se poate face cu un fundal în stil CSS:
7. Este necesar să eliminați decalajul dintre celulele mesei folosind stilul de colaps de margine. și, de asemenea, eliminați câmpurile din prima și a treia celulă folosind stilul de umplutură. Acest lucru va permite ca toate imaginile să se potrivească strâns împreună:
De asemenea, merită să aveți grijă de utilizatorii care au dezactivat grafica în browserele lor. Este necesar să setați culoarea de fundal a panoului, aproape de culoarea grafică, precum și să specificați dimensiunile imaginilor din etichetele img. Exemplul final poate fi descărcat aici.