Наръчник на ученика

”Е - УСЛУГИ

И

УЕБ ПРОГРАМИРАНЕ”

НАРЪЧНИК ЗА УЧЕНИКА

Професионална гимназия по икономика и мениджмънт

„Йордан Захариев”

Кюстендил 2014 г.

Финансиран по Програма за трансгранично сътрудничество между България-Македония 2007—2013, Инструмент за предприсъединителна помощ

2

СЪДЪРЖАНИЕ

УЕБ ДИЗАЙН ..............................................................................................................................................................5

ТЕМА 1: Изисквания за изработване на уеб-сайт ...................................................................................................5

1. Проучване. ....................................................................................................................................................................5

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

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

4. Тестване. ......................................................................................................................................................................5

5. Поддръжка. ..................................................................................................................................................................5

ТЕМА 2: Работно пространство на Dreamweaver 8 ................................................................................................5

1. Стартиране .................................................................................................................................................................5

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

3. Създаване на нова HTML страница: .........................................................................................................................8

4. Записване на страница - File/Save. ...........................................................................................................................8

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

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

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

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

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

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

ТЕМА 3: Проектиране с помощта на таблици. Създаване на таблица. Форматиране на таблици. ............... 10

1. Създаване на таблица ...............................................................................................................................................10

2. Форматиране на клетки - панел Properties ............................................................................................................11

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

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

5. Вложени таблици ......................................................................................................................................................12

ТЕМА 4: Добавяне на съдържание на страница ................................................................................................... 12

1. Импортиране на текст ............................................................................................................................................12

2. Определяне на структурата на съдържанието ....................................................................................................12

3. Създаване на нови редове ..........................................................................................................................................12


3

4. Вмъкване на непрекъсваем интервал .......................................................................................................................13

5. Подравняване на текст ............................................................................................................................................13

6. Форматиране на знаци .............................................................................................................................................13

7. Добавяне на специални знаци ....................................................................................................................................13

8. Хоризонтални линии ..................................................................................................................................................13

9. Автоматично добавяне на дата ..............................................................................................................................13

10. Списъци .....................................................................................................................................................................14

ТЕМА 5: Работа с графика ...................................................................................................................................... 15

1.Поставяне на изображения .......................................................................................................................................15

2. Работа с изображения .............................................................................................................................................17

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

1. Предназначение. .........................................................................................................................................................19

2. Видове. ........................................................................................................................................................................19

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

4. Редактиране на дестинацията на хипервръзка. ....................................................................................................19

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

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

8. Редактиране на котви. .............................................................................................................................................20

9.Определяне на цвят и формат на хипервръзка .......................................................................................................20

ТЕМА 7: Добавяне на флаш анимации и флаш бутони ....................................................................................... 21

1. Създаване на Flashтекст. ........................................................................................................................................21

2. Добавяне на Flash бутон. ..........................................................................................................................................21

3. Поставяне на Flash анимация. .................................................................................................................................22

ТЕМА 8: Създаване на уеб фотоалбум ................................................................................................................... 23

ТЕМА 9: Добавяне на потребителска интерактивност. Вмъкване на роловър изображения ......................... 24

1. Предимства. ...............................................................................................................................................................24

2. Инструменти за добавяне на интерактивни елементи. .......................................................................................24

3. Добавяне на роловър изображениe (rollover). .........................................................................................................24

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

1. Същност. ....................................................................................................................................................................25


4

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

3. Видове. ........................................................................................................................................................................25

5. Създаване на външни стилове. .................................................................................................................................26


5

УЕБ ДИЗАЙН

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

1. Проучване.

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

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

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

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

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

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

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

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

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

сайт.

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

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

б) създаване на структура от файлове и папки – препоръчва се да създадете отделни

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

каскадни набори от стилове (CSS)).

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

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

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

4. Тестване.

Трябва да тествате начина, по който различните браузъри (Microsoft Internet Explorer,

Mozilla Firefox, Opera, Safari) изобразяват страниците, тествайте всички страници и връзки.

5. Поддръжка.

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

съдържание и изображения.

ТЕМА 2: Работно пространство на Dreamweaver 8

1. Стартиране

Ако отваряте Dreamweaver за първи път на компютъра си избирате една от двете опции:

- Designer – интегрира всички прозорци и панели на Dreamweaver в среда,

оптимизирана за визуално създаване на уеб сайтове;

