Веб-сайттар олардан бұрын келген кез келген коммуникациялық ортаға ұқсамайды. Баспа, радио, тіпті теледидар сияқты бұрынғы медиа-форматтардан басқа веб-сайттарды орнататын басты нәрселердің бірі « гиперсілтеме » түсінігі.
Сондай-ақ, көбінесе «сілтемелер» деп аталатын гиперсілтемелер, вебті серпінді етеді. Басқа мақалаға немесе басқа ресурсқа сілтеме жасай алатын баспа басылымынан айырмашылығы, веб-сайттар бұл сілтемелерді басқа беттер мен ресурстарға іс жүзінде жіберу үшін пайдалануы мүмкін. Мұны басқа ортақ медиа жасай алмайды. Сіз радиодағы жарнаманы немесе теледидардан көре аласыз, бірақ сізді осы жарнамалардағы компанияларға веб-сайттың оңай жасай алатын жолына алып келетін гиперсілтемелер жоқ. Сілтемелер шын мәнінде ғажайып байланыс пен өзара әрекеттесу құралы!
Көп жағдайда веб-сайттағы сілтемелер - келушілерді сол сайттың басқа беттеріне жіберетін мәтіндік мазмұн. Веб-сайттың навигациясы іс жүзіндегі мәтін сілтемелерінің бір мысалы болып табылады, бірақ сілтемелер мәтінге негізделудің қажеті жоқ. Сондай-ақ, бейнелерді веб-сайтыңызда оңай байланыстыра аласыз. Мұны қалай істеуге болатынын қарастырайық, содан кейін имиджге негізделген гиперсілтемелерді қолданғыңыз келетін кейбір жағдайларда.
Суретті қалай байланыстыру керек
Біріншіден, сіз өзіңіздің HTML құжатыңызға сурет салуға тиіссіз. Кескінге негізделген сілтеме ортақ пайдалану сайттың логотипі болып табылады, содан кейін сайттың басты бетіне кері байланысады. Төменде келтірілген мысал кодында біз қолданатын файл логотипіміз үшін SVG болып табылады . Бұл жақсы таңдау, өйткені бұл кескіннің әртүрлі ажыратымдылықтары үшін кескінді масштабтауға мүмкіндік береді, сонымен бірге кескін сапасын және толық көлемді файл өлшемін сақтайды.
Кескінді HTML құжатында қалай орналастыру керек:
Сурет тегінің айналасында, сіз суретке алдындағы якорь элементін ашып, кескіннен кейін якорь жабатын якорь сілтемесін қосасыз. Бұл мәтінді қалай байланыстыратындығыңызға ұқсас, тек қана анкерлік тегтермен байланыстырғыңыз келетін сөздерді ораудың орнына кескінді орап аласыз. Төменде келтірілген мысалда біз «index.html» деген сайтымыздың басты бетіне қосыламыз.
Бұл HTML-ді өзіңіздің бетіңізге қосқанда, якорь тегі мен сурет тегі арасындағы бос орындарды қоймаңыз. Егер сіз жасасаңыз, кейбір браузерлер кескіннің жанына кішкентай кенелерді қосады, ол тақ көрінеді.
Лого бейнесі енді үй бетінің түймешігі ретінде жұмыс істейді, бұл қазіргі таңда веб стандарты болып табылады. Сурет ені мен биіктігі сияқты біздің кез-келген көрнекі стильдерді HTML түзетулеріне енгізбейтінімізге назар аударыңыз. Біз осы визуалды стильдерді CSS-ге қалдырып, HTML құрылымын және CSS стильдерін таза бөліп алуды қолдаймыз.
CSS-ға кіргеннен кейін, логотипті бағыттау үшін жазатын стильдер суретті мөлшерлеуді қоса алады, соның ішінде көп құрылғыға арналған бейнелерге арналған жауап беру стилі , сондай-ақ суреттерге / сілтемелерге, шекаралар немесе CSS көлеңкеден түсіру. CSS стильдерімен пайдалану үшін қосымша «ілгектер» қажет болса, сіз өзіңіздің суретіңізді немесе сынып төлсипатын байланыстыра аласыз.
Кескін сілтемелері үшін жағдайларды пайдаланыңыз
Сурет сілтемесін қосу өте оңай. Біз көргеніміздей, сіз бәрін жасауыңыз керек, кескінді тиісті анкерлік тегтермен ораңыз. Сіздің келесі сұрағыңыз «сіз бұл іс жүзінде жоғарыда аталған логотип / үй бетінің сілтемесі мысалынан басқа ісіңізді қашан қоя аласыз?» Болуы мүмкін.
Міне, кейбір ойлар:
- Бұл суреттердің үлкен нұсқаларына сілтеме жасайтын галереядағы шағын кескіндер.
- Электрондық коммерция веб-торабының өнім фотосуреттері сияқты мазмұнды көрсету үшін жеке пайдаланылатын суреттер.
- Блог мазмұны немесе пресс-релиз секілді басқа мазмұнның бөлігі болып табылатын ұжымның кескіндері адамдарға мазмұнды байқау үшін мақсатты аймақ беретінін немесе толық мақаланы оқу үшін басуын талап етеді.
- Белгілі бір функционалдылыққа немесе тораптағы беттерге қосылу үшін түймешіктер ретінде пайдаланылатын белгіше кескіндері.
- Әлеуметтік медиа сілтемелер әр түрлі әлеуметтік медиа тораптарының танымал логотиптерін пайдаланатын сілтемелер, сол сайт немесе компания үшін маңызды.
- Белгілі бір функционалдылық үшін түймешіктер ретінде пайдаланылатын суреттер, пішінді ұсыну сияқты (жақсы тәжірибе туралы ескертпе - веб-сайттың өнімділігімен, тек CSS-да көрсетілген батырмалардың суреті кескін түймелеріне қарағанда жақсы таңдау болып табылады).
Суреттерді пайдалану кезінде ескерту
Суреттер веб-сайттың жетістіктерінде маңызды рөл атқара алады. Жоғарыда келтірілген мысалдардың бірі сол мазмұнға назар аудару және оны оқуға үйрету үшін басқа мазмұнмен бірге суреттерді қолдана отырып жасалған.
Суреттерді пайдаланған кезде, сіз өзіңіздің қажеттіліктеріңізге сәйкес дұрыс суретті таңдауды ескеруіңіз керек , бұл дұрыс имидждік тақырыпты, форматты қамтиды, сондай-ақ веб-сайтыңызда қолданылған кез келген бейнелер веб-сайтты жеткізу үшін оңтайландырылғанына көз жеткізіңіз. Бұл суреттерді қосу үшін көп жұмыс сияқты көрінуі мүмкін, бірақ бұл ақшаға тұрарлық! Суреттер сайтымыздың жетістігіне өте көп қосыла алады.
Сайтыңызда сәйкес кескіндерді пайдаланып, контентіңізге интерактивті түрде қосу қажет болған кезде осы суреттерді байланыстырып қоймаңыз, сонымен бірге осы суреттің ең жақсы тәжірибелерін ескеріп, веб-дизайн жұмысыңызда бұл графиктерді / сілтемелерді дұрыс және жауапкершілікпен пайдаланыңыз.