KREIRANJE LINE PREZENTACIJE U DREAMWEAVER-U

Korak 1: Kreiranje sajta

1.
2.
3.
4.
5.

Kreirati novi sajt izborom opcije Site New site

Dati naziv sajtu
Ne koristiti serverske tehnologije
Editovati sajt na lokalnoj maini
Raditi bez konekcije na server

Korak 2: Kreiranje templejta

1. Kreirati templejt opcijom New Basic page HTML Template
2. Podesiti stranicu (Modify-Page Properties):
a. U kartici Category-Appearance:
Page font: Verdana, Arial, Helvetica, sans-serif
Text color: #330099
Background color: #CCCCCC
b. U kartici Links:
Link color: #FF9900
Rollover links: #FF0000
Visited links: #FF9900
Underline style: Show underline only on rollover
c. U kartici Title/Encoding:
Encoding: Unicode
3. Ubaciti tabelu na stranicu, otprilike sledeeg izgleda:

4. Podesiti tabelu:
a. Cell Pading: 5
b. Cell Spacing: 5
c. Border: 0
d. Align: left ili centar (po sopstvenom nahoenju)
Korak 3: Kreiranje stilova
1. Potrebno je kreirati stilove za dati sajt, i to stil za naslove, za tekst sadraja i za
linkove.

2. U paleti CSS izabrati opciju New CSS Rule (odgovarajua ikona ili desni
klik>New)
3. Dati naziv stilu, npr. naslov
4. Definisati stil na nivou klase, i sauvati ga u posebnom dokumentu, npr.
stilovi.css
5. Podesiti izgled stila
6. Na isti nain kreirati i stilove tekst i linkovi i sauvati ih u istom fajlu
stilovi.css
7. Primer izgleda stilova:
a. naslov:
U kartici Category-Types podesiti:
Font: Verdana, Arial, Helvetica, sans-serif
Size: 24 pixels
Weight: bolder
Color: #330099
U kartici Category-Block podesiti:
Leter Spacing: 4 pixels
b. tekst
U kartici Category-Types podesiti:
Font: Verdana, Arial, Helvetica, sans-serif
Size: 18 pixels
Color: #330099
c. linkovi
U kartici Category-Types podesiti:
Font: Verdana, Arial, Helvetica, sans-serif
Size: 12 pixels
Color: #FF9900
Korak 4: Priprema sadraja za stranice
1. U Photoshop-u je potrebno kreirati dugmie za meni koji e se nalaziti sa leve
strane stranice
2. Otvoriti Photoshop
3. Kreirati novu sliku
4. Obojiti sliku korienjem Paint Bucket Tool-a u istu boju kao to je pozadina
sajta (npr. #CCCCCC)
5. Korienjem Text Tool-a ispisati tekst poetna i obojiti ga u odgovarajuu
boju (npr. #330099)
6. Na lejeru sa tekstom dodati efekat Drop shadow (desni klik na lejer, Blending
options)
7. Korienjem alata Crop Tool isei suvine delove slike, tako da ostane samo
manji deo sive oblasti oko teksta
8. Sauvati sliku pod nazivom npr. button1.psd. u folderu slike koji se nalazi
unutar Root foldera sajta.
9. Sauvati sliku za web (File/ Save for Web) u gif ili jpeg formatu npr. pod
nazivom btn_pocetna1.
10. Na tekstualni lejer primeniti efekat Outer glow (desni klik na lejer, Blending
options).
11. Sauvati sliku pod nazivom npr. button2.psd

12. Sauvati ovakvu sliku za web (File/ Save for Web (Alt+F+W)) u gif ili jpeg
formatu npr. pod nazivom btn_pocetna2.
13. Na isti nain pripremiti sve slike koje su neophodne za kreiranje menija (npr.
meni se sastoji iz sledeih stavki: poetna, biografija, galerija, linkovi, kontakt, i
sl. Moe se kreirati po jedan tekstualni lejer za svaku od potrebnih slika (da bi
lakse kontrolisali dimenzije ovih slika); primeniti iste efekte (mogu se kopirati
sa sloja poetna) ) i naizmenino menjati vidljivost odgovarajuih lejera pa
koristiti opciju File/Save for Web
Korak 5: Dodavanje sadraja na templejt stranicu
1. U gornju levu eliju ubaciti svoju sliku (ako je potrebno sliku prethodno obraditi
u Photoshop-u i sauvati u odgovarajuem formatu i rezoluciji)
2. U srednju eliju u prvom redu upisati naslov preyentacije, npr. Dobrodoli na
linu stranicu Pere Peria. Uneti tekst formatirati stilom predvienim za naslove
3. U veliku eliju u drugom redu ubaciti horizontalnu liniju
(Insert/HTML/Horizontal Rule), ispod nje unati odgovarajui tekst za
horizontalni meni, npr.:
poetna biografija galerija linkovi kontakt
Dodatni razmak izmeu rei dodaje se korienjem opcije Insert/HTML/Special
Characters/ Non-Breaking Space (Ctrl+Shift+Space)
Ispod ovog teksta dodati jo jednu horizontalnu liniju
4. U elije u levoj koloni, poev od treeg reda ubaciti slike koje e biti levi meni.
Slike ubaciti kao Rollover Image (Image Objects/Rollover Image). Tako nrp. u
prvu eliju u treem redu treba ubaciti kao Original image sliku btn_pocetna1 a
kao Rollover image sliku btn_pocetna 2. Na isti nain ubaciti i ostale
pripremljene dugmie iz Koraka 4.
5. U poslednjem redu u srednjoj eliji stilom linkovi napisati:
kontakt: pera@loznickagimnazija.edu.rs
i kreirati e-mail hiperlink (Insert/E-mail link)
6. U veliku eliju u sredini tabele dodati Editable Region (Insert/ Template
Objects) u kome e se nalaziti sadraj specifian za pojedie stranice. Tekst
formatirati korienjem stila tekst.
7. U desnu eliju u drugom redu upisati tekst: korisni linkovi
8. U elije u desnom redu poev od treeg ubaciti sliice korisnih linkova. Za svaki
link potrebno je na Internetu pronai logo. Logo sauvati kao sliicu (desni klik,
Save Picture As; ili print screen sa tastature, paste u Photoshop, pa isei
odgovarajui deo slike.) Ako je potrebno, podesiti veliinu slike u Photoshopu
(Save Picture for Web).
Podesiti da svaka slika bude hiperlink do odgovarajueg sajta (selektovati sliku,
Insert/ Hyperlink).
Primeri linkova koji se mogu ubaciti:
a. http://www.loznickagimnazija.edu.rs
b. http://www.facebook.com
c. http://www.mondo.rs
d. www.google.com
Korak 6: Kreiranje stranica
1. Na osnovu kreiranog templejta, kreirati potrebne stranice, npr:
a. index.html

b. biografija.html
c. galerija.html
d. linkovi.html
e. kontakt.html
2. Svaka stranica kreira se korienjem opcije File/New, zatim na kartici Templates
izabrati sajt i unutar njega odgovarajui templejt. Kliknuti na Create.
3. Svaka stranica sadri samo jedan deo koji se moe editovati, i to je upravo
odgovarajui Editable region sa templejt stranice. Potrebno je svakoj stranici
dati ime (u polju Title) i na svaku ubaciti odgovarajui sadraj.
Predlog:
a. na stranici index.html kao sadraj ubaciti tabelu (npr. 2 kolone i 5
redova). U prevom redu, u levoj eliji, upisti datum, a u desnoj Vesti.
U prvoj koloni u ostalim redovima ispisati datume, a drugoj koloni
daraj vesti. Npr. datum: 13.4.2015; sadraj vesti: Pera veeras pravi
urku! Svi ste pozvani!.
b. na stranici biografija.html otkucati Perinu biografiju
c. na stranici galerija.html napraviti galeriju Perinih slika. Slike
organizovati u tabeli.
d. na stranici linkovi.html napraviti listu Perinih omiljenih linkova. Za
svaki uneti link kreirati hiperlink do odgovarajue web stranice.
e. na stranici kontakt.html navesti mogunosti za kontaktiranje sa Perom.
Napomena: Tani nazivi stranica, njihov broj i sadrina nisu strogo
definisani ovim upustvom. Svaki korisnik ih moe definisati u skladu sa
idejom prezentacije.
Korak 7: Podeavanja templejt stranice
1.
Kada su kreirane sve stranice, potrebno je u templejt stranici
izvriti odgovarajue izmene, pre svega podesiti odgovarajue linkove.
2.
Za horizontalni meni, selektovati pojedinano rei poetna,
biografija, itd. i kreirati hiperlinkove ka odgovarajuim stranicama
prezentacije (Insert/Hyperlink).
3.
Takoe, za levi meni, za svako dugme pojedinano, podesiti
odgovarajui link prema stranicama.
4.
U zavisnosti od linih sklonosti, doterati estetski izgled templejt
stranice, i ostalih stranica prezentacije.
Korak 8: Sauvajte kompletan sajt na flesh i ponesite na blok.
NAPOMENA: Kompletno uputstvo za izradu prezentacije je okvirno. Pridravajte se
elemenata koji su zadani, ali slobodno moete modifikovati izgled sajta izborom drugih
boja, kreiranjem dodatnih strana ak je poeljno da dodate neto svoje na
prezentaciju!