- Coder – пригодена е за програмисти, които работят основно с HTML и др. езици за

уеб програмиране Изберете Designer.

Отваря се началната страница Dreamweaver, която предлага:

- Open a Recent Item – бързи връзки към наскоро използвани документи;


6

- Create New – опции за създаване на нов документ от различни файлови типове;

- Create From Samples – примерни дизайни на страници;

- Dreamweaver Exchange – съдържа ресурси, които можете да използвате за

разширяване на инструментите на програмата.

По подразбиране, началната страница се появява при всяко отваряне на програмата,

докато не поставите отметка в полето Don’t show again. Ако не се появи началната страница,

може да я покажете от Edit/Preferences, General, поставяте отметка на Show start page.

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

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, която Ви превежда през процеса стъпка по стъпка.


7

Advanced дава възможност за конфигуриране на допълнителни опции и настройки и не

включва текстовите обяснения, достъпни в изгледа Basic. Изберете страница Basic.

3. В първото текстово поле въвеждаме име за сайта (то не е видимо за потребителите на

сайта); бутон Next

4. Dreamweaver ще попита дали искате да работите със сървърна технология. Изберете

първата опция; бутон Next.

5. Определете начина на работа с файловете преди да ги публикувате – изберете

първата опция.

6. Посочете папката, в която ще съхранявате локалните файлове – това е локалната

коренова папка, която вече сте създали; бутон Next.

7. Изберете местоположението на отдалечения сървър, където ще бъдат публикувани

файловете Ви:

- None

- Local/Network – за да ги пробвате първо на вашия компютър

- FTP – за да ги публикувате на отдалечен сървър

- Изберете None и натискате бутон Next

8. Преглеждате информацията за сайта и бутон Done.


8

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

1н.) File/New – отваря се диалогов прозорец New Document с 2 страници: General и

Templates. Избирате General и от категорията Basic Page избирате HTML. Натискате бутон

Create.

2н.) От началната страница на Dreamweaver избирате колоната Create New, HTML.

4. Записване на страница - File/Save.

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

елементи, всички пътища към местоположението на елементите в сайта ще бъдат създадени

правилно.

Dreamweaver автоматично добавя разширение HTML към името на файла за HTML

документите. Ако разширението по подразбиране не е HTM, то тогава Edit/Preferences,

категория New Document в текстовото поле Default Extension въвеждате - HTML.

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

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

името), долна черта.

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

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 .


9

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

Съдържат опции за създаването и обработката на съдържанието. Избират се от меню

Window. При кликване върху стрелката пред името на панела се показва или скрива панела.

При кликване върху иконата срещу името на панела се отваря менюто на панела.

Подразбиращите се групи са CSS, Application, Tag Inspector, Files.

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

а) предназначение – използва се за добавяне на съдържание към уеб страници. Може да

се визуализира като меню или като съвкупност от страници.

б) превключване между форматите:

- Ако е под формата на меню, за да го покажете като съвкупност от страници – от

бутон Common/Show as Tabs;

- Ако е съвкупност от страници, за да го покажете като меню – от меню Options в

горния десен ъгъл на панел Insert/Show as menu.

в) опции:

- Common – съдържа най-често използваните елементи на уеб страница, като

хипервръзки, таблици, изображения, шаблони

- Layout – осигурява опции за създаване на таблици, слоеве и фреймове; предлага опции

за изглед на таблици;

- Forms - съдържа всички елементи, които се използват в онлайн формуляри;

- Text – съдържа бутони за форматиране на текст;

- HTML – съдържа бутони за вмъкване на данни (метаданни, ключови думи или

описания) в секцията Head на уеб страница;

- Application – за вмъкване на елементи на динамична уеб страница;

- Flash Elements – съдържа опции за файлове, създадени с Flash;

- Favorites – за създаване на потребителски списък с най-често използваните обекти в

лента Insert.

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

Заглавието на всяка страница се появява в заглавната лента на браузъра и е добре да се

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

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

а) избор на браузър – всеки браузър извежда страниците по различен начин и за това е

добре те да се тестват в различни браузъри:

1) File/Preview in Browser/Edit Browser List;

2) Отваря се диалогов прозорец Preferences, избирате категория Preview in

Browser – показват се браузърите, инсталирани на компютъра. Можете да добавяте браузър


10

към списъка (ако имате повече от 1 браузър на компютъра си) и да премахвате чрез бутоните

(+) и (–).

