Наръчник на учетеля

”Уеб програмиране и
интернет обучителни
методи”
НАРЪЧНИК ЗА УЧИТЕЛЯ
Професионална гимназия по икономика и мениджмънт
„Йордан Захариев”
Кюстендил 2014 г.

Финансиран по Програма за трансгранично сътрудничество между България-Македония 2007—
2013, Инструмент за предприсъединителна помощ
2
СЪДЪРЖАНИЕ
HTML, УЕБ ДИЗАЙН и CSS
HTML ...........................................................................................................................................................................5
ТЕМА 1: Същност на езика HTML...........................................................................................................................5
Същност на езика HTML ................................................................................................................................................5
Създаване на HTML страници .......................................................................................................................................5
Структура на HTML документ .....................................................................................................................................5
HTML eлементи в секция BODY.....................................................................................................................................6
УЕБ ДИЗАЙН............................................................................................................................................................13
ТЕМА 2: Изисквания за изработване на уеб-сайт.................................................................................................13
1. Проучване. ..................................................................................................................................................................13
2. Планиране и структура............................................................................................................................................13
3. Разработка и дизайн на сайта.................................................................................................................................13
4. Тестване.....................................................................................................................................................................13
5. Поддръжка.................................................................................................................................................................13
ТЕМА 3: Работно пространство на Dreamweaver 8..............................................................................................13
1. Стартиране...............................................................................................................................................................13
2. Дефиниране на локален сайт....................................................................................................................................14
3. Създаване на нова HTML страница: .......................................................................................................................16
4. Записване на страница - File/Save. .........................................................................................................................16
5. Правила за именуване на файлове............................................................................................................................16
6. Описание на работната среда.................................................................................................................................16
7. Работа с панели и документи..................................................................................................................................17
8. Лента за вмъкване (Insert)........................................................................................................................................17
9. Озаглавяване на страница........................................................................................................................................17
10. Предварителен преглед на страница ....................................................................................................................17
ТЕМА 4: Проектиране с помощта на таблици. Създаване на таблица. Форматиране на таблици. ...............18
1. Създаване на таблица...............................................................................................................................................18

3
2. Форматиране на клетки - панел Properties ............................................................................................................19
3. Сортиране на таблица .............................................................................................................................................19
4. Модифициране на таблица.......................................................................................................................................19
5. Вложени таблици......................................................................................................................................................20
ТЕМА 5: Добавяне на съдържание на страница ...................................................................................................20
1. Импортиране на текст ............................................................................................................................................20
2. Определяне на структурата на съдържанието....................................................................................................20
3. Създаване на нови редове..........................................................................................................................................20
4. Вмъкване на непрекъсваем интервал.......................................................................................................................21
5. Подравняване на текст ............................................................................................................................................21
6. Форматиране на знаци .............................................................................................................................................21
7. Добавяне на специални знаци....................................................................................................................................21
8. Хоризонтални линии..................................................................................................................................................21
9. Автоматично добавяне на дата..............................................................................................................................21
10. Списъци.....................................................................................................................................................................22
ТЕМА 6: Работа с графика ......................................................................................................................................23
1.Поставяне на изображения.......................................................................................................................................23
2. Работа с изображения .............................................................................................................................................25
3. Редактиране на изображения..................................................................................................................................27
5. Създаване на графични препратки и карти на изображения...............................................................................28
ТЕМА 7: Създаване на хипертекстови и графични връзки. Вмъкване и свързване към именувани котви .29
1. Предназначение..........................................................................................................................................................29
2. Видове. ........................................................................................................................................................................29
3. Създаване на хипервръзки.........................................................................................................................................29
4. Редактиране на дестинацията на хипервръзка.....................................................................................................29
6. Добавяне на котва и насочване на вътрешна хипервръзкa към нея. ....................................................................29
7. Добавяне на котва и насочване на външна хипервръзкa към нея..........................................................................30
8. Редактиране на котви. .............................................................................................................................................30
9.Определяне на цвят и формат на хипервръзка .......................................................................................................30
ТЕМА 8: Добавяне на флаш анимации и флаш бутони .......................................................................................31

