Izrada sajta o nikoli tesli (1)

Web преWeb презентација – опис зентација – опис израдеизраде

Прво приступамо креирању нове Прво приступамо креирању нове FrontPage Web FrontPage Web презентације. Бирамо из презентације. Бирамо из менија опцију менија опцију File/New, File/New, а затим из а затим из Task Task Pane Pane оквира и опцију оквира и опцију More Web site More Web site templates, templates, која нам отвара готове која нам отвара готове шаблоне за шаблоне за Web Web презентацијепрезентације..

Нећемо користити готове шаблоне већ Нећемо користити готове шаблоне већ ћемо само креирати празну ћемо само креирати празну Web Web презентацију, помоћу шаблона презентацију, помоћу шаблона Empty Empty Web Site.Web Site.

Ово је практично из разлога, што на тај Ово је практично из разлога, што на тај начин, креирамо потребне пратеће начин, креирамо потребне пратеће фолдере за сајт: фолдере за сајт: __privateprivate и и imagesimages, иако , иако се не креира ни се не креира ни једна Web једна Web страна, па ни страна, па ни index.index.

File/New

Бирање шаблона Empty Web Site, креирање празне Web презентације!

Мишљења о начину креирања Web презентација су подељена:

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

док други заступају мишљење да се могу прво креирати појединачне Web стране, па их тек накнадно укомпоновати у структуру Web презентације.

ОдабраОдабранн јеје први приступ – креирање први приступ – креирање структуре Web презентације.структуре Web презентације.

Наравно, прво сНаравно, прво сее осмисли структуру осмисли структуру саме презентације (које би стране саме презентације (које би стране требало да садржи, какве су везе требало да садржи, какве су везе између њих и сл.), па тек онда између њих и сл.), па тек онда приступи приступи њњеном формирањуеном формирању

Креирање презентације се обавља у приказу Navigation!

Дакле, прелазимо у приказ Navigation:

Прво ћемо креирати почетну, тзв. Прво ћемо креирати почетну, тзв. Index Index страну наше страну наше Web Web презентације.презентације.Довољно је да са Довољно је да са toolbara toolbara који се који се налази у врху навигацијског налази у врху навигацијског приказа одаберемо алaт зa приказа одаберемо алaт зa креирaње нове креирaње нове Web Web стране.стране.Тиме креирамо прву страну, а сам Тиме креирамо прву страну, а сам FrontPage FrontPage је препознаје као је препознаје као Index.Index.

Даље је потребно додавати нове Даље је потребно додавати нове Web Web странице у структуру презентације. странице у структуру презентације.

Потребно је предвидети да ли се те нове Потребно је предвидети да ли се те нове странице налазе на истом навигационом странице налазе на истом навигационом нивоу са већ направљеном нивоу са већ направљеном Web Web страном страном или су у нивоу испод ње или су у нивоу испод ње (child pages).(child pages).

Уколико правимо страницу изведену од Уколико правимо страницу изведену од неке направљене неке направљене Web Web стране, довољно је стране, довољно је да кликнемо на њу, па на алат за да кликнемо на њу, па на алат за креирање нове креирање нове Web Web странестране. .

Промена наслова Промена наслова Web Web страна се једноставно страна се једноставно обавља из “приручног” обавља из “приручног” менија менија Web Web стране, бирајући стране, бирајући опцију опцију Rename.Rename.

Понављајући описани поступак, Понављајући описани поступак, креиран је први креиран је први child child ниво ниво Web Web

страница, за почетну страну наше страница, за почетну страну наше Web Web презентацијепрезентације..

Идемо корак даље и Идемо корак даље и стварамо други стварамо други навигациони ниво навигациони ниво – – child child стране, већ стране, већ постојећих постојећих child child страна презентације.страна презентације.

ДобијамоДобијамо Web Web презентацију презентацију сложеније сложеније структуре:структуре:

Понављајући наведени поступак, а пратећи Понављајући наведени поступак, а пратећи осмишљени план за презентацију, корак по корак, осмишљени план за презентацију, корак по корак,

формирамо целу презентацију.формирамо целу презентацију.

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

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

садржај, тј. да свaку од садржај, тј. да свaку од Web Web страна страна “попунимо” одговарајућим садржајем и “попунимо” одговарајућим садржајем и

чињеницама (текст, слике), као и да чињеницама (текст, слике), као и да формирамо систем за навигацију у формирамо систем за навигацију у презентaцији (систем хiпервезa).презентaцији (систем хiпервезa).

Пре свега тога можемо се позабавити Пре свега тога можемо се позабавити дизајном страна, тј. одабрати одређену дизајном страна, тј. одабрати одређену

тему за тему за Web Web странице.странице.

Тема Тема Web Web стране представља одређену стране представља одређену комбинацију елемената комбинацију елемената Web Web стране стране (боје позадине, позадинске слике на (боје позадине, позадинске слике на Web Web страни, врсте и стила фонта, страни, врсте и стила фонта, булита и листа, навигационих тастера и булита и листа, навигационих тастера и других елемената других елемената Web Web стране), које стране), које можете бирати из већ понуђене листе можете бирати из већ понуђене листе програма програма FrontPage.FrontPage.

Дакле, следећи корак – одабир теме за Дакле, следећи корак – одабир теме за Web Web странестране!!

УУ TTask Pane ask Pane оквиру се отвара оквиру се отвара preview preview свих свих понудјених тема, одаберемо једну и применимо понудјених тема, одаберемо једну и применимо на све одабране стране на све одабране стране (Apply to all selected (Apply to all selected pages).pages).

Довољно је да из приказа Довољно је да из приказа navigation navigation отворимо отворимо једну страну, па да из њеног менија одаберемо једну страну, па да из њеног менија одаберемо опцију опцију Format/Theme.Format/Theme.

Следећи корак јесте подешавање Следећи корак јесте подешавање заједничких ивица страна.заједничких ивица страна.

Заједничке ивице Заједничке ивице (Shared Borders) (Shared Borders) су су ентитети ентитети Web Web страна, који се могу страна, који се могу појављивати на свим или само неким појављивати на свим или само неким Web Web странама једне странама једне Web Web презентације.презентације.

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

У њих се, најчешће, смештају навигациони У њих се, најчешће, смештају навигациони елементи (дугмад за навигацију, елементи (дугмад за навигацију, хиперлинкови и сл.).хиперлинкови и сл.).

Најчешће се постављају на горњој, левој Најчешће се постављају на горњој, левој и/или доњој ивици и/или доњој ивици Web Web стране (из разлога што стране (из разлога што десна ивица десна ивица Web Web стране у читачима често није стране у читачима често није видљива, него се мора видљива, него се мора Web Web страна скроловати страна скроловати да би се она видела).да би се она видела).

Да би направили заједничке ивице на Да би направили заједничке ивице на Web Web странама, странама, довољно је да са произвољне довољно је да са произвољне Web Web стране бирамо стране бирамо

опцију менија:опцију менија: Format/Shared BordersFormat/Shared Borders..

Потом, из дијалог прозора Потом, из дијалог прозора Shared Borders, Shared Borders, бирамо које бирамо које заједничке ивице желимо (леве, десне...), као и то да заједничке ивице желимо (леве, десне...), као и то да ли ће бити видљиве на свим или само на текућој ли ће бити видљиве на свим или само на текућој страни страни (All pages (All pages или или Current pages).Current pages).Одабраћемо да су заједничке ивице видљиве на свим Одабраћемо да су заједничке ивице видљиве на свим Web Web странама презентацијестранама презентације..Могуће је и подесити заједничку ивицу кликом на Могуће је и подесити заједничку ивицу кликом на

тастер тастер Border Properties.Border Properties.

Крајњи резултат јесте Крајњи резултат јесте Web Web страна која има празне страна која има празне заједничке ивице (у нашем случају леву, горњу и заједничке ивице (у нашем случају леву, горњу и

доњу), а које треба модификовати према потребама доњу), а које треба модификовати према потребама Web Web презентацијепрезентације..

Заједничке ивицеЗаједничке ивице

Следећи корак, јесте подешавањеСледећи корак, јесте подешавање садржаја заједничких ивица.садржаја заједничких ивица.

Моја замисао јесте да у горњу ивицу Моја замисао јесте да у горњу ивицу ставим неки лого или слику, која ће се ставим неки лого или слику, која ће се провлачити кроз целу презентацију и на провлачити кроз целу презентацију и на тај начин тематски и логички повезивати тај начин тематски и логички повезивати све њене Web све њене Web стране у једну целину.стране у једну целину.

Лева ивица је резервисана за Лева ивица је резервисана за навигационе елемeнтe.навигационе елемeнтe.

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

Insert/Picture/From FileInsert/Picture/From FileШто нам отвара дијалог прозор за одабир слика са Што нам отвара дијалог прозор за одабир слика са одређеног меморијског медија.одређеног меморијског медија.

Пошто одаберемо жељену слику и то Пошто одаберемо жељену слику и то потврдимо, ако се вратимо у приказ потврдимо, ако се вратимо у приказ Page, Page, видећемо да је та слика видећемо да је та слика постављена на горњу ивицу наше постављена на горњу ивицу наше Web Web стране.стране.

Следећи корак јесте додавање Следећи корак јесте додавање навигационих команди у леву навигационих команди у леву заједничку ивицу.заједничку ивицу.

Команде за навигацију можемо поставити Команде за навигацију можемо поставити као већ припремљене као већ припремљене Web Web компоненте које се компоненте које се налазе под опцијом: налазе под опцијом:

Insert/web ComponentInsert/web Component

Одакле бирамо опцију: Одакле бирамо опцију: Link Bars/Bar based on navigation Link Bars/Bar based on navigation

structurestructure((даје нам навигационе команде засноване на даје нам навигационе команде засноване на

навигационој структури презентације, коју навигационој структури презентације, коју смо већ креирали у првом коракусмо већ креирали у првом кораку))

Затим следи подешавање навигационих Затим следи подешавање навигационих команди:команди:

Бирање стила командиБирање стила команди

Бирање оријентације Бирање оријентације навигационих командинавигационих команди

Бирање које су све Бирање које су све стране укључене у стране укључене у навигационе навигационе командекоманде

На крају заједничка ивица са навигационим На крају заједничка ивица са навигационим командама изгледа овакокомандама изгледа овако::

На почетну На почетну – index – index страну смо убацили и слику Николе страну смо убацили и слику Николе Тесле, па сада та страна изгледа овако:Тесле, па сада та страна изгледа овако:

Остало је још да се подесе доње Остало је још да се подесе доње заједничке ивице.заједничке ивице.

Замисао је да у њима буду постављене Замисао је да у њима буду постављене “рекламе”, тј. слике са линковима на “рекламе”, тј. слике са линковима на одређене институције које се баве одређене институције које се баве сличним садржајима описаним у нашој сличним садржајима описаним у нашој презентацији (овде је то Теслин музеј и презентацији (овде је то Теслин музеј и фонд).фонд).

Постављање хиперлинка на слику је Постављање хиперлинка на слику је исто као и постављање хиперлинка на исто као и постављање хиперлинка на ма који други ентитет.ма који други ентитет.

Доње заједничке ивице ћемо поставити са почетне Доње заједничке ивице ћемо поставити са почетне стране презентацијестране презентације

Сада треба да сачувамо уређену Сада треба да сачувамо уређену Web Web страницу и приликом њеног снимања, страницу и приликом њеног снимања, добићемо и поруку да треба да сачувамо добићемо и поруку да треба да сачувамо и додате елементе – слике.и додате елементе – слике.

Њих чувамо у аутоматски генерисаном Њих чувамо у аутоматски генерисаном фолдеру фолдеру Images.Images.

Снимање Снимање Web Web странестране

Снимање сликаСнимање слика

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

Преко заједничких ивица смо решили Преко заједничких ивица смо решили проблем команди за навигацију, па сада проблем команди за навигацију, па сада можемо да приступимо креирању можемо да приступимо креирању садржаја самих садржаја самих Web Web страна.страна.

Унос текста није компликован, јер Унос текста није компликован, јер подлеже сличним правилима као и у подлеже сличним правилима као и у Wordu.Wordu.

Унос слика смо већ видели како изгледаУнос слика смо већ видели како изгледа..

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

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

Описаћемо креирање само једне, а Описаћемо креирање само једне, а друга се креира на исти начин.друга се креира на исти начин.

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

Галерија слика није ништа друго до Галерија слика није ништа друго до Web Web компонента.компонента.

Дакле, уносимо је као Дакле, уносимо је као Web Web компонентукомпоненту::Insert/Web component/Photo GaleryInsert/Web component/Photo Galery

Видимо да имамо 4 типа галерија, па Видимо да имамо 4 типа галерија, па одаберемо један.одаберемо један.

Кликнемо на Кликнемо на FinishFinish

Отвара нам се дијалог прозор Отвара нам се дијалог прозор Photo Galery PropertiesPhoto Galery Properties, , преко кога вршимо додавање нових слика у галерију преко кога вршимо додавање нових слика у галерију (кликом на (кликом на Add), Add), њихово уређивање њихово уређивање (Move up/down), (Move up/down), као и додавање текстуалних објашњења уз слике као и додавање текстуалних објашњења уз слике (Caption).(Caption).

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

Даље ћемо креирати Даље ћемо креирати Web Web страну страну F. A. F. A. Q. (Q. (најчешће постављана питања најчешће постављана питања посетиоца).посетиоца).

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

Навешћемо пар питања на врху стране, Навешћемо пар питања на врху стране, а затим даље на страни и одговоре на а затим даље на страни и одговоре на та питања.та питања.

Даље је потребно повезати питања и одговоре Даље је потребно повезати питања и одговоре системом хипервеза (хиперлинкова) и обележивача системом хипервеза (хиперлинкова) и обележивача (bookmark).(bookmark).

На сваки одговор ћемо унети обележивач На сваки одговор ћемо унети обележивач – – bookmark, bookmark, а то је једноставно: а то је једноставно:

обележимо одговоробележимо одговор/Insert/Bookmark./Insert/Bookmark.

Ознака за Ознака за bookmark bookmark у текстуу тексту

Затим на свако питање у врху стране поставимо Затим на свако питање у врху стране поставимо хипервезу на одговарајући обележивач:хипервезу на одговарајући обележивач:

Insert/Hyperlink/Place in This Document Insert/Hyperlink/Place in This Document или или BookmarkBookmark

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

Одавде бирамо обележивач Одавде бирамо обележивач на који хипервеза указујена који хипервеза указује

Пошто смо завршили креирање Пошто смо завршили креирање F.A.Q. F.A.Q. стране, прелазимо на другу стране, прелазимо на другу Web Web страну, страну, која је битна у презентацијама сложене која је битна у презентацијама сложене структуре.структуре.

То је тзв. мапа сајта.То је тзв. мапа сајта.

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

Isert/Web Component/Table of Isert/Web Component/Table of Contents/For This Web siteContents/For This Web site

Следећи задатак је да креирамо Следећи задатак је да креирамо контакт страну.контакт страну.

Контакт страна обично садржи Контакт страна обично садржи поштанску адресу, али и поштанску адресу, али и URL URL адресу адресу Web Web презентације организације, особе и др., презентације организације, особе и др., као и као и e-mail e-mail контакт адресу.контакт адресу.E-mail E-mail не треба дати само у не треба дати само у

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

На означени симбол ћемо унети На означени симбол ћемо унети линк који аутоматски генерише линк који аутоматски генерише мејл ка одређеној електронској мејл ка одређеној електронској адресиадресиOvde upisujemo e-mail adresu Ovde upisujemo e-mail adresu na koju će biti upućena na koju će biti upućena automatski generisana porukaautomatski generisana porukaA možemo uneti i automatski generisan subject te porukeКликом на овај тастер можемо одабрати поруку која се јавља у пољу испод миша, када задржимо поинтер миша над линком Порука се овде уписујеПорука се овде уписује

Пошто смо креирали садржаје свих Пошто смо креирали садржаје свих страна, позабавићемо се напреднијим страна, позабавићемо се напреднијим подешавањима неких елемената подешавањима неких елемената Web Web страна.страна.

Нпр., у страни Нпр., у страни БиографијаБиографија ћемо на ћемо на поднаслов “проналазач који је...” поднаслов “проналазач који је...” поставити линк којим се отвара видео поставити линк којим се отвара видео садржај.садржај.

Наравно видео запис ћемо прво Наравно видео запис ћемо прво прекопирати у фолдер прекопирати у фолдер Web Web презентацијепрезентације..

Да би посетиоцу било уочљиво да ту Да би посетиоцу било уочљиво да ту нешто постоји, подесићемо да наслов нешто постоји, подесићемо да наслов промени боју (боју позадине) приликом промени боју (боју позадине) приликом померања миша над том померања миша над том Web Web страном.страном.

Да бисмо то урадили морамо са стране Да бисмо то урадили морамо са стране бирати опцију из менија:бирати опцију из менија:

Format/BehaviorsFormat/Behaviors

Са леве стране нам се отвара оквир за Са леве стране нам се отвара оквир за подешавање, из кога бирамо коју врсту подешавање, из кога бирамо коју врсту догађаја желимо, као и на коју aкцију се догађаја желимо, као и на коју aкцију се догaђaј одигрaвa.догaђaј одигрaвa.

Бирање Бирање врсте врсте догађајадогађаја

Променити боју позадинеПроменити боју позадине

Бирање акције на Бирање акције на коју се стартује коју се стартује променапромена

Такође, уколико су у презентацији Такође, уколико су у презентацији коришћена наш ћирилични фонт или коришћена наш ћирилични фонт или латинична слова, потребно је латинична слова, потребно је обезбедити да такав фонт буде обезбедити да такав фонт буде препознат од стране препознат од стране Web Web читача.читача.

Наравно, предуслов је да се користе Наравно, предуслов је да се користе unicode unicode фонтови.фонтови.

На свакој страни је потребно из њене На свакој страни је потребно из њене опције: опције:

Page properties/LanguagesPage properties/Languagesодабрати опцију одабрати опцију

Unicode (UTF-8)Unicode (UTF-8)

УУ FrontPageu, FrontPageu, слично као и у слично као и у PowerPointu PowerPointu можемо подесити можемо подесити транзицију страна, тј. ефекте приликом транзицију страна, тј. ефекте приликом отварања отварања Web Web стране, њеног затваранја, стране, њеног затваранја, преласка на другу и сл.преласка на другу и сл.

Сам поступак је сличан, потребно је да Сам поступак је сличан, потребно је да из менија aктуелне стрaне подесимо из менија aктуелне стрaне подесимо опцију:опцију:

Format/Page TransitionFormat/Page Transition

Бирање Бирање догађајадогађаја

Бирање ефектаБирање ефекта

ПО ЗАВРШЕТКУ ТО ИЗГЛЕДА ОВАКО:ПО ЗАВРШЕТКУ ТО ИЗГЛЕДА ОВАКО:

Сав потребан материјал за сајт: документарни Сав потребан материјал за сајт: документарни подаци, слике, видео записи... су преузети са подаци, слике, видео записи... су преузети са on-line on-line

енциклопедија.енциклопедија.