FRONTPAGE PODSJETNIK

Uvodne napomene Na fakultetskim računalima, na kojima korisnik „ne vidi“ disk C, FrontPage je jako svojeglav i

često se „zbuni“ kad pokuša nešto spremiti na disk, ili pročitati s diska (npr. umetanje slike u stranicu i slično). Na „normalnim“ instalacijama ovaj se problem ne javlja. Ovaj se problem zaobilazi tako da se smisli neki način na koji će se FrontPage „uputiti“ na disk D, nakon toga sve radi kako treba.

Jedan od načina na koji se može zaobići problem s diskom C je sljedeći: na disku D u Notepadu kreirajte neku datoteku s ekstenzijom .htm – ova datoteka može

biti i prazna; pokrenite FrontPage neizravno, desnim klikom na .htm datoteku i odabirom opcije

„Uređivanje“ („Edit“ na engleskoj verziji Windowsa); pohranite ovu stranicu opcijom „Save As“ ne mijenjajući joj pri tom ime, potom je

zatvorite; nakon ovog koraka FrontPage bi se trebao ponašati „normalno“.

Gradivo koje smo obuhvatili unutar FrontPagea izgleda obimno i komplicirano ako ga se ne „složi“ po dijelovima. Kad se malo pogleda, vidi se da smo se uglavnom vrtili oko istih stvari u različitim kontekstima: prazna Web-stranica, unos elemenata, oblikovanje „na ruke“ – ovo je jako slično Wordu

i/ili PowerPointu; nekoliko web-stranica izrađenih i međusobno povezanih „na ruke“ (dakle, bez podrške

koju FrontPage pruža uspostavi Web-sitea) – ovo je loša strategija i ne treba je uopće razmatrati;

uspostava web-sitea korištenjem FrontPage podrške – sastoji se od četiri dijela: izrade „kostura“ sitea (graf međuodnosa pojedinih stranica), definiranja izgleda stranica (design – izgled u smislu fontova i veličine slova, boja i ostaloga) i definiranja strukture stranica (layout – izgled u smislu „gdje će na stranici biti što“), i konačno objave (publishinga) web-sitea na server

Postoje dvije zabune koje bi trebalo izbjeći tako da se prije „navale na pritiskanje botuna“ malo promisli o konceptima: razlika između „samostalne“ web-stranice i web-stranice koja je dio nekog web-sitea: u

prvom slučaju sve elemente stranice moramo složiti sami (navigacija, banner, itd.) – odgovarajuće opcije na izbornicima su sive, tj. nedostupne. U drugom slučaju (kada je stranica dio sitea), možemo koristiti „automatske“ elemente (navigacija, banner, itd.).

razlika između teme (Theme) i predloška (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 veličina slova za pojedine stilove, slika koju ćete koristiti za banner, botuni koje ćčete koristiti za navigaciju). U predlošku definirate sadržaj i raspored zajedničkih elemenata svih stranica web-sitea. U oba slučaja moguće su iznimke, tj. ne moraju sve web-stranice biti „naslonjene“ na istu temu i na isti predložak.

Ne zaboravimo, FrontPage je u osnovi samo posrednik koji nam olakšava život jer ne moramo sami pisati html-datoteke. Uz to je i „pametan posrednik“, pa će nam omogućavati i dodatne pogodnosti pri sastavljanju stranica.

