Тема 1: Изисквания за изработване на уеб-сайт

Преди да започнете работа трябва да знаете:

- за коя аудитория ще е предназначен сайта; какви са интересите на посетителите;

- защо има необходимост от сайта;

- какво искате да получат посетителите му;

- от какво съдържние ще има нужда;

- какво ще изразява сайтът т.е.какво искате да кажете на посетителите с него;

- важно е да знаете кои са конкурентите Ви и как изграждат сайтовете си.

Яснотата и лекотата на употреба са сред най-важните компоненти на един добър уеб сайт.

а) създаване на структурата на сайт – за да е ясен, комуникативен и лесен за употреба сайтът трябва да има планирана структура. Трябва да създадете подробна схема на сайта.

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

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

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

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

1н.) лента Insert, категория Layout, бутон Table

2н.) лента Insert, категория Common, бутон Table

3н.) Insert/Table

2) Отваря се диалогов прозорец – Table със следните полета:

Секция Table Size:

Rows – брой редове в таблицата

Columns – брой колони в таблицата

Table Width – ширина на таблицата в пиксели или като % от прозореца на браузъра

Border Thickness – ширина на рамката на таблицата

Cell Padding – разстояние между съдържанието на дадена клетка и стените й. Въвеждате 0 ако не искате да има разстояние

Cell Spacing – пространството между клетките на таблицата, без да се включва рамката. Ако не желаете да има давате 0. Ако ги оставите празни ще се използва стойност 1. Тези свойства можете да променяте като маркирате таблицата, панел Properties, секция Table Size

Секция Header – опции за мястото на съдържанието в заглавната клетка: None - без, Left – само за редовете, Top – само за колоните, Both – и за двете.

Заглавните редове и колони се използват за означаване на съдържанието. Използват се най-често за таблици с данни и не се използват в таблици за оформяне на дизайна и разположението. Опцията Header използва атрибута scope – по този начин информацията в редовете или колоните със заглавни клетки служи като идентификатор за всяка от клетките в тях.

• 
  Caption –то се показва на всички потребители и може да бъде подравнено отгоре, отдолу, отляво или отдясно на таблицата.
  
• 
  Summary – извличението от дадена таблица не се показва на страницата. Обяснява предназначението и контекста на таблицата.
  

За преминаване от клетка в клетка – Tab. При въвеждане на по-дълъг текст, таблицата автоматично променя ширината на съответните колони, така че да се събере текста. Най-горният ред е заглавен и въведеният в него текст се центрира и е удебелен.

а) фон на клетка – панел Properties/BackGround Color (Bg) – избирате фонов цвят бутон BackGround URL of cell – избор на фоново изображение

б) автоматично форматиране на таблица

1) Commands/Format Table…

2) отваря диалогов прозорец Format Table – избирате от предварително зададените опции за форматиране. Командата не е активна за таблици със заглавия.

в) подравняване на съдържанието в клетка

панел Properties, поле Horz – по хоризонтала, Vert – по вертикала

г) No wrap – не позволява пренасяне на думите; клетките увеличават ширината си, за да съберат данните; Header – форматира избраната клетка като заглавна на таблицата; съдържанието в нея се показва удебелено и центрирано

д) цвят на рамка – бутон Brdr, панел Properties

3. Сортиране на таблица

Извършва се по съдържанието на някоя колона (или повече от една). Не могат да се сортират таблици, съдържащи обединени клетки.

1) селектирайте таблицата

2) Commands/Sort Table

3) отваря се диалогов прозорец - Sort Table със следните полета:

Sort By – избирате колоната, по която ще сортирате

Order – дали колоната да се сортира в азбучна последователност или по реда на номерата

Then By – сортиране по втори критерий

Sort Includes the First Row – дали първият ред да бъде включен в сортирането

Sort Header Rows, Sort Footer Rows – дали заглавните редове да бъдат включени в сортирането

Keep All Row Colors The Same After the Sort has been Completed – при промяна атрибутите на редовете те се запазват, когато има отметка.

Пример: Ако сортирате таблица с оцветен първи ред след сортирането данните в него се преместват на втори ред. Ако тази опция е избрана ще се премести и цветът. Иначе оцветяването остава на 1-я ред.

4. Модифициране на таблица

а) промяна размера на редовете и колоните - панел Properties, полета W и H

б) добавяне на нов ред/колона

1н.) поставяте курсора в последната клетка на таблицата и натискате Tab