б) преглед на страница – лента Document, бутон Preview/Debug in Browser (F12).

ТЕМА 3: Проектиране с помощта на таблици. Създаване на таблица.

Форматиране на таблици.

В Dreamweaver те са достъпни в 3 режима: Standard, Layout, Expanded (лента Insert,

категория Layout, бутоните за изглед или View/Тable Mode, избирате режим). В режим

Expanded таблиците изглеждат леко уголемени и с по-дебела рамка. Този режим не отговаря

на начина на показване на таблиците в браузърите.

1. Създаване на таблица

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

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

3н.) Insert/Table;

Отваря се диалогов прозорец – 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 – по този начин информацията в

редовете или колоните със заглавни клетки служи като идентификатор за всяка от клетките в

тях.

Пример: Ако използвате опцията за горен колонтитул Top и въведете Order в най-

горната клетка на първата колона, останалите клетки в нея ще започват с думата Order.

Caption –то се показва на всички потребители и може да бъде подравнено

отгоре, отдолу, отляво или отдясно на таблицата.

Summary – извличението от дадена таблица не се показва на страницата.

Обяснява предназначението и контекста на таблицата.


11

Когато е избрана една таблица се показват хоризонтални и вертикални зелени линии.

Това са ширината и височината на колоните и редовете. Тези линии изчезват, когато щракнете

извън таблицата. Можете да активирате и деактивирате визуалната помощ за таблицата от

View/Visual Aids/Table Widths.

За преминаване от клетка в клетка – Tab. При въвеждане на по-дълъг текст, таблицата

автоматично променя ширината на съответните колони, така че да се събере текста. Най-

горният ред е заглавен и въведеният в него текст се центрира и е удебелен.

2. Форматиране на клетки - панел Properties

а) фон на клетка – панел 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


12

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

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

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

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

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

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

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

5. Вложени таблици

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

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

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

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

ТЕМА 4: Добавяне на съдържание на страница

1. Импортиране на текст

1н.) чрез директно въвеждане в прозореца на Dreamweaver

2н.) чрез копиране от друго приложение

3н.) чрез отваряне на HTML документ

4н.) чрез отваряне текстови файлове директно в Dreamweaver

Dreamweaver може да отваря файлове, създадени с текстообработващи програми, стига

да са записани като ASCII текстови файлове.

Текстовите файлове (.txt) винаги се отварят в нов прозорец, чрез изгледа Code.

За да добавите текст от ASCII файлове правилно, запазвайки формата на редовете, трябва да

промените настройката Dreamweaver Line Break Type:

1) Edit/Preferences

2) Отваря се диалогов прозорец Preferences, списък Category, Code Format

3) Line Break Type - CR LF

2. Определяне на структурата на съдържанието

В HTML има 6 нива заглавия. Ниво 1 с най-едър шрифт, ниво 6 с най-малък. При

форматиране на текстов блок като заглавие, автоматично се създава разстояние около него,

което може да се променя само чрез CSS:

1) маркираме заглавието 2) от панел Proрerties, меню Format, Heading 1- 6

3. Създаване на нови редове

За да създадете нов ред, преди който няма празно пространство (единичен нов ред),

трябва да използвате:

1н.) обикновен нов ред (line break) – Shift + Enter – това е нов ред, а не нов параграф и

затова между тях няма допълнително разстояние;

2н.) Insert/HTML/Special Character/Line break;

3н.) лента Insert, страница Text, меню Characters, Line break;


13

4. Вмъкване на непрекъсваем интервал

Той се използва само за поставяне на място между знакове, думи или др. елементи,

които не трябва да бъдат разделени едни от други, като математически уравнения, имена или

дати.

Поставяме маркера между думите

1н.) Ctrl + Shift + Space

2н.) Insert/HTML/Special Characters/Non-breaking Space;

3н.) лента Insert, страница Text, меню Characters , Non-breaking Space;

5. Подравняване на текст

Има пет възможности за подравняване: Default (не е указано конкретно подравняване),

Align Left (наляво), Align Center (в центъра), Align Right (надясно) и Justify от панел Proрerties

Най-добрият начин за подравняване на текст и изображения се предлага от CSS.

6. Форматиране на знаци

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

2) панел Proрerties, бутони B, I или Text/Style

Teletype – показва текста с шрифт с постоянна ширина на буквите

7. Добавяне на специални знаци

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

HTML кодове или алтернативни клавишни команди.

