Nar makedonia

Проект:
Е-услуги, знаење за социјално зближување
2007CB16IPO007–2012-3-49
IPA Cross-Border Programme CCI Number 2007CB16IPO007
Веб развој и методи за интернет едукација
ПРИРАЧНИК ЗА НАСТАВНИЦИ
Средно општинско училиште
Ѓорче Петров
Крива Паланка 2014 г.

Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
2
СОДРЖИНА
HTML, ВЕБ ДИЗАЈН и CSS
HTML........................................................................................................................................................................................................5
ТЕМА 1: Програмскиот јазик HTML.................................................................................................................................................5
Што e HTML? ....................................................................................................................................................................................6
Создавање на HTML страница.........................................................................................................................................................5
Структура на HTML документ.......................................................................................................................................................6
HTML елементи во тагот BODY....................................................................................................................................................7
ВЕБ ДИЗАЈН..........................................................................................................................................................................................20
Тема2: Подготовка за созадавање на веб страна.............................................................................................................................20
1. Истражување ...............................................................................................................................................................................20
2. Планирање и создавање на структурата.................................................................................................................................21
3. Развој и дизајн на сајтот............................................................................................................................................................21
4. Тестирање .....................................................................................................................................................................................21
5. Подршка.........................................................................................................................................................................................21
ТЕМА 2: Dreamweaver 8 .....................................................................................................................................................................21
1. Стартување ..................................................................................................................................................................................21
2. Дефинирање на локална веб страна .........................................................................................................................................23
3. Создавање на нова HTML страница..........................................................................................................................................25
4. Зачувување на веб страницата File/Save..................................................................................................................................25
5. Правила за именување на фајловите.........................................................................................................................................25
6. Опишување на работниот простор..........................................................................................................................................25
7. Работа со работните алатки (панели) и документи ...........................................................................................................26
8. Лента за вметнување(Insert)......................................................................................................................................................26
9. Поставување наслов на страницата .......................................................................................................................................26
10. Преглед пред печатење..............................................................................................................................................................26
ТЕМА 4: Дизајнирање веб страни со помош на табели. Креирање на табели.Форматирање на табели. ............................26
1. Креирање на табели.....................................................................................................................................................................26
2. Форматирање на Ќелии- Properties. ..........................................................................................................................................27
3. Сортирање на табелата.............................................................................................................................................................27
4. Копирање на табела ....................................................................................................................................................................27

3
5. Вгнездени табели .........................................................................................................................................................................27
ТЕМА 5: Креирање на содржината на веб страницата ...............................................................................................................27
1. Внесување на текст.....................................................................................................................................................................27
2. Определување на структурата на содржината.....................................................................................................................28
3. Создавање на нови редови............................................................................................................................................................28
4. Поставување на прекриено празно место ...............................................................................................................................28
5. Порамнување на текст. ..............................................................................................................................................................28
6. Поставување на специјални знаци ............................................................................................................................................28
7. Форматирање на знаци ..............................................................................................................................................................28
8. Хоризонтални линии ...................................................................................................................................................................28
9. Автоматско поставување на датум ......................................................................................................................................29
10. Листи...........................................................................................................................................................................................29
ТЕМА 6: Работа со слики....................................................................................................................................................................31
1. Порамнување на слики.................................................................................................................................................................31
2. Работа со слики............................................................................................................................................................................33
3. Обработка на слики.....................................................................................................................................................................34
4. Креирање на графички симболи и мапи на слики....................................................................................................................35
ТЕМА 7: Хипертекст и линкови како слики ....................................................................................................................................36
1. Намена. ..........................................................................................................................................................................................36
2. Видови ...........................................................................................................................................................................................36
3. Создавање на хиперлинкови........................................................................................................................................................36
4. Уредување на дестинација на хиперлинк .................................................................................................................................37
5. Именување на линк како водич...................................................................................................................................................37
6. Додавање на линк како водич и насочување на внатрепниот хиперлинккон него.............................................................37
7. Додавање на линк како водич и насочување на надоворешниот хиперлинккон него.........................................................37
8. Уредување на линкови како водич..............................................................................................................................................37
9. Определување на боја и форма на хиперлинкот......................................................................................................................37
ТЕМА 8: Вметнување на флеш анимации и флеш копчиња..........................................................................................................38
1. Креирањена флеш текст ............................................................................................................................................................38
2. Додавање на флеш копче ............................................................................................................................................................39
3. Поставување на флеш анимација .............................................................................................................................................40
ТЕМА 9: Креирање на веб фото-албум..............................................................................................................................................40
ТЕМА10: Вметнување на флеш анимации и флеш копчиња ........................................................................................................41
1. Предности.....................................................................................................................................................................................41

4
2. Алатки за вметнување на интерактивни елементи.............................................................................................................41
3. Вметнување на rollover слики.....................................................................................................................................................41
ТЕМА11: Создавање на нови стилови. Внатрешни и надворешни стилови...............................................................................43
1. Дефиниција....................................................................................................................................................................................43
2. Примена.........................................................................................................................................................................................43
3. Видови на стилови.......................................................................................................................................................................43
4. Креирање на нови внатрешни стилови. ...................................................................................................................................43
5. Креирање на нови надворешни стилови. ..................................................................................................................................44
ТЕМА12: Што е CSS (Cascading Style Sheets)?.................................................................................................................................44
ТЕМА13: Стилови во HTML документ...............................................................................................................................45

