WEB DIZAJN - I deo Predavač:Mirjana Brković

Size: px

Start display at page:

Download "WEB DIZAJN - I deo Predavač:Mirjana Brković"

Laurence Copeland
5 years ago
Views:

1 Web Design-B.Simeunović Obrazovni centar Sveti Sava Čačak - K U R S - WEB DIZAJN - I deo Predavač:Mirjana Brković -WWW-Internet servis -Skup hipertekstualnih elemenata -Hiper tekst omogućava nelinearno kretanje kroz dokument -HTML-Hyper Tekst Markup Language Web stranica-jedan dokument pisan HTML jezikom. -Web čitač(browser)-program za pregled web strana http-protokol(pravilo)-hiper tekst transfer protocol -cacak.co.yu DOMEN(Ime servera) Index.htm-stranica -Internet adresa:url(uniform Resource Location) -Tekst editori -Vizuelni editori(wysiwyg) HTML EDITORI What you see is what get -Najpoznatiji HTML editori su: -MS Front Page (2003) -Macromedia Dreamwiver(Macromedia Studio-2004,8) Macromedia Dreamwiver -Pogledi na dokument u Dreamwiveru mogu biti: 1.CODE(Kodni prikaz-html elementi) 2.SPLIT(Podeljeni prikaz) 3.DESIGN(Vizuelni režim) -Strukturu web stranice čine html elementi,a elementi se sastoje od tagova. <html> Početni tag. </html> Završni tag PR:Ovaj tekst je podebljan podebljan će biti ispisano bold slovima.

sajta: -Sajt se sastoji od jedne ili više html strana,zajedno sa dodatnim sadržajima(slike,vizuelni efekti.

2 Web Design-B.Simeunović <html> <head> <html > <head> -zaglavlje dokumenta <title> </head> <body> </body> </html> -sadržaj dokumenta Internet prezentacija -Kreiranje web sajta: -Sajt se sastoji od jedne ili više html strana,zajedno sa dodatnim sadržajima(slike,vizuelni efekti...) -Svaka internet prezentacija poseduje određenu organizacionu strukturu stranica: -linearnu -hujerarhijsku -Za svaku od struktura treba obezbediti kvalitetnu navigaciju -Sajt-folder sa sadržajem -Prvo treba formirati folder u kome će se čuvati sadržaj prezentacije -Sa linije menija odabrati SITES Menage sites...ili, Sa fajl panela odabrati iz liste opcija Menage sites.

dobijenog obrasca odabrati karticu ADVANCED -Odabrati sa

prezentacije i odabrati folder u kome će se sadržaj čuvati.

3 Web Design-B.Simeunović Odabrati opciju NEW,zatim posle potvrde DONE iz dobijenog obrasca odabrati karticu ADVANCED -Odabrati sa liste(levo)-local INFO, i u ponuđenim poljima popuniti ime prezentacije i odabrati folder u kome će se sadržaj čuvati. (local root folder) -Odabrati SITE MAP LAYOT i u ponuđenom polju upisati naziv polazne strane. -Panel ASSETS služi za pregledanje dodatnih sadržaja (slike,multimedija...) PREGLED STRANICE U WEB ČITAČU File meni Prewiev in browser,ili ikonica globusa na paleti sa alatima,ili funkcijski taster F12. -Podešavanja Dreamweavera: -Meni Edit-Preferences- Na kartici General isključiti zadnje 3 opcije(css...,use Strong...)

dokumenta: -Na liniji alata dokumenta-title-(upišimo naziv) -Podešavanje karakteristika strane: -U prozoru Properties kliknimo na Page properties: Klikom na aperance podešavamo izgled strane

4 Web Design-B.Simeunović (koristimo i tagove) -isključujemo upotrebu stilova umesto tagova -Na kartici prewiev in browser postavimo Internet Explorer kao osnovni čitač -Postavljanje naslova dokumenta: -Na liniji alata dokumenta-title-(upišimo naziv) -Podešavanje karakteristika strane: -U prozoru Properties kliknimo na Page properties: Klikom na aperance podešavamo izgled strane -Koristimo RGB sistem boja(cmik model koriste štampači) PR: 0,0,0-crna boja 255,255,255-bela boja -Pri označavanju boje koristi se heksadecimalni kod (cifre od 0-9 i slova A-F) Ovde podešavamo: -pozadinsku sliku -osnovnu boju pozadine -boju slova u tekstu -margine -Na kategoriji Title Encoding se podešava naslov dokumenta i odabira pismo(za prikaz naših slova odabrati Central Europen windows) -Podešavanje teksta Osnovna struktura teksta se organizuje kroz paragrafe(tag ),čije karakteristike se mogu podešavati, kao na primer: -centralno poravnanje paragrafa Na nivou taga karakteristike se podešavaju na nivou atributa,kojima se dodeljuje vrednost u okvirtu početnog taga .(sadrzaj) -Razdvajanje sadržaja može se izvršiti i upotrebom stilova za naslove (Heading1.7) (Koristiti listu Format sa Properties linije)

glavnog menija kartica text) Iz menija Text -Podešavanje fonta na Web stranicama se vrši izborom familije fontova -Mogu se podesiti veličina i boja fonta Liste -Postoje sledeće vrste lista:

5 Web Design-B.Simeunović Formatiranje teksta -Formatiranje tekstualnih sadržaja Web stranice može se vršiti selektovanjem dela teksta i izborom željenog formata pomoću: Properties linije Insert linije(ispod glavnog menija kartica text) Iz menija Text -Podešavanje fonta na Web stranicama se vrši izborom familije fontova -Mogu se podesiti veličina i boja fonta Liste -Postoje sledeće vrste lista: Numerisane (<OL>) Nenumerisane(buleti, <UL>) Definicione liste(<dl>) -Podešavanje liste vrši se iz Meni linije Text List Properties Gde se može podesiti : Tip liste(vrsta) Stil(1,2,3...;I,II,III...) Početni broj(za numeracione liste) -Definicione liste omogućavaju kreiranje rečnika pojmova sa njihovim objašnjenjem. Lista se uključuje pomoću ikone DL u Text Insert liniji. Ili preko već opsanog: Meni-Text-List. -Nakon uključivanja liste unose se parovi : -Pojam Njegova definicija -Pojam

-Umetanje razmaka kao specijalnog karaktera se vrši iz tekst kartice(specijalni karakteri).sa tastature : Shift+Enter.

Dobija se iz glavnog menija-insert-html-horizontal Rule Širina horizontalne linije se može odrediti u pikselima ili procentima širine ekrana (što je preporučljivo zbog različitih veličina monitora).

6 Web Design-B.Simeunović Njegova definicija -Unos preloma reda: se koristi za prelom u okviru paragrafa,a dodaje se iz Insert linije-kartica Tekstposlednja ikona sa specijalnim karakteristikama. -Umetanje razmaka kao specijalnog karaktera se vrši iz tekst kartice(specijalni karakteri).sa tastature : Shift+Enter. -Horizontalna linija-element koji se koristi za vizuelno razdvajanje celina stranice. Dobija se iz glavnog menija-insert-html-horizontal Rule Širina horizontalne linije se može odrediti u pikselima ili procentima širine ekrana (što je preporučljivo zbog različitih veličina monitora).ovo se podešava prethodnim selektovanjem horizontalne linije, pa sa properties linije unosimo podatke za W(širina)i H(debljina)-(pikazano na gornjoj desnoj slici). Linkovi -Linkovi se mogu praviti ka stranicama trenutne prezentacije ili ka nekoj drugoj prezentaciji.ako kreiramo link na stranu naše prezentacije,treba uraditi sledeće: Selektujemo tekst koji će predstavljati link i u propertis liniji u polje link treba dati adresu na koju taj link vodi Izbor strane (resursa) vršimo pomoću ikone foldera - pronalazimo dokument na koji link treba da vodi Možemo koristiti i pokazivač u files(fajls) panelu kojim možemo ukazati na sadržaj

html adresu(url).pr.: http://www.google.

korišćenjem ikone E-mail iz pomoćnog menija Common Web grafika-rad sa slikama -Za internet

7 Web Design-B.Simeunović Kada se radi link na neku spoljašnju stranicu,potrbno je upisati kompletnu html adresu(url).pr.: -Otvaranje linka u novom prozoru čitača vrši se postavljanjem target(ciljni prozor)tog linka na vrednost blank. -Kreiranje linka: Insert meni- link-upisati tekst i adresu -Isto se može dobiti i korišćenjem ikone iz pomoćnog menija Common Web grafika-rad sa slikama -Za internet prezentacije se mogu koristiti tri formata slika: 1. JPG-kompresovani format,16 miliona boja.odabrati rezoluciju do 72(zbog manje veličine fajla).nema transparentnost. 2. GIF-radi sa 256 boja,pogodan za animirane slike,logotipe.ima transparentnost- (providnost). 3. PNG-Veliki broj boja,transparentan.radi u vektorskom formatu.

Web Design-B.Simeunović - 8 - -Ubacivanje slike:common meni-ikona za slike-image:...ili,meni Insert-Image.

-Podešavanje već ubačene slike: Selektovanjem slike, u Properties liniji dobijamo karakteristike slike koje možemo podešavati: -Na gornjoj slici vidimo da je veličina fajla za sliku 118 kb, što je

-U rubriku Border upisujemo vrednost za debljinu okvira slike.ako je bez vrednosti,ili 0,slika neće imati okvir.

8 Web Design-B.Simeunović Ubacivanje slike:common meni-ikona za slike-image:...ili,meni Insert-Image... -Sliku je poželjno prethodno obraditi u nekom programu za obradu slika(podesiti rezoluciju,veličinu...)pre ubacivanja u program. -Podešavanje već ubačene slike: Selektovanjem slike, u Properties liniji dobijamo karakteristike slike koje možemo podešavati: -Na gornjoj slici vidimo da je veličina fajla za sliku 118 kb, što je postignuto umanjenjem dimenzija(u rubrici W-širina, vidi se da stoji -100,a H-visina bez vrednosti,što znači da će visina slike proporcionalno biti umanjena prema ovoj širini). -U rubriku Border upisujemo vrednost za debljinu okvira slike.ako je bez vrednosti,ili 0,slika neće imati okvir. -Ako hoćemo da linkujemo sliku na istu sliku veće veličine,tada je potrebno: Ubaciti odabranu sliku u folder u kome radimo aplikaciju,naravno veću nego što je ovde Na prethodno neki opisani način linkovanja, povezati sliku sa njenim (dosta većim) originalom(u properties liniji,kada je selektovana slika,imamo rubriku Link u koju treba upisati naziv slike,ili je odabrati preko ikone foldera,ili ikonom koja će strelicom povezati ovaj link sa slikom smeštenom na desnoj strani u Fajl ili Assets panelu) (U polje link je upisana slika preko ikone foldera- ).

tabele je zgodnije postaviti u procentima,zbog mogućnosti

-Cell padding-označava koliko je odmaknut sadržaj ćelije od

-Cell spacing-predstavlja razmak između dve susedne ćelije.

-<tr>-selektuje jedan red -<td>-selektuje jednu celiju

tabelu: I sa kartice layot mogu se vršiti promene nad

9 Web Design-B.Simeunović TABELE -Tabele se koriste za pravilan razmeštaj sadržaja na strani. -Dobija se iz menija Common(najčešći poslovi) Table: Širinu tabele je zgodnije postaviti u procentima,zbog mogućnosti da jednako bude vidljiva na svim rezolucijama monitora. -Cell padding-označava koliko je odmaknut sadržaj ćelije od ivice ćelije. -Cell spacing-predstavlja razmak između dve susedne ćelije. -Selektor tagova:-<table>-selektovana cela tabela -<tr>-selektuje jedan red -<td>-selektuje jednu celiju -Tabele se mogu korigovati i sa strelica koje prate svaku tabelu: I sa kartice layot mogu se vršiti promene nad tabelama. Podešavanja tabela se vrše upotrebom različitih atributa,i to podešavanje se može vršiti na nivou cele tabele,reda ili jedne ćelije. -Podešavanje se vrši iz properties linije ili iz menija Modify-Table:

skup pravila formatiranja kojima se podešava izgled web strane.

