Lage hjemmeside

med FrontPage Express

 

 

 

 

 

Innledning

FrontPage Express er en web-editor (html-editor) - et program til å skrive/lage hjemmesider med. Det følger med Microsoft Explorer (web-leseren) fra versjon 4 (og koster altså ikke noe). Den største fordelen er at programmet er enkelt å bruke - nesten som en tekstbehandler. En del formatering er kronglete i html (uansett program). Blant annet må du bruke tabeller for å plassere "ting" vertikalt.
Den kommersielle versjonen av programmet heter bare FrontPage. Der kan du skifte mellom editering (skriving) og forhåndsvisning (slik det blir i leseren) - og du kan se, eventuelt redigere i, html-koden. I tillegg har programmet en Explorer (filbehandler) som letter oversikten og kan sjekke linker.
Med denne større versjonen kan du også lage rammer (frames)!? Slike kommer vi tilbake til senere.

Før vi begynner vil jeg bare påpeke noe viktig som du må tenke på underveis: En html-editor brukes til annet enn en tekstbehandler. Hva og hvorfor? Formatet påvirker formen. Dette du nå ser på/leser ligner mest på noe som like gjerne kunne ha stått på et papir. Meningen er å utvikle noe som ligner på noe som kunne ha vært ei grei hjemmeside - med noen av de kvaliteter den bør ha. Trenger dette nærmere avklaring/diskusjon?
Kanskje må vi også si noe om hva vi mener/forstår med ordet/begrepet hjemmeside?


Her følger i alle fall anvisninger på hvordan jeg har laget disse sidene med Express-utgaven.
Ved å lese, se og prøve selv, er du også i gang.
Jeg begynner så enkelt som mulig - om forklaringene gjør det enkelt nok, er en annen sak.

Dette (altså ei innføring i bruk av FrontPage Express) vil du ha foran deg i et Explorer-vindu. Forklaring?
Etterhvert som du får noe på di side, vil det være gunstig å starte Explorer på nytt for å se på verket i et eget vindu.
(Her ser jeg at forståelse av brukergrensesnitt og filbehandling er gode forutsetninger for å kunne konsentrere seg om det vi egentlig skal gjøre - nemlig skrive/lage ei enkel hjemmeside.)
Bakgrunner og bilde(r) finner du i mappa Images under mappa dette (html-filene) ligger i.
Mer avklaring?

Start FrontPage Express (Start - Programmer - Internet Explorer - FrontPage Express), se på menylinja, og sjekk knappene i de to øverste knapperadene. Glem den nederste til så lenge.

Jeg gjør oppmerksom på angre-knappen med en gang. Med den kan du fjerne det dumme du nettopp gjorde - og som rotet til sida di.

 

I leksjon skal du skrive litt og formatere skrifta.
I leksjon 2 tar vi for oss det estetiske og litt standard redigering
I leksjon 3 går det på bruk av tabeller.

Det du skal skrive vil være uthevet.

For å gjøre dette læremiddelet mer tiltalende og brukervennlig, tar jeg i bruk to teknikker før du blir presentert for dem.
Bilder/illustrasjoner ligger i tabeller når de står til høyre for tekst.
At linker kommer umiddelbart der det er naturlig, viser også noe av dette formatets styrke.

Mitt forsøk på å gjøre det jeg ber deg gjøre, kan du se her. Du kan like gjerne se med en gang - så vet du hva vi skal frem til.

 

 

Leksjon 1

I leksjon 1 vil jeg beskrive/be deg gjøre følgende:
skrive inn tekst
formatere overskrifter
lage avsnitt og linjeskift
velge annen skrift, -størrelse og farge
utheve/kursivere
justere tekst
lage lister

 

Skrive inn tekst

Med programmer aktivt skriver du nå:
Hjemmesida til "navnet ditt"!

og deretter trykker du Enter. Trykk Enter én gang til og skriv:
Jeg skal nå prøve meg frem for å se om jeg kan lære litt om å lage hjemmesider. Heldigvis kommer det mest an på meg selv. Hva læreren kan og ikke kan er egentlig ikke så viktig, bare han får meg i gang slik at jeg kan lære meg mer og mer selv.

Trykk Enter igjen.

Lagre sida med navnet index.htm i ei mappe du kaller Frontweb!? Trenger du hjelp her?
Pass på å lagre underveis - hvorfor?

 

Formatere overskrift

Overskrifta skal nå formateres. Det gjøres på samme måte som i en tekstbehandler, f. eks. Word.
Først må du markere teksten (kan gjøres på forskjellige måter, men enklest er å klikke i margen til
venstre for linja - når makrøren er ei kvit pil). Klikk på pila (til venstre i øverste knapperad - til høyre
for der det står normal) for å få ned lista og velg Overskrift 1.