4
1. Създаване на Flashтекст. ........................................................................................................................................31
2. Добавяне на Flash бутон...........................................................................................................................................31
3. Поставяне на Flash анимация..................................................................................................................................32
ТЕМА 9: Създаване на уеб фотоалбум ...................................................................................................................33
ТЕМА 10: Добавяне на потребителска интерактивност. Вмъкване на роловър изображения .......................34
1. Предимства................................................................................................................................................................34
2. Инструменти за добавяне на интерактивни елементи........................................................................................34
3. Добавяне на роловър изображениe (rollover)..........................................................................................................34
ТЕМА 11: Разработване на набори от стилове. Създаване на вътрешни и външни стилове ..........................35
1. Същност.....................................................................................................................................................................35
2. Предназначение..........................................................................................................................................................35
3. Видове. ........................................................................................................................................................................35
5. Създаване на външни стилове..................................................................................................................................36
CSS..............................................................................................................................................................................37
ТЕМА 12: Същност на езика CSS (Cascading Style Sheets)...................................................................................37
ТЕМА 13: Задаване на стилове на HTML документ.............................................................................................41

5
HTML
ТЕМА 1: Същност на езика HTML
Същност на езика HTML
HTML (съкращение от термина на английски: HyperText Markup Language, в превод
„език за маркиране на хипертекст“) е основният маркиращ език за описание и дизайн на уеб
страници. HTML е стандарт в Интернет, а правилата се определят от международния
консорциум W3C. Текущата версия на стандарта е HTML 5.0 (от 28 октомври 2014 г.)
Описанието на документа става чрез специални елементи, наречени HTML елементи
или маркери, които се състоят от етикети или тагове (HTML tags) и ъглови скоби (като
например елемента <html>). HTML елементите са основната градивна единица на уеб
страниците. Чрез тях се оформят отделните части от текста на една уеб страница, като
заглавия, цитати, раздели, хипертекстови препратки и т.н. Най-често HTML елементите са
групирани по двойки <h1> и </h1>.
В повечето случаи HTML кодът е написан в текстови файлове и се хоства на сървъри,
свързани към Интернет. Тези файлове съдържат текстово съдържание с маркери – инструкции
за браузъра за това как да се показва текстът. Предназначението на уеб браузърите е да могат
да прочетат HTML документите и да ги превърнат в уеб страници. Браузърите не показват
HTML таговете, а ги използват, за да интерпретират съдържанието на страницата.
Основното предимство на HTML е, че документите, оформени по този начин, могат да
се разглеждат на различни устройства, а не само на екрана. Документът може да бъде
правилно оформен и върху монитора на персонален компютър, и върху миниатюрния дисплей
на пейджър или мобилен телефон.
Първото публично достъпно описание на HTML е документ, наречен “HTML tags”,
първо посочен в Интернет от Тим Бърнърс – Лий в края на 1991 г. Той описва 18 елемента,
включващи начална, сравнително опростена конструкция на HTML.
Създаване на HTML страници
Създаването на HTML-базирана уеб страница може да се извърши с помощта на
обикновен текстов редактор. Този начин изисква познаване на HTML тагове, така че те да
бъдат интегрирани в текста, който ще се показва на страницата. Също така, често срещани са
по-приятелски настроените инструменти, които не изискват от потребителя да притежава
познания по HTML, което му позволява да създаде страница по метода WYSIWYG. Основен
инструмент за тази цел е текстообработваща програма Word, която позволява да запазите
документ като HTML и да го редактирате. Специализирани инструменти за създаване на
HTML страници са Microsoft, FrontPage, Macromedia Dreamweaver, Notepad, Notepad++,
Sublime Text и други.
Структура на HTML документ
Стандартът HTML специфицира елементи, които разделят документа на описателна
(дескриптивна) и функционална (изпълнима) части. Форматът на един HTML документ
еследният:

