Grafikformat
Grafiken
är det som är roligast tycker jag med web-sidor. Synd bara att
det är den som gör att det tar tid att ladda ned sidor. Så
tänk på det, lagom är bäst även här. Bilder/texter omfattas av copyright-lagen så du kan inte ta andras bilder/texter utan att fråga om lov först. Respektera detta!
Det ligger ofta mycket arbete bakom en fin bild. Det finns speciella clip-art ställen där man kan ladda ned bilder, se listan lite längre ned samt Länkar och avsnittet Grafik.
Sök på http://www.google.com/ och använd denna sökfras +clip +art +free eller liknande får du upp många web-adresser att botanisera bland.
Datorskärmens yta är uppdelad i ett rutmönster (raster) av små punkter som bygger upp bilden. Varje enskild punkt kallas en pixel. Man talar ofta om bildens upplösning. Ju högre upplösning desto fler detaljer syns. Vanligtvis är bildskärmens upplösning c.a 72 punkter per tum (inch). Detta betyder att dina bilder behöver inte ha högre upplösning än så på dina Web-sidor. Ju högre upplösning desto större blir filen. Ju större fil desto längre tid att ladda ned.
Du kommer att stöta på begreppen 8-bitars, 16-bitars och 24-bitars färg. 8-bitars färg är alltså 256 färger, Fullt tillräckligt för de flesta bilder på din web-sida. Vanligaste formaten är.gif och .jpg (jpeg). JPG (JPEG) är utvecklat för att komprimera fotografier. Fotografier scannas ju in oftast med miljontals färger (24-bitars färg) och det skulle vara svårt att komprimera dem på vanligt sätt.
Gif-bilderna har 256 färger och finns i två format gif87a och gif89a. Den senaste kan göras transparent. Gif kan också omvandlas till interlaced och non-interlaced. Interlaced (sammanflätat) gif-format innebär att bilden leveras till sidan i flera omgångar, vilket gör att man kan få en uppfattning om hur bilden ser ut innan den laddats ned helt. Man slipper då vänta tills hela bilden laddats ned.
Olika program du kan ha nytta av är:
- Paint Shop Pro
- Photoshop
- Lview, senaste versionen
- Graphic Converter, (mac)
- Sunets mac-avdelning
Olika sidor med grafiktips:
Ladda ned grafik
Hämta inspiration från :)
Göra transparenta giffar
Att göra en gif transparent innebär att man *tar* bort bakgrunden så att bilden till synes *svävar* på din sida, dvs den
rektangulära bilden trollas bort. Vill du se skillnaden mellan en transparent och en icke transparent
bild? Klicka här så får du se. Här finns anvisningar hur du gör en gif transparent i Lview,
i Paint Shop Pro
eller i Photoshop 4.0.
Har bakgrunden flera färger får du försöka göra bakgrunden enfärgad först i ett bildbehandlingsprogram.
Det vanligaste nybörjarfelet
Jag tar upp detta på begäran. Jag har nämnt under avsnittet Html och Filnamn/Sökvägar beskrivit hur viktigt det är att skilja på stor och liten bokstav i filnamnet. Många
fastnar på detta när de ska lägga in bilder eller bakgrund i dokumentet. Webben bygger oftast på UNIX. Ett operativsystem som är case sensitive, dvs gör skillnad
på stora och små bokstäver. Fungerar inte en bakgrund eller en bild inte syns är det detta du ska kolla först.
BILD.GIF, bild.GIF, Bild.gif och bild.gif är 4
olika
filnamn fast stavningen är densamma.
Lägga in bilder i dokumentet
Glöm inte bort att skicka upp alla bilder du lagt in när du laddar upp ditt
dokument. Som nybörjare kan du börja med att samla allt i samma mapp både på din
HD och på servern. Om web-läsaren inte hittar någon
bild i katalogen att läsa in så blir det ett frågetecken alternativt en tom fyrkant
på websidan istället.
Har du mycket bilder och dokument kanske du bör tänka på att strukturera din "sajt". Lägga alla dokument i en mapp och bilder i en annan osv. Se mer om detta under HTML och Filnamn/Sökvägar.
Sitter
du mot browsern och jobbar, tänk på att använd
Reload/Refresh knappen eller tryck på CTRL + R om du vill se det riktiga resultatet om du gjort
någon ändring. Har du cachen aktiverad kan den gamla bilden
synas istället. Det kan vara lite förvirrande ibland.
Bilder lägger du in i ditt dokument med koden (tänk på att det i exempelkoden nedan kan bli en oönskad radbrytning):
<img src="bild.gif" height="12" width="14" alt="En kort bildbeskrivning">
Det är bäst att ange height och widht på bilden för då går inläsningen av dokumentet snabbare för browsern. Under förutsättning förstås att du anger den korrekta storleken på bilden. Försök inte att manipulera bilden genom att godtyckligt ange height och width. Det ökar bara inladdningstiden att göra så. Samt att en del browsers ändå visar orginalstorlek.
I och med att den läser in height och width på bilderna kan den reservera plats och fortsätta med inläsningen av dokumentet. Detta innebär att man kan rulla i dokumentet och börja läsa texten innan alla bilder laddats ned ordentligt.
Som service till blinda med taldatorer, besökare med text-browsers samt till dem som avaktiverat sin bildinläsning anger du en alternativtext (alt) till din bild, en kort beskrivning vad den föreställer eller vad det är. Det är även denna text som syns i den gula *rutan* som dyker upp när du för musen över den.
Vadå,
storlek? Hur ska jag kunna veta storleken på bilderna. Filen går
väl inte att mäta med linjal. Nej, men har du Paint
Shop Pro ser du längst ned till vänster bildens höjd
och bredd (ibland måste du föra musen över). Eller om du har det lilla smidiga programmet Lview ser du bildens storlek högst uppe, vid små bilder kan du få maximera fönstret med mittenknappen (den med en fyrkant på) för att kunna se siffrorna.
Vill du bara placera bilden i ditt dokument fristående från texten kan du använda dessa koder som står nedan här, tänk på att det kan bli oavsiktliga radbrytningar i exempelkoden:
koden för att lägga in denna bild är
<img src="knapp.gif" height="12" width="14" alt="Knapp">
då hamnar
bilden till vänster på skärmen i standard-läge.
Du kan centrera själva bilden
<p align="center">
<img src="knapp.gif" height="12" width="14" alt="Knapp">
Högerjusterad bild, koden för det är
<p align="right">
<img src="knapp.gif" height="12" width="14" alt="Knapp">
texten ligger för
nära
med hspace
fixar du det, ger mellanrum åt sidorna.
<img src="knapp.gif" height="12" width="14" hspace="20" alt="Knapp">
vspace=önskad siffra i pixel fixar mellanrum uppåt och nedåt
Är det den större del av sidan du ska justera, bild, ett stycke plus en tabell som alla ska vara centrerade.
Då ska du använda
<div align="center">det som ska justeras</div>
Andra värden är right eller left.
Sedan vill man ju gärna kunna styra vart bild och text kommer att hamna på sidan tillsammans. Det kan ju bli lite rörigt annars. Klicka här för att få fler exempel på bildplacering. Med en lite större bild så syns skillnaden lite bätttre. Tänk på att det kan bli oavsiktliga radbrytningar i exempelkoden nedan.
<img src="bild.gif" height="25" width="25" alt="bildbeskrivning" align="left">
bilden hamnar till vänster och texten samlas fint till höger om bilden.
<img
<img src="bild.gif" height="25" width="25" alt="bildbeskrivning" align="right">
bilden hamnar
till höger med texten samlad till vänster
Andra koder som bestämmer bildplaceringen är:
<img src="redknapp.gif" height="25" width="25" alt="bildbeskrivning" align="top">
<img src="bild.gif" height="25" width="25" alt="bildbeskrivning" align="middle">
<img src="bild.gif" height="25" width="25" alt="bildbeskrivning" align="bottom">
Det kan bli olika resultat om du lägger flera bilder efter varandra beroende på hur du kodar i editorn. Nyfiken? Bra till meny-placeringar, bilder bredvid varandra utan mellanrum emellan. Kolla här får du se vad jag menar.
En
ram? Lägg till border="5"
eller annan siffra (pixels),
<img src="bild.gif" border="5" width="50" height="50" alt="bildbeskrivning">
|
<table border="5" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="bild.gif" height="50" width="51" alt="bildbeskrivning"></td>
</tr>
</table>
Har du mycket bilder du vill visa på din sida? Då kanske du ska göra småbilder (thumbnails) och länka dem till de riktiga större bilderna, som du då lägger i ett annat html- dokument som öppnas när de klickar på den lilla bilden, oftast är det bäst att ha ett dokument för varje större bild. Du öppnar orginalbilden i ett bildbehandlingsprogram, använder dess *resize*-funktion och spar ned bilden med annat namn. Se till att du byter filnamn annars skriver du över orginalfilen.
Finns bilden ute på nätet, kan man ladda ner bilden
direkt därifrån (bör undvikas). Kan ge en viss fördröjning i inladdningen
av dokumentet, då browsern ska hämta in bilden. Dessutom är det ofta inte populärt hos den som står för servern där bilden ligger.
<img src="http://www.kalle.com/kalle/bilden_som_ska_hämtas.gif">
Observera! Du ska inte skriva hela adressen som du är van vid vid
det här laget, du utelämnar /index.html. Dvs.du adresserar till
mappen (kalle i detta ex.) där bilden-som-ska-hämtas ligger.
Länka bilder
Du
kan använda bilder som klickbara länkar. Ser du skillnaden nedan, bägge bilderna är länkade.
Vill du få bort ramen runt som visas vid länkade bilder, ange
border=0. Man ser ändå att det är en klickbar
bild genom att markören förvandlas till en knuten näve när
den förs över bilden, testa nedan! Många undrar över varför det ibland syns "små länkade streck" efter en länkad bild, här får du förklaringen. Tänk på att det kan bli oavsiktliga radbrytningar i exempelkoden.
Med länk-ram Utan länkram
Länka en bild med länk-ram.
<a href="fil.html">
<img src="bild.gif" height="40" width="40" alt="bildbeskrivning"></a>
Länka en bild utan länk-ram
<a href="fil.html">
<img src="bild.gif" border="0" height="40" width="40" alt="bildbeskrivning"></a>
Bakgrunder
Om du vill ha en enfärgad bakgrundsfärg anger du det i body-taggen med
bgcolor="#hexadecimalt värde/färgens namn".
Här finns en färgkarta med de vanligaste färgerna. Eller behöver du gå från hexadecimala till rgb? Här har du en
bra tabell. Här finns också en tabell med färgnamn och dess motsvarighet i hex, glöm ej # framför. Detta är en textfil så använd BACK-knappen för att komma tillbaks.
Annars har du en bra sajt här som beskriver mer om hexadecimala färger.
Istället för att använda en bakgrundsfärg kan
du fylla sidan med en bakgrundsbild. Du lägger in det också i
body-taggen i början på dokumentet. Tänk bara på att varken
bakgrundsbild eller bakgrundsfärg kanske inte syns vid utskrift (beror på besökarens inställningar ofta), vilket gör vit text på mörk bakgrund till ett dumt alternativ.
Tänk på att bildfilen inte ska vara för stor. Det räcker med en liten snutt. Browsern tar filen och kopierar den och fyller upp hela sidan, *tijlar* bilden. För snyggast resultat ange även en bgcolor snarlik till färgen på din bakgrundsbild så blir det snyggare vid inladdningen av bakgrundsbilden. Du kan läsa mer om bakgrunder under Webdesign avsnitt Trix samt att det finns bakgrunder att ladda ned under Länkar och Ladda ned grafik.
<body text="#000000" link="#0000ee" vlink="#551a8b"
alink="#ff0000" background="canvas1.jpg" bgcolor="#0000ff">
Animerade bilder
Animerade bilder har du väl träffat på ute på
nätet. Det är inte
så svårt att göra dem själv. Lite tid, lite tålamod,
ett bildbehandlingsprogram typ Paint Shop Pro och så Gifcon. Gifcon
för Windows kan du tanka ned här. Det är en Exe-fil,
du dubbelklickar bara på den. Ett mycket lättarbetat program,
det finns en mycket bra wizard (guide).
En animerad bild består av flera gif-bilder som har med hjälp av ex. Gifcon "limmats" ihop till en bild, tänk dig ett gammal ritblock man blädrar i så att det ser ut att vara rörliga bilder. Vill du se några exempel. Är du ute och surfar kan du om du tycker att de animerade bilderna stör dig stoppa dem genom att trycka på STOP-knappen i browsern. För er Mac-ägare så finns ett program som kan skapa animerade giffar, Gifbuilder - det finns även tips om andra program för just er på denna sida.
Klickbara bilder, image maps
Nu är det inte längre så krångligt att göra
klickbara image maps. Förr var du tvungen att lägga upp map-filer på servern.
Du skriver in allt i dokumentet direkt i HTML-editorn, client
side imagemaps. Tänk även på att en del stänger av bildvisningen och en del surfar med text-browsers,
under bilden med pytte-bokstäver kan du som service skriva länkarna med text och
länka via dem också för säkerhets skull.
Tänk på att det kan bli oavsiktliga radbrytningar i exempelkoden nedan, ett bild
exempel har du här till nedanstående kod. Första x,y betecknar fyrkantens översta/vänstra skärningspunkter
samt andra x,y betecknar fyrkantens nedersta/högra skärningspunkter, ett exempel hur det kan se ut ser du här.
<img usemap="#map" src="bild.gif" alt="Image-map" border="0"
height="300" width="350">
<map name="map">
<area shape=rect coords="x,y,x,y" href="fil.html" alt="alt-text">
<area shape=rect coords="x,y,x,y" href="fil.html" alt="alt-text">
<area shape=default nohref>
</map>
Överst står vilken bild som används till image maps samt vilken map (karta) som ska användas. Underst kommer själva map-kartan. Kopiera gärna denna kod och fyll i med för dig passande HTML-dokument och dina X och Y-koordinater.. Här har jag 2 st "fyrkanter", men du kan ha mer eller mindre. Att arbeta med rect, fyrkanter är enklast.
Olika former
Formen på den klickbara ytan anges via shape och med rect (rectangle), poly (polygon) eller circle. Med default kan du ange vad som ska hända om de klickar utanför dina "hotspots", antingen ingenting nohref eller ange href="annan/samma_sida.html".
Du anger det klickbara området med hjälp av coords, varje koordinat separerad med ett kommatecken. I en rectangle (rect) anges övre vänstra hörnets x,y samt nedre högra hörnets x,y koordinater.
Med polygon (poly) avses ett egendefinierat område. Det spelar ingen roll i vilken punkt man börjar, men alla punkter (x,y) ska anges i den ordning de kommer om man följer polygonens kant. Startpunkten är alltid synonym med slutpunkten, dvs en polygon är sluten. Att bestämma cirklar (circle) görs genom att ange dess centrum med x och y samt cirkelns radie med z.
Hur får man fram koordinaterna? Detta kan göras i ett bra bildbehandlingsprogram, exempelvis Paint Shop Pro eller i Photoshop. I Paint Shop Pro ser du x och y koordinaterna i statusraden, här hur du enkelt tar fram fyrkanterna i Paint Shop Pro.. I Photoshop tar du fram via Fönster, Visa Info den palett som visar x och y koordinaterna. Det finns även olika shareware program som gör hela jobbet åt dig. För den som drar sig för att skriva all kod ovan finns det givetvis hjälpmedel. Jag brukar använda ett litet och mycket enkelt program kallat Mapedit (pc). För Mac finns ett program som heter Mapper, se Sunet.
Alternativtext
Med alt i img så specificerar du den alternativtext som ska synas när exempelvis besökaren har bildvisningen avslagen.
Detta gäller själva image-map bilden. Du ska sedan även ange alternativtext
i varje area.
Anropa mapkartan
Sedan skriver du in din img-tagg som vanligt i ditt dokument där bilden ska ligga, här överst i kodexemplet ovan, n ersätter du med din bilds mått. För att anropa map-kartan som du har namngett lägger du till attributet usemap.
<img src="bild.gif" usemap="#map" height="n" border="0" width="n" alt="Image-map">
glöm ej # före mapnamnet! Ett fel som många ofta gör är att de glömmer bort sluttaggen för map, </map> och då brukar det icke fungera.
Artikel om image maps publicerad i Internetguiden 1997