Gjør dette!
Slik ble mi (ikke bry deg om justeringa(?))!

Lage avsnitt og linjeskift

Når du trykker Enter, lager du et nytt avsnitt. Du ser at det blir luft, ei blank linje, mellom. En god del formatering slår ut på hele avsnitt.
Linjeskift lager du ved å holde inne Shift-knappen og så trykke Enter. Det kan du se med denne knappen inne:

Lage avsnitt har du allerede gjort.

Ny gjøring:
Skriv følgende: Det jeg nettopp har skrevet, er i skrifttypen Times New Roman.
Hold Shift-tasten inne og trykk Enter for ny linje.
Skriv så: Det er enkelt å endre skrifttypen til Arial.

 

Velge annen skrift, -størrelse og farge

Skrifttype (-snitt) og velger du fra lista i øverste knapperad.
Merk teksten (ordet, setninga, linja, avsnittet) først.
De to knappene til å øke eller minske størrelsen på skrifta
finner du ut av selv. Også her må du markere først.

Annen farge på skrift velger du i paletten som utløses av
knappen .

Gjøringer:
Endre skrifttypen på det lange avsnittet (Jeg skal nå prøve meg frem ....) til Arial.
Endre også "Det er enkelt å endre skrifttypen til Arial."
Hvilken skrifttype er best å lese på skjerm?
Bruk de to knappene til å forstørre/forminske de to siste setningene.
Sett farge (gjerne forskjellig) på de samme to linjene.
Hvorfor bør vi være forsiktige med farget skrift i hypertekst?
Kikk på mine farger.

 

Utheve/kursivere

Her bruker du på vanlig måte de to knappene til høyre.
Hvorfor tar jeg ikke med knappen for understreking?

Gjøring:
Uthev navnet på de to skrifttypene (Times New Roman og Arial).
Bruk kursiv på ordene nettopp og enkelt (i de to setningene der de forekommer).
Hva fungerer best på skjerm - utheving eller kursivering.

 

Justere tekst

Til justering venstre, midtstilt og høyre brukes de tre knappene til høyre.
Venstre er standard, så den brukes bare for å endre fra midt- eller høyrejustert.

Gjøring:
Midtstill overskrifta.

 

Lage lister

Lister er det to typer av - nummererte og punktlister.
Klikk på en av de to og skriv i vei. Enter gir deg nytt nummer eller punkt.
Liste kan også legges på i ettertid dersom du har brukt enter mellom hvert moment.

Gjøring:
Skriv inn ei liste tilsvarende den under.

Jeg har nå gjort følgende:

 

 

Leksjon 2

I leksjon 2 tar vi i bruk effekter, blir effektive (redigering) og gjør sida aktiv:
sette til bakgrunn
sette inn bilde
lage link (selve grunnelementet)
sette inn vannrett linje
kopiere og lime inn

 

Sette til bakgrunn

Bakgrunn kan du lage hvis du klikker på sida med høyre mustast -
og så på Egenskaper for side. Da får du opp dialigboksen til høyre.
Velg fanen Bakgrunn og du ser at du enten kan hente inn et
bakgrunns-bilde eller velge farger fra en palett.
Du kan også definere egne farger.

Gjøring:
La sida di få bildet graabak.jpg til bakgrunn. Kryss av for
Bakgrunnsbilde og Bla gjennom til mappa Images under denne
mappa (Frontweb).

Se på min!

Sette inn bilde

Bilder settes inn ved hjelp av knappen . Vanligst er bilde Fra fil som du må Bla gjennom for å komme frem til.

Gjøring:
Sett inn bildet ulv.gif som du finner i mappa Images.

Heter han ikke Per?

 

Lage link

Linker eller lenker gir hypertekst-dokumenter der du ved å klikke på et element (tekst, bilde) hopper til annet sted i samme dokument/fil eller får opp på skjermen et nytt dokument/ei ny fil. Skal du forflytte deg i samme dokument, må du lage bokmerker (eller targets) som du lander på/ved. Så merker du det ordet (objektet) du vil skal utløse "spranget", og knytter det ved hjelp av knappen til det aktuelle bokmerket.
Hvis du skal kalle opp et nytt dokument, må du angi det i dialogboksen.

For å lage bokmerke, klikker du rediger
i menylinje, så bokmerke, skriver så inn
et fornuftig navn og til slutt klikker du ok.
Når du skal lage link til bokmerke
eller annet dokument, må du først
markere "det forløsende" ord.
I dialogboksen tar du i det første
tilfellet frem lista (klikk på pila til høyre
for (ingen)) over bokmerker (disse må
du altså ha laget først).
Til annet dokument kommer du ved å
velge det aktuelle blant de som er åpne
(og som vises under åpne sider)

