Datorer, Internet och sökning, Tommy Maltell - Kapitel 25i - Övning 9 i Dreamweaver 3

Datorer, Internet och sökning
en kurs av Tommy Maltell

Kapitel 25i - Dreamweaver 3
Svensk version - Övning 9

Färger och 216 säkra färger i Netscape

Varje färg har ett RGB-värde. RGB står för grundfärgerna: röd, grön, blå. Alla färger kan beskrivas med grundfärgerna. Varje grundfärg har 256 steg från 0 till 255. Om en grundfärg inte alls ingår är värdet 0 och om den ingår maximalt är värdet 255. För att ange värdet av grundfärg används det hexadecimala talsystemet där det finns 16 "siffror". När de tio första vanliga siffrorna har tagit slut använder man de första bokstäverna i alfabetet.

Decimala
talsystemet
0
1
2
3
9
10
11
12
15
16
17   (1x16+1)
188 (11x16+12)
255 (15x16+15)

Hexadecimala
talsystemet
0
1
2
3
9
A
B
C
F
10
11
BC
FF

För att beskriva hur mycket som ingår av varje grundfärg behövs alltså 2 hexadecimala siffror. Ett RGB-värde beskrivs på formen rrggbb där rr, gg och bb är de hexadecimala talen för respektive grundfärg (rött, grönt, blått). Hela RGB-värdet föregås i HTML-koderna av tecknet #. Detta tecken brukar kallas en brädhög eller ett staket.

Nedan visas Startmärket för några vanliga färger som bakgrund:

<BODY BGCOLOR="#FF0000"> = Röd 
<BODY BGCOLOR="#00FF00"> = Grön
<BODY BGCOLOR="#0000FF"> = Blå
<BODY BGCOLOR="#FFFF00"> = Gul
<BODY BGCOLOR="#000000"> = Svart
<BODY BGCOLOR="#FFFFFF"> = Vit
<BODY BGCOLOR="#FF8800"> = Orange
<BODY BGCOLOR="#FF00FF"> = Lila
<BODY BGCOLOR="#C0C0C0"> = Grå
<BODY BGCOLOR="#FF00FF"> = Magenta, anilinröd
<BODY BGCOLOR="#00FFFF"> = Cyan
<BODY BGCOLOR="#A62A2A"> = Brun
<BODY BGCOLOR="#8C7853"> = Brons
<BODY BGCOLOR="#B87333"> = Koppar
<BODY BGCOLOR="#5C4033"> = Mörkbrun
<BODY BGCOLOR="#2F4F24"> = Mörkgrön
<BODY BGCOLOR="#871F78"> = Mörk purpur
<BODY BGCOLOR="#CD7F32"> = Guld
<BODY BGCOLOR="#E6E8FA"> = Silver
<BODY BGCOLOR="#3299CC"> = Himmelsblå
<BODY BGCOLOR="#BC8F8F"> = Skär
<BODY BGCOLOR="#FF7F00"> = Alt orange
<BODY BGCOLOR="#8E236B"> = Katanjebrun
<BODY BGCOLOR="#A8A8A8"> = Ljusgrå
<BODY BGCOLOR="#ADEAEA"> = Turkos
<BODY BGCOLOR="#4F2F4F"> = Violett
<BODY BGCOLOR="#99CC32"> = Gulgrön

Om vi skall tala i HTML-termer så är BODY elementnamnet och BGCOLOR attributets namn. Färgen är attributets värde.

Jag gjorde en gång för många år sedan en tabell med många färger där färgernas namn finns med.

Man kan lägga in färger på många olika ställen t.ex. som bakgrunder på sidan och i tabeller och som färg till texter. Markera nu någon text och i egenskapspaletten skriver du i textfärgsrutan till vänster om B in någon av koderna ovan. Klicka sedan på rutan till vänster om koden och därefter på paletten. Undersök hur färgen ser ut och vilka värden färgen har som RGB.
Många har inte maximal inställning eller en gammal utrustning som gör att bara 16 eller 256 färger kan visas. Ibland finns det också begränsningar som beror på ditt grafikkort. Det är dock inte alls ovanligt att den person som installerar grundprogrammen i en dator inte gör de maximala inställningarna när det gäller färger . Det förekommer också att en del personer (ofta barn i familjen) ändrar inställningen till 256 färger eftersom vissa spel inte kan användas om man använder fler färger och sedan blir det inte av att man ändrar inställningen till fler färger när man inte använder dessa spel.

Om personen som har gjort en webbsida har använt en färg som finns med på en skala för 16 miljoner färger så är det i sådana fall oftast en lyckträff om rätt färg visas. Oftast visas då en närliggande färg som din utrustning klarar att visa.