лента Insert, страница Text, меню Characters, избираме символа

Пример: © - информация за запазени авторски права

Меню Characters не е пълно. За повече символи – Insert/HTML Special Characters/Other

8. Хоризонтални линии

а) добавяне - Хоризонталните линии (horizontal ruler) пресичат цялата страница и

разделят визуално секциите.

1н.) лента Insert, страница HTML, бутон Horizontal rule

2н.) Insert/HTML/Horizontal rule

Хоризонталната линия има фиксирано разстояние под и над нея, което може да се

промени само чрез CSS.

б) свойства на хоризонталната линия - показват се в панел Proрerties след като е

маркирана.

W – ширина

H – височина

Pixels – мерни единици (пиксели, проценти)

Shading – сянка

Align – подравняване

Class – прилагане на CSS стилове.

9. Автоматично добавяне на дата

Dreamweaver позволява поставянето на дата и час за следене кога за последен път

страницата е модифицирана. Програмата ги актуализира автоматично при записване на

страницата. Тази дата не е динамична и не се променя спрямо момента на достъп до

страницата.


14

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

2н.) Insert/Date – отваря се диалогов прозорец:

Day format – избирате деня

Date format – избирате формата на датата

Time format – избирате формата на времето

Update automatically on save – поставяте отметка за да се обновява датата

автоматично при записване на страницата, тогава форматът й може да се

променя по всяко време, като:

1) изберете датата

2) панел Proрerties, Edit date format – отваря се диалогов прозорец Insert

date – направете промените; OK

10. Списъци

В Dreamweaver има три вида списъци: номерирани (ordered), неномерирни (unordered) и

списъци с дефиниции (definition lists).

1. Номерирани списъци

1н.) панел Proрerties, бутон Ordered List

2н.) Text/List/Ordered List

2.Неномерирани списъци (списъци с водачи)

Могат да бъдат с точки или квадрати.

1н.) панел Proрerties, бутон Unordered List

2н.) Text/List/Unordered List

3. Допълнителни възможности

1) кликате в списъка

2) панел Proрerties, бутон List Item… или Text/List/Proрerties

3) отваря се диалогов прозорец List Proрerties:

поле List Type – тип на списъка

поле Style – стил на списъка

поле New Style – вид на отделните елементи на списъка (вместо на целия)

поле Reset Count to – смяна на номерацията на списъка, като се започне от

реда, на който се намира маркера

4. Списъци с дефиниции

Съставени са от термини и техните дефиниции. Дефинираната дума (терминът) е

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

Text/List/Definition List

5. Влагане на списъци

Вложените списъци могат да имат същия тип като родителския си или да бъдат

различни. При влагането на номерирани списъци вложените позиции получават нова

номерация. В неномериран списък водачите изглеждат по др.начин.

1) маркирайте вложения списък ; 2) бутон Text Indent


15

ТЕМА 5: Работа с графика

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

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


16

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) лента Insert, категория Common, меню Images - изберете Image (или Insert/Image)

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

Preview images – преглед на изображението по време на търсене

Look in – избор на папка за търсене на изображение

Files of Type – използва се за показване само на определени видове файлове

File name – изписва се името на селектирания файл

URL – съдържа пътя, който ще бъде използван от документа за достъп до

изображението

Relative to: Document (по подразбиране) – относителен спрямо документа път;

отдясно се появява името на документа, в който вмъквате изображението. Site Root -

относителен спрямо корена на сайта път; отдясно се появява името на сайта

Опции за динамични сайтове:

○ File System – подразбиращ се метод за избор на файл за сайт, който не използва

сървърна технология

○ Data Sources – документът се създава на приложен сървър (за динамични сайтове)

3) OK


17

4) в диалогов прозорец Image Tag Accessibility Attributes в поле Alternate Text въведете

алтернативен текст; OK Aлтернативният текст се появявя, ако потребителите забранят

изобразяването на изображения, ако браузърите им по принцип не могат да визуализират

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

потребителя не може да види изображението. Alt текст трябва да е текстовия еквивалент на

изображението – трябва да описва функцията му. Този текст може да се променя от панел

Properties при селектирано изображение.

2. Работа с изображения

1. Оразмеряване и опресняване на изображения

1н.) селектирайте изображението и в панел Properties променете стойностите на

полетата W и H; натиснете Enter или щракнете в прозореца Document.

