Как да добавяте изображения към вашия уебсайт в Dreamweaver

Добавянето на изображение към вашата уеб страница може да изглежда почти вълшебно в началото, защото процесът е толкова прост с Dreamweaver. Предизвикателството с уеб графиките не е да ги добавяте към вашите страници, а да създавате добре изглеждащи изображения, които се зареждат бързо в браузъра на вашия зрител.

Имате нужда от друга програма, като Photoshop, Photoshop Elements или Fireworks, за да създавате, конвертирате, редактирате и оптимизирате изображения. Оптимизирането на изображения прави размерите на файловете по-малки, така че изображенията ви да се изтеглят по-бързо. Dreamweaver предоставя някои основни инструменти за редактиране на изображения, но най-вече използвате Dreamweaver за вмъкване и позициониране на изображения на вашата страница.

Dreamweaver улеснява поставянето на изображения на вашите уеб страници и предоставя няколко начина за това:

• Щракнете върху иконата Images в панела Common Insert и след това изберете изображение с помощта на диалоговия прозорец Insert Image.

• В панела Файлове щракнете и плъзнете име на изображение на страницата, където искате да се показва изображението.

• Използвайте менюто Вмъкване.

Ако нямате под ръка оптимизирано в мрежата JPEG, GIF или PNG изображение, можете да изтеглите безплатни изображения , които вече са оптимизирани.

За да поставите изображение на уеб страница с помощта на менюто Вмъкване, следвайте тези инструкции:

Отворете съществуваща страница или създайте и запазете нова страница.

Поставете курсора си там, където искате да вмъкнете изображението на страницата.

Можете да вмъквате изображения в горния ляв ъгъл на нов празен файл и в него

тагове и елементи в уеб страница, но не можете просто да поставите изображение в средата на страница, без да използвате допълнителни HTML тагове или CSS форматиране, за да го позиционирате.

Изберете Вмъкване→ Изображение→ Изображение.

Появява се диалоговият прозорец Избор на източник на изображение.

Прегледайте, за да намерите изображението, което искате да вмъкнете.

В зависимост от вашата компютърна система, можете да преглеждате изображения, докато ги вмъквате по различни начини. Ето три често срещани опции:

• На компютър с Windows XP изберете Миниатюри от падащия списък на менюто View вдясно от полето Look In, за да покажете миниатюрни версии на всички изображения във всяка отворена папка. Можете също да видите единичен преглед на всяко избрано изображение в най-дясната част на диалоговия прозорец.

• На компютър с Windows Vista или Windows 7 изберете опция за икона (малки икони, средни икони, големи икони или изключително големи икони) от падащия списък на менюто Преглед вдясно от полето Търсене, за да покажете миниатюрни версии на всички изображения във всяка отворена папка. Можете също да прегледате единичен преглед на всяко избрано изображение в най-дясно на диалоговия прозорец.

• На Mac изберете опцията Преглед като колони от горния ляв ъгъл на диалоговия прозорец. Можете да видите единичен преглед на всяко избрано изображение в най-дясната част на диалоговия прозорец.

  

  Кредит: Снимки от Кейси Стол

За да вмъкнете изображението, щракнете двукратно върху името на изображението или щракнете веднъж и след това щракнете върху OK.

Ако вмъкнете изображение в страница и изображението не е запазено в папката на вашия локален сайт, Dreamweaver ви подканва с диалогов прозорец с предупреждение и предлага да копирате изображението в папката на вашия локален сайт. Много дизайнери създават подпапка, наречена изображения, в папката на локалния сайт, където съхраняват всички изображения в сайта си, но можете да организирате изображения в множество подпапки, ако предпочитате.

Изберете изображението на вашата уеб страница, за да видите и редактирате свойствата на изображението.

Опциите за изображения се показват автоматично в инспектора на свойствата в долната част на страницата, когато е избрано изображение.

Кредит: Снимка от Кейси Стол

Когато вмъкнете файл с изображение на страница, вие всъщност не добавяте копие на изображението към страницата; създавате препратка към изображението. Основният код прилича много на кода за връзка от една страница към друга.

Както препратките към изображения, така и връзките включват името на файла и пътя от страницата до този файл. По същество вие създавате инструкция за уеб браузър да намери изображението, когато показва страницата.

За да покажете изображение на вашата уеб страница, трябва да качите както страницата, така и изображението, когато публикувате уебсайта си. Ако вашите файлове с изображения и страниците, които се отнасят до тези файлове, не са на същото относително място на вашия твърд диск, както са на вашия уеб сървър, вие нарушавате препратката към вашите изображения и на вашата страница се появява грозна икона на счупено изображение .

Най-добрият начин да се уверите, че вашите изображения и файлове остават там, където би трябвало да се намират един спрямо друг, е да оставите Dreamweaver да ги следи вместо вас. Ето защо е толкова важно да завършите процеса на настройка на сайта и да сте сигурни, че никога не премествате или преименувате изображение, освен в панела Файлове.