Pokretanje, FrontPage ekran Već nakon pokretanja FrontPagea, naići ćete na problem „nepostojećeg diska C“: stranica koju obradite neće se moći spremiti. Ako Vam nije važno spremiti stranicu, možete jednostavno na kraju rada izaći iz FrontPagea, u protivnom možete postupiti kako je opisano na prethodnoj stranici: napraviti praznu datoteku prazna.htm i otvoriti je za uređivanje (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 načina prikaza stranice: Design u kojemu

slažemo elemente stranice onako kako će (manje-više) izgledati u pregledniku, Split u kojemu je ekran razdijeljen na dio u kojem vidimo stranicu i dio u kojem vidimo pripadajući 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 sadržaj stranice učita pri 56kbps modemskoj vezi na Internet.

Uglavnom radimo u Design-prikazu, a ako nas zanima kako izgleda odgovarajući kod možemo pogledati Split-prikaz. Za pretpregled stranice puno je bolje koristiti pretpregled u pregledniku (File->Preview in Browser)

Neposredno iznad sadržaja 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 slično oblikovanjima u Wordu. Međutim, to nije dobra taktika jer npr. svako pojavljivanje odgovarajućeg 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 ključne riječi (Keywords);

rubrika Formatting: mogućnost 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 (poželjno Central European ISO 8859-2 ili Unicode UTF-8)

Provjerite djelovanje opcija Page Properties dijaloga, potom načinite i sljedeća oblikovanja: uvjerite se da odabir fonta, veličine slova, boje teksta itd. možete raditi kao i u Wordu; pojedine dijelove teksta selektirajte i označite nekim od stilova (npr. Normal, Heading 1,

Heading 2 itd.), i uočite koji se odgovarajući html-tagovi pojavljuju za odabrani tekst napravite dio teksta kao nabrajanje i kao listu s grafičkim oznakama (bulletima); uočite razliku između pritiska Enter (Paragraph Break – automatski dvostruki prored među

odlomcima) i Shift/Enter (Line Break – jednostruki prored na kraju odlomka); postavite neku riječ kao poveznicu (link): selekcija riječi, desni klik -> Hyperlink, upisivanje

URL-a (adrese linka), eventualno pritisak Target Frame... botuna i zadavanje otvaranja odredišta u novom prozoru.

Rad s grafikom (slikama) na početnoj je razini vrlo sličan 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 možemo promijeniti veličinu – u tom se slučaju u donjem desnom kutu slike pojavljuje

„poziv na dijalog“ u kojem nam se nudi preoblikovanje na novu veličinu (resampling) – naime, ako ne napravimo resampling pri učitavanju stranice učitat će se izvorna (velika) slika i onda prikazati umanjena. Ovo može prouzročiti dugotrajno učitavanje stranice.

Rad s tablicama je također sličan 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 moguća 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 više ćelija (Table->Table Properties->Cell ili desni klik u selektiranim ćelijama i Cell Properties). Moguću zabunu najbolje razjašnjava sljedeći primjer: na razini tablice ravnanje (Alignment) označava ravnanje (lijevo, centrirano, desno)

tablice u odnosu na stranicu na razini ćelije određujemo horizontalno i vertikalno ravnanje ćelije u odnosu na ćeliju.

Širina tablice može se iskazati u postotku širine stranice, ili egzaktno u broju pixela. U prvom slučaju se promjenom veličine prozora u kojem pregledavamo web-stranicu širina tablice prilagođava širini prozora, u drugom slučaju 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 promišljanjem došli do idealnog designa našeg Web-sitea: glavna stranica i nekoliko stranica „ispod“ glavne. Na svakoj stranici ćemo postaviti zaglavlje (banner) i neku vrstu navigacije. za početak ćemo FrontPageu „najaviti“ uspostavu web-sitea: File->New->One Page Web

Site odmah ćemo postaviti folder u kojem će biti sve datoteke našeg sitea: pritisnut ćemo na

Browse-botun i pokazati na neki postojeći folder na računalu

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 nećemo koristiti razmake niti „naša“ slova

(ovo vrijedi samo za imena datoteka, na same stranice možemo pisati što hoćemo) 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, možemo datoteke preimenovati (u lijevom okviru na ekranu, desni klik na ime datoteke i Rename).

sad možemo po želji popuniti sadržaj svake stranice, ali pametnije je prije toga odrediti temu i predložak za site. Zapravo, temu i predložak je najpametnije definirati prije početka uspostave sitea – ovo nije nužno, ali je puno lakše ako se tema i sadržaj zadaju dok su sve stranice sitea prazne.

prisjetimo se: tema nam služi kako bi elementi naših stranica izgledali jednako, npr. svi glavni naslovi automatski bili u istom fontu, boji i veličini slova, sve stranice imale istu pozadinu, sve navigacije izgledale jednako, itd. (naravno da su moguće iznimke: ideja je da se oblikovanja koja će prevladavati na našem 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 kućicu u Navigation-prikazu web-sitea), potom Format->Theme. Za svaku od ponuđenih tema moguća 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 buduće stranice koje napravimo u siteu) i „Apply to Selected Pages“ (tema će biti primijenjena na sve postojeće stranice koje su odabrane)