2н.) кликате в последния ред/колона, Modify/Table/Insert Row, Insert Columns, Insert Rows or Columns

в) разделяне на клетки

1) маркирате клетката

2) панел Properties, бутон Split Cell или Modify/Table/Split Cell

г) обединяване на клетки

1) маркирате клетките

2) панел Properties, бутон Merge Cell или Modify/Table/Merge Cell

Можете да обединявате произволен брой клетки, стига те да образуват правоъгълник.

1) създайте структурата на двете таблици

2) попълнете таблицата, която ще влагате

3) селектирайте я; Edit/Cut

4) кликнете в кетката, в която ще вмъквате от другата таблица; Edit/Paste.

ТЕМА 3: Създаване на хипертекстови и графични връзки. Вмъкване и свързване към именувани котви
1. Предназначение.

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

а) относителни – те са в границите на един сайт и водят до файлове в рамките на неговите папки. Използвате само тази част от пътя, която е различна за текущия и свързания с хипервръзката документ.

б) абсолютни – преставят пълния уеб адрес на даден сайт или информационен ресурс

3. Създаване на хипервръзки.

а) на относителни

1) маркирайте думата (фразата)

2) панел Properties, бутон Browse for file

3) избираме желания файл от твърдия диск; OK – името на файла се появява в текстовото поле Link на панел Properties

б) на абсолютни

1) маркирайте думата (фразата)

2) панел Properties, текстовото поле Link – въведете пълен уеб адрес; Enter;

в) хипервръзка към email адрес

1н.) вмъкване на текста и email адреса едновременно

1. кликате на желаното място

2. лента Insert, категория Common, бутон Email Link (или Inser/Email Link)

3. в диалогов прозорец Email Link: в поле Text – въведете името си; в поле E-mail - въведете email адреса си;

4. OK - текста се появявя на страницата във вид на хипервръзка;

2н.) добавяне на хипервръзки към текст, който вече присъства на страница

1) маркирайте текста

2) лента Insert, категория Common, бутон Email Link (или Insert/Email Link)

3) в диалогов прозорец Email Link маркираният тест ще се появи в поле Text

3н.) 1) кликаме на желаното място

2) въвеждаме дума mailto: и Email адреса веднага след нея в полето Link на панел Properties

1) кликаме на произволно място във вече създадена хипервръзка

2) в полето Link на панел Properties правите желаните промени

5. Именувана котва (anchor).

Място в страницата, до което отвежда дадена хипервръзкa

1) Modify/Page Properties, категория Links – настройте цветовете на хипервръзкa

2) Поставете маркера пред думата, към която ще води хипервръзкa

3) 1н.) Insert/Named Anchor

2н.) лента Insert, категория Common, Named Anchor

4) отваря се диалогов прозорец Named Anchor в текстовото поле Anchor Name – въведете името на котвата

5) маркирайте текста за хипервръзкa

6) 1н.) панел Properties, панел Link – въвеждате #име на котвата. Знакът # е необходим, тъй като инструктира браузъра, че тази хипервръзка е вътрешна.

2н.) издърпайте с мишката иконата Point to File от панел Properties до котвата. Отпуснете бутона на мишката, когата курсорът е над нея. В текстовото поле Link се появява #име на котвата. Този начин спомага за избягване на правописни грешки.

7. Добавяне на котва и насочване на външна хипервръзкa към нея.

1н.) 1) създайте котва в желания файл

2) отворете файла, в който ще създавате хипервръзкa и маркирайте текста за хипервръзкa

3) панел Properties, панел Link – въвеждате името на файла, съдържащ котвата #име на котвата

2н.) 1) отворете едновременно в отделни прозорци файловете, съдържащи хипервръзкa и котвата

2) маркирайте хипервръзкaта от единия файл, кликнете върху иконата Point to File и се посочва желаната котва във втория файл.

1) кликнете върху котвата

2) панел Properties, поле Name – променете името й.

ТЕМА 4: Разработване на набори от стилове. Създаване на вътрешни и външни стилове
1. Същност.

а) стил (Style) – нарича се още правило (rule) – набор от свойства, които дефинират и контролират външния вид на даден елемент. Всеки стил има име, по което браузърите определят как да изобразят елементаб) набор от стилове (Style Sheets) – група стилове;

в) каскадни (Cascading) – отнасят се до подредената последователност и приоритет на стиловете. Всеки следващ добавен стил в една страница предефинира предходния.

2. Предназначение.

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

