Datorer, Internet
och sökning
en kurs av Tommy Maltell
Kapitel 25a - Dreamweaver
3
Svensk version - Övning 1
Innan du börjar med
övningarna så bör du ha läst igenom Kapitel
25 - Introduktion.
Skapa en ny plats
-
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 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.
- Starta Dreamweaver.
När man startar Dreamweaver så öppnas ett arbetsfönster och ett
antal flytande paletter och verktygsfält. Från menyn Fönster kan
man se vilka paletter som visas. De vanligaste är Objekt, Egenskaper
och Startknappar. Vilka paletter kan du se?
- Det innebär en hel del
fördelar att arbeta med webbplatser i Dreamweaver. Du skall nu därför
skapa en lokal webbplats. Välj Plats, Ny plats så att dialogrutan
för att definiera webben öppnas. Välj namnet IT-skolan. Klicka
på mapp-ikonen till höger om Lokal rotmapp och bläddra
dig fram till mappen skolan och välj sedan OK. Nu kan du
se sökvägen till Lokal rotmapp. Fyll inte i någon webbadress
i den understa rutan. Välj OK och på frågan om du vill att Dreamweaver
ska skapa en cache så svara ja. Nu kan du se innehållet i din plats
i en särskilt fönster.
- Om Platsfönstret
ej är öppet så kan man öppna det genom att välja
Plats och sedan Öppna plats. Man kan också klicka på Plats
i paletten Startknappar.
Klicka på Arkiv och välj Ny mapp. Skapa nu mappen bilder.
Gör likadant igen två gånger dvs skapa två nya
mapp under mappen skolan vid namnen program och institut.
- Markera sedan mappen
skolan och klicka på Arkiv och sedan Ny fil. Ge
filen namnet ingang.htm. Klicka sedan på filen så
att du kan börja skriva i den.
HTML
- Du skall nu på
ett tidigt stadium titta på de HTML-koder som styr hur sidan ska
visas i webbläsaren. Klicka på <> längsts ned till höger
för att se de allra mest grundläggande HTML-koderna dvs:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
-
Detta
är HTML-koderna som de ser ut just när du har skapat en
fil i Dreamweaver. Det som så småningom står mellan
de båda body är det som visas på sidan. Dreamweaver
lägger in en kod på varje ny sida och det är vit bakgrundsfärg.
Detta är bra för om man inte anger någon bakgrundsfärg
alls så visas sidan (om inga ändringar har gjort när
det gäller inställningarna) oftast med vitbakgrundsfärg
i nyare webbläsare men oftast med grå bakgrundsfärg
i äldre webbläsare.
- Istället för
att klicka på <> längsts ned till höger så kan
man klicka på Quick Tag Editor-ikonen längst til höger
i egenskapspaletten under frågetecknet. Då kan man bara
se taggen (koden) för det som är markerat och man kan editera
endast denna tag.
-
Skriv
nu överst på sidan texten Välkommen till IT-skolan.
Markera texten genom
att dra musen från vänster eller höger över texten. I paletten Egenskaper
klickar du nu till höger om där det står Formatera på pilen
som pekar nedåt för att sedan välja Rubrik 1 dvs största möjliga (normala)
rubrik.
- Välj Ändra
i menyraden och sedan Sidegenskaper. (Du kan också Klicka
med höger musknapp någonstans på sidan utanför en tabell och sedan
väljer du Sidegenskaper.) Därefter markerar du med musen
allt som står i rutan till höger om Titel. 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.
- Dreamweaver översätter
de svenska tecknen å,ä,ö med specialtecken i HTML-koderna. Detta var
nödvändigt förr men är inte längre nödvändigt.
Dessa specialtecken följer med när man kopierar texter. Därför
måste du ändra lite i det du klistrar in så att det blir just Välkommen.
- 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. Om man
inte ändrar på det så får en ny sida skapad i Dreamweaver en vit bakgrund.
Detta visas med den heximala koden #FFFFFF. Klicka på rutan mellan
ordet Bakgrund och ovannnämnda färgkod. Nu kan du klicka på en av färgerna
och byta till den. Välj emellertid istället att klicka på paletten till
höger. Nu kan du ännu noggrannare bestämma en exakt färg. Välj 204 för
alla tre färgerna röd, grön och blå. Det ger koden #CCCCCC. Klicka sedan
på OK. Längre fram i kursen får du lära dig mer om färgkoderna.
Förhandsgranska
i webbläsaren
- 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.
- Titta också i
Dreamweaver längst ned och lite till höger under arbetsytan.
Där kan du se den fönsterstorlek som du använder t.ex.
760x420. Klicka på den lilla pilen till höger och ändra
till något som är mindre t.ex. 600x300. Du ser att Dreamweaverfönstret
blir mindre och du kan genom att ändra här testa och se vad
olika användare som har en mindre skrivbordsstorlek kan se när
det gäller dina sidor.
- Det är nu dags att titta
på sidan i en webbläsare. Ha alltid i minnet att det du ser på
arbetsytan i Dreamweaver inte alltid är exakt det som du ser i
webbläsaren. Klicka därför på Arkiv och sedan på Förhandsgranska
i webbläsaren. Klicka sedan på den webbläsare som du vill se sidan
i. Den här funktionen kan ge webbläsaren korrekt information i vilken
mapp sidan finns men den kan inte informera korrekt vad sidan har för
namn. Namnet blir ett temporärt filnamn.
- 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.
- Markera nu din rubrik.
Centrera rubriken genom att i Paletten Egenskaper sedan klicka på Centrera-knappen.
Du kan också klicka på texten med höger musknapp för att sedan
välja Justera och sedan Centrerat.
- Spara om genom att klicka
på Arkiv och sedan Spara. 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. Därför kan det vara lönande att lära sig snabbkommandet
Ctrl+S dvs att klicka på S samtidigt som man håller ned Ctrl-tangenten.
Detta snabbkommande kan man dessutom använda i många andra program.
Lägga in bilder
- 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 gärna 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 info om var man hämtar bildfiler finns i
kapitel 10a. Tänk bara på att man definitivt inte får använda dessa
bilder utan tillstånd på sin egen webbplats på Internet. Mer info om
bildhanteringsprogram 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. Du kan du normalt sett hitta webbadressen
till kursen 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 att du befinner dig på raden under rubriken
t.ex. genom att trycka på Enter. Ändra i egenskapspaletten Formatera
från Rubrik 1 till Stycke men ha kvar Centreratknappen
intryckt. Klicka överst på Infoga och välj sedan Bild. Nu
får du möjlighet att leta rätt på bilden bland mapparna i din lokal
webbplats. 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. Gör det denna gången genom att först
klicka längst upp till vänster i Objekt-paletten dvs där på ikonen Infoga
bild.
- 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.
Informationen längst
ned på sidan
- 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. Man kan också använda en knapp på Objekt-paletten.
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 200?-?-? av webbansvarige ? ?". Du skall naturligtvis
skriva dagens datum och ditt namn här. I facit har jag skrivit "?-?-?
av webbansvarige Tommy Maltell". Markera texten och gör den mindre
genom att i Egenskapspaletten ändra vid Formatera till Inget
och vid Storlek till 2 samt centrera. Om en
vanlig användare inte har ändrat i sina inställningar så innebär Inget
till höger om Formatera eller Storlek - Standard om man klickar
på höger musknapp på texten detsamma som 3 (12 pt).
- Markera nu ditt namn.
Klicka sedan överst i menyraden på Infoga och sedan på
E-postlänk. I textrutan överst står redan ditt namn. Skriv nu din
e-postadress underst. Klicka på OK. 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).
Historiapaletten
- Allting som sker under arbetets gång registreras i paletten
Historia. Klicka i menyraden på Fönster, Historia.
Ett steg kan uppprepas genom att man markerar det i listan och klickar
på knappen Spela upp. Du har t.ex. lagt in en bild och efter en
stund tar du bort denna bild och sedan efter ytterligare en stund efter
det att du har gjort en hel del annat emellan ångrar du dig och
vill lägga in bilden igen. Då kan du på historiapaletten
gå tillbaka till just händelsen att infoga bilden, markera
denna och sedan klicka på Spela upp.
- Tag nu bort bilden herrgard.jpg. Du vill ha tillbaka den. Istället
för att ångra bortttagandet genom att välja Redigera,
Ångra testar du möjligheterna i historiapaletten. Öppna
Historiapaletten och gör om infogandet av bilden.
- Ett eller flera steg i historiapaletten kan också sparas som
ett kommando. Man markerar flera händelser samtidigt genom att
markera dem i tur och ordning samtidigt som man trycker ned Ctrl-knappen.
När man har markerat färdigt så klickar man någonstans
i markeringen med höger musknapp och sedan väljer man spara
som kommando. Kommandot hittar man sedan genom att på menyraden
klicka på Kommandon.
HTML igen
- Du skall nu återigen
titta på de HTML-koder som styr hur sidan ska visas i webbläsaren.
Klicka på <> längsts ned till höger för att se de aktuella
HTML-koderna dvs:
<html>
<head>
<title>Välkommen till IT-skolan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#CCCCCC">
<h1 align="center">Välkommen till IT-skolan</h1>
<p align="center"><img src="bilder/rainbow.gif" width="559"
height="14"></p>
<p align="center"><img src="bilder/herrgard.jpg" width="200"
height="133"></p>
<div align="center"><font size="2">
Den här sidan uppdaterades senast 2001-09-28 av webbansvarige
<a href="mailto:jakob.vakant@edu.stad.se">Jakob Vakant</a></font></div>
</body>
</html>
- Du kanske inte har riktigt samma kod. Du kanske aldrig ändrade
från Rubrik 1 till Stycke innan du lade in bilderna.
I så fall står det nog h1 längst till vänster
och höger på raderna med bilderna. Det fungerar i alla fall.
En av anledningarna till att man använder WYSIWYG-editorn Dreamweaver
är ju att slippa att skriva koder. Även om man helst vill
redigera HTML-koder så har man ibland en väldig nytta av
att kunna hantera dessa. Om
du vill öka dina kunskaper om HTML-koderna så har IDGs webbstudio
en kurs om HTML
4. Du kan också läsa min egen HTML-kurs.
Där förklaras noga de mest grundläggande koderna men
kursen är dock några år gammal och de senaste årens
koder finns ej omnämnda.
Några små kommentarer till koderna ovan:
- Länkar börjar med a
href
- Bilder börjar med img
src
- Färger anges normalt
som en sexsiffrig kod som börjar med #
- En vågrät linje har koden <hr>
- Om man har valt en särskild storlek för en viss text
så är finns koden <font
size="?"> till vänster om den
text som ska ska ha den speciella storleken och </font>
till höger. ? skall naturligtvis ersättas med talet för
storleken.
- Rubrik1 har koden <h1> osv
- Koder kan delas upp i element och attribut. h1 är
ett element med attributet
align. Attributet align har värdet center.
- Ibland kan man också få med en del onödiga koder
som är svåra att ta bort om man bara använder den vanliga
arbetsytan i Dreamweaver. Man kan på menyraden klicka på
Kommandon, Rensa HTML för att ta bort onödiga koder
men kanske är detta en svår funktion om man är nybörjare.
Det är vanligt att man i koden får onödiga stycken.Sådana
tar man enkelt bort om man klickar på <> och redigerar i
HTML-källan. Ett onödigt stycke har koden
<p> </>
är koden för ett extra mellanslag. Mer om
denna kod kommer senare i kursen.
Kontrollera i facit och gå vidare
- 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.
Denna sida
uppdaterades senast 01-10-17 av
tommy.maltell@pb.edu.jonkoping.se
Länkar:
Kursens ingångssida - Skolornas
portal
©
2001 Tommy Maltell
|