|
Administreres af: |
| Anvendelse af billeder | Tilbage til oversigtstabel Tilbage |
Af: novicen.dk
Al den grafik, som anvendes på hjemmesider er retteligt billeder. Fordelen ved anvendelse af billeder er, at der kan komme meget mere "liv" på hjemmesiden idet detaljeringsgrad og farveanvendelse ikke bliver begrænset af browserens fortolkningsmuligheder men alene er afhængig af det grafiske element, som anvendes.
For billeder indsat i HTML-dokumenter er der kun få muligheder for placering/justering og det er derfor hensigtsmæssigt at kende de metoder der er for at omgå dette. Anvendelse af tabeller er en kæmpe hjælp og forståelse for forskellen mellem forgrundsbilleder og baggrundsbilleder samt for de dybdemæssige placeringsmetoder (HTML-dokumentets lag-deling) der giver mulighed for at lægge elementer ovenpå (udenpå) hinanden er væsentligt for et hensigtsmæssigt (brugervenligt) layout.
Til brug på Internet er der kun tre gyldige formater og du kan altså ikke bare vælge dit foretrukne format i flæng. Allround brugbare er typerne .GIF (knapper med tekst, stregtegning, store ensartede flader, kan gøres gennemskinneligt, bruges i animationer) og .JPG (fotos, kan komprimeres). Disse virker i alle browsere, både gamle og nye. Et nyere format, som kun er understøttet af de nyere browsere (typisk fra version 4) er .PNG, som indeholder en stor del af de foregående nævnte egenskaber men PNG kan ikke gøres gennemskinneligt.
Du kan læse mere om de forskellige billedtyper her: http://www.html.dk/artikler/00029/
| Til top |
Den principielle forskel på for- og baggrundsbilleder er, at forgrundsbilleder fremstår som et element der fortrænger andre elementer fra den plads, hvor de indsættes. Det er altså ikke mulig at placere andre elementer oveni eller ovenpå et forgrundsbillede. Modsat forholder det sig med baggrundsbilleder, hvor billedet ligger som et underliggende element der ikke fortrænger andre elementer. Der kan altså placeres andre elementer ovenpå - tekst, billeder eller andre objekter: tabeller, formularer og andet. En tabel vil således ikke kunne blive mindre end de forgrundsbilleder der måtte være indsat i cellerne, hvorimod anvendelsen af baggrundsbilleder ingen indflydelse har på dette.
 |
<IMG src="billeder/misser.jpg" width="320" height="220" border="0">
Den angivne src er her vist som reference til en relativ placering til en billedfil i mappen /billeder men der kan også anvendes absolutte angivelser (eks.: http://www.novicen.dk/billede.jpg). Alle øvrige attributters værdier er her angivet i pixel. Du bør til forgrundsbilleder altid angive størrelsen på billedet i pixel og du bør altid indsætte billedets eksakte størrelse. Såfremt billedet ikke har korrekt størrelse i forhold til, hvad du ønsker, bør du tilpasse det i dit fotobehandlingsprogram, inden du anvender det på dit web-sted. Hvis du blot ændrer i koden, for at tilpasse størrelsen kan du risikere, at billedet ser underligt ud, når det vises i browseren og under alle omstændigheder vil der i så tilfælde ikke være overensstemmelse mellem billedets fysiske fil-størrelse og den størrelse, som det burde have. Dette forhold er selvfølgelig mest relevant, hvis du krymper billedet i koden, hvor du således stadig har samme filstørrelse.
Ønsker du at anvende baggrundsbilleder, kan disse indsættes ved brug af en separat attribut på den aktuelle TAG. Baggrundsbilleder vil altid fliselægge sig (gentages lodret og vandret - eng.: tile) i hele det område, som den pågældende TAG strækker sig ud over.
<BODY background="baggrundsbillede.gif">
eller
<BODY style="background-image:URL(baggrundsbillede.gif);">
 |
|
Baggrundsbilleder vises i browservinduet med deres eksakte pixel-størrelse og der findes ingen mulighed for at ændre på dette.
Der kan ikke anvendes animationer som baggrunde. Det vil kun være animationens første billede, som vises.
Anvendelse af style-attributten kan i enkelte situationer give manglende visning af baggrundsbilledet i Explorer 4. Oplever du dette kan du foretage en samtidig indsætning af background-attributten, hvorved du får to henvisninger til dit baggrundsbillede. Det vil kunne mindske hyppigheden for fejlvisning men du kan - så vidt vides - ikke sikre dig 100% i netop dette tilfælde.
Du bør være opmærksom på, at din mappestruktur skal være specielt opbygget, for at du med sikkerhed kan anvende baggrundsbilleder indlænket via et eksternt stylesheet i alle browsere. Som anbefaling vil jeg foreslå, at baggrundsbilleder altid indsættes der, hvor de skal bruges på den aktuelle TAG direkte i dokumentkoden. Navngivning foretages hensigtsmæssigt og ved evt. udskiftning kan det eksisterende billede overskrives med det nye.
Uanset om du anvender for- eller baggrundsbilleder, skal du være opmærksom på, at billederne ikke er en integreret del af din hjemmeside. Du skal altså håndtere alle filer særskilt, når du skal have dit web-sted lagt på Internet.Med anvendelse af billeder på hjemmesiden skal (bør) opmærksomheden i særdeleshed rettes mod den fysiske fil-størrelse, som den samlede browservisning andrager. Du kan som udgangspunkt regne med, at summen af alle filer, der anvendes i den aktuelle fremvisning, ikke bør overstige ca. 100 kB. Dette gælder altså fil-størrelsen for dit HTML-dokument lagt sammen med fil-størrelsen for samtlige de grafiske elementer som anvendes i HTML-dokumentet (både for- og baggrundsbilleder). Årsagen er, at browseren henter en kopi af alt materiale, som aktuelt bliver fremvist i browservinduet og brugeren derved "påtvinges" en tid til at hente filerne.
| Til top |
Placering/justering af billeder
Der er kun to direkte muligheder for justering af forgrundsbilleder. Billederne kan enten stilles til venstre eller til højre. I begge tilfælde med forskellige angivelser for, hvordan den hosstående tekst placerer sig i forhold til.
Billedet ved siden af denne tekst er stillet til højre og med angivelse af tekstsomløb. Justeringen foretages med attributten align, hvor standard (hvis attributten mangler) er "bottom".
<P><IMG src="billede.jpg" width="180" height="240" border="0" align="right" alt="Billede af Liv">Billedet ved siden af denne...
Hvis du fører musen ind over billedet og holder den stille et øjeblik, vil du se virkningen af alt-attributten, som er en lille informationsboks, der viser den indskrevne tekst (desværre virker denne ikke i alle browsere) og du vil ved (gen)indlæsnig af dokumentet kunne se teksten skrevet, hvor der er reserveret plads til billedet. Teksten vil også blive vist hos de brugere, som ikke indlæser billederne på web-stedet.
Hvis billedet derimod indsættes i et tekststykke blot med standardværdien for align-attributten, vil den foranstående og den efterfølgende tekst placeres forneden på billedet og liniehøjden vil se ud til at være lige så stor som billedet.
Her er 
indsat.
Hyppigst anvendte værdier til align-attributten er: bottom (standard), left og right. Begge sidstnævnte vil give tekstomløb, som skitseret ovenfor og attributten vil påvirke den tekst, som er indsat efter/under billedet men ikke den tekst, som er indsat forud for.
Skal et billede centreres, kan dette kun gøres uden tekstomløb og det er nødvendigt at håndtere billedet, som var det et stykke tekst. Bliver billedet indsat i en centrerings TAG (<CENTER>..</CENTER>), i en P-TAG (<P align="center">..</P>) eller evt. en DIV-TAG (<DIV align="center">..</DIV>) vil placeringen følge den påtvungne centrering.
Er der brug for mellemveje mht. placeringen af billeder kan der anvendes tabeller. Samme muligheder for placering er gældende indenfor en celles afgrænsninger på tilsvarende vis, som de er for hoveddokumentet (indenfor BODY TAG'ens afgrænsninger).
Har du brug for ekstra luft ved siderne (begge på en gang) eller i top og bund (også begge samtidig), kan du anvende attributterne vspace og hspace.
| Til top |
Har du brug for at indsætte en kant omkring et billede vil dette kunne angives med attributten border. Farven på kanten er som udgangspunkt sort men er afhængig af, om billedet gøres klikbart - anvendes som link. Bruges billedet som link vil kanten antage samme farve som linkfarverne er sat til, hvilket typisk er: blå for ikke besøgte links, violet for besøgte links og rød for links, hvorpå der klikkes.
 |
| Til top |
Placering af baggrundsbilleder kan styres ved at indsætte en style, der påvirker den TAG, hvor baggrundsbilledet er indsat. Stylen kan indsættes i eksternt stylesheet og vil have effekt i alle nyere, større browsere bortset fra Netscape version 4.x
<BODY style="background-position: top;">
Værdien for position kan antage følgende: top, center, bottom, left og right. Billedet placeres i henhold til valg og flere valg kan foretages adskilt med mellemrum (background-position: top right;). Der må ikke foretages tvetydige valg (eks. samtidig valg af left og right).
Ønskes et baggrundsbillede, der ikke scroller, er det muligt at anvende background-attachment: fixed; med samme begrænsninger i browservirkning.
| Til top |