Om du använder Windows kan du normalt ändra dina inställningar genom att klicka på en ledig plats var som helst på skrivbordet. Välj sedan Egenskaper och sedan fliken Inställningar. Vad som är möjligt när det gäller inställningarna beror på den möjliga upplösningen på bildskärmen och grafikkortets minne. Vanligt är följande begränsningar:

Grafikkort	Färgpaletten	Skrivbordet
1 Mb	16-bitar dvs 65536 färger	800x600 bildpunkter
1 Mb	24-bitar dvs 16777216 färger	640x480 bildpunkter
2 Mb	24-bitar dvs 16777216 färger	800x600 bildpunkter

Om du har Windows så undersök nu vilken inställning du själv har på din dator.

Om man använder Windows och har inställningen 256 färger så finns det i Netscape bara 216 färger som visas korrekt. Det kan vara bra att som tillverkare av webbsidor enbart använda dessa "säkra" färger. På Victor Engels sida om de 216 färgerna får man en noggrannare förklaring av fenomenet. Du kan också besöka sidan med Netscapes egna förklaringar eller sidan De webbsäkra färgerna på svenska i Internetworlds webbskola. En sammanfattning är att

Värdet för varje färg (röd, grön, blå) måste alltid vara en av dessa:

Decimalt	0	51	102	153	204	255
Hexadecimalt	00	33	66	99	CC	FF

I Dreamweaver finns det särskilda färgscheman med webbsäkra färger. Öppna en ny sida som du sedan omedelbart sparar som test.htm i huvudmappen skolan. Ge testsidan titeln IT-skolans testsida. Skriv överst texten Välkommen till testsidan. Testsidan tillhör IT-skolans webbplats. Ordet webbplats skall vara en länk till ingångssidan. På menyraden väljeer du sedan Kommandon,Ange färgschema. Testa med att lägga in olika färgscheman. Slutligen testar du också att ändra direkt i HTML-koderna för att testa olika färger. Välj t.ex. från koderna nämnda ovan.

Ändra storleken på bilder

I övning 3 påpekades att när man har en stor bild och vill presentera denna som en liten bild så är det om man vill att bilden skall laddas ned snabbt lämpligt att i ett bildbehandlingsprogram från den stora bilden skapa en liten bild i en egen fil. Det finns flera sådana. Tucows erbjuder en plats där man kan hämta multimediaprogram. Där kan du hitta program såsom LView och Paint Shop Pro som är billigare än det gamla standardprogrammet för bildbehandling Photoshop. Om du har tillgång till Photoshop så pröva gärna Susanne Dinérs kurs i Photoshop som också innehåller en del intressanta länkar.Det finns många olika program för detta.

Transparenta GIF-bilder

En bild har alltid formen av en rektangel. Det som inte ingår i den bild som man vill visa men som ändå behövs som utfyllnad för att åstadkomma en rektangel har ofta givits en enda bakgrundsfärg. Om man vill visa bilden snyggt i en bakgrund så kan man ge bildens bakgrundsfärg samma färg som bakgrunden på webbsidan. En annan möjlighet när det gäller gif-bilder är att göra en av färgerna (just den enda bakgrundsfärgen) transparent eller genomskinlig.

Bilder som laddas ner i etapper

När det gäller en GIF-bild på en webbsida så kan man göra bilden sammankopplad dvs bilden laddas ned i etapper. På samma sätt kan man när det gäller JPEG-bilder välja att ge bilden fortgående rendering. Man anger i hur många etapper bilden ska laddas ned. För att kunna se effekten måste bilderna vara ganska stora och ligga på Internet.
På en testsida har jag förutom en konstbild som ligger överst lagt in två bilder som ser likadana ut. Den översta av dessa två är en sammankopplad gif-bild på 207 kb och den understa en jpeg med 6 fortgående renderingar på 27 kb. Titta på sidan för att se att hela bilderna kan ses från början men att de i början är suddiga.

Bildspel

Öppna en ny normal sida. 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>
Vanligen använder man elementen TITLE och STYLE i det som omringas av HEAD. Det finns emellertid ytterligare koder som man kan använda i HEAD. Efter <head> ovan finns <meta osv. En intressant kod är
<META HTTP-EQUIV="Refresh" CONTENT="n; URL=URL-adress">
där n är antalet sekunder som sidan skall ligga kvar innan nästa sida i en bildserie visas. Med URL-adress menas en absolut adress till någon sida på World Wide Web eller en relativ adress till en närliggande sida.
Gör nu ett bildspel bestående av 3 av de sidor som du har. Gör bildspelet i följande ordning: ingångssidan, institutionen, programmet. Låt bildspelet sluta med programmet dvs du lägger bara in koden nämnd ovan i de två första filerna. Låt varje sida ligga kvar 5 sekunder. Testa sedan att det hela fungerar genom att öppna ingångssidan. Ändra därefter till 10 sekunder för att se skillnaden. Koderna som skall skrivas in mellan <head> och </head> blir för ingang.htm eftersom si.htm ligger i undermappen institut:

