FRONTPAGE PODSJETNIK Uvodne napomene

Na fakultetskim raunalima, na kojima korisnik ne vidi disk C, FrontPage je jako svojeglav i esto se zbuni kad pokua neto spremiti na disk, ili proitati s diska (npr. umetanje slike u stranicu i slino). Na normalnim instalacijama ovaj se problem ne javlja. Ovaj se problem zaobilazi tako da se smisli neki nain na koji e se FrontPage uputiti na disk D, nakon toga sve radi kako treba. Jedan od naina na koji se moe zaobii problem s diskom C je sljedei: na disku D u Notepadu kreirajte neku datoteku s ekstenzijom .htm ova datoteka moe biti i prazna; pokrenite FrontPage neizravno, desnim klikom na .htm datoteku i odabirom opcije Ureivanje (Edit na engleskoj verziji Windowsa); pohranite ovu stranicu opcijom Save As ne mijenjajui joj pri tom ime, potom je zatvorite; nakon ovog koraka FrontPage bi se trebao ponaati normalno. Gradivo koje smo obuhvatili unutar FrontPagea izgleda obimno i komplicirano ako ga se ne sloi po dijelovima. Kad se malo pogleda, vidi se da smo se uglavnom vrtili oko istih stvari u razliitim kontekstima: prazna Web-stranica, unos elemenata, oblikovanje na ruke ovo je jako slino Wordu i/ili PowerPointu; nekoliko web-stranica izraenih i meusobno povezanih na ruke (dakle, bez podrke koju FrontPage prua uspostavi Web-sitea) ovo je loa strategija i ne treba je uope razmatrati; uspostava web-sitea koritenjem FrontPage podrke sastoji se od etiri dijela: izrade kostura sitea (graf meuodnosa pojedinih stranica), definiranja izgleda stranica (design izgled u smislu fontova i veliine slova, boja i ostaloga) i definiranja strukture stranica (layout izgled u smislu gdje e na stranici biti to), i konano objave (publishinga) web-sitea na server Postoje dvije zabune koje bi trebalo izbjei tako da se prije navale na pritiskanje botuna malo promisli o konceptima: razlika izmeu samostalne web-stranice i web-stranice koja je dio nekog web-sitea: u prvom sluaju sve elemente stranice moramo sloiti sami (navigacija, banner, itd.) odgovarajue opcije na izbornicima su sive, tj. nedostupne. U drugom sluaju (kada je stranica dio sitea), moemo koristiti automatske elemente (navigacija, banner, itd.). razlika izmeu teme (Theme) i predloka (Template) razlika je jasna i jednostavna: u temi definirate kako e izgledati pojedini elementi stranice na siteu (boja ili slika kao pozadina stranice, font, boja i veliina slova za pojedine stilove, slika koju ete koristiti za banner, botuni koje ete koristiti za navigaciju). U predloku definirate sadraj i raspored zajednikih elemenata svih stranica web-sitea. U oba sluaja mogue su iznimke, tj. ne moraju sve web-stranice biti naslonjene na istu temu i na isti predloak. Ne zaboravimo, FrontPage je u osnovi samo posrednik koji nam olakava ivot jer ne moramo sami pisati html-datoteke. Uz to je i pametan posrednik, pa e nam omoguavati i dodatne pogodnosti pri sastavljanju stranica.

Pokretanje, FrontPage ekran

Ve nakon pokretanja FrontPagea, naii ete na problem nepostojeeg diska C: stranica koju obradite nee se moi spremiti. Ako Vam nije vano spremiti stranicu, moete jednostavno na kraju rada izai iz FrontPagea, u protivnom moete postupiti kako je opisano na prethodnoj stranici: napraviti praznu datoteku prazna.htm i otvoriti je za ureivanje (Edit) u FrontPageu. Osnovni prozor FrontPagea ima puno elemenata koji su nam poznati iz Worda. Obratirte pozornost na nekoliko posebnosti:

U donjem lijevom kutu odabiremo jedan od naina prikaza stranice: Design u kojemu slaemo elemente stranice onako kako e (manje-vie) izgledati u pregledniku, Split u kojemu je ekran razdijeljen na dio u kojem vidimo stranicu i dio u kojem vidimo pripadajui html-kod, Code u kojem vidimo samo kod, i Preview u kojem vidimo pretpregled stranice. U donjem desnom kutu vidimo podatak (minute:sekunde) koliko je vremena potrebno da se trenutni sadraj stranice uita pri 56kbps modemskoj vezi na Internet. Uglavnom radimo u Design-prikazu, a ako nas zanima kako izgleda odgovarajui kod moemo pogledati Split-prikaz. Za pretpregled stranice puno je bolje koristiti pretpregled u pregledniku (File->Preview in Browser) Neposredno iznad sadraja stranice, vidimo html-oznake (tagove) koji djeluju na element stranice na kojem je kursor. Na gornjoj slici kursor (koji se ne vidi) je bio u prvom retku koji je u stilu Heading 1, odnosno pod djelovanjem html-oznake <h1>. Oblikovanje na ruke teksta i drugih elemenata stranice jako je slino oblikovanjima u Wordu. Meutim, to nije dobra taktika jer npr. svako pojavljivanje odgovarajueg naslova treba ponovno oblikovati na ruke, a to onda postaje beskrajni posao.

Web-stranica osnovna oblikovanja

