 |
9.4.2. Вставка зображень. 9.4.3. Створення карти зображення
|
|
|
|
9. 4. 2. Вставка зображень
При вставці зображення в HTML-документ у програмному середовищі Dreamweaver пакет автоматично генерує посилання на графічний файл у HTML-коді. Це посилання на файл зображення передбачає розміщення файлу в папці розроблювальної Web-сторінки чи Web-сайту (сервера). У протилежному випадку Dreamweaver формує запит на копіювання графічного файлу в папці біжучого сайта. При розміщенні зовнішніх зображень може бути зазначена їхня URL-адреса.
Для розміщення зображення в документ виконується наступна послідовність операцій.
У поле робочого вікна документа курсором миші відзначається місце розміщення зображення. Потім вибирається команда Insert/Image (Вставка/Зображення) чи натискається кнопка-піктограма Insert Image на панелі Загальні (Common) палітри об'єктів (рис. 9. 28).
В результаті на екрані візиалізується діалогове вікно Select Image Source (мал. 9. 29).
У цьому вікні задається шлях до графічного файлу зображення, що вставляється в HTML-документ. Оскільки в даному прикладі графічний файл попередньо розміщений у папці поточного сайта, у поле URL вказуються тільки ім'я файлу і його розширення. У правому полі вікна візуалізується зображення і наводяться дані по розмірах зображення й обсягу файлу.
Можливе також розміщення зображення шляхом переміщення кнопки Insert Image від палітри об'єктів (у режимі Common) до місця майбутнього розташування зображення, що вставляється, у вікні документа. У цьому випадку також з'являється діалогове вікно вставки зображення Select Image Source, розглянуте вище (рис. 9. 29).
У цьому діалоговому вікні за допомогою перемикача Preview Images можна включати чи виключати режим попереднього перегляду графічного файлу, що вставляється.
|
|
|
Таким чином, виконання розглянутої послідовності операцій приводить до вбудовування зображення в створюваний документ. На рис. 9. 30 показаний вигляд робочого вікна програмного пакету Dreamweaver із вставленим зображенням.
В процесі встановлення зображення в незбережений документ пакет Dreamweaver формує посилання на файл зображення. Якщо документ зберігається в сайті (site), Dreamweaver використовує в посиланні відносний шлях.
На рис. 9. 31 приведений вигляд HTML-коду з вставленим зображенням.
Атрибути зображення задаються в панелі контролера поведінки (властивостей), приведеної на рис. 9. 32.
Панель розкривається командою Windows/Properties при виділеному зображенні. На цій панелі спочатку відображаються найбільше часто використовувані атрибути. Якщо клацнути курсором миші по стрілці розширення, розміщеної в нижньому правому куті панелі, панель розкривається цілком і приймає вигляд, представлений на рис. 9. 33.
У складі панелі використовуються наступні елементи:
- Поле Name (Ім'я). Це поле служить для задання імені зображення.
- Поля W and H (Ширина і Висота). Ці два поля задають розміри простору для розміщення зображення на створюваній сторінці. При завантаженні зображення у вікно перегляду Dreamweaver автоматично заповнює ці поля значеннями вихідних розмірів зображення. Одиниці розмірності значень атрибутів за замовчуванням і незауваженим значеннями задаються в пікселях. Надалі можна також визначати розміри в дюймах (in), міліметрах (mm), сантиметрах (cm) і комбінаціях цих одиниць, наприклад 2 in + 5 mm. Пакет Dreamweaver перетворить використані значення в пікселях в HTML-коди.
Якщо встановлені значення W і H не відповідають фактичній ширині і висоті зображення, зображення не може відтворюватися без перекручувань у вікні перегляду.
Фактично відбувається масштабування зображення. Але при цьому необхідно мати на увазі особливість даного програмного середовища: вікно перегляду завантажує всі дані зображення, а потім здійснює його масштабування.
|
|
|
9. 4. 3. Створення карти зображення
Під картою зображення розуміємо зображення, що може бути розділене на деякі області (“активні”), кожна з них по натиску курсором миші викликає той чи інший фрагмент HTML-документа або нову сторінку. У Web-публікаціях, як правило, використовуються клієнтські карти зображення.
У процесі їхнього створення використовується панель контролера властивостей зображення (див. мал. 9. 33).
Клієнтські карти зображень зберігають інформацію про гіперпосилання в самому HTML-документі.
Подібні карти зображень можуть знаходиться і на Web-сервері - серверні карти зображень, однак клієнтські карти здатні забезпечити більш високу швидкодію в режимі інтерактивної взаємодії користувача з Web-публікаціями.
З клієнтськими картами зображень працюють практично всі браузери:
Netscape Navigator, NCSA Mosaic, Microsoft Internet Explorer.
Пакет Dreamweaver здатний працювати як із клієнтськими, так і із серверними картами зображень.
Розглянемо створення клієнтських карт зображень. Основу клієнтських карт складають зображення (малюнки), причому єдиною технічною вимогою є розмір: він повинен забезпечувати формування активних зон відповідних розмірів і форм. Правда, вибір зображення може враховувати і додаткові вимоги, наприклад ергономічні, вимоги дизайну Web-публікації і т. д.
|
|
|