5
HTML
ТЕМА 1: Програмски јазик HTML
Што е HTML?
HTML (HyperText Markup Language) е јазик за означување кој се користи за создавање на веб
страници. Овој јазик се користи за опишување на структурата на информациите во текст
ориентираните документи со обвиткување (маркирање) на одредени делови од текстот при што
означениот текст се форматира или се заменува со интерактивни форми, вгнездени слики или други
објекти. Целта на веб пребарувачот е да ги интерпретира овие тагови во аудиовизуелен документ, а
тие да не се прикажуваат на самиот документ. Јазикот бил измислен од Тим Бернерс - Ли во 1990
година со цел научниците од различни универзитети да добијат полесен пристап кон документи од
научни истражувања. Стандардите на HTML се создадени и одржувани од W3C.
Создавање на HTML страни
За креирање на веб страници се користат едноставни текст едитори. Сите наредби во овој
програмски јазик се пишуваат со помош на тагови. Тагови се кодови во HTML документ кои
пребарувачот ги чита, а потоа ги интерпретира за понатамошно прикажување на читателот.
Самите тагови не се видливи кога се гледа HTML документот во пребарувач, туку само нивниот
ефект.Таговите започнуваат со почетен симбол “<“ и завршуваат со краен симбол “>”. Таговите
обично одат во парови со еден кој го означува почетокот и друг кој го означува крајот на акцијата
која ја врши тагот. Затворачкиот таг по симболот “<“ го содржи симболот “/”. Постојат специјални
HTML алатки за креирање на веб страни како: Microsoft Front Page, Notepad, Notepad ++, Macromedia
Dreamweaver, Sublime Text итн.
Структура на HTML документ
Ова е „најмалото“ нешто што може да се нарече страница.
Делот head содржи податоци за документот, на пример негово име - title таг и така наречени
meta податоци кои ја опишуваат содржината на документот. Тагот body ги означува границите на
документот што се појавува во прозорецот на пребарувачот.
<HTML>...</HTML>
<HTML>
<HEAD>
<TITLE>Ova e naslovot na
mojata stranica!</TITLE>
</HEAD>
<BODY>
Ova e mojata poraka kon
svetot!
</BODY>
</HTML>

6
Го ограничува целиот HTML документ. Овие тагови му кажуваат на пребарувачот што да чита, а
потоа да го интерпретира.
<HEAD>...</HEAD>
<HEAD> елементот го означува заглавјето на документот. Тој ги содржи сите општи информации за
документот, ги содржи HTML елементите кои го опишуваат користењето на документот и неговите
врски со други документи.
<TITLE>...</TITLE>
<TITLE> елементот го означува насловот на документот и е сместен во заглавјето. Насловот се наоѓа
на врвот од прозорецот на пребарувачот, па важно е истиот да биде нешто описно, уникатно и да
биде релативно краток.
HTML елементи во тагот BODY
<BODY>...</BODY>
<BODY> елементот ги содржи сите информации кои се содржани во документот и се наменети за
приказ во пребарувачот. Постојат бројни различни атрибути на овој таг. Атрибути се елементи
сместени во самиот таг од кои зависи однесувањето и приказот на самиот таг.
BACKGROUND – атрибут кој ја означува сликата која ќе претставува подлога (позадина) на Web
страната.
Пример:
<BODY BACKGROUND=“imenaslika.jpg”></BODY>
Кај сите HTML тагови на кои може да се имплементира боја (како на пример BODY) бојата се
означува како шестоцифрен хексадецимален број кој означува RGB вредност. Ова значи дека
“000000” е црна, “FFFFFF” е бела, а сите други нијанси се наоѓаат меѓу овие два броја. Како
дополнување, постојат уште 16 имиња на бои, различни од black, кои може да се вклучат во таговите.
Тие се: Aqua, Red, Green, Blue, Violet, Fuchsia, Gray, Lime, Maroon, Navy, Olive, Purple, Silver, Teal,
White, and Yellow.
BGCOLOR – ја означува бојата на позадината на страната.
Пример:
<BODYBGCOLOR="#FFFFFF">
Оваа страница има бела позадина.
</BODY>
или
<BODY BGCOLOR=“WHITE">
Оваа страница има бела позадина.
</BODY>
TEXT – ја означува бојата на претпоставената боја на документот.
Пример:
<BODY TEXT=“BLUE“>
Оваа страница има син текст.
</BODY>
LINK – ја означува бојата на линковите кои не се посетени.
ВLINK – ја означува бојата на линковите кои се посетени.
АLINK – ја означува бојата на активните линкови т.е. бојата ќе се појави кога ќе се стави
курсорот врз линкот.

7
Пример:
<BODY LINK="#0C6249“ АLINK=“#800080”>
Оваа страница има сини линкови и пурпурни активни линкови.
</BODY>
Определување на позадината на страната и боја на текст. Бојата на позадината се специфицира со
атрибутот bgcolor.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Примери за хексадецимални вредности за бои
Примери за имиња на бои
Примери за бои со rgb – техника
Тагот body ги означува границите на документот што се појавува во прозорецот на пребарувачот.
Основни HTML тагови
.

8
Тагови за форматирање на текст
<SUP></SUP> - Таг за високо поставен текст
<SUB></SUB> - Таг за ниско поставен текст
Пример:
HTML код:
Ова е <SUP>степен</SUP>,
a ова <SUB>индекс</SUB>!!!
Приказ во пребарувачот:
, !!!
Во html постојат и тагови со кои може да се напишат математички формули. На пример:
Листи
HTML поддржува два типа на листи:
 подредени
 неподредени
 <UL></UL> e тагот за неподредени листи.
 <LI>е тагот за означување на елемент во листа. <LI> нема затворачки таг.
 <OL></OL> е тагот за подредена листа.