Новите атрибути за височина и ширина в тага img правят изображението да изглежда по-

малко (по-голямо), без реално размерите му да са намалявани (увеличавани). Размерът на

файла в панел Properties не се променя.

2н.) щракнете върху някой от селектираните манипулатори на изображението и го

издърпайте. За да се запазят пропорциите при оразмеряване задръжте клавиша Shift и

издърпайте манипулатора в долния десен ъгъл.

3н.) чрез програма за редактиране на изображения (например Macromedia Fireworks или

Adobe Photoshop) – така се получават възможно най-малки файлове.

За да върнете оригиналните размери на изображението натиснете бутон Reset Image To

Original Size от панел Properties (иконата му е за опресняване и се намира в пресечната точка

на линиите на полетата W и H).

Ако се налага да използвате много големи изображения или изображения от други

сървъри може да дефинирате изображение с по-ниско качество (low source изображение),

което се появява първо. Пълното изображение се появява на негово място след завършване на

свалянето му. Low source изображението играе ролята на диалогов прозорец и сe „зарежда се”

и се дефинира в панел Properties, поле low src.

2. Позициониране на изображения чрез CSS

Пример: Подравняване на изображение с левия ръб, а текста да се обвива около дясната

му част

1) панел CSS Styles, бутонNew CSS Rule

2) ○ Class Selector Type; поле Name – въведете име за CSS файл; OK

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

Всички елементи в документа се разглеждат като правоъгълни области, наречени кутии. В

CSS тази концепция се използва за контролиране на външния вид на обектите,

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

други кутии.

От меню float (плаващо) изберете left; OK

4) в прозореца Document селектирайте желаното изображение

5) панел Properties, меню Class – изберете името на външния файл от 2)

3. Даване на имена на изображение

Давайте кратки имена с малки букви и без интервали и специални знаци. Това име е

само вътрешно.

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


18

2) панел Properties, в текстовото поле за име (в горния ляв ъгъл на панела, точно

под размера на изображението) въведете името.

4. Поставяне на рамка около изображение

1н.) чрез CSS

1) ако имате създаден CSS за работа с изображението, то от панел CSS Style

списък All Rules го селектирайте и натиснете бутонEdit Style; ако нямате – създайте

външен стил (правило) за работа с изображението

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

желаните настройки за Style, Width, Color; OK

2н.) чрез атрибут border на тага img

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

2) панел Properties, поле Border – въведете желаната дебелина

Ако изображението е едновременно и препратка, цветът на рамката ще бъде

подразбиращият се цвят Link Color (освен ако няма CSS стил).

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

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

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 – въведете желаната стойност

6. Запазване на място за изображение

Ако не разполагате с финалното изображение по време на разработката може да

използвате заместващо изображение (placeholder). То запазва място и показва приблизително

как ще стои финалното изображение върху страницата в комбинация с другите елементи.

1) поставете курсора на желаното място;

2) лента Insert, категория Common, меню Images, опция Image Placeholder

3) отваря се диалогов прозорец Image Placeholder – направете желаните настройки

(Name, Width, Height, Color, Alternate text); OK

Запазеното място се появява в прозореца Document. То е запълнено с избрания цвят и в

него са изписани името и размерите на изображението. В браузър – на мястото на

заместващото изображение има икона за липсващо изображение + алт.текст в правоъгълник с

размерите и цвета, дадени в диалогов прозорец.

7. Замяна на заместващо изображение (или на едно изображение с друго)

1) в прозореца Document щракнете 2 пъти върху заместващото изображение

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

3) Изображението заменя запазеното място в прозореца Document. Името и алт.текст

не се пренасят върху изображението.


19

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

свързване към именувани котви

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

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

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

2. Видове.

а) относителни – те са в границите на един сайт и водят до файлове в рамките на

неговите папки. Използвате само тази част от пътя, която е различна за текущия и свързания с

хипервръзката документ.

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

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

4. Редактиране на дестинацията на хипервръзка.

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

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

5. Именувана котва (anchor). Място в страницата, до което отвежда дадена хипервръзкa.

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

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


20

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 и

се посочва желаната котва във втория файл.

8. Редактиране на котви.

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

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

9.Определяне на цвят и формат на хипервръзка

Ако не бъдат посочени цветове на хипервръзките, при зареждането на страницата ще се

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

от вида му. Цветовете на хипервръзките трябва да контрастират (но не прекалено) с фона и

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

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