а) вътрешен – дефинира се и се използва само в текущия документ (когато се налага да се форматира само една страница). Dreamweaver го създава автоматично при форматиране на текста или самата страница.

б) външен – текстов файл, съдържащ форматиращи атрибути (само CSS код). Към него трябва да има препратка от всички страници, които трябва да имат този външен вид. Използва се, когато искате сайтът да има еднотипен външен вид, независимо коя страница е отворена.

4. Създаване на вътрешни стилове.

Modify/Page Properties, категория Appearance

а) определяне на фонов цвят – Background Color

б) смяна на шрифта – Page Font Комбинациите от шрифтове в менюто Page Font указват на браузъра как да изобразява текста. Ако първият от групата не бъде намерен, браузърът се опитва да използва втория. Ако и той не е наличен – използва третия. Ако нито един от изписаните не бъде намерен браузърът използва собствения си подразбиращ се.

в) промяна на размера на шрифта – Size

г) избор на цвят на шрифта - Text Color

Те се прилагат автоматично върху съдържанието, което се намира в тях – във всички документи, върху които се прилага наборът от стилове.

1) Поставете курсора в текста, използващ тага или селектирайте тага в Tag selector

2) В панел CSS Styles, икона New CSS Rule

3) Отваря се диалогов прозорец New CSS Rule. Изберете радиобутон Tag

4) Текстовото поле Tag трябва да съдържа избрания таг, без < >

5) От областта Define in натиснете радиобутона за менюто и изберете свързания с документа външен набор от стилове; OK

6) Отваря се диалогов прозорец CSS Rule Definition …. in …..

В необходимите категории направете желаните настройки; OK

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

Б) Създаване на стил за форматиране на текст с тагове за параграф

1) Поставете курсора в желания параграф – лента Tag selector показва HTML тага p за дефиниране на параграф

2) В панел CSS Styles, икона New CSS Rule

3) Отваря се диалогов прозорец New CSS Rule. Изберете радиобутон Tag

4) Текстовото поле Tag трябва да съдържа p. Ако не е така, изберете го.

5) От областта Define in натиснете радиобутона за менюто и изберете свързания с документа външен набор от стилове; OK

6) Отваря се диалогов прозорец CSS Rule Definition …. in …..

В необходимите категории направете желаните настройки; OK

1) Поставете курсора в 1-я ред на списъка. В Tag selector щракнете върху ul, ol (това са HTML тагове за целия списък; li - отнася се само за отделни позиции в списъка)

2) В панел CSS Styles, икона New CSS Rule

3) Отваря се диалогов прозорец New CSS Rule, изберете радиобутон Tag

4) Текстово поле Tag трябва да съдържа ol. Ако не е така – изберете го.

5) От областта Define in натиснете радиобутона за менюто и изберете свързания с документа външен набор от стилове; OK

6) Отваря се диалогов прозорец CSS Rule Definition …. in ….., категория Type – направете желаните настройки; OK

ТЕМА 5: Работа с графика. Позициониране на изображение. Разполагане на текст около изображение. Редакция на изображение
1. Графични формати за уеб пространството.

Процесът на записване на изображенията във форма, подходяща за уеб пространството се нарича оптимизиране и може да бъде извършен в програма за графична обработка като Macromedia Fireworks и Adobe Photoshop. При избора на граф.формат целта е да се постигне възможно най-голямо качество при възможно най-малък размер на файла.

а) GIF (Graphic Interchange Format) – подходящ е за текст, векторна графика, изображения с малко цветове и изображения с много малки размери. GIF поддържа максимум 8-битов цвят т.е. само 256 цвята. GIF се зареждат бързо, предлагат се повече опции за оптимизирането им и поддържат анимация и прозрачност. Разширението на файловете е gif.

б) JPEG (Joint Photographic Experts Group) – най-добрият избор за фотографски изображения (позволява създаването на много по-малки файлове от GIF при много по-високо качество) и изображения с голяма палитра на цветовете. JPEG използва 24-битов режим, запазвайки всички цветове. Разширенията на файловете са jpg и jpeg.

в) PNG (Portable Network Graphic) – предлага повече възможности за контролиране на цветовете – могат или да се запазят всички цветове като при JPEG, или да се ограничат като при GIF. PNG не поддържа анимация и не се поддържа от по-старите браузъри. Разширението на файловете е png.

2. Поставяне на фоново изображение.

Може да бъде:

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

- по-голямо изображение като за определяне на разположението му се използва CSS. С тях се определя дали изображението да се редува хоризонтално, вертикално, в двете посоки или да не се редува.

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

