Saveti – Web design

Dreamweaver vam nudi dobre načine za editovanje slika, ali,  naravno, ništa ne može da zameni program koji je namenjen za to. Najmoćniji programi za editovanje slika su Photoshop i  Fireworks. Ako želite da modifikujete sliku koju ste postavili na web stranicu,  možete da izaberete program u kojem želite da izvršite promene. Da biste modifikovali sliku pomoću eksternog editora za  slike, uradite sledeće:   Otvorite web stranicu na kojoj se nalazi slika koju  želite da editujete.   Selektujte sliku i u liniji menija izaberite komandu  Modify > Image > Edit With.   Izaberite  jednu od sledećih opcija:   Photoshop - da  biste otvorili selektovanu sliku u Photoshopu  Fireworks - da  biste otvorili selektovanu sliku u Fireworksu  Browse - da  biste otvorili Windows Explorer i selektovali program koji želite da upotrebite  za modifikovanje slike.   Modifikujte  sliku u programu koji ste izabrali.   U liniji  menija kliknite na File a zatim izaberite komandu Save da biste snimili sliku.   Kliknite na  dugme Close da biste zatvorili program za editovanje slika i vratili se u  Dreamweaver. Promene će odmah  biti vidljive na slici u Dreamweaveru.

U Dreamweaveru možete da ubacite Java applet na web  stranicu. Java je programski jezik koji omogućava da kreirate male aplikacije koje mogu da budu postavljene na web  stranicu. Java apleti se  izvršavaju u bezbednom području od strane većine pretraživača sprečavajući ih  da pristupe vašim podacima. Da biste dodali  Java Applet na vašu web stranicu, uradite sledeće:  Otvorite web  stranicu na koju želite da ubacite Java aplet.   Kliknite u  prozor dokumenta da biste postavili tačku unosa.   Ubacite java  aplet tako što ćete na panelu Insert kliknuti na karticu Common a zatim u  padajućem meniju Media kliknite na opciju Applet.   Potražite  lokaciju fajla koji sadrži java aplet i selektujte ga.   Kliknite na  OK.

Veoma je važno da  prilikom postavljanja sadržaja na web stranicu budete precizni, a za to su vam  potrebni lenjiri (Rulers). Dreamweaver vam  nudi lenjire koji će vam pomoći da budete precizni prilikom razmeštanja  sadržaja na stranici. Linije lenjira se nalaze na vrhu i levoj strani prozora  Dreamweavera. Da biste  upotrebili lenjire za precizno razmeštanje sadržaja na web stranici, uradite  sledeće:  U liniji  menija kliknite na View a zatim izaberite komandu Rulers.   Izaberite  jednu od sledećih opcija:  Show - da biste  prikazali ili sakrili liniju lenjira na vrhu i levoj strani prozora dokumenta.   Reset Origin -  da biste podesili lenjir na standardno podešavanje.   Pixels, Inches  ili Centimeters - da biste izabrali jedinicu mere koju želite da upotrebite na  lenjiru.

Da biste efikasno radili u Dreamweaveru potrebne su vam  informacije o aktuelnom dokumentu. Detalji o veličini dokumenta i vremenu daunlodovanja su  veoma važni prilikom kreiranja web stranice. Dreamweaver ove informacije  prikazuje u statusnoj liniji koja se nalazi na dnu prozora Dreamweavera.   Statusna linija prikazuje Tag selector za aktuelnu selekciju i veličinu  dokumenta, vreme daunlodovanja i omogućava da upotrebite alatke Select, Hand i  Zoom, da podesite uveličanje stranice ili promenite veličinu prozora dokumenta. Da biste upotrebili statusnu liniju i prikazali informacije  ili upotrebili jednu od alatki, uradite sledeće:  Tag Selector - Prikazuje hijerarhiju tagova koji okružuju  aktuelnu selekciju.   Select Tool - Upotrebite da biste uključili ili isključili  alatku Select.   Hand Tool - Upotrebite da biste povlačili dokument u  prozoru dokumenta.   Zoom Tool - Upotrebite da biste povećali ili smanjili nivo  uveličanja za dokument.   Set Magnification - Upotrebite da biste selektovali  unapred definisan nivo uveličanja.   Window Size - Upotrebite da biste promenili veličinu  prozora dokumenta na unapred definisanu vrednost.

Kao pomoć u  preciznom razmeštanju objekata i sadržaja na web stranici, Dreamweaver vam  omogućava da upotrebite vođice i mreže vođica. Mreža vođica je  serija vođica koje su vertikalno i horizontalno raspoređene i koje vam pomažu  da precizno pozicionirate objekte na stranici. Vođica je horizontalna ili  vertikalna linija i takođe služi kao pomoć u razmeštanju objekata. Da biste  upotrebili mrežu vođica u Dreamweaveru, uradite sledeće:  U liniji  menija kliknite na View a zatim izaberite komandu Grid.   Izaberite  jednu od sledećih opcija:  Show - da biste  prikazali mrežu vođica.   Snap To Grid -  da biste uključili ili isključili poravnanje objekata sa linijom mreže.   Grid Settings -  da biste otvorili okvir za dijalog Grid Settings i podesili boju, razmak i  prikaz svake od linija i tačaka u mreži vođica. Da biste upotrebili  vođicu u Dreamweaveru, uradite sledeće:  U liniji  menija kliknite na View a zatim izaberite komandu Guides.   Izaberite  jednu od sledećih opcija:  Show Guides -  da biste prikazali ili sakrili vođice.   Snap To Guides  ili Guides Snap To Elements - da biste uključili ili isključili poravnanje  objekata sa vođicom.   Edit Guides - da  biste podesili poju, razmak i ostala podešavanja za vođice.   Lock Guides - da  biste zaključali postojeće vođice na njihovim aktuelnim pozicijama.   Clear Guides -  da biste izbrisali postojeće vođice.

Wordpress i Joomla omogućavaju korisnicima da kreiraju,  ažuriraju i organizuju blogove. Sada, to vam omogućava i Dreamweaver CS5. Zahvaljujući integrisanom Live View pretraživaču možete da  organizujete i kreirate blogove u Dreamweaveru bez ikakvih poteškoća. Da biste  kreirali blog u Dreamweaveru CS5, uradite sledeće:  Posetite jedan od CMS web sajtova, daunlodujte ga i  instalirajte na vaš server.   Otvorite instalaciju Dreamweavera i konfigurišite FTP  pristup ka vašem serveru tako što ćete kliknuti na Site a zatim na opciju New  Site. Dajte naziv web sajtu i podesite opcije Local Site Folder u direktorijumu  CMS.   Kliknite na karticu Servers i unesite potrebne FTP  informacije kao što su web adresa, korisničko ime i lozinka.   Otvorite index. php fajl. U liniji sa opcijama iznad  stranice kliknite na Discover a zatim kliknite na Yes da biste pronašli fajlove  vašeg bloga.   Kada se od vas zatraži, kliknite na Live View i videćete  živi prikaz bloga u prozoru pretraživača.   Upotrebite Dreamweaverove CSS i HTML funkcije za  editovanje da biste kreirali dinamički web sajt.   Snimite i aploudujte fajl kada završite sa radom.   Proverite rezultate u web pretraživaču.

CSS stilove  možete da primenite na HTML dokument na jedan od tri načina: karakteristike,  tagovi ili eksterni stilovi. Eksterni stilovi  daju vam najveću kontrolu nad stilovima. U preostala dva načina, CSS stilovi  koji su kreirani primenjuju se samo na jednu specifičnu stranicu a promene u  stilovima možete da izvršite samo ponovnim otvaranjem stranice. Da biste kreirali  stil za karakteristike ili tagove, uradite sledeće:  Otvorite  stranicu za koju želite da kreirate CSS stil.   U meniju  Format kliknite na CSS Styles a zatim na komandu New.   Kliknite na  strelicu liste Selector Type i izaberite vrstu CSS stila:  Attribute Style  - izaberite Class, kliknite na strelicu Name i izaberite naziv za stil. Tagovi stila  karakteristika treba da počinju sa tačkom.   Tag Style -  izaberite Tag, kliknite na strelicu Name i izaberite HTML tag.   Kliknite na  strelicu liste Define In a zatim kliknite na opciju This Document Only.   Kliknite na OK.   Izaberite  kategoriju a zatim podesite parametre koje želite za CSS Style.   Kliknite na  OK.

U Dreamweaveru  možete da kreirate različite formulare koje želite da postavite na vašu web  stranicu. Jedno veoma važno  pravilo prilikom kreiranja formulara je da uvek imate na umu da formular  kreirate za posetioce vaše web stranice, a ne za sebe. Formular treba da bude  što je moguće jednostavniji i razumljiv. Da biste kreirali  formular u Dreamweaveru, uradite sledeće:  Kreirajte novi  HTML dokument ili otvorite postojeći.   Kliknite  unutar dokumenta da biste postavili tačku unosa.   U liniji  menija kliknite na Insert, zatim na Form i izaberite komandu Form. U dokument  će se prikazati prazan formular sa tačkastom okvirnom linijom.   Otvorite panel  Properties.   Kliknite na  crvenu okvirnu liniju formulara da biste ga selektovali.   Ukucajte naziv  za formular i putanju ka stranici ili skriptu koji će procesirati podatke iz  formulara.   Kliknite na strelicu  liste Method i izaberite jednu od sledećih opcija:  Default - koristi  standardna podešavanja pretraživača za slanje podataka iz formulara na server.   GET - dodaje  vrednost na URL prilikom otvaranja stranice.   POST - ugrađuje  podatke iz formulara u HTTP zahtev.   Unesite  objekte u formular i specifikujte informacije u okviru za dijalog Tag  Accessibility Attributes.

U ovom članku opisaćemo vam kako da kreirate jednostavan web  foto album pomoću svega nekoliko klikova. Potrebno je da imate instaliran  Macromedia Fireworks na računaru da biste mogli da pratite ovo uputstvo. Da biste jednostavno kreirali web foto album, uradite  sledeće:   Otvorite Dreamweaver i kreirajte novu HTML basic  stranicu.   U liniji menija izaberite opciju Commands > Create Web  Photo Album. Otvoriće se prozor u  koji treba da unesete parametre za foto album koji želite da kreirate.   U prva tri  polja unesite naziv albuma, podnaslov i opis.   U odeljku  Source images folder kliknite na dugme Browse da biste potražili direktorijum u  kojem se nalaze fotografije od kojih želite da kreirate foto album.   U polje  Destination folder unesite direktorijum u koji želite da postavite foto album  sa svim sadržajem.   U padajućem  meniju Thumbnail Size izaberite veličinu umanjenih prikaza koji će biti  prikazani na početnoj stranici albuma.   Unesite broj  kolona za umanjene prikaze.   Kliknite na OK i sačekajte dok Fireworks kreira umanjene prikaze za  vaš album.

Hiperlink je tekst na koji korisnik može da klikne da bi se prebacio na drugu web  stranicu. Kada dizajnirate  web sajt, potrebno je da dodate i hiperlinkove ako želite da usmerite vaše  čitaoce na drugu web stranicu. U Dreamweaveru možete jednostavno da kreirate  hiperlinkove. Uradite sledeće:   Ukucajte tekst  koji biste želeli da pretvorite u hiperlink.   Selektujte  tekst.   Otvorite  prozor Properties, ako nije otvoren, i kliknite u polje Link.   Ukucajte URL  na koji želite da se korisnik preusmeri kada klikne na hiperlink.   Ako želite da  kreirate link ka slanju emaila, ukucajte sledeće: mailto:email_adresa.   (naravno, umesto email_adresa, unesite email adresu na koju želite da usmerite  korisnike).

Ako želite da definišete formatiranje za kombinaciju tagova,  možete da upotrebite opciju Advanced i kreirate ID selektor. Možete da specifikujete jedan ili više HTML tagova za  kreiranje ID selektora ili da selektujete jedan od dostupnih, kao što su a:active,  a:hover, a:link i a:visited. Nakon što specifikujete tagove koje želite da  upotrebite, možete da definišete formatiranje koje je povezano sa njima. Da biste kreirali ID selektor u Dreamweaveru, uradite sledeće:  Otvorite web stranicu za koju želite da kreirate ID  selektor.   U liniji menija kliknite na Format, CSS Style a zatim  kliknite na komandu New.   Kliknite na strelicu liste Select Style a zatim kliknite  na ID.   Unesite naziv stila u polje Selector Name, ili izaberite  jedan od dostupnih u listi.   Kliknite na strelicu liste Define In a zatim izaberite  novi ili postojeći stil.   Kliknite na OK.   Kliknite na kategoriju Type i modifikujte opcije po  želji:  Font - selektujte željeni font  Size - izaberite željenu veličinu za font  Variant - izaberite vrstu fonta  Color - izaberite boju fonta.   8. Kliknite na OK.

Image Map su slike sa "vrućim tačkama" na koje  možete da kliknete i navedete čitaoce da se prebace na drugu web stranicu. Image Map možete da kreirate vrlo jednostavno u  Dreamweaveru. Uradite sledeće:  Dodajte sliku na vašu web stranicu.   Kliknite na sliku da biste je označili.   Iz menija Properties kliknite na jednu od tri alatki za  crtanje vrućih tačaka.   Nacrtajte oblik koji želite na slici.   U prozoru Properties za vruću tačku, ukucajte ili  potražite stranicu koju biste želeli da povežete sa vrućom tačkom.   Nastavite da dodajete vruće tačke dok mapa ne bude  kompletna.   Kliknite na ikonicu sa strelicom da biste promenili  parametre slike.   Testirajte sliku u pretraživaču da biste se uverili da ispravno  radi.

