Și acum, uita-te la cum și de ce imaginile sunt tăiate și de ce puneți-le în tabel. Și ce probleme pot apărea astfel.
De ce imaginea tăiat?
La urma urmei mai ușor de la o dată pentru a plasa o imagine de pe pagina de start! Există mai multe motive importante:
- când pagina încarcă toate elementele sale sunt swinging paralel cu browser-ul. Astfel, o dimensiune a imaginii de 100KB va leagăn pentru mai mult de 10 poze cu 10KB;
Și atunci putem folosi al doilea mod, mai dificil, liber de toate aceste dezavantaje. Am tăiat imaginea în așa fel încât câmpul, făcând clic pe care tranziția va fi efectuată, ar fi prezentat ca o imagine separată (sau mai multe imagini).
Cum să taie?
Ei bine, de ce taie o imagine care le-am găsit, iar acum trece la întrebarea - cum să taie?
După ce vom alege o imagine destinată tranșării, este necesar să se analizeze cu atenție și mental să aloce acele zone care este de dorit să se prezinte fragmente separate. Aceste zone pot include următoarele:
- zone de culoare;
- zone cu repetarea model și un număr mic de culori;
- câmp fotografic mic, care poate fi cea mai bună metodă de compresie JPEG;
- referințe grafice (un exemplu tipic - meniu);
- zone pentru care substituirea va fi realizată imaginea folosind un script. aplicație tipică - schimbarea imaginii atunci când treceți peste meniu. Un caz special - schimbarea de butoane de meniu.
Al doilea pas va trebui să elaboreze o grilă a tabelului viitor, astfel încât zona alocată mental au fost în celule individuale. Mai mult decât atât, nu neapărat să facă astfel încât fiecare bucată de imagine a fost într-o celulă separată. Suficient pentru a face în așa fel încât într-o singură celulă ar putea posta fotografii - fie toate la curent, sau toate într-o coloană.
După ce am definit fragmente, este posibil să se înceapă direct de tăiere. Cel mai convenabil mod de a face acest lucru, ghiduri în afară, în PhotoShop (sau ImageReady), și folosind instrumentul „Crop“. Dar, așteptați un minut, o rezervă importantă - în cazul în care aveți de gând să taie imagine compozit complex, atunci înainte de a fi de dorit să se traducă toate imagine într-o paletă, în caz contrar este posibil ca părți ale imaginii nu va fi coincide la marginile de nuanțe de culori.
După tăiere (și este mai bine să o facă în proces), este necesar să se analizeze fiecare fragment pentru metoda dorită de compresie pentru ea (GIF sau JPEG) și numărul de culori necesare. zone de culoare pot fi pliate imediat, înlocuindu-le, ulterior, o culoare cu un singur pixel GIF-lea.
Ei bine, imaginea este tăiat, și ne-am dovedit a fi o grămadă de piese pe care avem nevoie pentru a trage împreună. Acum vom folosi un tabel. Pentru a începe, trebuie să scrie cadru. Numărul de rânduri și coloane din tabel trebuie să se potrivească exact numărul lor în rețea. Să presupunem că am tăiat imaginea în așa fel încât sa dovedit 3 linii și 4 coloane. În acest caz, cadrul va arata astfel:
Acum trebuie să punem fiecare bucată de imagine în celula dorită. În acest caz, trebuie să urmeze o regulă. Regula este că toate etichetele trebuie să fie plasat într-o celulă într-un singur lanț, fără a presupune între ele spații libere și caracterul retur de car.
De ce? Tot pentru aceeași compatibilitate cu Netscape. Cert este că orice diferență între tag-ul NN percepe ca anumite lățimea spațiului având. Și imediat ce am pus o imagine la masă, nerespectarea acestei reguli, astfel încât instantaneu între fragmente dintr-un decalaj, prin care începe să strălucească prin fundal. Acest lucru este evident mai ales în cazul în care marginile fragmentelor de contrast cu un fundal de pagină. În Internet Explorer, toate, desigur, se arată în mod normal.
În mod ideal, este de dorit să scrie tot codul într-o singură linie a celulei, și în acest caz, nu au probleme. Dar linia poate fi prea mult timp, și va afecta lizibilitatea codului. În acest caz, este posibil să se transfere copci, lăcrimarea-le în interiorul tag-uri. Asta e ceea ce am făcut în exemplul de mai sus.
Când plasați o imagine în tabel, este necesar să se prescrie înălțimea și lățimea pentru fiecare fragment care browser-ul poate începe redarea paginii, fără să mai aștepte pentru a descărca toate fragmentele. De asemenea, asigurați-vă că baza de prescriptie medicala atributul border = „0“ alt. Exemplu de cod corect este prezentat mai jos:
.
În cazul în care fragmentul este de a servi în același timp ca o referință (de exemplu, elementul de meniu), imaginea trebuie să fie închisă în etichetă . fără a uita că etichetele nu pot lăsa lacune:
Aici, probabil, tot ce se poate spune despre plasarea imaginile tăiate în tabel pentru afișarea corectă a acestora în oricare dintre browsere. În următorul articol ne vom uita la unele dintre efectele care pot fi obținute folosind tabele invizibile.