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 Composer. 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å Redigera (Edit) längst upp på översta raden (menyraden)
och sedan på Kopiera (Copy) (för att kopiera texten). Klicka sedan på pilen till
höger om Styckestil-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 (Heading
1) dvs största möjliga normalrubrik.
Klicka på Format på menyraden överst och sedan på Färger
och egenskaper för sida. Klistra in det du kopierade i fältet till höger om rubrik
(titel).
Välj Arkiv, Spara som (File, Save As). Gå till
huvudmappen skolan. Välj 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 på Format på menyraden överst och sedan på Färger
och egenskaper för sida (Colors and )(Page Properties). Nu kan du se var filen
ligger och vad den heter. Välj att klicka på fliken Färger och Bakgrund. Klicka på den
grå bakgrundsfärgen och ändra till gult. 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. Om du använder Windows så 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.
Spara om dokumentet genom att klicka på Spara-knappen (Knappen som ser
ut som en diskett och som är knapp nr 3 från vänster på Verktygsfältet Skriv
meddelande). Det är nu dags att titta på sidan i webbläsaren Netscape Navigator. Klicka
därför på Förhandsgranska-knappen (Preview) (5:e knappen från vänster på
Verktygsfältet Skriv meddelande).
Gå tillbaka till Composer (Om du använder Windows 95 så gör du detta
t.ex. genom att klicka på Composer längst ner på skärmen på aktivitetsfältet.).
Markera rubriken. Centrera rubriken genom att sedan klicka på Justering-knappen
(Alignment) (Knappen längst åt höger på verktygsfältet formatering). Då visas
de tre lägen. Välj det mittersta.
Spara om dokumentet. 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 (I MacIntosh håller du musknappen nere några sekunder istället eftersom det inte
finns någon höger musknapp) 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 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. Tryck på Enter så att du
befinner dig på raden under rubriken. Klicka på Infoga (Insert) på menyraden och välj
sedan Bild (Image). Klicka på Välj fil (Choose file) och 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å Infoga (Insert)
på menyraden. Välj sedan Vågrät linje (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". Centrera texten och när texten är markerad
passar du på att göra den mindre genom att ändra teckenstorleken i Verktygsfältet
Formatering från 12 till 10.
Markera nu ditt
namn. Klicka sedan på Länk(Link)-knappen dvs
knappen på Verktygsfältet Skriv meddelande som ser ut som en länk (en del av en
kedja). Skriv därefter i det översta fältet mailto: följt av din
e-postadress (t.ex. mailto:ml@pb.edu.jonkoping.se). Klicka nu på OK 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 en e-postadress och en mail-server på rätt plats i sin
webbläsare).
-
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.
