Робота з зображеннями в dreamweaver
Ви дізнаєтеся, які кошти для роботи з зображеннями є в Dreamweaver, а також навчитеся вставляти, редагувати і позиціонувати зображення.
Спочатку давайте розберемося зі вставкою зображення в html сторінку.
За вставку зображення відповідає спеціальна кнопка Image розташована на панелі Insert (Панель об'єктів), у вкладці Common. Дивіться малюнок:
Для вставки зображення поставте курсор в те місце вашої сторінки, куди б ви хотіли вставити ваше зображення. Потім натисніть на кнопку () вставки зображення.
В результаті з'явиться вікно Select Image Source:
За допомогою даного вікна ви можете вибрати необхідне вам зображення і вставити його, натиснувши на кнопку "ok".
Найкраще буде, якщо ви заздалегідь скопіювали дане зображення в папку з вашим файлом, в який ви збираєтеся вставляти зображення. Або ж створите в цій папці ще одну, спеціально для зображень, можете назвати її images і туди скопіювали зображення.
Після того як Ви натиснули на кнопку "ok" з'явиться вікно Image Tag Accessibility Attributes (Атрибути доступності тега зображення):
Тут є два параметри. Перший це Alternate text (Альтернативний текст) за допомогою даного параметра ви можете додати альтернативний текст до зображення. Цей текст буде показуватися в тому випадку якщо на вашу сторінку зайде відвідувач, у якого в браузері буде відключений показ графіки. При цьому замість картинки з'явиться кадр за розміром рівна зображенню, в якій і буде відображатися даний текст.
В поле Alternate text (Альтернативний текст) ви можете ввести короткий альтернативний текст. Він повинен бути не більше 50 символів.
У разі якщо вам знадобиться ввести більш довгий текст, можете скористатися другим параметром Long description (Довгий опис). Тут вам необхідно вказати шлях до окремого файлу, в який ви помістили свій альтернативний текст. Вказати шлях до даного файлу ви можете, вписавши посилання на даний файл у відповідному полі, або клацнувши по значку папки вибрати даний файл.
Якщо Ви хочете змінити розмір зображення пропорційно, щоб зображення не спотворювалося, то при перетягуванні маркерів натисніть і тримайте клавішу Shift. Дивіться зображення:
За допомогою полів W і H ви можете привласнити зображенню необхідну ширину і висоту, так само як і за допомогою маркерів зміни розміру.
За допомогою поля Src ви можете вказати посилання на файл зображення.
За допомогою списку Class ви можете надати необхідне стильове оформлення вашому зображенню, якщо ви використовуєте CSS для оформлення сторінки.
Далі ми звернемося до групи інструментів Edit (Правка). Дані інструменти призначені для редагування зображення. Розглянемо їх по порядку:
За допомогою інструменту Optimize in Fireworks () ви можете оптимізувати своє зображення.
Інструментом Crop () ви можете вирізати необхідну вам частину зображення. Для цього виберіть цей інструмент, в результаті на зображенні з'являться вже знайомі вам маркери переміщення, за допомогою яких ви можете виділити необхідну частину зображення, після чого натисніть Enter і частина зображення буде вирізання.
За допомогою інструменту Resample (Перетворення) () ви можете зробити зображення більш чітким.
Інструментом Brightness and Contrast (Яскравість і Контрастність) () ви можете змінювати яскравість і контрастність зображення перетягуючи повзунки.
Інструментом Sharpen (Різкість) () ви можете змінювати різкість зображення.
За допомогою поля Border Ви можете задати рамку навколо зображення, в пікселях. Наприклад, можете поставити в це поле значення "2" і натиснути Enter. В результаті навколо зображення з'явиться рамка розміром 2 пікселя.
Ну і нарешті, випадає Align, за допомогою якого Ви можете вказати місце збереження зображення. Він містить наступні параметри:
Default (За замовчуванням) - в цьому випадку місце розташування буде залежати від налаштувань браузера користувача.
Baseline (Базова лінія) - зображення буде збігатися з базовою лінією тексту.
Top (В верху) - вирівнювання зображення по верхньому краю.
Middle (Середина) - вирівнювання зображення по середині, базової лінії тексту.
Bottom (Внизу) - положення зображення в низу, щодо елемента в якому воно знаходиться.
Text Top (В верху тексту) - положення зображення при якому його верх збігається з верхом найвищого символу тексту.
Absolute Middle - середина зображення буде збігатися з центральною лінією тексту.
Absolute Bottom - низ зображення буде збігатися з низом найнижчого символу в тексті.
Right (Право) - зображення притискається до правого краю сторінки, при цьому текст буде обтікати його зліва.
Left (Ліворуч) - зображення притискається до лівого краю сторінки, а текст буде обтікати його з права.
Ось це і є основні інструменти, призначені для роботи з зображеннями в Dreamweaver. Тут ми ще не розглянули, яким чином можна зробити зображення-посилання, і зображення-карту, але цього ми обов'язково присвятимо окремий урок.
Матеріал підготовлений порталом: webmastermix.ru