HEADER/[Formatering för att lägga in bild eller bilaga i text]
Ändrad: 2009-03-03

För att lägga in en bild eller bilagelänk i ett dokument eller en ansökan används formatelementet (funktionen) ATTACHMENT i kombination med bilagehanteringen. Du måste alltså först lägga upp datafilen som en bilaga innan du kan använda funktionen attachement. Formatelementet attachement använder sedan de bilagor som är knutna till dokumentet. Bilden eller bilagan visas sedan där kodordet är placerat i texten.

De bilagor som länkas in i texten med attachement döljs normalt i listan över bilagor. Om inte alla bilagor används i texten visas de resterande bilagorna i listan över bilagor.

Formatexempel:
ATTACHMENT[ bilagenr | placering | description ]

Bilder visas direkt i texten med de alternativ som beskrivs nedan. Andra bilagor visas som klickbara länkar. Bilagor som inte är bilder och som inkluderas i texten använder inga andra direktiv än bilagenummret.

Eftersom ATTACHMENT är en komplex funktion så finns ett antal direktiv och växlar som kan användas till funktionen för att anpassa hur bilden placeras och eventuell annan information som kan visas.

HEADER+[Direktiv och växlar till bilagefunktion]

bilagenr

bilagenr är det nummer som bilagan/bilden har i listan över bilagor. första bilagan får 1, andra bilagan får 2… osv. De flesta direktiv används endast om bilagan är en bild.

noexclude

gör så att bilagan fortfarande syns i förteckningen över tillgängliga bilagor. Som standardinställning tas använda bilagor bort från listan. Om bilagelistan blir tom visas inte bilagehanteringen.

link

gör att en bild inte visas i dokumentet utan att det visas en klickbar länk till bilden i stället. Denna funktion är bra att använda om man har en stor bild med mycket information som man vill visa.

placering som exempelvis left, right, center eller inline

Om man inte sätter in något av ovanstående placeringsdirektiv visas bilden i mitten på sidan och att texten bryts där kodordet står och fortsätter sedan nedanför bilden (samma placering som center).

• left innebär att bilden hamnar till vänster på sidan och att texten flödar till höger om bilden.
• right innebär att bilden hamnar till höger på sidan och att texten flödar till vänster om bilden.
• center innebär att bilden hamnar i mitten på sidan och att texten bryts där kodordet står och fortsätter sedan nedanför bilden.
• inline innebär att bilden hamnar som om den är en del av textflödet, det vill säga att bilden visas i texten där kodordet står.

Har man därefter behov av att tvinga texten att börja under en bild som är satt right eller left kan man skriva kodordet [­CLEAR­] före den text som skall börja under bilden (se nedan).

description eller description=text

innebär att texten som skrevs in som bilagebeskrivning visas under bilden. Skriver man description=text visas det man skrev in som text i stället.

margin=n

ställer in marginalen till omgivande text. Som standardinställning är det satt en marginal på 0.5em (se måttenheter nedan) runt hela bilden. Formatexempel: för att sätt en marginal på 10 pixlar runt hela bilden skriv margin=10px, för att sätta en marginal på 5 pixlar över och under samt 10 pixlar till vänster och 0 pixlar till höger skriv margin=5px 0px 5px 10px (ordningen på talen är över - höger - under - vänster) (se även under måttsystem nedan).

padding eller padding=n

fyller avståndet mellan bilden och eventuell kantlinje med vald bakgrundsfärg. Som standardinställning är det satt en padding på 0.5em. Formatexempel: för att sätt en padding på 10 pixlar runt hela bilden skriv padding=10px, för att sätta en padding på 5 pixlar över och under samt 10 pixlar till vänster och 0 pixlar till höger skriv padding=5px 0px 5px 10px (ordningen på talen är över - höger - under - vänster) (se även under måttsystem nedan).

border eller border=n

visar en kantlinje med vald färg. Som standardinställning är det en kantlinje som är 1px bred, heldragen och svart. När man skall använda kantlinjer måste man sätta förutom linjebredd också typ och färg.
Färg kan anges med färgens namn på engelska, exempelvis red, blue, black… eller anges som ett hexadecimalt tal med ett #-tecken före (exempelvis #F0A040).
Kantlinjetyp anges som exempelvis solid (heldragen), dotted (punktstreck, fungerar inte på alla webbläsare), dashed (streckad)… Formatexempel: för att sätt en kantlinje på 1 pixel runt hela bilden skriv border=1px solid black

background eller background=n

Ställer in bakgrundsfärgen utanför bilden (eller i bilden om bilden är genomskinlig). Standardinställning för bakgrund är vit. Färg kan anges med färgens namn på engelska, exempelvis red, blue, black… eller anges som ett hexadecimalt tal med ett #-tecken före (exempelvis #F0A040). Formatexempel: för att sätt en vit bakgrundsfärg skriv background=white, för att sätta en hexadecimal färg skriv background=#8090A0 (ordningen på talen är 80 = röd andel (00-FF) - 90 = grön andel (00-FF) - A0 = blå andel (00-FF) )

Exempel på bilder och bilagor

Bildbilaga visad tillsammans med text