Gjøringer:
Skriv tre overskrifter, Skrift, Punkt, Bilde, som du formaterer som Overskrift 2.
Lag ett bokmerke ved/foran hver av de tre overskriftene. Bruk skrift, punkt og bilde som navn på bokmerkene.
Skriv ei punktliste øverst med de tre overskriftene.(Tabeller kom til seinere!)
Markér ordet skrift (i punktlista) og klikk på . Velg bokmerket skrift og klikk ok. Gjør det samme med de andre ordene/bokmerkene.

Hvordan kommer du deg tilbake?

Opprett ei ny side, med knappen , der du skriver litt om hvordan det har gått så langt, hva du har gjort, hva som gikk greit, hva som var vanskelig.
Lagre sida som erfaring.htm.
Skriv til slutt i index.htm setninga: Mine opplevelser etter å ha prøvd meg frem.
Markér ordet opplevelser og lag link til sida erfaringer.htm.
Kunne du tenke deg å plassere linken til erfaringene annet sted?
Hvordan skal du få knyttet en link til et bilde? Klikk på bildet for å merke det, klikk på - resten er som over - enten til et bokmerke eller til ei ny side.

 

Sette inn vannrett linje

Fra menylinja, Sett inn, Vannrett linje.

Gjøring:
Sett inn ei linje over hver overskrift. Stilig - hva?

 

Kopiere og lime inn!

Å kunne flytte eller kopiere er svært nyttig og veldig enkelt. Du gjør det stort sett på samme måten uansett program (web-editor, web-leser, tekstbehandler, epost, regneark osv).

Fremgangsmåten er som følger:
Merk (markér) det du vil kopiere. Trykk Ctrl + C. Flytt deg dit du vil ha kopien (annet sted i samme dokument, i annet dokument/program) og trykk Ctrl + V.
Flytting foregår på samme måte, bare at du første gangen trykker Ctrl + X i stedet for C.
(Du kan kopiere/flytte på flere andre måter, ved hjelp av knapper i verktøylinja eller menyen rediger, men lær deg den jeg har beskrevet - det er raskest og fungerer i alle Windows-program.)

Gjøring:
Kopier følgende tekst til sida erfaring.htm:
Å lage hjemmesider er ikke bare enkelt, selv om Thomas sier det var mye verre før. Det er så mye å holde rede på. Ikke bare skal jeg finne ut av programmet FrontPage Express og prøve å få til det han beskriver (er det jeg eller han som er forvirret), men jeg skal også bruke flere programmer samtidig og det i flere vinduer. Det er jo vinduer og filer overalt. Hadde jeg visst at det var sånn, skulle jeg ha.....
Ta bort uthevinga!
Husk å skrive mer om dine, spesielle erfaringer. De vil det være nyttig å få dokumentert.

 

Leksjon 3

I leksjon 3 vil det handle om tabeller:
lage enkel tabell
tilpasse tabeller
tabell i tabell

 

 

Lage tabell

Nå blir det enda verre - nei da, sida blir bedre/finere!
Som tidligere nevnt, må det tabeller til for å styre elementer i horisontalplanet.
Dette kan gjøres svært enkelt med en to-cellers (-ruters) tabell for å få et bilde
til høyre for en tekst (som her).
Du kan også ha tabeller i tabeller for å finjustere enkeltelementer.
Da blir det fort litt komplisert - men bare til å begynne med.

Tabell lager du enklest med knappen . Merk hvor mange celler/ruter du vil ha. (Det må du selvfølgelig ha tenkt gjennom på forhånd.)

Tabeller du vil bli kvitt, slettes lettest ved at du står i tabellen, velger Tabell i menylinja, merk tabell og trykker Delete.

Gjøring:
Lag en slik to-cellers tabell som beskrevet over. Sett inn bildet borg.jpg i cella til høyre og fortell kort om hva du ser på bildet i cella til venstre.
Her er min kunstanmeldelse.

 

 

Tilpasse tabeller

Det som er mest aktuelt å tilpasse er størrelsen på cellene og plasseringen av elementene i de forskjellige cellene.
Siden tabellene i utgangspunktet er "usynlige" (?), kan det noen ganger være grunner til at strekene skal vises: tydeliggjøring, mer oversiktlig, penere.

Når du har laget tabellen, er cellene tomme og små. Skriver du tekst i ei celle utvider den seg horisontalt og vertikalt (for ny linje). Du kan gjøre tekstcella smalere ved å "brekke om" teksten/bruke linjeskift (Shift + Enter).
På samme måten er det størrelsen på bildet som bestemmer størrelsen på cella. Bildet kan du gjøre mindre eller større ved å dra i et hjørne.
Dette fungerer ofte bra dersom vitsen med tabellen var å få plassert et bilde.

