Datorer, Internet och sökning
|
| 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.
<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 skall tala i HTML-termer så är BODY elementnamnet och BGCOLOR attributets namn. Färgen är attributets värde.
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 som installerar grundprogrammen i en dator inte gör de maximala inställningarna när det gäller färger .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.
| 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 95/98 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 |
Öppna en ny sida som du sedan omedelbart sparar som test.htm i huvudmappen skolan. Ändra testsidans bakgrund till vit och titel till IT-skolans testsida. Testa med att lägga in olika gärna webbsäkra bakgrundsfärger och klicka på HTML-fliken längst ned tilll vänster och kontrollera så att koderna är rätt när det gäller färgen. Du kan också ändra direkt i HTML-koderna för att testa olika färger.
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 många olika program för detta. Ett smidigt litet sharwareprogram är LviewPro som man liksom det större sharewareprogrammet Paint Shop Pro kan hämta på Internet hos Tucows. Man kan också använda bildbehandlingsprogrammet Microsoft Image Composer som medföljer FrontPage 98.
Starta programmet Microsoft Image Composer och öppna där bildfilen herrgard.jpg. Spara om filen i samma mapp som smagard.jpg så att du inte förstör den ordinarie bilden. Klicka på Tools och välj Arrange. Se till att det finns en bock framför texten "Keep aspect ratio" och ändra sedan Width till 100. Height ändras nu automatiskt till 66. Välj Apply och bilden blir mindre men bakgrunden är fortfarande vit och för stor. Klicka på Arrange och välj Return to Home position. Spara om filen. Markera bilden och välj File och sedan Composition Setup. Ändra Width till 100 och Height till 66. Klicka på OK och spara sedan om bilden.
Kontrollera nu storleksförändringen genom att från skrivbordet välja Den här datorn. Klicka dig fram till din mapp med bilder. Klicka på Visa och välj sedan Detaljerad lista. Här är bilderna så små att det inte blir så stor skillnad. Filen herrgard.jpg är 8 kb och smagard.jpg 4 kb. Om man arbetar med betydligt större bilder så påverkas tiden för nedladdning av bildfilen genom en sådan här åtgärd. På en särskild sida jämför jag mitt resultat med resultatet vid användning av programmet Lview skillnaden i storlek mellan bilderna.
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.
Bilden överst på ingångssidan för konstskatter i Jönköpings kommun gjordes med grå bakgrund på den tiden då alla bakgrunder var grå. Gå till denna ingångssida med URL-adressen http://www.pb.edu.jonkoping.se/konst/Konstskatter.html och klicka på bilden längst upp med höger musknapp. Spara den sedan som konst.gif i undermappen bilder.
Öppna nu IT-skolans testsida och lägg in bilden konst.gif överst på sidan. Centrera bilden.
Markera bilden och klicka sedan på Select a color to be made transparent-knappen på Image Toolbar (pilen till höger om A).
Titta på bilden i din webbläsare. Gå sedan tillbaka och ändra bakgrunden till lite olika bakgrundsfärger. Som du ser när du väljer olika bakgrunder så fanns från början på vissa ställen mitt i bilden samma färg som bakgrunden. Även här har bilden blivit transparent. Detta komplicerar möjligheterna att välja vilken bakgrund som helst. Välj därför till sist den grå som ibland kallas silver. Om man klickar på HTML-fliken så ska man hitta <body bgcolor="#C0C0C0">.
Bilder som laddas ner i etapper
När det gäller en GIF-bild på en webbsida så kan man när man har klickat på bilden med höger musknapp för att sedan välja Image Properties välja att göra bilden Interlaced dvs bilden laddas ned i etapper. På samma sätt kan man när det gäller JPEG-bilder välja att ge bilden Progressive Passes. Man måste då ange 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. Ändra herrgårds-jpeg-bilden på ingångssidan så att den får 3 progressive passes. När du sparar om sidan vill FrontPage spara den förändrade bilden i huvudmappen. Acceptera detta.
Lägg på testsidan in herrgard.gif som finns i mappen bilder. Centrera bilden och gör bilden interlaced. När du sparar om sidan vill FrontPage spara den förändrade bilden i huvudmappen. Acceptera detta.
På en testsida har jag förutom konstbilden som ligger överst lagt in två bilder som ser likadana ut. Den översta av dessa två är en interlaced gif-bild på 207 kb och den understa en jpeg med 6 progressive passes 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
Vanligen använder man enbart elementet TITLE 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 so.htm ligger i undermappen institut:
<meta HTTP-EQUIV="Refresh" CONTENT="5; URL=institut/so.htm">
För so.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">
När vi lade in frames skapades också koden <base target="main"> mellan <head> och </head> i filen ingang.htm. Så länge den koden finns kvar så öppnas det ett nytt fönster när man klickar på länkarna i filen ingang.htm. Om man tar bort koden så öppnas det inget nytt fönster när man klickar på länkarna. Låt koden vara kvar.
Undersök hur alla sidorna ser ut och jämför med facit.
Fortsätt sedan till kapitel 24x som är gemensamt för FrontPage 98-kursen och FrontPage 2000-kursen.
Denna sida uppdaterades senast
00-05-16 av
tommy.maltell@pb.edu.jonkoping.se
Länkar:
Kursens ingångssida
Kapitel: 0 1 2 3a 3b 3c 4 5a 5b 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20a 20b 21a 21b 21c 21d 21e 21f 21g 21h 22a 22b 22c 23 26 30 31 32 33 37
Skolornas portal
© 1999, 2000 Tommy Maltell