Mavzu: Web-dizaynda grafikadan foydalanish
Web-sahifani “jonlantirish”ning eng samarali usuli – unga turli rasmlar joylashtirishdir. Faqat matndan iborat web-sahifa ma’lumotga boy bo’lishi mumkin, lekin zerikarli bo’ladi. Ammo web-sahifaga haddan ziyod rasm joylashtirish web-sahifani bachkana qilib yuboradi hamda web-sahifa faylining hajmini kattalashtirib yuboradi. Fayl qanchalik katta hajmga ega bo’lsa, uni Internet tarmog’idan o’qib olish shuncha ko’p vaqt talab etadi. Demak, web-sahifaga fayl hajmi kichik bo’lgan rasmlarni joylashtirish maqsadga muvofiqdir. Internet tarmog’ida, asosan, jpeg va gif formatli rasm fayllari qo’llaniladi. Chunki, birinchidan, web-sahifa hajmi kichik bo’lishi uchun, ikkinchidan, web-brauzerlar bu fayllarni qo’shimcha dasturlarsiz aks ettira oladi. Darhaqiqat, bmp formatli rasm faylini jpeg formatga o’tkazilsa, fayl hajmi bir necha barobar kichrayadi. Rasm faylini bir formatdan boshqasiga o’tkazish maxsus dasturlar (ACDSee, Photoshop,…) yordamida amalga oshiriladi.
Web-sahifaga rasm joylashtirish uchun ![]() juftmas tegi (image ing. tasvir) qo’llaniladi. Rasm faylini ko’rsatish uchun mazkur tegga SRC (source - manbaa) parametri qo’shilishi shart. Masalan, web-sahifaga joylashtirilayoygan rasm faylining nomi “mypic.jpg” bo’lsa, HTML-hujjatga quyidagi satr qo’shiladi:
,
bu yerda mypic.jpg SRC parametrining qiymati.
Avvalgi mavzularda matnni web-sahifada ALIGN parametri yordamida joylashtirish bilan tanishdingiz. Mazkur parametrni web-sahifada rasmni chap yoki o’ng tomonga joylashtirish uchun ham qo’llash mumkin. Aslida bu parametr rasm yoniga matnni turli holatlarda joylashtirish uchun qo’llaniladi, ammo rasm joylashgan satrda matn bo’lmasa, u rasmning joylashishiga ta’sir etadi. Masalan, yoki yozuvi “mypic.jpg” rasmni web-sahifaning o’ng tomoniga joylashtiradi.
Web-sahifada matn va rasmni ALIGN parametrining quyidagi jadvaldagi qiymatlariga mos holatlardan birida joylashtirish mumkin:
MIDDLE
|
Rasmning o’rtasi joriy (rasmdan keyingi) satrning tagiga tekislanadi
|
ABSMIDDLE
|
Rasmning o’rtasi joriy satrning o’rtasiga tekislanadi
|
BOTTOM
|
Rasmning quyi chegarasi joriy satrning tagiga tekislanadi
|
ABSBUTTOM
|
Rasmning quyi chegarasi joriy satrning tagchizig’iga tekislanadi
|
TOP
|
Rasmning yuqori chegarasi joriy satrning eng katta elementiga tekislanadi
|
LEFT
|
Rasm chap hoshiyaga tegib turadi, matn rasmni o’ng tomoniga yoziladi
|
RIGHT
|
Rasm o’ng hoshiyaga tegib turadi, matn rasmni chap tomoniga yoziladi
|
Masalan:
1. yozuvi web-sahifaga “kub.bmp” rasmini matnning joriy satrini eng katta elementiga tekislaydi:
2. yozuvi web-sahifaga “kub.bmp” rasmini o’ng hoshiyaga tegizib, rasmning yuqori chegarasi joriy satrning eng katta elementiga tekislaydi va joriy satr rasmni chap tomoniga yoziladi:
Shuni ta’kidlash joizki, web-sahifada matn va rasmning joylashish holatlari matn formatiga xos teglarning ishlatilishiga ham bog’liq, buni ko’rish uchun yuqoridagi misollardan ikkinchisida
tegini olib tashlashning o’zi kifoya.
Web-sahifaga rasm joylashtirishda uning o’lchamlarini ham tanlash mumkin. Buning uchun WIDTH (eni, kengligi) va HEIGHT (bo’yi, balandligi) parametrlaridan foydalaniladi. Mazkur buyruqlar yordamida web-sahifaga joylashtirilayotgan rasmning eni va bo’yi piksellarda yoki rasmning asl o’lchamiga nisbatan foiz hisobida beriladi. Rasmning o’lchamlarini foiz hisobida berilishi noqulay (ba’zi brauzerlar foizni qabul qilmaydi). Masalan,
yozuvi mypic.jpg fayldagi rasmning (yuqoridagi jadvaldagi 130x100 pikselli rasm) asl o’lchamlari qanday bo’lishidan qatiy nazar uni web-sahifaga 50x100 piksel o’lchamli qilib joylashtiradi:
Rasm o’lchamlarini kattalashtirish uning sifatini yomonlashishiga olib kelishini unutmang! Rasmni biror grafik muhharir yordamida kerakli o’lchamga keltirib olib, so’ngra web-sahifaga joylashtirish maqsadga muvofiqdir!
Web-sahifaga rasm joylashtirilganda uning atrofida bo’sh joy bo’lmasligi, ya’ni, ekranda bu rasmga matn yoki boshqa rasm “tegib” chiqishi mumkin (yuqoridagi 1-misol). Web-sahifadagi rasm atrofida bo’sh joy (bo’shliq – space) qoldirish (rasmdan chekinish) uchun HSPACE (rasmning chap va o’ng tomonidan bo’sh joy qoldiradi) va VSPACE (rasmning tepasi va tagidan bo’sh joy qoldiradi) buyruqlari qo’llaniladi. Qoldiriladigan bo’sh joy piksellarda beriladi. Masalan,
yozuvi web-sahifadagi (lola.jpg) rasmning o’ng, chap, tepa va pastki tomonlaridan kengligi 15 pikselga teng (ramkasimon) bo’sh joy qoldiradi:
Rasm atrofida (qora) ramka hosil qilish uchun BORDER (chegara) parametridan foydalaniladi. Bunda parametr qiymati sifatida ramka qalinligi piksellarda olinadi, ya’ni masalan:
.
|