а) на отделна страница (чрез създаване на вътрешен стил)

1) Modify/Page Properties, категория Appearance

2) бутон Browse – за търсене на изображения. Има възможност за избор на метода на повторение. Могат да се определят и полетата на страницата – това е полезно, ако размерът им зависи от фоновото изображение.

б) на всички страници в сайта (чрез външен стил)

1) ако нямате създаден външен стил (правило) за страницата създайте такъв; ако имате – панел CSS Styles, списък All Rules – селектирайте правилото body (предефинира тага, в който се намира съдържанието на документа) от външния набор, бутон Edit Style

2) отваря се диалогов прозорец CSS Rule Definition for body in име_на_файл, категория Background, бутонBrowse

3) отваря се диалогов прозорец Select Image Source – намерете желаното изображение; OK или Select

Ако изображението, което изберете е извън локалния сайт, Dreamweaver показва предупреждение и ви дава възможност да го качите в сайта. Страниците и елементите, които използвате в сайта се намират в кореновата папка. Освен тях могат да се използват елементи, които не се намират в нея, а в Интернет. За целта се използват абсолютни пътища. Такива елементи не се изобразяват в прозореца Document и за да ги видите трябва да преглеждате страницата си в браузър.

4) в диалогов прозорец CSS Rule Definition :

- изберете начина на повторение на селектираното фоново изображение – меню Repeat. Възможни са следните опции:

Repeat – y – повтаря избраното фоново изображение вертикално

Repeat – x - повтаря избраното фоново изображение хоризонтално

Repeat - повтаря избраното фоново изображение хоризонтално и вертикално (по подразбиране)

No-Repeat – не води до повторение на изображението

- Attachment – позволява да се определи дали фоновото изображение трябва да е фиксирано или да се превърта с останалата част на страницата (това свойство се използва с изображения, които не се повтарят)

- Horizontal position и Vertical position – използват се за контролиране на позицията на фоновото изображение. Стойностите на хоризонталната позиция са left, center, right, а за вертикалната - top, center, bottom.

3. Изтриване на фоново изображение.

1н.) Modify/Page Properties, категория Appearance, поле Background – изтрийте името на файла

2н.) панел CSS, списък Properties, свойство Background – променете или изтрийте името на файла

4. Нагласяване на пространство около изображение.

Използват се мерни единици пиксели

1н.) чрез CSS – мястото на всяка страна на елементите може да се контролира поотделно

1) аналогично на 4.1)

2) диалогов прозорец CSS Rule Definition, категория Box

В областта Margin махнете отметката от полето Same for all и направете необходимите настройки за Top, Right, Bottom, Left; Enter

2н.) чрез атрибутите H space, V space на тага img - те добавят еднакво разстояние от двете страни на изображението (не можете да добавите само от едната страна, както със CSS)

1) селектирайте изображението

2) панел Properties, полета H space, V space – въведете желаната стойност

5. Редактиране на изображения.

1н.) чрез външна програма за графична обработка – необходимо е да я имате на своя PC и да направите следните настройки:

1) Edit/Preferences

2) отваря се диалогов прозорец Preferences – използва се за свързване на различни външни програми като подразбиращи се редактори с файловете с различни разширения

3) категория File Types/Editors

4) от списъка Extensions изберете .gif. Натиснете бутон + над списъка Editors и селектирайте графична програма от типа на Fireworks; бутонMake Primary

5) повторете стъпка 4) за разширения .jpeg и .png; OK

6) селектирайте изображение

7) панел Properties

Бутон Edit – отваря и модифицира изображението във външна програма

Бутон Optimize In Fireworks – промяна на формата на изображението, качеството (за JPEG) и цветовата палитра (за GIF)

Бутон Resample – промяна на разделителната способност на изображение Добре е да се започне с изображение с висока такава и тя да се намалява до желаната.

2н.) чрез вградените в Dreamweaver инструменти на Fireworks

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

- Отрязване Отрязване на изображение

1) селектирайте изображението

2) панел Properties, инструмент Crop

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

3) променете селектираната област както желаете, но оставяйки я по-малка от изображението; Enter (или щракате 2 пъти в селектираната област или щракате върху иконата Crop в панел Properties)

Изображението е отрязано по селектираната област. Големината на файла намалява.

За отмяна на отрязването щракнете в прозореца Document извън изображението (или Edit/Undo Crop или Ctrl+Z).