2) Настройваме свойствата на хипервръзките

Link Font – (same as page font) – хипервръзките наследяват свойствата на

стиловете, които ще създадете за документите

Link Color – цвят на хипервръзката, преди да бъде посетена (по подразбиране е

синия цвят)

Visited Links – цвят, който придобива хипервръзката след като бъде посетена (по

подразбиране е виолетов цвят)

Rollover Links – цвят, който придобива хипервръзката, когато върху нея е

позициониран курсорът на мишката Active Links – цвета на хипервръзката в момента на

щракване с мишката

В текстовите полета за цвят на хипервръзката се въвеждат 16-тичните стойности на

желаните цветове. Може да се щракне в цветното поле, разположено вляво от текстовото поле

– отваря се палитра с разнообразни цветови нюанси (бутон - отваря меню с други видове

палитри)


21

Underline Style: - стил на подчертаване:

Always Underline - винаги

Never Underline - никога

Show Underline Only on Rollover – само при попадане на курсора над

хипервръзката

Underline on Rollover – скриване на подчертаващата линия при преминаване на

курсора.

3) OK

ТЕМА 7: Добавяне на флаш анимации и флаш бутони

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–задавидитерезултата

2. Добавяне на Flash бутон.

Flash графиката е векторна, размерът на файловете е много малък и позволява по-

бързото им зареждане в сравнение с растерните изображения. Не е необходимо да разполагате

с Flash, за да създадете негови бутони.


22

а) състояние на 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.

3. Поставяне на Flash анимация.

Добавяне на 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 – за да спрете анимацията


23

ТЕМА 8: Създаване на уеб фотоалбум

Как да си направите фотоалбум с Dreamweaver, който ще можете да използвате за

много неща. Всичко от просто показване на семейни снимки на приятелите си из нета до

каталози и т.н. За целта на тази галерия трябва всяка снимка да си има Thumbnail, т.е. доста

смален вариант на снимката, който ще стой преди истинското изображение и ще води към

него. Първо трябва да си изберете всички снимки, които ще слагате в галерията, сложете в

една папка. Задръжте вашите снимки големи, Fireworks ще се погрижи затова да ги смали и

превърне в Thumbnails. Също така ще трябва да отворите Fireworks преди да започнете...

1) Отворете си някоя от вашите страници в Dreamweaver.

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

фотоалбум, или както ви дойде на ум.

3) Сега се пренасяме в Dreamweaver , отидете на Commands --> Create Web Photo

Album. Ще се появи една кутия, с много опции и настройки вътре в нея; Ето лист, със

значението на всяка една от тях:

Photo Album Title - Тук попълнете името на вашия уеб албум.

Subheading Info - Това поле не е задължително, но каквото напишете в него, това

и ще се появи в уголемената снимка.

Other Info - Каквото напишете тук, това и ще се появи на страницата на

уголемената снимка.

Source Images Folder - Тук натиснете Browse и посочете папката със всички

снимки.

Destination Folder - Тази папка е специална, споменахме за нея в 2-ра стъпка.

Така, че кликнете Browse и я посочете

Thumbnail Size - Това поле ви позволява да изберете размера на thumbnail-ите на

страницата, така че изберете желания от вас размер (Препоръка: 100 x 100 е най-добрия

размер)

Columns - Ето го и полето с колоните, тук попълнете желаната от вас цифра ,

затова колко колони искате да има с Thumbnails. (Препоръка: 4 или 5 е добро число)

Thumbnail Format - Това поле тук ви позволява да използвате JPEG или GIF за

вашите Thumbnails.

Photo Format - Това поле ви дава право да използвате JPEG или GIF за вашите

големи снимки.

Веднъж свършейки с тези настройки, натиснете Ок. Сега Fireworks създава онези малки

снимчици, за които говорихме в началото и ги нарекохме Thumbnails. Това ще отнеме няколко

минути, в зависимост от това колко снимки сте сложили в папката и какъв е бил техния

размер. Веднъж Fireworks да си свърши работата и вие вече може да видите вашия уеб албум.

4) Нов прозорец ще се появи на вашата страница с Thumbnails. Тази страница ще се

казва index.html. Сега ще трябва да поставите вашия шаблон /template/ на страницата с

Thumbnails-ите.

5) Под името на вашия албум ще има още три папки: Thumbnails, Images, and Pages.

- Thumbnails - всички малки иконки са в тази папка.

