Home Уроци по Dreamweaver

Уроци по Dreamweaver

Защо избрахме Dreamweaver 8?

Dreamweaver 8 е програма за създаване, поддържане и промяна на уеб сайтове. Тя е гъвкава, достъпна за всеки и лесна за използване програма. Обединява дизайн, код и интерактивни възможности. Предоставя множество предимства както на начинаещите, така и на напредналите потребители.

 

dreamweaver8

1.Работно пространство на Dreamweaver

Ако отваряте Dreamweaver за първи път на компютъра си избирате една от двете опции:
– Designer – интегрира всички прозорци и панели на Dreamweaver в среда, оптимизирана за визуално създаване на уеб сайтове;
– Coder – пригодена е за програмисти, които работят основно с HTML и др. езици за уеб програмиране Изберете Designer. Отваря се началната страница Dreamweaver, която предлага: – Open a Recent Item – бързи връзки към наскоро изпозюлзвани документи;
– Create New – опции за създаване на нов документ от различни файлови типове; – Create From Samples – примерни дизайни на страници;
– Dreamweaver Exchange – съдържа ресурси, които можете да използвате за разширяване на инструментите на програмата.

По подразбиране, началната страница се появява при всяко отваряне на програмата, докато не поставите отметка в полето Don’t show again. Ако не се появи началната страница, може да я покажете от Edit/Preferences, General, поставяте отметка на Show start page.

Работно пространство

 

2.Подготовка за разработване на сайт

1. Проучване

Преди да започнете работа трябва да знаете:
– за коя аудитирия ще е предназначен сайта; какви са интересите на посетителите;
– защо има необходимост от сайта;
– какво искате да получат посетителите му;
– от какво съдържние ще има нужда;
– какво ще изразява сайтът т.е.какво искате да кажете на посетителите с него;
– важно е да знаете кои са конкурентите Ви и как изграждат сайтовете си.

2. Планиране и структура

Яснотата и лекотата на употреба са сред най-важните компоненти на един добър уеб сайт.
а) създаване на структурата на сайт – за да е ясен, комуникативен и лесен за употреба сайтът трябва да има планирана структура. Трябва да създадете подробна схема на сайта.
б) създаване на структура от файлове и папки – препоръчва се да създадете отделни папки за различните видове файлове (папка за HTML код, за изображения, за мултимедия, за каскадни набори от стилове (CSS)).

3. Разработка и дизайн на сайта

На този етап се създават основни насоки за стиловете, даващи конкретна информация за външния вид, интерфейса, цветовете и стиловете, които ще се използват в сайта.

4. Тестване

Трябва да тествате начина, по който различните браузъри (Microsoft Intrrnet Explorer, Mozilla Firefox, Opera, Safari) изобразяват страниците, тествайте всички страници и връзки.

5. Поддръжка

Към този етап се отнасят добавяне на нови страници, обновяване на връзки, подмяна на съдържание и изображения.

3.Дефиниране на локален сайт

1. Същност

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

2. Дефиниране на локален сайт по метод Basic Алгоритъм:

1. Запишете локалната папка извън тази на приложението Dreamweaver. Препоръчва се да бъде в My Documents.
2. Създаване на нов сайт:
1н.) От раздела Create New в началната страница на Dreamweaver изберете Dreamweaver Site
2н.) Site/New Site
3н.) Site/Manage Sites и натиснете бутон New. Изберете Site от появилото се меню. Отваря се диалогов прозорец Site Definition с 2 страници – Basic (опростен) и Advanced (пълен). По подразбиране се извежда Basic, която Ви превежда през процеса стъпка по стъпка. Advanced дава възможност за конфигуриране на допълнителни опции и настройки и не включва текстовите обяснения, достъпни в изгледа Basic. Изберете страница Basic.
3. В първото текстово поле въвеждаме име за сайта (то не е видимо за потребителите на сайта); бутон Next
4. Dreamweaver ще попита дали искате да работите със сървърна технология. Изберете първата опция; бутон Next.
5. Определете начина на работа с файловете преди да ги публикувате – изберете първата опция.
6. Посочете папката, в която ще съхранявате локалните файлове – това е локалната коренова папка, която вече сте създали; бутон Next.
7. Изберете местоположението на отдалечения сървър, където ще бъдат публикувани файловете Ви:
– None
– Local/Network – за да ги пробвате първо на вашия компютър
– FTP – за да ги побликувате на отдалечен сървър
Изберете None и натискате бутон Next
8. Преглеждате информацията за сайта и бутон Done.

 

