Lektion 4: sida 1 av 3

 

 

Till kursens framsida

Sida 2 av 3 »

 

 

 

Lektion 4

I förra lektionen gick vi igenom vad tabeller är för något och hur de fungerar. Här ska vi börja litet lätt med att titta närmare på hur man kan få bilder att uppföra sig ungefär som man vill.

Därefter tittar vi på en ny sorts länk: bokmärkeslänkar, som kan vara bra ifall man vill få ordning på en sida med särskilt mycket innehåll.

Men det viktigaste sparar vi till sist: vi ska lära oss att skapa formulär. Det innebär att vi kommer att se hur man placerar ut rutor och fält som våra besökare kan fylla i. När de sedan klickar på en knapp så skickas deras svar rakt in i vår e-post-låda! På så vis kan man alltså skapa t ex intresseundersökningar eller enklare webbshopar.

Då sätter vi igång!

 

 

1. Bildegenskaper

När du infogat en bild i din sida och skriver in text bredvid den så blir det vanligtvis så här:

 

Här är en bild som jag skrivit in litet text vid. Texten hamnar alltid längst ned vid bilden, och om jag stöter i kanten på tabellen eller sidan jag skriver på så fortsätter raden under bilden. Det är ju väldigt sällan man vill ha det så här.

 

Men man kan få det att bli så här...

 

Här är bilden igen, men den här gången hamnar texten högst upp vid bilden! Och om jag når fram till sidans eller tabellens kant så att texten byter rad, eller trycker på Enter så att jag

startar en ny paragraf, så fortsätter texten vid sidan om bilden, precis som man vill ha det. Detta är gjort helt utan tabeller, och är en detalj som är väl värd att känna till.

 

 

 

 

 

 

... eller så här:

 

Man kan alltså även få bilden att placera sig till höger i det man infogat den i (cellen, sidan, etc.), och då hamnar texten automatiskt till vänster om den, och när man når fram till bildens kant så bryts texten dessutom automatiskt av så att den börjar på en ny rad.

 

 

 

 

 

 

 

Då ska vi se hur det fungerar!

Jag kan högerklicka på bilden, så dyker det ju upp en meny. Där kan jag välja Picture Properties (som betyder "bildegenskaper")...

 

... men det går även bra att helt enkelt dubbelklicka på bilden. Det leder till exakt samma plats: fönstret Picture Properties.

När du fått fram fönstret, klicka på fliken Appearance.

 

Här hittar man olika inställningar för bilden man just höger- eller dubbelklickade på.

Wrapping style. Knapparna None, Left och Right bestämmer var i behållaren (alltså var i sidan eller cellen) bilden ska befinna sig i förhållande till texten.

None är standardinställningen. Det är den som gör att om man börjar skriva in text vid en bild så hamnar alltid texten på den "nedersta raden" vid bilden.

Om man vill att texten ska befinna sig till höger om bilden, men att den ska kunna börja var som helst vid bildens sida, så klickar man på knappen Left. Den sätter alltså bilden till vänster om texten. Detta är precis samma sak som att klicka en gång på bilden i sidan och sen klicka på justeringsknappen Align Text Left i verktygsfältet (samma knapp man vänsterställer text med). Då kommer bilden att få inställningen Left, som gör att den hamnar till vänster om texten man skriver in.

Right fungerar precis som Left, fast den sätter in bilden till höger om texten i stället, och man kan uppnå precis samma resultat genom att klicka en gång på bilden och sen klicka på knappen för att högerställa text uppe i verktygsfältet.

För att testa hur detta fungerar kan du prova att infoga en bild i din sida, klicka in markören till höger om bilden, och skriva in några rader med text där. Då kommer texten att hamna på den nedersta raden vid bilden, och efter första radbrytningen hamnar resten av texten på raderna under bilden. Det är för att bilden är inställd på None från början.

Men om du då klickar en gång på bilden så att den blir vald, och sedan klickar på knappen för att vänsterställa text i verktygsfältet, så kommer bilden att bli inställd på Left: den hamnar till vänster om texten du skrivit in (den var ju till vänster sedan tidigare, men inte på "rätt sätt"...).

Om du, medan bilden är vald, klickar på knappen för att högerställa text så hamnar bilden till höger om texten.

För att få bilden att återgå till None kan du markera bilden (alltså klicka en gång på den) och sen klicka på den av textjusteringsknapparna som är intryckt.

Dessa tre inställningar -- Left, Right och None -- går alltså även att ställa in i fönstret Picture Properties.

 

 

Layout. Här finns fyra olika rutor man kan använda för att påverka bilden och texten runt den: Alignment, Border Thickness, Horizontal Margin och Vertical Margin.

Alignment bestämmer den vågräta positionen för texten vid bildens sida. Det finns nio olika positioner, men jag går igenom de vanligaste.


Default och Baseline fungerar precis på samma sätt som Text-bottom.

 

Border thickness avgör tjockleken på kantlinjen runt bilden. Om jag anger en Border thickness på 10 så blir bilden så här:

 

Man kan byta färg och utseende på kantlinjen med hjälp av CSS. Vi kommer att titta närmare på sånt från och med lektion 6.

 

Horizontal och Vertical Margin. Här kan du ange mellanrum mellan bilden och det som finns intill. Horizontal Margin styr över det vågräta mellanrummet och Vertical Margin styr över det lodräta. Notera att det mellanrum man lägger till fördelas jämnt åt båda hållen: om jag ökar bildens vertikala mellanrum med t ex 10 pixlar så får den ett mellanrum på 5 pixlar vid överkanten och ett mellanrum på 5 pixlar vid underkanten.

Exempel: jag lägger tre bilder sida vid sida. Då blir det så här:

 

Men om jag dubbelklickar på den blå bilden och ställer in dess Horizontal Margin på t ex 20 så blir det så här:

 

Den har fått ett vågrätt mellanrum på 20 pixlar, och det fördelas åt både höger och vänster automatiskt: ett avstånd på 10 pixlar till vänster och ett avstånd på 10 pixlar till höger.

 

 

 

2. Bokmärkeslänkar

De här kan vara kul att känna till, särskilt om man har mycket material på en och samma sida -- då kan man nämligen placera ut osynliga bokmärken på sidan. Sedan kan man skapa vanliga länkar, men ställa in dem så att de ska bläddra ned (eller upp) till ett visst bokmärke istället för att gå till någon vanlig webbadress.

För att placera ut ett bokmärke -- eller bookmark, som de kallas för på engelska -- så sätter du först in något i din sida du vill göra till ett bokmärke. Det kan vara en bild eller en bit text. Sedan markerar du det...

 

... och går du in på Insert > Bookmark.

 

Då får du fram ett litet fönster. Skriv in vad bokmärket ska heta i rutan Bookmark name. Om du markerade text så står antagligen den text du markerade här, men eftersom programmet är känsligt för svenska tecken (och ofta även mellanrum) så är det säkrast att skriva in något eget i rutan Bookmark name, som förstås dessutom saknar å, ä och ö samt mellanrum. När du är klar klickar du på OK.

 

Då får det du markerade en streckig linje under sig (om du markerade text i alla fall):

 

(Om du gjorde ett bokmärke på en bild så syns inget särskilt på själva bilden som visar att det finns ett bokmärke där. Men om man klickar en gång på bilden så dyker taggen <a> upp i tagglistan, och <a> är nätspråk för att "här finns en länk". Om man då pekar på taggen <a> så visas en liten etikett som talar om vart länken leder, och om länken börjar med "name" så är det ett bokmärke.)

 

Nu har jag ett bokmärke på min sida. Då vill jag göra en länk som leder till det bokmärket. Det är inget märkvärdigt: jag gör en vanlig länk. Man kan göra på flera olika vis: jag bara skriver in litet text, markerar den, högerklickar på den och väljer Hyperlink...

 

... så visas det vanliga länkfönstret. Där skriver jag inte in någon ny adress, utan klickar istället på knappen Bookmark.

 

Då får jag välja precis vilket bokmärke i sidan länken ska leda till. Jag klickar på det bokmärket och klickar på OK...

 

... så skapas en länk som inte leder till en ny sida, utan till ett bokmärke som finns längre ned på samma sida!

 

Nästa gång man klickar på länken så kommer alltså webbläsaren automatiskt att bläddra tills den hittar bokmärket.

Jag har gjort en exempelsida här som du kan testa. Då får du se hur bokmärkeslänkarna fungerar.

 

Och om du gör en länk som leder till en annan sida, och den andra sidan har bokmärken i sig, så kan du alltid göra så att länken inte bara bläddrar till den sidan utan även bläddrar till bokmärket du vill att besökaren ska hamna vid!

För att göra det skapar du en vanlig länk, men när du skriver in adressen länken ska leda till så avslutar du med # följt av bokmärkets namn. Så om jag t ex vill göra en länk som leder till sidan bokmarken.htm och vill att den sidan genast ska bläddras till bokmärket jag döpt till "3", så skriver jag länkens adress så här:

bokmarken.htm#3

 

Testa själv!

 

 

2.1. Hitta ett bokmärke

Om du letar efter ett särskilt bokmärke på din sida så kan du alltid klicka någonstans där det inte finns något bokmärke, gå in på Insert > Bookmark. Då listas alla bokmärken som finns i sidan i den stora rutan mitt i fönstret. Klicka där på det bokmärke du vill hitta, och klicka sedan på knappen Go To. Då bläddras sidan automatiskt till just det bokmärket.

 

 

2.2. Ta bort ett bokmärke

Klicka någonstans i sidan där det inte finns något bokmärke och gå in på Insert > Bookmark. Klicka på det bokmärke du vill radera i rutan mitt i fönstret. Klicka sedan på knappen Clear så tas det bokmärket bort. Notera att detta inte raderar den text eller bild bokmärket var fäst vid.

 

 

 

 

Till kursens framsida

Sida 2 av 3 »