Hvordan lage et nettsted i MS FrontPage

Kursleksjonen er forfatteren sin eiendom. Som kursdeltaker kan du fritt bruke leksjonen til eget, personlig bruk. Kursdeltakere som ønsker å bruke leksjonene f.eks. til undervisning eller kurs, må ta direkte kontakt med forfatter for nærmere avtale. Copyright: Elen Instefjord, 2003

Utskrift: 14 sider

Innhold

I denne leksjonen skal vi gå gjennom prosessen med å lage et enkelt nettsted ved hjelp av MS FrontPage. Alle eksemplene er utarbeidet i MS FrontPage 2002, men tidligere utgaver av MS FrontPage kan også benyttes.

Før du starter arbeidet med selve programmet, må du tenke gjennom hvordan du vil at nettstedet ditt skal se ut. Start med å tegne en skisse på papiret slik at du har et utgangpunkt for hvordan du vil sette det opp på skjermen:

Til sammen vil jeg at fremsiden min skal utgjøre ett skjermbilde. For å sette siden opp på denne måten, ønsker jeg å benytte en tabell.

Oppstart av MS Front Page

Velg Startknappen, Alle Programmer og Microsoft FrontPage:

MS FrontPage blir nå åpnet, og vi skal se litt på de ulike verktøylinjene i dette programmet.

De to øverste verktøylinjene, Standard og Formatering, er linjer som vi nok kjenner igjen fra andre Microsoft programmer, for eksempel fra MS Word. Jeg vil derfor ikke si så mye om disse linjene, annet enn å påpeke at på Standard verktøylinjen finner vi knappen for å sette inn en hyperkopling.

Ved å klikke på denne knappen kan vi sette inn følgende hyperkoplingstyper:

1. Hyperkoling til en eksisterende fil eller web-side (som vi har laget selv, eller som andre har laget - intern eller ekstern lenke)
2. Hyperkopling til et annet sted i dokumentet (Bokmerke eller intralenke)
3. Hyperkopling som sender e-post

På venstre side av skjermen finner vi en rekke "visninger". Vi skal bruke den øverste av disse, den som viser en side. De andre kommer vi ikke til å benytte nå. For å få benytte disse må vi ha tilgang til øverste nivå på tjenermaskinen vi arbeider mot, og de av oss som arbeider mot HSH sin tjenermaskin mangler dessverre disse rettighetene. 

På høyre side av skjermen får vi opp en meny som vi ikke trenger å bry oss om inntil videre. Denne kan vi derfor lukke igjen ved å klikke på det nederste krysset på høyre side - krysset ved siden av teksten "Ny side eller nytt Web...". Vi har da ryddet litt på arbeidsområdet, og er klar til å sette i gang med å lage den første nettsiden vår.

Helt nederst på skjermen finner vi knappene for Normalvisning, HTML-visning eller Forhåndsvisning. Klikk på knappene for å se forskjellen.

Innsetting av tabell

Som nevnt tidligere, ønsker jeg å bruke en tabell på siden min. Tabellen skal hjelpe meg med å få plassere tekst og bilder slik jeg selv ønsker det, og bidra til å øke min kontroll over visningen av siden min.

Jeg plasserer skrivemerket øverst på skjermen, og velger "Tabell", og "Sett inn tabell". Jeg får da opp følgende dialogboks:

Først definerer jeg hvor stor tabellen skal være, dvs. hvor mange rader (vannrett) og hvor mange kolonner (loddrett) jeg vil ha. Jeg velger å sette inn en tabell som består av tre rader og to kolonner. Justeringen for tabellen setter jeg til midtstilt, og kantlinjestørrelsen setter jeg ned til null. Dette gjør jeg fordi jeg ikke vil ha en synlig tabell på siden min, jeg vil bare ha en tabell som kan fungere som støttelinjer for objektene jeg vil sette inn.

I tillegg må jeg bestemme hvor bred selve tabellen min skal være. Her kan jeg velge om jeg vil at tabellen skal utgjøre en viss prosent av skjermbildet, eller om den skal få en eksakt størrelse. Jeg velger å sette bredden til å være et eksakt tall slik at den blir vist på noen lunde samme måte uansett hvilken skjerm den skal vises på.

Jeg velger videre å angi at disse tallene "skal brukes som standard for nye tabeller", slik at jeg slipper å gjøre de samme endringene for hver ny side jeg vil lage. Klikk OK for å gå videre!

Har du gjort alt rett, skal skjermen din nå se slik ut:

Tabellens celler skal altså fungere som et "ruteark", og vi skal plassere alt innholdet vårt innenfor tabellens rammer.

På skjermbildet over ser du kanskje at det vises noen "rare tegn" som ikke vises hos deg? Disse tegnene er synlige fordi jeg har klikket på knappen "Vis Alt" på Standard-verktøylinjen. Det kan være praktisk å klikke på denne slik at vi får se størrelsen på avsnitt etc.

