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

В тази статия ще разгледаме само най-основните стъпки при създаване на HTML страница. Ще използваме Macromedia Dreamweaver MX2004.

Стартирайте програмата. След като зареди, първото, което ще се появи е един прозорец, от който създавате нов документ. От полето Create New изберете HTML.





Пред вас ще се отвори една празна страница.

Работна среда
Dreamweaver разполага с три режима на работа: Code (на екрана извежда само кода), Split (смесен режим, извежда кода и дизайна) и третия режим Design (извежда страницата така, както изглежда). Ще се спрем на третия режим.





В долната част на екрана се намира панела Properties, чрез който ще можете лесно и бързо да форматирате ралични обекти по страницата (таблици, изображения, текст, линкове и др.). Този панел може да се скрива или показва с бутончето над него (). За да маркирате определен елемент от страницата може да използвате и допълнително лентата, в която са изведени отделните тагове, намираща се над панела Properties:



Създаване на проста HTML страница (стъпка по стъпка)
От панела, намиращ се в долната част на екрана изберете Page Properties. Oтваря се прозорец, от който конфигурирате стойностите за цялата страница. Това е едно от първите неща, което трябва да направите след създаването на HTML документа. В прозореца Page Properties има няколко отделни категории, някои от които ще конфигурираме поотделно.

Appearance – задавате шрифта (вид, размер, удабеляване, накланяне, цвят), фона на страницата и нейните странични полета (margins).



Показаните настройки са само примерни!

Links (връзки) – посочвате шрифта, размера, цвета и ефектите на линковете в страницата.




Полетата за цвят на връзките в страницата са четири. Обръщаме главно внимание на Rollover links. Ако изберете в това поле цвят, различен от цветовете в другите полета, при посочване на даден текстов линк с курсора на мишката той ще си променя цвета в избрания rollover цвят. Последната опция “Underline style” служи за определяне на това дали връзките ще бъдат подчертани или не (първите две възможности), както и подчертаването им при посочване със стрелката на мишката.

Headings – от тук можете да създавате различни текстови стилове, чрез които лесно ще може да форматирате отделни текстове по предварително зададени шрифт, размер на шрифта и цвят. Тези стилове за текстово форматиране се именуват автоматично с имена H1, H2, H3 и т.н. в зависимост от броя headings, които сте дефинирали предварително.

Title/Encoding – тук определяте encoding-a и името на страницата. Ако вашата страница е на български изберете в Encoding - Cyrillic (Windows). В Title сложете име на HTML страницата, което ще се изобразява в заглавната лента на браузъра.



Накрая потвърдете всички направени настройки. Програмата дефинира CSS код според направените от вас настройки в Page Properties. По този начин се създават стилове за цялата страница, благодарение на които понякога се спестява доста код и работа от ваша страна.

Текст
Ако предварително сте задали в Page Properties > Appeаrance стил на текста в страницата, то всеки въведен текст ще възприема този вид. За улеснение на потребителите е предвидена възможност за форматиране на текст от панела Properties, намиращ се в долната част на прозореца. Имате възможност да използвате опциите за шрифт, размер, цвят, подравняване, удебеляване, познати от Microsoft Word или да форматирате текста чрез вече дефинирани стилове. Много от тези опции включително и някои други можете да намерите в меню Text.




Таблици
В основата на почти всеки уебсайт се намира една таблица, в която се поставят различните елементи на страницата. Следващата стъпка е именно създаване на тази голяма таблица. Всички таблици се създават от меню Insert > Table или клавишната комбинация от Ctrl + Alt + T. Веднага се отваря прозорец, в който въвеждате параметрите на таблицата.



След вмъкването на таблицата, можете да промените някои от параметрите й (размер, рамки, подравняване) или да разделите дадена клетка на нови колони или редове. Всички тези процедури можете да извършите от опциите в панела Properties в долната част на главния прозорец:




За форматирането на таблицата тя трябва да е маркирана и съответно тага “table” да е активен. Най-важните опции тук са тези за броя на редовете и колононите (1, 2), за размерите на таблицата в пиксели или проценти (3, 4), за разстоянието между клетките (5, 6), подравняване на таблицата (7), дебелината и цвета на рамките в цялата таблица (8, 10) и фона (9, 11).

Форматирането на отделна клетка се извършва по същия начин, с единствената разлика, че трябва да сте посочили клетката и съответно да е маркиран тага “td”. Опциите са същите (за размери, цвят или изображение за фон, цвят на рамките). Добавени са и две бутончета:



съответно Merges selected cells using span – за обединяване на селектирани клетки и Splits cell into rows or columns – за разделяне на клетка на отделни колони или редове.

От същото място се форматира и текста в клетката:




Тук опциите свързани с текста са същите като в Microsoft Word и FrontPage. Ако предварително сте дефинирали отделни стилове, можете чрез тях да форматирате даден текст, като изберете стила от полето Style.

Вмъкването, изтриването, разделянето и обединяването на редове и колони може да стане и от контекстното меню, при кликване с десен бутон върху определена клетка и избор на опция Table или от меню Modify > Table.

Изображения и анимации
Вмъкването на различни изображения се извършва от меню Insert > Image или с клавишна комбинация Ctrl + Alt + I. Отваря се прозорец, в който трябва да изберете графичния файл. Ако сте селектирали вмъкнато изображение от долния панел Properties имате възможност да зададете размерите, с които то ще се изобразява, да го подравните, да поставите алтернативен текст, да му сложите линк, рамки и др. Така лесно можете да си сложите изображения, изпълняващи ролята на бутони във вашата страница. Препоръчва се поставянето на кратък алтернативен текст!

Особено подходящо при направата на графично меню е използването на т.нар. rollover изображения – това са изображения, които се сменят с други при посочване с мишката. Вмъкването на подобни графични обекти става от меню Insert > Image Objects > Rollover Image. Излиза ви малък прозорец, в който ще трябва да въведете име на изображението, оригинално и подменящо се графично изображение, алтернативен текст и линк (последните две полета не са задължителни):




Въвеждането на Flash анимации е подобно при въвеждането на графичните обекти. Ако желате да добавите Flash обекти във вашата страница това може да стане от меню Insert > Media > Flash или клавишната комбинация Ctrl + Alt + F. Macromedia Dreamweaver разполага с готови флаш бутони, които се вмъкват от Insert > Media > Flash Button. Шаблоните за Flash бутони са различни и се избират от Style.

Frames (рамки)
В зависимост от страницата понякога ни се налага въвеждането на отделни frames. Всеки фрейм представлява отделна страница (документ) и се изобразява в определена част на прозореца на браузъра, дефинирана още при създаването на страницата. По този начин може да се показва съдържанието на различни HTML страници, разграничени в рамки в един прозорец. Вмъкването на фреймове (рамки) става от меню Insert > HTML > Frames. Ще забележите че програмата предлага различно структурирани рамки. Оразмеряването на въведени фреймове става чрез придърпване с мишката:





По подразбиране създадените рамки са невидими при отваряне с браузър. От панела Properties обаче можете да задавате стойности за дебелина на рамките и техния цвят. Въпреки че рамките не са нещо необичайно за HTML, в много случаи е нежелана тяхната употреба.

Layers
За да можете да местите даден обект в страницата, използвайте т. нар. слоеве Layers. Изберете Insert > Layout Objects > Layer. В рамката (Layer) можете да вмъквате различни обекти (изображения, текст, анимации, таблици и др.). Можете да променяте размерите или да местите този layer така, както е показано на снимката:





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