Expression Web Designer Essentials

Uvod u Expression Web

Expression Web korisnički interfejs se sastoji od brojnih panela (panels), traka alatki (toolbars) i dijaloga, sa širokim spektrom mogućnosti.

Komande za prilagođavanje okruženja mogu se naći pod View > Toolbars, Tools > Application Options, Tools > Page Editor Options, a za svaki pojedinačni sajt preko Site > Site Settings opcija.

Kreiranje novog sajta

U slučaju da nam, pošto startujemo program, on prikaže karticu Site View sa sadržajem nekog prethodno rađenog sajta, prvo ćemo ga zatvoriti sa Site > Close.

Zatim kreiratmo nov sajt:

1. Site > New Site

2. U New dijalogu pod General izabrati Empty Web Site

3. Izabrati lokaciju i odrediti ime (poslednji deo putanje u lokaciji treba da je ime novog sajta)

Prvo treba odrediti gde želimo da se sajt nalazi. To postižemo klikom na dugme Browse. Expression Web će sajtu dodeliti generičko ime. Ako želimo da ga promenimo, potrebno je da ga izbrišemo iz putanje u lokaciji i tu upišemo naše ime. Ono će se tada pojaviti ispod pored Name:

Kada pritisnemo Ok, Expression Web će na željenoj lokaciji kreirati novi prazni folder. Sve stranice koje napravimo u okviru sajta, kao i sve slike koje se na tim stranicama pojavljuju, Expression Web će smeštati u taj folder. Radna površina imaće karticu Site View u kojoj će se videti sadržaj tog foldera.

Kreiranje nove stranice

Pre pravljenja nove stranice podesićemo podrazumevane vrednosti za svaku novu stranicu preko Tools > Page Editor Options na kartici Authoring:

Izabraćemo HTML 5 (može i 4.1 Transitional ako su u pitanju starije verzije pretraživača) i CSS 2.1 standarde. Kada ovo jednom podesimo, važiće za sve naredne stranice koje pravimo, sve dok ne postavimo nove vrednosti.

Kreiranje nove stranice izvršava se klikom na File > New > HTML. Expression Web će tada na radnoj površini otvoriti novu karticu sa generičkim imenom Untittled_1.html sa izgledom naše stranice.

Kako želimo da vidimo našu stranicu (njen HTML kod, konačni izgled odnosno dizajn ili oba) možemo da podesimo u View > Page. Preporučljivo je izabrati opciju Split, jer tako vidimo i izgled stranice i njen HTML kod, pa možemo lako vršiti neke korekcije direktno u HTML kodu.

Dobra praksa je odmah snimiti stranu sa File > Save. S obzirom da će ovo biti početna strana, treba je snimiti pod imenom default.html (ili index.html). Ostale strane možemo nazivati po želji, mada je preporučljivo ne koristiti specijalne znake i razmak.

Eventuelno, pre snimanja možemo odmah podesiti naslov naše stranice koji će se videti u naslovnoj traci pretraživača kada se stranica otvori. To je najlakše uraditi direktno u HTML kodu stranice, u okviru taga tittle:

a dobra praksa je podesiti i neke osobine stranice, kao što su njen opis i ključne reči u slučaju pretraživanja. To ćemo uraditi klikom na File > Properties:

Ova podešavanja pojaviće se u HTML kodu stranice u okviru taga meta u zaglavlju dokumenta.

Na kartici Formatting mogu se podesiti i boja teksta, pozadine i linkova, a na kartici Advanced podešavaju se margine i nije loše podesiti ih odmah na 0 piksela.

Slojevi (Layers)

Slojevi ili lejeri (layers) prave se pomoću div tagova koji imaju svoje dimenzije i poziciju na stranici i zato se koriste kao kontejneri za druge elemente (slike, tekst i td.) jer se mogu pozicionirati bilo gde na stranici.

Dodavanje lejera vrši se klikom na Layer u Toolbox panelu i prevlačenjem na stranicu.

Expression Web će novom lejeru automatski dodeliti generičko ime layer1, širinu i visinu od po 100 piksela i smestiti ga u gornji levi ugao stranice. Takođe, generisaće i odgovarajući HTML kod.

Pozicija i veličina svakog lejera mogu se promeniti na 3 načina: ako nam nije bitna preciznost, možemo to uraditi ručno, a možemo i precizno u piksel i to na dva načina: direktno u HTML kodu ili preko panela CSS Properties. Ako nam je bitno da budemo precizni, ja savetujem da podešavanja vršimo direktno u kodu, jer je to dobar način da se ujedno bolje nauči i razume sam HTML jezik, kao i struktura HTML dokumenta.