Подредени листи се нумерирани листи од елементи со реден број пред секој елемент (numbered лист).
Редните броеви се генерираат автоматски.
Листите се означуваат со следниве тагови.
Што е со редовите?
)log(2
x
n
ex 

9
За означувачи на неподредените листи можат да се користат одредени знаци како на пример круг,
квадрат.
Нумерираните листи можат да бидат означувани со:
- обични броеви
- големи букви
- мали букви
- римски броеви со големи букви
- римски броеви со мали букви
Можно е и вгнездување на листи, еднократно или повеќекратно, но паралелно и повеќекратно
вгнездување на листи може да биде тешко за следење. Вгнездувањето на листите може да биде и
комбинирано т.е. може да се вгнезди подредена во неподредена листа или обратно.
Фонтови
Тагот <FONT></FONT>го определува изгледот на буквите кои се прикажуваат во
пребарувачот.
Основни атрибути:
SIZE - ја определува големината на буквите
FACE - го определува фонтот во кој ќе се прикажат буквите
COLOR- ја определува бојата во која ќе се прикажат буквите
HTML код:
<FONT FACE="Comic Sans MS”COLOR=“BLUE”>
Ова е син текст напишан во Comic Sans MS</FONT>
Ова е син текст напишан во Comic Sans MS
Специјални знаци
Специјалните знаци се користат кога потребниот знак го нема во фонтот кој се користи или
потребниот знак е некоја резервирана команда.
Пример
- знакот за авторски права©
Специјалните знаци постојат поради повеќе цели:
- Ако треба да се стават знаците < или > како математички симболи, тогаш истите би биле
третирани како тагови и би влијаеле на изгледот на самата страница.
- Специјалните знаци почнуваат со &, завршуваат со ;
- Пример:
Знакот за авторски права © се претставува со ©
- Листа од специјални знаци:

10
Слики
Како се вградуваат графички елементи во една WEB страна?
Тагот <IMG> се користи за вметнување на графички елементи обично икони, слики или фотографии,
во HTML документ. Вообичаени формати на слики:
- JPG
- GIF
- BMP
Треба да се води сметка за големината на сликата, поради времето за вчитување на истата.
Параметри за користење на тагот <IMG>:
- Извор на сликата
- Големина на сликата
Тагот <IMG> нема затворачки таг.
Извор на слика
SRC му кажува на пребарувачот каде физички се наоѓа сликата.
Како вредност на овој атрибут можни се и релативни и апсолутни патеки.
<IMG SRC=“slika.jpg” WIDTH=100>
<IMG SRC=“galerija/sliki.jpg” WIDTH=100>
<IMG SRC=“http://www.on.net.mk/images/top-logo.gif” HEIGHT=100>
Големина на слика
WIDTH – ширина на слика
HEIGHT – висина на слика
Единица мерка: пиксел – најмал составен дел на една дигитална слика. Не се задолжителни
атрибути, но се добра пракса за побрзо вчитување на текстот кој треба да стои околу сликата.
Пример:
<IMG SRC=“slika.jpg” WIDTH=100HEIGHT=50>
<IMG SRC=“slika.jpg” HEIGHT=100>
<IMG SRC=“slika.jpg” WIDTH=100>
<IMG SRC=“slika.jpg”>
Порамнување на слика
ALIGN атрибут со можни вредности LEFT и RIGHT
Пример:
<IMG SRC=“gjorche.jpg" WIDTH=32 HEIGHT=32 ALIGN=LEFT>
Пример:
<IMG SRC=“gjorche.jpg" WIDTH=32 HEIGHT=32 ALIGN=RIGHT>

11
Алтернативен текст
Добро правило за ставање на алтернативен текст кој ja опишува сликата.
Повеќе причини:
1. Додека пребарувачот ја вчитува сликата, посетителот на страната може да го прочита
алтернативниот текст
2. Ако сликата не се вчита, тогаш останува алтернативниот текст
3. Кај корисниците кои ги имаат исклучено сликите во нивниот пребарувач, на место на сликите
се вчитуваат нивните алтернативни текстови
4. Со поставување на курсорот над сликата се појавува алтернативниот текст.
Пример:
<IMG SRC="hand.gif" WIDTH=108 ALT="Big Hand">
Линкови
Главната функција на WEB-от е неговата можност за поврзување на тековната страница или
сајт со било која друга што се наоѓа на WEB. Можно е и поврзување и со други сервиси кои ги нуди
интернетот, на пример e-mail. Поврзувањето е можно со поставување на т.н. хиперлинк или краток
линк. За да се направи линк се користи тагот <A></A>. Целата содржина која се наоѓа оградена со
овој таг ќе ја има функцијата за линк.
Главни атрибути:
HREF – ја означува целната адреса кон која води линкот
NAME – го означува името на линкот
TARGET – го означува прозорецот во кој ќе се отвори адресата кон која води линкот.
Текстуални линкови
Пример:
<A HREF=“http://www.google.com”>Линк кон Google</A>
Вообичаено кај пребарувачите линковите се подвлечени.
Релативни и апсолутни линкови
Релативни линкови:
<A HREF=“lekcija5.htm”>Лекција 5</A>
<A HREF=“kurs/pocetok.htm#voved”>Курс</A>
Апсолутни линкови:
<A HREF=“http://www.on.net.mk”>On-Net</A>
Слики-линкови
Пример:
<A HREF=“http://www.castlink.com”>
<IMG SRC=“slika.jpg” WIDTH=40BORDER=0>
</A>

12
Слики-мапи
Метода за креирање на повеќе линкови од една слика т.е. поставување на дел од слика да биде
линк.
Ограничувањето на дел од слика се врши со избор на правоаголник со координати на пиксели.
Синтакса:
<MAP NAME=“[име]”>
<AREA HREF=“[линк1]” SHAPE=“[облик]” COORDS=“[x11],[y11],[x12],[y12]”>
<AREA HREF=“[линк2]” SHAPE=“[облик]” COORDS=“[x21],[y21],[x22],[y22]”>
...
</MAP>
<IMG SRC=“[слика]” USEMAP=“#[име]”>
E-mail линкови
За креирање на линк преку кој што се отвора E-mail програмот на корисникот со пополнета
адреса на примач, се користат линковите.
Пример:
<A HREF=“mailto:petko@yahoo.com”>Пиши му на Петко!</A>
Табели
Две намени:
- Приказ на табеларни информации
- Контрола на распоред на HTML елементи
Табелите се дефинираат со тагот <table>
- Редови во табелата се дефинираат со тагот <tr>
- Колоните во редот се дефинираат со тагот <td>
- <TABLE>…</TABLE> - таг за означување на табела
- <TR>…</TR> - таг за означување на ред во табелата
- <TD>...</TD> - таг за означување на ќелија во редица.
Организацијата на табелата се одвива со дефинирање на табела како низа од вгнездени редици.
Организацијата на редицата се одвива како низа од вгнездени ќелии.
<TABLE></TABLE>- таг
Атрибути:
BORDER – ја означува дебелината на линиите на табелата
BORDERCOLOR – определува боја на линиите на табелата
BACKGROUND – определува слика која ќе биде позадина на табелата
BGCOLOR – ја определува бојата на позадината
ALIGN – порамнување на табелата во однос на страницата
CELLPADDING – го дефинира празниот простор во ќелиите
CELLSPACING – го дефинира празниот простор меѓу ќелиите
WIDTH – ја дефинира ширината на табелата
<TR></TR>- таг
ALIGN – претпоставена вредност за хоризонтално порамнување на содржината на секоја
ќелија од редицата (LEFT, CENTER и RIGHT)
VALIGN - претпоставена вредност за вертикално порамнување на содржината на секоја ќелија
од редицата (TOP, BOTTOM и MIDDLE)
BGCOLOR – претпоставен вредност за бојата на позадината на целата редица
HEIGHT – висина на редица

13
<TD></TD>- таг
ALIGN –хоризонтално порамнување на ќелија (LEFT, CENTER и RIGHT)
VALIGN - вертикално порамнување на ќелија (TOP, BOTTOM и MIDDLE)
BGCOLOR – боја на позадината на ќелијата
WIDTH – ширина на ќелијата
Дополнителни атрибути на тагот <TD></TD>
COLSPAN – број на колони кои се составуваат
ROWSPAN – број на редици кои се составуваат
Пример:
<TD COLSPAN=2></TD> - две составени колони (во тековната редица)
Вгнездување на табели
Примена во прецизно распоредување на WEB страници. Добриот дизајн обично користи
табели. Овозможува модуларно дизајнирање т.е. ќелија по ќелија.
Се изведува на тој начин што содржина на ќелија од табела е повторно табела.
Форми
Обезбедуваат интерактивност и комуникација со корисниците. Овозможуваат пренос на
параметри од корисник до серверот.
<FORM></FORM> - основен таг
Основни атрибути:
NAME – име на форма
METHOD – метода (POST или GET т.е. невидлив и видлив пренос на параметри)
ACTION – акција која ќе се превзема над параметрите
TARGET – рамка или прозорец во кој ќе се изврши акцијата
Типични акции:
-CGI скрипта – веќе застарени скрипти
-ASP скрипта – типична Microsoft скрипта
-PHP скрипта – типична Unix скрипта
-Java – Јава аплет кој се извршува на серверот
-MAILTO акција – праќање на формата на некоја email адреса
-Специјално дефинирана акција
Примери:
<FORM action=“presmetaj.asp”>
<FORM action=“mailto:nekoj@nekade.com”>
<FORM action=“presmetaj.cgi”>
<FORM action=“prevzemi.php”>
<FORM action=“javascript:Proveri();”>
Текстуално поле со име ime должина 10 знаци, а максимална должина 20 знаци:
<input type="text" name="ime" maxlength="20" size="10">
Текстуално поле со повеќе реда
Текстуално поле со име ime, ширина 30 знаци и 5 реда:
<textarea name="ime" cols="30" rows="5">
Максималната должина е неограничена.
Постојат три вида на копчиња:
- Submit – за пренос на параметри кон скрипта
- <input type="submit" name="Submit" value="Префрли">

14
- Reset – за ресетирање на елементите на формата
- <input type="reset" name="Reset" value="Ресетирај">
- Button – за поставување на специјално дефинирана акција (скрипта)
- <input type="button" name="Button"
value="Пресметај" onClick="javascript:Presmetaj();">
- Chekced
<input type="checkbox" name="ime" value="1">
Опционални атрибути:
Checked – ако дефинираната вредност е означена
Disabled – ако не е можно управување со контролата
Радио контрола. Обично повеќе одат во група.
<input name="ime" type="radio" value="1">
Checked – ако дефинираната вредност е означена
Disabled – ако не е можно управување со контролата
Combo контрола. Паѓачко мени.
<select name="Izbiranje">
<option value="1">Izbor 1</option>
</select>
Можно е и дефинирање на вредност со атрибутот selected.
Контрола за листа. Пример за листа со понудени 5 вредности.
<select name="Izbiranje“size=5>
</select>
Можно е и дефинирање на вредност со атрибутот selected. Можност за повеќекратен избор со
атрибутот multiple.
Контрола за upload датотека.
<input name="ime" type="file">
Скриен параметар, контрола која е невидлива, но се пренесува во акцијата.
<input name="ime" type=“hidden“ value=1>
Едноставна форма: Приказ на пребарувачот:

15
Радио копчиња:
Приказ на пребарувачот:
ВЕБ ДИЗАЈН
ТЕМА 2: Подготовки за создавање на веб страна
1. Истражување
Пред да започнете со работа треба да знаете:
- За какви луѓе е наменета веб страната;
- Какви се интересите на посетителите;
- Зошто е неопходно правењето на вашата веб страната;
- Што сакате вашите посетители да научат;
- Каква содржина треба да ставите на веб страната;
- Важно е да ги познавате конкурентите и како тие ги уредуваат нивните веб страни.
2. Планирање и структура
Јасниот приказ и лесната едноставна употреба се најважните компоненти на една добро
уредена веб страна. Содржината на страната треба да има можност за комуникација со клиентите и
да биде лесна за употреба. Веб страната треба да има планирана структура. Додека при создавањете
на структурата од фајлови и папки, се препорачува оделни папки за различни видови фајлови (Папка
за HTML код, за мултимедија, за CSS податоци).
3. Разработка и дизајн на веб страната
Во овој чекор се создаваат основните насоки за стиловите на страната, внатрешното
уредување на страната, линковите, боите и другите алатки на веб страната.
4. Тестирање
Тестирањето на вашата веб страна се врши преку пребарувачите со цел да се види изгледот на
веб страницата (Firefox Mozzzila, Google Chrome, Safari..).
5. Подршка
Овој чекор се однесува на освежувањето на страницата како и на прифаќање на промените:
промена на содржината на страницата, редоследотот и слично.

16
ТЕМА 3:Dreamweaver 8
1.Стартување
Кога ќе ја отворите апликацијата Macromedia Dreamweaver ќе ви се појават следниве две
опциии:
Designer - ги вклучува сите прозорци и
панели на Dreamweaver на начин погоден за
визуелно создавање на веб страни.
Coder - пригодна метода за програмери кои
работат основно со HTML и други јазици. Ако сте
почетник најдобро изберете Designer.
Кога ќе се отвори почетната страница на
Dreamweaver, ги имате следниве опции:
Open a Recent Item - опција брзо да ги
отворите последните документи;
Create New - опции за создавање на нов
документ, кој може да биде од различен тип на
фајлови;
Create From Sample - можност да изберете дизајн од понудените примери на дизајни;
Dreamweaver Exchange - содржи ресурси кои можете да ги искористите за проширување на
алатките кои се понудени да ги користите во програмата. Првичната насловна страна се покажува
при секое отварање на програмата, се додека не ја изберете опцијата Don’t show again. Ако почетната
страна не ви се појавува, можете да направите да се појави ако изберете Edit/Preferences,General,
изберете ја опцијата Show start page.
2.Дефинирање на локална веб страна
2.1 Избирање на локација
Креирате локална главна папка на компјутерот каде ќе ги сместувате сите датотеки, фајлови
или слики во врска со вашиот проект. Фајловите на хард дискот на компјутерот кои не се наоѓаат во
оваа главна папка нема да бидат регистрирани од страна на серверот.
2.2 Дефинирање на локална веб страна според основните методи:
1. Направете ја локалната папка според горенаведеното упатство. Се препорачува папката да
се наоѓа во Мy Documents.
2. Создавање на нова веб страна.
1) Од менито Create New од почетната страна на Dreamweaver изберете DreamweaverSite;
2) Изберете Site/New Site;
3) ИзберетеSite/ Manage Sites и изберете ја опцијата New. Потоа од ново појавеното мени
изберете Site, се отвора нов прозорец Site Definition составен од 2 страници, Basic и Advanced.
Се препорачува да изберете Basic, метод кој базично ќе ве води во дизајнирањето на веб
страната чекор по чекор. Додека Advanced нуди можност за конфигурирање на дополнителни
опции и инструкции и не вклучува текстуални објаснувања кои ги вклучува Basic. Во првото
текстуално поле ставате име на веб страната, а потоа избирате Next.