Nekoliko osnovnih oblikovanja na razini stranice su: u okviru dijaloga Page Properties (desni klik -> Page Properties): rubrika General: naslov (Title) koji e se prikazivati u okviru prozora pri pregledavanju, eventualno napisati opis stranice (Page Description) i kljune rijei (Keywords); rubrika Formatting: mogunost zadavanja pozadinske slike (Background picture) ili pozadinske boje (Background color) rubrika Language: zadavanje jezika i character encodinga, tj. standarda po kojem e biti zapisana slova (poeljno Central European ISO 8859-2 ili Unicode UTF-8) Provjerite djelovanje opcija Page Properties dijaloga, potom nainite i sljedea oblikovanja: uvjerite se da odabir fonta, veliine slova, boje teksta itd. moete raditi kao i u Wordu; pojedine dijelove teksta selektirajte i oznaite nekim od stilova (npr. Normal, Heading 1, Heading 2 itd.), i uoite koji se odgovarajui html-tagovi pojavljuju za odabrani tekst napravite dio teksta kao nabrajanje i kao listu s grafikim oznakama (bulletima); uoite razliku izmeu pritiska Enter (Paragraph Break automatski dvostruki prored meu odlomcima) i Shift/Enter (Line Break jednostruki prored na kraju odlomka); postavite neku rije kao poveznicu (link): selekcija rijei, desni klik -> Hyperlink, upisivanje URL-a (adrese linka), eventualno pritisak Target Frame... botuna i zadavanje otvaranja odredita u novom prozoru. Rad s grafikom (slikama) na poetnoj je razini vrlo slian Wordu: umetanje grafike u FrontPageu isto je kao i u Wordu: Insert->Picture->From File i odabir datoteke; potom se desnim klikom -> Picture Properties definira ovijanje (wrapping) teksta oko slike (bez ovijanja, slika lijevo od teksta, slika desno od teksta); slici moemo promijeniti veliinu u tom se sluaju u donjem desnom kutu slike pojavljuje poziv na dijalog u kojem nam se nudi preoblikovanje na novu veliinu (resampling) naime, ako ne napravimo resampling pri uitavanju stranice uitat e se izvorna (velika) slika i onda prikazati umanjena. Ovo moe prouzroiti dugotrajno uitavanje stranice. Rad s tablicama je takoer slian Wordu, s nekim posebnostima: Umetanje tablice je isto kao u Wordu: Table -> Insert->Table, uz zadavanje svojstava tablice; ili pritisak na Insert Table ikonu na alatnici i zadavanje broja redaka i stupaca; Kod oblikovanja tablice mogua je zabuna (i osnovna razlika u odnosu na Word) u tome to tablicu oblikujemo na dvije razine: na razini cijele tablice (Table->Table Properties->Table ili desni klik u tablici i Table Properties) i na razini jedne ili vie elija (Table->Table Properties->Cell ili desni klik u selektiranim elijama i Cell Properties). Moguu zabunu najbolje razjanjava sljedei primjer: na razini tablice ravnanje (Alignment) oznaava ravnanje (lijevo, centrirano, desno) tablice u odnosu na stranicu na razini elije odreujemo horizontalno i vertikalno ravnanje elije u odnosu na eliju. irina tablice moe se iskazati u postotku irine stranice, ili egzaktno u broju pixela. U prvom sluaju se promjenom veliine prozora u kojem pregledavamo web-stranicu irina tablice prilagoava irini prozora, u drugom sluaju je irina tablice fiksna i smanjenjem prozora preglednika jedan dio tablice ostaje izvan prozora. Provjerite kako se u FrontPageu rade osnovna oblikovanja tablice i njenih elemenata: ukupna irina tablice, boja pozadine, debljina i boja okvira; promjena irine redaka / visine stupaca, horizontalnog i vertikalnog ravnanja u elijama; dodavanje/brisanje retka/stupca, spajanje (merge) i razdvajanje (split) elija.

Uspostava Web-sitea
Pretpostavit emo da smo dugotrajnim promiljanjem doli do idealnog designa naeg Websitea: glavna stranica i nekoliko stranica ispod glavne. Na svakoj stranici emo postaviti zaglavlje (banner) i neku vrstu navigacije.

za poetak emo FrontPageu najaviti uspostavu web-sitea: File->New->One Page Web Site odmah emo postaviti folder u kojem e biti sve datoteke naeg sitea: pritisnut emo na Browse-botun i pokazati na neki postojei folder na raunalu

FrontPage e uspostaviti niz datoteka koje osiguravaju integritet web-sitea, i postaviti praznu datoteku index.htm za glavnu stranicu sitea; U imenima datoteka u koje pohranjujemo stranice neemo koristiti razmake niti naa slova (ovo vrijedi samo za imena datoteka, na same stranice moemo pisati to hoemo) nakon otvaranja novoga sitea, idemo u Navigation-prikaz i u njemu uspostavljamo 4 nove stranice ispod glavne (desni klik na glavnu, New->Page):

najbolje je odmah promijeniti imena stranica (desni klik na stranicu ->Rename), jer e se ova imena javljati u navigaciji i na banneru ako nam se ne svidjaju imena datoteka pod kojima su stranice pohranjene, moemo datoteke preimenovati (u lijevom okviru na ekranu, desni klik na ime datoteke i Rename).