<meta HTTP-EQUIV="Refresh" CONTENT="5; URL=institut/si.htm">

För si.htm blir koden eftersom sp.htm liggger i en annan mapp med samma huvudmapp (Man går först uppåt med symbolen för detta dvs. två punkter (..) och sedan ned i mappen program):

<meta HTTP-EQUIV="Refresh" CONTENT="5; URL=../program/sp.htm">

Konvertera skikt till tabell, animering med skikt

Medan du har filen si.htm öppen passar du på klicka på <> för att redigera i HTML-koden. Du tar längst upp mellan head-taggarna bort style-taggarna och det som finns emellan. När du är tillbaka på sidan igen så ändrar du rubriken från storlek 5 till 4. Även i filen sp.htm ändrar du rubriken från storlek 5 till 4.
Öppna filen salmedskikt.htm. Sidan visas korrekt i Netscape 6.1 men ej i Netscape 4.7. Kontrollera själv i webbläsaren och gärna i Netscape. Spara om sidan som salmedskikt2.htm och som salmedskikt3.htm. Klicka sedan på Ändra, Layoutläge, Konvertera skikt till tabell. Det finns flera möjliger att välja emellan. Välj att konvertera mest exakt och välj att använda genomskinliga GIF-bilder. Kontrollera i webbläsaren och gärna i Netscape. För mig blev visningen bättre i Netscape 4.7 men allt blev inte korrekt.
Öppna återigen filen salmedskikt.htm. Ändra plats för skiktet med tabellen genom att ändra V till 1225. Med hjälp av ett JavaScript skall du nu göra en animering så att det ser ut som om tabellen flyger in från höger till sin rätta plats. Du kommer att få en del varningar när det gäller Netscape men acceptera och gå vidare när varningen kommer. Välj Fönster, Tidslinjer. Dra sedan skiktet med tabellen till ettan på tidslinjen. Välj sedan i menyraden Ändra,Tidslinje, Lägg till objekt på tidslinje. Du får nu två runda prickar i Tidslinjerfönstret som är sammanbundna av en linje. Klicka på den högra pricken vid 15. Ändra sedan i egenskapspaletten 1225 till 225. Du kan också dra skiktet till sin rätta plats. Sätt sedan en bock framför Autospela. Kontrollera i webbläsaren (webbläsarna). Sätt också en bock framför Slinga så att animeringen upprepas hela tiden och kontrollera i webbläsaren. Ta sedan bort bocken framför Slinga. För mig fungerade animeringen i Internet Explorer och Netscape 4.7 men ej i Netscape 6.1. Om du inte är nöjd med animeringen så har du kvar en säkerhetskopia av den ursprungliga sidan i filen salmedskikt3.htm.

Beteenden

Du skall nu testa ett av alla de beteenden som man lätt kan skapa med hjälp av Dreamweaver. Du ska göra så att ett nytt litet fönster poppar upp samtidigt som filen ingang.htm öppnas. Skapa först en ny fil som du lägger i huvudmappen och som du döper till pop.htm. Öppna den nya filen och ge sidan titeln Pop-sidan och gör så att CSS-mallen itskolan.css aanvänds. Skriv in följande text på sidan: Välkommen till IT-skolan. På den här skolan lär vi ut allt som det går att lära sig när det gäller IT.
Öppna nu filen ingang.htm i Dreamweaver. Välj nu Fönster, Beteenden för att kunna se Beteendepaletten. Till höger om Händelser står det som förvalt 3.0 och nyare webbläsare. Du kan ändra här. Kontrollera till vad. Låt förvalt vara kvar. Klicka nu på <body> längst ned till vänster under arbetsytan eftersom body ju motsvarar hela webbsidan. Klicka sedan på +knappen till vänster i beteendepaletten. Välj där Öppna webbläsarfönster. Nu visas ett fönster där du ska ange följande och sedan klickar du på OK.

URL att visa: pop.htm
Fönsterbredd: 300
Fönsterhöjd: 100
Fönsternamn: pop