17
3. Во следниот прозорец Dreamweaver ќе ве праша дали сакате да работите со други
напредни технологии како што се: ASP.NET, JSP, PHP итн. Вие ќе ја изберете првата
опција, дека не сакате да користите серверска технологија и кликате на ОК. Доколку
сакате да направите посложена веб страна ќе ја изберете втората опција.
4. Определете начин на работа со фајловите пред да ги објавите – изберете ја првата опција,
односно Edit local cоpies on my machine, then upload to server when ready (recommended).
5. Посочете ја локацијата на папката во која ќе ги сместите локалните фајлови - тоа е
локалната главна папка која веќе ја имате направено. После тоа избирате Next.
6. Изберете ја местоположбата на оддалечениот сервер, каде што ќе ги објавите вашите
фајлови, каде што ги имате понудено следниве опции:
-None - ништо
-Local Network-за да ги пробате прво на вашиот компјутер.
-FTP –за да ги обавите на FTP сервер.
Изберете None и притиснете Next .
7. На последниот чекор ги прегледувате информациите за сајтот и одите на Done.
3. Создавање на нова HTML страница
1н.) Откако ќе изберете File/New – се отвара нов прозорец New Document составен од 2
страници: General и Templates. Избирате General и од категоријата Basic Page избирате HTML, потоа
ја избирате опцијата Create.
2н.) Од почетната страница на Dreamweaver ја избирате опцијата Create New па потоа
избирате HTML.
4. Зачувување на веб страницата File/Save
Ако фајлот е зачуван припазливо, при импортирањето на елементите, сите патеки од
местоположбата на елементите на веб страната ќе бидат создадени правилно. Ако типот на
документот не е HTML, тогаш се влегува во Еdit/Preferences, се избира категоријата New Document,
во текстуалното поле на Default Extension се избира-HTML.
5.Правила за именување на фајловите
Дозволено е користење на латински букви, арапски цифри (цифра не може да биде првиот
симбол од името) и долна црта.