sad moemo po elji popuniti sadraj svake stranice, ali pametnije je prije toga odrediti temu i predloak za site. Zapravo, temu i predloak je najpametnije definirati prije poetka uspostave sitea ovo nije nuno, ali je puno lake ako se tema i sadraj zadaju dok su sve stranice sitea prazne. prisjetimo se: tema nam slui kako bi elementi naih stranica izgledali jednako, npr. svi glavni naslovi automatski bili u istom fontu, boji i veliini slova, sve stranice imale istu pozadinu, sve navigacije izgledale jednako, itd. (naravno da su mogue iznimke: ideja je da se oblikovanja koja e prevladavati na naem siteu na jednom mjestu definiraju i na jednom mjestu eventualno kasnije mijenjaju) za primjenu neke od tema potrebno je otvoriti prikaz neke od stranica (npr. dvoklik na njezinu kuicu u Navigation-prikazu web-sitea), potom Format->Theme. Za svaku od ponuenih tema mogua je opcija (postavljanje kursora nad minijaturu teme, klik na strjelicu s desne strane) Apply as Default Theme (tj. ova e tema automatski biti primijenjena na sve budue stranice koje napravimo u siteu) i Apply to Selected Pages (tema e biti primijenjena na sve postojee stranice koje su odabrane)

Za oblikovanje teme postupamo kako slijedi (mi emo preoblikovati postojeu temu, neemo poeti od nule): nakon postavljanja kursora na minijaturu teme i klika na strjelicu, odaberemo opciju Customize i odmah pritisnemo Save as botun kako bismo temu spremili pod drugim imenom (FrontPage ne doputa izmjenu svojih osnovnih tema); U prozoru koji se pojavljuje vidimo mogunost zadavanja oblikovanja trima osnovnim grupama elemenata: bojama, grafikim elementima i tekstu

Sami postupak (pre)oblikovanja elemenata teme prilino je intuitivan: za boje moemo odabrati jednu od ponuenih shema, ili pak u Custom-opciji zadavati boje pojedinim elementima (pozadina, tekst za pojedine stilove itd); za grafike elemente zadajemo sliku (ili vie slika) koje ih odreuju (npr. slika za banner, botuni za navigacije itd), kao i svojstva teksta koji se u tim elementima javlja (npr. font, veliinu slova i ravnanje teksta koji se ispisuje na banneru). Za tekst moemo zadati svojstva nekom od predefiniranih stilova (Body, Heading 1, Heading 2...) ili (pritiskom na More Text Styles) zadati neki od naih (korisnikih) stilova koji elimo primijeniti na stranicama.

Predloak (dynamic web-template) je samostalna datoteka u kojoj definiramo sadraj i raspored elemenata zajednikih svim stranicama sitea. Na primjer, ako elimo na vrhu svake stranice imati banner, na lijevoj strani navigaciju, na dnu stranice oznaku kad je stranica mijenjana, sve te elemente emo postaviti u predloak (a njihov izgled odrediti u temi naeg sitea). Praktian (ali ne i neophodan) alat za izradu predloka je tzv. Layout Table tablica u kojoj se tono iskazuje irina i visina svake elije, i koja nam slui kao kostur u koji potom umeemo elemente stranice. Izrada Layout tablice pokree se sa Table->Layout Tables and Cells, potom se uz pomo okvira na desnoj strani ekrana (i puno, puno strpljenja) postupno uspostavi tablica eljenog rasporeda elija i eljenih dimenzija. Pti rome je zgodno imati na umu: prije poetka izrade, svakako treba skicirati (na papiru) njezin konani oblik i dimenzije svakog elementa; zgodno je na poetku zadati dimenzije (irinu, visinu) prazne tablice pa onda u njoj zadavati retke i stupce po elji; ukoliko tablica slii nekome od ponuenih oblika u desnom okviru, mogue je primijieniti taj izgled pa ga onda prepravljati prema eljama; layout tablica je tablica na nju se mogu primijeniti oblikovanja koja poznajemo iz rada s tablicama; pri zadavanju dimenzija, FrontPage nam nee dopustiti preklapanje, npr. ako desno od neke elije nema dovoljno mjesta za irinu koju elimo zadati toj eliji, broj koji smo unijeli jednostavno e biti ignoriran.

Nakon to smo definirali izgled layout tablice, definiramo dva njena dijela: dio u kojem e biti zajedniki elementi svim stranicama (npr. banner, navigacija, itd.). Ove elemente umeemo u tablicu (po elji i oblikujemo) u samome predloku ovi elementi e se automatski pojaviti na svim stranicama, ali ih na stranicama nije mogue mijenjati (ti dijelovi tablice bit e nedostupni na stranicama koje zakaimo za predloak); dio u koji e se moi pohraniti razliit sadraj na svakoj stranici: za eliju u koju emo postavljati sadraj na stranicama sitea zadajemo naziv tzv. izmjenjivog podruja (desni klik -> Manage Editable Regions, potom zadavanje nekog naziva). Vidimo da se pojavio naranasti okvir sa nazivom podruja. Konano, predloak moramo spremiti (Save As) Dynamic Web Template (.dwt) datoteku. Potom, ako imamo postojee stranice koje elimo zakaiti na predloak, odaberemo te stranice (Folder-prikaz web-sitea) i odaberemo Format->Web Template->Attach Dynamic Web Template. Vano je napomenuti da se predloak moe po volji mijenjati i naknadno, a pri njegovom spremanju FrontPage e nas upozoriti da treba aurirati i stranice koje su na taj predloak zakaene. U vjebi s web-siteom nacionalnog parka, napravit emo ovakvu tablicu za predloak:

U ovu emo tablicu umetnuti sljedee Web-komponente: Page Banner Vertical Navigation Horizontal Navigation Date and Time Nadalje, jedna od stranica web-sitea je i foto-galerija. Konano, web-site emo objaviti (tzv. publishing) koritenjem Remote Site prikaza Web sitea.

