Вэб-сайты ў адрозненне ад любога сродкі камунікацыі, якія былі да іх. Адна з галоўных рэчаў , якія ўсталёўваюць сайты акрамя папярэдніх медыя - фарматаў , такіх як друк, радыё, тэлебачанне і нават ёсць паняцце « гіперспасылцы ».
Гіперспасылкі, таксама шырока вядомы як проста «спасылка», тое, што робіць вэб настолькі дынамічным. У адрозненне ад друкаванага выдання, якія могуць спасылацца на іншы артыкул ці іншы рэсурс, вэб-сайты могуць выкарыстоўваць гэтыя спасылкі на самай справе адпраўляць наведвальнікаў на тыя іншыя старонкі і рэсурсы. Ні адзін іншы шырокавяшчальнай асяроддзе не можа гэта зрабіць. Вы можаце пачуць аб'яву па радыё ці па тэлебачанні гледжання, але няма гіперспасылак, якія могуць прыняць вас у кампаніі ў гэтых аб'явах так, што вэб-сайт можа лёгка зрабіць. Спасылкі на самай справе з'яўляюцца дзіўныя сувязі і ўзаемадзеяння інструмент!
Oftentimes, спасылкі, якія знаходзяцца на сайце, змест тэксту, які накіроўвае наведвальнікаў на іншыя старонкі таго ж сайта. навігацыі вэб-сайта з'яўляецца адным з прыкладаў тэкставых спасылак на практыцы, але спасылкі не павінны быць на аснове тэксту. Вы таксама можаце лёгка звязаць малюнка на вашым сайце. Давайце паглядзім, як гэта робіцца, а затым некаторых выпадках, калі вы хацелі б выкарыстоўваць малюнка на аснове гіперспасылак.
Як звязаць выявы
Першае , што вам трэба зрабіць , гэта змясціць сам малюнак у HTML - дакуменце. Агульная выкарыстанне сувязі на аснове ладу з'яўляецца лагатып графічны вэб-сайт, які затым звязваецца вярнуцца на галоўную старонку сайта. У нашым прыкладзе кода ніжэй, файл , які мы выкарыстоўваем гэта SVG для нашага лагатыпа. Гэта добры выбар, так як гэта дазволіць наша малюнак у маштабе для розных дазволаў, захоўваючы пры гэтым якасць выявы і невялікі агульны памер файла.
Вось як бы вы размясціць малюнак у HTML-дакуменце:
Вакол тэга малюнкаў, вы б цяпер дадаць спасылку якара, адкрыўшы элемент якара перад малюнкам і зачыняючы якар пасля малюнка. Гэта падобна на тое, як вы б звязаць тэкст, толькі замест абгортачнай словы, якія вы хочаце быць сувязь з тэгамі якар, вы складаеце малюнак. У нашым прыкладзе, мы спасылаецеся вярнуцца на галоўную старонку нашага сайта, які з'яўляецца «index.html».
Пры даданні гэтага HTML на старонку, не стаўце прабелу паміж анкерных тэгам і тэгам малюнка. Калі вы гэта зробіце, некаторыя браўзэры будуць дадаваць трохі цікаў побач з выявай, якое будзе выглядаць дзіўна.
Малюнак лагатыпа будзе цяпер выступаць у якасці кнопкі хатняй старонкі, якая ў значнай ступені вэб-стандарту ў гэтыя дні. Звярніце ўвагу на тое, што мы не ўключаем любыя візуальныя стылі, такія як шырыня і вышыня малюнка, у нашым HTML-разметкі. Мы пакінем гэтыя візуальныя стылі CSS і падтрымліваць выразны падзел структуры і CSS стыляў HTML.
Пасля таго, як вы атрымаеце ў CSS, стылі вы пішаце мэтавай гэты лагатып графікі можа ўключаць каліброўкі малюнка, у тым ліку якія рэагуюць стыляў для некалькіх прылад дружалюбных малюнкаў, а таксама любыя візуальныя эфекты вы хацелі б дадаць у малюнак / спасылку, як мяжы або CSS адкідаюць цені. Вы таксама можаце даць малюнак або спасылку атрыбут класа, калі вам патрэбныя дадатковыя «гаплікі» для выкарыстання з стыляў CSS.
Прыклады выкарыстання выяваў Спасылкі
Такім чынам, даданне спасылкі на малюнак даволі лёгка. Як мы толькі што бачылі, усё, што вам трэба зрабіць, гэта абгарнуць малюнак з адпаведнымі тэгамі якара. Ваш наступны пытанне можа быць «калі вы на самой справе зрабіць гэта на практыцы, акрамя вышэйзгаданага прыкладу спасылкі лагатыпа / стартавыя?»
Вось некаторыя думкі:
- Мініяцюрныя выявы ў галерэі, якія спасылаюцца на вялікія версіі гэтых малюнкаў.
- Выявы, якія выкарыстоўваюцца ў адзіночку, каб прадставіць ўтрыманне, як фатаграфіі прадукту для сайта электроннай камерцыі.
- Тізер малюнка, якія з'яўляюцца часткай іншага кантэнту, як блог артыкула або прэс-рэліз, што спакушаюць людзей, каб заўважыць, што ўтрыманне даць ім мэтавую вобласць краніце або націсніце, каб прачытаць артыкул цалкам.
- Значок малюнкі, якія выкарыстоўваюцца ў якасці кнопак для падлучэння да канкрэтнай функцыянальнасці або старонкі сайта.
- Сацыяльныя медыя спасылкі, якія выкарыстоўваюць пазнавальныя лагатыпы розных сацыяльных медыя сайтаў, якія маюць важнае значэнне для гэтага сайта або кампаніі.
- Выявы, якія выкарыстоўваюцца ў якасці кнопкі для пэўных функцый, такіх як форма прадстаўлення (лепшыя практыкі заўвагу - з пункту гледжання прадукцыйнасці вэб-сайта, кнопкі ў стылі чыста з CSS з'яўляюцца лепшым выбарам, чым кнопкі выявы).
Напамін Пры выкарыстанні малюнкаў
Выявы могуць гуляць важную ролю ў поспеху сайта. Адным з прыкладаў, прыведзеных вышэй, выкарыстоўваючы малюнкі разам з іншым зместам, каб прыцягнуць увагу да гэтага зместу і прымусіць людзей чытаць.
Пры выкарыстанні малюнкаў, вы павінны памятаць пра выбары правільнага ладу для вашых патрэбаў , гэта ўключае ў сябе правільнае малюнак прадметная, фармат, а таксама пераканаўшыся , што любыя выявы , якія вы выкарыстоўваеце на вашым сайце правільна аптымізаваныя для дастаўкі вэб - сайта . Гэта можа здацца, што шмат працы, каб дадаць выявы, але вынік таго варта! Выявы сапраўды могуць дадаць столькі да поспеху сайта.
Не саромейцеся выкарыстоўваць адпаведныя выявы на вашым сайце, і звязаць гэтыя выявы, калі гэта неабходна, каб дадаць некаторыя інтэрактыўна да зместу, але і ўлічваць гэтыя выявы перадавой практыкі і выкарыстоўваць гэтыя графікі / спасылкі правільна і адказна ў вашым вэб-дызайн працы.