18
6.Опишување на работниот простор
Работниот простор на апликацијата е даден на следната слика
7. Работа со работните алатки (панели) и документи
Овие алатки содржат опции за креирање и обработка на содржината на страната. Се избираат од
менито Windows. Со кликнување со стрелката на маусот пред името на панелот се прикажува или
прикрива панелот. При кликнување врз иконата на името на панелот се отвора менито на панелот.
Поразработени групи на алатки се: CSS, Application, Tag Inspector , Files.
8. Лента за вметнување (Insert)
а) Designation - се користи за вметнување на содржини во веб страната. Може да се
визуелизира како мени или како севкупност од страници.
б) Тo switch the formats
Со помош на копчето Common/Show as Tabs можете да го смените форматот на страниците и да го
прикажете како комбинација од табови.
Common – ги содржи најкористените (најчестите) елементи на веб страницата како што се:
хиперлинкови, табели, шаблони и др;
Layout - опции за креирање на табели, слоеви, рамки, преглед на табели;
Forms - ги содржи сите елементи кои се потполнуваат во онлајн формуларите;
HTML - содржи опции за вклучување на податоци (meta data, клучни зборови и опис) во Head делот
на веб страната.
Application - за вметнување на динамички елементи на веб страницата;
Flash Elements - содржи опции за фајловите кои се создадени со Flash;
Насловна лента
Лента со мени
Insert лента
лента со документи - Code, Designer, Split
Стандардна лента
Tag selector лента
Properties лента

19
Favourites - за создавање на вашите најкористени алатки од мените Insert.
9. Поставување наслов на страницата
Насловот на веб страница се наоѓа во насловната лента на пребарувачот и треба да се зададе
пред да почнете да ја создавате содржината на вашата веб страница (во лентата Document во полето
Title се менува името на веб страната).
10. Преглед пред печатење
а) избор на пребарувач - секој пребарувач ги отвора страниците на различен начин и затоа е
добро да се тестираат страниците со различни пребарувачи:
1) изберете File/Preview во Browser/Edit Browser List
2) кога ќе се отвори прозорецот Preferences, ја избирате категоријата Preview in Browser
- потоа се покажуваат пребарувачите инсталирани на компјутерот, преку кои можете да
изберете од понудените пребарувачи (ако имате повеќе од 1 пребарувач). Доколку сакате да
додадете нов пребарувач одете на следниот знак (+) или одземете со (-);
б) преглед на страницата - изберете ja во лентата Document, опцијата Preview/Debug во Browser
(F12).
ТЕМА 4: Дизајнирање веб страни со помош на табели. Креирање на табели.
Форматирање на табели
Во Dreamweaver се достапни три режими на работа: Standard, Layout, Expanded (лента Insert,
категорија Layout, View/Table Mode). Во режимот Еxpanded табелите изледаат малку зголемени и се
со подебела рамка.
1. Креирање на табели
1) Лента Insert, категорија Layout, опција Table;
2) Лента Insert, категорија Common, oпција 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 - и за двете;
- Caption - е наслов на табелата и може да се наоѓа од горе, од долу, од лево или од десно на
табелата.

