På webbsidor ingår aldrig bilder (eller ljud) i själva html-filen.
Bilderna är alltid separata filer och de kan t.o.m. finnas på en annan dator på
Internet , även om de kan ses på din webbsida i webbläsaren.
När man gör en webbplats lokalt och sedan ska flytta allt till en
webbserver som är ansluten till Internet så är det viktigt att man förstår att alla
filer inklusive bild-filer måste ligga i en särskild huvudmapp eller i undermappar till
denna huvudmapp.
Använd aldrig de svenska tecknen å, ä, ö i namn på filer eller
mappar. Använd med fördel korta namn på filer och mappar och använd ej andra
tecken än bokstäver och siffror.
Det är i webbläsare som man tittar på webbsidor. Det finns flertalet
webbläsare och de två vanligaste är Netscape Navigator och Internet Explorer. Dessa
program visar inte allt man skapar i en editor på exakt samma. Dessutom finns dessa
webbläsare i flertalet olika versioner och för varje ny version så klarar webbläsaren
att visa ytterligare några koder.
Olika datorer är inställda olika eller kan inställas olika både vad
gäller hur många färger som kan ses och vad gäller skrivbordsstorleken. Vanligt i dag
är storleken 800 x 600 men när du gör en sida så måste den kunna ses också i
storleken 640 x 480 som också är vanligt.
De 5 översta påpekandena kan du själv utan större ansträngningar
följa redan nu. Nästa påpekande är lite svårare för en nybörjare att göra något
åt. Vi återkommer emellertid senare till problemet som är följande: Windows skiljer ej
på stora och små bokstäver. Det gör dock LINUX (UNIX) som vanligen är
operativsystemet för en webbserver.
Detta är bara en övning där du undersöker hur de olika
grundläggande möjligheterna i din editor fungerar. Meningen är alltså inte att sidorna
skall bli så estetiskt tilltalande som möjligt och inte heller behandlas vilken
information som bör finnas med.
Liksom i alla andra Windowsprogram så kan man åstadkomma exakt samma
sak på ett flertal olika sätt. I den här kursen beskrivs oftast
bara ett av dessa
olika sätt.
Skapa en ny "huvudmapp" skolan där du har
rättigheter på skolans nätverk (På Per Brahegymnasiet under H) eller någon annanstans
t.ex. på hårddisken (C) eller på en diskett. I Windows 95 kan man från skrivbordet
välja Den här datorn och sedan klicka på lämplig enhet (A, C eller
t.ex. H) i
vilken huvudmappen skall skapas. Välj sedan Arkiv, Nytt och Mapp. Döp mappen
till skolan t.ex. genom att klicka på den nya mappen med höger musknapp för att sedan
välja Byt namn.
Skapa i huvudmappen de tre 3 undermapparna bilder,
program och institut.
Starta Front Page 2000. En ny sida öppnas automatiskt.
Om inte en ny sida öppnas automatiskt så kan man skapa en ny sida
genom att klicka i följande ordning Arkiv (längst upp till vänster),
Nytt, Sida, Normal sida.
FrontPage 98 bestod av de två programmen FrontPage
Editor och Front Page Explorer. I FrontPage 2000 har man lagt båda
dessa program i ett program. När man arbeta mer avancerat med FrontPage
så använder man de delar av FrontPage som tidigare ingick i Explorer.
Något som man inte har så mycket nytta av när man bara ska arbeta med
att göra sidor är vyfältet (Vyer) som normalt visas till
vänster när man startar FrontPage 2000. Tag därför nu och också i
fortsättningen i fall du startar om programmet bort vyfältet genom att
klicka på Visa längst upp på översta raden (menyraden) för
att därefter ta bort bocken framför Vyfältet genom att helt enkelt
klicka på bocken eller på ordet Vyfältet. (Om man vill ha tillbaka
Vyfältet så klickar man igen på samma sätt.)
Skriv nu överst på sidan texten "Välkommen till
?skolan". Det är meningen att du själv skall välja
skolans namn. I mitt facit som du hittar längre fram i kursen har jag använt namnet
"IT-skolan".
Markera texten genom att dra musen från vänster eller höger över
texten. Klicka på Redigera längst upp på översta raden (menyraden) och sedan på
Kopiera (för att kopiera texten). Klicka sedan på pilen till höger om
Stil-rutan
längst till vänster på 3:e raden (dvs i Verktygsfältet Formatering) där det i rutan
troligen nu står normal och välj Rubrik 1 dvs största möjliga
(normal) rubrik.
Klicka med höger musknapp någonstans mitt på
sidan. Välj
Sidegenskaper och därefter markerar du med musen allt som står i rutan till höger om
Rubrik.
När det är markerat kan kan klistra in en ersättning. Håll kvar
muspekaren över rutan och klicka på höger musknapp. Välj sedan Klistra In.
Det som är en vanlig rubrik på
sidan och som du kan välja 6 olika storlekar på genom att klicka på pilen till höger om
Stil-rutan
längst till vänster på 3:e raden (dvs i Verktygsfältet Formatering) där det i rutan
normalt står normal kallas på engelska Heading. Det som
kallas rubrik när du klickar någonstans på sidan för att sedan
välja Sidegenskaper kalas på engelska Title. Title är
ingen vanlig rubrik utan det som visas allra längst upp på
bildskärmen när du använder webbläsaren. Title är också det som
man normalt ser när man har valt att göra ett bokmärke till sidan i
Netscape eller en favorit i Internet Explorer. Tyvärr har
både Heading och Title blivit översatta till rubrik
vilket kan leda till en viss förvirring för nybörjare. Ibland
kompletterar jag med eller använder de engelska orden för att
klargöra vad som menas. (I nästa kapitel får du dessutom lära dig
att en cell i en tabell också kan innehålla en cellrubrik - dvs den
kan vara en Header cell. )
Välj Arkiv, Spara som. Ändra nu så att den
mapp som visas längst upp är den huvudmapp skolan som
du nyligen skapade. Ett
förslag finns till filnamn men du väljer att spara dokumentet med namnet
ingang.htm
Den sidan som man normalt kommer till först på en webbplats bör kallas ingångssidan
eller förstasidan enligt Svenska
datatermgruppen. Den sidan har vanligen filnamnet index.html men ibland
förekommer också default.htm Jag har här valt ingang.htm
eftersom det då blir lättare för läraren att granska vad du har gjort om sidorna
flyttas till en webbserver. Läraren kan då nämligen på Internet se hela innehållet i
din huvudmapp.
Klicka någonstans i dokumentet med höger musknapp och välj
Sidegenskaper. Nu kan du till höger om Plats se var filen ligger och vad den heter. Välj
att klicka på fliken Bakgrund. Ungefär i mitten av av fönstret
ändrar du nu till höger om Bakgrund från Automatiskt
till en gul bakgrundsfärg. Klicka sedan på OK.
Det är inte säkert att andra använder samma skrivbordsstorlek som du.
Den storlek man själv använder liksom hur många färger som man kan se kan man se i
Windows 95 om man på skrivbordet klickar med höger musknapp och sedan väljer Egenskaper
och därefter Inställningar. Gå dit och undersök vilka inställningar du
har. Gör nu normalt ingen ändring här. Du skall bara observera vilka
inställningar som du har. Om du nu är i Netscape och vill se skrivbordet utan att avsluta Netscape så klickar du
på minimeraknappen (Den tredje knappen från höger allra längst upp till
höger på bildskärmen). Om du också har FrontPage öppet eller något annat program så
klickar du också på minimeraknappen för dessa program. Sedan gör du så som beskrivs
ovan.
Det är nu dags att titta på sidan i en webbläsare. Klicka därför
på Arkiv och sedan på Förhandsgranska i webbläsaren. Om du har flera webbläsare
installerade väljer du nu en sådan genom att markera den med musen. . Om du
under punkt 8 ovan observerade att du har skrivbordsstorleken
800 x 600 så väljer du nu 640 x 480. Då kan du nämligen se hur sidan ser ut hos dem
som har denna inställning. Om du tidigare har öppnat webbläsaren så är det inte
säkert att denna funktion fungerar. Stäng då webbläsaren och välj Förhandsgranska
i webbläsaren igen. Sätt också ett kryss framför Spara sidan
automatiskt. Om du har glömt att spara
efter den senaste ändringen så sparas sidan då automatiskt innan du tittar på sidan i
webbläsaren. Om du sätter det här krysset så slipper du att besvara
en fråga varje gång du har glömt att spara och vill förhandsgranska.
Du kan nu också när du har sett att sidan fungerar i storleken 640x480
klicka på maximeraknappen näst längst upp till höger i fönstret för att se sidan i
full storlek.
Det kan vara bra att ha 2 fönster i din webbläsare öppna. I det ena läser du de här
övningarna och i det andra ser du hur dina egna sidor ser ut. Om du inte har 2 fönster
redan så kan du öppna ett nytt genom att längst upp till vänster välja Arkiv
och sedan Nytt (Navigator)fönster.
Gå tillbaka till FrontPage t.ex. genom att klicka på FrontPage längst
ner på skärmen på aktivitetsfältet. Markera rubriken. Centrera rubriken genom sedan
klicka på Centrera-knappen (2:a knappen till höger om
understruket U på 3:e raden dvs på Verktygsfältet Formatering).
Spara om genom att klicka på disketten dvs Spara-knappen på
2:a raden (på standardverktygsfältet). Det är bra att spara om mycket ofta. Då
förlorar man inte det arbete man gjort om något plötsligt går snett och datorn t.ex.
måste startas om.
Vi skall nu lägga in två bilder. Bilder till webbsidor kan man få på
många sätt t.ex. kan man använda en digital kamera, skanna egna fotografier, rita i
något ritprogram, hämta bilder från Internet, använda bilder som ingår i ett program.
Det viktiga är att veta att bilderna alltid är egna filer och att jpg-filer, gif-filer
och png-filer är de filer som vanligen fungerar i webbläsare. Använd helst jpg
eller gif eftersom png är ett ganska nytt format som ej fungerar i
äldre webbläsare. Om den ursprungliga filen är i ett annat filformat så måste man
först konvertera.
Mer om bildfiler och hur man hämtar sådana kommer senare i kursen. De filer som du ska
hämta nu har jag för att det ska gå snabbare redan hämtat på Högskolan i
Jönköping och hos Multimediabyrån. Nedan följer 2 länkar till dessa
bilder. (Om du nu arbetar med den här kursen genom att läsa
instruktionerna utskrivna på papper så måste du för nästa moment
gå till den plats på Internet där kursen finns i digital form.
Lämpligen öppnar man då först ett nytt fönster i webbläsaren i
enlighet med vad du läste längst ner under punkt 9.Om
du inte på annat sätt hittar dit så kan du normalt hitta webbadressen
längst upp till höger på den utskrivna versionen.) Klicka nu på länkarna
nedan. När du ser bilden så klickar du med höger musknapp på bilden och
väljer Spara bild som (Save image as). Se nu till att bilden sparas i din undermapp
bilder. Behåll namnet på bilden.
-
Bild
a. En rektangulär linje i regnbågens färger häntad från högskolan
i Jönköping. Namnet är rainbow.gif
-
Bild
b. En herrgårdsbyggnad hämtad
från Multimediabyrån som får föreställa en bild på skolan.
Namnet är herrgard.jpg
Nu ska vi visa bilderna på ingångssidan. Se till så
att du
befinner dig på raden under rubriken t.ex. genom att trycka på Enter. Klicka på knappen
Infoga bild från fil dvs knappen med en bild på två
bergstoppar på andra raden (på standardverktygsfältet). (Ett
alternativ till att klicka på knappen är att överst på menyraden
välja Infoga, Bild, Från fil.) Välj nu bilden rainbow.gif
i din mapp bilder.
Flytta dig nu nedåt lite på sidan genom att t.ex. klicka 2 gånger på Enter och infoga här bilden herrgard.jpg.
Eftersom rubriken var centrerad bör nu också båda bilderna ligga i
centrum. Om de inte gör det så centrera dem såsom du gjorde med rubriken.
Tryck nu på Enter en gång så att du befinner dig
strax under bilden herrgard.jpg och klicka sedan på Infoga
på översta raden (menyraden). Välj sedan Vågrät linje. En tredimensionell
linje markerar nu att något nytt skall komma och du ska nu skriva något som blir en
sidfot till sidan. Tryck på Enter så att du kan skriva under linjen. Skriv sedan :
"Den här sidan uppdaterades senast 1999-?-? av webbansvarige ? ?". Du skall
naturligtvis skriva dagens datum och ditt namn här. I facit har jag skrivit
"1999-09-02 av webbansvarige Tommy Maltell". Texten kanske inte är centrerad. Centrera den i
så fall och när texten är markerad passar du på att göra den mindre genom att
i rutan för Teckenstorlek dvs 3:e rutan från vänster på tredje
raden (på formateringsverktygsfältet) ändra från Normal till 2
(10 pt). Om en vanlig användare inte har ändrat i sina
inställningar så innebär Normal detsamma som 3 (12 pt).
Markera nu ditt
namn. Klicka sedan på Infoga
hyperlänk-knappen dvs knappen med en bild på en jordglob och en länk
på
standardverktygsfältet. Klicka sedan på kuvertet långt ner till höger i fönstret som
visas. Skriv därefter din e-postadress i det ytterligare fönster som poppar upp. Klicka
nu på OK och på OK igen och du har gjort en länk så att man kan skicka brev till dig
genom att klicka på länken (Detta fungerar endast i webbläsaren om man har fyllt i sin e-postadress
och oftast också en mail-server på rätt plats i sin webbläsare. Du behöver ej ändra
dessa inställningar men om du särskilt vill veta hur man gör så kan du gå till kapitel 3b för Netscape eller kapitel
3c för Internet Explorer).
-
Spara
nu sidan och välj att titta på den i din webbläsare. Jämför ditt resultat
med "facit
1".
I övning 2 skall vi fortsätt med det som du
hittills har gjort.