Vjeba 1: Pokretanje, jednostavna stranica

U ovoj emo vjebi upoznati izgled FrontPage ekrana i izraditi jednostavnu samostalnu mrenu stranicu. pokrenite FrontPage neizravno, pokretanjem ureivanja (desni klik ->edit) stranice prazna.htm s diska D. Potom spremite ovu stranicu primjenom Save As opcije, zatvorite ju i otvorite novu, praznu stranicu (File->New->Blangk Page); razmotrite elemente FrontPage ekrana: u donjem lijevom kutu odaberite 4 razliita prikaza stranice (Design, Split, Code, Preview) uoite da, iako je prazna (bez sadraja), stranica ve sada ima osnovne HTML-oznake (tagove). U uvodnim vjebama emo raditi u Split-prikazu kako bismo vidjeli kako se oblikovanje stranice odraava na HTML-kod; uoite brojne slinosti s Word-ekranom (sline ikone); osnovna razlika u razmiljanju u odnosu na Word je u tome to ovdje nema lista papipra na kojem je sadraj fiksan! Nae stranice korisnici e gledati na razliitim raunalima, razliitim operacijskim sustavima, na zaslonima s razliitom rezolucijom, u prozorima razliite veliine. upiite sljedei tekst na praznu stranicu (u Design ili Split nainu prikaza): Moja prva web-stranica Ovo je moja prva web-stranica. Ovo je odlomak s obinim tekstom. Podnaslov Ovo je odlomak ispod prvog podnaslova. Jo jedan podnaslov Ovo je odlomak ispod drugog podnaslova. uoite da FrontPage odvaja odlomke dvostrukim proredom ako to elite izbjei, na kraju umjesto Enter (tj. prijeloma odlomka) ukucajte Shift/Enter (odnosno, prijelom linije); promijenite naslov (<title>) stranice u Moja prva stranica, i to u HTML-dijelu ekrana. Spremite stranicu na disk (moete ostaviti predloeni naziv ili zadati svoj, ali bez razmaka, interpunkcija i naih slova); pogledajte izgled Vae prve stranice iz web-preglednika (File->Preview in Browser, potom odabir preglednika); zadajte sljedea svojstva stranice (desni klik -> Page Properties): postavite jezik na hrvatski, encoding na jedan od odabira UTF-8, Windows 1250, ISO 8859-2; oblikujte naslov stranice (Moja prva web-stranica) u stil Heading1, a dva podnaslova u stil Heading2. Uoite oznake (tagove) <p>, <h1>, <h2> u html-kodu; provjerite kako na selektirani tekst djeluju promjena ravnanja, fonta, boje teksta itd.; kao alat za izradu web-stranica moe se (u krajnjoj nudi) koristiti i Word. Otvorite Worddokument Moja prva stranica. Pohranite ga u HTML-obliku (Save As, potom zadajte html tip datoteke). Otvorite tako dobivenu stranicu u FrontPageu i pogledajte kako (grozno) izgleda HTML-kod stranice napravljene iz Worda, tj. koliko je html-koda Word ubacio za sasvim jednostavnu stranicu. Ova e situacija biti neto bolja ako se dokument spremi kao filtrirana web-stranica. Napomene: samo su fontovi Arial, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet, and Verdana "univerzalni" na razini Windows instalacija. Stranica nee svakome izgledati jednako!!! nije pametno potcrtavati tekst jer e korisnik misliti da bi to trebao biti link.

Vjeba 2: Poveznice, liste

