Izrada i objavljivanje web stranica pomoću FrontPagea

Microsoft FrontPage

Microsoft FrontPage

• Microsoft FrontPage 2003 je aplikacija za izradu web sjedišta. Njena je velika prednost jednostavnost sučelja i sličnost s aplikacijama Microsoft Office paketa, što većini korisnika znatno olakšava rad i smanjuje vrijeme potrebno za učenje korištenja programa.

Osim Microsoft FrontPagea, za izradu i objavljivanje web sjedišta potrebni su nam i web preglednik (npr. Internet Explorer) te program za uređivanje slika (npr. Photoshop). Alma

Osnovni pojmovi

• •

Klijent

je program ili računalo koje zahtijeva neke usluge.

Web preglednik

je klijentski program koji s poslužitelja dohvaća i prikazuje web stranice i slične sadržaje. Trenutačno najpoznatiji web preglednici su Internet Explorer, Firefox, Opera, Netscape. Alma

Osnovni pojmovi

•

Poslužitelj

je program ili računalo koje upravlja podacima. Komunikacija između poslužitelja i klijenta obavlja se prema točno određenim protokolima. •

HTTP (Hyper Text Transport Protocol)

protokol za komunikaciju između klijenta i web poslužitelja. je • Pri objavljivanju web stranica koristit ćete protokol namijenjen prijenosu datoteka,

FTP (File Transfer Protocol).

Alma

HTML

•

HTML je

kratica za

Language, HyperText Markup

opisni jezik za dokumente korištene na World Wide Webu. Definiraju se elementi web stranice, te se određuje kako stranica treba izgledati i kako se pojedini elementi moraju na stranici ponašati. • FrontPage omogućuje izradu web sjedišta bez neposrednog pisanja HTML kôda. Alma

Struktura web sjedišta

• Dokument pisan HTML-om zove se web stranica. Vlasnik ili autor skupine web stranica koje pokrivaju isto područje povezuje svoje stranice u hiperlinkovima u web sjedište. Na taj način se omogućava posjetiteljima upoznavanje sa cjelokupnim sadržajem. Početna stranica web sjedišta ima obično najjednostavniju adresu među svim stranicama sjedišta (npr. www.carnet.hr) i zove se

homepage

. Alma

Struktura web sjedišta

• Hijerarhijske strukture su se pokazale najpogodnijima za organizaciju složenih web sjedišta. S početne stranice je dostupan manji broj stranica, ali posjetom bilo kojoj od njih se otvara mogućnost posjete sljedećima. Alma

Sučelje programa Microsoft FrontPage

• Ulazak u program: FrontPage se otvara iz izbornika

Start

, zatim

Programs,

te potom iz grupe

Microsoft Office

treba izabrati

Microsoft FrontPage

.

• Sučelje FrontPagea slično je sučeljima Worda i Excela.

Alma

Stvaranje novih web sjedišta i stranica

• FrontPage omogućuje jednostavno stvaranje novih web sjedišta te dodavanje novih stranica u već stvorena web sjedišta.

• Stvaranje novih web sjedišta obavlja se na sljedeći način: 1. Odabere se

File >

New.

U desnom se dijelu ekrana otvara okno zadatka. Alma

Stvaranje novih web sjedišta i stranica

U oknu zadatka je moguće ( odabrati jednu od sljedećih opcija: • otvaranje nove stranice

New page

sjedišta ( ) • otvaranje novog web

New Web site

) • otvaranje postojećih predložaka za stranicu koje je moguće pronaći na Internetu. Alma

Stvaranje novih web sjedišta i stranica

Pri stvaranju novog web sjedišta (

New Web site

• izaberemo ) se nudi paleta predložaka web sjedišta.

One Page Web site.

Time se stvara datoteka

index.htm.

Ime je izabrano tako, da većina web poslužitelja, kad se u adresi ne upiše ime datoteke, otvara upravo tu datoteku. • . Alma

Stvaranje novih web sjedišta i stranica

• zatim treba u polju

Specify the location of the new web site

upisati ili izabrati mapu u kojoj će se nalaziti buduće web sjedište. Najbolje je da je to prazna mapa.

Poslije će se ime mape vidjeti na naslovnoj traci FrontPagea. Alma

Spremanje stranica

• Svaka pojedina stranica se može pohraniti putem izbornika

File > Save (Save As).

oba će se slučaja otvoriti prozor koji omogućuje: U • izbor mape spremanja dokumenta • izbor imena dokumenta • izbor tipa dokumenta. Alma

Otvaranje stranica

• Stranice se mogu otvoriti korištenjem izbornika,

File > Open,

ali i dvostrukim klikom na datoteku u popisu

Folder List

na lijevoj strani radnog prostora. Prikaz popisa datoteka se uključuje i isključuje s

View > Folder List.

Alma

Otvaranje web sjedišta

• Za nastavak rada na ranije stvorenom web sjedištu postupak je sljedeći: 1. Iz glavnog izbornika odabere se

File > Open Site.

2. U okviru prozora

Open Site