20
- Summary - ова својство служи за дополнителни информации кои не се прикажуваат на веб
страницата. Ова само ја опишува содржината на табелата. Кога е избрана табелата се покажуваат
хоризонтални и вертикални зелени линии. Тоа се ширината и висината на колоните и редовите. Тие
линии исчезнуваат кога ќе кликнете надвор од табелата со маусот. Можете да активирате и
деактивирате визуелна помош за табелата со избирање на View/Visual Aids/Table Widths. За
преминување од ќелија во келија користите Tab. При вметнување на долг текст табелата автоматски
ја менува ширината на ќелии. Најгорниот ред е ред за наслов и текстот напишан во него се центрира
и се здебелува.
2. Форматирање на ќелии - Properties
a) за поставување на боја на позадината на ќелијата, изберете Properties/BackGround Color (Bg)
- избирате нова боја на позадината, BackGround URL of cell – избор на промена на позадината.
б) автоматско форматирање на табелата:
1) Commands/Format Table…
2) Се отвора прозорецот Format Table – изберете од зададените опции за форматирање.
Може да изберете даден темплејт за вашата табела. Оваа команда не е активна за табели со
наслов.
в) порамнување на содржината на ќелијата - Properties. Изберете го полето Horz po хоризонала
и Vert по вертикала.
г) No wrap - не реагира на промена на зборовите, ќелиите си ја зголемуваат ширината за да ги
соберат зборовите. Heater форматира избрана ќелија како наслов на табелата и содржината во неа се
покажува здебелено и центрирарано.
д) Border color - боја на рамка, изберете Brdrод Properties.
3. Сортирање на табелата
Сортирањето се извршува на дадена содржина на некоја колона (или повеќе од една).
Сортирањето се прави според следниот редослед.
1) селектирање на табела
2) избирате Command/Sort Table
3) се отвора прозорецот Sort Table кои ги содржи следниве опции:
Sort by - избирате колона по која ќе сортирате;
Оrder - дали колоната да се сортира по азбучен ред или по реден број;
Тhen by - сортирање по некој втор критериум;
Sort Includes the First Row - првиот ред да биде вклучен во сортирањето;
Sort Header Rows, Sort Footer Rows - дали насловните редови да бидат вклучени во
сортирањето;
Keep All Row colors The Same After the Sort has been Completed - при промена на
атрибутите на редовите да се зачуваат боите на редовите.
4. Промени на својствата на табели
1) промена на големината на редовите и ќелиите со помош на својството Properties - со избор
на W или H, ширина или висина соодветно.
2) вметнување на нови редици или колони - Modify/Table/Insert Row, Insert Columns, Insert
Rows or Columns.
3) поделба на ќелиите/ редиците - Split Cell или Modify/Table/Split Cell.

21
4) спојување на ќелии - селектирајте ги ќелиите/ редиците кои сакате да ги споите и одете на
следните својства Merge Cell or Modify/Table/Merge Cell.
5. Вгнездени табели
1) вметнете две табели
2) селектерајте ја ќелијата од првата табела каде што сакате да ја вметнете втората табела
3) селектирајте ја табелата: Edit / Cut
4) кликнете во ќелијата на втората табела каде сакате да ја вметнете другата табела и одете
Edit / Paste.
ТЕМА 5. Креирање на содржината на веб страницата
1. Внесување на текст
1н.) директно внесување во прозорецот на Dreamweaver
2н.) копирање на текст од друг документ
3н.) отворете еден HTML документ преку текст едитор и пишувате текст
4н.) отворете ги текст фајловите во Dreamweaver
Текстуалните фајлови (.txt) секогаш се отвораат во нов прозорец така да бидат во форма на
Code преглед.
1) Edit/Preferences
2) Од дијалог прозорецот се бира Preferences, од категоријата List, Code Format
3) Одберете CR LF
2. Определување на структурата на содржината
Во HTML има шест нивоа на поставување на наслови од h1 до h6. Првото ниво е наслов со
најголема ширина, а шестото ниво е наслов со најмала ширина. Доколу даден текст сакате да го
ставите како наслов, следете ги следниве чекори:
1) маркирање на насловот
2) од менито Properties изберете Format, и избирате Heading од 1 до 6.
3. Создавање на нови редови
За да создадете нов ред пред кој нема празно место (единечен нов ред), треба да изберете една
од понудените опции:
1н.) додавање на обичен нов ред (line break) или Shift+Enter - тоа е обичен нов ред, а не нов
параграф и затоа меѓу редовите ќе нема дополнително растојание;
2н.) изберете Insert/HTML/Special Character/Line break;
3н.) од лентата Insert -Text, мени Characters, Line break.
4. Поставување на прекриено празно место
Поставувањето на прекриено празно место се користи за поставување на место меѓу два знака,
зборови или за елементи кои не треба да бидат разделени едни од други, како математичките
симболи, некои имиња и датуми.
Го поставувате курсорот на маркерот помеѓу знаците што сакате да ги оделите:
1н.) Ctrl+Shift+Space;
2н.) Insert/HTML/Special Characters/Non breaking Space;
3н.) Од лентата Insert/Теxt, менито Characters, Non breaking Space.
5. Порамнување на текст
Има пет можности за порамнување: Default (не укажува на конкретно порамнување),

