Logga in
Bilder kan förekomma i olika former på webbsidan, som bakgrunder, dekorer, linjer, logotyper mm. Anledningen till att använda en bild kan tex vara att förstärka ett budskap eller helt enkelt att göra webbsidan trevligare att titta på. De bildformat som kan användas på webbsidor idag är GIF, JPEG och PNG. Har du bilder i andra format måste du konvertera dem först i ett bildbehandlingsprogram. Läs mer om bilder i guiderna om Photoshop »
I den här övningen visar vi hur du infogar olika typer av bilder som vanlig bild och som bakgrundsbild.
OBS! Du hittar de olika bilderna som används i övningen längst ner på sidan »
Bilder kan placeras i olika delar av sidans kod. När du infogar bilden i Designläge placeras den där textmarkören befinner sig. En bild infogar du med knappen "Insert Image" (Infoga/Bild) eller med menyn "Insert/Image..." (Infoga/Bild...):
| Placera textmarkören där du vill infoga bilden:  |
Använd knappen "Insert Image": |
Välj den bild du vill använda:
Alla bilder som inte ligger i din Site (Plats) rotmapp bör
du låta Dreamweaver kopiera dit. Risken är annars stor
att den inte följer med när du senare publicerar
webbplatsen ». (Läs
mer om Site/Plats ») För att bilden ska kopieras
till din rootfolder i din Site väljer du "Ja":
Passa på att döpa om bildfilen om du behöver det.
Tänk på att ÅÖÄ, mellanslag och versaler
kan orsaka problem när webbplatsen senare publiceras...
...så här trevligt blir det med Drömvävarens
logotype!
Kolla din kod. Märket för bild är <IMG SRC> (image source) och attributen "width" och "heigth" anger bildens bredd/höjd.
Egentligen behövs inte attributen "width" och "heigth" för att bilden rätta storlek ska visas. Det underlättar dock för webbläsaren att veta vilken storlek de olika bilderna har under laddning av sidan så att utrymme kan reserveras innan bilden hunnit laddas ner.
Bildens storlek är från början 100% (originalstorlek). Du kan ändra storleken i Dreamweaver men det rekommenderas inte då bilden kan bli oskarp. Dessutom är den fysiska filstorleken lika stor oavsett om bilden visuella storlek minskas till 10% vilket ju innebär att den blir onödigt tung att ladda ner i webbläsaren, speciellt vid långsamma uppkopplingar som modem etc. Det är bättre att ändra bildens storlek i ett bildbehandlingsprogram och infoga den på nytt i Dreamweaver.
När du ändrar bilden storlek genom att dra i ett hörn kan du samtidigt hålla SHIFT intryckt för att minska
bilden bredd och höjd proportionellt så att den
inte blir förvrängd:
Du kan se bildens nya storlek på paletten "Properties"
(Egenskaper). Att storleken ändrats visas genom att värdena
är i fet stil:
För att återställa bilden till sin originalstorlek högerklickar du på den och väljer "Reset Size" (Återställ storlek):
Bilderna placeras på samma sätt som text, dvs i rader och stycken i förhållande till webbläsarens kanter. Du kan alltså lägga bilden i en egen rad <BR> eller stycke <P> eller ange hur den ska placeras i förhållande till texten i samma stycke.
Standard för bilder (browser default) är att de placeras på samma rad i förhållande till texten. Du kan påverka hur text och övriga objekt, tex andra bilder, ska placeras i förhållande till bilden med ett attributet "ALIGN" som läggs inom märket <IMG SRC>
Bilden justerad till vänster om texten:
Bilden justerad till höger om texten:
En till synes oregelbunden form på bilden innebär inte att texten kan figursättas nära bildens form eftersom alla bilder är rektangulära även om de som i exemplet nedan har samma färg runt bakgrunden. Den "gula symbolen" är ett sätt för Dreamweaver att visa var bilden är placerad och varifrån attributet ALIGN="LEFT" gäller och den syns naturligtvis inte i webbläsaren.
De olika attributen "baseline", "absbottom", "top" och "absmiddle" syns inte i din text om inte bilden är mindre än radens höjd (bokstävernas höjd). I exemplet nedan ser du en mycket liten bild som placeras i förhållande till de olika textraderna. "Baseline" är alltså textens basyta och "absbottom" är nederkant på bokstäverna. (Stödlinjerna är bara till för att du lättare ska se de små skillnaderna...)
I exemplen nedan ser du hur den lilla dekorbilden justeras i förhållande till en större bild samt texten till höger. Det är alltså den gröna dekorbilden som har de olika attributen för justering ALIGN:
  default
(standard) |
|
| align="absmiddle" |
| align="texttop" |
| align="absbottom" |
Avstånd mellan bilden och andra objekt bestämmer du med attributen VSPACE och HSPACE där du i pixlar kan ange avstånden i höjd- och sidled. I exemplet nedan är avstånden angivna till 15 pixlar, dessutom är bilden justerad (align) till vänster:
...resultatet blir att texten "figursätts" en bit
ifrån bilden:
Standard, inget avstånd:
hspace="20"
vspace="15"
Om du vill lägga bilden ovanför eller under textrader utan avstånd använder du enklast en brytning <BR> (SHIFT+ENTER). vill du kunna justera bilden och texten separat måste de ligga i egna stycken <P> (ENTER). För mer avancerad placering av bilder andra objekt måste du använda Tabeller ».
I exemplet nedan är den ena bilden placerad under den andra utan användning av någon justering. Det som gör att de placeras under varandra är helt enkelt bredden på fönstret. För att vara säker på att de ligger under varandra oavsett fönsterbredd i webbläsaren är att bryta med ENTER eller SHIFT+ENTER (<P> eller <BR>)
Bildplacering utan särskild inställning:
...blir en annan om fönsterbredden ökar:
Snygga kantlinjer har alltid varit svårt att få med vanlig HTML. Idag kan du använda CSS » för att formatera utseende på kantlinjer i tabeller mm. Det säkraste sättet att få det rätta utseendet på dina kantlinjer är ändå att göra dem själv som bilder. (Läs mer i guiderna om Photoshop om hur du gör dina egna bilder »)
Här är bilderna som används i exemplen nedan. Högerklicka och spara dem om du vill prova själv:
linje1.gif: |
 5
