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 не відповідають фактичній ширині і висоті зображення, зображення не може відтворюватися без перекручувань у вікні перегляду.

Фактично відбувається масштабування зображення. Але при цьому необхідно мати на увазі особливість даного програмного середовища: вікно перегляду завантажує всі дані зображення, а потім здійснює його масштабування.