Slå sammen celler

Utifra skissen jeg laget meg før jeg startet arbeidet i FrontPage, har jeg bestemt at jeg vil ha overskriften min liggende midtstilt over hele tabellens bredde. Nå skal vi starte med å skrive overskrift på siden. For å få til dette, må jeg slå sammen cellene i den øverste raden. Jeg markerer hele den øverste raden ved å trykke ned venstre musetast og dra musepekeren over hele raden. Jeg slipper tasten når raden er markert. Deretter høyreklikker jeg innenfor det markerte området. Jeg får da frem følgende meny:

Fra menyen som kommer frem, velger jeg "Slå sammen celler". De to cellene jeg markerte blir da slått sammen til en, stor celle.

Jeg plasserer så skrivemerket i cellen, og skriver inn overskriften min. Når jeg begynner å skrive, plasserer teksten seg automatisk i venstre hjørne av cellen jeg skriver i.

Teksten jeg har skrevet inn blir automatisk skrevet med den skrifttypen som er satt som standardskrift i programmet. I mitt program er dette Times New Roman. Times New Roman er nok den skrifttypen vi kjenner best fra aviser og lærebøker, og er en skrifttype som egner seg svært godt til lesing på papir. Men ettersom nettsiden vår først og fremst skal leses fra skjermen, er det andre skrifttyper som egner seg bedre her. Å lese fra skjermen er en anstrengende prosess for øynene våre, og dette bør vi ta hensyn til i valg av skrifttype og skriftfarge. Det finnes spesielle skrifttyper som er spesielt utviklet for å lese på skjerm. Følgende skrifttyper egner seg til bruk på nettsider:

• Verdana
• Arial
• Comic Sans 
• Tahoma
• Trebuchet

Legg merke til at størrelsen på noen av disse skrifttypene er noe større enn det en er vant med fra Times New Roman, så det kan lønne seg å gå ned en størrelse på skriften. 

For å endre skrifttype og skriftstørrelse på teksten jeg har skrevet inn, markerer jeg teksten. Deretter velger jeg skriftstørrelse og skrifttype som vist under. På mitt nettsted ønsker jeg å bruke skrifttypen Verdana, og overskriften vil jeg ha i skriftstørrelse 24.

Det neste jeg vil gjøre er å skrive inn en liten innledning om meg selv. Det er ikke nødvendig å skrive så mye på et nettsted, men en setning eller to som sier litt om hvem jeg er og hva som er hensikten med dette nettstedet bør vi ta med.

Tabellen som jeg satte inn til og begynne med hadde to rader og to kolonner. jeg ønsker nå å plassere teksten i raden under overskriften min, og i høyre kolonne. den venstre kolonnen lar jeg stå tom inntil videre slik at jeg har plass til bildet mitt senere. Plasser skrivemerket ønsket celle, og skriv inn noen setninger om deg selv. Det er meget sannsynlig at skrifttypen nå er gått tilbake til Times New Roman. Dersom det er tilfelle, slik som hos meg, må du nå endre skrifttypen enda en gang. Marker skriften, og velg ønsket skrifttype og skriftstørrelse. Forsøk å ikke bruke altfor mange ulike skrittyper på en side, og hold deg til de mest vanlige skrifttypene. Jeg velger å fortsette med samme skrift som tidligere, og setter skriftstørrelsen til 10.

Lagring

Vi er nå kommet så langt med den første nettsiden vår at det er på tide å lagre arbeidet vi har gjort så langt. Her vil vi nok møte litt forskjellige ting!

Alle interne studenter ved HSH har tilgang til to forskjellige lagringsområder; H og W. H er studentens private lagringsområde og er kun synlig for den studenten. W er studentens vindu mot verden. Alt som lagres på W legges direkte ut på Internett og kan leses av alle som ønsker det. Når vi jobber på en av maskinene i HSH sitt nettverk, foregår lagringen på følgende måte:

1. Velg "Fil" - "Lagre som"
2. Finn frem til w-området ditt i "Lagre i:" feltet (som vist under)
3. Pass på at du ikke legger filen inn i en av mappene, men lar den ligge rett på W. Mappen som heter "Privat" er passordbeskyttet, og bare du har tilgang til den.

For studenter som ikke har direkte tilgang til HSH sin tjenermaskin, finnes det forskjellige steder en kan lagre filen. Som nevnt i leksjon 01, finnes det en rekke firma som tilbyr såkalte web-hotell hvor en kan legge ut nettsidene sine. Noen av disse er dyre å bruke, andre kan benyttes gratis. Uansett hvor du velger å legge ut filen din senere, må du først lagre filen lokalt på din datamaskin (gjelder altså ikke fra HSH sine maskiner, se over). Lag en ny mappe hvor du lagrer alle filene du ønsker å ha med på nettområdet ditt, både bildefiler og nettsider.