pixels bild till linje (svart) |
linje2.gif: |
 5
pixels bild till linje (orange) |
linje3.gif: |
 5
pixels bild till linje (blå) |
 5
pixels bild till linje (grön) |
Ett enkelt sätt att få olika längd på linjen är att ha en bild som egentligen kan vara endast 1 pixel bred och 1 pixel hög. Genom att ändra bredd och höjd i HTML-koden med attributen "width" och "height" kan du få den längd och bredd du själv vill ha.
"5pixdot_green.gif" i bredd 400 pixlar och höjd 2 pixlar:
"5pixdot_green.gif" i bredd 400 pixlar och höjd 1 pixel:
"5pixdot_blue.gif" i bredd 200 pixlar och höjd 3 pixlar:
"5pixdot_orange.gif" i bredd 500 pixlar och höjd 5 pixlar:
"5pixdot_blue.gif"
i bredd 1 pixel och höjd 50 pixlar.
Dessutom är den justerad till vänster med "align=left".
Om du vill ha tonade, streckade eller prickade linjer är det bästa sättet att göra dem i rätt storlek från början. Tänk på att bilden blir förvrängd när bredd och höjd ändras och det kan ge ett märkligt utseende. En metod som kan användas just på prickade och streckade linjer är att bilden består av endast 1 prick och ett mellanrum. Genom att placera flera sådana bilder efter varandra så ges effekten av en sammanhängande linje. i exemplen nedan används bilder som består av fler än 1 prick:
"linje1.gif" används 5 gånger:
"linje1.gif" används 3 gånger:
"linje2.gif" används 3 gånger:
"linje3.gif" används 5 gånger:
...den trevliga avdelaren mellan de olika avsnitten i övningarna
är ju också en Bild:
Det finns ett snabbt sätt att placera en avdelare utan att använda en bild för ändamålet. I HTML finns sedan länge märket <HR> (Horisontal Rule) som kan läggas mellan stycken <P>.
Använd menyn "Insert/Horisontal Rule" (Infoga/Vågrät linje) för att få en heldragen linje:
<hr>
Du kan ändra utseendet på linjen:
<hr align="center" width="400" size="5">
<hr align="left" width="500" size="3" noshade>
Något som du inte kan välja i Dreamweavers menyer utan får skriva i koden är färg på linjen. Det syns inte i Dreamweaver men fungerar i de flesta webbläsare:
<hr align="left" width="500" size="3" noshade color="#008080"<hr align="left" width="500" size="3" noshade color="#006699"
Bilder som visas bakom objekt och text på en webbsida ligger i bakgrunden och anges med attributet "background" till märket <BODY>. Du kan också använda bakgrundsbilder i Tabeller ». Idag finns det dessutom andra metoder än "vanlig HTML" om du vill placera bilder bakom text; CSS ». Här visar vi hur du använder bakgrundsbilder på hela webbsidan.
Viktigt att veta är att bakgrundsbilder upprepas åt höger och nedåt (tiling). Det innebär att bilden upprepas som ett mönster om den är liten. Är den så stor så att hela bilden inte syns i webbläsarfönstret så upprepas den inte.
En
liten bild upprepas i ett mönster (tile) åt höger
och nedåt när den används som bakgrundsbild. Om du
använder CSS » kan hindra att den upprepas men inte med "vanlig HTML".
Exempel 1.
Klicka här eller på bilden för att se den i verklig
storlek »
Exempel 2.
Klicka här eller på bilden för att se den i verklig
storlek »
Exempel 3.
Klicka här eller på bilden för att se den i verklig
storlek »
Bakgrundsbilden anger du med menyn "Modify Page Properties" (Ändra/Sidegenskaper):
I
det här exemplet används en större bild som är
neutral i tonerna för att den svarta texten ska synas bra mot
bakgrundsbilden.
Exempel 4.
Klicka här eller på bilden för att se den i verklig
storlek »
Exempel 5.
Klicka här eller på bilden för att se den i verklig
storlek »
Du kan låsa en bakgrundsbild så att den ligger fast och inte scrollar med när du bläddrar i texten. Effekten kallas ibland för "watermark" (vattenstämpel) och anges med attributet "bgproperties="fixed". Som du tyvärr inte kan välja i Dreamweavers menyer utan måste skriva själv i koden som ett attribut till märket <BODY>:
<body background="bakgrund1.gif" bgproperties="fixed">
Exempel 6. Bakgrundsbild som inte är låst »
Exempel 7. Bakgrundsbild som är låst »
En kantlinje runt bilden kan du få med attributet "border". Ange önskad bredd på kantlinjen, du kan inte bestämma färg, den blir svart som standard.
Exempel på en 5 pixlars kantlinje:
Högerklicka på den bild eller länk till bilden du vill använda och spar den på din egen dator:
5
pixels bild till linje (svart)
5
pixels bild till linje (orange)
5
pixels bild till linje (blå)
skriv ut »
