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

nex


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:[email protected]”>Пиши му на Петко!</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:[email protected]”>

<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. Опредување на боја и формат на хиперлинкот


29

Ако не бидат наведени бои на хиперлинковите, при вчитувањето на страницата ќе се користат

дефинирани вредности на пребарувачот. Тие можат да бидат различни во зависност од видот. Боите

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

да бидат хиперлинковите јасно видливи.

1) од Modify /изберете Page Properties ... категорија Links

2) поставување атрибути на хиперлинкот

Link Font - (same as page font) – хиперлинкови ги наследуваат атрибутите на стиловите во

документите

Link Color - боја на хиперлинкот, пред да биде посетен(стандардно е сината боја)

Visited Links - боја на хиперлинкот откако ќе биде посетен(стандардно е виолетова боја)

Rollover Links – боја на хиперлинкот кога врз него е позициониран покажувачот на глувчето .

Active Links - бојата на хиперлинкот во моментов кога кликнуваме со глувчето.

Бојата на хиперлинкот е претставена со хексадецимален број. Полето за боја се наоѓа лево од полето

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

Underline Style: - подвлекување на текст

Always Underline - секој текст да биде подвлечен

Never Underline - ниту еден текст да биде подвлечен

Show Underline Only on Rollover - текстот е подвлечен само кога курсорот се наоѓа

над хиперлинкот

Underline on Rollover - текстот го губи подвлекувањето кога курсорот не се наоѓа

над хиперлинкот

3) кликнете OK.

ТЕМА 8:Вметнување на флеш анимации и флеш копчиња

1. Креирање на флеш текст

Macromedia Flash е мултимедијална графичка програма која овозможува креирање

интерактивни “филмчиња” на Веб. Flash користи така наречена векторска графика, што значи дека

графиката може да се зголемува и намалува до било која големина без губење на квалитетот и

јасноста. Flash не побарува програмерски способности и е лесен за учење.

Flash дава слобода на развивање. Оваа апликација дозволува дизајнерот да позиционира објект каде

што сака без воопшто да се грижи за апсолутно или релативно позиционирање. Заради векторката

графика и нејзината способност да се приспособува, користењето на Flash има голема предност над

другите заради потребата за пребарување на Интернет од други алтернативни извори различни од

десктоп компјутерите како што се PDA, мобилни телефони, екрани во кола итн. Анимираните слики

и јава аплети се често користени за да се креира динамички ефект на Веб страниците. Flash е подобар

од нив затоа што се вчитува многу побрзо отколку анимираните слики. Flash не побарува

програмерски способности, што јава аплетите ги побаруваат.

2. Додавање на Flash копче

Копче во Flash можете да создадете на повеќе начини. Можете готова слика да ја претворите

во копче, можете да користите некои од веќе постоечките копчиња во Flash или сами може да си

креирате ваше сопствено копче.

Во овој пример ќе научите како да се конвертира слика во копче и тоа дастане линк до одреденa

адреса.


30

Чекор 1) Избирате File > Import за да импортирате слика која ќе стане копче. Ја наоѓате сликата и

кликнувате Open. Сликата ќе биде зачувана во Library панелот.

Чекор 2) Создавате нов layer за сликата и ја сместувате сликата во него

Чекор 3) Ја конвертирате сликата во симбол. Тоа го правите со десен клик на сликата и со избирање

на опцијата Convert to Symbol. Го именувате симболот “ButtonImage” и одбирате да биде Button.

Кликнувате ОК.

Чекор 4) Ја селектирате сликата и одите во панелот Behaviors

Чекор 5) Го кликнувате знакчето + и се отвора мени за различни начини на однесување кои можете

да ги зададете на селектираниот објект. Ја избирате опцијата Web > Go to Web Page

Чекор 6) Го внесувате целото URL до кое што сакате да ве води копчето кое што го креиравте

Чекор 7) Селектирате во која страна ќе се отвора страницата до која сакате копчето да ви биде линк.

Кликнувате ОК

Чекор 8) Избирате Control > Test Movie

3. Поставување на Flash анимација Креирање на едноставна Flash анимација

Чекор 1) Внесувате текст во горниот лев агол на stage-от. Тоа го правите со селектирање на текст

алатката од левиот панел. Внесувате некој текст во полето.

Чекор 2) Ја одбирате стрелката од левиот панел. Го селектирате текстот.

Чекор 3) Го конвертирате текстот во симбол. Со десен клик на текстот ја избирате опцијата Convert

to Symbol. Го именувате симболот “MyAnimation” и одбирате да биде Graphic. Кликнувате ОК.

Чекор 4) Одите во frame 30 во Timeline. Со десен клик ја избирате опцијата Insert Keyframe.

Забележувате дека навистина сте вметнале keyframe со тоа што во frame30 се појавува топче.

Чекор 5) Ги селектирате frame-овите од 1 до 30 и со десен клик ја избирате опцијата Create Motion

Tween.

Чекор 6) Го селетирате frame 30 и го поместувате тектот во долниот десен агол.

Чекор 7)Се уверувате дека текстот е селектиран. Од Properties панелот од Color менито избирате Tint,

и ги подесувате боите на R=0, G=255, B=0.

Чекор 8) Избирате Control > Test Movie. Текстот што го создадовте треба да се движи од горниот лев

агол (локацијата во frame 1) до втората локација (frame 30). Додека се движи текстот треба да ја

менува својата боја.

ТЕМА 9: Креирање на веб фото – албум

За да креирате фото албум во вашата веб

страна потребно е да имате инсталирано

Macromedia Fireworks.

1.Отварате Dreamweaver, и креирајте нова

html страна или во веќе постоечка во која

сакате да го вметнете вашиот фото албум.

2.Креирајте посебна папка во главната папка

во проектот во која ќе ги сместите сликите

кои ќе ви бидат потребни за креирање на

фото албумот.


31

3.Се враќате во Dreamweaver и одите на следните команди Commands - > Create Web Photo

Album.

- Ќе се отвори следниот прозорец кој е прикажан погоре на сликата во кој морате да ги внесете

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

својствата и параметрите на сликите кои мора да ги внесете:

- Photo Album Title – го внесувате името на вашиот фото – албум

- Subheading Info – ова поле е опционално, односно не е задолжително, доколку внесете

текст во ова поле тој текст ќе се прикаже на големата слика.

- Other Info – текстот кој ќе го напишете тука ќе се прикаже како текст на големата слика.

- Source Images Folder – тука избираме Browse и ја наоѓате папката каде се сместени сите

слики кои ви се потребни за креирање на вашиот веб албум и ги селектирате.

- Destination Folder – овој фолдер има специјална функција. Го креиравте овој фолдер во кој

се сместени вашите слики за фото албум во чекор 2.

- Thumbnail Size –тука го менувате размерот на Thumbnail сликите кои ги внесувате во фото

албумот. Најкористени се слики со размер 100 x 100.

- Columns – тука внесувате во колку колони сакате да се прикажуваат вашите слики во

Thumbnail формат (најдобро е во 4 или 5 колони).

- Thumbnail Format – можете да користите JPEG или GIF формат на слики.

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

- Откако сте завршиле со задавање на својставата на сликите, кликнете на ОК.

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

името Thumbnails. Креирањето на фото албумот ќе потрае неколку минути, во зависност

од тоа колку слики сте ставиле во папката, потоа ќе можете да го видите креираниот фото

албум.

1. На вашата веб страна предвидена за вметнување на фото албум ќе се прикажат сликите во

Thumbnail, односно ќе биде прикажан вашиот фото албум.

2. Под името на вашиот фото албум ќе се појават три други фолдери: Thumbnails, Images и

Pages.

Thumbnails – сите мали слики ќе бидат во оваа папка

Images – сите ваши слики во оригинална големина ќе бидат во оваа папка

Pages – во оваа папка ќе бидат сместени сите ваши страни кои имаат линк и се поврзани со

Thumbnails.

ТЕМА 10: Интерактивни форми. Вметнување и превртување (rollover) на слики

1. Предности

а) содржината на веб страната треба да биде едноставна и разбирлива за читање;

б) потребна е едноставна навигација помеѓу веб страните.

2. Алатки за вметнување на интерактивни елементи

а) користење нa динамични страни со база на податоци;

б) Macromedia Flash;

в)Quick Time Virtual Reality (QTVR) - поддржува 360-степенски панорамски поглед и

интерактивни компоненти;


32

г) JavaScript - се користи за креирање на скрипти, кои се извршуваат од пребарувачот на

клиентот;

д) Java Server Pages (JSP) – скрипти кои се извршуваат од страна на серверот и резултатите ги

праќаат на серверот;

ѓ) однесување на Dreamweaver – дијалог на програми со JavaScripts код кои можат лесно да се

вметнат во веб страницата.

Однесувањето е комбинација од акција или серија од активности и настан.

Дејството (action) е она што се врши како резултат на интервенцијата на корисникот (пример

Размена на една слика).

Настанот (event) е она што предизвикува појава на некое дејствие (на пример движење на

глувчето над сликата или притискање на некое копче).

3. Вметнување на rollover слики

Ваквите слики на кои со приближување со глувчето настануваат промени се викаат

rollover слики. Креирањето на ваквите слики се прави со две избрани слики, на следниот

начин:

1) Од Insert лентата, одите во категоријата Common, во менито Images, одите на Rollover

Images копчето (или Insert/ Interactive Images/Rollover Images).

2) Се отвара дијалог прозорецот Insert Rollover Images

Images Name – име на слика (по дефиниција имињата на сликите се Images1, Images2).

Имињата не треба да содржат празни места или специјални знаци и името на сликата не

смее да започне со број.

Browse копче – се бираат фајловите за оригиналните, почетни и за вторите, алтернативни

слики.

Alternate Text – се внесува алтернативен текст

Preload Rollover Image – со оваа опција се вчитува втората слика, а доколку не е вклучена

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

When click go to URL – се користи Browse копчето за селектирање на фајлот кој ќе биде

линк за креираната rollower слика. Овој фајл ќе се појави во полето Link во Properties при

селектирање на сликата.

________________________________________________________________________


33

ТЕМА 11. Создавање на нови стилови. Внатрешни и надворешни стилови

1. Дефиниција

а)Стил(Style) – уште познат како правило(rule) претставува множество од атрибути кои го

дефинираат и управуваат секој елемент;

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

в)Каскадни стилови(Cascading styles) –ја дефинираат хиерархијата и приоритетот на

стиловите.

2. Примена

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

(напишан во HTML или сличен markup language) за презентација на документот вклучувајќи

елементи како рапоредот на страната, боите и фонтот. Оваа поделба може да ја подобри

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

карактеристики, да им овозможи на повеќе страни да го споделат форматирањето и да ја

намалат комплексноста и повторувањето во структурната содржина.

3. Видови на стилови

а)Внатрешни – внатре во HTML документот, стил на информацијата за секој елемент,

одредена со употреба на style атрибутот.

б) Вградени стилови, блокови на CSS информации внатре во самиот HTML

в) Надворешни стилови, посебна CSS датотека референцирана од документот.

4. Креирање на нови внатрешни стилови

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

а)Промена на бојата на позадината – Background Color

б)Промена на фонтот - Page Font

в)Промена на големината на фонтот – Size

г) Избор на бојата на фонтот - Text Color

5. Креирање на нови надворешни стилови

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

а) Креирај стил за конкретен таг

1)Поставете го курсорот во текстот што користи таг или селектирајте таг во Tag

selector

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

3)Се отвара дијалог прозорец New CSS Rule. Одберете го тагот RadioButton

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

5)Од областа Define in одете во менито и одберете го множеството од надворешни

стилови и кликнете ОК;

6)Се отвара CSS Rule Definition…in…

Доколку сте ги направиле саканите поставки кликнете на ОК.

Фајлот со надворешните стилови се отвора автоматски во нов таб на Document прозорецот.

CSS фајлот можете да го видите во Code view.

б) Креирање стил за форматирање на текст со тагови за параграф

1)Поставете го покажувачот во саканиот параграф - Tag селекторот го покажува HTML

тагот p за дефинирањена параграф.

2) Во панелот CSS Styles, се избира иконата New CSS Rule.

3) Се отвора дијалог прозорецот New CSS Rule. Се избира Tag.


34

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

5) Од областа Define in одберете го копчето за мени и одберете го документот кој ќе го

користи стилот и одете на ОК.

6) Се отвора дијалог прозорец CSS Rule Definition ....in ... ...

Во потребните категории направете ги саканите поставки и одете на OK.

в) Креирање на стил за форматирање на листа

1)Поставете го покажувачот во 1-от ред на листата. Во Tag selector кликнете ul, ol (ова

се HTML тагови за листи, односно таг за подредени и неподредени листи)

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

3) Се отвора дијалог прозорец New CSS Rule, и се бира Tag

4) Текстуалното поле Tag треба да содржи ol. Ако не е така - изберете го.

5) Од областа Define in одберете го копчето за мени и одберете го документот кој ќе го

користи стилот и кликнете на ОК.

6) Се отвора дијалог прозорецот CSS Rule Definition ....in ... ..се отвора категоријата

Type каде е потребно да ги направете саканите поставки и на крај се клика на копчето OK.

ТЕМА 12: Што е CSS(Cascading Style Sheets)?

CSS е кратенка од Cascading Style Sheets. Дефинира како да се прикажуваат HTML

елементите, односно ја опишува семантиката на презентацијата на овие елементи. Најчесто преку

CSS се дефинираат стилови за веб страници, меѓутоа не се исклучени било какви XML или SVG

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

ТЕМА 13: Стилови во HTML документот

Додавање на Inline стилови со style атрибутот. За да се примени inline стил на некој елемент,

едноставно се користи style атрибутот за да се променистилот на елементот. На пример, ако треба да

се промени бојата на текстот нададен параграф во црвена наместо црна, се што треба да се направи е

да се додаде дефиницијата на стилот кон отворањето на параграфот:

<p style="color: red">

На пример, ако овој атрибут се постави во<body> елементот, тој ќе го постави фонтот на црвена боја

за целиот документ. Меѓутоа, ако истиот стил се постави само во еден параграф елемент, тoгаш

истиот ќе важи само за тој параграф. Во претходниот пример, style атрибутот е користен во

комбинација со color карактеристиката. На пример, некои карактеристики кои може да се користат

за промена на фонтот се: font-family, font-size, text-indent, font-style, color, итн. Користењето inline

стилови е слично на користење на некој атрибут на елементот. Меѓутоа, има неколку важни разлики

во синтаксата кои треба да се запаметат:

• Комбинациите карактеристика - вредност мора да бидат во наводници по атрибутот за стилизирање

(style):

<p style="карактеристикa: вредност;…. ">

• Карактеристиките и вредностите мора да бидат одвоени со две точки:

<p style="property: value">

• Комбинациите од карактеристики и вредности мора да се одвоени со точка-запирка:

<p style="property: value; property: value; property:

value">


35

Промена на големината на фонтот со font-size карактеристика.

Големината на фонтот може да се постави со користење на font-size карактеристиката.

Атрибутот за стилизирање (style) се вметнува во отворањето на параграфот со <p> ознаката и се

додава font-size карактеристиката заедно со опис за големината со која треба да се прикажуваат

знаците. На пример:

<p style="font-size: 36pt">This is 36pt text.</p>

Кратенка

За да се постави големината на фонтот за цела страна, атрибутот за стилизирање (style) се

вметнува во <body>ознаката.

Одбирање фонт со font-family карактеристиката

За да се одберат различни фонтови за страницата, се користи font-family карактеристиката

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

код:

<p style="font-family: Times-New-Roman">Times font</p>

Креирање на закосени букви со font-style карактеристиката

<p>Normal text</p>

<p style="font-style: italic">Italicized Text</p>

Одредување на бојата на фонтот со color карактеристиката <html>

<head>

<title>The color Property</title>

</head>

<body style="font-size: 16pt">

<p>Black</p>

<p style="color: silver">Silver</p>

<p style="color: gray">Gray</p>

<p style="color: maroon">Maroon</p>

<p style="color: red">Red</p>

<p style="color: purple">Purple</p>

<p style="color: fuchsia">Fuchsia</p>

<p style="color: green">Green</p>

<p style="color: lime">Lime</p>

<p style="color: olive">Olive</p>

<p style="color: yellow">Yellow</p>

<p style="color: navy">Navy</p>

<p style="color: blue">Blue</p>

<p style="color: teal">Teal</p>

<p style="color: aqua">Aqua</p>

<p style="color: white;

background-color: black">White</p>

</body>

</html> Креирање на задебелени букви со font-weight карактеристика

Во примерот, само се вклучува опцијата за задебелени букви: <html>