6
 Описателна част
HTML е елемент, указващ на WWW клиента, че следва код с HTML. Документът
започва с <HTML>и завършва с </HTML>. Съдържанието му се записва във файл с
разширение .html или .htm за операционни системи с формат за имената на файловете.
HEAD е заглавен елемент, съдържащ информация за идентифициране на HTML
документа. Негови елементи могат да бъдат <TITLE>, <BASE>, <META>. Заглавният елемент
следва <HTML> елемента и предхожда <BODY> елемента, където се разполага
съдържателната част на документа. Елементът се отваря с <HEAD> и се затваря с </HEAD>.
TITLE е част от елемента HEAD. Елементът се отваря с <TITLE> и се затваря с
</TITLE>. Указаното заглавие на документ се появява при интерпретация от WWW клиент в
заглавната линия на неговия прозорец. Текстът на заглавието не се включва и не се изобразява
в полето на документа, но неговата функция не трябва да се пренебрегва.
 Изпълнима част
BODY е втората, най-дълга и съдържателна част на един HTML документ. Това е
тялото на документа, където се разполага изобразяваната от WWW клиента информация.
Елементът се отваря с <BODY> непосредствено след </HEAD> и се затваря с </BODY >
преди </HTML>. Заглавната част на тялото допуска употребата на атрибути за определяне на
цялостния вид на документа. Общият вид на елемента е:
<HTML> - “НАЧАЛО НА ДОКУМЕНТА”;
<HEAD> - “ЗАГЛАВЕН ЕТИКЕТ”;
<TITLE>My first web page </TITLE>
</HEAD>
<BODY> - “СЪЩИНСКА ЧАСТ”;
Learning HTML is fun!
</BODY>
</HTML> - “КРАЙ НА ДОКУМЕНТА”.
HTML eлементи в секция BODY
1. Форматиране на параграф - <P> - е команда за начало на нов параграф.
Увеличаване на разстоянието между параграфи може да стане с използване на празна
дефиниция на параграф като между <P> и </P> не се поставя текст, а специален символ
( ). Командата за начало на параграф се използва в два формата - съкратен и пълен,
където се подържат атрибути за подравняване на текста - ALIGN.
Съкратен запис: <P>Text</P>
Разширен запис: <P ALIGN=”left”|”center”|”right”> Text </P>
2. Преминаване на нов ред - <BR> - Елементът осигурява нормално междуредие в
рамките на параграф или списък когато текстът трябва да се разположи на повече
самостоятелни редове.

7
3. Коментар - <!> -  е елемент за въвеждане на коментар в кода на HTML
документа, който няма да бъдат интерпретирани и съответно изобразяван в полето на
документа.
4. Цветове - rrbbgg определя цвят на изобразявания атрибут от RGB цветната палитра,
зададен като шестнадесетични цифри предхождани от символа "#" или с текст, отговарящ на
английското наименование на цвета .
- rr - шестнадесетичен байт, специфициращ червената компонента със значения от 00 до
FF.
- bb - шестнадесетичен байт, специфициращ зелената компонента със значения от 00 до FF.
- gg - шестнадесетичен байт, специфициращ синята компонента със значения от 00 до FF.
5. Хоризонтална линия - <HR> е команда за извеждане на хоризонтална линия в
текущата позиция. Дебелината и формата на изобразяване на линията се контролира от
параметри. При повечето WWW клиенти тази линия е съпроводена от празен ред преди и след
линията. Командата е полезна за разделяне на документа на отделни части или глави.
Aтрибути (параметри) за подравняване:
 ALIGN=”LEFT”|”RIGHT”|”CENTER” - определя хоризонталното подравняване на
