Новости

Робота з зображеннями в Dreamweaver

У цьому уроці буде розглянута робота із зображеннями в редакторі Dreamweaver У цьому уроці буде розглянута робота із зображеннями в редакторі Dreamweaver.

Ви дізнаєтеся, які кошти для роботи з зображеннями є в Dreamweaver, а також навчитеся вставляти, редагувати і позиціонувати зображення.

Спочатку давайте розберемося зі вставкою зображення в html сторінку.

За вставку зображення відповідає спеціальна кнопка Image розташована на панелі Insert (Панель об'єктів), у вкладці Common За вставку зображення відповідає спеціальна кнопка Image розташована на панелі Insert (Панель об'єктів), у вкладці Common. Дивіться малюнок:

Для вставки зображення поставте курсор в те місце вашої сторінки, куди б ви хотіли вставити ваше зображення. Потім натисніть на кнопку ( Для вставки зображення поставте курсор в те місце вашої сторінки, куди б ви хотіли вставити ваше зображення ) Вставки зображення.

В результаті з'явиться вікно Select Image Source:

За допомогою даного вікна ви можете вибрати необхідне вам зображення і вставити його, натиснувши на кнопку "ok".

Найкраще буде, якщо ви заздалегідь скопіювали дане зображення в папку з вашим файлом, в який ви збираєтеся вставляти зображення. Або ж створите в цій папці ще одну, спеціально для зображень, можете назвати її images і туди скопіювали зображення.

Після того як Ви натиснули на кнопку "ok" з'явиться вікно Image Tag Accessibility Attributes (Атрибути доступності тега зображення):

Тут є два параметри. Перший це Alternate text (Альтернативний текст) за допомогою даного параметра ви можете додати альтернативний текст до зображення. Цей текст буде показуватися в тому випадку якщо на вашу сторінку зайде відвідувач, у якого в браузері буде відключений показ графіки. При цьому замість картинки з'явиться кадр за розміром рівна зображенню, в якій і буде відображатися даний текст.

В поле Alternate text (Альтернативний текст) ви можете ввести короткий альтернативний текст. Він повинен бути не більше 50 символів.

У разі якщо вам знадобиться ввести більш довгий текст, можете скористатися другим параметром Long description (Довгий опис). Тут вам необхідно вказати шлях до окремого файлу, в який ви помістили свій альтернативний текст. Вказати шлях до даного файлу ви можете, вписавши посилання на даний файл у відповідному полі, або клацнувши по значку папки вибрати даний файл.

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

Якщо Ви хочете змінити розмір зображення пропорційно, щоб зображення не спотворювалося, то при перетягуванні маркерів натисніть і тримайте клавішу Shift. Дивіться зображення:

Тепер виділіть зображення, і ми розглянемо які параметри, Ви можете йому привласнити за допомогою інструментів розташованих на панелі Properties (Редактор властивостей):

Тепер виділіть зображення, і ми розглянемо які параметри, Ви можете йому привласнити за допомогою інструментів розташованих на панелі Properties (Редактор властивостей):

За допомогою полів W і H ви можете привласнити зображенню необхідну ширину і висоту, так само як і за допомогою маркерів зміни розміру.

За допомогою поля Src ви можете вказати посилання на файл зображення.

За допомогою списку Class ви можете надати необхідне стильове оформлення вашому зображенню, якщо ви використовуєте CSS для оформлення сторінки.

Далі ми звернемося до групи інструментів Edit (Правка). Дані інструменти призначені для редагування зображення. Розглянемо їх по порядку:

Інструмент Edit (Правка) ( Інструмент Edit (Правка) (   ) Призначений для редагування зображення, в будь-якому сторонньому графічному редакторі ) Призначений для редагування зображення, в будь-якому сторонньому графічному редакторі. Спочатку в ньому не визначено графічний редактор, який ми будемо застосовувати для редагування зображень. Тому для того щоб його визначити вам необхідно пройти в пункт меню Edit (Правка) - Preferences (Перевагу) або натиснути клавіші Ctrl + U.

В результаті відкриється вікно Preferences (Перевагу). Зі списку категорій виберіть пункт File Types / Editors (Типи файлів / Редактори). В результаті в низу вашого вікна з'явиться два невеликих віконця. Дивіться малюнок:

