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 Editor. En ny sida öppnas automatiskt. Skriv där
överst 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å Edit längst upp på översta raden (menyraden) och sedan på
Copy (för att kopiera texten). Klicka sedan på pilen till höger om Change style-rutan
längst till vänster på 3:e raden (dvs i Verktygsfältet Formatera) där det i rutan
troligen nu står normal och välj Heading 1 dvs största möjliga
normalrubrik.
Klicka med höger musknapp någonstans mitt på
sidan. Välj Page
Properties och därefter markerar du med musen allt som står i rutan till höger om Title.
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.
Titeln och rubriken innehåller nu samma text.
Välj File, Save As. Gå till huvudmappen skolan. Ett
förslag finns 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 Page
Properties. Nu kan du till höger om Location se var filen ligger och vad den heter. Välj
att klicka på fliken Backgound. Klicka sedan på Default till höger om Background. Du
kan nu ändra bakgrundsfärg. Välj Yellow. 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.
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å File och sedan på Preview in Browser. Om du har flera webbläsare
installerade väljer du nu en sådan genom att markera den med musen. . Om 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 Preview in Browser
igen. Sätt också ett kryss framför Automatically Save Page. Om du har glömt att spara
efter den senaste ändringen så sparas sidan automatiskt innan du tittar på sidan i
webbläsaren. 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 (File)
och sedan Nytt Fönster (New Window).
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å Center-knappen (6:e knappen från höger på 3:e raden dvs på Verktygsfältet
Formatera).
Spara om genom att klicka på disketten dvs Save-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. Klicka
på länkarna och 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ämtad från Stanford
University. 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. Tryck på Enter så att du
befinner dig på raden under rubriken. Klicka på knappen Insert Image dvs 8:e knappen
från höger på andra raden (på standardverktygsfältet). Välj nu bilden rainbow.gif
i din mapp bilder.
Klicka nu 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 1 gång och klicka sedan på Insert
på översta raden (menyraden). Välj sedan Horizontal line. 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-01-25 av 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 klicka
på "Decrease Text Size"-knappen dvs12:e knappen från höger på tredje
raden (på formatverktygsfältet).
Markera nu ditt
namn. Klicka sedan på "Create or Edit
Hyperlink"-knappen dvs 7:e knappen med en jordglob och en länk från höger 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 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.