- Images - всички снимки (оригиналните им размери) са там.

- Pages - всички страници, които съдържат линковете към Thumbnails.


24

ТЕМА 9: Добавяне на потребителска интерактивност. Вмъкване на роловър

изображения

Интерактивните елементи и обратната връзка с потрбителя са важни компоненти на

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

комуникационен процес.

1. Предимства.

а) по-добро възприятие на целта и съдържанието на сайта;

б) по-лесна и по-директна навигация до страниците му.

2. Инструменти за добавяне на интерактивни елементи.

а) динамични страници и използване на БД;

б) Macromedia Flash;

в) Quick Time Virtual Reality (QTVR) – формат, поддържащ 360-градусови панорамни

изгледи и интерактивни компоненти;

г) JavaScript – използва се за скриптове, изпълнявани от браузъра на клиента;

д) Java Server Pages (JSP) – скриптове, които се обработват от сървъра и резултатът се

изпраща на потребителя;

е) поведения на Dreamweaver – подиалогов прозорец рограми с код на JavaScript, които

лесно можете да включите в уебсайт.

Поведението е комбинация от действие или серия от действия и събитие.

Действието (action) е това, което се извършва в резултат от намесата на потребителя

(например размяна на едно изображение с друго).

Събитието (event) е това, което предизвиква възникването на дейсвието (например

преместване на мишката над изображение или натискане на бутон).

- предварително дефинирани поведения

- добавяне на допълнителни поведения

- създаване на собствени поведения

3. Добавяне на роловър изображениe (rollover).

Изображениe, което се променя, когато потребителят премести курсора на мишката над

него. Използват се 2 изображения, поставени на едно и също място.

1) лента Insert, категория Common, меню Images, бутон Rollover Image (или

Insert/Interactive Image/Rollover Image)

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

Image Name – име на изображение (по подразбиране имената са Image1, Image2,

…..). Не използвайте интервали и специални знаци и не започвайте името с число.

Бутони Browse – изберете файлове за оригиналното (първото) и алтернативното

(второто) изображение. Необходимо е двете изображения да имат еднакви размери.

Alternate Text – въведете Alt текст

Preload Rollover Image – предизвиква зареждане на второто изображение още

при зареждане на страницата в браузъра. Ако тази опция не е включена второто изображение

няма да се зареди, докато потребителя не премести курсора на мишката над първото.


25

When Click Go to URL – чрез бутон Browse намерете файла, с който ще се

свърже роловър изображениeто. Този файл се появява в поле Link на панел Properties при

селектиране на изображението.

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

външни стилове

1. Същност.

а) стил (Style) – нарича се още правило (rule) – набор от свойства, които дефинират и

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

определят как да изобразят елемента;

б) набор от стилове (Style Sheets) – група стилове;

в) каскадни (Cascading) – отнасят се до подредената последователност и приоритет на

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

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

Контролират форматирането, външния вид и разположението на елементите в уеб

страниците. CSS се поддържа от браузъри с версии 4.0 и по-нови. Кодът за CSS стиловете се

поставя в тага head на HTML страницата.

3. Видове.

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

се форматира само една страница). Dreamweaver го създава автоматично при форматиране на

текста или самата страница.

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

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

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

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

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

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


26

б) смяна на шрифта – Page Font Комбинациите от шрифтове в менюто Page Font указват

на браузъра как да изобразява текста. Ако първият от групата не бъде намерен, браузърът се

опитва да използва втория. Ако и той не е наличен – използва третия. Ако нито един от

изписаните не бъде намерен браузърът използва собствения си подразбиращ се.

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

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

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

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

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

А) Създаване на стил за конкретен таг

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 за

дефиниране на параграф


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

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



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

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

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

1) Поставете курсора в 1-я ред на списъка. В Tag selector щракнете върху ul, ol (това са

HTML тагове за целия списък; li - отнася се само за отделни позиции в списъка)


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

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



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

направете желаните настройки; OK


27

Този наръчник на ученика е създаден в рамките на проект „Познание

по Е-услуги за социално сближаване”, финансиран от Програмата за

трансгранично сътрудничество ИПА България – Македония, CCI number

2007CB16IPO007. Цялата отговорност за съдържанието на Наръчника е на

партнъорите по проекта и при никакви обстоятелства не може да се счита,

че този документ ангажира и отразява официално становище на

Европейския съюз и Управляващия орган.”