U ovom članku ćemo vam opisati kako da kreirate Jump menije  u Dreamweaveru, što možete da uradite veoma brzo i jednostavno. Kreiranje Jump menija u Dreamweaveru je veoma jednostavno.   Da biste kreirali Jum meni, uradite sledeće:   Kreirajte novi html dokument i ubacite formular.   Zatim treba da ubacite List/Menu form objekat tako što  ćete u liniji menija izabrati opciju Insert > Form i kliknite na List/Menu.   Primenite Jump To java script na vaš List/Menu objekat tako što ćete u meniju Tag  Inspector, na kartici Behaviors izabrati List menu i kliknite na dugme + da  biste izabrali Jump Menu.   Otvoriće se  novi prozor u koji treba da unesete opcije za padajući jump meni.   Da biste  dodali novi link kliknite na +, a ako želite da uklonite link, kliknite na  dugme -.   U polje Text  ukucajte naziv opcije a u sledeće polje unesite URL na koji želite da se  prebacite kada selektujete ovu opciju iz menija.   Kada završite  podešavanja kliknite na OK da biste ih snimili.

Lista definicija  ne koristi karaktere bulita ili numeracije za mapiranje stavki već se liste  definicija koriste u područjima kao što su rečnici. Lista definicije  se sastoji od dve linije: prva linija sadrži naziv stavke a druga linija  opisuje stavku. Da biste kreirali  listu Definition u Dreamweaveru, uradite sledeće:  Otvorite web  stranicu koju želite da formatirate.   Kliknite  unutar dokumenta na mesto na koje želite da ubacite listu definicije.   U liniji  menija kliknite na Format a zatim na List i izaberite komandu Definition List.   Ukucajte  termin definicije i pritisnite Enter. Nova linija će automatski biti uvučena od  ostalog teksta.   Ukucajte opis  definicije i pritisnite Enter da biste dodali opis definicije.   Da biste  završili listu dva puta pritisnite taster Enter.

Jedan od  najjednostavnijih formulara je mailto formular u kojem se svi podaci šalju  emailom. Ako želite da  kreirate mailto formular u Dreamweaveru, pratite sledeće korake:   Kreirajte  formular.   U liniji  Insert kliknite na karticu Forms i kliknite na ikonicu Form.   Podesite parametre formulara.   Kliknite na polje Form i u meniju Properties ukucajte  sledeće:    action: mailto:emailadresa    method: GET    Enctype: text/plain  Dodajte polja formulara.   U liniji Insert, na kartici Form izaberite polja koja  želite da dodate u formular.   Ne zaboravite da dodate dugme Submit. Kliknite na ikonicu  dugmeta i uverite se da u polju Action piše Submit form.   Snimite fajl.   Aploudujte fajl na server i testirajte ga. To je sve.

Većina frejm setova na webu danas koriste dva ili tri  frejma. Da biste kreirali web sajt, potrebno je da kreirate frejm set od  najmanje tri frejma. U frejmu na vrhu ekrana nalazi se baner, donji levi frejm  sadrži tabelu sadržaja i dugmad za navigaciju, a najveći frejm je rezervisan za  sadržaj stranice. Možete da kreirate novi dokument sa frejmovima koristeći  uzorke u okviru za dijalog New Document, ili možete da dodate frejmove u  postojeći dokument tako što ćete kliknuti na dugme Frames. Da biste kreirali frejm set iz uzorka dokumenta, uradite  sledeće:  U liniji menija kliknite na File a zatim izaberite  komandu New:  Kliknite na kategoriju Page from Sample.   Kliknite na opciju Frameset u odeljku Sample Folder.   Izaberite stranicu koju želite.   Kliknite na Create. Otvoriće se okvir za dijalog Frame  Tag Accessibility Attributes.   Kliknite na strelicu liste Frame, izaberite frejm a zatim  unesite naziv za svaki frejm u dokumentu.   Kliknite na OK.

