Artikeln förutsätter att du läst de föregående artiklarna i Dreamweaver Guide.
Flytande bilder
Skapa text som omsluter bilder
Så här gör du för att lägga in en bild med DreamWeaver
- Uppe till vänster finns det ett alternativ i rullmenyn som heter "common". Om det inte är förvalt - välj det alternativet.
- En av symbolerna, föreställande ett träd, till höger om rullmenyn, är den symbol som du ska använda dig av för att lägga in bilder. När du håller muspekaren över symbolen ska det komma fram en text "Images: image". Om det gör det har du kommit rätt. Klicka på symbolen!
- En ruta kommer upp där du kan bläddra dig fram till den bild som du vill använda. En fördel är om du redan har en bild inlagd i katalogen för din hemsida. Men, om du hellre vill använda dig av en bild som redan finns på nätet så kan du alternativt skriva in URL:en till bilden på nätet.
- Klicka OK.
Layouten på det som komma skall må se lite knepig ut - men det är enbart för att du ska förstå hur "float" fungerar...
Exempel på en bild :
Om du försöker att skriva in text till höger om bilden, som den här texten, så blir det problem. Troligtvis hade det blivit blivit snyggare om bilden varit omsluten av texten istället. Det är något som du enkelt kan åstadkomma med CSS-egenskapen float.
Genom att addera lite kod med inline CSS style="float:left;" till bild-taggen så skapar du ett flytande element som kommer att lägga sig till vänster om texten. Ännu en bild innan den föregående bilden tagit slut resulterar dock i detta:
Om du lägger in en till bild innan det föregående flytande bildelementet "tagit slut" kommer det också att lägga sig till höger. Om du istället vill att det efterföljande bildelementet ska lägga sig till vänster så måste du använda dig av CSS-egenskapen "clear", förklarat nedan.
Så här används "clear"
Här är "style:clear:left;" tillagt till img-taggen på den undre bilden. Till vår "förvåning" lägger sig dock bilden iallafall inte direkt under den föregående bilden. Det beror på att bilden är inline, dvs en bild lägger sig "på rad" och inte under det föregående elementet.
Med "display:block" adderat till den undre img-taggen blir dock resultatet det önskade. Vi har alltså valt att den undre ilden ska behandlas som ett block-element, men vi måste iallafall använda clear:left för att få önskat resultat. Förstår du? Om inte - jämför med källkoden på den här sidan genom att välja "Visa --> Källkod" i menyn på din webbläsare.
Prova själv
- Öppna webbsidan som du skapade tidigare.
- Se till att hur ganska mycket text inlagd, som på exempelsidan.
- Flytta markören till vänster längst upp i texten och klicka sedan på bildsymbolen uppe i vertygsfältet.
- Välj den bild som du vill använda dig av eller länka till en bild på nätet genom att använda rutan för URL.
- I koden efter attributen för img-taggen lägger du till
float:left; margin: 0 10px 0 0;så att det ser ut såhär:
<img src="http://www.webbdesigna.se/images/testbild.jpg" width="143" height="107" style="float:left; margin: 0 10px 0 0;">
Ska du följa strict CSS-standard så ska dock koden se ut enligt nedanstående eftersom width och height (bredd och höjd) har med utseende att göra och ska således styras av CSS:
<img src="http://www.webbdesigna.se/images/testbild.jpg" style="width:143px;height:107px;float:left; margin: 0 10px 0 0;">
Observera att inline CSS har använts till formateringen istället för stilmallen. Om du vill att varje bildlelement i koden ska vara flytande, och istället använda inline CSS för att markera undantagen, så lägger du bara in denna kod i din stilmall.
div#huvudtext img {float:left; margin: 0 10px 0 0;}
Filer för nedladdning
Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning (Om du använder inline CSS): HTML (.txt)
Filer för nedladdning (Om du använder stilmall): HTML(.txt) CSS (.txt)
Nästa artikel: Formatera listor