Ako znamo unapred koje su dimenzije slike, možemo odmah postaviti i dimenzije lejera, ali i ako ne znamo, ubacićemo sliku u lejer, pa onda dimanzije videti u kodu i odmah postaviti i odgovarajuće dimenzije lejera.

Ubacivanje slika

Da bismo ubacili bilo koji sadržaj u lejer, pa i sliku, treba prvo da kliknemo u njegovu unutrašnjost (ili da postavimo kursor unutar tagova div u HTML kodu). Zatim idemo na Insert > Picture > From File i izaberemo sliku. Sav neophodan materijal za sajt (slike, tekst i spoljni linkovi) dati su u folderu Seals files. Biramo sliku Seals-top.jpg.

Kada se otvori prozor Accessibility Properties potrebno je uneti alternativni tekst koji će se prikazati u slučaju da se slika ne učita. Možemo uneti na primer “Seals top”.

Vidimo da je tag img smešten unutar taga div, jer se slika nalazi u lejeru. Takođe, vidimo da je visina slike 109 px, a širina 800 px, pa ćemo i dimenzije lejera postaviti na iste veličine. Osobine slike možemo menjati i u panelu Tag Properties (potrebno je samo da slika bude selektovana, što se postiže klikom na bilo koji deo teksta u kodu koji se odnosi na nju), a osobine lejera u panelu CSS Properties, ali je bolje u ovom trenutku to raditi direktno u hodu, jer lako na jednom mestu vidimo dimenzije i jednog i drugog – osobine lejera nalaze se u okviru taga div, a osobine slike u okviru taga img koji se nalazi u tom lejeru.

Promene koje smo uneli u kodu prikazaće se kada kliknemo bilo gde na dizajn stranice.

Sada ponavljamo istu proceduru za drugu sliku: ubacujemo novi lejer, postavimo kursor unutar njega i biramo sliku Seals-nav.jpg. Iz koda vidimo da je ova slika malo kraća – širine je 797 piksela. To je primetno na stranici i idealno bi bilo prethodno pripremiti sliku u nekom programu za obradu slika tako da odnos širine i visine ostane isti, ali pošto to nije mnogo, u ovoj vežbi ćemo je produžiti. Dakle, postavićemo širinu slike na 800 px, a zatim prepisati iste dimenzije i na lejer.

Prvi lejer nalazi se u gornjem levom uglu stranice, pa nije bilo potrebno unositi udaljenost od vrha i leve strane, ali kako drugi lejer mora biti udaljen od vrha za visinu prvog lejera, a to je 109 px, moramo to podesiti u panelu CSS Properties postavljanjem vrednosti za Top. Ne sme se izostaviti jedinica mere (px).

Da bismo promenili dimenzije ili neku drugu osobinu lejera u panelu CSS Properties, on mora da bude selektovan, a to se može uraditi klikom na bilo koji deo teksta u kodu koji se odnosi na njega, ili klikom na njegovo ime u panelu Layers:

Zatim dodajemo treći lejer u kome će se nalaziti linkovi. Možemo ga za početak ručno postaviti otprilike gde treba da bude, a onda u kodu ili panelu CSS Properties izvršiti sitne izmene: na primer zaokružiti udaljenost od leve strane na 10 px i od vrha stranice na 160 px.

Postavićemo kursor unutar lejera i otkucati tekst kao na slici. Kasnije ćemo se vratiti da napravimo linkove. Sada dodajemo sledeći lejer u kome se nalazi slika Seals-big.jpg. Želimo da ona bude poravnata sa prethodnim lejerom, pa postavljamo udaljenost od vrha takođe na 160 px.

Ubacivanje i formatiranje teksta

Tekst se nalazi u novom lejeru čija je visina jednaka visini prethodnog, dakle 398 px, udaljenost od vrha takođe (160 px), a kako želimo da bude poravnat po desnoj ivici sa prve dve slike, udaljenost od desne strane plus širina lejera treba da iznosi 800 px. Postavićemo width na 360 px, a left na 440 px.

Tekst ćemo kopirati iz fajla Seals text.docx, postavićemo kursor u unutrašnjost odgovarajućeg lejera, a zatim izabrati Edit > Paste Text. U Paste Text dijalogu izabraćemo opciju Normal paragraphs without line breaks.

Prvo ćemo selektovati ceo tekst i preko Common trake alata promeniti font u Verdana, Geneva, Tahoma, sans-serif.