Крок 1. Вам потрібно буде вибрати розширення файлів, які ви хочете редагувати. В даному випадку це будуть розширення .jpg .jpe .jpeg. Крім того можна встановити типовий графічний редактор і для файлів з такими розширеннями як .gif і .png. вони дуже часто використовуються при створенні веб сторінок.

Крок 2. Вам необхідно вибрати графічний редактор, за допомогою якого ви хочете редагувати зображення. Для цього клікніть по значку "+" і виберіть на своєму диску запускной файл того редактора, яким Ви хочете редагувати зображення. В даному випадку я вибрав графічний редактор Photoshop.

Крок 3. Після вибору графічного редактора натисніть на кнопку Make Primary (Зробити за замовчуванням). Потім натисніть "ok". Тепер все зображення з вибраними Вами розширеннями будуть відкриватися в цьому графічному редакторі.

Можете спробувати натиснути на кнопку Edit (Правка) і якщо ви все зробили правильно, то зображення відкриється в текстовому редакторі.

За допомогою інструменту Optimize in Fireworks ( За допомогою інструменту Optimize in Fireworks (   ) Ви можете оптимізувати своє зображення ) Ви можете оптимізувати своє зображення.

Інструментом Crop ( Інструментом Crop (   ) Ви можете вирізати необхідну вам частину зображення ) Ви можете вирізати необхідну вам частину зображення. Для цього виберіть цей інструмент, в результаті на зображенні з'являться вже знайомі вам маркери переміщення, за допомогою яких ви можете виділити необхідну частину зображення, після чого натисніть Enter і частина зображення буде вирізання.

За допомогою інструменту Resample (Перетворення) ( За допомогою інструменту Resample (Перетворення) (   ) Ви можете зробити зображення більш чітким ) Ви можете зробити зображення більш чітким.

Інструментом Brightness and Contrast (Яскравість і Контрастність) ( Інструментом Brightness and Contrast (Яскравість і Контрастність) (   ) Ви можете змінювати яскравість і контрастність зображення перетягуючи повзунки ) Ви можете змінювати яскравість і контрастність зображення перетягуючи повзунки.

Інструментом Sharpen (Різкість) ( Інструментом Sharpen (Різкість) (   ) Ви можете змінювати різкість зображення ) Ви можете змінювати різкість зображення.

За допомогою поля Border Ви можете задати рамку навколо зображення, в пікселях. Наприклад, можете поставити в це поле значення "2" і натиснути Enter. В результаті навколо зображення з'явиться рамка розміром 2 пікселя.

Ну і нарешті, випадає Align, за допомогою якого Ви можете вказати місце збереження зображення. Він містить наступні параметри:

Default (За замовчуванням) - в цьому випадку місце розташування буде залежати від налаштувань браузера користувача.

Baseline (Базова лінія) - зображення буде збігатися з базовою лінією тексту.

Top (В верху) - вирівнювання зображення по верхньому краю.

Middle (Середина) - вирівнювання зображення по середині, базової лінії тексту.

Bottom (Внизу) - положення зображення в низу, щодо елемента в якому воно знаходиться.

Text Top (В верху тексту) - положення зображення при якому його верх збігається з верхом найвищого символу тексту.

Absolute Middle - середина зображення буде збігатися з центральною лінією тексту.

Absolute Bottom - низ зображення буде збігатися з низом найнижчого символу в тексті.

Right (Право) - зображення притискається до правого краю сторінки, при цьому текст буде обтікати його зліва.

Left (Ліворуч) - зображення притискається до лівого краю сторінки, а текст буде обтікати його з права.

Ось це і є основні інструменти, призначені для роботи з зображеннями в Dreamweaver. Тут ми ще не розглянули, яким чином можна зробити зображення-посилання, і зображення-карту, але цього ми обов'язково присвятимо окремий урок.

Матеріал підготовлений порталом: webmastermix.ru

Пропонуємо Вам ознайомитися:

подробиці

Опубліковано: 14 cічня 2010

Оновлено: 14 Жовтень 2013

Переглядів: 19421

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: