SlideShare a Scribd company logo
1 of 23
Download to read offline
Проект:
Е-услуги, знаење за социјално зближување
2007CB16IPO007–2012-3-49
IPA Cross-Border Programme CCI Number 2007CB16IPO007
”Веб развој и методи за интернет едукација”
ПРИРАЧНИК ЗА УЧЕНИЦИ
Средно општинско училиште
„Ѓорче Петров”
Крива Паланка 2014 г.
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
2
СОДРЖИНА
HTML, ВЕБ ДИЗАЈН и CSS
Тема1: Подготовка за созадавање на веб страна.............................................................................................................................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
ТЕМА 3: Дизајнирање веб страни со помош на табели. Креирање на табели.Форматирање на табели. ............................26
1. Креирање на табели.....................................................................................................................................................................26
2. Форматирање на Ќелии- Properties. ..........................................................................................................................................27
3. Сортирање на табелата.............................................................................................................................................................27
4. Копирање на табела ....................................................................................................................................................................27
5. Вгнездени табели .........................................................................................................................................................................27
ТЕМА 4: Креирање на содржината на веб страницата ...............................................................................................................27
1. Внесување на текст.....................................................................................................................................................................27
2. Определување на структурата на содржината.....................................................................................................................28
3. Создавање на нови редови............................................................................................................................................................28
4. Поставување на прекриено празно место ...............................................................................................................................28
5. Порамнување на текст. ..............................................................................................................................................................28
6. Поставување на специјални знаци ............................................................................................................................................28
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
3
7. Форматирање на знаци ..............................................................................................................................................................28
8. Хоризонтални линии ...................................................................................................................................................................28
9. Автоматско поставување на датум ......................................................................................................................................29
10. Листи...........................................................................................................................................................................................29
ТЕМА 5: Работа со слики....................................................................................................................................................................31
1. Порамнување на слики.................................................................................................................................................................31
2. Работа со слики............................................................................................................................................................................33
3. Обработка на слики.....................................................................................................................................................................34
4. Креирање на графички симболи и мапи на слики....................................................................................................................35
ТЕМА 6: Хипертекст и линкови како слики ....................................................................................................................................36
1. Намена. ..........................................................................................................................................................................................36
2. Видови ...........................................................................................................................................................................................36
3. Создавање на хиперлинкови........................................................................................................................................................36
4. Уредување на дестинација на хиперлинк .................................................................................................................................37
5. Именување на линк како водич...................................................................................................................................................37
6. Додавање на линк како водич и насочување на внатрепниот хиперлинккон него.............................................................37
7. Додавање на линк како водич и насочување на надоворешниот хиперлинккон него .........................................................37
8. Уредување на линкови како водич..............................................................................................................................................37
9. Определување на боја и форма на хиперлинкот......................................................................................................................37
ТЕМА 7: Вметнување на флеш анимации и флеш копчиња..........................................................................................................38
1. Креирањена флеш текст ............................................................................................................................................................38
2. Додавање на флеш копче ............................................................................................................................................................39
3. Поставување на флеш анимација .............................................................................................................................................40
ТЕМА 8: Креирање на веб фото-албум..............................................................................................................................................40
ТЕМА 9: Интерактивни форми. Вметнување и превртување (rollover) на слики ....................................................................41
1. Предности.....................................................................................................................................................................................41
2. Алатки за вметнување на интерактивни елементи.............................................................................................................41
3. Вметнување на rollover слики.....................................................................................................................................................41
ТЕМА 10: Создавање на нови стилови. Внатрешни и надворешни стилови ..............................................................................43
1. Дефиниција....................................................................................................................................................................................43
2. Примена.........................................................................................................................................................................................43
3. Видови на стилови.......................................................................................................................................................................43
4. Креирање на нови внатрешни стилови. ...................................................................................................................................43
5. Креирање на нови надворешни стилови. ..................................................................................................................................44
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
4
ВЕБ ДИЗАЈН
ТЕМА 1: Подготовки за создавање на веб страна
1. Истражување
Пред да започнете со работа треба да знаете:
- За какви луѓе е наменета веб страната;
- Какви се интересите на посетителите;
- Зошто е неопходно правењето на вашата веб страната;
- Што сакате вашите посетители да научат;
- Каква содржина треба да ставите на веб страната;
- Важно е да ги познавате конкурентите и како тие ги уредуваат нивните веб страни.
2. Планирање и структура
Јасниот приказ и лесната едноставна употреба се најважните компоненти на една добро
уредена веб страна. Содржината на страната треба да има можност за комуникација со клиентите и
да биде лесна за употреба. Веб страната треба да има планирана структура. Додека при создавањете
на структурата од фајлови и папки, се препорачува оделни папки за различни видови фајлови (Папка
за HTML код, за мултимедија, за CSS податоци).
3. Разработка и дизајн на веб страната
Во овој чекор се создаваат основните насоки за стиловите на страната, внатрешното
уредување на страната, линковите, боите и другите алатки на веб страната.
4. Тестирање
Тестирањето на вашата веб страна се врши преку пребарувачите со цел да се види изгледот на
веб страницата (Firefox Mozzzila, Google Chrome, Safari..).
5. Подршка
Овој чекор се однесува на освежувањето на страницата како и на прифаќање на промените:
промена на содржината на страницата, редоследотот и слично.
ТЕМА 2: Dreamweaver 8
1.Стартување
Кога ќе ја отворите апликацијата
Macromedia Dreamweaver ќе ви се појават
следниве две опциии:
Designer - ги вклучува сите прозорци и
панели на Dreamweaver на начин погоден за
визуелно создавање на веб страни.
Coder - пригодна метода за програмери кои
работат основно со HTML и други јазици. Ако сте
почетник најдобро изберете Designer.
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
5
Кога ќе се отвори почетната страница на 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.
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.
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
6
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. Правила за именување на фајловите
Дозволено е користење на латински букви, арапски цифри (цифра не може да биде првиот
симбол од името) и долна црта.
6. Опишување на работниот простор
Работниот простор на апликацијата е даден на следната слика
Насловна лента
Лента со мени
Insert лента
лента со документи - Code, Designer, Split
Стандардна лента
Tag selector лента
Properties лента
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
7
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;
Favourites - за создавање на вашите најкористени алатки од мените Insert.
9. Поставување наслов на страницата
Насловот на веб страница се наоѓа во насловната лента на пребарувачот и треба да се зададе
пред да почнете да ја создавате содржината на вашата веб страница (во лентата Document во полето
Title се менува името на веб страната).
10. Преглед пред печатење
а) избор на пребарувач - секој пребарувач ги отвора страниците на различен начин и затоа е
добро да се тестираат страниците со различни пребарувачи:
1) изберете File/Preview во Browser/Edit Browser List
2) кога ќе се отвори прозорецот Preferences, ја избирате категоријата Preview in Browser
- потоа се покажуваат пребарувачите инсталирани на компјутерот, преку кои можете да
изберете од понудените пребарувачи (ако имате повеќе од 1 пребарувач). Доколку сакате да
додадете нов пребарувач одете на следниот знак (+) или одземете со (-);
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
8
б) преглед на страницата - изберете ja во лентата Document, опцијата Preview/Debug во Browser
(F12).
ТЕМА 3: Дизајнирање веб страни со помош на табели. Креирање на табели.
Форматирање на табели
Во 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 - е наслов на табелата и може да се наоѓа од горе, од долу, од лево или од десно на
табелата.
- Summary - ова својство служи за дополнителни информации кои не се прикажуваат на веб
страницата. Ова само ја опишува содржината на табелата. Кога е избрана табелата се покажуваат
хоризонтални и вертикални зелени линии. Тоа се ширината и висината на колоните и редовите. Тие
линии исчезнуваат кога ќе кликнете надвор од табелата со маусот. Можете да активирате и
деактивирате визуелна помош за табелата со избирање на View/Visual Aids/Table Widths. За
преминување од ќелија во келија користите Tab. При вметнување на долг текст табелата автоматски
ја менува ширината на ќелии. Најгорниот ред е ред за наслов и текстот напишан во него се центрира
и се здебелува.
2. Форматирање на ќелии - Properties
a) за поставување на боја на позадината на ќелијата, изберете Properties/BackGround Color (Bg)
- избирате нова боја на позадината, BackGround URL of cell – избор на промена на позадината.
б) автоматско форматирање на табелата:
1) Commands/Format Table…
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
9
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.
4) спојување на ќелии - селектирајте ги ќелиите/ редиците кои сакате да ги споите и одете на
следните својства Merge Cell or Modify/Table/Merge Cell.
5. Вгнездени табели
1) вметнете две табели
2) селектерајте ја ќелијата од првата табела каде што сакате да ја вметнете втората табела
3) селектирајте ја табелата: Edit / Cut
4) кликнете во ќелијата на втората табела каде сакате да ја вметнете другата табела и одете
Edit / Paste.
ТЕМА 4. Креирање на содржината на веб страницата
1. Внесување на текст
1н.) директно внесување во прозорецот на Dreamweaver
2н.) копирање на текст од друг документ
3н.) отворете еден HTML документ преку текст едитор и пишувате текст
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
10
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 (не укажува на конкретно порамнување),
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
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
11
Хоризонталната линија има фиксирано растојание под неа и над неа, кое може да се промени преку
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
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. Листи со дефиниции
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
12
Таквите листи се составени од термини и специјални дефинирани зборови - дефиниција.
Дефинираниот збор е порамнен во лево, а неговото значење - дефиницијата е сместена веднаш под
него. Се избира со Text/List/Definition List.
5. Листи по дефиниција
Text/List/Definition List
ТЕМА 5: Работа со слики
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 се одредува
кога сликата ќе биде порамнета хоризонтално, порамнета вертикално, порамнета во двете
насоки, или да не биде порамнето воопшто.
Мора да ги снимате сликите пред да ги вметнете во вашата веб страна. За поставување на слика
следете ги следниве опции:
а) различни страни (преку креирање на стил)
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 ќе покаже
предупредување и ќе побара да ја ставите сликата на локалната веб страна. Сите страници и
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
13
елементи што ги користите се наоѓаат во главната папка. Дополнително можете да употребите
елементи што не се наоѓаат во главната папка, но може да бидат пронајдени од Интернет. Поради
оваа намена ви е потребна апсолутната адреса на Интернет елементите. Некои елементи не се
прикажуваат во прозорецот на документот. За да ја тестирате страницата со нив треба тоа да го
направите во пребарувачот.
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 - се користи за прикажување само на одредени типови на датотеки
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.
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
14
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)
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 – внесете ја посакуваната дебелина.
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
15
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)
1) селектирајте ја сликата
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
6) селектирајте ја сликата
7) отворете ја опцијата Properties
Преку Edit – ја отворате имодифицирате сликата во надворешната програма
Преку Optimize In Fireworks - промена на формата на сликата, квалитетот (за JPEG) и палета на бои
(за GIF)
Преку Resample - промена на резолуцијата на сликата.
- Уредување и промена на големината на сликата crop
1) селектирајте ја сликата
2) од опцијата Properties, изберете ја опцијата Crop
Со помош на оваа алатка можете да ја промените големината на вашата слика.
- Осветленост и контраст
1) селектирај ја сликата
2) од опцијата Properties, изберете ја алатката Brightness And Contrast
3) се појавува прозорецот Brightness / Contrast кој има два лизгачи за избирање со опсег од -100
до +100. Направете ги посакуваните промени и кликнете OK
- Острина на слика
1) селектирај ја сликата
2) од опцијата Properties, изберете ја алатката Sharpen
3) се појавува прозорецот Sharpen кој има еден лизгач со опсег од 0 до 10. Направете ги
посакуваните промени и кликнете OK.
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
16
4. Креирање на графички симболи и мапи на слики
1. Креирање на графички референци (линкови)
1) селектирајте ја сликата
2) од опцијата Properties, во полето за текст Link внесете ја патеката за поврзување
Апсолутните патеки почнуваат со http: // (HyperText Transfer Protocol) со што се поврзувате со
веб серверот. Додека апсолутните патеки ја претставуваат адресата на вашата локална веб страната.
Зачувајте ја датотеката и погледнете во пребарувач.
2. Мапирање на слики
Се користи за одделување на слика на неколку области.
а) мапирање на дел од слика
1) селектирајте ја сликата
2) од опцијата Properties, изберете го полето Map (ако не се гледа кликнете
на (▼) во долниот десен агол на Properties) - внесете име на мапа (не користете специјални
знаци).
3) Од Properties, одберете ја алатката:
Rectangular Hotspot - се создава точка околу која се исцртува правоаголник
Shift + Rectangular Hotspot - се создава точка околу која се исцртува квадрат
Oval Hotspot - се создава точка околу која се исцртува круг
Polygon Hotspot - се создава точка околу која се исцртува фигура со комплексни форми; секое
кликање на Polygon Hotspot создава нова точка; секоја наредна точка се поврзува со
претходната со права линија.
б) големината на мапата
1) од опцијата Properties, изберете ја алатката Pointer Hotspot
2) извлечете простор со маусот ( така што областа да опфаќа само една точка)
в) поместување на точка од областа - поставете го курсорот во областа и повлечете
г) бришење на точка од областа – селектирајте ја и притиснете Backspace или Delete.
ТЕМА 6: Хипертекст и линкови како слика
1. Примена
Она што го прави Веб толку ефективен е способноста да бидат дефинирани линкови во рамките
на една страница или од една страница кон други страници, како и следењето на линковите со
едноставно кликнување со глувчето. Хиперврска или само врска (англ. hyperlink, link) е упат од еден
збор, слика или било каков информациски објект до друг таков објект. Во мултимедијалната природа,
како што е глобалната мрежа, таквите објекти вклучуваат звучни или видео записи. Најчест облик на
врска е препознатливиот збор или слика, којшто може да биде одбран од страна на корисникот (со
помош на глувчето или на некој друг начин), при што резултатот би бил моментална испорака или
увид на некоја друга поддатотека.
2. Видови
а) релативни - тие се во границите на една веб страна и водат до датотеки од папките на веб
страната. За пристап до нив се користи само надворешен пат.
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
17
б) апсолутни - линк до целосна веб адреса на некоја веб страна.
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. Опредување на боја и формат на хиперлинкот
Ако не бидат наведени бои на хиперлинковите, при вчитувањето на страницата ќе се користат
дефинирани вредности на пребарувачот. Тие можат да бидат различни во зависност од видот. Боите
на хиперлинковите треба да се контрастни (но не премногу) со позадината и со другите елементи, за
да бидат хиперлинковите јасно видливи.
1) од Modify /изберете Page Properties ... категорија Links
2) поставување атрибути на хиперлинкот
Link Font - (same as page font) – хиперлинкови ги наследуваат атрибутите на стиловите во
документите
Link Color - боја на хиперлинкот, пред да биде посетен(стандардно е сината боја)
Visited Links - боја на хиперлинкот откако ќе биде посетен(стандардно е виолетова боја)
Rollover Links – боја на хиперлинкот кога врз него е позициониран покажувачот на глувчето .
Active Links - бојата на хиперлинкот во моментов кога кликнуваме со глувчето.
Бојата на хиперлинкот е претставена со хексадецимален број. Полето за боја се наоѓа лево од полето
за текст - се отвора палета со различни нијанси на бои (се отвора мени со други видови, теми).
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
18
Underline Style: - подвлекување на текст
Always Underline - секој текст да биде подвлечен
Never Underline - ниту еден текст да биде подвлечен
Show Underline Only on Rollover - текстот е подвлечен само кога курсорот се наоѓа
над хиперлинкот
Underline on Rollover - текстот го губи подвлекувањето кога курсорот не се наоѓа
над хиперлинкот
3) кликнете OK.
ТЕМА 7: Вметнување на флеш анимации и флеш копчиња
1. Креирање на флеш текст
Macromedia Flash е мултимедијална графичка програма која овозможува креирање
интерактивни “филмчиња” на Веб. Flash користи така наречена векторска графика, што значи дека
графиката може да се зголемува и намалува до било која големина без губење на квалитетот и
јасноста. Flash не побарува програмерски способности и е лесен за учење.
Flash дава слобода на развивање. Оваа апликација дозволува дизајнерот да позиционира објект каде
што сака без воопшто да се грижи за апсолутно или релативно позиционирање. Заради векторката
графика и нејзината способност да се приспособува, користењето на Flash има голема предност над
другите заради потребата за пребарување на Интернет од други алтернативни извори различни од
десктоп компјутерите како што се PDA, мобилни телефони, екрани во кола итн. Анимираните слики
и јава аплети се често користени за да се креира динамички ефект на Веб страниците. Flash е подобар
од нив затоа што се вчитува многу побрзо отколку анимираните слики. Flash не побарува
програмерски способности, што јава аплетите ги побаруваат.
2. Додавање на Flash копче
Копче во Flash можете да создадете на повеќе начини. Можете готова слика да ја претворите
во копче, можете да користите некои од веќе постоечките копчиња во Flash или сами може да си
креирате ваше сопствено копче.
Во овој пример ќе научите како да се конвертира слика во копче и тоа дастане линк до одреденa
адреса.
Чекор 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
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
19
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). Додека се движи текстот треба да ја
менува својата боја.
ТЕМА 8: Креирање на веб фото – албум
За да креирате фото албум во вашата веб
страна потребно е да имате инсталирано
Macromedia Fireworks.
1.Отварате Dreamweaver, и креирајте нова
html страна или во веќе постоечка во која
сакате да го вметнете вашиот фото албум.
2.Креирајте посебна папка во главната папка
во проектот во која ќе ги сместите сликите
кои ќе ви бидат потребни за креирање на
фото албумот.
3.Се враќате во Dreamweaver и одите на
следните команди Commands - > Create Web Photo Album.
- Ќе се отвори следниот прозорец кој е прикажан погоре на сликата во кој морате да ги внесете
параметрите за вашиот фото албум кој сакате да го креирате. Во продолжение се објаснени
својствата и параметрите на сликите кои мора да ги внесете:
- Photo Album Title – го внесувате името на вашиот фото – албум
- Subheading Info – ова поле е опционално, односно не е задолжително, доколку внесете
текст во ова поле тој текст ќе се прикаже на големата слика.
- Other Info – текстот кој ќе го напишете тука ќе се прикаже како текст на големата слика.
- Source Images Folder – тука избираме Browse и ја наоѓате папката каде се сместени сите
слики кои ви се потребни за креирање на вашиот веб албум и ги селектирате.
- Destination Folder – овој фолдер има специјална функција. Го креиравте овој фолдер во кој
се сместени вашите слики за фото албум во чекор 2.
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
20
- 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.
ТЕМА 9: Интерактивни форми. Вметнување и превртување (rollover) на слики
1. Предности
а) содржината на веб страната треба да биде едноставна и разбирлива за читање;
б) потребна е едноставна навигација помеѓу веб страните.
2. Алатки за вметнување на интерактивни елементи
а) користење нa динамични страни со база на податоци;
б) Macromedia Flash;
в)Quick Time Virtual Reality (QTVR) - поддржува 360-степенски панорамски поглед и
интерактивни компоненти;
г) JavaScript - се користи за креирање на скрипти, кои се извршуваат од пребарувачот на
клиентот;
д) Java Server Pages (JSP) – скрипти кои се извршуваат од страна на серверот и резултатите ги
праќаат на серверот;
ѓ) однесување на Dreamweaver – дијалог на програми со JavaScripts код кои можат лесно да се
вметнат во веб страницата.
Однесувањето е комбинација од акција или серија од активности и настан.
Дејството (action) е она што се врши како резултат на интервенцијата на корисникот (пример
Размена на една слика).
Настанот (event) е она што предизвикува појава на некое дејствие (на пример движење на
глувчето над сликата или притискање на некое копче).
3. Вметнување на rollover слики
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
21
Ваквите слики на кои со приближување со глувчето настануваат промени се викаат
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 при
селектирање на сликата.
________________________________________________________________________
ТЕМА 10. Создавање на нови стилови. Внатрешни и надворешни стилови
1. Дефиниција
а)Стил(Style) – уште познат како правило(rule) претставува множество од атрибути кои го
дефинираат и управуваат секој елемент;
б)Style Sheet – група на стилови;
в)Каскадни стилови(Cascading styles) –ја дефинираат хиерархијата и приоритетот на
стиловите.
2. Примена
CSS е предвиден првенствено за да се овозможи поделба на содржината на документот
(напишан во HTML или сличен markup language) за презентација на документот вклучувајќи
елементи како рапоредот на страната, боите и фонтот. Оваа поделба може да ја подобри
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
22
содржината, да овозможи флексибилност и контрола во одредбите на презентирање
карактеристики, да им овозможи на повеќе страни да го споделат форматирањето и да ја
намалат комплексноста и повторувањето во структурната содржина.
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.
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. Ако не е така - изберете го.
Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013
23
5) Од областа Define in одберете го копчето за мени и одберете го документот кој ќе го
користи стилот и кликнете на ОК.
6) Се отвора дијалог прозорецот CSS Rule Definition ....in ... ..се отвора категоријата
Type каде е потребно да ги направете саканите поставки и на крај се клика на копчето OK.

More Related Content

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

P2
P2P2
P2
 
P1
P1P1
P1
 
Anketa skc
Anketa skcAnketa skc
Anketa skc
 
Analiz rs214
Analiz rs214Analiz rs214
Analiz rs214
 
Stari zanati
Stari zanatiStari zanati
Stari zanati
 
Analiz l1
Analiz l1Analiz l1
Analiz l1
 
Analiz l
Analiz lAnaliz l
Analiz l
 
изследване
изследванеизследване
изследване
 
описание на стари занаяти 1
описание на стари занаяти 1 описание на стари занаяти 1
описание на стари занаяти 1
 
Oписание на стари занаяти
Oписание на стари занаятиOписание на стари занаяти
Oписание на стари занаяти
 
Pr strategy l
Pr strategy lPr strategy l
Pr strategy l
 
Broshura surdulica
Broshura surdulicaBroshura surdulica
Broshura surdulica
 
Broshure
BroshureBroshure
Broshure
 
Recepti
ReceptiRecepti
Recepti
 
Strategija
StrategijaStrategija
Strategija
 
press release en
press release   enpress release   en
press release en
 
Наръчник на учетеля
Наръчник на учетеляНаръчник на учетеля
Наръчник на учетеля
 
BALKANSKA CHERGA
BALKANSKA CHERGABALKANSKA CHERGA
BALKANSKA CHERGA
 

ПРИРАЧНИК ЗА УЧЕНИЦИ / Ръководство Ученици

  • 1. Проект: Е-услуги, знаење за социјално зближување 2007CB16IPO007–2012-3-49 IPA Cross-Border Programme CCI Number 2007CB16IPO007 ”Веб развој и методи за интернет едукација” ПРИРАЧНИК ЗА УЧЕНИЦИ Средно општинско училиште „Ѓорче Петров” Крива Паланка 2014 г.
  • 2. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 2 СОДРЖИНА HTML, ВЕБ ДИЗАЈН и CSS Тема1: Подготовка за созадавање на веб страна.............................................................................................................................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 ТЕМА 3: Дизајнирање веб страни со помош на табели. Креирање на табели.Форматирање на табели. ............................26 1. Креирање на табели.....................................................................................................................................................................26 2. Форматирање на Ќелии- Properties. ..........................................................................................................................................27 3. Сортирање на табелата.............................................................................................................................................................27 4. Копирање на табела ....................................................................................................................................................................27 5. Вгнездени табели .........................................................................................................................................................................27 ТЕМА 4: Креирање на содржината на веб страницата ...............................................................................................................27 1. Внесување на текст.....................................................................................................................................................................27 2. Определување на структурата на содржината.....................................................................................................................28 3. Создавање на нови редови............................................................................................................................................................28 4. Поставување на прекриено празно место ...............................................................................................................................28 5. Порамнување на текст. ..............................................................................................................................................................28 6. Поставување на специјални знаци ............................................................................................................................................28
  • 3. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 3 7. Форматирање на знаци ..............................................................................................................................................................28 8. Хоризонтални линии ...................................................................................................................................................................28 9. Автоматско поставување на датум ......................................................................................................................................29 10. Листи...........................................................................................................................................................................................29 ТЕМА 5: Работа со слики....................................................................................................................................................................31 1. Порамнување на слики.................................................................................................................................................................31 2. Работа со слики............................................................................................................................................................................33 3. Обработка на слики.....................................................................................................................................................................34 4. Креирање на графички симболи и мапи на слики....................................................................................................................35 ТЕМА 6: Хипертекст и линкови како слики ....................................................................................................................................36 1. Намена. ..........................................................................................................................................................................................36 2. Видови ...........................................................................................................................................................................................36 3. Создавање на хиперлинкови........................................................................................................................................................36 4. Уредување на дестинација на хиперлинк .................................................................................................................................37 5. Именување на линк како водич...................................................................................................................................................37 6. Додавање на линк како водич и насочување на внатрепниот хиперлинккон него.............................................................37 7. Додавање на линк како водич и насочување на надоворешниот хиперлинккон него .........................................................37 8. Уредување на линкови како водич..............................................................................................................................................37 9. Определување на боја и форма на хиперлинкот......................................................................................................................37 ТЕМА 7: Вметнување на флеш анимации и флеш копчиња..........................................................................................................38 1. Креирањена флеш текст ............................................................................................................................................................38 2. Додавање на флеш копче ............................................................................................................................................................39 3. Поставување на флеш анимација .............................................................................................................................................40 ТЕМА 8: Креирање на веб фото-албум..............................................................................................................................................40 ТЕМА 9: Интерактивни форми. Вметнување и превртување (rollover) на слики ....................................................................41 1. Предности.....................................................................................................................................................................................41 2. Алатки за вметнување на интерактивни елементи.............................................................................................................41 3. Вметнување на rollover слики.....................................................................................................................................................41 ТЕМА 10: Создавање на нови стилови. Внатрешни и надворешни стилови ..............................................................................43 1. Дефиниција....................................................................................................................................................................................43 2. Примена.........................................................................................................................................................................................43 3. Видови на стилови.......................................................................................................................................................................43 4. Креирање на нови внатрешни стилови. ...................................................................................................................................43 5. Креирање на нови надворешни стилови. ..................................................................................................................................44
  • 4. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 4 ВЕБ ДИЗАЈН ТЕМА 1: Подготовки за создавање на веб страна 1. Истражување Пред да започнете со работа треба да знаете: - За какви луѓе е наменета веб страната; - Какви се интересите на посетителите; - Зошто е неопходно правењето на вашата веб страната; - Што сакате вашите посетители да научат; - Каква содржина треба да ставите на веб страната; - Важно е да ги познавате конкурентите и како тие ги уредуваат нивните веб страни. 2. Планирање и структура Јасниот приказ и лесната едноставна употреба се најважните компоненти на една добро уредена веб страна. Содржината на страната треба да има можност за комуникација со клиентите и да биде лесна за употреба. Веб страната треба да има планирана структура. Додека при создавањете на структурата од фајлови и папки, се препорачува оделни папки за различни видови фајлови (Папка за HTML код, за мултимедија, за CSS податоци). 3. Разработка и дизајн на веб страната Во овој чекор се создаваат основните насоки за стиловите на страната, внатрешното уредување на страната, линковите, боите и другите алатки на веб страната. 4. Тестирање Тестирањето на вашата веб страна се врши преку пребарувачите со цел да се види изгледот на веб страницата (Firefox Mozzzila, Google Chrome, Safari..). 5. Подршка Овој чекор се однесува на освежувањето на страницата како и на прифаќање на промените: промена на содржината на страницата, редоследотот и слично. ТЕМА 2: Dreamweaver 8 1.Стартување Кога ќе ја отворите апликацијата Macromedia Dreamweaver ќе ви се појават следниве две опциии: Designer - ги вклучува сите прозорци и панели на Dreamweaver на начин погоден за визуелно создавање на веб страни. Coder - пригодна метода за програмери кои работат основно со HTML и други јазици. Ако сте почетник најдобро изберете Designer.
  • 5. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 5 Кога ќе се отвори почетната страница на 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. 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.
  • 6. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 6 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. Правила за именување на фајловите Дозволено е користење на латински букви, арапски цифри (цифра не може да биде првиот симбол од името) и долна црта. 6. Опишување на работниот простор Работниот простор на апликацијата е даден на следната слика Насловна лента Лента со мени Insert лента лента со документи - Code, Designer, Split Стандардна лента Tag selector лента Properties лента
  • 7. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 7 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; Favourites - за создавање на вашите најкористени алатки од мените Insert. 9. Поставување наслов на страницата Насловот на веб страница се наоѓа во насловната лента на пребарувачот и треба да се зададе пред да почнете да ја создавате содржината на вашата веб страница (во лентата Document во полето Title се менува името на веб страната). 10. Преглед пред печатење а) избор на пребарувач - секој пребарувач ги отвора страниците на различен начин и затоа е добро да се тестираат страниците со различни пребарувачи: 1) изберете File/Preview во Browser/Edit Browser List 2) кога ќе се отвори прозорецот Preferences, ја избирате категоријата Preview in Browser - потоа се покажуваат пребарувачите инсталирани на компјутерот, преку кои можете да изберете од понудените пребарувачи (ако имате повеќе од 1 пребарувач). Доколку сакате да додадете нов пребарувач одете на следниот знак (+) или одземете со (-);
  • 8. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 8 б) преглед на страницата - изберете ja во лентата Document, опцијата Preview/Debug во Browser (F12). ТЕМА 3: Дизајнирање веб страни со помош на табели. Креирање на табели. Форматирање на табели Во 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 - е наслов на табелата и може да се наоѓа од горе, од долу, од лево или од десно на табелата. - Summary - ова својство служи за дополнителни информации кои не се прикажуваат на веб страницата. Ова само ја опишува содржината на табелата. Кога е избрана табелата се покажуваат хоризонтални и вертикални зелени линии. Тоа се ширината и висината на колоните и редовите. Тие линии исчезнуваат кога ќе кликнете надвор од табелата со маусот. Можете да активирате и деактивирате визуелна помош за табелата со избирање на View/Visual Aids/Table Widths. За преминување од ќелија во келија користите Tab. При вметнување на долг текст табелата автоматски ја менува ширината на ќелии. Најгорниот ред е ред за наслов и текстот напишан во него се центрира и се здебелува. 2. Форматирање на ќелии - Properties a) за поставување на боја на позадината на ќелијата, изберете Properties/BackGround Color (Bg) - избирате нова боја на позадината, BackGround URL of cell – избор на промена на позадината. б) автоматско форматирање на табелата: 1) Commands/Format Table…
  • 9. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 9 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. 4) спојување на ќелии - селектирајте ги ќелиите/ редиците кои сакате да ги споите и одете на следните својства Merge Cell or Modify/Table/Merge Cell. 5. Вгнездени табели 1) вметнете две табели 2) селектерајте ја ќелијата од првата табела каде што сакате да ја вметнете втората табела 3) селектирајте ја табелата: Edit / Cut 4) кликнете во ќелијата на втората табела каде сакате да ја вметнете другата табела и одете Edit / Paste. ТЕМА 4. Креирање на содржината на веб страницата 1. Внесување на текст 1н.) директно внесување во прозорецот на Dreamweaver 2н.) копирање на текст од друг документ 3н.) отворете еден HTML документ преку текст едитор и пишувате текст
  • 10. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 10 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 (не укажува на конкретно порамнување), 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
  • 11. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 11 Хоризонталната линија има фиксирано растојание под неа и над неа, кое може да се промени преку 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 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. Листи со дефиниции
  • 12. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 12 Таквите листи се составени од термини и специјални дефинирани зборови - дефиниција. Дефинираниот збор е порамнен во лево, а неговото значење - дефиницијата е сместена веднаш под него. Се избира со Text/List/Definition List. 5. Листи по дефиниција Text/List/Definition List ТЕМА 5: Работа со слики 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 се одредува кога сликата ќе биде порамнета хоризонтално, порамнета вертикално, порамнета во двете насоки, или да не биде порамнето воопшто. Мора да ги снимате сликите пред да ги вметнете во вашата веб страна. За поставување на слика следете ги следниве опции: а) различни страни (преку креирање на стил) 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 ќе покаже предупредување и ќе побара да ја ставите сликата на локалната веб страна. Сите страници и
  • 13. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 13 елементи што ги користите се наоѓаат во главната папка. Дополнително можете да употребите елементи што не се наоѓаат во главната папка, но може да бидат пронајдени од Интернет. Поради оваа намена ви е потребна апсолутната адреса на Интернет елементите. Некои елементи не се прикажуваат во прозорецот на документот. За да ја тестирате страницата со нив треба тоа да го направите во пребарувачот. 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 - се користи за прикажување само на одредени типови на датотеки 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.
  • 14. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 14 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) 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 – внесете ја посакуваната дебелина.
  • 15. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 15 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) 1) селектирајте ја сликата 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 6) селектирајте ја сликата 7) отворете ја опцијата Properties Преку Edit – ја отворате имодифицирате сликата во надворешната програма Преку Optimize In Fireworks - промена на формата на сликата, квалитетот (за JPEG) и палета на бои (за GIF) Преку Resample - промена на резолуцијата на сликата. - Уредување и промена на големината на сликата crop 1) селектирајте ја сликата 2) од опцијата Properties, изберете ја опцијата Crop Со помош на оваа алатка можете да ја промените големината на вашата слика. - Осветленост и контраст 1) селектирај ја сликата 2) од опцијата Properties, изберете ја алатката Brightness And Contrast 3) се појавува прозорецот Brightness / Contrast кој има два лизгачи за избирање со опсег од -100 до +100. Направете ги посакуваните промени и кликнете OK - Острина на слика 1) селектирај ја сликата 2) од опцијата Properties, изберете ја алатката Sharpen 3) се појавува прозорецот Sharpen кој има еден лизгач со опсег од 0 до 10. Направете ги посакуваните промени и кликнете OK.
  • 16. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 16 4. Креирање на графички симболи и мапи на слики 1. Креирање на графички референци (линкови) 1) селектирајте ја сликата 2) од опцијата Properties, во полето за текст Link внесете ја патеката за поврзување Апсолутните патеки почнуваат со http: // (HyperText Transfer Protocol) со што се поврзувате со веб серверот. Додека апсолутните патеки ја претставуваат адресата на вашата локална веб страната. Зачувајте ја датотеката и погледнете во пребарувач. 2. Мапирање на слики Се користи за одделување на слика на неколку области. а) мапирање на дел од слика 1) селектирајте ја сликата 2) од опцијата Properties, изберете го полето Map (ако не се гледа кликнете на (▼) во долниот десен агол на Properties) - внесете име на мапа (не користете специјални знаци). 3) Од Properties, одберете ја алатката: Rectangular Hotspot - се создава точка околу која се исцртува правоаголник Shift + Rectangular Hotspot - се создава точка околу која се исцртува квадрат Oval Hotspot - се создава точка околу која се исцртува круг Polygon Hotspot - се создава точка околу која се исцртува фигура со комплексни форми; секое кликање на Polygon Hotspot создава нова точка; секоја наредна точка се поврзува со претходната со права линија. б) големината на мапата 1) од опцијата Properties, изберете ја алатката Pointer Hotspot 2) извлечете простор со маусот ( така што областа да опфаќа само една точка) в) поместување на точка од областа - поставете го курсорот во областа и повлечете г) бришење на точка од областа – селектирајте ја и притиснете Backspace или Delete. ТЕМА 6: Хипертекст и линкови како слика 1. Примена Она што го прави Веб толку ефективен е способноста да бидат дефинирани линкови во рамките на една страница или од една страница кон други страници, како и следењето на линковите со едноставно кликнување со глувчето. Хиперврска или само врска (англ. hyperlink, link) е упат од еден збор, слика или било каков информациски објект до друг таков објект. Во мултимедијалната природа, како што е глобалната мрежа, таквите објекти вклучуваат звучни или видео записи. Најчест облик на врска е препознатливиот збор или слика, којшто може да биде одбран од страна на корисникот (со помош на глувчето или на некој друг начин), при што резултатот би бил моментална испорака или увид на некоја друга поддатотека. 2. Видови а) релативни - тие се во границите на една веб страна и водат до датотеки од папките на веб страната. За пристап до нив се користи само надворешен пат.
  • 17. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 17 б) апсолутни - линк до целосна веб адреса на некоја веб страна. 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. Опредување на боја и формат на хиперлинкот Ако не бидат наведени бои на хиперлинковите, при вчитувањето на страницата ќе се користат дефинирани вредности на пребарувачот. Тие можат да бидат различни во зависност од видот. Боите на хиперлинковите треба да се контрастни (но не премногу) со позадината и со другите елементи, за да бидат хиперлинковите јасно видливи. 1) од Modify /изберете Page Properties ... категорија Links 2) поставување атрибути на хиперлинкот Link Font - (same as page font) – хиперлинкови ги наследуваат атрибутите на стиловите во документите Link Color - боја на хиперлинкот, пред да биде посетен(стандардно е сината боја) Visited Links - боја на хиперлинкот откако ќе биде посетен(стандардно е виолетова боја) Rollover Links – боја на хиперлинкот кога врз него е позициониран покажувачот на глувчето . Active Links - бојата на хиперлинкот во моментов кога кликнуваме со глувчето. Бојата на хиперлинкот е претставена со хексадецимален број. Полето за боја се наоѓа лево од полето за текст - се отвора палета со различни нијанси на бои (се отвора мени со други видови, теми).
  • 18. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 18 Underline Style: - подвлекување на текст Always Underline - секој текст да биде подвлечен Never Underline - ниту еден текст да биде подвлечен Show Underline Only on Rollover - текстот е подвлечен само кога курсорот се наоѓа над хиперлинкот Underline on Rollover - текстот го губи подвлекувањето кога курсорот не се наоѓа над хиперлинкот 3) кликнете OK. ТЕМА 7: Вметнување на флеш анимации и флеш копчиња 1. Креирање на флеш текст Macromedia Flash е мултимедијална графичка програма која овозможува креирање интерактивни “филмчиња” на Веб. Flash користи така наречена векторска графика, што значи дека графиката може да се зголемува и намалува до било која големина без губење на квалитетот и јасноста. Flash не побарува програмерски способности и е лесен за учење. Flash дава слобода на развивање. Оваа апликација дозволува дизајнерот да позиционира објект каде што сака без воопшто да се грижи за апсолутно или релативно позиционирање. Заради векторката графика и нејзината способност да се приспособува, користењето на Flash има голема предност над другите заради потребата за пребарување на Интернет од други алтернативни извори различни од десктоп компјутерите како што се PDA, мобилни телефони, екрани во кола итн. Анимираните слики и јава аплети се често користени за да се креира динамички ефект на Веб страниците. Flash е подобар од нив затоа што се вчитува многу побрзо отколку анимираните слики. Flash не побарува програмерски способности, што јава аплетите ги побаруваат. 2. Додавање на Flash копче Копче во Flash можете да создадете на повеќе начини. Можете готова слика да ја претворите во копче, можете да користите некои од веќе постоечките копчиња во Flash или сами може да си креирате ваше сопствено копче. Во овој пример ќе научите како да се конвертира слика во копче и тоа дастане линк до одреденa адреса. Чекор 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
  • 19. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 19 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). Додека се движи текстот треба да ја менува својата боја. ТЕМА 8: Креирање на веб фото – албум За да креирате фото албум во вашата веб страна потребно е да имате инсталирано Macromedia Fireworks. 1.Отварате Dreamweaver, и креирајте нова html страна или во веќе постоечка во која сакате да го вметнете вашиот фото албум. 2.Креирајте посебна папка во главната папка во проектот во која ќе ги сместите сликите кои ќе ви бидат потребни за креирање на фото албумот. 3.Се враќате во Dreamweaver и одите на следните команди Commands - > Create Web Photo Album. - Ќе се отвори следниот прозорец кој е прикажан погоре на сликата во кој морате да ги внесете параметрите за вашиот фото албум кој сакате да го креирате. Во продолжение се објаснени својствата и параметрите на сликите кои мора да ги внесете: - Photo Album Title – го внесувате името на вашиот фото – албум - Subheading Info – ова поле е опционално, односно не е задолжително, доколку внесете текст во ова поле тој текст ќе се прикаже на големата слика. - Other Info – текстот кој ќе го напишете тука ќе се прикаже како текст на големата слика. - Source Images Folder – тука избираме Browse и ја наоѓате папката каде се сместени сите слики кои ви се потребни за креирање на вашиот веб албум и ги селектирате. - Destination Folder – овој фолдер има специјална функција. Го креиравте овој фолдер во кој се сместени вашите слики за фото албум во чекор 2.
  • 20. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 20 - 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. ТЕМА 9: Интерактивни форми. Вметнување и превртување (rollover) на слики 1. Предности а) содржината на веб страната треба да биде едноставна и разбирлива за читање; б) потребна е едноставна навигација помеѓу веб страните. 2. Алатки за вметнување на интерактивни елементи а) користење нa динамични страни со база на податоци; б) Macromedia Flash; в)Quick Time Virtual Reality (QTVR) - поддржува 360-степенски панорамски поглед и интерактивни компоненти; г) JavaScript - се користи за креирање на скрипти, кои се извршуваат од пребарувачот на клиентот; д) Java Server Pages (JSP) – скрипти кои се извршуваат од страна на серверот и резултатите ги праќаат на серверот; ѓ) однесување на Dreamweaver – дијалог на програми со JavaScripts код кои можат лесно да се вметнат во веб страницата. Однесувањето е комбинација од акција или серија од активности и настан. Дејството (action) е она што се врши како резултат на интервенцијата на корисникот (пример Размена на една слика). Настанот (event) е она што предизвикува појава на некое дејствие (на пример движење на глувчето над сликата или притискање на некое копче). 3. Вметнување на rollover слики
  • 21. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 21 Ваквите слики на кои со приближување со глувчето настануваат промени се викаат 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 при селектирање на сликата. ________________________________________________________________________ ТЕМА 10. Создавање на нови стилови. Внатрешни и надворешни стилови 1. Дефиниција а)Стил(Style) – уште познат како правило(rule) претставува множество од атрибути кои го дефинираат и управуваат секој елемент; б)Style Sheet – група на стилови; в)Каскадни стилови(Cascading styles) –ја дефинираат хиерархијата и приоритетот на стиловите. 2. Примена CSS е предвиден првенствено за да се овозможи поделба на содржината на документот (напишан во HTML или сличен markup language) за презентација на документот вклучувајќи елементи како рапоредот на страната, боите и фонтот. Оваа поделба може да ја подобри
  • 22. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 22 содржината, да овозможи флексибилност и контрола во одредбите на презентирање карактеристики, да им овозможи на повеќе страни да го споделат форматирањето и да ја намалат комплексноста и повторувањето во структурната содржина. 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. 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. Ако не е така - изберете го.
  • 23. Проект финансиран за меѓугранична соработка помеѓу Р. Македонија и Р. Бугарија 2007-2013 23 5) Од областа Define in одберете го копчето за мени и одберете го документот кој ќе го користи стилот и кликнете на ОК. 6) Се отвора дијалог прозорецот CSS Rule Definition ....in ... ..се отвора категоријата Type каде е потребно да ги направете саканите поставки и на крај се клика на копчето OK.