U ovoj emo vjebi izraditi jednostavnu web-stranicu koristei pri tom poveznice (hyperlinks), i liste (lists). zatvorite bez spremanja sve eventualno otvorene stranice u FrontPageu, potom otvorite datoteku Strojevi.htm; u ovoj datoteci postavite naslov na stil Heading1, podnaslove (vrste strojeva) na Heading2. Uoite da oblikovanja nisu lijepa poslije emo nauiti kako na jednome mjestu promijeniti stilove ili zadavati svoje stilove; sav tekst prikazan crvenom bojom postavite kao liste nabrajanja (bullets), potom mu vratite crnu boju; postavite kao pozadinu stranice (Page Properties->Formatting) jednu od slika graevinskih strojeva. Uoite kako FrontPage radi tzv. tiling, tj. lijepi sliku poput keramikih ploica. Vrlo e rijetko stranica s pozadinskom fotografijom izgledati lijepo (ak i u primjeni posebnih pozadina, o kojima e vie biti rijei kasnije, treba biti jako umjeren); promijenite pozadinu stranice u neku jednoliku boju. Uoite promjene u HTML-kodu (tag <bgcolor> na poetku tijela stranice; umetnite poveznice (hyperlinks) unutar dokumenta na pojedinu vrstu strojeva: najprije oznaite naslov (npr. Jaruala) i umetnite knjinu oznaku (Insert->Bookmark), potom oznaite odgovarajui redak u nabrajanju na poetku stranice i postavite odgovarajuu poveznicu pomou Insert->Hyperlink->Place in this document; za barem dvije kategorije strojeva postavite poveznicu kojom se korisnik moe vratiti na vrh stranice (dodajte redak u kojem ete napisati Povratak na vrh stranice, potom na ve opisani nain postavite poveznicu na vrh); u nabrajanju jaruala postavit emo tzv. collapsible bullets, tj. pod-kategorije iji se prikaz dvoklikom moe paliti i gasiti: odaberite trei, etvrti i peti redak, dvaput kliknite na Increase Indent ikonu (ili na tabulator) i tako ih uvucite na sljedeu razinu nabrajanja. Potom odaberite cijelo nabrajanje i u Format->Bullets and Numbering postavite Enable collapsible outlines po volji odaberite eliti li inicijalni prikaz nie razine nabrajanja ili ne. Uoite da se ova lista ispravno vidi tek u pregledniku (i to tek nakon to se omogui tzv. Active Content), a ne i u Preview-prikazu (gdje Frontpage prijavljuje pogreku); dodajte redak Izvor: www.gradst.hr neposredno ispod naslova stranice. Uoite da je FrontPage automatski pretvorio adresu fakultetskih mrenih stranica u valjanu poveznicu; postavite parametre poveznice za otvaranje fakultetskih mrenih stranica u novome prozoru: desni klik na poveznicu->Hyperlink Properties->Target Frame->New Window; ispod poveznice na fakultetske stranice, dodajte redak e-mail za kontakt: jure.juric@gradst.hr. Uoite da je FrontPage automatski pretvorio adresu u tzv. mailtopoveznicu; ako to elite sami napraviti, moete pomou Insert->Hyperlink->E-mail address; izmeu svake svije vrste strojeva ubacite vodoravnu crtu (Insert->Horizontal Line), potom dvoklikom na crtu razmotrite koja joj svojstva moete zadati; spremite ovako oblikovanu stranicu.

Vjeba 3: Tablice
U ovoj emo vjebi razmotriti uporabu tablica u FrontPageu, a posebno slinosti i razlike u odnosu na Word. ukoliko nije otvorena, otvorite datoteku strojevi.htm; na kraju (na dnu) datoteke umetnite tablicu sa 3 stupca i 4 retka (slino kao u Wordu, ili Table->Insert->Table); uoite kako se tablica ponaa pri promjeni veliine prozora (irine stupaca se prilagoavaju prikazu cijele tablice unutar prozora); upiite u elije prvog retka tablice nekoliko redaka teksta (moete kopirati i nalijepiti neki od odlomaka sa stranice). Uoite ponaanje irina stupaca: dok upisujemo sadraj jedne elije, njezin stupac se iri na raun preostalih, praznih. Tek kad se u svakom stupcu nalazi vie od jednog retka teksta, stupci imaju poetnu (jednaku) irinu. uoite i uspravno (vertikalno) ravnanje sadraja elija (u situaciji kad je sadraj elija u istom retku nejednake visine) sadraj moe biti poravnat uz vrh, sredinu ili dno elije; otvorite dijalog Table->Table Properties->Table. U ovom dijalogu redom: postavite tablicu najprije na (relativnu) veliinu od 75%, potom na centrirano ravnanje. Razmotrite djelovanje ovog oblikovanja i ponaanje tablice pri unosu/brisanju sadraja elija (samostalno mijenjanje irine stupaca da bi sadraj bio podjednake visine), kao i pri promjeni veliine prozora; potom postavite tablicu na irinu 800 pixela. Stupci i dalje mijenjaju irinu pri promjeni sadraja elija, ali se tablica vie ne prilagoava veliini prozora; razmotrite djelovanje vrijednosti za razmak sadraja od ruba elije (Cell Padding) i meusobnog razmaka elija u tablici (Cell Spacing): postavite redom jednu pa drugu vrijednost na 10 i razmotrite ponaanje tablice; ponovite promjene navedenih vrijednosti s oznaenom Collapse table border opcijom (koja uklanja unutranje obrube tablice); razmotrite ponaanje tablice pri razliitim kombinacijama debljine obruba (Borders Size), boje obruba (Color) i postavljene vrijednosti svijetlog i tamnog obruba (Light Border, Dark Border). Sve ovo ponovite za obje vrijednosti opcije Collapse table border; konano, postavite blijedoutu boju kao pozadionu tablici. otvorite dijalog Table->Table Properties->Cell. U ovom dijalogu redom razmotrite: opcije vodoravnog i uspravnog poravnavanja sadraja (Horizontal/Vertical Alignment); mogunosti zadavanja obruba samo za odabrane elije; mogunost zadavanja relativne (u postotcima), odnosno apsolutne (u pixelima) irine stupaca. mogunost zadavanja boje u pozadini razliite od boje zadane za cijelu tablicu; opcije i mogunosti primjene Tables alatnice (desni klik u podruje alatnica, potom aktiviranje prikaza Tables-alatnice). Pri tom nemojte koristiti opcije vezane uz tzv. Layouttable (ove emo tablice i pridruene opcije upoznati kasnije).

Spremite izmijenjenu stranicu (ne morate zatvarati FrontPage).

Vjeba 4: Umetanje slika

U ovoj emo vjebi razmotriti postupak i mogunosti umetanja slika na nau web-stranicu. ukoliko nije otvorena, otvorite datoteku strojevi.htm; umetnite na odgovarajua mjesta na stranici po jednu sliku dozera, grejdera i jaruala (Insert->Picture->From File); otvorite dijalog Picture Properties (desni klik na sliku). U ovom dijalogu redom razmotrite: opcije omatanja teksta oko slike (Wrapping Style) i poloaja slike na stranici (Layout); mogunosti zadavanja obruba slike (Border Thickness); mogunosti zadavanja vodoravne i okomite udaljenosti (Spacing) teksta od slike; u rubrici General, zadajte alternativni prikaz slike, tj. tekst koji e se pojaviti kad se nad sliku postavi kursor; promijenite veliinu slike i uoite dijalog u kojem vam se nudi (preporuljiva) opcija Resample, tj. stvaranje nove verzije slike koja e imati eljenu veliinu (u protivnom e korisnici neovisno o smanjenom prikazu uitavati cijelu, veliku verziju slike); primijenite na jednu od slika opciju AutoThumbnail kojom se na stranicu postavlja umanjena (thumbnail) verzija slike a prava slika dobija klikom na umanjenu. Za umanjenu sliku definirajte alternativni prikaz i postavite prikaz prave slike u novom prozoru (postavite New Window kao vrijednost Target Framea); postavite jednu od slika kao poveznicu (hyperlink) na fakultetske mrene stranice. Postupak je isti kao i za bilo koji drugi element stranice: odabir i potom zadavanje poveznice; na kraj dokumenta uitajte sliku Hot spots.gif. smanjite je na 800 pixela irine, potom pomou odgovarajuih ikona Pictures alatnice nainite nekoliko hot spots, tj. nepravilnih podruja kojima ete pridruiti poveznice po vlastitom izboru; spremite stranicu. Razmotrite upit o odredinom folderu u koji FrontPage eli spremiti sve slike. Upamtite: html-datoteka ne sadri slike! Sve slike su vanjski objekti koji se moraju prebaciti na server (u protivnom se nee prikazivati pri gledaju stranice);

Vjeba 5: Stilovi (uvod)

U ovoj emo vjebi razmotriti osnove zadavanja svojstava stilovima. ukoliko nije otvorena, otvorite datoteku strojevi.htm; uoite da se na stranici koriste stilovi Normal, Heading1, Heading2 i Bulleted List, kojima su redom pridrueni html-tagovi <p>, <h1>, <h2> i <li>. Poznavanje tagova vano je jer emo u osnovi preoblikovati njih; otvorite dijalog za oblikovanje stilova (Format->Style), prikaite listu html-tagova i redom oblikujte tagove koji se koriste na stranici; uoite razne mjerne jedinice (pixel, toka, milimetar, inch) kojima se moe iskazati veliina fonta; zadajte novi stil mojstil, definirajte mu svojstva i primijenite ga na nekoliko odlomaka u tekstu.

Vjeba 6: Uspostava Web-sitea

U ovoj emo vjebi uspostaviti jednostavni web-site. elimo uspostaviti Web site o graevinskim strojevima. Na site e imati sljedeu topologiju: Naslovna stranica Strojevi za zemljane radove Jaruala

Foto-galerija

Dozeri

pokrenite FrontPage, potom pokrenite uspostavu novog web-sitea (File->New->One page Web site); VANO! Zbog specifine instalacije na fakultetskim raunalima, vano je odmah kao "location of Web site" zadati neki folder na disku D, u protivnom neete moi spremiti Va web site (Browse, potom pokaite na folder u kojeg ete spremati Va site); uoite razliite poglede, tj. naine na koje moemo promatrati na Web-site; prikaite site u Navigation-pogledu. Postupno uspostavite hijerarhiju stranica (desni klik na postojeu stranicu, New->Page, potom odmah desni klik na naziv nove stranice i zadavanje "pravog" imena. Pri zadavanju imena nemojte koristiti "naa" slova, razmake, interpunkcijske znakove. Redom kreirajte stranice zemljani, jaruzala, dozeri; Stranicama (Page Properties) zadajte neka od svojstava koja smo ve upoznali kod rada sa samostalnim web-stranicama; foto-galeriju emo kreirati zasebno i potom prikljuiti Web-siteu: dodajte novu stranicu (File->New->More Page templates, potom odabir Photo Gallery predloka); dvokliknite na galeriju, dodajte slike graevinskih strojeva, za slike zadajte "Caption" i "Description", potom razmotrite razliite gotove predloke galerija (Layout rubrika dijaloga), ako i ostale opcije koje Vam nudi predloek foto-galerije; spremite stranicu (File->Save As) kao galerija. Pri upitu o odreditu gdje e biti pohranjene slike, odaberite folder images; u Navigation pogledu na site dodajte stranicu galerija u topologiju Vaeg sitea; postupno popunite tri stranice tekstovima iz datoteke "Web site strojevi tekstovi". Pri Copy/Pasteu odaberite opciju "Keep Text Only", potom zamijenite prijelome linija (line breaks) prijelomima odlomaka (paragraph brakes) ili "runo", ili u kodu napravite globalnu zamjenu niza <br> nizom </p><p>; na svaku stranicu postavite po dvije fotografije strojeva. Fotografije trebaju biti jednake veliine i u istom retku (primijenite tablicu za rasporeivanje). Po elji postavite prikaz umanjene verzije (Auto Thumbnail); na svaku od stranica dodat emo navigacijsku plou (Link Bar), tj automatski prikaz poveznica na ostale stranice naeg sitea: (Insert->Navigation->Link Bars->Bar based on navigation structure). Pri tom emo odrediti koje stranice e biti dostupne (na svakoj stranici emo dodati i skok na glavnu stranicu); na dnu stranica o jarualima i dozerima dodajte jo jednu navigacijsku plou koja e omoguiti pristup "bratskim" susjednim stranicama (stranicama iste hijerarhijske razine); na dnu poetne stranice dodajte navigacijsku plou s 4 proizvoljno zadane poveznice (Bar with custom links). Pronaite odgovarajue poveznice pomou Googlea, kljuna rije "construction equipment" ili "construction equipment manufacturers"; na dnu glavne stranice dodat emo podatak o tome kada je stranica posljednji put aurirana (Insert->Date and Time, potom odabir opcija prikaza); spremite sve stranice i pogledajte ih iz preglednika.

Vjeba 7: Objavljivanje (publishing) Web sitea

U ovoj vjebi emo Web site izraen u prethodnoj vjebi objaviti na fakultetskom serveru, i time ga nainiti dostupnim svim korisnicima Interneta. Zbog specifine instalacije na fakultetskom serveru, najprije emo preimenovati poetnu stranicu i index.html (dakle, promijenit emo joj ekstenziju iz .htm u .html); prikaite web-site u "Remote Web site" pogledu; kliknite na "Remote Web site properties", potom odaberite FTP-transfer datoteka. Kao "Remote Web site location" postavite ftp://cigla.gradst.hr, a kao FTP-directory postavite public_html; kao podatke za prijavu upiite korisniko ime i zaporku koju ete dobiti na vjebama; razmotrite izgled ekrana, tj. prikaz slian prozorima Windows Explorera; prije prvog objavljivanja Web-sitea, pobriite sve datoteke na udaljenom siteu (da bismo izbjegli konflikte novih sa starim datotekama); kliknite na "Publish Web site" ovim ste kopirali sve potrebne datoteke na server i uinili Va site dostupnim svim korisnicima Interneta; promijenite bilo to na nekoj od stranica i spremite izmijenjenu stranicu, potom uoite kako FrontPage "prepoznaje" promjenu u odnosu na istu stranicu na serveru. Izmijenjenu stranicu moete kopirati samostalno, a moete i ponoviti objavu cijelog Web-sitea.

Vjeba 8: Koritenje tema

U ovoj emo vjebi na Web-site uspostavljen u Vjebi 6 primijeniti gotove FrontPageove teme, koje emo potom prilagoavati po eljama. pokrenite zadavanje teme Web-sitea (Format->Theme), potom odaberite temu po elji, kliknite na strjelicu uz temu i zadajte "Apply as default theme". Uoite uinak na sve stranice; dodajte na vrhu stranice zaglavlje stranice ( Page Banner). To smo mogli uiniti i prije primjene teme, ali je u tom sluaju zaglavlje neatraktivno; pokrenite prilagodbu teme (klik na strjelicu uz naziv teme, potom Customize). Na poetku, pohranite temu pod nekim drugim nazivom (FrontPage ne doputa spremanje njegovih tema pod istim imenom); razmotrite "filozofiju" odreivanja elemenata teme: zasebno odreivanje parametara za boje (Colors), parametara grafikih elemenata (Graphics) i parametara teksta (Text). Pogotovo uoite brojne stilove teksta koji su definirani unutar teme. Unutar svake od ovih rubrika pogledajte ponuene elemente za promjenu, i promijenite/prilagodite neke od njih; u jednoj od sljedeih vjebi izradit emo vlastiti banner i logotip, a sada emo elemente besplatno (i legalno) preuzeti s Interneta: s adrese www.freebuttons.com preuzmite po elji neke grafike elemente i zadajte ih kao dio Vae teme (po mogunosti, elemente navigacije kako biste vidjeli njihovo funkcioniranje); objavite izmijenjenu verziju sitea.

Vjeba 9: Layout-tablice
U ovoj emo vjebi razmotriti izradu Layout-tablica koje emo poslije koristiti za odreivanje opeg oblikovanja Web-sitea. pokrenite izradu Layout-tablice (Tables->Layout Tables and Cells); napravite novi Layout-tablicu dimenzija 800x600 pixela (Insert Layout table, potom zadavanje dimenzija); od ponuenih predloaka (Table layout) odaberite "Corner, header, left and body"

selektirajte redom (klik na rub elije) svaku od 4 elije u tablici i utvrdite njihove dimenzije; pokrenite oblikovanje elija tablice (klik na "Cell Formatting" poveznicu ili dvoklik na neki od rubova tablice); postavite irinu 450 pixela dvjema desnim elijama tablice, potom ih prenesite na desni rub tablice; postavite irinu gornje lijeve elije na 350. Uvjerite se da FrontPage nee dopustiti zadavanje vee irine, jer trenutno nema mjesta (tablica je iroka 800, desna elija zauzima 450); postavite irinu donje lijeve elije na 175; u "praznom stupcu" (sivo oznaeno podruje desno od elije koju ste upravo postavili na irinu 175), nacrtajte dvije elije. Postavite im irine na maksimalnih 175, a visine na 168 i 350. Tablica bi trebala izgledati ovako:

Vjeba 10: Koritenje Dynamic Web Templatea

U ovoj emo vjebi objediniti sve naueno o FrontPageu u Web-site koji emo uspostaviti koritenjem predloka (Dynamic Web Templatea) koji e nam omoguiti zadavanje jednoobraznog sadraja svih stranica. Jo jednom ponovimo: koritenjem teme definiramo jednoobrazni izgled elemenata naeg Web-sitea, koritenjem predloka definiramo jednoobrazni sadraj stranica, tj. na jednom mjestu odreujemo elemente koji e se pojavljivati na svim stranicama. prije nego to ponemo s izradom predloka, treba sliku "Suma" svesti na 780x100 pixela i eksportirati u GIF; izradite Layout-tablicu koja e nam biti "kostur" svih stranica: krenite od predloka "Header, Footer and Three Columns", potom ga postupno preoblikujte u eljeni oblik:

irina layout-tablice: 940 (160 + 10 + 560 + 210) visina layout-tablice: 534 (100 + 18 + 366 + 50) centrirano ravnanje tablice!

spremite ovu stranicu kao (File->Save As) Dynamic Web Template i nazovite ju predlozak.dwt; zadajte svojstva stranice (Page Properties) kao to smo to ranije radili; zadajte blijedozelenu podlogu u lijevom stupcu i donjem retku, a u gornjoj lijevoj eliji zadajte pozadinu RGB-boje (35, 35, 35); u donjoj lijevoj eliji upiite "Zadnja promjena" i umetnite automatski prikaz datuma zadnje promjene; definirajte "promjenjiva podruja", tj. podruja u kojima e se na svakoj stranici moi upisivati razliit sadraj (Format->Dynamic Web template->Manage editable Regions): u sredinju eliju postavite podruje "Tekst", u eliju desno od nje postavite podruje "Slike"; postavite u lijevi stupac vertikalnu, a u donji redak horizontalnu navigaciju. Vertikalna mora omoguiti povezivanje s "niim" stranicama i povratak na poetnu, a horizontalna meusobno povezivanje "niih" stranica;

u navigacijskom prikazu web-sitea, ispod poetne stranice dodajte jo 4 stranice: ivotinjski svijet Biljni svijet Kako do nas? Foto-galerija pridruite predloak ovim stranicama (Format->Dynamic Web template->Attach Dynamic Web Template, potom zadavanje predloka predlozak.dwt); kreirajte novu temu (Format->Theme->Create New Theme) i u njoj definirajte (Text->More Text Styles->User Defined Styles): stil h1 (za Risnjak) Arial 20 stil table (Arial 10) stil p (Arial 10) Page Banner (iskoristite sliku "Suma", postavite za tekst bannera font Arial, veliinu 24, bijelu boju i desno ravnanje); horizontalnu navigaciju + font (iskoristite slike iz Buttons foldera) vertikalnu navigaciju + font (iskoristite slike iz Buttons foldera) ubacite sadraj pojedinih stranica (tekst i slike), kao i foto-galeriju; objavite Web-site na fakultetskom serveru, pregledajte u web-pregledniku Va site i site ostalih grupa; nainite izmjenu u banneru: uoite da desno poravnati tekst opoprilino "visi" na desnom rubu prozora; zbog toga emo redom: sliku "Suma" razbiti na dva dijela: lijevi, veliine 400x100 pixela, i desni, veliine 380x100 pixela; u layout-tablici podijeliti eliju u kojoj je banner na dva dijela; postaviti irine ovim dijelovima na 400, odnosno 380 pixela; u lijevi dio uitati lijevi dio slike; u temi promijeniti banner na desnu sliku i lijevo ravnanje teksta; u desnu eliju postaviti izmijenjeni banner; objavite izmijenjenu, konanu verziju web-sitea.

Samostalna vjeba: Web-stranice

Kao provjeru usvojenih elementarnih znanja u izradi Web-stranica u FrontPageu, izradite 3 stranice (glavnu i dvije podstranice) o nekom Vaem hobiju. Materijale (tekst, slike) preuzmite s postojeih mrenih stranica. Kod Copy/Pasteanja teksta, odaberite opciju "Keep Text only", potom "runo" promijenite Line Breaks u Paragraph Breaks. Izraene web-stranice trebaju sadravati: izmijenjeni naslov, tj. tekst koji e se prikazivati na vrhu stranice pri pregledu; boju pozadine; poveznice s "glavne" na dvije pomone i s pomonih na glavnu; dvije poveznice prema "vanjskim" mrenim stranicama i jedno "mailto" poveznicu; primijenjene stilove Heading 1, Heading 2, Normal, Bulleted List; izmijenjena barem dva od stilova koji se koriste na stranicama; po jednu tablicu s retcima fiksne i s retcima promjenjive irine. Tablice trebaju imati razliite kombinacije obruba, razliita vodoravna i uspravna oblikovanja; ubaene slike s razliitim opcijama ovijanja teksta; barem jednu sliku s iskoritenom AutoThumbnail opcijom; po jednu vodoravnu crtu.

Samostalna vjeba: Web-stranice

Kao provjeru usvojenih elementarnih znanja u izradi Web-stranica u FrontPageu, izradite 3 stranice (glavnu i dvije podstranice) o nekom Vaem hobiju. Materijale (tekst, slike) preuzmite s postojeih mrenih stranica. Kod Copy/Pasteanja teksta, odaberite opciju "Keep Text only", potom "runo" promijenite Line Breaks u Paragraph Breaks. Izraene web-stranice trebaju sadravati: izmijenjeni naslov, tj. tekst koji e se prikazivati na vrhu stranice pri pregledu; boju pozadine; poveznice s "glavne" na dvije pomone i s pomonih na glavnu; dvije poveznice prema "vanjskim" mrenim stranicama i jedno "mailto" poveznicu; primijenjene stilove Heading 1, Heading 2, Normal, Bulleted List; izmijenjena barem dva od stilova koji se koriste na stranicama; po jednu tablicu s retcima fiksne i s retcima promjenjive irine. Tablice trebaju imati razliite kombinacije obruba, razliita vodoravna i uspravna oblikovanja; ubaene slike s razliitim opcijama ovijanja teksta; barem jednu sliku s iskoritenom AutoThumbnail opcijom; po jednu vodoravnu crtu.