Projektni rad: WEB Dizajn

Student

Osnovni pojmovic za pocetak:WWW - Internet servisSkup hipertekstualnih elemenataHiper tekst – omogucava nelinearno kretanje kroz dokumentHTML - Hyper Tekst Markup LanguageWeb stranica - jedan dokument pisan HTML jezikom.Web citac (browser) - program za pregled web strana

HTML EditoriTekst editoriVizuelni editori(WYSIWYG) „What you see is what get“Najpoznatiji HTML editori su:MS Front Page (2003)Macromedia Dreamwiver(Macromedia Studio-2004,8)

Pogledi na Dreamweaver mogu biti:1.CODE (Kodni prikaz-HTML elementi)2.SPLIT (Podeljeni prikaz)3.DESIGN (Vizuelni režim)

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 odredenu organizacionu strukturu stranica:linearnuhujerarhijsku

Kreiranje straniceKada zelimo da kreiramo novu stranu, iz menija File biramo opciju New.Otvara nam se prozor sa dve kartice General I Templates. Na kartici General nudi se mogucnost izbora neke od ponudjenih predizajniranih strana. Izabracemo Basic Page – HTML. Novu stranu je preporucljivo sacuvati pre stavljanja bilo kakvih slika ili teksta jer ce tada sve putanje koje se odnose na te elemente biti propisno formirane.

Pogled stranice u web citacu

File meni Prewiev in browser, ili ikonica globusa na paleti sa alatima,ili funkcijski taster F12.

Ovde biramo u kom browser-u zelimo da pogledamo kako nasa web stranica odnosno sajt izledaju

Podesavanja

Na liniji alata dokumenta-TITLE-(upišimo naziv) to je naziv koji ce se pojavljivati u liniji zaglavlju sajta odnosno web browoser-a

U prozoru Properties kliknimo na Page properties, tu podesavamo boju u pozadini, ili sliku u pozadini

U opciji proportis mozemo vrsiti I podesavanja vezana za tekst font, boju, velicinu…

Linkovi Linkovi se mogu praviti ka stranicama trenutne prezentacije ili ka nekoj drugoj prezentaciji.Ako kreiramo link na stranu naše prezentacije,treba uraditi sledece:

Selektujemo tekst koji ce predstavljati link i u propertis liniji u poljelink treba dati adresu na koju taj link vodi

Izbor strane (resursa) vršimo pomocu ikone foldera pronalazimo dokument na koji link treba da vodi Možemo koristiti i pokazivac kojim možemo ukazati na sadržaju files(fajls) panelu

Linkovi Otvaranje linka u novom prozoru citaca vrši se postavljanjem target(ciljni prozor)tog linka na vrednost blank.

Kreiranje E-mail linka: Insert meni-E-mail link-upisati tekst i adresu

Web grafika, rad sa slikamaZa internet prezentacije se mogu koristiti tri formata slika:1. JPG-kompresovani format,16 miliona boja.Odabrati rezoluciju do 72(zbog manje velicine 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.

Sliku je poželjno prethodno obraditi u nekom programu za obradu slika(podesiti rezoluciju,velicinu...)pre ubacivanja u program.Podešavanje vec ubacene slike: Selektovanjem slike , u Properties liniji dobijamo karakteristike slike koje možemo podešavati:

Rad sa dugmicima

Na paleti sa alatkama Common u opciji Flash biramo opciju Flash Button. U prozoru koji nam se otvara biramo izgled, velicinu, font, link naseg dugmeta

Tabele Tabele se koriste za pravilan razmeštaj sadržaja na strani. Dobija se iz menija Common(najcešci poslovi)—Table:

Širinu tabele je zgodnije postaviti u procentima,zbog mogucnosti da jednako bude vidljiva na svim rezolucijama monitora.Cell padding-oznacava koliko je odmaknut sadržaj celije od ivice celije.Cell spacing-predstavlja razmak izmedu dve susedne celije.Takodje u opciji proportis dve ili vise celija tabele mozemo spajati, ali I ubacivati nove celije u tabelu

CSS stiloviCSS-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 odredenog taga(p,body,h1....),a postoje i tzv. „klase“stilova,pri cemu se klasa može primeniti na bilo koji element strane.Podešavanje stilova se vrši iz menija Text-CSS Styles.

Frejmovi - okviriFrameset strana je strana koja služi za podešavanje razmeštaja više razlicitih web stranica u okviru jednog prozora web citaca.Time je prozor citaca podeljen na više pravougaonih oblasti , i u svakoj od tih oblasti prikazuje se razlicita strana. Jedna pravougaona oblast predstavlja frame/freim/-okvir u kome se nalazi jedan HTML dokument.

Kreiranje framest dokumenta:File-New-Category-Framesets

Priprema za rad I podesavanja nasega sajta

Fotografije (koje razvrstamo po folderima)Pozadina strane uradjena u Photoshop CS2Baner firme u zagljavlju u radjen u Photoshop-u I

Corel Draw-uBaner Uzica uradjen u Swish Max 2Sajt radimo u programu Macromedia Dreamweaver

8 I na pocetku kreiramo folder I optimizujemo stranice za rezoluciju 1024*768

Sadrzaj foldera

Logo privrede:

Logo firmi:Fotografije Uzica:

Baner Uzica u zaglavlju:

Slika pozadine:

Crtanje tabela – okvira za unosNa ovoj kartici biramo broj kolona I redova u nasoj tabeli kao I debljinu linije okvira. Mi cemo odabrati 3 kolone, 3 reda I debljinu okvira 0. Posle toga celije tabele u opciji proportis moguce je spajati ili dodavati nove.

Naslovna strana Index sa iscrtanim okvirima

Posle unetog materijala stranica izgleda ovako…U iscrtane okvire unosimo tekst, slike, dugmice, banere itd. Na kraju stranica izgleda ovako:

Ostale straneOstale strane nasega sajta (o nama, o uzicu, marketing, kontakt…) pravimo tako sto sadrzaj glavn strane index prekopiramo na novu strane, a pri tome brisemo sredisnji deo (obojen u sivo), ostale delove strane ostavljamo iste na svim stranama, a u sredisnji deo unosimo zeljeni materijal slike, tekst…

Linkovanje I umetanje dugmicaNa paleti sa alatkama Common u opciji Flash biramo opciju Flash Button. Na prozoru koji nam se otvra biramo izgled naseg dugmica, tekst koji ce biti ispisan na njemu, velicinu, link sa kojom stranom zelimo da povezemo. Style: Beveled Rect – Blue, Button text: Pocetna, Font: Verdana, Size: 12, Link: index.htm, Save as: pocetna.swf

Linkovanje slikeLinkovanje slika radimo kao I ostala linkovanja, samo sto u opciji Link u Proportisu biramo sliku sa kojom zelimo da linkujemo

Na kraju…

Nas sajt je sada gotov I spreman je da se “nakaci” na internet. Sledeci sto je potrebno uraditi je registracija domena, I Hosting za nas sajt. Ove vrste usluga pruzaju razni internet provajderi u nasoj zemlji.