Створення посилань на зображення та карти зображень

• Квітня 24, 2024

На цьому тижні відповідь відповідає на запитання читача - "Чи можете ви пояснити, як зробити посилання на малюнок до сторінки в HTML". Є кілька різних технік, які можна використовувати для пов’язаних зображень. Одне полягає в тому, щоб пов’язати все зображення з вашим HTML, а інше - зробити карту зображень - там, де різні частини одного зображення пов’язані з різними місцями.

Зв'язане зображення в HTML

Пов’язати невелике зображення чи піктограму дуже просто, все, що вам потрібно зробити, - це розмістити посилання на зображення на гіперпосиланні так:



Все, що я тут зробив, - це долучити зображення до html для посилання. Це найпростіший та найефективніший спосіб зв’язати невелике зображення, і це часто робиться за допомогою спеціальних куль, піктограм тощо. Що робити, якщо ви хочете, щоб одне велике зображення було пов’язане в декількох різних місцях? Ось тут зручно нарізати зображення.

Нарізання зображень у Photoshop

Це дуже легко досягти у Photoshop. Ви повинні використовувати зображення, яке не надто складне, оскільки ви хочете, щоб ваші користувачі могли чітко бачити, де чітко натиснути на зображення. Ви також хочете, щоб ваші користувачі розуміли, що їм потрібно клацнути в межах зображення, щоб дістатися куди вони йдуть. Ретельно розробляйте карти зображень з урахуванням свого користувача. Майте на увазі, що карти зображень зазвичай не такі зручні для пошукової системи, як текст на сторінці, однак правильне використання тегів Alt у фрагментах зображень може допомогти у цьому.

Після того, як ваше зображення буде створене, наступним кроком є ​​"зріз" вашого зображення. Піктограма інструмента для зрізів виглядає як маленький нож з екстрактом. Він знаходиться у верхній частині панелі інструментів і розташований під інструментом обрізання - якщо натиснути на піктограму «обрізати», з’являться інструменти для вибору зрізів та зрізів.

Виберіть інструмент "Зріз", утримуйте ліву клавішу миші та обережно перетягніть фрагмент там, де ви хочете, а потім відпустіть. Перемістіть і продовжуйте нарізати все зображення. Навколо кожної області зображення, яку ви хочете прив’язати до іншої сторінки, має бути фрагмент. Будь-яка велика біла зона може бути одним шматочком.

Після того, як ваше зображення буде повністю нарізане, наступним кроком є ​​використання інструменту "Вибір фрагмента", натисніть на кожен фрагмент і звідти виберіть фрагмент типу "Зображення". Під цим заповненням URL-адреси, куди ви хочете, щоб цей фрагмент був спрямований, а потім поле "тег" alt внизу. Інші поля не потрібні для простого відображення зображення. Переміщуйте кожен фрагмент однаково, поки все зображення не відображається.

Після завершення всього зображення ви скористаєтесь опцією "зберегти для Інтернету та пристроїв". Якщо ви натиснете "Файл" вгорі і подивіться вниз під типові параметри збереження, ви побачите можливість збереження для Інтернету та пристроїв. Виберіть цю опцію, і відкриється діалогове вікно, де ви зможете переглянути, як виглядатиме ваше зображення. Якщо вас це влаштовує, натисніть кнопку збереження і відкриється інше діалогове вікно. Будьте впевнені, що в другому варіанті написано "зберегти зображення та HTML", а потім збережіть свою роботу.

Перейдіть у свою папку, де ви зберегли документ HTML і відкрийте його. Ви можете скопіювати і вставити цей код у свій власний HTML-файл. Зазвичай цей HTML буде трохи неохайним. Якщо ви знаєте HTML, ви можете очистити його на свій смак, але він повинен працювати так добре, як є. Будьте впевнені, як завжди, ваші файли зображень тощо знаходяться у правильних місцях, інакше ваше зображення не відображатиметься.

Відео Інструкція: 5.2. Карти знань. Редактор карт знань | 9 клас | Ривкінд (Квітня 2024).