<head>

<title>The font-weight Property</title>

</head>

<body style="font-size: 16pt">

<p>This is normal text.</p>

<p style="font-weight: bold">

This is bold text.</p>

</body>


36

</html> Вовлекување на текст со CSS

За да се додаде вовлекување на парагграф, треба да се додаде следниот inline стил при

неговото започнување:

<p style="text-indent: 5%"> Со оваа инструкција текстот е вовлечен 5% од големината на прозорецот

на пребарувачот.

Позиција и подредување на текст со CSS

За позиционирање на текстот со CSS се користи text-align карактеристиката, како: <p style="text-align: center">This center-aligns text.</p>

<p style="text-align: right">This right-aligns text.</p>

<p style="text-align: justify">This justifies text.</p>

<p style="text-align: left">This left-aligns text.</p>

Контрола на целата страница со Embedded Style Sheet

За да се контролираат стиловите на целата страна се користи embedded style sheet кој се

поставува меѓу <head> ознаките на HTML страната со користење на <style>елементот. Доколку на

некое место постои inline стил тогаш тој има предност над вградениот (каскада). За да се постави

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

темносина боја и жолта позадина се креира правило како следното: <style type="text/css">

p{ color: navy;

font-weight: bold;

font-size: 12pt;

background-color: yellow; } </style>

Напомена:

Кога се користи вградено или надворешно дефинирање на стил, се вклучува и type=" " атрибутот со

вредност поставена на "text/css", како во претходниот пример. Ова му кажува на пребарувачот каков

тип на стил да очекува.

Контрола на елементите на повеќе страници со Linked Style Sheet

Со креирање на дефиниција за стилот и запишување на истата во одвоен документ,

дефиницијата може да се искористи за повеќе страници така што истата треба да се поврзе со

страниците во кои сакаме да се прикажува дефинираниот стил. На пример, ако претходната

дефиниција за стилот на параграфот е запишана во одвоен фајл, на пример, my_style.css и потоа тој

фајл се врзе за страницата со помош на <link> елементот се постигнува истиот ефект. <link>

елементот треба да се постави меѓу <head> ознаките на секоја страница за која треба да важи

дефиницијата на стилот и треба да се запише како: <link rel="stylesheet" type="text/css" href="my_style.css">

Зошто cascading?

Cascading се однесува на редоследот на приоритетот според кој се применуват

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

може да се применат на една страница: пребарувачот може да има негов стил, авторот може да

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

го прикажува материјалот. И уште повеќе, може да има повеќе различни стилови дефинирани во

linked, embedded, и inline style sheets. Со други зборови, за секоја страница постојат шест или седум

различни стилови кои се борат за правото како некој елемент треба да изгледа. Значи, кој стил го

добива последниот збор? Следните прашања даваат некои водилки за тоа како се одредува

приоритетот:


37

• Кој го напишал правилото? Во повеќето случаи, стилот на авторот на страницата добива

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

• Каков тип на стил е користен? Inline style вообичаено (но не секогаш) има приоритет над

embedded стил , а двата заедно над linked стил.

• Колку специфичен е селекторот? Селектор со повеќе детали има приоритет над селектор со

помалку детали.

• Кој стил последен се јавува? Вообичаено, последната најава има приоритет над претходните во

документот.

13. Креирање и користење на Style Sheets Најлесниот начин да се види CSS во акција и да се научи како да се користи е да се креира една

едноставна веб-страница и полека да се додаваат различни правила за стилот. Со ова, може да се

види како различните стилови влијаат врз целосниот изглед на страницата. Исто така се добива и

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

следат следните чекори:

1. Се поставуваат неколку текст параграфи меѓу <body> ознаките во HTML документ. Овие

параграфи може да бидат од било кој текстуален документ.

2. Текстот се форматира во најмалку 3 параграфи со користење на <p></p> елементи.

3. Се пишуваат три наслови и секој се вметнува пред секој параграф. Насловите се креираат со

помош на <h1> елемент.

HTML кодот би требало да изгледа нешто како: <html>

<head>

<title>CSS Sample Page</title>

</head>

<body>

<h1>This is going to be a headline.</h1>

<p>Paste a paragraph of text here.</p>

<h1>This will be another headline.</h1>

<p>Paste another paragraph of text here.</p>

