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 „Да направим училището
привлекателно за младите хора”
Проектът се осъществява с финансовата подкрепа на
Оперативна програма „Развитие на човешките ресурси”,
съфинансирана от Европейския социален фонд на Европейския съюз