Når filen vår skal lagres, er det viktig at vi velger riktig filnavn. Ettersom siden jeg holder på å lage er fremsiden min, vil jeg at denne skal lastes automatisk når noen går inn i min web-mappe. Forsiden til nettområdet mitt må ha et spesielt filnavn for at dette skal skje. Dersom du jobber mot HSH sin server er dette index.htm, men etternavnet kan variere fra server til server. Noen servere bruker etternavnet .html, mens vi her altså har .htm som etternavn.

Sidens tittel er det som blir liggende øverst i nettleser vinduet, og dersom vi ønsker å legge til adressen til nettsiden vår i favorittmappen til nettleseren, er det denne teksten som vises der. Teksten vi skriver her trenger ikke å være det samme som filnavnet. Her legger vi inn noe som er informativt om vår nettside.

Når vi har bestemt hvor filen skal lagres og gitt den et filnavn, klikker vi på lagre knappen.

Det neste vi skal gjøre er å sette inn et bilde på siden. For de som har jobbet litt med Word, skal ikke dette være ukjent.

Det er imidlertid en viktig forskjell mellom Word og FrontPage når det gjelder innsetting av bilder, og det har å gjøre med bildets opprinnelige plassering. Når vi setter inn et bilde i et Word dokument, er det likegyldig hvor på datamaskinen bildet vårt ligger lagret eller hvilket bildeformat bildet har, for bildet vil uansett bli "bakt inn i" dokumentet. Vi kan slette bildefilen fra sitt opprinnelige sted, og bildet er fortsatt synlig i word-dokumentet.

Slik er det IKKE i FrontPage. Når du setter inn et bilde på en nettside blir ikke bildefilen innbakt i dokumentet. Bildefilen blir bare koplet sammen med HTML-filen, og vi har fremdeles to separate filer. Bildefilen må altså ikke slettes, den må være til stede sammen med HTML-filen. Når vi skal sette inn et bilde på en nettside må bildefilen derfor:

1. ligge lagret på samme web-område som nettsiden (HTML-filen)
2. ha grafikkformatet GIF, JPG eller PNG (GIF og JPG er mest vanlig)
3. ha et gyldig filnavn (unngå altfor lange navn med mellomrom eller æ - ø - å), og filnavnet må slutte med .gif, .jpg eller .png

For å sette inn et bilde velger plasserer du skrivemerket der du ønsker at bildet skal stå, og velger så "Sett inn" - "Bilde" - "Fra fil".

Bla gjennom for å finne bildet du vil bruke. Husk at bildet må ligge lagret i samme web-mappe som nettsiden. Klikk "Sett inn" for å sette inn bildet ditt.

Dersom bildet ditt er fryktelig stort, bør du endre størrelsen på bildet i et bildebehandlingsprogram før du setter det inn på nettsiden din. Dersom vi legger inn store bilder, vil filen ta svært lang tid å laste i nettleseren. Det hjelper ikke å forminske bildet i FrontPage, for bildefilen vil likevel beholde størrelsen.

Vi begynner nå å få en fin nettside, men jeg synes det hele kan trenge litt mer luft. Jeg vil gjerne ha inn litt luft mellom raden som inneholder overskriften min, og raden som hovedinnholdet mitt ligger i. Dette kan vi gjøre på to forkskjellige måter. Vi kan enten bruke Enter-tasten til å lage litt luft, eller vi kan sette inn en ny, tom rad i tabellen vår. Jeg velger å bruke den siste løsningen.

Høyreklikk i cellen hvor teksten er plassert, og velg "Sett inn rader" i menyen som kommer frem:

I den nederst raden min skriver jeg inn teksten som senere skal gjøres om til lenker, og under lenkene vil jeg ha inn enda en rad. For å få inn en rad under en annen rad, plasserer jeg skrivemerket i den nederste raden, og velger "Tabell" - "Sett inn" - "Rader eller kolonner".

Jeg får da opp følgende dialogboks:

Jeg velger her at jeg vil sette inn en rad, og velger at plasseringen skal være under merket område.

Klikk OK når du har gjort dine valg.

Sett inn dato

Den nye raden jeg satte inn, ønsker jeg å bruke til å sette inn dato på siden min. Dette gjør jeg fordi jeg vil at de som er inne og leser på siden min skal få vite om informasjonen er oppdatert eller gammel. Vi bør legge inn dato på alle sidene på nettstedet vårt, ikke bare på fremsiden. Jeg ønsker å midtstille datoen over hele radens bredde, og jeg velger derfor å slå sammen cellene i den nederste raden også, slik som jeg gjorde med raden hvor jeg plasserte overskriften min (se i begynnelsen av denne oppskriften).