<h1>This is a headline, too</h1>

<p>Paste a third paragraph here.</p>

</body>

</html>

14. Вметнување на Inline Style Sheet

Стилизирањето на страницата на пример се започнува со додавање на inline стил кон вториот

наслов менувајќи го фонтот во Arial, големина 18pt, боја сина, позиција централна. За да се направи

ова се користи style атрибутот со соодветните карактеристики.

<h1 style="font-family: arial; font-size: 18pt; color:

blue; text-align:center;">This will be another

headline.</h1>

15. Додавање на Embedded Style Sheet

За да се додаде embedded style sheet кон овој документ, се користи истата синтакса, но сега

наместо наводници се користат загради и правилата за стилот се поставуваат меѓу <style> ознаките

во <head> делот од страницата. На пример во една страница, да поставите позадината со жолта боја,

default фонт за <p> елементот, default големина и боја на фонт за <h1> елементот за сите страни во

вашата веб страна се прави со следните чекори:

1. Се вметнуваат <style></style> ознаките меѓу <head></head> ознаките на страницата

2. Се менува <style> ознаката во <style type="text/css">.


38

3. За поставување на жолта боја на позадината се пишува следното правило во body делот на

страницата:

body { background-color: yellow; }

4. За поставување на стил за h1:

h1 {background-color: aqua; font-size: 1.5em; color: navy;}

16. Креирање и поврзување со External Style Sheet

Исто како и со HTML, external style sheet може да се креира со едноставен текстуален едитор.

Треба да се води сметка дека документот ќе има наставка .css така што пребарувачот ќе може да го

идентификува. За да се конструира едноставен external style sheet, се следи процедурата:

1. Се креира нова датотека во некој текст едитор. Се запишува како plain text file со име my_styles.css.

2. Во датотеката се додаваат линиите:

body{margin-left: 15%; background-color: rgb(80%,80%,80%) }

h1{background-color: black; color: white; font-size:

2.2em;}

p.green { color: green; font-family: arial; font-weight:

bold;border-style: double; border-width: thick; bordercolor:

red; }

p.large { color: navy; font-size: 1.25em; background:

yellow; }

3. Датотеката се запишува и се отвора пример страницата.

17. Како се користат класи

Во претходниот код, селекторите p.green и p.large се наречени селектори на класи. Ова е начин

на менување на стандарден селектор, во овој случај “p”, и поставување на карактеристики во одвоени

класи. За да се повикаат карактеристиките на селекторот во дадена веб-страница, се додава class=” “

атрибутот кон соодветниот елемент. На пример, за да се применат карактеристиките на p.large врз

некој параграф, треба да се напише <p class="large">Content </p>. Користењето класи овозможува

скоро неограничена можност за дефинирање на детали за стиловите во страницата.

4. Од пример страницата се отстрануваат embedded и inline style sheet. (Ова

се прави за да може да се видат ефектите од надворешната дефиниција на стиловите без внатрешните

стилови да ги препокријат спецификациите)

5. Се додава следната линија во <head></head> делот:

<link rel="stylesheet" type="text/css" href="my_styles.css"/>

6. Се применува класата во страницата. Првиот <p> се менува во <p

class="green"> а вториот <p> во <p class="large">. <html>

<head>

<title>CSS Sample Page</title>

<link rel="stylesheet" type="text/css"

href="my_styles.css" />

</head>

<body>

<h1>This is going to be a headline.</h1>

<p class="green">Paste a paragraph of text here.</p>

<h1>This will be another headline.</h1>

<p class="large">Paste another paragraph of text

here.</p>

<h1>This will be a headline, too</h1>

<p>Paste a third paragraph here.</p>


39

</body>

</html>

18. Тип (елемент) селектори

Тип селекторите се изградени од едно или повеќе имиња на елементи. Со помош на тип

селекторите може да се постигне голема заштеда во време со групирање на повеќе селектори заедно

во единстевно правило со едноставно набројување и одвојување со запирка. На пример, ако сите

различни елементи за наслов треба да бидат сини, може да се напише едно правило кое ќе изгледа

како:

h1, h2, h3, h4, h5, h6 {color: blue}

Но тука не мора да се застане. Може да се додаде било кој друг елемент кон ова правило, само треба

да се одвои со запирка. Ако се заборави запирката тогаш се дефинира нов вид на селектор: descendent

селектор.

19. Descendent селектори

Descendent – селектори наследници порано биле нарекувани контекстуални селектори

бидејќи се основале на контекстот во кој се наоѓа елементот. Овој вид селектори се фокусира на

елемент кој е наследник на (со други зборови, е вгнезден во) друг елемент. На пример, ако треба да

се промени <strong> елементот за да се прикаже црвен задебелен текст, но ова треба да се случува

само кога тој се користи во <h1> елементот. Тогаш се креира селектор наследник со правило како:

h1 strong {color: red; font-weight: bold;}

Кога ќе го применува правилото, прегледувачот ќе го менува само <strong> елементот кога е

вгнезден во <h1>.

20. Класни селектори

Класните селектори овозможуваат креирање на сопствени селектори кои се однесуваат на

единствено име за идентификација кое го доделува авторот. Ако на пример се креира веб-страница

со листа на рецепти, и потребно е имињата на сите рецепти да бидат форматирани на одреден начин.

Наместо да се додава inline стил на секое име посебно, може да се креира класен селектор за тој

специјален вид информација. За да се креира класа, потребно е да се даде името на класата пред кое

стои точка, како во следното правило:

recipeName{font-family: arial; color: blue; font-size:1.5em}

Потоа, овој стил се применува во веб-страница со додавање на class атрибутот таму каде што стилот

треба да се појави, како на пример:

<p class="recipeName">Style will be applied here</p>

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

името на класата, како:

p.recipeName {font-family: arial; color: blue; font-size:1.5em}

Оваа класа е ограничена на употреба само заедно со <p> елемент.

21. ID Селектор

ID селекторот е добар избор ако треба да се обезбеди висок степен на спецификација кај

селекторите. Причината за ова е тоа што ID-то мора да е уникатно во секој документ. Односно

дадено ID може да се искористи само еднаш во страна. ID селектор се креира со поставување на

тараба (#) пред ID името. Како и со класните селектори, името може да е било како. Така на пример,

стил со правило за изглед би изгледал како

#copyrightInfo {font-size: .80em; font-family: arial}

За да се примени стилот во веб-страница, се користи ID атрибутот:

<p id="copyrightInfo">Style will be applied here.</p>


40

22. Псевдо-класи за линкови

Псевдо-класи селекторите се развиени за да се постават условите кои можат да се појават на

Веб-страница а кои не се рефлектираат врз самиот HTML код. Најкорисни псевдо-класи се :link,

:visited, :active, и :hover. Ако овие се комбинираат со А селектор може да се постават боите и

изгледот на линковите во страната, како со следните правила:

a:link {color: blue; font-style: italic}

a:visited {color: purple; font-style: normal}

a:active {color: green; font-style: italic}

a:hover {color: red; font-style: italic}

<div>, <span>, и наследување

Овие два елемента немаат функција и се генерички по природа. Но може да се искористат на многу

различни начини. <div> елементот е елемент на ниво на блок, додека <span> се однесува на линија.

Блоковските елементи креираат одвоена област на страницата и вметнуваат дополнителен простор

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

се користи<div>. На пример, ако постои дел од страната каде треба да има друга позадинска боја.

Позадината може да се дефинира кај секој елемент во тој дел, или тој дел едноставно може да се

постави меѓу <div> ознаки. Потоа потребно е да се примени новата позадина на <div>, и другите

елементи ќе го наследат новиот стил, како во следниот код:

<div style="background-color: blue">

<h1>All of this content</h1>

<h2>will have a</h2>

<p>blue background</p>

</div>

<p>This content returns to the default background.</p>

Од друга страна, ако треба да се примени стил во внатрешноста на параграф се користи<span>. На

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

стави меѓу <span> ознаки и потоа на нив да се додели потребниот стил, како:

<p>This is a generic paragraph using the page's default

font. <span style="font-style: italic">However, this text

will display in italics.</span> This text returns to the

default font style.</p>

Друг важен концепт е наследувањето. Во повеќето случаи, елемент кој е наследник (вгнезден во)

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

23. Текст: карактеристики за подредување и одвојување

• Word-spacing – за дефинирање на дополнителен простор меѓу зборовите користејќи иста мерка

како кај fontsize. default е normal.

h1 {word-spacing: .1em;}

• Letter-spacing – промена на default просторот меѓу буквите. normal е default.

h1 {word-spacing: .1em; letter-spacing: .2cm; }

• Text-decoration – тука може да се додаваат вредности како underline, overline,

line-through, и blink. default е text-decoration: none.

• h1 {word-spacing: .1em; letter-spacing: .2cm;

text-decoration: underline; }

• Vertical-align – поставување на вертикално подредување, вредности вклучуваат


41

baseline, sub, super, top, text-top, middle, bottom, text-bottom, и percentage.

h1 em {vertical-align: super;}

Забелешка

Како додаток кон h1 селекторот, оваа линија исто така има додадено и em. За да се креира superscript

во h1 наслов, истиот треба да се постави меѓу <em></em> ознаки.

• Text-transform – може да се направи автоматско поставување на голема буква на почетокот на

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

h1 {word-spacing: .1em; letter-spacing: .2cm;

text-decoration: underline; text-transform: capitalize;}

• Text-align – работи исто како и align атрибутот. Може да се бира од вредностите

left, right, center, и justify. h1 {word-spacing: .1em; letter-spacing: .2cm;

text-decoration: underline; text-transform: capitalize;

text-align: center;}

• Text-indent – за вовлекување на текстот. Можните вредности се број, мерка или процент.

p {font-family: sans-serif; font-style: italic; fontvariant:

small-caps; font-weight: 700; font-size: 14pt;

color: blue; text-indent: .5in;}

• Line-height – ако треба да се направи поголемо растојание меѓу линиите. Се дефинира преку

вредност број, мерка или процент. p {font-family: sans-serif; font-style: italic; fontvariant:

small-caps; font-weight: 700; font-size: 14pt;

color: blue; text-indent: .5 in; line-height: 1em;} 24. Color и Background карактеристики

bgcolor и background атрибутите, но имаат и многу повеќе опции за работа:

• Background-color – со HTML може да се постави боја за позадина на цела страна или ќелија од

табела. CSS background-color овозможува поставување позадинска боја за било кој елемент.

body {background-color: yellow; }

• Background-image – поставување позадинска слика за било кој елемент.

body {background-color: yellow; background-image:

url(weavetile2.gif); }

• Background-repeat – начин на кој сликата ќе се повторува во позадина. Се бира меѓу повторување

низ целата страна, хоризонтално, вертикално или без повторување. Вредностите се: repeat, repeat-x

(horizontal), repeat-y (vertical), и norepeat.


url(weavetile2.gif);background-repeat: repeat-y; }

• Background-attachment – за да се креира воден печат со фиксна позадинска слика кој овозможува

содржината да се скролира. Опциите се scroll или fixed.


url(weavetile2.gif); background-repeat: repeat-y;

background-attachment: scroll; }

• Background-position – каде се јавува сликата со вредности top/center/bottom и left/center/right.


url(weavetile2.gif); background-repeat: repeat-y;

background-attachment: scroll; background-position: left;}

25. Контрола на маргини и рамки со box карактеристиките


42

• Margin-top (right, bottom, left) – се дефинираат маргините во мерки или проценти. Ако не се

дефинираат пребарувачот ги поставува автоматски.

body{background-color: yellow; background-image: url(weavetile2.gif); background-repeat: repeat-y; background-attachment: scroll;

background-position: left;

margin-left: 1in; margin-right: 1in;}

• Padding-top (right, bottom, left) – слично на cell-padding атрибутот кај табели.

• Border-style – за додавање рамка на елемент, може да се одбере една од 8 можности: solid, dashed,

dotted, inset, outset, ridge, groove, или double.

• Border-color – боја на рамката со до 4 можни вредности; кои се доделуваат исто како кај

маргините.

• Border-top-width (right-width, bottom-width, left-width) – за дефинирање на ширина на рамката

како: thin, medium, или thick, или преку мерка. p {font-family: sans-serif; font-style: italic;

font-variant: small-caps; font-weight: 700;

font-size: 14pt; color: blue;

text-indent: .5 in; line-height: 1em;

padding: .25in .50in;

border-style: inset;

border-color: red;

border-width: thick;}

Nar makedonia

Education

Transcript of Nar makedonia