Kada prvi put  radite u Dreamweaveru, ili želite da kreirate novi sajt, potrebno je da  definišete web sajt na kojem ćete raditi. Ovaj proces  uključuje davanje naziva sajtu, postavljanje lokalnih fajlova u direktorijum na  hard drajvu i specifikovanje gde će fajlovi biti publikovani. Pratite sledeće  korake da biste kreirali novi web sajt u Dreamweaveru.   U meniju Site  izaberite opciju Manage Sites.   Kliknite na  dugme New i izaberite opciju New Site.   Dajte naziv  novom sajtu.   Kliknite na  opciju No, I do not want to use a server technology.   Kliknite na  opciju Edit local copies on my machine. . . Dreamweaver će vam preporučiti  lokaciju na kojoj možete da čuvate fajlove sajta.   Dreamweaver  pruža vam više izbora za pristup web sajtu. FTP je najuobičajeniji. Izaberite  FTP i kliknite na Next.   Ispunite  detalje za konektovanje na FTP sajt vašeg Web hosting provajdera. Ako ne znate  detalje, kontaktirajte provajdera.   Testirajte  konekciju.

Ako želite, u  Dreamweaveru možete jednostavno da kreirate prečice pomoću Dreamweaver Keyboard  Shortcut Editora. Najbolji način da  povećate produktivnost i efikasnost u radu je da kreirate prečice komandi i  akcija koje najčešće koristite. Da biste kreirali prečicu u Dreamweaveru,  uradite sledeće:   Otvorite  Dreamweaver.   U liniji  menija izaberite Edit > Keyboard Shortcuts.   Potražite  komandu kojoj biste želeli da dodate prečicu.   Kliknite na  ikonicu sa znakom plus da biste datoj komandi dodali prečicu.   Kliknite u  polje Press key i kliknite na prečicu koju želite da upotrebite za komandu.   Kliknite na OK  da biste snimili komande u vaš set prečica.

Dreamweaver koristi ugrađene prečice koje su dizajnirane  specifično za Dreamweaver. Ugrađene prečice su organizovane u setove koje možete da  duplirate i podesite da biste kreirali sopstveni prilagođeni set. Da biste kreirali set prečica na tastaturi u Dreamweaveru,  uradite sledeće:  U liniji menija kliknite na Edit a zatim izaberite  komandu Keyboard Shortcuts.   Kliknite na strelicu liste Current Set a zatim selektujte  set prečica.   Kliknite na dugme Duplicate Set.   Unesite naziv za novi set prečica i kliknite na OK. Da biste dodali ili uklonili prečicu iz seta prečica,  uradite sledeće:  U liniji menija kliknite na Edit a zatim izaberite  komandu Keyboard Shortcuts.   Kliknite na strelicu liste Current Set a zatim selektujte  set prečica koji želite da modifikujete.   Kliknite na strelicu liste Commands a zatim selektujte  kategoriju prečice, kao što su Menu Commands, Drawing Tools, Test Movie Menu  Commands i Workplace Accessibility Commands.   Izaberite komandu za koju želite da dodate ili uklonite  prečicu u listi Commands.   Da biste dodali prečicu kliknite na dugme Add Shortcut a  zatim pritisnite kombinaciju tastera koju želite da upotrebite.   Da biste uklonili prečicu kliknite na dugme Remove  Shortcut. Kliknite na Change.   Kliknite na OK.

Dok radite u Dreamweaveru otvaraćete, zatvarati i pomerati  prozore i panele da biste prilagodili radni prostor vašim potrebama. Nakon što podesite radni prostor u Dreamweaveru možete da  snimite lokacije prozora i panela kao prilagođeni radni prostor. Možete da  upotrebite standardne radne prostore ili da kreirate prilagođene radne  prostore. Da biste kreirali prilagođeni radni prostor, uradite  sledeće:  Otvorite i postavite panele na mesto na koje želite na  ekranu.   U liniji menija kliknite na Window a zatim izaberite  komandu Workspace Layout > New  Workspace. Otvoriće se okvir za dijalog New Workspace.   Ukucajte naziv  u polje Name.   Kliknite na  OK. Da biste otvorili  radni prostor koji ste kreirali, uradite sledeće:U liniji menija kliknite na Window a zatim izaberite  komandu Workspace Layout > Workspace  a zatim izaberite opcije panela:  Custom Panel  Name - prikazuje prilagođen razmeštaj panela koji ste kreirali.   Predefined Layouts - prikazuje standardne razmeštaje  panela: App Developer, App Developer Plus, Classic, Coder, Coder Plus, Designer,  Designer Compact i Dual Screen. Da biste izbrisali radni prostor uradite sledeće:  U meniju Workspace kliknite na opciju Manage Workspaces.   Otvoriće se okvir za dijalog Manage Workspaces.   Izaberite set panela koji želite da izbrišete.   Kliknite na Delete.   Kliknite na Yes da biste potvrdili brisanje.   Kliknite na OK.