Veb saytlar onlardan əvvəl gələn hər hansı bir ünsiyyət vasitəsi kimi fərqlənmir. Çap, radio və hətta televiziya kimi əvvəlki media formatlarından başqa saytları müəyyən edən əsas məsələlərdən biri " köprü " konsepsiyasındadır.
Həm də adətən "əlaqələr" kimi tanınan köprülər, İnterneti bu qədər dinamikləşdirir. Başqa bir məqalə və ya digər qaydanı istinad edən çap nəşrlərindən fərqli olaraq, bu linklər istifadəçilərə digər səhifələrə və resurslara həqiqətən göndərmək üçün istifadə edə bilər. Heç bir yayım media bunu edə bilməz. Televiziyada radio və ya görünüşdə bir reklamı eşitdirə bilərsən, ancaq bu reklamlarındakı şirkətlərə asanlıqla saytın edə biləcəyi şəkildə gələ biləcək köprülər yoxdur. Bağlantılar həqiqətən inanılmaz bir ünsiyyət və qarşılıqlı vasitədir!
Çox vaxt veb saytlarda olan əlaqələr qonaqlar eyni saytın digər səhifələrinə istiqamətləndirən mətn məzmunudur. Veb saytın naviqasiyası tətbiq olunan mətn keçidlərinin bir nümunəsidir, lakin əlaqələr mətnə əsaslanmalıdır. Ayrıca şəkillərinizi veb saytınıza asanlıqla bağlaya bilərsiniz. Bunun necə edildiyini nəzərdən keçirək, sonra da görüntü əsaslı köprülərdən istifadə etmək istəsəniz bəzi hallarda.
Bir şəkil bağlamaq necə
Yapmanız gereken ilk şey, resminizi HTML sənədinizə yerləşdirməkdir. Şəkil əsaslı bir linkin ümumi istifadə olunması saytın giriş səhifəsindəki səhifənin səhifəsinə qoşulan logo qrafikidir. Aşağıdakı nümunə kodumuzda istifadə etdiyimiz fayl bizim logo üçün SVG . Görünüş keyfiyyətini və kiçik bir fayl ölçüsünü qoruyaraq, fərqli qətnamələr üçün ölçeklerimizi ölçməyə imkan verəcəkdir.
Görünüşünüzü HTML sənədində necə yerləşdirə bilərsiniz:
Resim etiketinin ətrafında, indi görüntüdən əvvəl bağlama elementi açaraq və şəkildən sonra zərbəni bağlamaq üçün çapa keçid əlavə edərdiniz. Bu mətni necə bağlayacağınıza bənzəyir, anker yazıları ilə əlaqə qurmaq istədiyiniz sözləri yerinə qoymaq yerinə, şəkil çəkdirirsiniz. Aşağıdakı nümunədə, "index.html" olan saytımızın ana səhifəsinə qoşuluruq.
Bu HTML səhifənizə əlavə edərkən, çapa etiketi ilə şəkil etiket arasında boşluq qoymayın. Bunu etsəniz, bəzi brauzerlər vahid görünəcək görünüşün yanında kiçik keneler əlavə edər.
Loqo görüntüsü indi də bu günlərdə olduqca çox veb standart olan bir ana səhifə düyməsi kimi çıxış edəcək. Görünüşümüzün genişliyi və boyu kimi hər hansı bir vizual üsluba daxil olmadığımıza diqqət yetirək, HTML formatında. Biz bu vizual üslubları CSS-də tərk edəcəyik və HTML strukturunun və CSS üslublarının təmiz bir şəkildə ayrılmasını təmin edəcəyik.
CSS əldə etdikdən sonra, bu logo qrafikini hədəfləmək üçün yazdığınız üslublar , çox cihazlı dostluq şəkilləri üçün həssas üslublar , eləcə də sərhədlər və ya CSS kimi şəkil / linkə əlavə etmək istədiyiniz hər hansı vizual da daxil olmaqla, açılan kölgələr. CSS üslubları ilə istifadə etmək üçün əlavə "kancalara" ehtiyacınız olduqda da təsvirinizi verə və ya bir sinif özniteliğinə keçid edə bilərsiniz.
Image əlaqələri üçün vəziyyətlərdən istifadə edin
Beləliklə, bir şəkil link əlavə olduqca asandır. Gördüyümüz kimi, lazım olan bütün təsvirləri müvafiq çapa etiketləri ilə saraşdırmaqdır. Növbəti sualınız "yuxarıda qeyd olunan logo / ana səhifəyə keçid nümunəsi ilə yanaşı praktikada nə edərdiniz?"
Burada bəzi fikirlər var:
- Bu şəkillərin böyük versiyalarına keçid edən bir qalereyada kiçik görünüşlər.
- E-ticarət veb səhifəsi üçün məhsul şəkilləri kimi məzmunu təmsil etmək üçün tək istifadə olunan şəkillər.
- Digər məzmunun bir hissəsi olan, bir bloq məqaləsi və ya mətbuat şərhi kimi insanların məzmununa toxunmaq üçün hədəf alan verdiyini və ya tam məqaləni oxumaq üçün cəlb edən təsəvvür şəkilləri.
- Xüsusi funksiyalara və ya saytdakı səhifələrə qoşulmaq üçün düymələr kimi istifadə olunan simge şəkilləri.
- Sosial media əlaqələri həmin sayt və ya şirkət üçün vacib olan müxtəlif sosial media saytlarının tanınan loqotiplərini istifadə edir.
- Bəzi funksiyalar üçün düymələr kimi istifadə edilən şəkillər, forma təqdimləri (ən yaxşı təcrübələr qeydləri - veb saytın fəaliyyət perspektivindən, tamamilə CSS ilə tərtib edilmiş düymələr, şəkil düymələrindən daha yaxşı seçimdir).
Şəkillərdən istifadə edərkən bir xatırlatma
Şəkillər veb səhifənin uğurunda mühüm rol oynaya bilər. Yuxarıda göstərilən nümunələrdən biri, məzmuna diqqət çəkmək və insanların oxumaq üçün digər məzmunla yanaşı təsvirlərdən istifadə edir.
Şəkilləri istifadə edərkən, ehtiyaclarınız üçün doğru görüntüyü seçməyi nəzərə almalıyıq, bu, düzgün şəkil mövzusunu, formatını və veb saytınızda istifadə etdiyiniz hər hansı bir şəkillənizin veb saytın çatdırılması üçün düzgün optimallaşdırılmasını təmin edir . Bu, sadəcə şəkillər əlavə etmək üçün bir çox iş kimi görünə bilər, amma bunun əvəzi dəyərdir! Şəkillər həqiqətən bir saytın uğuruna çox şey əlavə edə bilər.
Sitenizde uyğun resimler kullanmaktan çekinmeyin ve içeriklerinize etkileşimli bir şekilde eklemek üçün gerektiğinde bu görüntüleri bağlayın, həm də bu görüntülerin en yaxşı uygulamalarına dikkat edin ve bu grafikleri / bağlantıları web dizayn işlerinizde doğru və məsuliyyətli bir şekilde istifadə edin.