-VEŽBA 8Otvaranje novog web dokumenta Podešavanje svojstava web stranice Ubacivanje tabela na web stranicu Podešavanje svojstava tabele Rad sa tekstom
1
Uvod Da biste mogli napraviti Web sajt, kao i u svemu, najbolje je koristiti odgovarajući alat. U ovom slučaju to su tzv. Web editori, koji se dele u dve osnovne grupe i to: Editori kôda namenjeni su onima koji poznaju HTML jezik, i mogu Web stranicu praktično napisati upisivanjem jednog po jednog taga. Za većinu ostalih korisnika interesantniji će biti vizuelni Web editori kao što su FrontPage, Dreamweaver, Cute SiteBuilder i drugi. Ovi programi pojednostavljuju pravljenje Web stranica tako što pisanje kôda preuzimaju na sebe, a rad na stranici približavaju radu u nekom od grafikih programa. U njima ćete po telu stranice pomerati različite objekte i uređivati njihov izgled, a program će na osnovu toga generisati HTML kôd. Ako prvi put pokrećete Dreamweaver, pojaviće se prozor dobrodošlice sa informacijama za nove korisnike, kao i skup novih mogućnosti za one koji već poznaju program. Otvaranje novog HTML dokumenta vrši se preko opcije HTML iz kolone Create New.
Slika 1. Pokretanje Dreamweaver-a
2
Otvoriće se novi HTML dokument (Slika 2) pod nazivom Untitled-.1.
Slika 2. Okruženje Dreamweaver-a
Osnovno okruženje Dreamweaver-a 1. Radni prostor – Prostor za kreiranje web stranice 2.Properties Palette – Koristi se za pregled i menjanje atributa (svojstva) izabranog (selektovanog) elementa stranice (tekst, slika, tabela,link..). Sadržaj Properties Palete menja se u zavisnosti od izabranog elementa sa radnog prostora. 3. Side Palette – Koristi se za prikaz ili sakrivanje ostalih paleta. 4. File Palette – Za prikaz svih kreiranih fajlova i stranica u okviru web sajta. 5. History Palette – Kao i kod Adobe Photoshop-a, omogućava prikaz prethodnih koraka (akcija). Na taj način moguće se vratiti nekoliko koraka unazad ako je potrebno.
3
6. CSS Palette – Omogućava kreiranje, editovanje, dodavanje i brisanje klasa CSS stilova za različite elemente stranice. 7. Insert Palette - U okviru ove palete nalaze se ikone za brže ubacivanje objekata (tabele, tekst, slike, layers, okvire, razne vrste fajlova …) na radni prostor. Najveći deo posla obavlja se u prozoru dokumenta, gde možete ubaciti, promeniti i izbrisati elemente od kojih se sastoji Web strana. Nova strana podrazumevano se zove Untitled Document što se može videti u naslovnoj traci dokumenta (polje Title). U Dreamweaveru postoje tri načina prikaza : • Design View - Pogled Design je dizajnersko okruženje za vizuelni raspored strane, vizuelno editovanje i brzi aplikacioni razvoj, • Code View - Pogled Code je ručno kodirajuće okruženje za pisanje i editovanje HTML-a, JavaScript-a, jezika servera i bilo kog drugog kôda, • Split Design i Code - Pogled Split omoguava da se vidi i dizajn i kôd istog dokumenta u istom prozoru.
Slika 3. Tri prikaza radnog prostora
U tekst polju Title na vrhu dokumenta upišite naslov stranice (slika 4) i sačuvajte HTML dokument Untitled-1 kao index.html opcijom File > Save As. Index.html predstavlja osnovnu default/home/ početnu stranica sajta koja se prikazuje posetiocima kada upišu adresu web sajta u pretraživač ili browser.
Slika 4. Upisivanje naslova stranice – Title
4
Podešavanje svojstva Web stranice (Page Properties) Naslov stranice, boja pozadine, pozadinska slika, tekst, boje linkova, margine su osnovna svojstva svakog web dokumenta. Podešavanje ili promenu ovih svojstava možete izvršiti preko opcije Page Properties u prozoru Properties. Drugi način je otvaranjem odgovarajuće komande iz File menija. 1. Izaberite komandu Modify / Page Properties iz File menija, ili klikinite na Page Properties dugme u prozoru Properties. 2. Otvoriće se dijalog prozor Page Properties (slika 5)
Slika 5. Page Properties U polju Background birate boju pozadine a u polju Background image birate pozadinsku sliku. Ako je za pozadinu izabarana slika onda ona treba da predstavlja mali grafički objekat, čijim kopiranjem se popunjava cela strana. Strana može imati definisanu boju i sliku za pozadinu. Ako je veza korisnika sa Internetom spora, prvo će biti prikazana boja pozadine a zatim se učitava slika koja prekriva boju pozadine. Ako se ne snimi datoteka odmah po otvaranju dokumenta, u polju Background image se prikazuje cela putanja izabrane slike na disku. Zato se treba voditi računa da se datoteka snimi pre uvoženja bilo kakvog sadržaja strane, čak i slike za pozadinu. Left Margin i Top Margin – polja za podešavanje margina web stranice u browseru. Pri otvaranju novog dokumenta u Design modu položaj kursora je po default-u podešen na 10 pixela od vrha, odnosno leve strane prozora dokumenta. Ukoliko želimo da početak web stranice bude u koordinatnom početku (gornji levi ugao) potrebno je margine podesiti na vrednost 0. Margin Width i Margin Height – polja za podešavanje veličine margina web stranice u browseru. Internet Explorer ignoriše ove vrednosti i koristi vrednosti Left Margin i Top Margin. instead. Dreamweaver ne prikazuje stranične margine u Document prozoru. Potrebno je prikazti stranicu u browseru (Preview In Browser) da bi se videle podešene margine. U okviru dijalog prozora Page Properties vrši se i podešavanje kodnog rasporeda Web stranice izborom opcije Title/Encoding iz liste Category (slika 6).
5
Slika 6. Title/Encoding Kodni raspored web stranice biramo iz padajuće liste Encoding. Za kodni latinični raspored koristimo Central European (Windows). Ako želimo da ne zavisimo od klijentskog računara i njegovog kodnog rasporeda onda biramo Unicode (UTF-8) koji omogućava čitanje bilo kog pisma (ćirilice, glagoljice, kineskog i dr).
Podešavanje rasporeda elemenata na web stranici upotrebom tabela (Page Layout)
Čak i ako kreirate jednostavan web sajt, proces bi trebalo započeti skiciranjem rasporeda elemenata na stranici. Pored skiciranja rasporeda elemenata za svaku stranicu, trebalo bi utvrditi i koliko stranica ćete imati u okviru web sajta. Temeljno planiranje je od suštinske važnosti za dobar dizajn. Jednostavne Web strane brzo se prave smeštanjem teksta i slika neposredno na stranu. Međutim, tabele pružaju više mogućnosti za razmeštanje elemenata na strani. One omogućavaju predstavljanje informacija na organizovan način, jer sadrže redove i kolone ćelija u koje se smešta sadržaj. Više ćelija može se objediniti u velike ćelije. U početku su tabele korišćene za jednostavniji prikaz tabelarnih podataka, kao što su razni izveštaji i slično, ali su mudri dizajneri ubrzo shvatili da bi tabele mogli da iskoriste i za povećanje mogućnosti dizajniranja, kako bi se obezbedio veći stepen kontrole nad raspoređivanjem elemenata i razmaka među njima. Tabele su podeljene na redove, koji prolaze horizontalno kroz tabelu i kolone koje se protežu vertikalno kroz tabelu
Ubacivanje tabela Za ubacivanje tabele na radni prostor dokumenta možete koristiti opcije: • File / Insert / Table • Insert Paleta – Common tab - ikona Table • Ctrl+Alt+T U okviru dijalog prozora Table mogu se izvršiti sledeća podešavanja (slika 7) : • Rows – broj redova. • Columns – broj kolona tabele. • Width – širina tabele u pikselima ili procentima • Border – debljina ivice tabele. Podrazumevana vrednost je 1. • Cell Padding – razmak između sadržaja tabele i njenih ivica. Ako uopšte nećete razmak između sadržaja ćelija tabele i njenih ivica upišite 0 u ovo polje.
6
•
Cell Spacing – razmak između ćelija tabele, ne računajući ivice. Ako uopšte nećete razmak između ćelija tabele upišite 0 u ovo polje.
Slika 7. Dijalog prozor Table
Nakon upisavanja vrednosti za tabelu (slika 7) i klikom na dugme OK, u Design prikazu dobićete tabelu kao na slici 8.
Slika 8. Prikaz ubačene prve tabele u Design view
• •
Da biste odselektovali ubačenu tabelu klikinite mišem sa strane. Pozicionirajte se ispod prve tabele i ubacite drugu tabelu postavljajući iste parametre kao i kod prve. Na kraju ubacite i treću tabelu koja treba da ima jedan red, jednu kolonu, širina je 960 px, cellpadding i cellspacing = 0.
Nakon ubacivanja sve tri tabele vaša stranica će da izgleda kao na slici 9.
7
Slika 9. Prikaz ubačene tri tabele u Design view
Ako kliknete na bordere tabele, možete videti i podešavati karakteristike i osobine označene tabele u Properties prozoru (slika 9a).
Slika 9a. Properties prozor kada je tabela označena
Prateći pravila efikasnog i dobrog dizajna, web strana da poseduje logičke celine (slika 10). Prva ubačena tabela (Header) koristi se za pozicioniranje slika koja predstavljaju logo i baner. Druga tabela (Sidebar left, Content, Sidebar right) koristi za pozicioniranje osnovne navigacije, sadržaja stranice i elementa kao što su reklame, ankete…Treća tabela (Footer) koristi se za organizaciju elemenata podnožja (footera) stranice.
Slika 10. Page layout
Podešavanje parametara tabele Podešavanje širine i visinu kolone ili reda tabele 8
Postavite kursor u ćeliju tabele čije dimenzije želite da podesite. U donjem levom uglu prozora Document nalazi se birač HTML oznaka – Tag Selector. U njemu se hijerarhijski prikazuju HTML oznake koje pripadaju trenutno izabranom elementu. Ova alatka omogućuje brzo kretanje kroz kod strane, elemente sa kojima radite i lako biranje ostalih elemenata. Početna HTML oznaka je uvek tag za telo stranice <body> (slika 11).
Slika 11. Birač HTML oznaka – Tag Selector
Pomoću selektora tagova izvršiti selekciju kolone čiju širinu želite da podesite. U Properties prozoru u polje W upišite odgovarajuću vrednost. Ukoliko želite da podesite visinu reda ili kolone postupak je isti samo što vrednost upisujete u polje H u Properties prozoru (slika 12). Polja za podešavanje visine i širine (H, W)
Slika 12. Properties prozor selektovane tabele
Podešavanje pozadinske boje kolone ili reda tabele Postavite kursor u ćeliju čiju pozadinsku boju želite da podesite. Pomoću tag selektora selektujete red ili kolonu koju podešavate. U Properties prozoru kliknite na ikonu za podešavanje pozadinske boje (slika 13). Podešavanje pozadinske boje se može vršiti i upisivanjem heksadecimalnog koda u tekstualnom polju pored opcije Background Color.
Slika 13. Podešavanje pozadinske boje kolone ili reda tabele
Spajanje ćelija tabele Da bi ste spojili više ćelija jednog reda potrebno je prvo da označite ćelije koje spajate. U Properties prozoru biće aktivno dugme za spajanje ćelija koje treba da selektujete (dugme ispod reči “Cell”) (slika 13a).
9
Slika 13a. Spajanje ćelija tabele
Rad sa tekstom Tekst se može dodati kopiranjem i prenošenjem iz drugog dokumenta. Na primer, Dreamweaver može da otvori Microsoft Word dokument, ako je bio snimljen kao tekstualna datoteka (sa ekstenzijom .txt) ili kao HTML dokument. Tekst u Microsoft Word dokumentu možete sačuvati kao HTML izborom opcije Save as Web page iz padajućeg menija File. Kada otvorite tekstualnu datoteku u Dreamweaveru, tekst možete kopirati i preneti na vašim stranicama. Ukoliko želite da posetioci čitaju vaš sadržaj stranica, obezbedite razdvajanje pasusa i dovoljno belog prostora pošto “odmara” oči. Tekst ne treba da bude ni predugačak ni preširok (“kratka” forma), gde sa malo reči treba saopštiti najbitnije informacije. Istraživanja su pokazala da čovek čita 25% sporija na monitoru, nego što to radi na papiru. Nikad ne podvlačite reči, jer takvo formatiranje navodi na fontove. Pet vrsta fontova imaju najbolju čitljivost na ekranu i zastupljenost na računarima, a to su: Arial, Verdana, Times New Roman, Tahoma i Courier. Serif fontovi ( Times New Roman, Georgia,...) se uglavnom koriste za naslove i veće natpise. Sans-Serif (Helvetica, Verdana, Arial,…) koriste se za tekst sadržaja. Korišćenje više različitih fontova na stranicama pravi nered i konfuziju. Standard je da se koristi jedna familija fonta različitih veličina za naslove, podnaslove, navigaciju i za sadržaj. Veličina fonta osnovnog teksta sadržaja ne bi trebalo da bude manja od 10 pixela. Dužina reda ne bi trebalo da bude veća od 11 reči. Da bi posetilac vašeg sajta video stranu onako kako ste je napravili, mora na svom računaru imati instaliran font koji ste koristili. Kada je tekst selektovan, u prozor Properties Font padajuća lista omogućava izbor “familije fonta” (slika 14). Ako prvi font u spisku fontova nije instaliran, browser će pokušati da upotrebi drugi. Ako nijednog od tih fontova nema na korisnikovom računaru, tekst se prikazuje u podrazumevanom fontu browsera. Kombinacije fontova (kao što su Arial, Helvatica, Sans - serif) predstavljaju podrazumevane fontove koji svaki operativni sistem poseduje. U Properties prozoru možete promeniti i veličinu fonta u polju Size. Da biste istakli određene, reči ili izraze, na tekst možete primeniti opcije formatiranja kao što su podebljan ispis (b – bold), kursiv (i – italic).
10
b)
a)
Slika 14. Prozor properties kada je tekst selektovan Format padajući meni omogućava formatiranje označenog teksta kao naslov (Heading 1), podnaslov
(Heading 2, Heading 3, Heading 4, Heading 5, Heading 6), paragraf (Paragraph). Dreamweaver omogućava da tekst bude u formi liste i to: • Neuređene – unorder list • Uređene – order list. Uređena lista sadrži stavke odvojene rednim brojevima ili slovima abecede, i poređene u numerisanim, odnosno abecednim spisak. Mogu da se koriste arapski ili rimski brojevi, odnosno velika ili mala slova abecede. U neuređenoj listi ili listi nabrajanja svaka stavka počinje znakom za nabrajanje (bulletom). ZADATAK ZA SAMOSTALAN RAD: Napraviti stranicu pod nazivom index.htm (slika 15). Podesiti kodni raspored stranice da podržava ćirilicu i latinicu i boja pozadine na #F4F4F4. Tabela za zaglavlje – širina: 960px, visina 60px, boja: #9966FF. Unutar tabele dodati tekst NAZIV SAJTA formatiran sa Heading 1. Tabela za sadržaj - širina 960px: prva kolona - širina: 150px, boja: #CCCCCC. Unutar ćelije dodati tekst Link1,Link2 i Link3 kao neuređenu listu. druga kolona – širina: 710 px, treća kolona - širina: 100px, boja: #333366 Tabela za podnožje - širina: 960px,visina:30px, boja: crna. Tekst Naslov treba da bude formatiran kao Heading 2 a tekst podnaslov kao Heading 3. Tekst za popunu sadržaja možete preuzeti iz dokumenta materijal_za_vezbu8.txt VODITI RAČUNA O NAČINU ORGANIZACIJE DELA STRANICE U KOJEM SA 11
NALAZI SADRŽAJ!!!!!!!!
Slika 15
12