For å slippe å huske å endre datoen hver gang vi gjør en endring på siden vår, finnes det en spesiell funksjon i FrontPage som vi kan benytte. Skriv inn teksten "Siden ble sist oppdatert " i den nederste raden, og plasser skrivemerket der som datoen skal settes inn. Velg så "Sett inn" - " Dato og klokkeslett" som vist under:

Følgende dialogboks vil da komme opp på skjermen:

Vi ser at vi her har mulighet til å sette inn både dato og klokkeslett for når siden sist ble redigert eller automatisk oppdatert.

Vanligvis er det unødvendig å ta med klokkeslettet for når siden ble redigert. Jeg tror ikke de som besøker min side synes det er så viktig å vite om siden ble oppdatert den 27.januar klokken 12.00 eller 13.00, hvis ikke jeg oppdaterer siden svært ofte.

Klikk OK når du har gjort dine valg!

Opprette en "send e-post" lenke

I tillegg til dato for når siden sist ble oppdatert, bør hver side inneholde informasjon om hvem som har laget siden, og en e-post kopling til vedkommende, slik at besøkende kan sende tilbakemelding eller rapportere om eventuelle feil på siden. Jeg vil ha dette i nederste rad, sammen med datoen for når siden ble oppdatert:

Du får da opp en dialogboks. Klikk nederst til venstre der hvor det står "E-post adresse" slik at du får fram følgende dialogboks:

Skriv inn e-post adressen din i feltet "E-postadresse". Legg merke til at når du begynner å skrive, legger programmet automatisk inn en tekst i begynnelsen - "mailto:". Ikke fjern denne teksten, den skal være med!

Klikk OK når du har skrevet inn adressen din!

Da begynner det å bli bra, og nå er det bare et par småting jeg har lyst å endre på for å få det enda litt finere. Jeg har lyst å gjøre skriften i den nederste raden litt mindre tydelig ved å velge en annen skriftfarge på denne. I tillegg vil jeg gjøre den litt mindre.

Marker teksten og endre skriftstørrelsen til 8. Klikk så et annet sted på siden slik at markeringen forsvinner. Jeg ønsker videre å endre skriftfargen, men jeg vil ikke endre fargen på lenken min. Derfor markerer jeg denne gangen bare bort til navnet mitt, men tar ikke med navnet.

På verktøylinjen for Formatering, finner du knappen for å endre skriftfarge (se over). Klikk på den lille trekanten ved siden av A'en slik at du får opp flere farger. Velg en skriftfarge du synes passer her. Jeg har valgt en lys, grå farge, den som får etiketten "Sølv" når jeg holder musepekeren over den.

Lagre nettsiden din slik at du får med de siste endringene vi har gjort. Velg "Fil" - "Lagre", eller klikk på hurtiglagringsknappen - knappen som ser ut som en diskett.

Vi har nå laget et nettsted som består av en side. Vi har laget en tabell, satt inn et bilde, endret størrelsen på tabellen, og laget en lenke som sender e-post. Jeg har valgt å beholde fargene som det er, men dette kan vi endre slik vi selv ønsker det. Bakgrunnsfargen på siden kan du endre ved å velge "Format" - "Bakgrunn". Her kan du også gjøre endringer som gjelder skriftfarge og lenkefarge.

I tillegg har vi laget klart til å kople denne siden sammen med andre sider. Men enda har vi ikke laget de sidene som denne skal koples sammen med. Det er det neste som må gjøres. Klikk på den hvite knappen rett under "Fil" - første knapp på Standard-verktøylinjen, slik at du får opp en ny fil. Lag en ny nettside utifra det vi har jobbet med i denne oppskriften, og lagre filen i samme mappe som du lagret hovedsiden din. Pass på at du gir den nye filen et nytt navn slik at du ikke overskriver den vi laget tidligere.

Når sidene er laget kan vi enkelt kople dem sammen ved å markere ordet på denne siden som skal vi se til neste side, for eksempel "Hjemstedet mitt" (nederst på siden min).

I dialogboksen som kommer opp, velger vi "Eksisterende fil eller Web-side" øverst til venstre. Skriv så inn filnavnet til siden den skal koples med, for eksempel hjemsted.htm.

Klikk OK, og du vil se at du har fått en lenke på siden din.

Dette har vært en kort innføring i bruk av MS FrontPage. Jeg regner med at det fortsatt er en del ting som er uklart, og da vil jeg be dere om å legge ut spørsmål på Fronter, så skal jeg forsøke å svare så godt jeg kan!

Mitt nettsted ser nå slik ut når jeg viser det i Internet Explorer:

Lykke til med arbeidet med nettsidene!

[Til toppen]

Sist oppdatert 23. oktober 2003 av Elen Instefjord