22
Aling-Left (лево), Aling-Center (во центар), Aling Right (десно) и Justify од опциите на Properties.
6. Форматирање на знаци
1) маркирање на текстот
2) од опциите на Properties, изберете B, I или Text/Style
Teletype - го покажува текстот здебелен со постојана ширина на буквите.
7.Поставување на специјални знаци
Можете да ставите знаци кои ги нема на тастатурата. Тие знаци имаат специјални HTML
кодови или алтернативни команди на тастатурата. Од лентата Insert, Теxt, oд менито Characters, го
избирате соодвениот симбол.
8. Хоризонтални линии
а) Поставувањето на хоризонтални линии (horizontal ruler) кои ја пресекуваат страницата и
визуелно ги разделуваат секциите.
1н.) од лентата Insert, oд HTML изберете Horizontal rule
2н.) Insert/HTML/Horizontal rule
Хоризонталната линија има фиксирано растојание под неа и над неа, кое може да се промени преку
CSS.
б) Својсвата на хоризонталната линија можат да се покажат во опцијата Properties преку
следните параметри:
W - ширина
H - висина
Pixels - мерни единици (пиксели проценти)
Shading - сенка
Аlign - порамнување
Class - прилагодување на CSS стиловите.
9.Автоматско поставување на датум
Dreamweaver дозволува поставување на време и датум за следење на тоа кога последен пат е
модифицирана страницата. Програмата ги поставува автоматски датумот и времето при секоја
промена на содржината на страницата. За поставување на датум/ време следете ги следниве чекори:
1н.) Изберете од лентата Insert, од категоријата Common, oпцијата Date
2н.) Insert/Date - и се отвора соодветниот прозорец
Day format - избирате ден
Date format - избирате формат на датумот
Тime format - избирате форма на времето
Update automatically on save – изберете ја опцијата за обновување на датумот
автоматски при секоја промена на содржината на страницата, форматот на датумот може да се
промени во секое време на следниот начин:
1) изберете ја датата
2) од опциите на Properties изберете - Edit date format - се отвара Insert Date прозорецот
- направете ги промените и притиснете ОК.
10. Листи
Во Dreamweaver постојат три вида на листи, подредени (ordered), неподредени (unordered) и
листи со дефиниции (definition lists).
1. Подредени листи
1н) изберете во опциите на Properties, опцијата Ordered List

23
2н) Text/List/Ordered List
2. Неподредени листи
Таквите листи можат да бидат со точки или со квадрати
1н.) изберете во опците на Properties, опцијата Unordered List
2н.) Text/List/Unordered List
3. Дополнителни опции
1) кликнете на листата
2) од опциите на Properties изберете List Item или Теxt/List/Properties опциите:
List Type - тип на листа
Style - стил на листа
New Style - вид на одделни елементи на листата
Reset count to - се прави промена на нумерирањето на листата, да започне
нумерирањето од редот каде се наоѓа курсорот на глувчето.
4. Листи со дефиниции
Таквите листи се составени од термини и специјални дефинирани зборови - дефиниција.
Дефинираниот збор е порамнен во лево, а неговото значење - дефиницијата е сместена веднаш под
него. Се избира со Text/List/Definition List.
5. Листи по дефиниција
Text/List/Definition List
ТЕМА 6: Работа со слики
1.Поставување на слики
1. Графички формати на слики
Процесот на поставување на слики на веб страната се нарекува оптимизација и може да биде
извршена во програма за графичка обработка како Macromedia Fireworks и Adobe Photoshop.
Постојат следните формати на слики:
а) GIF (Graphic Interchange Format) - погоден е за текст, векторска графика, слики со малку бои
и слики со многу мали димензии. GIF поддржува максимум 8-битна боја т.е. само 256 бои. GIF се
вчитува брзо, постојат повеќе опции за оптимизирање, анимација и транспарентност.
б) JPEG (Joint Photographic Experts Group) - најдобар избор за фотографии и слики со широка
палета на бои. JPEG користи 24-битeн режим. Екстензијата на датотеките може да биде jpg и jpeg.
в) PNG (Portable Network Graphic) - нуди повеќе можности за управување со боите. PNG не
поддржува анимација и некои слики не се прикажуваат во постарите пребарувачи. Екстензијата на
сликите е png.
2. Вметнување на слики
Сликите можат да бидат:
- мали слики – кои ако се поставени на позадината на веб страницата нема да влијае на лентите
за навигација.
- поголеми слики чија локација е специфицирана (одредена од CSS). Според CSS се одредува
кога сликата ќе биде порамнета хоризонтално, порамнета вертикално, порамнета во двете
насоки, или да не биде порамнето воопшто.

24
Мора да ги снимате сликите пред да ги вметнете во вашата веб страна. За поставување на слика
следете ги следниве опции:
а) различни страни (преку креирање на стил)
1) изберете Modify/Page Properties, категорија, Apperance
2) изберете ја опцијата Browse - за пребарување на слики.
б) поставување на сите страници на сајтот (преку креирање на надворешен стил)
1) во случај ако немате надворешен стил (надворешно правило), вие треба да креирате
надворешено правило, доколку имате изберете го панелот-CSS Styles, list All Rules-select the
rule body, изберете ја опцијата Edit Style.
2) се отвора прозорецот Css Rule definition for body in име_на_фајл, од категоријата
Backrounds изберете Browse.
3) се отвора прозорецот Select Image Source изберете - find the image of preference, изберете ОК
или select ако сакате да вметнете нова слика.
Ако фајлот со сликата не се наоѓа на локалната веб страна, тогаш Dreamweaver ќе покаже
предупредување и ќе побара да ја ставите сликата на локалната веб страна. Сите страници и
елементи што ги користите се наоѓаат во главната папка. Дополнително можете да употребите
елементи што не се наоѓаат во главната папка, но може да бидат пронајдени од Интернет. Поради
оваа намена ви е потребна апсолутната адреса на Интернет елементите. Некои елементи не се
прикажуваат во прозорецот на документот. За да ја тестирате страницата со нив треба тоа да го
направите во пребарувачот.
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, од категоријата Apperance, изберете го полето
Background - избришете го името на фајлот.
2н.) од алатаките на CSS, изберете Properties list, oпцијата Background attribute -
изберете промена или бришење на фајлот.
4. Поставување на слики на страниците
1) од лентата Insert, категорија Common, мени Images - изберете Image (или Insert /
Image)
2) се отвора дијалог прозорец Select Image Source – лоцирајте ја саканата слика
Preview images - преглед на сликата
Look in - избор на папка за пребарување на слика
Files of Type - се користи за прикажување само на одредени типови на датотеки