odabere se mapa koja sadrži željeno web sjedište.

3. Klikom na gumb

Open

Nakon toga se mogu otvarati njegove pojedinačne datoteke. se otvara web sjedište. Alma

Prikazi u FrontPageu

• FrontPage nudi prikaze orijentirane na različite sadržaje web sjedišta:

Page

– prikaz za uređivanje i pregled stranica • • • •

Folders

– prikazuje mape i datoteke trenutnog sjedišta

Reports

– omogućuje pregled informacija vezanih uz sjedište, kao što su broj dokumenata, slika, hiperlinkova, stanja hiperlinkova i sl.

Navigation

– daje hijerarhijski pregled svih stranica (ako je definiran)

Hyperlinks

– prikazuje hiperveze od pojedine stranice sjedišta prema drugim stranicama sjedišta i drugim sjedištima •

Tasks

– prikazuje zadatke (za nas ili za naše suradnike) zapisane uz pojedine web stranice. • Promjena prikaza obavlja se iz izbornika

View

odabirom odgovarajuće naredbe.

Alma

Prikaz stranice

• • • Unutar prikaza

Page

jahačima na dnu stranice se za potrebe većeg dijela ovog tečaja mogu izabrati prikazi:

Design

– za rad na stranici

Preview

– za prikaz stranice u obliku kao što će biti u prikazana pregledniku. Alma

Prikaz stranice

• U odnosu na

Preview

još je bolji izbor pogledati stranice u pravom web pregledniku. To je moguće postići s:

File > Preview in Browser

, te izborom preglednika i veličine prozora. Dobro je stranice pregledati u više raznih preglednika i više veličina prozora jer nikad ne znamo u kakvoj će okolini posjetitelji gledati naše stranice. Alma

Unos i oblikovanje teksta

• Unos teksta u FrontPageu relativno je jednostavan i sličan unosu teksta u drugim tekst procesorima, primjerice u Microsoft Wordu. Alma

Opća svojstva stranice i jezik Opća svojstva stranice i jezik

Svojstva stranice su dostupna iz izbornika

File

naredbom

Properties

.

• Opća svojstva stranice su dostupna na kartici

General

stranice, tekst koji će biti prikazan na naslovnoj traci web preglednika.

• Na istoj kartici su još i opis stranice,

Page description

. Tu je najvažnije upisati naslov , koji se prikazuje na listama rezultata tražilica, te ključne riječi,

keywords

, koje također služe tražilicama.

Alma

Opća svojstva stranice i jezik Opća svojstva stranice i jezik

• Na kartici

Languages

treba namjestiti i jezik. To utječe na provjeru pravopisa, ali se i prenosi kao podatak koji tražilicama ukazuje na upotrijebljeni jezik. • Na kartici

Languages

najvažniji podatak je

HTML encoding.

To omogućava ispravno prikazivanje znakova koji nisu uobičajeni u engleskoj abedeci (u našem slučaju to su č, ć, ž, š i đ). Trenutačno je uobičajeni izbor

Central European (ISO 8859-2)

. Alma

Postavljanje obojane pozadine

• Za postavljanje boje pozadine potrebno je: 1. Odabrati

Format > Background

.

2. Unutar polja

Background

željenu boju.

odabrati 3. Kliknuti

OK

. Alma

Postavljanje pozadinske slike

• Za postavljanje pozadinske slike postupak je sljedeći: 1. Odabrati

Format > Background

.

2. Unutar okvira

Page Properties

označiti polje

Background Picture

.

3. Kliknuti gumb

Browse

odabrati željenu sliku.

i 4. Za kraj kliknuti

OK

. Alma

Hiperveze na stranice drugog web sjedišta

Hiperveze se na stranicu drugog web sjedišta postavljaju ovako: 1. Označi se tekst ili slika koji će poslužiti kao hiperveza.

2. Odabere se

Insert > Hyperlink

.

3. U okviru

Insert Hyperlink

, u polje veza.

Address

upiše se adresa stranice s kojim se želi uspostaviti Treba paziti da se adresa napiše potpuno, s

http://

na početku.

4. Za kraj se klikne na

OK

. Alma

Hiperveze na stranice unutar web sjedišta

• Za postavljanje veza na stranicu unutar sjedišta, u prostor adrese je potrebno upisati naziv stranice sjedišta na koju se želi postaviti veza. Uz naziv treba eventualno dopisati i mapu u kojoj se nalazi.

Postupak se može pojednostavniti tako da se klikom iz ponuđenog popisa datoteka izabere željena. Alma

Postavljanje hiperveza na element iste stranice

Prvo treba označiti mjesto na kojem će se stranica otvoriti: 1. Mjesto koje se treba otvoriti klikom na link se označava s

Insert > Bookmark

.

2. Unutar okvira

Bookmark Name

treba upisati ime označenog teksta i kliknuti

OK

. Alma

Postavljanje hiperveza na element iste stranice

• Nakon označavanja mjesta treba postaviti hipervezu: • 1. Izabrati tekst koji će biti hiperlink te odabrati