линията - ляво|дясно|центрирано.
 SIZE=n - определя дебелината на линията в зависимост от стойността на n, зададена в
пиксели.
 WIDTH=n|n% - задава дължината на линията определена от стойността на n, зададена в
пиксели или проценти.
 CO въвеждане на коментар LOR ="#rrggbb" - задава цвета на линията.
6. Форматиране на текст - символи
- Таг за удебелен текст - <B> …</B>
- Таг за подчертаване - <U> …</U>
- Таг - <I> … </I>
- <MARQUEE>…</MARQUEE> - движещ се текст
- <SUB>… </SUB> - долен индекс
- <SUP> … <SUP> - горен индекс
- <FONT> …</FONT> - задаване на цвят, размер и шрифт в текста
• цвят COLOR=“# rrggbb”
• размер SIZE= _ ( една от цифрите 1,2,3,4,5,6,7);
• шрифт FACE= “Tahoma” ( име на шрифта).
Пример: <FONT COLOR =“#CC00FF” SIZE=”5” FACE=“Dauphin”> текст </FONT>
<I>Learning HTML is fun! </I>
7. Заглавия - (headings), големина на буквите. Таговете от <h1> до <h6> дефинират
заглавия в HTML документа. <h1> дефинира най-важното заглавие. <h6> дефинира най-
маловажното заглавие.
<h1>Заглавие 1</h1>
………………………………
<h6>Подзаглавие 6</h6>

8
8. Параметри на <BODY> Заглавната част на тялото допуска употребата на атрибути
за определяне на цялостния вид на документа. Общият вид на елемента е:
<BODY ALINK=”#rrbbgg” BACKGROUND=URL BGCOLOR=”#rrbbgg” LINK=”#rrbbgg”
TEXT=”#rrbbgg” VLINK=”#rrbbgg”>
• LINK - определя цвета на хипервръзка;
• ALINK- определя цвета на активирана хипервръзка;
• VLINK- определя цвета на избирана вече хипервръзка;
• BACKGROUND - определя URL адреса на графичен файл (gif, jpg или png), използван
за тапет при изобразяване на документа (фон на документа);
• BGCOLOR - определя цвета на фона в полето на документа;
• TEXT - определя цвета на буквите в текста;
• BGPROPERTIES = ”fixed” – параметър за подвижност;
• rrbbgg - определя цвят на изобразявания атрибут от RGB цветната палитра.
9. Списъци
- Подредени списъци - Подредените списъци започват с тага <ol>, а всеки елемент на
списъка – с тага <li>:
-
Неподредени списъци - При тези списъци номерацията не е с цифри или букви, а с
кръгли точки. Всеки списък започва с тага <ul>, а всеки елемент на списъка – с тага <li>:
<ul>
<li>Пържени картофки</li>
<li>Шкембе</li>
</ul>
<ul type=”disk” / =”square” / ”circle”>
</ul>
 Пържени картофки
 Шкембе
<ol>
<li>Биричка</li>
<li>Още една биричка</li>
</ol>
1. Биричка
2. Още една биричка
Атрибутът type задава вида на маркерите
(букви или цифри), например 1, a, A, i, I:
<ol type="I">
<li>Едно</li>
<li>Две</li>
<li>Три</li>
</ol>
I. Едно
II. Две
III. Три