- яркост и контраст Яркост и контраст на изображение

1) селектирайте изображението

2) панел Properties, инструмент Brightness And Contrast

3) появява се диалогов прозорец Brightness/Contrast, който има 2 плъзгача с обхват от -100 до +100. Направете желаните промени; OK

- острота (изясняване) Острота на изображение

1) селектирайте изображението

2) панел Properties, инструмент Sharpen

3) появява се диалогов прозорец Sharpen, който има 1 плъзгач с обхват от 0 до 10. Направете желаните промени; OK

ТЕМА 6: Добавяне на флаш анимации и флаш бутони
1. Създаване на Flashтекст.

а) същност - Flash текстът обединява най-доброто от текста и изображенията. Можете да използвате произволен шрифт и да създадете текста в Dreamweaver. Създаденият текст се записва като Flash файл с .swf. б) създаване

1) позиционирайте курсора в документа

2) лента Insert, категория Common, меню Media, Flash Text

3) отваря се диалогов прозорец Insert Flash Text – със следните опции:

- Font – шрифт

- Size – размер

- Color – цвят

- Text – текст, който ще се покаже на страницата

- Rollover Color – втори цвят при преминаване с мишката върху текста

4) в поле Save as – въвеждате име и избирате разширение .swf.

5) Flash текстът се появява в Document и се отваря Flash Accessibility Attributes

6) в поле Title – въвеждате текста

в) промяна на размера на Flash текст

1) избирате Flash текст

2) чрез издърпване на един от манипулаторите променяте размерите му

Flash текстът е векторно изображение и при оразмеряване то запазва точния вид на съдържанието си при промяна на мащаба. За да запазите пропорциите при оразмеряването на Flash текст задръжте Shift.

За да разгледате ефектите панел Properties, бутон Play

г) модифициране на Flash текст

1) щракнете двукратно върху Flash текст (ако не може, първо натиснете от панел Properties, бутон Stop)

2) отваря се диалогов прозорец Insert Flash Text – направете желаните промени

3) бутон Apply–задавидитерезултата

Flash графиката е векторна, размерът на файловете е много малък и позволява по-бързото им зареждане в сравнение с растерните изображения. Не е необходимо да разполагате с Flash, за да създадете негови бутони. а) състояние на Flash бутони в зависимост от позицията на курсора и според това дали е натиснат бутон на мишката

1) състояние на външния вид на бутона, когато курсорът не е позициониран върху него;

2) при поставяне на курсора на мишката върху него, без да е натиснат бутон на мишката;

3) при поставяне на курсора на мишката върху него и е натиснат бутон на мишката;

б) създаване

1) лента Insert, категория Common, меню Media, икона Flash бутон

2) отваря се диалогов прозорец Insert Flash Button

3) в поле Style – избирате стила

Button Text – текст върху бутона

Font и Size – шрифт и размер

Sample – предварителен преглед на стила на бутона. За да видите как функционира, преместете курсора на мишката над него.

Bg color – цвят

Save as – въведете име с разширение .swf; OK;

4) отваря се диалогов прозорец Flash Accessibility Attributes – в поле title – въведете заглавие на бутона (текста) 5) панел Properties, бутон Play – бутонът се появява във вида, в който ще се вижда в браузъра.

в) модифициране на Flash бутони

1) щракнете двукратно върху Flash бутони

2) отваря се диалогов прозорец Insert Flash Button – направете желаните промени

3) бутон Apply – за да видите резултата

г) добавяне на нови шаблонни бутони

1) създайте ги във Flash като SWT Generator Template

2) отваря се папката на Dreamweaver и ги поставяте в папката Configuration\Flash Objects\Flash Buttons.

Добавяне на Flash анимация към документите става, при условие че съответната анимация вече е създадена. Този тип анимации не могат да се създават директно в Dreamweaver, трябва да се използва Flash.

1) отворете нов параграф

2) лента Insert, категория Common, меню Media, Flash

3) отваря се диалогов прозорец Select file – избирате файла с разш. .swf. Файлове с разширения .fla .swt не се показват в браузъра, бутон Select

4) отваря се диалогов прозорец Object Tag Accessibility Attributes – в поле Title – въвеждате името на файла Flash анимацията се разполага върху страницата

5) панел Properties

 Loop – поставете отметка за повторение;

 Autoplay – оставете отметка за автоматично възпроизвеждане;

бутон Play – за да гледате анимацията,

бутон Stop – за да спрете анимацията