Дефиниране на локален сайт

4. Създаване и записване на нова HTML страница

1. Алгоритъм:

1. 1н.) File/New – отваря се диалогов прозорец New Document с 2 страници: General и Templates. Избирате General и от категорията Basic Page избирате HTML. Натискате бутон Create.
2н.) От началната страница на Dreamweaver избирате колоната Create New, HTML
2. Избирате File/Save.
Ако файлът е бил записан предварително, при импортиране на изображения и други елементи, всички пътища към местоположението на елементите в сайта ще бъдат създадени правилно.
Dreamweaver автоматично добавя разширение HTML към името на файла за HTML документите. Ако раширението по подразбиране е HTM, то тогава Edit/Preferences, категория New Document в текстовото поле Default Extension въвеждате .HTML

2. Правила за именуване на файлове

Допускат се латински букви, арабски цифри (цифрата не може да бъде първи символ от името), долна черта.

5.Описание на работната среда

1. Основни елементи

Основни елементи

1.1 Заглавен ред
1.2 Лента с менюта
1.3 Лента Insert
1.4 Лента Document – съдържа бутони за 3 изгледа на работа:
– Code – на екрана се извежда само кода
– Design – на екрана се извежда сама дизайна на страницата
– Split – комбинация на горните 2 изгледа
1.5 Лента Standard
View/Toolbars – показва и скрива Standard, Document и Insert.
1.6 Лента Tag selector – намира се в долния ляв ъгъл на прозореца, винаги започва с тага

и извежда в йерерхична подредба HTML таговете, които са приложени към селектирания елемент.
1.7 Панел Properties – намира се в долната част на екрана и се използва за форматиране на различни обекти по страницата. Може да се скрива или показва с бутончето над него.
Window/Properties -показваискривапанела

Панел Properties

2. Работа с панели и документи

Съдържат опции за създаването и обработката на съдържанието. Избират се от меню Window. При кликване върху стрелката пред името на панела се показва или скрива панела. При кликване върху иконата срещу името на панела се отваря менюто на панела. Подразбиращите се групи са CSS, Application, Tag Inspector, Files.

3. Лента за вмъкване (Insert)

а) предназначение – използва се за добавяне на съдържание към уеб страници. Може да се визуализира като меню или като съвкупност от страници.
б) превключване между форматите
Ако е под формата на меню, за да го покажете като съвкупност от страници – от бутон Common/Show as Tabs;
Ако е съвкупност от страници, за да го покажете като меню – от меню Options в горния десен ъгъл на панел Insert/Show as menu.
в) опции
– Common – съдържа най-често използваните елементи на уеб страница, като хипервръзки, таблици, изображения, шаблони
– Layout – осигурява опции за създаване на таблици, слоеве и фреймове; предлага опции за изглед на таблици;
– Forms – съдържа всички елементи, които се използват в онлайн формуляри;
– Text – съдържа бутони за форматиране на текст;
– HTML – съдържа бутони за вмъкване на данни (метаданни, ключови думи или описания) в секцията Head на уеб страница;
– Application – за вмъкване на елементи на динамична уеб страница;
– Flash Elements – съдържа опции за файлове, създадени с Flash;
– Favorites – за създаване на потребителски списък с най-често използваните обекти в лента Insert.

6.Озаглавяване и предварителен преглед на страница в браузър

1. Озаглавяване на страница

Заглавието на всяка страница се появява в заглавната лента на браузъра и е добре да се задава преди да добавите съдържание на нея (извършва се в лента Document в поле Title).

2. Предварителен преглед на страница

а) избор на браузър – всеки браузър извежда страниците по различен начин и за това е добре те да се тестват в различни браузъри 1) File/Preview in Browser/Edit Browser List 2) отваря се диалогов прозорец Preferences, избирате категория Preview in Browser – показват се браузърите, инсталирани на компютъра. Можете да добавяте браузър към списъка (ако имате повече от 1 браузър на компютъра си) и да премахвате чрез бутоните (+) и (–)
б) преглед на страница – лента Document, бутон Preview/Debug in Browser (F12).

 

Източник: pmgdimitrovgrad.net/teacher.bg/Dreamweaver/1.html

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Time limit is exhausted. Please reload the CAPTCHA.