9
10. Таблици - За създаването на една таблица в HTML се използват едновременно три
тага, като е недопустимо пропускането на някой от тях или използването им в ред, различен от
показания:
<TABLE> … </TABLE> - указва начало и края за на таблица;
<TR> … </TR> - table row – указва начало и края на ред от таблицата;
<TD> … </TD> - table date – указва начало и края на поле (клетка) от таблицата, което
е в рамките на определения с помощта на <TR> ред;
<TH> … </TH>- използува се за създаване на клетки-заглавия – центрира съдържанието
на клетката и я форматира с получерен шрифт.
<table border="1">
<tr>
<th>Колона 1</th>
</tr>
<tr>
<td>ред 1, колона 1</td>
</tr>
<tr>
</tr>
</table>
Колона 1 Колона 2 Колона 3
ред 1, колона 1 ред 1, колона 2 ред 1, колона 3
ред 2, колона 1 ред 2, колона 2 ред 2, колона 3
Параметрите на таблицата задават общия вид на таблицата; задават се в тага
<TABLE>. Параметрите, зададени в отделните полета не трябва да са в противоречие един с
друг или с общата широчина на таблицата:
- WIDTH - задава широчина на таблицата, зададена абсолютно (в пиксели, например
WIDTH=100) или относително (спрямо широчината на екрана, например WIDTH=80%);
- HEIGHT - задава височина на таблицата, зададена абсолютно (в пиксели, например
HEIGHT=100);
- BGCOLOR - задава цвета за фон на таблицата, например BGCOLOR=#0000FF;
- BORDER - определя дебелината на рамката в точки (пиксели), например BORDER=5;
по подразбиране е 2 пиксела; невидима рамка се създава чрез BORDER=0; препоръчва се
създаване на рамка докато се конструира таблицата, след което можете да я премахнете;
- BORDERCOLOR - оцветява рамката; шестнадесетично представяне на желания цвят;
- BORDERCOLORDARK="#rrggbb" - оцветява по-тъмните части на рамката
(горните и леви граници на клетката, долната и дясна граница на таблицата);

10
- BORDERCOLORLIGHT="#rrggbb" - оцветява по-светлите части на рамката
(долните и десни граници на клетката, горните и леви граници на самата таблица);
- BACKGROUND - използване на фоново изображение за таблица или клетка; не се
препоръчва, например BACKGROUND="image.gif";
- ALIGN - определя позициониране (подравняване) на таблицата или съдържанието на
полето; възможни стойности: left, center, right;
- VALIGN - определя вертикално позициониране на таблицата или съдържанието на
полето; възможни стойности: top, center, bottom;
- HSPACE - добавя разстояние едновременно от лявата и дясната страна на таблицата;
например HSPACE=20 (в пиксели);
- VSPACE - добавя разстояние едновременно от горната и долната страна на таблицата
(в пиксели);
- CELLPADDING - определя разстоянието в точки (пиксели) от рамката на полето до
съдържанието в него, т.е. задава широчината на празното поле, например CELLPADDING=3;
- CELLSPACING - определя разстоянието в точки (пиксели) между отделните полета
(съответно между редовете и колоните) на таблицата, например CELLSPACING=3.
Ако не зададете параметрите CELLPADDING и CELLSPACING, техните стойности по
подразбиране са "1", а не "0", така че ако не искате да имате разстояние между клетките и
ограничаване на разстоянието между съдържанието на клетката и ръба на клетката трябва
винаги да пишете CELLPADDING="0" CELLSPACING="0".
- <CAPTION> … </ CAPTION > - Заглавия в таблица
Обединяване на редове и колони – обединяване на съседни полета.
Параметри в тага <TD> и <TH> - определят броя на колоните или редовете, които
определеното поле трябва да обедини:
- ROWSPAN = „n” - обединяването се извършва по вертикала в посока надолу от
дефинираното поле;
- COLSPAN = “n” - полето, определено в момента, ще се разпростре и върху площта от
таблицата, която по принцип би принадлежала на съседното на него поле вдясно.
11. Хипервръзки - Хипервръзките са връзки към/ адреси на ресурси, които се намират в
мрежата - други HTML файлове, документи, създадени с различни програми, изображения и
пр.
 Хипервръзки към интернет адрес - За следващият пример ще използваме адреса на