Za oblikovanje teme postupamo kako slijedi (mi ćemo preoblikovati postojeću temu, nećemo početi „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 dopušta izmjenu „svojih“ osnovnih tema);

U prozoru koji se pojavljuje vidimo mogućnost zadavanja oblikovanja trima osnovnim grupama elemenata: bojama, grafičkim elementima i tekstu

Sami postupak (pre)oblikovanja elemenata teme prilično je intuitivan: za boje možemo odabrati jednu od ponuđenih shema, ili pak u Custom-opciji zadavati boje pojedinim elementima (pozadina, tekst za pojedine stilove itd); za grafičke elemente zadajemo sliku (ili više slika) koje ih određuju (npr. slika za banner, botuni za navigacije itd), kao i svojstva teksta koji se u tim elementima javlja (npr. font, veličinu slova i ravnanje teksta koji se ispisuje na banneru). Za tekst možemo zadati svojstva nekom od predefiniranih stilova (Body, Heading 1, Heading 2...) ili (pritiskom na „More Text Styles“) zadati neki od naših (korisničkih) stilova koji želimo primijeniti na stranicama.

Predložak (dynamic web-template) je samostalna datoteka u kojoj definiramo sadržaj i raspored elemenata zajedničkih 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 predložak (a njihov izgled odrediti u temi našeg sitea). Praktičan (ali ne i neophodan) alat za izradu predloška je tzv. Layout Table – tablica u kojoj se točno iskazuje širina i visina svake ćelije, i koja nam služi kao „kostur“ u koji potom umećemo elemente stranice. Izrada Layout tablice pokreće 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 početka izrade, svakako treba skicirati (na papiru) njezin konačni oblik i dimenzije

svakog elementa; zgodno je na početku zadati dimenzije (širinu, visinu) prazne tablice pa onda u njoj zadavati

retke i stupce po želji; ukoliko tablica sliči nekome od ponuđenih oblika u desnom okviru, moguće 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 neće 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 zajednički elementi svim stranicama (npr. banner, navigacija, itd.). Ove

elemente umećemo u tablicu (po želji i oblikujemo) u samome predlošku – ovi elementi će se automatski pojaviti na svim stranicama, ali ih na stranicama nije moguće mijenjati (ti dijelovi tablice bit će nedostupni na stranicama koje „zakačimo“ za predložak);

dio u koji će se moći pohraniti različit sadržaj na svakoj stranici: za ćeliju u koju ćemo postavljati sadržaj na stranicama sitea zadajemo naziv tzv. „izmjenjivog područja“ (desni klik -> Manage Editable Regions, potom zadavanje nekog naziva). Vidimo da se pojavio narančasti okvir sa nazivom područja.

Konačno, predložak moramo spremiti (Save As) „Dynamic Web Template (.dwt)“ datoteku. Potom, ako imamo postojeće stranice koje želimo „zakačiti“ na predložak, odaberemo te stranice (Folder-prikaz web-sitea) i odaberemo Format->Web Template->Attach Dynamic Web Template. Važno je napomenuti da se predložak može po volji mijenjati i naknadno, a pri njegovom spremanju FrontPage će nas upozoriti da treba ažurirati i stranice koje su na taj predložak zakačene.

U vježbi s web-siteom nacionalnog parka, napravit ćemo ovakvu tablicu za predložak:

U ovu ćemo tablicu umetnuti sljedeće Web-komponente: Page Banner Vertical Navigation Horizontal Navigation Date and Time