25
File name – го испишува името на селектиранa датотека
URL – претставува пат кој ќе биде користен од документот за пристап до сликата
Relative to: Document (стандардно) – релативна патека до сликата; оддесно се појавува името на
документот. Site Root – релативна патека до локацијата на сликата;
Опции за динамички веб страни:
○ File System - имплициран метод за избор на датотека за веб страна која не користи сервер
технологија
○ Data Sources - документот се создава на апликативен сервер (за динамички веб страни)
3)кликнете на OK.
4)во прозорецот Image Tag Accessibility Attributes во поле Alternate Text внесете алтернативен
текст и кликнете на OK. Aлтернативниот текст се појавува, ако корисниците забранат прикажување
на слики, ако некоја слика не успее да се вчита или поради некоја друга ситуација корисникот не
може да ја види сликата. Alt текст треба да е текст еквивалент на сликата, односно да ја опишува
сликата. Овој текст може да се менува од панелот Properties.
2. Работа со слики
1. Определување на големината и освежување на слики
1н.) селектирајте ја сликата и во Properties променете ги вредностите на полињата W и H,
ширина и висина на слика потоа притиснете Enter или кликнете во прозорецот на Document. Новите
атрибути за висина и ширина во тагот img ја прават сликата да изгледа помала или поголема.
2н.) кликнете на некој од селектираните манипулатори на сликата и променете ја големината
на сликата. За да се зачуваат пропорциите при димензионирање задржете го копчето Shift и
повлечете го маусот во долниот десен агол на селектираната слика.
3н.) преку програма за уредување на слики (како Macromedia Fireworks или Adobe Photoshop)
- се уредуваат големините на сликите. За да ги вратите оригиналните димензии на сликата изберете
ја опцијата Reset Image To Original Size од опцијата Properties.
Ако мора да користите многу големи слики или слики од други сервери може да дефинирате
слика со помал квалитет (low source слика). Целосната слика се појавува на нејзино место по
завршувањето на симнувањето. Low source сликата ја игра улогата на прозорец и таа се вчитува и се
дефинира во опцијата 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)

26
3. Давање имиња на слика
Давајте кратки имиња со мали букви и без интервали и специјални знаци. Ова име е само за
внатрешна употреба.
1) селектирајте ја сликата.
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 – внесете ја посакуваната дебелина.
5. Подесување на простор околу слика
Се користат мерни единици пиксели
1н.) преку CSS
1) аналогно на 4.1)
2) од прозорецот CSS Rule Definition, изберете ја категорија Box
Во областа Margin одштиклирајте го полето Same for all и направете ги потребните
поставувањa за Top, Right, Bottom, Left, Enter.
2н.) преку атрибутите H space, V space на тагот img – се постигнува подеднаква оддалеченост од
двете страни на сликата (не можете да направите само од едната страна, како со CSS)
2) од опцијата Properties, прекуполиња H space, V space - внесете ја саканата вредност.
6. Обработка на слики
1н.) преку програма за графичка обработка - потребно е да ја имате сликата на својот
компјутер и да ги направите следните промени:
1) изберете Edit / Preferences
2) се отвора прозорецот Preferences - се користи за поврзување на различни надворешни
програми.
3) од категорија File Types / се избира Editors
4) од листата Extensions изберете gif. Притиснете на + над листата Editors и селектирајте ја
графичката програма од типот на Fireworks и притиснете на Make Primary
5) повторете го чекорот 4) за екстензии jpeg и png и притиснете OK
7) отворете ја опцијата Properties
Преку Edit – ја отворате имодифицирате сликата во надворешната програма
Преку Optimize In Fireworks - промена на формата на сликата, квалитетот (за JPEG) и палета на бои
(за GIF)
Преку Resample - промена на резолуцијата на сликата.
- Уредување и промена на големината на сликата crop

27
2) од опцијата Properties, изберете ја опцијата Crop
Со помош на оваа алатка можете да ја промените големината на вашата слика.
- Осветленост и контраст
1) селектирај ја сликата
2) од опцијата Properties, изберете ја алатката Brightness And Contrast
3) се појавува прозорецот Brightness / Contrast кој има два лизгачи за избирање со опсег од -100
до +100. Направете ги посакуваните промени и кликнете OK
- Острина на слика
1) селектирај ја сликата
2) од опцијата Properties, изберете ја алатката Sharpen
3) се појавува прозорецот Sharpen кој има еден лизгач со опсег од 0 до 10. Направете ги
посакуваните промени и кликнете OK.
4. Креирање на графички симболи и мапи на слики
1. Креирање на графички референци (линкови)
2) од опцијата Properties, во полето за текст Link внесете ја патеката за поврзување
Апсолутните патеки почнуваат со http: // (HyperText Transfer Protocol) со што се поврзувате со
веб серверот. Додека апсолутните патеки ја претставуваат адресата на вашата локална веб страната.
Зачувајте ја датотеката и погледнете во пребарувач.
2. Мапирање на слики
Се користи за одделување на слика на неколку области.
а) мапирање на дел од слика
2) од опцијата Properties, изберете го полето Map (ако не се гледа кликнете
на (▼) во долниот десен агол на Properties) - внесете име на мапа (не користете специјални
знаци).
3) Од Properties, одберете ја алатката:
Rectangular Hotspot - се создава точка околу која се исцртува правоаголник
Shift + Rectangular Hotspot - се создава точка околу која се исцртува квадрат
Oval Hotspot - се создава точка околу која се исцртува круг
Polygon Hotspot - се создава точка околу која се исцртува фигура со комплексни форми; секое
кликање на Polygon Hotspot создава нова точка; секоја наредна точка се поврзува со
претходната со права линија.
б) големината на мапата
1) од опцијата Properties, изберете ја алатката Pointer Hotspot
2) извлечете простор со маусот ( така што областа да опфаќа само една точка)
в) поместување на точка од областа - поставете го курсорот во областа и повлечете
г) бришење на точка од областа – селектирајте ја и притиснете Backspace или Delete.

28
ТЕМА 7: Хипертекст и линкови како слика
1.Примена
Она што го прави Веб толку ефективен е способноста да бидат дефинирани линкови во рамките
на една страница или од една страница кон други страници, како и следењето на линковите со
едноставно кликнување со глувчето. Хиперврска или само врска (англ. hyperlink, link) е упат од еден
збор, слика или било каков информациски објект до друг таков објект. Во мултимедијалната природа,
како што е глобалната мрежа, таквите објекти вклучуваат звучни или видео записи. Најчест облик на
врска е препознатливиот збор или слика, којшто може да биде одбран од страна на корисникот (со
помош на глувчето или на некој друг начин), при што резултатот би бил моментална испорака или
увид на некоја друга поддатотека.
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 (или Insert /
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) напишете го текстот во делот mailto и Email адресата напишете ја до mailto: во
полето Link од Properties.
4. Уредување на дестинацијата на хиперлинк
1) кликнуваме на произволно место во веќе формираниот хиперлинк
2) во полето Link од Properties ги правите посакуваните промени.
5. Опредување на боја и формат на хиперлинкот

Nar makedonia

Recommended

Recommended

More Related Content

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

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

Nar makedonia