портала http://abv.bg/. <a href="http://abv.bg">АБВ Поща</a>
Поща се отвори върху страницата с този урок. Това е полезно ако създавате
хипервръзка към страница във вашата собствена страница. Но ако е препратка към външна
страница, то по- добре тя да се отвори в нов прозорец. За да контролирате къде ще се отвори
вашата хипервръзка, използвайте атрибута target.
- Ако искате връзката да се отвори в същата страница, използвайте target="_self"
или пропуснете този атрибут, тъй като това е неговата стойност по
подразбиране.

11
- Ако искате връзката да се отвори в нова страница, използвайте target="_blank"
<a href="http://abv.bg" target="_blank">АБВ Поща</a>
 Хипервръзки към друга страница дефинирана в същия сайт
<a href="avtor.html"> Автор</a>
 Хипервръзки с котви - котвите са връзки към места или елементи в същия HTML
документ. Например в този HTML документ, който четете в момента сме дефинирали котва за
началото на текста ето така:
<a name="begin" id="begin"></a>
<h3>УЧЕБНИ МОДУЛИ -> Администриране на уеб сайт</h3>
Най- важният атрибут при задаването на котва е попълването на атрибута name.
Изберете уникално име на котвата, което не съвпада с име на друга котва в същия документ.
Някъде другаде в документа, дефинираме хипервръзка към тази котва. Ето така:
<a href="#begin">Това е връзка към началото на този документ</a>
12. Графични изображения - Изображения се декларират със следния таг: <img >. Не
изисква затварящ таг. Пример за вмъкване на изображение:
<p>Това е центрирано изображение:
<img src="/kuche.jpg" width="200" height="150" alt="калиграфия-куче" align="middle" >
</p>
Като атрибут на <img > се задават следните параметри:
 името на изображението-файл. src="адрес-на-файла" - където "адрес-на-файла" е пътя
до директорията (считан от настоящата директория), където се намира изображението и
самото му име. Не забравяйте да укажете точно адреса на изображението, ако то се
намира в папка, различна от настоящата - тази на html документа.
 width="широчина" в пиксели
 height="височина" в пиксели
 alt="алтернативно име" - Това е текстът, който ще се покаже на мястото на
изображението ако то по една или друга причина не може да бъде заредено.
Добра практика е винаги да пишете смислени алтернативни имена: някои ваши
посетители може да са с увредено зрение и да ползват услугите на браузър, който им чете
текстовете от страниците. Алтернативното име е единствения начин те да разберат какво
изображение сте сложили на страницата си.
 позиция спрямо текста. align="позиция"- и една от следните стойности за позиция:
o bottom: Долният край на изображението се подравнява с текста.
o middle: Средата на изображението и линията на текста съвпадат.
o top: Горният край на изображението е на нивото на текста.
o left: Изображението се изнася в лявата част на екрана.
o right: Текстът остава вляво, а изображението - плътно вдясно.
 Border = "рамка" - Рамка на изображението.

12

13
УЕБ ДИЗАЙН
ТЕМА 2: Изисквания за изработване на уеб-сайт
1. Проучване.
Преди да започнете работа трябва да знаете:
- за коя аудитория ще е предназначен сайта; какви са интересите на посетителите;
- защо има необходимост от сайта;
- какво искате да получат посетителите му;
- от какво съдържание ще има нужда;
- какво ще изразява сайтът т.е. какво искате да кажете на посетителите с него;
- важно е да знаете кои са конкурентите Ви и как изграждат сайтовете си.
2. Планиране и структура.
Яснотата и лекотата на употреба са сред най-важните компоненти на един добър уеб
сайт.
а) създаване на структурата на сайт – за да е ясен, комуникативен и лесен за употреба
сайтът трябва да има планирана структура. Трябва да създадете подробна схема на сайта.
б) създаване на структура от файлове и папки – препоръчва се да създадете отделни
папки за различните видове файлове (папка за HTML код, за изображения, за мултимедия, за
каскадни набори от стилове (CSS)).
3. Разработка и дизайн на сайта.
На този етап се създават основни насоки за стиловете, даващи конкретна информация
за външния вид, интерфейса, цветовете и стиловете, които ще се използват в сайта.
4. Тестване.
Трябва да тествате начина, по който различните браузъри (Microsoft Internet Explorer,
Mozilla Firefox, Opera, Safari) изобразяват страниците, тествайте всички страници и връзки.
5. Поддръжка.
Към този етап се отнася добавяне на нови страници, обновяване на връзки, подмяна на
съдържание и изображения.
ТЕМА 3: Работно пространство на Dreamweaver 8
1. Стартиране
Ако отваряте Dreamweaver за първи път на компютъра си избирате една от двете опции:
- Designer – интегрира всички прозорци и панели на Dreamweaver в среда,
оптимизирана за визуално създаване на уеб сайтове;
- Coder – пригодена е за програмисти, които работят основно с HTML и др. езици за
уеб програмиране Изберете Designer.
Отваря се началната страница Dreamweaver, която предлага:
- Open a Recent Item – бързи връзки към наскоро използвани документи;

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

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