primenjivati na više strana. Stilom se može definisati izgled određenog taga(p,body,h1.

Podešavanje stilova se vrši iz menija Text-CSS Styles.

nekim postojećim stilom koga ima u obliku fajla-attach.

10 Web Design-B.Simeunović LISTE STILOVA -CSS-Cascading Style Sheet (kaskadna lista stilova) -CSS predstavlja skup pravila formatiranja kojima se podešava izgled web strane.stil se može definisati na nivou jednog dokumenta, ili kao poseban fajl sa stilom koji se može primenjivati na više strana. Stilom se može definisati izgled određenog taga(p,body,h1...),a postoje i tzv. klase stilova,pri čemu se klasa može primeniti na bilo koji element strane. Podešavanje stilova se vrši iz menija Text-CSS Styles. Ili sa Properties linije-style -- -Iz dijaloškog prozora Edit Style Sheet možemo povezati dokument sa nekim postojećim stilom koga ima u obliku fajla-attach... Možemo definisati novi stil(na nivou stranice),ili novi fajl sa stilom i možemo menjati postojeće stilove. FREJMOVI(OKVIRI) -Frameset strana je strana koja služi za podešavanje razmeštaja više različitih web stranica u okviru jednog prozora web čitača.time je prozor čitača podeljen na više pravougaonih oblasti, i u svakoj od tih oblasti prikazuje se različita strana.

Web Design-B.Simeunović - 11 - -Jedna pravougaona oblast predstavlja frame/freim/-okvir u kome se nalazi jedan HTML dokument.

11 Web Design-B.Simeunović Jedna pravougaona oblast predstavlja frame/freim/-okvir u kome se nalazi jedan HTML dokument. -Kreiranje framest dokumenta:file-new-category-framesets -Izaberemo jedan od ponuđenih tipova podešavanja.posle toga, dobijamo jednu novu frameset stranu(možemo promeniti veličine frejmova),kao i nove dokumente u svakom od frejmova. Ukoliko u dizajn režimu nije vidljiva granica između frejmova(okvira),uključujemo je iz menija View -Visual Aids-Frame borders: Nakon unosa sadržaja u svaki od frejmova,potrebno je snimiti celu frameset stranu(glavna) kao i pojedinačne stranice u frejmovima(meni.dobro došli...) -AKTIVIRANJE LINKA U ODREĐENOM FREJMU U svakom framesetu svaki freim ima svoj naziv.postavljanjem linka u neki od frejmova,nije određeno u kom frejmu se taj link otvara.potrebno je linku,pomoću atributa Target definisati frejm u kome se linkovana stranica prikazuje( ciljni frejm ). Vrednosti target atributa,mogu biti: Blank-aktivira link u novom prozoru čitača. Parent-aktiviranje linka u roditeljskom frejmu Self-otvara se u frejmu u kome se trenutno nalazimo Top-otvara se u najvišem frejmu Podešavanje ciljnog frejma može se vršiti na nivou čitave strane-u kom frejmu će se otvoriti svi linkovi.to se vrši pomoću taga base u hed delu stranice: Insert-HTML-Head Tags-Base:(Ovo se radi na stranici sa menijem)

želimo da se krećemo kroz jednu web stranicu, potrebno je na toj stranici definisati označena mesta(insert-named

ikonicu Ako smo napravili označena mesta,tada se u listi sa linkovima pojavljuju ta mesta.

12 Web Design-B.Simeunović U dijalog prozoru href ne upisujemo ništa,a za Target izaberemo Main frame LINK NA DEO STRANE Ako želimo da se krećemo kroz jednu web stranicu, potrebno je na toj stranici definisati označena mesta(insert-named Anchor,ili ikona sidra u Common kartici) Na ovako označena mesta moguće je praviti linkove(insert-hiperlink),ili na ikonicu Ako smo napravili označena mesta,tada se u listi sa linkovima pojavljuju ta mesta.link na definisano mesto se razlikuje po tome što se ispred naziva pojavljuje simbol taraba(#) MAPIRANE SLIKE Predstavljaju obične slike podeljene na više oblasti,od kojih svaka oblast predstavlja link na različite stranice.oblasti mogu biti: Kružne Pravougaone Poligonalne

delu mape se dodeljuje link (+ target,+alt...)... HTML FORME -Formular služi za unos podataka od strane korisnika.

Formular sadrži različite vrste polja za unos i jedan formular obuhvata sve podatke unete u polja formulara.

13 Web Design-B.Simeunović Oblast se dodaje selektovanjem slike i izborom vrste oblasti iz Properties linije,nakon čega izabrani oblik prevučemo preko određenog dela slike Tom delu mape se dodeljuje link (+ target,+alt...)... HTML FORME -Formular služi za unos podataka od strane korisnika.uneti podaci se mogu obraditi na više načina,čuvati u bazama podataka na serveru,slati na određenu adresu. Formular sadrži različite vrste polja za unos i jedan formular obuhvata sve podatke unete u polja formulara. Dodavanje forme:insert-form-form,ili iz Insert menija-forms: -Forma ima svoje ime-form name,dokument koji obrađuje formu(action) i način prosleđivanja podataka(metod Get ili Post). TEMPLATES (ŠABLONI) Šabloni služe za upotrebu zajedničkih elemenata na svim stranama sajta.templates se kreira iz HTML stranice čiji dizajn i razmeštaj prihvatamo za osnovni na našem sajtu.kreiranje Templatea vrši se iz File-Save As Template,u trenutku kada smo već kreirali stranicu željenog dizajna.

sajta napravljen novi folder Templates, koji sadrži fajl Templ.dwt.

objects-editable region(izmenjiva oblast).

14 Web Design-B.Simeunović Templates se pridružuje nekom sajtu,daje mu se neko ime,i tada je u okviru sajta napravljen novi folder Templates, koji sadrži fajl Templ.dwt. U svakom šablonu se definušu oblasti koje će moći da se menjaju u stranicama zasnovanim na šablonu.na primer,selektujemo ćelije tabele u kojoj će moći da se vrše izmene:insert-template objects-editable region(izmenjiva oblast). Iz tog šablona kreiramo nove HTML strane: File-New Templates(kartica)-odabrati sajt(site)koji nam odgovara. Na stranicama se mogu dodavati sadržaji samo u definisanim-izmenjivim regionima,apromene ostalih delova se mogu vršiti samo na šablonu.(dwt.fajl).svaka izmena na šablonu inicira ažuriranje stranica koje primenjuju taj šablon.... Kontrola ispravnosti podataka u formularu: Selektujemo Formu i iz panela Tag inspector,na kartici Behaviors(ponašanja),izaberemo Validate Form.Za polja formulara, ovde možemo podesiti obavezne vrednosti.

dugme(pravougaonik,krug...) i podesimo format tih elemenata.

..(ili F8-taster). -Dobijeni simbol umnožimo više puta :Edit-Duplicate.

.. Izmena postojećeg simbola,vrši se dvoklikom na primerak simbola.

.. Kada smo završili kreiranje svih dugmića, izvozimo slike (ili celu HTML stranicu) iz: File-Export.

15 Web Design-B.Simeunović KREIRANJE DUGMADI U MACROMEDIA FIREWORKSU -Nacrtamo objekte koji čine dugme(pravougaonik,krug...) i podesimo format tih elemenata.zatim selektujemo sve nacrtane elemente i kreiramo simbol dugmeta. Modify-Symbol-Convert to symbol...(ili F8-taster). -Dobijeni simbol umnožimo više puta :Edit-Duplicate...i svakom od primeraka dugmeta promenimo u properties liniji :tekst,link,target... Izmena postojećeg simbola,vrši se dvoklikom na primerak simbola.u simbolu se može menjati:up,over,down... Kada smo završili kreiranje svih dugmića, izvozimo slike (ili celu HTML stranicu) iz: File-Export ZAVRŠNI TEST 1. U folderu i-06 kreirati folder test 2. Keirati sajt čiji je osnovni folder test 3. Kreirati HTML stranu,snimiti je pod imenom index.htm u folderu test 4. Na sredini strane index napraviti veliki naslov(h1): test za Web design 5. Ispod naslova napraviti tabelu sa tri kolone,širine 40%,poravnati ih centralno,i u njih postaviti sledeće linkove: koji vode na strane : Index.htm home kontakt linkovi

16 Web Design-B.Simeunović Kontakt.htm Linkovi.htm 6. Za stranu index.htm napraviti stil u posebnom fajlu(still.css),sa podešavanjem za tagove ,<td>,<body>,<a hover>,<a link>,<activate>, i definisati klasu stila Moja slova. 7. Ispod tabele sa linkovima formirati tabelu širine 95%(jedna kolona,jedna vrsta),a unutar nje formirati novu tabelu(2x2),a u levom delu posle toga spojiti dve vrste u jednu. Postaviti svoju sliku Ime i prezime Web design Stil Sava,font-10,siva boja slova centralno pravnanje Obrazovni centar Sveti Sava Čačak 032/ stil Moja slova -Na kraju ovu stranu snimiti.zatim je snimiti kao šablon stranu pod imenom Sava.Za izmenjivu oblast u šablonu odabrati polje tabele u kome je natpis web design. -Na osnovu ovako formiranog šablona,formirati dve nove strane:kontakt.htm i linkovi.htm (prema kojima pravimo linkove iz prve tabele)

CSS CSS. selector { property: value; } 3/20/2018. CSS: Cascading Style Sheets

CSS CSS. selector { property: value; } 3/20/2018. CSS: Cascading Style Sheets CSS CSS CSS: Cascading Style Sheets - Opisuje izgled (appearance) i raspored (layout) stranice - Sastoji se od CSS pravila, koji defini[u skup stilova selector { property: value; 1 Font face: font-family