Zatim ćemo selektovati prvi pasus, Harbor Seals on California Highway 1, i postaviti Paragraph na Heading 2.

I na kraju, selektujemo ostatak teksta i postavljamo veličinu slova na 12 pt, odnosno small. Sada selektujemo ceo lejer i u CSS Properties postavljamo Bacground Color na #008080, a Font Color na #FFFFFF.

Kreiranje linkova

Linkovi sa naše stranice mogu voditi na bilo koji drugi sajt na internetu, ali i na druge stranice u okviru našeg sajta. Zato ćemo prvo kreirati još jednu stranicu na našem sajtu.

Ponovo idemo na File > New > HTML i pojaviće se nova prazna stranica na radnoj površini. Postavićemo tittle u kodu na Frogs i sačuvati stranicu. Pošto ovo nije početna stranica, možemo joj dati bilo koje ime, ali kako smo prethodno uneli naslov u okviru taga tittle, Expression Web će je automatski nazvati frogs.html. Možemo promeniti ovo ime, ali ne moramo. Karticu frogs.html možemo i zatvoriti jer nam više ne treba.

Klikom na karticu Site View možemo u bio kom trenutku da vidimo sadržaj našeg foldera, odnosno sajta i odatle duplim klikom da otvorimo bilo koju stranicu sa sajta ukoliko nam zatreba.

Vraćamo na početnu stranu klikom na default.html karticu. Sada ćemo kreirati link ka ovoj stranici:

1. Selektujemo deo teksta ili sliku (u našem slučaju tekst Frogs u trećem lejeru) koji želimo da bude link ka drugoj stranici

2. Izaberemo Insert > Hyperlink

3. Selektujemo stranicu ka kojoj želimo da vodi link (frogs.html)

4. Pritisnemo dugme OK i link je automatski postavljen.

Ovde je važno obratiti pažnju na to koji folder nam je Expression Web ponudio. U slučaju rada na računarima koje koristi više ljudi koji su radili ovu istu vežbu, moguće je da nam ponudi nečiji tuđi folder. To možemo prepoznati po adresi – adresa mora da se sastoji samo od imena fajla, bez ikakave druge putanje, jer to znači da se tražena stranica nalazi u istom folderu gde i naša početna stranica default.html, a to i želimo. Ako to nije slučaj, moramo pronaći naš folder ili, što je elegantnije rešenje, kliknuti ok, a zatim direktno u kodu promeniti adresu tako da ona glasi samo frogs.html:

Kreiranje spoljnog linka, odnosno linka ka nekoj drugoj stranici na internetu je lako: selektujemo tekst koji želimo, izaberemo Insert > Hyperlink i u adresi ukucamo (ili kopiramo) željenu adresu na internetu. Mi ćemo selektovati tekst Seals i u adresu uneti http://www.nature.org/.

Testiranje

U bilo kom trenutku možemo proveriti kako naša stranica izgleda i, što je još važnije, proveriti da li nam rade linkovi. Da bi to bilo moguće, stranice moraju biti sačuvane. Zatim biramo File > Preview in Browser i izaberemo pretraživač iz liste ponuđenih.

Ukoliko nismo prethodno sačuvali stranice, Expression Web će nas pitati da li želimo da ih sačuvamo. Izabraćemo Yes.

Pošto se naš sajt nalazi na našem kompjuteru, a ne na internetu, sve stranice u okviru njega možemo videti bez obzira na to da li imamo internet ili ne. Međutim, spoljni linkovi otvoriće se jedino ako je naš računar priključen na internet.

Napomena:

Tekst ove naše stranice je na engleskom jeziku, ali to je sa stanovišta dizajniranja stranice nevažno. Veb dizajneri često u trenutku kreiranja sajtova ni nemaju kompletan tekst koji će se nalaziti na stranicama tog sajta, pa kako bi mogli da vide kako će stranica izgledati sa tekstom (koji font je najbolji, veličina slova i td.), koriste izmišljeni tekst – Lorem ipsum. Lorem ipsum je obično iskvareni deo Ciceronovog dela “De finibus bonorum et malorum” u kom su reči promenjene, dodavane i brisane, tako da rečenice nemaju nikakvo smisleno značenje.

Osmišljavanje teksta (copy) koji će se na samom kraju naći na sajtu zove se kopirajting (copywriting), a osoba koja to čini kopirajter (copywriter). Ovaj deo posla je često odvojen od samog dizajniranja stranice.

11