Image: Dreamweaver distance course logo
 
   

Fördjupningslektion 3: sida 1 av 6

 

 

Till kursens framsida

Sida 2 av 6 »

 

 

 

Fördjupningslektion 3

Välkommen till fördjupningskursens tredje lektion!

Den här lektionen kan bli ganska intensiv -- det finns nämligen hur mycket som helst att pyssla med här.

Så vad är det vi ska göra, då? Jo, vi se hur man med hjälp av ett par ganska enkla kodbitar kan få olika saker på sin sida att byta class.

Med hjälp av den här metoden kan man alltså låta besökaren, med ett enda klick, till exempel ändra storlek på texten på sidan, byta bakgrundsbild, eller vad som helst! Detta dessutom utan att sidan behöver laddas om.

Man kan alltså t ex skapa en knapp som ändrar bakgrundsbild i en div eller cell och ändrar färg på texten samtidigt som den får ett antal andra celler att få helt andra utseenden. Det är bara tålamodet som sätter gränser, egentligen, och när man väl kommit igång och "polletten trillat ned" så kan man bli sittande hur länge som helst!

Jag beskriver som vanligt precis vad och hur jag gör, och varför jag gör det.

 

 

 

1. Låt besökaren byta class

Nu ska vi alltså se hur vi skapar länkar eller knappar som låter besökaren byta classer på olika grejor i våra sidor. Här är ett enkelt exempel på hur det kan bli:

 

Här är helt vanlig text
i en helt vanlig tabell.

 

 

För att hålla det hela enkelt så har jag byggt in allt i en enda tabell. Tabellen består av en enda cell som fått ett eget ID.

 

Och allt som har ett eget ID kan man som bekant ändra på -- det har vi ju redan varit inne på ett antal gånger. Som exempel på detta har jag satt in ett antal kodrader i var och en av knapparna under tabellen.

 

Knappen "Eld!" innehåller kod som säger åt cellen att byta class till en som lägger in en bakgrundsbild med eld samtidigt som texten blir vit och skrivs i teckensnittet Times New Roman. Knappen "Jord!" byter till en annan class som lägger in en helt annan bakgrundsbild i cellen samt gör texten mörkblå och skriven i Verdana. Och så vidare....

 

Så hur gör man för att låta besökaren byta class på grejor så här?

 

 

 

 

 

 

1. Hämta bilderna

 

Vi ska skapa en likadan tabell som den vi just kollade på, och få dess cell att byta class beroende på vilken knapp man klickar på. För att göra hela processen litet smidigare har jag förberett ett antal bilder vi kan använda.

 

Spara bilderna eld.png, jord.png och vatten.png nedan på din dator. Vi ska använda dem under den här genomgången. Det är bara att högerklicka på var och en av bilderna och välja att spara den -- men byt helst inte namn på bilderna! Om de får behålla sina originalnamn så blir det lättare att hänga med i genomgången.

 

Varje bild är i formatet .png, det är det ändelsen efter varje bildnamn betyder. Ändra inte på det heller. Formatet .png gör så att bitar av en bild kan vara genomskinliga, i vårt fall de rundade hörnen på bilderna. Det är en effekt man inte kan göra med vanliga jpeg-bilder, som vi annars oftast använder.

 

eld.png

 

 


jord.png

 

 


vatten.png

 

 

 

När du sparat bilderna kan du fortsätta.

 

 

 

 

 

 

 

2. Skapa tabellen

 

Först och främst så skapar man tabellen som ska innehålla de olika ändringarna. (Men jag kan nämna redan nu att man inte måste ha en tabell, utan det går precis lika bra att använda t ex divar.)

 

Då sätter vi igång!

 

 

 

2.1. Tabellen ska bestå av en enda cell, så det är inget större mysterium hur man gör:

 

 


 

 

 

2.2. När tabellen hamnat på din sida är det dags att ställa in den.

 

Högerklicka i tabellen och välj Table Properties (Tabellegenskaper). Då får man ställa in hur hela tabellen ska se ut. Ge den följande inställningar:

 

Alignment (Justering): Centrera (Center). Då hamnar tabellen mitt på sidan.
 

* Specify Width (Ange bredd): Förbockad. Jag gör tabellen 500 pixlar bred.

 

* Specify Height (Ange höjd): Förbockad. Jag gör tabellen 375 pixlar hög.


Cell Padding (Cellutfyllnad):
5. På så vis slipper man att en bild eller bokstäver hamnar exakt på kanten av tabellen. Nu hamnar de som närmast 5 pixlar från kanten istället, vilket gör det hela snyggare.

Cell Spacing (Cellavstånd):
0. Det är 0 från början och det finns ju bara en cell, så det är ingen mening att ändra på det här värdet.


Size (Storlek):
0. Detta är alltså storleken på kantlinjerna runt tabellens alla celler. Den ska vara inställd på 0.

* "Varför 500 i bredd och 375 i höjd?" undrar du kanske nu. Jo, det beror helt och hållet på att bilderna vi just sparade förr eller senare snart kommer att börja dyka upp som bakgrundsbilder, och de är exakt 500 pixlar breda och 375 pixlar höga. Om tabellen (eller snarare cellen) vore bredare än 500 pixlar eller högre än 375 pixlar så skulle bakgrundsbilderna hinna börja repeteras innan ytan de ska täcka tar slut. Det är en sån där designgrej man bör ha i åtanke.

 

Det går att förhindra att bakgrundsbilden börjar repeteras genom att t ex ge dess class (som vi snart ska skapa) parametern background-repeat: no-repeat, men det är inte säkert att det kommandot funkar i alla webbläsare.

 

 

Klicka på OK. Nu ser tabellen ut så här:

 

 

 

 

 

 

2.3. Nu ska vi mixtra med tabellens cell så att den får rätt storlek. Det behövs egentligen inte: tabellen har redan fått rätt storlek och den innehåller ju bara en cell, vilket innebär att om man inte anger någon specifik storlek för cellen så anpassar den sig automatiskt efter tabellens storlek. Men det är ju bättre att ta det säkra före det osäkra....

 

Högerklicka i cellen (man ser ingen skillnad på tabellen eller cellen, så det är bara att högerklicka i rutan som dök upp på din sida) och välj Cell Properties (Cellegenskaper) i menyn.

 

Ge cellen en Width (Bredd) på 500 pixlar och en Height (Höjd) på 375 pixlar.

 

 

 

 

Klicka sedan på OK.

 

 

 

 

 

 

 

3. Skriv in text i cellen

 

Nu kan du skriva in den text du vill ska stå i cellen: det är bara att klicka i den (nere i designvyn) och skriva något.

 

 

 

 

Men nu finns det en viktig grej du måste känna till: man får inte ge något utseende åt vare sig tabellen, cellen, eller texten.

 

När man skrivit in text i cellen så får man alltså inte till exempel göra den grön, ändra storlek på den och ge den ett visst typsnitt -- annars kommer texten alltid att se ut så oavsett vad våra framtida kodstycken kommer att säga. Så skriv bara vad du vill att texten ska säga, men låt allt annat vara som det är.

 

Nedanstående stycken gäller om du redan hunnit ändra på textens eller cellens utseende.

 

 

 

 

 

 

 

3.1. Återställ text (om du hunnit ändra på den)

 

Om du hunnit vara in och ge texten något annat utseende än det det hade när du först skrev in den så behöver du återställa den till standardutseendet. Det kan man göra så här:

 

Markera texten. Se sedan till så att rutorna Style (Format), Font (Teckensnitt) och Font Size (Teckenstorlek) är inställda på (None), (Default Font) och (Default Size) -- alltså (Normal), (Standardteckensnitt) och (Normal).

 

Texten måste även ha färgen Automatisk (Automatic).

 

 

 

 

 

 

 

 

3.2. Återställ cellen och/eller tabellen (om du hunnit ändra på någon av dem)

 

Om du hunnit ge cellen en bakgrundsfärg eller bakgrundsbild så måste bilden stängas av och färgen återställas till Automatic (Automatisk).

 

Det är bara att trolla fram Cell Properties, se till så att rutan Use background picture är tom, och så att rutan Color under rubriken Background är inställd på Automatic.

 

Och om du hunnit ändra på hela tabellens bakgrund på något vis så gör du likadant som ovan, men i fönstret Table Properties istället för Cell Properties.

 

Sådär! Nu ska vi se hur man gör för att ge tabellen och cellen separata ID:n. Det behövs nämligen så att de koder vi ska använda vet exakt vilka delar vi babblar om när vi börjar ge order.

 

 

 

 

 

 

 

 

Till kursens framsida

Sida 2 av 6 »