Förhandskgranska i webbläsarna. För mig fungerade det både i Netscape 4.7 och Internet Explorer 6. Gå sedan tillbaka till ingang.htm i Dreamweaver. Se till att <body> längst ned till vänster är markerat dvs i fetstil. Om du nu i beteendepaletten dubbelklickar på den händelse onLoad som du hara lagt in så kan du ändra på uppgifterna som du nyss lade in.
Klicka på +knappen och sedan på hämta fler beteenden längst ned. Nu öppnas i webbläsaren ingångssidan till Macromedias plats för att hämta fler Dreamweaver-beteenden. Undersök vad som finns Ändra l först från Browse extensions till All categories. För att kunna hämta extensions (beteenden) så måste man bli medlem och sedan logga in. Det finns en sida på svenska som informerar om vad det innebär att bli medlem. Därifrån kan man gå vidare till en sida på engelska om medlemskap. Härifrån kan man ansöka om att bli medlem.
En del extensions kräver när det gäller Dreamweaver 3 att man har hämtat och installerat Extension Manager. Detta program kan också hämtas hos Macromedia på samma plats som beteendena finns att hämta. Det är smidigt att installera beteeenden med hjälp av detta program så det rekommenderas att man hämtar det. I version 4 ingår detta program och man behöver alltså ej hämta det.

Om du sedan vill installera ett beteende så öppna först Dreamweaver och klicka sedan på den extensions-fil som du har hämtat. Då startar Extension Manager automatiskt och försöker sedan installera. Du måste acceptera eventuella villkor. En del extensions kräver Dreamweaver 4 och om man då försöker installera i Dreamweaver 3 så får man ett felmeddelande. Om installationen lyckas så går du till Dreamweaver och klickar på menyraden på Infoga. Längst ned finner du de beteenden som du har installerat.

I stället för att direkt klicka på filen så kan man naturligtvis också först starta Extension Manager. Sedan klickar man i Extension Manager på Arkiv, Install Extensions. Man bläddrar sig sedan fram till den fil som man har hämtat och klickar på OK.

Du hittar dina installerade beteenden i mappen Configuration/Behaviors/Actions i Dreamweavers programmapp.
Öppna nu filen links.htm. Vi ska nu göra en länk som gör att en sida popar up. Lägg in ett bindestreck samt texten Pop dvs - Pop längst till höger. Markera texten och i rutan för länk skriver du #. Då blir texten markerad som en länk. Gör nu likadant som vid punkt 2 ovan men istället för <body< så ska nu <a> längst ned till höger vara markerat. Nu skapas ett onMouseOver-beteende dvs när man för musen över länken så öppnas det lilla popup-fönstret. Förhandsgranska i webbläsarna. Gå sedan in i HTML (JavaScript)-koderna och ändra onMouseOver till onClick. Spara om sidan. Förhandsgranska i webbläsarna. Klicka på länken.
Öppna nu filen sp.htm och spara om den som sp2.htm Arbeta nu vidare med sp2.htm. Om inte beteendepaletten redan syns så välj Fönster, Beteenden för att kunna se Beteendepaletten. Klicka nu på <body> längst ned till vänster. Klicka sedan på +knappen till vänster i beteendepaletten. Välj där Öppna webbläsarfönster. Nu visas ett fönster där du ska ange följande och sedan klickar du på OK.
Du skall nu i beteendepaletten ändra onLoad till onUnload. Du kan göra detta i koderna såsom du gjorde ovan men det går också att när du har markerat ditt valda beteende dvs ordet onLoad i beteendepaletten att klicka på pilen nedåt och där ändra till onUnload. Vad är det som händer nu. Förhandskgranska i webbläsaren. Försök att stänga fönstret i webbläsaren. När du stänger fönstret så startas det igen. Ett knep som du kan använda är att gå in i Dreamweaver och ändra tillbaka till onLoad och att sedan spara om sidan. Gör gärna det men i facit finns dock onUnload kvar. Funktionen fungerar bara en gång i de moderna webbläsare som jag har testat. Andra gången man försöker så stängst fönstret i alla fall eller så blir det någon form av krasch.

Kontrollera i facit och gå vidare

Undersök hur alla sidorna ser ut och jämför med facit.
Fortsätt sedan med nästa övning.

Denna sida uppdaterades senast 01-10-22 av
tommy.maltell@pb.edu.jonkoping.se

Länkar:
Kursens ingångssida - Skolornas portal

Datorer, Internet och sökning en kurs av Tommy Maltell

Kapitel 25i - Dreamweaver 3 Svensk version - Övning 9

Datorer, Internet och sökning
en kurs av Tommy Maltell

Kapitel 25i - Dreamweaver 3
Svensk version - Övning 9