Таны вебсайт дээр зураг хэрхэн холбох вэ?

Вэбсайтууд нь тэдний өмнө ирсэн харилцаа холбооны орчинтой адилгүй. Хэвлэл, радио, тэр ч байтугай телевиз гэх мэт өмнөх медиа форматаас гадуурх вэбсайтуудыг байрлуулсан гол зүйл нь " холбоос " гэсэн ойлголт юм.

Мөн "холбоос" гэж нэрлэгддэг холбоосууд нь веб маш динамик болгодог. Бусад өгүүлэл эсвэл бусад эх сурвалжийг нийтлэх боломжтой хэвлэгдсэн нийтлэлээс ялгаатай нь вэбсайтууд нь эдгээр хуудсууд болон бусад эх сурвалжууд руу үнэн хэрэгтээ зочдыг илгээж эдгээр холбоосыг ашиглаж болно. Өөр нэвтрүүлгийн хэрэгсэл байхгүй. Та радиогоор зар сурталчилгаа сонсох буюу телевизээр үзэх боломжтой боловч вэбсайт амархан хийх боломжтой зар сурталчилгааны компаниудад хүргэх холбоосууд байдаггүй. Холбоосууд үнэхээр гайхалтай харилцаа холбоо, харилцан арга хэрэгсэл юм!

Заримдаа вэбсайт дээрх холбоосууд нь тухайн сайт дахь бусад хуудсуудад зочлон чиглүүлдэг текст агуулга юм. Вэбсайтын навигаци нь практикт текстийн холбоосуудын нэг жишээ боловч холбоос нь текст дээр суурилсан байх шаардлагагүй. Та мөн вэбсайт дээрх зургийг амархан холбох боломжтой. Үүнийг хэрхэн хийснийг авч үзье. Дараа нь та зураг дээр суурилсан холбоосыг ашиглахыг хүссэн зарим жишээг үзье.

Зургийг хэрхэн холбох вэ?

Хамгийн эхний зүйл бол өөрийн HTML документ дээр зургийг байрлуулах явдал юм. Зураг дээр тулгуурласан холбоосын нийтлэг ашиглалт нь сайтын лограф график бөгөөд дараа нь сайтын нүүр хуудсанд буцаж холбогддог. Манай жишээний кодод бидний ашиглаж буй файл бол манай логоны SVG юм. Энэ нь бидний сонголтыг янз бүрийн нарийвчлалтайгаар хэмжих боломжийг олгодог тул зураг чанар болон файлын хэмжээний жижиг хэмжээтэй байх болно.

HTML документ дээрээ өөрийн зургийг хэрхэн байрлуулах вэ?

Зургийн тээг орчимд та зангуу холбоос нэмж, зурагны өмнө зангуу элемент нээж, зангуугаа хаасны дараа хаах болно. Энэ нь текстийг хэрхэн холбохтой төстэй юм. Зөвхөн зангуугаар холбохыг хүссэн үгнүүдийг буулгахын оронд та зураг зурах болно. Доорх жишээн дээр бид "index.html" гэж бидний сайтын нүүр хуудас руу холбогдож байна.

Энэ HTML-ийг таны хуудсан дээр нэмж оруулахдаа зангуугийн шошго ба зургийн шошгоны хооронд ямар ч зай бүү тавь. Хэрэв та хийвэл, зарим хөтөч нь зурагны хажууд жижиг хачин санагдана. Энэ нь сондгой харагдах болно.

Логоны зураг нь өнөөдөр вэбсайттай харьцуулахад нүүр хуудасны товчлуур юм. Бидний HTML тэмдэглэгээнд дүрсийн өргөн ба өндөр зэрэг ямар ч харагдах загвар оруулаагүй болохыг анхаарна уу. Бид эдгээр дүрсийг CSS-д хадгалах бөгөөд HTML бүтэц, CSS-ийн хэв маягийг цэвэрлэнэ.

CSS-г авахад лограф графикийн зорилгод зориулж бичдэг загварууд нь олон тооны төхөөрөмжтэй төстэй дүрсний загваруудыг багтаасан загваруудыг багтаана. Жишээлбэл, хил хязгаар эсвэл CSS гэх мэт дүрс / сүүдэр унах. Та CSS хэлбэрээр ашиглахын тулд нэмэлт "дэгээгээр" хэрэгтэй бол зураг эсвэл холбоосын шинж чанарыг холбож өгч болно.

Зургийн холбоосын талаархи хэргийг ашиглах

Тиймээс зурагны холбоос нэмж бичихэд хялбар байдаг. Зүгээр л харсан шигээ хийх ёстой бүх зүйл бол зангуугаа зохих зангуугаар буулгана. Дараагийн асуулт чинь "дээр дурдсан лого / нүүр хуудасны жишээнээс гадна практик дээр үүнийг хэзээ хийх вэ?"

Энд зарим бодол байна:

Зураг ашиглахдаа сануулагч

Зураг нь вэбсайтын амжилтанд чухал үүрэг гүйцэтгэдэг. Дээр дурьдсан жишээнүүдийн нэг нь бусад агуулгын хамтаар агуулгыг анхааралтай авч, үүнийг уншиж, хүмүүсийг уншиж өгдөг.

Зургийг ашиглахдаа өөрийн зургийг зөв сонгохдоо анхааралтай байх хэрэгтэй . Энэ нь зөв зураг сэдэв, форматтай, мөн вэбсайтдаа ашигладаг ямар ч зургийг веб сайтын нийлүүлэлтэд зөвөөр оруулдаг байх ёстой. Энэ нь зураг нэмэхийн тулд маш их ажил мэт санагддаг, гэхдээ төлбөр нь үнэ цэнэтэй юм! Зургууд нь сайтын амжилтанд маш их нэмэр болдог.

Өөрийн сайт дээр зохих зургийг ашиглахыг бүү мартаарай, эдгээрийн зургуудыг интерактив дээрээ нэмж оруулахад шаардлагатай үед эдгээр зургуудыг холбох хэрэгтэй. Гэхдээ эдгээр зургуудыг хамгийн сайн туршлагуудтайгаа анхаарч, эдгээр график / холбоосыг вэб дизайныхаа ажилд зөв, хариуцлагатайгаар ашигладаг.