1.Поставяне на изображения
1. Графични формати за уеб пространството
Процесът на записване на изображенията във форма, подходяща за уеб пространството се нарича оптимизиране и може да бъде извършен в програма за графична обработка като Macromedia Fireworks и Adobe Photoshop. При избора на граф.формат целта е да се постигне възможно най-голямо качество при възможно най-малък размер на файла.
а) GIF (Graphic Interchange Format) – подходящ е за текст, векторна графика, изображения с малко цветове и изображения с много малки размери. GIF поддържа максимум 8-битов цвят т.е. само 256 цвята. GIF се зареждат бързо, предлагат се повече опции за оптимизирането им и поддържат анимация и прозрачност. Разширението на файловете е gif.
б) JPEG (Joint Photographic Experts Group) – най-добрият избор за фотографски изображения (позволява създаването на много по-малки файлове от GIF при много по-високо качество) и изображения с голяма палитра на цветовете. JPEG използва 24-битов режим, запазвайки всички цветове. Разширенията на файловете са jpg и jpeg.
в) PNG (Portable Network Graphic) – предлага повече възможности за контролиране на цветовете – могат или да се запазят всички цветове като при JPEG, или да се ограничат като при GIF. PNG не поддържа анимация и не се поддържа от по-старите браузъри. Разширението на файловете е png.
2. Поставяне на фоново изображение
Може да бъде:
– малко изображение, което се нарежда по цялата страница, заемайки цялата фонова височина и ширина на прозореца на браузъра. То не влияе на лентите за превъртане.
– по-голямо изображение като за определяне на разположението му се използва CSS. С тях се определя дали изображението да се редува хоризонтално, вертикално, в двете посоки или да не се редува.
Преди импортиране на изображения записвайте файловете. Пътища, относителни спрямо твърдия диск не работят на отдалечен сървър. Ако вмъкнете изображение, без преди това да запишете страницата, рискувате да получите „повредени” изображения.
а) на отделна страница (чрез създаване на вътрешен стил)
1) Modify/Page Properties, категория Appearance
2) бутон Browse – за търсене на изображения. Има възможност за избор на метода на повторение. Могат да се определят и полетата на страницата – това е полезно, ако размерът им зависи от фоновото изображение.
б) на всички страници в сайта (чрез външен стил)
1) ако нямате създаден външен стил (правило) за страницата създайте такъв; ако имате – панел CSS Styles, списък All Rules – селектирайте правилото body (предефинира тага
, в който се намира съдържанието на документа) от външния набор, бутон Edit Style
2) отваря се диалогов прозорец CSS Rule Definition for body in име_на_файл, категория Background, бутонBrowse 3) отваря се диалогов прозорец Select Image Source – намерете желаното изображение; OK или Select
Ако изображението, което изберете е извън локалния сайт, Dreamweaver показва предупреждение и ви дава възможност да го качите в сайта. Страниците и елементите, които използвате в сайта се намират в кореновата папка. Освен тях могат да се използват елементи, които не се намират в нея, а в Интернет. За целта се използват абсолютни пътища. Такива елементи не се изобразяват в прозореца Document и за да ги видите трябва да преглеждате страницата си в браузър.
4) в диалогов прозорец CSS Rule Definition :
– изберете начина на повторение на селектираното фоново изображение – меню Repeat. Възможни са следните опции:
Repeat – y – повтаря избраното фоново изображение вертикално
Repeat – x – повтаря избраното фоново изображение хоризонтално
Repeat – повтаря избраното фоново изображение хоризонтално и вертикално (по подразбиране)
No-Repeat – не води до повторение на изображението
– Attachment – позволява да се определи дали фоновото изображение трябва да е фиксирано или да се превърта с останалата част на страницата (това свойство се използва с изображения, които не се повтарят)
– Horizontal position и Vertical position – използват се за контролиране на позицията на фоновото изображение. Стойностите на хоризонталната позиция са left, center, right, а за вертикалната – top, center, bottom.
3. Изтриване на фоново изображение
1н.) Modify/Page Properties, категория Appearance, поле Background – изтрийте името на файла
2н.) панел CSS, списък Properties, свойство Background – променете или изтрийте името на файла
4. Поставяне на изображения върху страниците
1) лента Insert, категория Common, меню Images – изберете Image (или Insert/Image)
2) отваря се диалогов прозорец Select Image Source – намерете желаното изображение
□ Preview images – преглед на изображението по време на търсене
Look in – избор на папка за търсене на изображение
Files of Type – използва се за показване само на определени видове файлове
File name – изписва се името на селектирания файл
URL – съдържа пътя, който ще бъде използван от документа за достъп до изображението
Relative to
Document (по подразбиране) – относителен спрямо документа път; отдясно се появява името на документа, в който вмъквате изображението
Site Root – относителен спрямо корена на сайта път; отдясно се появява името на сайта
Опции за динамични сайтове:
○ File System – подразбиращ се метод за избор на файл за сайт, който не използва сървърна технология
○ Data Sources – документът се създава на приложен сървър (за динамични сайтове)
3) OK
4) в диалогов прозорец Image Tag Accessibility Attributes в поле Alternate Text въведете алтернативен текст; OK Aлтернативният текст се появявя, ако потребителите забранят изобразяването на изображения, ако браузърите им по принцип не могат да визуализират изображения, ако някое изображение не успее да се зареди или поради някаква друга ситуация потребителя не може да види изображението. Alt текст трябва да е текстовия еквивалент на изображението – трябва да описва функцията му. Този текст може да се променя от панел Properties при селектирано изображение.
2. Работа с изображения
1. Оразмеряване и опресняване на изображения
1н.) селектирайте изображението и в панел Properties променете стойностите на полетата W и H; натиснете Enter или щракнете в прозореца Document.
Новите атрибути за височина и ширина в тага img правят изображението да изглежда по-малко (по-голямо), без реално размерите му да са намалявани (увеличавани). Размерът на файла в панел Properties не се променя. 2н.) щракнете върху някой от селектираните манипулатори на изображението и го издърпайте. За да се запазят пропорциите при оразмеряване задръжте клавиша Shift и издърпайте манипулатора в долния десен ъгъл.
3н.) чрез програма за редактиране на изображения (например Macromedia Fireworks или Adobe Photoshop) – така се получават възможно най-малки файлове.
За да върнете оригиналните размери на изображението натиснете бутонReset Image To Original Size от панел Properties (иконата му е за опресняване и се намира в пресечната точка на линиите на полетата W и H).
Ако се налага да използвате много големи изображения или изображения от други сървъри може да дефинирате изображение с по-ниско качество (low source изображение), което се появява първо. Пълното изображение се появява на негово място след завършване на свалянето му. Low source изображението играе ролята на надиалогов прозорец ис „зарежда се” и се дефинира в панел Properties, поле low src.
2. Позициониране на изображения чрез CSS
Пример: Подравняване на изображение с левия ръб, а текста да се обвива около дясната му част
1) панел CSS Styles, бутонNew CSS Rule
2) ○ Class Selector Type; поле Name – въведете име за CSS файл; OK
3) отваря се диалогов прозорец CSS Rule Definition, категория Box
Всички елементи в документа се разглеждат като правоъгълни области, наречени кутии. В CSS тази концепция се използва за контролиране на външния вид на обектите, разположението им и т.н. Кутиите могат да бъдат блокови и инлайн, а всяка кутия може да съдържа други кутии.
От меню float (плаващо) изберете left; OK
4) в прозореца Document селектирайте желаното изображение
5) панел Properties, меню Class – изберете името на външния файл от 2)
3. Даване на имена на изображение
Давайте кратки имена с малки букви и без интервали и специални знаци. Това име е само вътрешно.
1) селектирайте изображението
2) панел Properties, в текстовото поле за име (в горния ляв ъгъл на панела, точно под размера на изображението) въведете името.
4. Поставяне на рамка около изображение
1н.) чрез CSS
1) ако имате създаден CSS за работа с изображението, то от панел CSS Style списък All Rules го селектирайте и натиснете бутонEdit Style; ако нямате – създайте външен стил (правило) за работа с изображението
2) отваря се диалогов прозорец CSS Rule Definition, категория Border Направете желаните настройки за Style, Width, Color; OK
2н.) чрез атрибут border на тага img
1) селектирайте изображението
2) панел Properties, поле Border – въведете желаната дебелина
Ако изображението е едновременно и препратка, цветът на рамката ще бъде подразбиращият се цвят Link Color (освен ако няма CSS стил).
5. Нагласяване на пространство около изображение
Използват се мерни единици пиксели
1н.) чрез CSS – мястото на всяка страна на елементите може да се контролира поотделно
1) аналогично на 4.1)
2) диалогов прозорец CSS Rule Definition, категория Box
В областта Margin махнете отметката от полето Same for all и направете необходимите настройки за Top, Right, Bottom, Left; Enter
2н.) чрез атрибутите H space, V space на тага img – те добавят еднакво разстояние от двете страни на изображението (не можете да добавите само от едната страна, както със CSS)
1) селектирайте изображението
2) панел Properties, полета H space, V space – въведете желаната стойност
6. Запазване на място за изображение
Ако не разползгате с финалното изображение по време на разработката може да използвате заместващо изображение (placeholder). То запазва място и показва приблизително как ще стои финалното изображение върху страницата в комбинация с другите елементи.
1) поставете курсора на желаното място
2) лента Insert, категория Common, меню Images, опция Image Placeholder
3) отваря се диалогов прозорец Image Placeholder – направете желаните настройки (Name, Width, Height, Color, Alternate text); OK
Запазеното място се появява в прозореца Document. То е запълнено с избрания цвят и в него са изписани името и размерите на изображението. В браузър – на мястото на заместващото изображение има икона за липсващо изображение + алт.текст в правоъгълник с размерите и цвета, дадени в диалогов прозорец
7. Замяна на заместващо изображение (или на едно изображение с друго)
1) в прозореца Document щракнете 2 пъти върху заместващото изображение
2) отваря се диалогов прозорец Select Image Source – избирате изображение; OK
Изображението заменя запазеното място в прозореца Document. Името и алт.текст не се пренасят върху изображението.
3. Управление на изображения чрез панел Assets
1. Панел Assets
Предоставя начин за организиране на компонентите на сайта от самия Dreamweaver. Има 2 изгледа за работа с този панел:
– изглед Site – автоматично се показват всички изображения в сайта, независимо дали се използват в някой документ или не. Попълването на каталога може да отнеме няколко секунди. Ако добавите нов актив (напр.цвят) към сайта си трябва да опресните каталога чрез бутонRefresh Site List
– изглед Favorites – виждат се само изображенията, маркирани като предиалогов прозорец очитани
За да видите къде се намира даден графичен файл от панела: десен бутон на мишката върху него и Locate In Site (или колоната Full Path на панел Assets).
Бутон Edit – отваря селектирано изображение в подразбиращата се програма за графична обработка. Щракването върху заглавните области на колоните Name, Type, Size, Full Path,… пренарежда списъка.
2. Вмъкване на изображения от панел Assets
1) панел Files, панел Assets, ○ Site
2) намерете желаното изображение; бутон Insert
3. Управление на изображения със списъка Favorites
а) добавяне на изображение към списъка Favorites
1) панел Assets, ○ Site – селектирайте желаното изображение
2) бутон Add To Favorites (или десен бутон на мишката и Add To Image Favorites)
3) появява се диалогов прозорец, който уведомява за добавяне на изображението към списъка Favorites; OK
4) бутон Images, ○ Favorites – панел Assets показва добавеното изображение
б) премахване на изображение от списъка Favorites
1) селектирайте изображението от списъка Favorites
2) бутон Remove From Favorites
в) организиране на списъка Favorites
– създаване на папка – бутон New Favorites Folder и въведете име
– преместване на изображение в папка
– чрез издърпването му – изтриване на папка – десен бутон на мишката и Remove From Favorites
4. Редактиране на изображения
1н.) чрез външна програма за графична обработка – необходимо е да я имате на своя PC и да направите следните настройки:
1) Edit/Preferences
2) отваря се диалогов прозорец Preferences – използва се за свързване на различни външни програми като подразбиращи се редактори с файловете с различни разширения
3) категория File Types/Editors
4) от списъка Extensions изберете .gif. Натиснете бутон + над списъка Editors и селектирайте графична програма от типа на Fireworks; бутонMake Primary
5) повторете стъпка 4) за разширения .jpeg и .png; OK
6) селектирайте изображение
7) панел Properties
Бутон Edit – отваря и модифицира изображението във външна програма
Бутон Optimize In Fireworks – промяна на формата на изображението, качеството (за JPEG) и цветовата палитра (за GIF)
Бутон Resample – промяна на разделителната способност на изображение Добре е да се започне с изображение с висока такава и тя да се намалява до желаната.
2н.) чрез вградените в Dreamweaver инструменти на Fireworks
При избор на инструмент излиза съобщение, че операциите ще променят самия файл на изображението на диска. Изберете OK. При промяна на изображението се променят и всичките му копия в целия сайт. Ако не желаете това да става направете дубликат на изображението с друго име и работете по него.
– Отрязване 
1) селектирайте изображението
2) панел Properties, инструмент Crop
В изображението се появява селектирана област. В краищата и средите на страните й има манипулатори. Тя е по-малка от самото изображение и има приблизително същите пропорции. В областта изображението е чисто. Когато курсорът бъде поставен в центъра й, той се превръща в кръст със стрелки и областта може да бъде местена. Оразмеряването й става с издърпване на манипулаторите.
3) променете селектираната област както желаете, но оставяйки я по-малка от изображението; Enter (или щракате 2 пъти в селектираната област или щракате върху иконата Crop в панел Properties)
Изображението е отрязано по селектираната област. Големината на файла намалява.
За отмяна на отрязването щракнете в прозореца Document извън изображението (или Edit/Undo Crop или Ctrl+Z).
– яркост и контраст 
1) селектирайте изображението
2) панел Properties, инструмент Brightness And Contrast
3) появява се диалогов прозорец Brightness/Contrast, който има 2 плъзгача с обхват от -100 до +100. Направете желаните промени; OK
– острота (изясняване) 
1) селектирайте изображението
2) панел Properties, инструмент Sharpen
3) появява се диалогов прозорец Sharpen, който има 1 плъзгач с обхват от 0 до 10. Направете желаните промени; OK
5. Създаване на графични препратки и карти на изображения
1. Създаване на графични препратки
1) селектирайте изображението
2) панел Properties, текстово поле Link – въведете път
За създаване на препратка към документ извън локалната файлова система или извън кореновата папка на сайта задължително се използва абсолютен път. Абсолютните препратки започват с http:// (HyperText Transfer Protocol) и подсказват, че потребителят се свързва с уеб сървър. Останалата част от абсолютната препратка е адресът на сайта. Всички препратки към документи, които се намират на външни сайтове са абсолютни.
3) запишете файла и го разгледайте в браузър
2. Създаване на карти на изображения (image map)
Използват се за разделяне на изображение на няколко области, наречени горещи точки (hotspots). Най-подходящи са за географски карти.
а) създаване на гореща точка
1) селектирайте изображението
2) панел Properties, текстово поле Map (ако не се вижда щракнете върху (▼) в долния десен ъгъл на панел Properties) – въведете име на карта (не използвайте интервали и специални знаци).
3) панел Properties, изберете инструмент:
Rectangular Hotspot – създава правоъгълна гореща точка (изрисувайте правоъгълник около желаните части от изображението)
Shift + Rectangular Hotspot – създава квадратна гореща точка
Oval Hotspot – създава кръгла гореща точка
Polygon Hotspot – очертава сложни форми около произволна област; всяко щракване с него създава нова точка; всяка следваща точка се свързва с предходната с права линия
б) оразмеряване на карта
1) панел Properties, инструмент Pointer Hotspot
2) издърпайте някой манипулатор (например така, че областта да обхваща само 1 точка)
в) преместване на гореща точка – поставете курсора в нея и я издърпайте
г) изтриване на гореща точка – селектирайте я и натиснете Backspace или Delete
д) добавяне на Alt текст на гореща точка – дава представа накъде води препратката – панел Properties, поле Alt е) определяне на препратката на гореща точка – панел Properties текстово поле Hotspot Link – въвеждате път меню Target – определя начина на отваряне на препратката
Видео урок – Оразмеряване на изображение