För att visa bilder läggs först bilden in som bilaga till dokumentet (för beskrivning av eventuella direktiv, se ovan).
Syntaxexempel: Efter att bilagan är inlagd lägger man in formatkoden för att visa bilagan (i exemplet används den tredje bilagan). ATTACHMENT[ 3 ] i texten.

(description: Fördelning över webbläsare under september månad 2004 MSIE <=5.x:20,59%, MSIE6.0:74,65%, NS/Mozilla:2,67%, Safari:1,81%, Övriga:0,24%) Syntaxexempel: Vill man få med bilagetexten också, skriver man ATTACHMENT[ 4 | description ] (bilaga 4).

(description: Besöksstatistik olika operativsystem September 2004) Syntaxexempel: För att visa bilden läggs först bilden in som bilaga till dokumentet. Där efter lägger man in nedanstående kod (i exemplet används den femte bilagan).
ATTACHMENT[ 5 | left | padding | margin| background | border | description= Besöksstatistik olika operativsystem September 2004].
[CLEAR]
(description: Fördelning av olika operativsystem September 2004) Ytterligare ett syntaxexempel: ATTACHMENT[ 6 | right | padding=1ex | margin = 2em | background = #F0E8D0| border = #303030 dashed 2px | description= Fördelning av olika operativsystem September 2004 ]

[CLEAR]Vill man att nästa textavsnitt skall fortsätta under bilden skriver man kodordet [­CLEAR­] först på raden.

bilagor i text

Om man vill lägga in länkar till sina bilagor i texten kan man använda kodordet ATTACHMENT till det (för beskrivning av eventuella direktiv, se ovan). Nedan följer några exempel:
I besöksstatistiken för september 2004 browserstat_2004-09.pdf (20 kB) sätts av ATTACHMENT[ 2 | noexclude ] (bilaga 2) (denna bilaga kommer fortfarande att visas i förteckningen över bilagor knutna till dokumentet) kan man läsa att Microsoft Internet Explorer är den dominerande webbläsaren

Grafik: statistik webbläsare sept 2004.gif (13 kB) , fördelning webbläsare sept 2004.gif (11 kB) (se browserstat_2004-09.xls (131 kB) för komplett data).

För att genererar ovanstående rad skrivs: "Grafik: ATTACHMENT[ 3 | link ] (bilaga 3), ATTACHMENT[ 4 | link ] (bilaga 4) (se ATTACHMENT[ 1 ] (bilaga 1) för komplett data)."

Bilagor inlagda i en punktlista

Om man vill lägga in länkar till sina bilagor i listor kan man använda kodordet DOT_LIST tillsammans med ATTACHMENT till det (för beskrivning av eventuella direktiv, se ovan). Nedan följer några exempel:

• browserstat_2004-09.xls (131 kB) sätts av ATTACHMENT[ 1 ] (bilaga 1)
• browserstat_2004-09.pdf (20 kB) sätts av ATTACHMENT[ 2 | noexclude ] (bilaga 2) (denna bilaga kommer fortfarande att visas i förteckningen över bilagor knutna till dokumentet)
• fördelning OS sept 2004.gif (10 kB) sätts av ATTACHMENT[ 6 | link ] (bilaga 6)

Måttsystem för direktiv till bildbilagor

Om man vill använda de funktioner som använder mått tll en bild används de måttsystem som är tillgängliga för CSS-systemet. De olika måttsystemen beskrivs också nedan.

Inom CSS används två typer av måttsystem: relativ och absolut måttangivelse. Relativa mått är att föredra före absoluta mått eftersom relativa mått lättare anpassar sig mellan olika visningstekniker (ex datorskärm till laserskrivare).

Relativmått som används är:

• em: 'font-storleken' på aktuell font
• ex: 'x-höjden' på aktuell font
• px: pixel, relaterat till visningsteknik

Exemel:

margin = 0.5em
margin = 1ex
border = 5px solid black

Måttenheten 'em' är lika med den aktuella fontstorleken. Värdet som skrivs in är den faktor som skall multipliceras med fontstorleken. Detta gör att om någon vill använda stor text får denna person förändrade avstånd.

Måttenheten 'ex' fungerar identiskt med 'em' men den använder höjden av lilla 'x' vilket är ungefär lika med standardhöjden för gemener (små bokstäver) i aktuell font.

Måttenheten 'px' är relaterad till visningsteknikens upplösning som exempel kan nämnas att de flesta datorskärmar skiljer sig från det som definieras en "vanlig skärm". Därför skall tekniken anpassa pixelmåttet till aktuell visningsteknik.

HEADER/[Mer information]
I listan nedan finns mer information om formatelement och dess användning.

• Avancerad formatering av text, översikt
• Formatering, bild och bilagor i text
• Formatering, dekorations- och karaktärsformatering
• Formatering, listor av olika slag
• Formatering, länkar
• Formatering, rubriker, avdelare och informationsrutor
• Formatering, specialtecken
• Formatering, sökfunktion med uppställning av sökresultat
• Formatering, tabeller

Attachments

browserstat_2004-09.pdf

Besöksstatistik September 2004
File size: 20 kB