Nadalje, jedna od stranica web-sitea je i foto-galerija. Konačno, web-site ćemo objaviti (tzv. publishing) korištenjem Remote Site prikaza Web sitea.

Vježba 1: Pokretanje, jednostavna stranica U ovoj ćemo vježbi upoznati izgled FrontPage ekrana i izraditi jednostavnu samostalnu mrežnu stranicu. pokrenite FrontPage neizravno, pokretanjem uređivanja (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 različita prikaza stranice (Design, Split, Code, Preview)

– uočite da, iako je prazna (bez sadržaja), stranica već sada ima osnovne HTML-oznake (tagove). U uvodnim vježbama ćemo raditi u Split-prikazu kako bismo vidjeli kako se oblikovanje stranice odražava na HTML-kod;

uočite brojne sličnosti s Word-ekranom (slične ikone); osnovna razlika „u razmišljanju“ u odnosu na Word je u tome što ovdje nema lista

papipra na kojem je sadržaj fiksan! Naše stranice korisnici će gledati na različitim računalima, različitim operacijskim sustavima, na zaslonima s različitom rezolucijom, u prozorima različite veličine.

upišite sljedeći tekst na praznu stranicu (u Design ili Split načinu prikaza): Moja prva web-stranica Ovo je moja prva web-stranica. Ovo je odlomak s običnim tekstom. Podnaslov Ovo je odlomak ispod prvog podnaslova. Još jedan podnaslov Ovo je odlomak ispod drugog podnaslova.

uočite da FrontPage odvaja odlomke dvostrukim proredom – ako to želite izbjeći, 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 (možete ostaviti predloženi naziv ili zadati svoj, ali bez razmaka, interpunkcija i „naših“ slova);

pogledajte izgled Vaše prve stranice iz web-preglednika (File->Preview in Browser, potom odabir preglednika);

zadajte sljedeća 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. Uočite 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 može se (u krajnjoj nuždi) koristiti i Word. Otvorite Word-

dokument 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 nešto 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 neće svakome izgledati jednako!!!

nije pametno potcrtavati tekst jer će korisnik misliti da bi to trebao biti link.

Vježba 2: Poveznice, liste U ovoj ćemo vježbi izraditi jednostavnu web-stranicu koristeći 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.

Uočite da oblikovanja nisu lijepa – poslije ćemo naučiti 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 građevinskih strojeva. Uočite kako FrontPage radi tzv. „tiling“, tj. lijepi sliku poput keramičkih pločica. Vrlo će rijetko stranica s pozadinskom fotografijom izgledati lijepo (čak i u primjeni posebnih pozadina, o kojima će više biti riječi kasnije, treba biti jako umjeren);

promijenite pozadinu stranice u neku jednoliku boju. Uočite promjene u HTML-kodu (tag <bgcolor> na početku tijela stranice;

umetnite poveznice (hyperlinks) unutar dokumenta na pojedinu vrstu strojeva: najprije označite naslov (npr. Jaružala) i umetnite knjižnu oznaku (Insert->Bookmark), potom označite odgovarajući redak u nabrajanju na početku stranice i postavite odgovarajuću poveznicu pomoću Insert->Hyperlink->Place in this document;

za barem dvije kategorije strojeva postavite poveznicu kojom se korisnik može vratiti na vrh stranice (dodajte redak u kojem ćete napisati „Povratak na vrh stranice“, potom na već opisani način postavite poveznicu na vrh);

u nabrajanju jaružala postavit ćemo tzv. collapsible bullets, tj. pod-kategorije čiji se prikaz dvoklikom može „paliti i gasiti“: odaberite treći, četvrti i peti redak, dvaput kliknite na Increase Indent ikonu (ili na tabulator) i tako ih uvucite na sljedeću razinu nabrajanja. Potom odaberite cijelo nabrajanje i u Format->Bullets and Numbering postavite „Enable collapsible outlines“ – po volji odaberite želiti li inicijalni prikaz niže razine nabrajanja ili ne. Uočite da se ova lista ispravno vidi tek u pregledniku (i to tek nakon što se omogući tzv. Active Content), a ne i u Preview-prikazu (gdje Frontpage prijavljuje pogrešku);

dodajte redak „Izvor: www.gradst.hr“ neposredno ispod naslova stranice. Uočite da je FrontPage automatski pretvorio adresu fakultetskih mrežnih stranica u valjanu poveznicu;

postavite parametre poveznice za otvaranje fakultetskih mrežnih 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“. Uočite da je FrontPage automatski pretvorio adresu u tzv. „mailto-poveznicu“; ako to želite sami napraviti, možete pomoću Insert->Hyperlink->E-mail address;

između svake svije vrste strojeva ubacite vodoravnu crtu (Insert->Horizontal Line), potom dvoklikom na crtu razmotrite koja joj svojstva možete zadati;

spremite ovako oblikovanu stranicu.

Vježba 3: Tablice U ovoj ćemo vježbi razmotriti uporabu tablica u FrontPageu, a posebno sličnosti 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 (slično kao u Wordu, ili

Table->Insert->Table); uočite kako se tablica ponaša pri promjeni veličine prozora (širine stupaca se prilagođavaju

prikazu cijele tablice unutar prozora); upišite u ćelije prvog retka tablice nekoliko redaka teksta (možete kopirati i nalijepiti neki od

odlomaka sa stranice). Uočite ponašanje širina stupaca: dok upisujemo sadržaj jedne ćelije, njezin stupac se širi na račun preostalih, praznih. Tek kad se u svakom stupcu nalazi više od jednog retka teksta, stupci imaju početnu (jednaku) širinu.

uočite i uspravno (vertikalno) ravnanje sadržaja ćelija (u situaciji kad je sadržaj ćelija u istom retku nejednake visine) – sadržaj može biti poravnat uz vrh, sredinu ili dno ćelije;

otvorite dijalog Table->Table Properties->Table. U ovom dijalogu redom: postavite tablicu najprije na (relativnu) veličinu od 75%, potom na centrirano ravnanje.

Razmotrite djelovanje ovog oblikovanja i ponašanje tablice pri unosu/brisanju sadržaja ćelija („samostalno“ mijenjanje širine stupaca da bi sadržaj bio podjednake visine), kao i pri promjeni veličine prozora;

potom postavite tablicu na širinu 800 pixela. Stupci i dalje mijenjaju širinu pri promjeni sadržaja ćelija, ali se tablica više ne prilagođava veličini prozora;

razmotrite djelovanje vrijednosti za razmak sadržaja od ruba ćelije (Cell Padding) i međusobnog razmaka ćelija u tablici (Cell Spacing): postavite redom jednu pa drugu vrijednost na 10 i razmotrite ponašanje tablice;

ponovite promjene navedenih vrijednosti s označenom Collapse table border opcijom (koja uklanja unutrašnje obrube tablice);

razmotrite ponašanje tablice pri različitim 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;

konačno, postavite blijedožutu boju kao pozadionu tablici. otvorite dijalog Table->Table Properties->Cell. U ovom dijalogu redom razmotrite:

opcije vodoravnog i uspravnog poravnavanja sadržaja (Horizontal/Vertical Alignment); mogućnosti zadavanja obruba samo za odabrane ćelije; mogućnost zadavanja relativne (u postotcima), odnosno apsolutne (u pixelima) širine

stupaca. mogućnost zadavanja boje u pozadini različite od boje zadane za cijelu tablicu; opcije i mogućnosti primjene Tables alatnice (desni klik u područje alatnica, potom

aktiviranje prikaza Tables-alatnice). Pri tom nemojte koristiti opcije vezane uz tzv. Layout-table (ove ćemo tablice i pridružene opcije upoznati kasnije).

Spremite izmijenjenu stranicu (ne morate zatvarati FrontPage).

Vježba 4: Umetanje slika U ovoj ćemo vježbi razmotriti postupak i mogućnosti umetanja slika na našu web-stranicu. ukoliko nije otvorena, otvorite datoteku strojevi.htm; umetnite na odgovarajuća mjesta na stranici po jednu sliku dozera, grejdera i jaružala

(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 položaja slike na stranici (Layout); mogućnosti zadavanja obruba slike (Border Thickness); mogućnosti 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 veličinu slike i uočite dijalog u kojem vam se nudi (preporučljiva) opcija

Resample, tj. stvaranje nove verzije slike koja će imati željenu veličinu (u protivnom će korisnici neovisno o smanjenom prikazu učitavati 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 mrežne stranice. Postupak je isti kao i za bilo koji drugi element stranice: odabir i potom zadavanje poveznice;

na kraj dokumenta učitajte sliku Hot spots.gif. smanjite je na 800 pixela širine, potom pomoću odgovarajućih ikona Pictures alatnice načinite nekoliko „hot spots“, tj. nepravilnih područja kojima ćete pridružiti poveznice po vlastitom izboru;

spremite stranicu. Razmotrite upit o odredišnom folderu u koji FrontPage želi spremiti sve slike. Upamtite: html-datoteka ne sadrži slike! Sve slike su „vanjski objekti“ koji se moraju prebaciti na server (u protivnom se neće prikazivati pri gledaju stranice);

Vježba 5: Stilovi (uvod) U ovoj ćemo vježbi razmotriti osnove zadavanja svojstava stilovima. ukoliko nije otvorena, otvorite datoteku strojevi.htm; uočite da se na stranici koriste stilovi Normal, Heading1, Heading2 i Bulleted List, kojima su

redom pridruženi html-tagovi <p>, <h1>, <h2> i <li>. Poznavanje tagova važno je jer ćemo u osnovi preoblikovati njih;

otvorite dijalog za oblikovanje stilova (Format->Style), prikažite listu html-tagova i redom oblikujte tagove koji se koriste na stranici;

uočite razne mjerne jedinice (pixel, točka, milimetar, inch) kojima se može iskazati veličina fonta;

zadajte novi stil mojstil, definirajte mu svojstva i primijenite ga na nekoliko odlomaka u tekstu.

Vježba 6: Uspostava Web-sitea U ovoj ćemo vježbi uspostaviti jednostavni web-site. želimo uspostaviti Web site o građevinskim strojevima. Naš site će imati sljedeću topologiju:

Naslovna stranica Strojevi za zemljane radove Foto-galerija

Jaružala Dozeri pokrenite FrontPage, potom pokrenite uspostavu novog web-sitea (File->New->One page

Web site); VAŽNO! Zbog specifične instalacije na fakultetskim računalima, važno je odmah kao

"location of Web site" zadati neki folder na disku D, u protivnom nećete moći spremiti Vaš web site (Browse, potom pokažite na folder u kojeg ćete spremati Vaš site);

uočite različite poglede, tj. načine na koje možemo promatrati naš Web-site; prikažite site u Navigation-pogledu. Postupno uspostavite hijerarhiju stranica (desni klik na

postojeću stranicu, New->Page, potom odmah desni klik na naziv nove stranice i zadavanje "pravog" imena. Pri zadavanju imena nemojte koristiti "naša" 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 priključiti Web-siteu: dodajte novu stranicu (File->New->More Page templates, potom odabir Photo Gallery predloška);

dvokliknite na galeriju, dodajte slike građevinskih strojeva, za slike zadajte "Caption" i "Description", potom razmotrite različite gotove predloške galerija (Layout rubrika dijaloga), ako i ostale opcije koje Vam nudi predložek foto-galerije;

spremite stranicu (File->Save As) kao galerija. Pri upitu o odredištu gdje će biti pohranjene slike, odaberite folder images;

u Navigation pogledu na site dodajte stranicu galerija u topologiju Vašeg 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 "ručno", ili u kodu napravite globalnu zamjenu niza <br> nizom </p><p>;

na svaku stranicu postavite po dvije fotografije strojeva. Fotografije trebaju biti jednake veličine i u istom retku (primijenite tablicu za raspoređivanje). Po želji postavite prikaz umanjene verzije (Auto Thumbnail);

na svaku od stranica dodat ćemo navigacijsku ploču (Link Bar), tj automatski prikaz poveznica na ostale stranice našeg 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 jaružalima i dozerima dodajte još jednu navigacijsku ploču koja će omogućiti pristup "bratskim" susjednim stranicama (stranicama iste hijerarhijske razine);

na dnu početne stranice dodajte navigacijsku ploču s 4 proizvoljno zadane poveznice (Bar with custom links). Pronađite odgovarajuće poveznice pomoću Googlea, ključna riječ "construction equipment" ili "construction equipment manufacturers";

na dnu glavne stranice dodat ćemo podatak o tome kada je stranica posljednji put ažurirana (Insert->Date and Time, potom odabir opcija prikaza);

spremite sve stranice i pogledajte ih iz preglednika.

Vježba 7: Objavljivanje (publishing) Web sitea U ovoj vježbi ćemo Web site izrađen u prethodnoj vježbi objaviti na fakultetskom serveru, i time ga načiniti dostupnim svim korisnicima Interneta. Zbog specifične instalacije na fakultetskom serveru, najprije ćemo preimenovati početnu

stranicu i index.html (dakle, promijenit ćemo joj ekstenziju iz .htm u .html); prikažite 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 upišite korisničko ime i zaporku koju ćete dobiti na vježbama; razmotrite izgled ekrana, tj. prikaz sličan prozorima Windows Explorera; prije prvog objavljivanja Web-sitea, pobrišite 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 učinili

Vaš site dostupnim svim korisnicima Interneta; promijenite bilo što na nekoj od stranica i spremite izmijenjenu stranicu, potom uočite kako

FrontPage "prepoznaje" promjenu u odnosu na istu stranicu na serveru. Izmijenjenu stranicu možete kopirati samostalno, a možete i ponoviti objavu cijelog Web-sitea.

Vježba 8: Korištenje tema U ovoj ćemo vježbi na Web-site uspostavljen u Vježbi 6 primijeniti gotove FrontPageove teme, koje ćemo potom prilagođavati 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". Uočite učinak na sve stranice;

dodajte na vrhu stranice zaglavlje stranice ( Page Banner). To smo mogli učiniti i prije primjene teme, ali je u tom slučaju zaglavlje neatraktivno;

pokrenite prilagodbu teme (klik na strjelicu uz naziv teme, potom Customize). Na početku, pohranite temu pod nekim drugim nazivom (FrontPage ne dopušta spremanje njegovih tema pod istim imenom);

razmotrite "filozofiju" određivanja elemenata teme: zasebno određivanje parametara za boje (Colors), parametara grafičkih elemenata (Graphics) i parametara teksta (Text). Pogotovo uočite brojne stilove teksta koji su definirani unutar teme. Unutar svake od ovih rubrika pogledajte ponuđene elemente za promjenu, i promijenite/prilagodite neke od njih;

u jednoj od sljedećih vježbi 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 grafičke elemente i zadajte ih kao dio Vaše teme (po mogućnosti, elemente navigacije kako biste vidjeli njihovo funkcioniranje);

objavite izmijenjenu verziju sitea.

Vježba 9: Layout-tablice U ovoj ćemo vježbi razmotriti izradu Layout-tablica koje ćemo poslije koristiti za određivanje općeg 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 ponuđenih predložaka (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 neće dopustiti

zadavanje veće širine, jer trenutno nema mjesta (tablica je široka 800, desna ćelija zauzima 450);

postavite širinu donje lijeve ćelije na 175; u "praznom stupcu" (sivo označeno područje 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:

Vježba 10: Korištenje Dynamic Web Templatea U ovoj ćemo vježbi objediniti sve naučeno o FrontPageu u Web-site koji ćemo uspostaviti korištenjem predloška (Dynamic Web Templatea) koji će nam omogućiti zadavanje jednoobraznog sadržaja svih stranica. Još jednom ponovimo: korištenjem teme definiramo jednoobrazni izgled elemenata našeg Web-sitea, korištenjem predloška definiramo jednoobrazni sadržaj stranica, tj. na jednom mjestu određujemo elemente koji će se pojavljivati na svim stranicama. prije nego što počnemo s izradom predloška, treba sliku "Suma" svesti na 780x100 pixela i

eksportirati u GIF; izradite Layout-tablicu koja će nam biti "kostur" svih stranica: krenite od predloška "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 upišite "Zadnja promjena" i umetnite automatski prikaz datuma zadnje

promjene; definirajte "promjenjiva područja", tj. područja u kojima će se na svakoj stranici moći

upisivati različit sadržaj (Format->Dynamic Web template->Manage editable Regions): u središnju ćeliju postavite područje "Tekst", u ćeliju desno od nje postavite područje "Slike";

postavite u lijevi stupac vertikalnu, a u donji redak horizontalnu navigaciju. Vertikalna mora omogućiti povezivanje s "nižim" stranicama i povratak na početnu, a horizontalna međusobno povezivanje "nižih" stranica;

u navigacijskom prikazu web-sitea, ispod početne stranice dodajte još 4 stranice: Životinjski svijet Biljni svijet Kako do nas? Foto-galerija

pridružite predložak ovim stranicama (Format->Dynamic Web template->Attach Dynamic Web Template, potom zadavanje predloška 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, veličinu 24,

bijelu boju i desno ravnanje); horizontalnu navigaciju + font (iskoristite slike iz Buttons foldera) vertikalnu navigaciju + font (iskoristite slike iz Buttons foldera)

ubacite sadržaj 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; načinite izmjenu u banneru: uočite da desno poravnati tekst opoprilično "visi" na desnom

rubu prozora; zbog toga ćemo redom: sliku "Suma" razbiti na dva dijela: lijevi, veličine 400x100 pixela, i desni, veličine

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 učitati lijevi dio slike; u temi promijeniti banner na desnu sliku i lijevo ravnanje teksta; u desnu ćeliju postaviti izmijenjeni banner;

objavite izmijenjenu, konačnu verziju web-sitea.

Samostalna vježba: Web-stranice Kao provjeru usvojenih elementarnih znanja u izradi Web-stranica u FrontPageu, izradite 3 stranice (glavnu i dvije podstranice) o nekom Vašem hobiju. Materijale (tekst, slike) preuzmite s postojećih mrežnih stranica. Kod Copy/Pasteanja teksta, odaberite opciju "Keep Text only", potom "ručno" promijenite Line Breaks u Paragraph Breaks. Izrađene web-stranice trebaju sadržavati: izmijenjeni naslov, tj. tekst koji će se prikazivati na vrhu stranice pri pregledu; boju pozadine; poveznice s "glavne" na dvije pomoćne i s pomoćnih na glavnu; dvije poveznice prema "vanjskim" mrežnim 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 različite

kombinacije obruba, različita vodoravna i uspravna oblikovanja; ubačene slike s različitim opcijama ovijanja teksta; barem jednu sliku s iskorištenom AutoThumbnail opcijom; po jednu vodoravnu crtu.

Samostalna vježba: Web-stranice Kao provjeru usvojenih elementarnih znanja u izradi Web-stranica u FrontPageu, izradite 3 stranice (glavnu i dvije podstranice) o nekom Vašem hobiju. Materijale (tekst, slike) preuzmite s postojećih mrežnih stranica. Kod Copy/Pasteanja teksta, odaberite opciju "Keep Text only", potom "ručno" promijenite Line Breaks u Paragraph Breaks. Izrađene web-stranice trebaju sadržavati: izmijenjeni naslov, tj. tekst koji će se prikazivati na vrhu stranice pri pregledu; boju pozadine; poveznice s "glavne" na dvije pomoćne i s pomoćnih na glavnu; dvije poveznice prema "vanjskim" mrežnim 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 različite

kombinacije obruba, različita vodoravna i uspravna oblikovanja; ubačene slike s različitim opcijama ovijanja teksta; barem jednu sliku s iskorištenom AutoThumbnail opcijom; po jednu vodoravnu crtu.