Insert > Hyperlink

.

2. Unutar okvira

Hyperlink

potrebno je kliknuti

Bookmark

, izabrati oznaku koja će postati odredište veze i kliknuti

OK

.

3. Za kraj se klikne

OK

.

Alma

Tablice na web stranicama

• Tablice se u FrontPageu, kao i u drugim aplikacijama, koriste za prikazivanje tabelarnih podataka. Njihova još važnija funkcija na web stranicama se odnosi na dizajniranje. Tako se tablice koriste za raspoređivanje elemenata na web stranici (teksta, grafike i drugih objekata). Organiziranjem sadržaja u tablice, web stranica poprima izgled sličan stranici tiskanog časopisa. Alma

Umetanje i brisanje tablica

Za umetanje tablica na stranicu potrebno je: 1.

Kliknuti na mjesto na stranici na koje se želi unijeti tablica.

2.

Odabrati

Table > Insert > Table

. Otvara se dijaloški okvir

Insert Table

.

3.

U dijaloškom okviru

Insert Table

odabiru se sljedeće postavke: • broj redaka (

Rows

) • • • • broj stupaca (

Colums

poravnanje tablice ( )

Aligment

) debljina okvira (

Border size

) razmak od sadržaja do ruba ćelije (

Cell padding

) • • razmak između ćelija (

Cell spacing

širina u pikselima ili postocima. ) • Svojstva tablice se mogu mijenjati i naknadno.

4. Nakon izvršenog odabira potrebno je kliknuti

OK

.

Alma

Umetanje redaka i stupaca

• Umetanje novih redaka i stupaca tablice radi se ovako: 1. Kursor se postavi na mjesto u tablici na koje se želi umetnuti novi redak ili stupac.

2. Odabere se

Table > Insert > Rows or Columns

.

3. Za umetanje novih redova označi se klikom miša polje uz naziv Rows, a zatim odredi broj redova koji se žele unijeti. Za umetanje novih stupaca označi se mišem polje uz naziv Columns te odredi broj željenih stupaca..

4. Na kraju se odabir potvrdi klikom na

OK

. Alma

Zvuk na web stranicama

• Preporučljivo je koristiti Wave, MP3 i MIDI datoteke, jer će ih moći čuti većina posjetitelja stranica.

Zvuk na web stranci može biti postavljen na dva načina: • kao pozadinski zvuk koji se uključuje prilikom pregleda stranice • kao objekt na stranici. Alma

Zvuk na web stranicama

• • • • Postavljanje pozadinskog zvuka radi se na sljedeći način: 1. Odabere se

File

>

Properties.

2. U okviru

Page Properties

klikne se na polje

Location

te potom

Browse.

3. U okviru klikne

Open Background Sound

odabere se željena zvučna datoteka i .

4. Broj ponavljanja zvuka moguće je regulirati odabirom jedne od opcija:

Forever

zvuka - konstantno ponavljanje

Loop

ograničeno ponavljanje, treba odrediti broj ponavljanja. 5. Za kraj se klikne gumb

OK.

Alma

Zvuk na web stranicama

• Ubacivanje zvuka vezivanjem za gumb, koji se aktivira čim posjetitelj klikne na gumb, radi se na sljedeći način: 1. Na stranici je potrebno označiti mjesto na koje se želi postaviti gumb.

2. Zatim se odabere

Insert > Interactive Button

.

3. U okviru za dijalog

Interactive Buttons

se definira izgled gumba, tekst koji će se nalaziti na njemu i, najvažnije, link na datoteku sa zvučnim efektom. Alma

Umetanje video zapisa

• Postupak umetanja video zapisa je nalik na umetanje statične slike: 1. Kliknuti na mjesto na stranici na koje se želi umetnuti video zapis.

2. Odabrati

Insert > Picture > Video

.

3. U dijaloškom okviru Video odabrati željenu datoteku a zatim kliknuti

Open

. Alma

Teme

• Teme u Microsoft FrontPageu su idealne za usklađivanje shema boja, izgleda teksta i grafičkih elemenata na stranicama. • Na izabrane web stranice teme se primjenjuju odabirom

Format > Theme

liste , čime se otvara okno zadatka

Select a theme

.

Theme.

Željena tema se odabire klikom na njen prikaz unutar Alma

Prilagođavanje tema

Ako postojeće teme svojim izgledom u potpunosti ne udovoljavaju postavljenim zahtjevima, moguće je napraviti novu temu ili promijeniti postojeću: 1. Odabrati

Format > Theme

. Otvara se okno zadatka

Theme.

2a. Za novu temu treba unutar okna zadatka

Theme

kliknuti na

Create new theme.

Otvara se okvir

Customize Theme

.

2b. Ako želite promijeniti postojeću temu, kliknite na strelicu pokraj te teme, te odaberite

Customize

.

3. Okvir nudi opcije modifikacije boje, grafike i teksta. Nakon učinjene promjene boje, grafike i teksta za potvrdu je potrebno kliknuti

OK

. Alma

KRAJ Alma