16
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 .

17
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 – показват се браузърите, инсталирани на компютъра. Можете да добавяте браузър

18
към списъка (ако имате повече от 1 браузър на компютъра си) и да премахвате чрез бутоните
(+) и (–).
б) преглед на страница – лента Document, бутон Preview/Debug in Browser (F12).
ТЕМА 4: Проектиране с помощта на таблици. Създаване на таблица.
Форматиране на таблици.
В 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 – извличението от дадена таблица не се показва на страницата.
Обяснява предназначението и контекста на таблицата.

19
Когато е избрана една таблица се показват хоризонтални и вертикални зелени линии.
Това са ширината и височината на колоните и редовете. Тези линии изчезват, когато щракнете
извън таблицата. Можете да активирате и деактивирате визуалната помощ за таблицата от
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

20
в) разделяне на клетки
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.
ТЕМА 5: Добавяне на съдържание на страница
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;

21
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 позволява поставянето на дата и час за следене кога за последен път
страницата е модифицирана. Програмата ги актуализира автоматично при записване на
страницата. Тази дата не е динамична и не се променя спрямо момента на достъп до
страницата.

22
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

23
ТЕМА 6: Работа с графика
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

24
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

25
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) селектирайте изображението.

26
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)
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. Името и алт.текст
не се пренасят върху изображението.

27
3. Редактиране на изображения
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. При промяна на изображението се променят и
всичките му копия в целия сайт. Ако не желаете това да става направете дубликат на
изображението с друго име и работете по него.
- Отрязване
2) панел Properties, инструмент Crop
В изображението се появява селектирана област. В краищата и средите на страните й
има манипулатори. Тя е по-малка от самото изображение и има приблизително същите
пропорции. В областта изображението е чисто. Когато курсорът бъде поставен в центъра й,
той се превръща в кръст със стрелки и областта може да бъде местена. Оразмеряването й става
с издърпване на манипулаторите.
3) променете селектираната област както желаете, но оставяйки я по-малка от
изображението; Enter (или щракате 2 пъти в селектираната област или щракате върху иконата
Crop в панел Properties)
Изображението е отрязано по селектираната област. Големината на файла намалява.
За отмяна на отрязването щракнете в прозореца Document извън изображението (или
Edit/Undo Crop или Ctrl+Z).
- яркост и контраст
2) панел Properties, инструмент Brightness And Contrast
3) появява се диалогов прозорец Brightness/Contrast, който има 2 плъзгача с обхват от -
100 до +100. Направете желаните промени; OK
- острота (изясняване)
2) панел Properties, инструмент Sharpen

Наръчник на учетеля

Наръчник на учетеля

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Similar to Наръчник на учетеля

Similar to Наръчник на учетеля (13)

More from Борислав Крумов

More from Борислав Крумов (20)

Наръчник на учетеля