Уебсайтовете не приличат на никоя комуникационна среда, която се появи пред тях. Едно от основните неща, които поставят уебсайтовете от предишни медийни формати, като печат, радио и дори телевизия, е концепцията за " хипервръзка ".
Хипервръзките, известни също като "връзки", правят мрежата толкова динамична. За разлика от печатна публикация, която може да се позовава на друга статия или друг ресурс, уебсайтовете могат да използват тези връзки, за да изпращат посетители на тези страници и ресурси. Никакъв друг излъчван носител не може да направи това. Можете да чуете реклама по радиото или да гледате по телевизията, но няма хипервръзки, които да ви отведат до компаниите в тези реклами, както лесно може да направи този уебсайт. Връзките наистина са невероятно средство за комуникация и взаимодействие!
Често връзките, които се намират на уебсайт, са текстово съдържание, което насочва посетителите към други страници на същия сайт. Навигацията на уебсайта е един пример за текстови връзки на практика, но връзките не трябва да се основават на текст. Можете също така лесно да свържете изображения на уебсайта си. Нека да разгледаме как се прави това, последвано от някои случаи, в които бихте искали да използвате хипервръзки, базирани на изображения.
Как да свържете изображение
Първото нещо, което трябва да направите, е да поставите самият образ във вашия HTML документ. Обичайната употреба на базата на изображение е графиката на логото на сайта, която след това се свързва обратно към началната страница на сайта. В нашия пример код по-долу, файлът, който използваме, е SVG за логото ни. Това е добър избор, тъй като ще позволи на изображението ни да се мащабира за различни резолюции, като същевременно поддържа качеството на изображението и малък общ размер на файла.
Ето как ще поставите изображението си в HTML документа:
Около маркера на изображението вече ще добавите котвата, отваряйки елемента за закрепване преди изображението и затваряйки котвата след изображението. Това е подобно на начина, по който бихте свързвали текста, само вместо да обвивате думите, които искате да бъде връзка с етикетите на котвата, да обвиете изображението. В нашия пример по-долу обръщаме обратно към началната страница на нашия сайт, която е "index.html".
Когато добавяте този HTML код към страницата си, не поставяйте никакви интервали между етикета на котвата и маркера на изображението. Ако го направите, някои браузъри ще добавят малки клишета до изображението, което ще изглежда странно.
Изображението на логото сега ще действа и като бутон за начална страница, който в наши дни е почти стандартен уеб стандарт. Забележете, че в нашия HTML маркер не включваме визуални стилове, като например ширината и височината на изображението. Ще оставим тези визуални стилове в CSS и ще поддържаме чисто отделяне на HTML структурата и CSS стиловете.
След като стигнете до CSS, стиловете, които пишете, за да се насочите към това графично лого, може да включват оразмеряване на изображението, включително отзивчиви стилове за многопотребителски изображения, както и всякакви визуализации, които искате да добавите към изображението / линка, като граници или CSS капка сянка. Можете също така да дадете своето изображение или да свържете атрибут за клас, ако имате нужда от допълнителни "куки", които да използвате с вашите CSS стилове.
Използвайте случаи за връзки с изображения
Така че добавянето на връзка към изображението е доста лесно. Както току-що видяхме, всичко, което трябва да направите, е да увиете изображението със съответните етикети за закрепване. Следващият ви въпрос може да бъде "кога бихте направили това на практика освен горепосоченото примерно лого / начална връзка?"
Ето някои мисли:
- Миниатюрни изображения в галерия, които свързват по-големи версии на тези изображения.
- Изображения, които са използвани самостоятелно за представяне на съдържание, като например снимки на продукти за уебсайт за електронна търговия.
- Тезерни изображения, които са част от друго съдържание, като например статия в блог или съобщение за пресата, които примамват хората да забележат, че съдържанието им им дава целева област, за да докоснете или кликнете, за да прочетете цялата статия.
- Икона на изображения, които се използват като бутони за свързване с конкретна функционалност или страници в сайта.
- Социални медийни връзки, които използват разпознаваемите лога на различните сайтове за социални медии, които са важни за този сайт или фирма.
- Изображения, използвани като бутони за определена функционалност, като подаване на формуляри (бележки за най-добри практики - от гледна точка на ефективността на уебсайта, бутони, оформени изцяло с CSS, са по-добър избор от бутоните за изображения).
Напомняне при използване на изображения
Изображенията могат да играят важна роля в успеха на уебсайта. Един от примерите, споменати по-горе, използвайки изображения заедно с друго съдържание, за да привлече вниманието към това съдържание и да накара хората да го прочетат.
Когато използвате изображения, трябва да сте наясно с избора на правилното изображение за вашите нужди , това включва правилния предмет, формат на изображението, както и да се уверите, че всички изображения, които използвате на вашия уеб сайт, са правилно оптимизирани за доставка на уебсайтове . Това може да изглежда като много работа, само за да добавите изображения, но изплащането си заслужава! Изображенията наистина могат да добавят толкова много към успеха на сайта.
Не се колебайте да използвате подходящи изображения на сайта си и свържете тези изображения, когато е необходимо, за да добавите интерактивно към вашето съдържание, но и да имате предвид тези най-добри практики и да ги използвате правилно и отговорно във вашата уеб дизайнерска работа.