Adobe Dreamweaver – vežba 1 2016

Дефинисање сајта

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

2. Покренути Dreamweaver – Create New - Dreamweaver Site

3. Site/Manage Site

Израда шаблона – template (униформност веб страна)Приликом израде шаблона потребно је направити комплетно дизајнерско решење странице која ће се касније користити за израду осталих страница сајта. Шаблон се чува у поддиректоријуму Templates директоријума сајта. На самом шаблону се дефинишу променљиве и непроменљиве области.

Креирајмо шаблон за сајт :

1. Из линије менија изаберите File/New. Отвориће се дијалог прозор New Document--Blank Template--HTML template--Create

1

Adobe Dreamweaver – vežba 1 2016

Отвара се празан документ тј. празна страница и аутоматски се формира поддиректоријум Templates.

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

1. Modify/Page Properties (из листе Category, изабрати опцију Appearance)

Inicijalno je postavljena bela boja.Bela boja pozadine karakteristična je za 80% sajtova na webu. Razloge treba tražiti uvelikom uticaju dizajna publikacija (na primer, magazina) na trendove u web dizajnu.Ako umesto bele, upotrebite drugu boju – boja fonta treba da bude u kontrastu u

2

Adobe Dreamweaver – vežba 1 2016

odnosu na boju pozadine. Na primer, tamno plavoj pozadini odgovarao bi beli ili žutifont. Za belu pozadinu po pravilu se koristi crna ili siva boja fonta.

Važno. Pozadinska boja i boja i tip fonta predstavljaju elemente stila vašeg web sajta.

Zato vaše rešenje treba da bude aplicirano na svim web stranama.

- Text color : #3e732f- Background color : #EFEFEF- Left margin : 200 px

3

Adobe Dreamweaver – vežba 1 2016

2. Из листе Category, изабрати опцију Title/Encoding.

Притисните OK.

3. Да би сачували и дали име нашем шаблону из линије менија изаберите опцију File/Save as Template.

3.1.У текст поље Save as упишите име нашег шаблона и нека то буде osnovni.

3.2. Притисните Save.3.3.На картици Document прозора као и у насловној линији целог прозора уместо Unitled-1

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

4

Adobe Dreamweaver – vežba 1 2016

Логичке целине шаблона :1. заглавље,2. тело и 3. дно

(рад базирамо на објекту Table)

5

Adobe Dreamweaver – vežba 1 2016

1. Заглавље странице1.1. Банер

6

Adobe Dreamweaver – vežba 1 2016

1.2.Табела за горњу навигацију (Позиционирајте се испод табеле за банер)

1.3. Табела за леву навигацију и за садржај странице.

7

Adobe Dreamweaver – vežba 1 2016

Одређивање променљивог дела странице (шаблона)1. Insert/Template Objects/Editable Region

REZULTAT JE

Konvencije u pogledu upotrebe teksta na Webu

Tekst na web strani treba da bude kratak, čitak I jasan. Posetilac nema vremena da sebavi nagađanjem šta tekstom želi da se kaže. Tekst apliciran na webu najbliži je postilu i sadržini tekstu u dnevnim novinama. Korisnici različitih nivoa obrazovanja poruku

8

Adobe Dreamweaver – vežba 1 2016

iskazanu tekstom treba bez dileme da razumeju.Tekst treba obavezno pisati na lokalnom pismu (ćirilica ili latinica). Izbegavati upotreburečenica sastavljenih isključivo iz velikih slova u paragraf tekstu. Upotreba velikih slovaizvan naslova doživljava se kao vikanje na korisnika. Na početnoj strani treba izbećinaslov: DOBRODOŠLI!.Kod paragraf teksta treba izbegavati podvučen tekst (underline). Podvučen tekst nawebu izaziva asocijaciju kod korisnika da se radi o linku na drugu stranu.

Opšte preporuke za pisanje i formatiranje teksta

¨ Najvažnije informacije uvek stavljajte na početak stranice. Radi se o pravilu poznatom u novinarstvu pod nazivom: "pravilo inverzne piramide".Sažetak celog članka stavite u prvi paragraf članka, a najvažniju misao napočetak rečenice i na početak svakog paragrafa. Tako se postiže efekat dačitalac dobija najveću količinu informacija čak i ako ne čita ceo tekst.

¨ Duži tekst podelite na kratke celine. Celina treba u proseku da se sastojiod 4- 5 rečenica.

Strane sa tekstom formatirajte u stupce do 600 piksela. Tekst se ne sme protezati od leve do desne margine, jer se teško čita. Kad čitalac dođe dokraja reda, izgubiće početak sledećeg, jer je red vrlo širok.

¨ Tekst mora biti okružen praznim prostorima – belinama. Stavite i do dva reda razmaka između odlomaka. Ostavite prazan prostor na levim i desnimmarginama oko teksta. Web stranica ne sme biti natrpana tekstom.

¨ Kod teksta većeg obima, koristite podnaslove. Ako vaš tekst sadržiceline koje bi se logički mogle povezati, dajte im podnaslov. Korisnik će takomoći u tekstu identifikovati smislene celine i brže pronaći ono što ga zanima.

¨ Koristite redne liste. One su jedno od najuspešnijih načina formatiranjateksta, jer omogućavaju korisniku da se brzo i lako snalazi. Korisnik običnoletimično prelazi pogledom kroz tekst i zadržava se na rednim listama, kojelako čita. Sve što se u tekstu nabraja ili odvaja zarezom, treba da budeformatirano kao redna lista. Da bi se redne liste još lakše opažale, trebapostaviti prored između redova (povećanje belina). Između dve redne listetreba ostaviti veće slobodne prostore, beline, kako bi se lakše opažale.

¨ Koristite crni tekst na svetloj pozadini. Tekst na webu ima sličnosti satekstom u štampanim medijima. Bela površina papira se podrazuemva.Tekst ispisan crnim slovima na kontrastnoj beloj površini lako se čita.

¨ Upotreba belog teksta na tamnoj pozadini nije ista. Izbegavajte paragraf tekstove većeg obima u svetloj ili beloj boji fonta na tamnoj pozadini, jer se teže čitaju.

9

Adobe Dreamweaver – vežba 1 2016

¨ Kad želite određene delove teksta da naglasite, koristite podebljani font(bold). Podebljani tekst koristiti za naglašavanje ključne misli, a ne za čitaveparagrafe.

¨ Tekst koji sadrži linkove, veze prema drugim fajlovima ili internetdestinacijama, treba da bude ispisan plavom bojom i podvučen.Nepodvučene linkove možete koristiti u navigaciji, ali nikako u tekstu.

¨ Pre publikovanja, tekst treba još jednom proveriti. Najbolje je da proveruvrši lice koje ga nije pisalo. Važno je otkloniti sve pravopisne i stilske greške,kao i greške u kucanju. Greške u kucanju i gramatičke greške nailaze naneodobravanje kod korisnika. Takav sajt smatra se neprofesionalnim.

Alatke za upravljanje tekstomSoftver za izradu i publikovanje web sajta ima moćne alatke za upravljanje tekstom.Osnovne alatke prikazane su na slici 2. Slika 2.

Alatke za formatiranje mogu se podeliti u tri grupe:¨ Izbor, veličina i boja fonta¨ Oblik fonta i formatiranje paragraf teksta¨ Redne liste i podešavanje širine paragrafa u odnosu na margine

Fontovi na Web strani

Na web strani treba upotrebiti sistemske fontove. To su fontovi koji dolaze u paketu saoperativnim sistemom. Sistemski fontovi, koji dolaze u paketu sa operativnim sistemomWindows, su: Arial, Verdana, Georgia i Times New Roman. Ne preporučuje seupotreba fontova, kao što su: C_Times, C_helvetica, Miroslavljevo pismo i sl, jer ovifontovi najverovatnije ne postoje u računaru korisnika, tako da se tekst neće videti unjegovom web pregledaču.

Serifni i beserifni fontoviFontovi kao osnovni tipografski elementi dele se, prema obliku, na serifne i beserifne.Serifni fontovi su grafički izvedeni tako da se sastoje iz serifa (stopica, tankih i debelihlinija). Teže se čitaju i manje se upotrebljavaju na webu.

Times New Roman, Georgia – serifni fontovi

10

Adobe Dreamweaver – vežba 1 2016

Ova vrsta fontova ima stopice i kvačice (kao T i s).Arial, Verdana – beserifni fontovi izvedeni su kao tehničko pismo

Opisne web strane

Opisnim stranama nazivamo web strane koje sadrže obilje teksta. Strane mogusadržati i neki multimedijalni objekat, ali je tekst koji zauzima prostor od nekoliko A4strana njihova bitna karakteristika.Ovako obiman tekst težak je za čitanje i nervira korisnika. Takav tekst treba veštopodeliti u više celina, koje su međusobno podeljene podnaslovima. Na početku opisnestrane treba postaviti sve podnaslove. Podnaslovi su linkovani alatkom Anchor (sidro) uodnosu na isti podnaslov koji se nalazi negde na strani. Korisnik bira naslov koji ga interesuje i skače na deo strane gde se taj naslov nalazi.

11