Hvis du skal bruke tabeller som rammeverk på hele/store deler av ei side,
vil du kanskje bestemme mer nøyaktig hvor brei hver kolonne skal være.
Først lager du tabellen på vanlig måte. Bruk f. eks. tre celler i bredden
(innholdet regulerer høyden).
Sett markøren inni tabellen, og klikk med høyre mustast.
Velg egenskaper for tabell og så kan du angi minimumsbredde i piksler
eller prosent. Med 100 prosent vil tabellen strekkes over hele sida.
Fordeler/ulemper med prosent kontra piksler?
Du kan også styre bredden til den enkelte cella. Her får du kanskje
erfaring med at What You See Is Not What You Get. (ikke WYSIWYG).

Piksler svarer til punkt på skjermen, og der må du først og fremst ta hensyn til oppløsning. Vanligst er 800x600 (piksler) på 15 tommers skjerm og 1024x768 på 17 tommer eller større. (Gamle 14-tommere med tilsvarende dårlig skjermkort bruker kanske 640x480!)
Bruker du 800 punkter i bredden som minimum, bør du definere tabellen slik at den blir litt smalere, f. eks 750.

Så kan det tenkes at tabellen skal være nettopp en tabell i tradisjonell forstand.
Da vil du kanskje at strekene skal vises. Andre ganger kan en slik innramming
være med på å fremheve noe eller begrunnelsen kan være bare estetisk.
Da må du, forsatt stående i tabellen, igjen klikke med høyre mustast, velge
egenskaper for tabell og gå løs på feltet til venstre i dialogboksen.

Legg merke til 2-tallet i ruta for kantlinjestørrelse. Standard er 0. Jo større
tall, desto tykkere ramme.

Bakgrunnsfargen er i utgangspunktet den samme som på sida. Hvis du ønsker,
og har en god grunn, kan du legge annen farge (eller et bilde) som bakgrunn.
Spørsmålene mine på erfarings-sida har jeg lagt inn i slike pyntebokser
(tabeller) - først og fremst for at du skal få øye på dem.

 

Det siste vi skal se på "inni" tabellen, er plasseringa vertikalt i tabellen.
Du har sikkert allerede merket at både tekst og bilder midtstilles. De kan ofte
være greit slik, men ofte ønsker vi at noe skal plasseres øverst. Da må vi igjen
innom dialogboksen for celler (stå i den aktuelle cella, klikk høyre mustast, velg
egenskaper for celle. Øverst til venstre endrer du loddrett justering til øverst.
Vannrett justering er standard venstre. Det har vi sjelden bruk for å endre.
Dessuten kan vi enklere midtstille vannrett ved hjelp av midtstillingsknappen
i verktøylinja .

Gjøringer:
Lag en tabell med synlige streker og eventuelt en pen bakgrunnsfarge - etter anvisningene over.
I gjøringa under lage tabell skulle du plassere et bilde i høyre celle og skrive tekst i venstre. Ta frem dialigboksen for celler og endre loddrett justering til øverst for både tekst og bilde (etter tur).

 

 

 

Tabell i tabell

For å få "tingene" riktig finstilt, kan det være nødvendig med tabell i tabell. Du kan stå hvorsomhelst i en tabell å lage en ny tabell. Det er f. eks. vanlig å la en 2- eller 3-cellers tabell stå for grovinndelinga av sida. (Det kan godt betraktes som spalter.) Med 3 celler kan menyen stå til venstre, selve innholdet til høyre og illustrasjonene til høyre. Hjemmesida vår (informatikk-seksjonen si) er laget etter en slik lest.
Du kan også bruke den 3. kolonna til ingenting - for at ikke sida skal bli så "tung" av lange linjer. Ei slik margkolonne kan legges til venstre også.

Som du etterhvert skjønner, er mye av det du ikke ser, avgjørende for om ei hjemmeside blir god (oversiktlig, lettbrukt) og fin (estetisk).

Gjøring:
Nå er du blitt så tøff at du kan prøve deg på tabell i tabell à la den tredelte over.

 

 

Ikke glem å ta med hvordan det gikk med tabellene under erfaringer (i erfaringer.htm).

 

 

 

Erfaringer

Som nevnt på slutten av leksjon 2 og 3, skal du skrive litt om hvordan ditt møte med datamaskinen, FrontPage Express (og Explorer), mitt selvstyrte innføringskurs (og gjerne meg) har fungert for deg. Det gir meg muligheten til å fange opp hvor du står i din generelle IKT-tilnærming, og til å forbedre dette opplegget.
Dine utlegninger skal altså skrives på sida erfaringer.htm som har link fra index.htm.