Laboratorijske vjebe iz Adobe Dreamweaver-a

Vjeba br. 4
Ureivanje stranica nastavak
U prethodnim vjebama smo kreirali template i jednu jednostavnu stranicu zasnovanu na tom
template-u. Za preostale stranice, kreirat emo stranice zasnovane na template-u i zatim svaku
od njih snimiti umjesto praznih stranica kreiranih u vjebi 2. Svaka stranica e sadravati
razliite elemente koji se mogu koristiti na stranici.
Pobrojane i nepobrojane liste
U HTML-u postoje tri vrste listi: pobrojane, nepobrojane i definicione liste. U nastavku emo
koristiti pobrojane i nepobrojane liste. Primjer ispod pokazuje oba tipa ovih listi zajedno sa
HTML kodom koritenim za njihovo generisanje.

Kreiranje ovih listi u Dreamweaveru je slino kreiranju slinih listi u Word procesoru, premda
jo uvijek postoje ogranienja HTML-a. Na primjer, u Word-u je jednostavno kreirati
nepobrojanu listu koja koristi specijalne simbole ili sliice za oznake liste, dok HTML nema
te mogunosti (osim ako nije koriten CSS to emo vidjeti u narednim vjebama).
Kreiranje liste
1. Izaberite opciju New sa menija File. Kada se pojavi prozor New, izaberite tab Template.
Selektujte Main Pages template za site Moje cvijee. Kliknite na Create. Sauvajte novi
dokument kao contact.html. Kada se pojavi prozor, izaberite opciju Yes da zamijenite
postojei dokument sa novim.
2. Promijenite tekst u heading-u i Title dio sa Kontakti. Neka tekst bude formata heading 1.
3. U Main podruju, zamijenite postojei tekst sa sljedeim tekstom. Boldirajte rijei kao to
je to dato u tekstu.
Ako elite stupiti u kontakt sa nama zbog narudbi ili drugih informacija, kontakt
informacije su date u nastavku.
Telefon: 035 239 876
Fax: 035 239 789

4.

5.
6.
7.
8.

Email: info@mojecvijece.com
Adresa: 2/37 Marala Tita, 75000 Tuzla, Bosna i Hercegovina
Selektujte email adresu u tekstu. Kao Link osobinu u Properties panelu unesite ovu
adresu. Prije email adrese ukucajte mailto: (ukljuujui :). Ako elite kreirati hiperlink na
email adresu, on mora ukljuivati dio mailto:. Ovo znai da kada korisnik klikne na nju,
web browser e rei njegovom email programu da kreira novi mail adresiran na email
adresu u linku.
Na poetku prve linije teksta (Ako elite stupiti...) insertujte sliku icon_contact.gif.
Promijenite osobinu Align slike u right.
Selektujte etiri linije koje poinju sa boldovanim tekstom. elimo kreirati nepobrojanu
listu, ali emo za poetak kreirati pobrojanu listu.
U Properties panelu kliknite na Ordered list ikonu
.
Dok je lista jo uvijek selektovana, kliknite na nju desnim dugmetom mia, odaberite List
i Properties. Gornja opcija je namijenjena za promjenu cijele liste, dok je donja opcija
namijenjena za promjenu selektovanih elemenata liste. Opcije stila omoguavaju vam da
birate izmeu pet stilova HTML-ovih pobrojanih listi koje ukljuuju brojane, abecednei
liste sa rimskim brojevima. Start count omoguava vam da birate sa im poinje vaa lista
(ako nita drugo ne definiete ona poinje sa 1).

9. Izaberite stil za vau listu i zatim klinkite na OK.

10. Dok je vaa lista jo uvijek selektovana, kliknite na Unordered List ikonu
11. Snimite promjene fajla.

Definicione liste
Trea vrsta listi u HTML-u jeste definiciona lista. Definiciona lista sadri dva tipa paragrafa.
Oni su definicioni izraz i definicioni podaci, slino kao to u rjeniku imamo rije (definicioni
izraz) nakon kojeg slijedi detalnja definicija te rijei. U HTML-u, Definition Term paragraf
obino izgleda kao normalni paragraf sa paragrafom Definition Data koji je malo uvuen.
Lista linkova predstavlja primjer koritenja ove liste, pa emo je i kreirati za stranicu Linkovi.
Primjer definicione liste je prikazan ispod, zajedno sa HTML kodom. Moete primijetiti da je
podebljano formatiranje koriteno za svaki definicioni izraz.

Kreiranje definicione liste

1. Kreirajte novu stranicu zasnovanu na istom template-u kao u prethodnoj vjebi. Snimite
stranicu pod imenom links.html, zamjenjujui postojeu sa istim imenom.
2. Promijenite tekst u heading-u i naslov stranice u Linkovi. Stavite da je Format Heading1.
3. Izbriite tekst iz main podruja.
4. Sa menija Text, odaberite List i zatim Definition List. Ukucajte Learn to Pot i pritisnite
[Enter]. Prva linija (definicioni izraz) je praena sa linijom sa definicionim podacima.
Prema tome, u drugoj liniji ukucajte http://www.pots.com/ i pritisnite [Enter]. Selektujte tu
liniju i kreirajte od nje hiperlink. Kompletna lista bi trebala izgledati kao u nastavku.

5. Kada doete do kraja liste i ne elite da tekst u nastavku bude dio nje, moete jednostavno
otii na Text meni i selektovati List i zatim None.
6. Ispred prve linije teksta ubacite sliku icon_links.gif, i postavite da ima desno poravnanje.
Kreiranje liste pomou tabele
Ponekad je najbolji nain za kreiranje listinga pomou tabele. Mi emo koristiti tabelu da
kreiramo listu posuda za cvijee na stranici za predstavljanje proizvoda.
1. Kreirajte novu stranicu zasnovanu na template-u kao u prethodnom primjeru. Snimite je
pod imenom gallery.html, zamjenjujui na taj nain postojei fajl.
2. Heading tekst i naslov stranice promijenite u Galerija.
3. Obriite tekst u podruju Main i ukucajte sljedei tekst:
U nastavku moete vidjeti izbor nekih od naih proizvoda. U okviru nae proizvodnje je
dostupno puno vie tipova posuda. Za pregled svih naih posuda, ili ako elite posudu
posebno kreiranu za vas, posjetite nau stranicu sa kontaktima.
4. Kreirajte hiperlink tako da rijei stranicu sa kontaktima predstavljaju link na fajl
contact.html.
5. U novu liniju nakon teksta, umetnite tabelu koja ima 8 redova i 3 kolone. Koristite opciju
Top u Header-u kada budete kreirali tabelu.

6. Jednom kada ste kreirali tabelu, kliknite na jednu od elija na vrhu. U properties panelu,
pored opcije header e biti postavljena kvaica.
3

7. U prvu eliju u prvom redu unesite Naziv, a u drugu eliju unesite Opis. Treu eliju
ostavite praznu. Ostale elije popunite kao u nastavku.
8. Ovdje je koritena slika pot1.gif i njen Alt tekst je isti kao naziv te posude Crvena Zemlja.

9. Popunite ostatak tabele kao na slici. Alt tekst odgovara nazivima posude. Slike su pot2,
pot3...

10. Kada ste kreirali tabelu, njezina irina je podeena na 100%. U ovom sluaju, nama ta
irina odgovara, ali isto tako moete je mijenjati prema potrebi. Pomjerite mi na vrh
tabele, gdje se pojavljuje irina tabel. Kliknite na dugme koje se pojavi kada se mi nalazi
na irini.
11. Sa liste koja se pojavi izaberite Clear All Widths. Snimite dokument.