1. Ръководител:Жасмина Соколова
1
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

2.  Уеб страница
или колекция от уеб
страници,
създадени на основата
на Adobe Dreamweaver
CS3.
 Съвети, които спазвахме
за създаване на успешна
уеб страница
 Проектиране преди
създаване:
1. Обмисляне посаланието на
страницата;
2. Оформяне основните теми
като заглавия;
3. Определяне съдържанието
и събиране на материали от
текст, изображения;
4. Съставяне на блок схема на
структурата на страницата;
5. Стила и дизайна на самата
страница.
2
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

3.  Запознаване с
програмния продукт
Adobe Dreamweaver
CS3 за създаване на
Web страници.
 Записване на
страница и избор
на стартова
позиция.
 Adobe D
Klublessonslesson
01index_final.htm
 Ние всички
разбрахме как
програмата
осигурява 32 начина
на начална точка и
всичките различни
разположения
(layouts).
3
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

4.  Модифициране и
промяна на
заглавията на
страница.
 Заглавието на страницата
се показва в заглавната
лента (title bar) на браузъра.
 Селектирахме
заместващия текст,
въведохме,така
променихме заглавието,
след това форматирахме.
4
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

5.  Създаване на
персонализирани
работни пространства.
 В това упражнение се
запознахме с основните
елементи на работното
пространство на
Dreamweaver.
 Adobe D
Klublessonslesson02exa
mple_page.html
 Контролиране екрана на
Welcome за бързо
отваряне на
модифицирани страници.
 Прозореца Document
предлага три различни
изгледа които използваме
много в нашата работа:
1. Изглед Design - показва
уебстраницата така,
както браузер;
2. Изглед Code – показва
сорс кода на
страницата;
3. Изглед Split view –
комбинира и двата
изгледа.
5
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

6.  Лентата за
състоянието(Status
bar) съдържа много
полезни
възможности в
Dreamweaver.
 Селекторът на
тагове е полезен за
прецизно
определяне на
елементите, които
искаме да
модифицираме.
 Групите панели са
скачени, но те се
отнасят до конкретни
уебстраници или
елементи на
страницата.
6
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

7.  Настройване на
лентите с
инструменти и
работа с инспектора
на свойства (Property
inspector).
 Инспекторът на
текстовите свойства
е заедно с
инструменти за
форматиране и
подравняване на
текст.
 Избираме Window
Properties.
 Лентите с
инструментите са:
 Document перлага три
опции за изглед;
 Insert добавя много
различни елементи;
 Standard предлага
стандартните файлови
операции;
 Style Rendering
контролира CSS
медийния тип.
7
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

8.  Въвеждане на
заглавия и
импортиране на
външен текст.
 Adobe D
Klublessonslesson04
spirit_final.htm
 Селектираме
фразата, след това
Delete въвеждаме
новата фраза, която е
неформатирана с
Window Properties или
Insert Text
форматираме.
8
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

9.  Импортиране на
външен текст
създаден във
външно
приложение MS
Word.
 Adobe D
Klublessonslesson
04assetsSpirit_text
.doc
9
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

10.  Създаване на
номерирани и
подредени списъци
тага <li>.
 Селектирайте
текста и от
инспектора на
свойства Ordered
List за номериран
списък.
 Селектирайте
текста и от
инспектора на
свойства Unordered
List за неподреден
списък.
 Adobe D
Klublessonslesson
04spirit.htm
10
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

11. ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз
 Създаване на
таблици в лентата
Insert категорията
Common избираме
Table.Отваря ни се
прозорец Table и
тук определяме
колоните и
редовете на
таблицата. За да
бъдат импонтирани
данните
11
 трябва да са
съхранени във
формат, разделен с
клавиша Tab.От
File Import Tabular
Data Browse
избираме файла.

12.  Вмъкване на
изображения,
които са два вида:
на преден план и
фонови.
 Запазените места за
изображения се
използват, за да показват
къде ще бъдат вмъкнати
графичните изображения
от Insert Common Image
избира се изображението
OK.
 От инспектора на свойства
можем да променим
размера на
изображението.
 Подобряване на
графични
изображения и
изпозването им за
фон.
 Adobe D
Klublessonslesson0
5images_start.htm
12
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

13.  С десен бутон
Optimize и от
диалоговия прозорец
Image Preview, тук
форматираме самото
изображение правим
го с по-малки
размери на файла.
13
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз
 Селектираме
запазеното място за
изображение Window
CSS Styles от списъка
избираме конкретното
изображение Edit Style
в CSS Rule Definition
Background в списъка
Category.
 От категорията
Common в лентата
Insert изберете Image
избраното
изображениеможе да
промените размера му
чрез трите

14. ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз
 Допълнително вградени
графични инструменти за
обработка на
изображения това са:
 Edit изпраща селектираното
изображение към външен
грашичен редактор;
 Optimize отваря текущото
изображение Image Preview
и променя настройките;
 Crop изрязва нежеланата
част от изображението;
 Resample променя размера
на изображението;
 Brightness and Contrast
наглася яркост на
изображението;
 Sharpen оказва влияние
върху ъглите и върху
контрастта на пикселите.
14

15.  Вмъкване на
rollover ефекти и
вмъкване на
файлове от
Photoshop.
 Вмъкваме изображение
по познатия начин и с
десен бутон на мишката
Image Preview ,
издърпваме плазгача
Quality= 60, и от Scale
Width=360, OK.
 За да промените
изображение Edit
Photoshop на графичното
изображение се правят
промени Choose Edit
Copy Merged и се
връщаме към
Dreamweaver.
 Двете програми работят
много добре и може да се
селектира един елемент
от графичната
композиция на Photoshop
и да я поставите в
Dreamweaver.
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

16.  Отваряме там където ще
бъде изображението
след това стартираме
Photoshop , избираме
изображението от Tools
селектираме тази част
която ни интересува
избираме, Edit Copy и
затваряме Photoshop,
избираме Edit Paste и от
диалоговия прозорец
Image Preview , от
списъка Saved Settings и
е избрано jpeg Better
Quality OK
 Изображението се
вмъква в
документа.
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз

17.  Преглед на
завършените
файлове.
 Доволни от
добрата работа.
17
ПРОЕКТ BG051PO001-4.2.05-0001 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз