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

1. Покрените Dreamweaver 2. Из директоријума Templates отворите шаблон osnovni.dwt.3. Пошто страницу отворите у прозору Document, притисните на

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

4. Из линије меније изаберите Insert/Image

Као и у случају других објеката, преглед Properties приказује својства специфична за слику онда када је она изабрана.

1. Ако претходно није није отворен, прикажите преглед Properties тако што ћете из линије менија изабрати Window/Properties.

2. Изаберите слику чија својства желите да испитате. Преглед Properties ће приказати својства те слике уз минијатурни приказ слике у облику иконе Property.

1. Поља W и H приказују ширину и висину слике. Обраду слика вршите углавном у софтверима намењеним за обраду слика.

2. Текст поља V Space и H Space служе за постављање невидљивог простора око слике тако да се слика не додирује са текстом. V Space је размак по вертикали а H Space по хоризонтали.

3. Падајућа листа Align даје могућност избора десет опција за поравнавање приказане слике. Чим изаберете неку опцију, слика се помера и то померање се углавном се врши у односу на текст.

4. Падајућа листа Alt омогућава давање алтернативног имена за слику тако да корисници који имају спору везу па су због тога искључили учитавање слика могу да виде о којој се слици ради и

уколико је веза ка другој страници да је изаберу.5. Текст поље Border служи за креирање

оквира око слике.

Из р ада табе л е з а лев у нав и г ац ију

1. Ширину леве ћелије треће табеле прилагодити тј. изаберете ћелију и у прозору Property поставите W(Width) на 175 пиксела.

2. У селектовану ћелију убацити табелу са следећим параметрима: Rows: 3, Columns: 2, W:100% (сада је табела ограничена ширином тако да се табела поставља у процентима у односу на њу) , CellPad:0, CellSpace:0.

3. Спојити две ћелије првог реда табеле у једну. Селектујте обе ћелије и у палети Property кликните на команду Marges као што је приказано на слици

4. Поставити позадину првог реда те табеле у поље Bg (Backgraund Color) палете Property (хексадецимални код боје је #98BF6E.5. Поновити корак 4 за други ред табеле и поставити висину ћелије на 30 пиксела у пољу Н (Height) палете Property (#98BF6E).

6. Ширину леве ћелије трећег реда табеле поставити на 25 пиксела и поставити позадинску боју #3D722. Десну ћелију обојите бојом #98BF6E и инсертовати табелу 3 x1 (100%).

Израда табеле за потписивање

1. Четврту табелу у шаблону ћемо поделити на 2 колоне.2. Убацити слику у прву колону (W-36, H-40) (logo facebook)3. Другу колону поделити на два реда.4. Даље инструкције се налазе на слици

Израда rollover дугмића

Сада ћемо да направимо дугмиће уз помоћ Photoshop-a за леву навигацију.

1. Из линије менија изаберите Insert / Image Objects / Rollover Image.

2. Отвориће се дијалог прозор Insert Rollover Image који захтева употребу слику као оригинал и rollover слику за израду овог објекта.

3. Да бисмо направили ове две слике неопходно их је креирати у Photoshop-у, отварајући нови документ са димензијама простора навигације на сајту где ће бити убачене. Поставити ширину на 100 пиксела и висину на 20 пиксела.

4. Обојити backgraund слој бојом позадине сајта у делу за навигацију. То је боја са хексадецималним кодом #98BF6E.

5. Додати текст Cloud computing на средини слике.

6. Снимити слику у фолдеру Images фолдера нашег сајта као cloud.gif

7. Употребом стилова на лејер додати ефекат спољног сјаја на текст –Оuter Glow са прозвољним параметрима.

8. Нови изглед слике снимити у исти фолдер као и претходну слику, под називом cloudlink.jpg.

9. Овим смо добили потребне слике приказане на слици 8.9., које ћемо користити за израду Rollover објекта.

10.У дијалог прозору Insert Rollover Image подесети параметре као

што је приказано на слици.

11. Истим поступком направити још два Rollover oбјекта z a BLOG i Elektronski portfolio

Adobe Dreamweaver – vežba 2 2016

• Рад са везама и форматирање текстаОстала је још табела дна странице да се попуни.

1. E-mail link2. У палети Property за форматирање поставите да је текст на средини 3. Селектујте текст E-mail link па у пољу за Link упишите mailto:mail@gmail.com

4. Поново селектујте сада већ хиперлинк за маил и форматирајте га. У прозору Property изаберите Font (Veradna), Size (10), Text Color (#FFFFFF).

5. Сачувајте шаблон.

Adobe Dreamweaver – vežba 2 2016

Креирање странице на основу шаблона1. Из линије менија изаберите File / New.2. Отвориће се дијалог прозор New document. Изаберите картицу Page from Template. 3. Site –Prezime Ime4. Template for Site “Prezime Ime” --Osnovni5.Означите опцију Update page when templates changes.

6. Притисните Create.

Креира се страница коју треба сачувати под одређеним именом и на одређеном месту. У нашем случају то ће бити почетна страница index.html коју ћемо да сачувамо у самом root-u нашег директоријума. И остале странице cloud.html , blog.html, portfolio.html такође треба сачувати у root-u нашег директоријума.

1. Из линије менија изаберемо File/Save As.

2. Из падајуће листе Save in изаберемо место а у текст пољу File nameупишемо назив странице.