Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

Transkript

1 Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

2 Del 4 BILDER OCH TABELLER 0. Arbeta med bilder Redigera bilder Klickbara bilder/imagemaps Tabeller Skapa enkla tabeller Tabellens egenskaper Rita tabeller i layoutläget...

3 . KLICKBARA BILDER/IMAGEMAPS Föreställ dig till exempel att du har en bild som föreställer en karta över Europa. Du vill att Sverige ska länkas till en webbsida, Norge till en annan, Frankrike till en tredje och så vidare. Lösningen är då att skapa en klickbar bild med många länkar till olika URL:er. De områden som du klickar på kallas hotspots eller aktiva områden. Klickbara bilder, eller ImageMaps som de ofta även kallas, är bilder där olika delar av bilden kan länkas till olika webbsidor. A. Skapa klickbara bilder Till vänster i den nedre delen av panelen Properties finns några knappar som du använder för att skapa en klickbar bild. 4 5 Markera den bild som du vill använda som klickbar bild. Börja med att ge bilden ett namn i rutan under Image, 46 k. Välj en av de tre så kallade hotspot-knapparna och rita upp ett område på bilden som ska länkas: Knappen Rectangular Hotspot Tool används då du vill skapa ett rektangulärt eller fyrkantigt område. Knappen Oval Hotspot Tool används för att skapa ett ovalt område. Knappen Polygon Hotspot Tool används för att skapa oregelbundna områden. I panelen Properties kan du nu skriva en länk för det område som du har markerat i bilden. Ta bort stakettecknet (#) i rutan Link och skriv sökvägen till den webbsida som länken ska leda till. Ange även en alternativ text som visas när användaren pekar på området och eventuellt mål, om du till exempel vill att länken ska öppnas i ett nytt fönster. Nu kan du fortsätta att lägga till klickbara delar i bilden genom att rita hotspotområden. Här är en bild av en Europakarta som du vill länka till olika webbsidor. 4 5 Markera och flytta klickbara ytor Om du vill markera en yta i bilden klickar du på knappen Pointer Hotspot Tool som finns placerad bredvid Hotspot-verktygen i panelen Properties. Klicka därefter på någon av de inritade ytorna för att markera den. Vill du flytta en klickbar yta börjar du med att markera den. Sedan kan du dra markeringen i önskad riktning. Släpp musknappen när markeringen är i önskad position. 0

4 . TABELLER A. Arbeta med tabeller Det går inte att placera text och objekt var som helst på en webbsida, vilket brukar fungera i desktop publishing-program. Det beror på att html är ett mycket begränsat programmeringsspråk. För att ändå skapa webbsidor med snygga layouter kan du använda tabeller. I tabeller skapar du celler, där du sedan infogar objekt eller skriver information. Tabeller används till en mängd olika saker. Du kan presentera information som är uppdelad i kolumner och rader, på samma sätt som tabeller används i Excel eller Word. Med hjälp av tabeller kan du helt enkelt dela in webbsidan i mindre enheter. Dessa mindre enheter kallas för celler. I cellerna kan du placera bilder och texter. Du kan också infoga en helt ny tabell i en cell. Eftersom tabellen delar upp sidan i mindre enheter är det också möjligt att använda tabeller när du skapar en layout på webbsidan. Tabellen ger dig flera möjligheter att placera text och bilder i önskade positioner på webbsidan. I nedanstående bild ser du ett exempel på en webbsida där layouten har skapats med hjälp av flera tabeller B. Tabellernas uppbyggnad En tabell består av kolumner och rader som i sin tur bildar celler. Det är i cellerna som du skriver information. I Dreamweaver finns det en mycket omfattande tabellfunktion som du kan använda när du vill skapa olika typer av sidlayouter. Det finns flera metoder att välja mellan då du skapar tabeller. Det beror på vad det är för typ av tabell som du ska skapa. Vi börjar naturligtvis med att visa hur du snabbt skapar en enkel tabell. 04

5 4. SKAPA ENKLA TABELLER Enkla tabeller är den vanligaste tabellvarianten och består av lika höga och breda rader samt kolumner. Du använder en enkel tabell när du ska göra olika typer av uppställningar. Klicka på knappen Table som finns i panelen Insert under kategorin Common. Du kan även öppna Insert-menyn och välja Table. Nu visas en dialogruta där du anger hur många rader och kolumner som tabellen ska bestå av. Du gör också andra inställningar, som exempelvis ange bredd och om det ska vara mellanrum mellan cellerna i tabellen. Klicka på OK för att infoga tabellen. I det här avsnittet får du lära dig att skapa en enkel tabell. Här ser du ett exempel på en tabell som har infogats på en webbsida. Övning 5 Skapa tabell Fortsätt att arbeta med webbplatsen KIWIRESOR EGEN. I den här övningen ska du skapa en ny webbsida som du döper till KONTAKT.HTM. Infoga en tabell bestående av tre kolumner och fyra rader. Tabellen ska vara 600 bildpunkter bred. Tabellen ska inte ha någon kantlinje. Fyll i tabellen med följande information: Namn Telefon E-postadress Patrik Rydberg patrik@kiwiresor.se Maja Berggren 08-0 maja@kiwiresor.se Bengt Storm bengt@kiwiresor.se Karin Stensson karin@kiwiresor.se Spara och förhandsgranska sidan. Avsluta sedan webbläsaren men låt webbsidan vara öppen till nästa övning. 05

6 A. Markera tabeller För att kunna ändra utseende på tabeller måste du känna till hur du markerar tabeller, rader, kolumner och celler. Du kan markera tabeller på några olika tillvägagångssätt. Det kan ibland vara svårt att markera tabellen med musen, särskilt om du har skapat nästlade tabeller, det vill säga placerat tabeller inuti andra tabeller. Nedan visas några olika sätt att markera tabeller: Klicka på tabellens kant med musen för att markera hela tabellen. Högerklicka på tabellen och välj Table följt av Select Table på snabbmenyn. Sätt insättningspunkten någonstans i tabellen och klicka på <table> i kodväljaren. Här har vi markerat hela tabellen. När tabellen är markerad visas en markeringsram runt den och du ser tabellens bredd i den tabellinformation som antingen visas nedanför eller ovanför tabellen. I tabellinformationen ser du den totala tabellbredden. Om du har angett kolumnbredder kan du även se de enskilda kolumnernas bredd. Du kan också klicka på den nedåtriktade pil som visas vid en kolumn alternativt vid pilen som visas för hela tabellen. När du gör det visas menyer där du kan göra inställningar. Du kan enkelt ändra kolumnbredd och radhöjd genom att dra i en kolumn- eller radkant. 06

7 B. Markera celler Du markerar celler genom att dra över dem med muspekaren. Markera flera sammanhängande celler genom att dra över dem med muspekaren. Markera spridda celler genom att hålla ner tangenten Ctrl samtidigt som du klickar på de celler som ska markeras med muspekaren. Markera en rad i tabellen genom att peka till vänster om raden. När muspekaren ser ut som en pil klickar du på tabellen med muspekaren. Markera en rad genom att klicka på märket <tr> i kodväljaren. Markera en kolumn i tabellen genom att peka ovanför den kolumn som ska markeras. Då muspekaren ser ut som en pil klickar du på kolumnen. Markera en kolumn genom att klicka på den pil som visas ovanför eller nedanför en kolumn. En meny öppnas och du kan välja Select Column. 07

8 C. Infoga rader och kolumner Om du placerar insättningspunkten i cellen längst ner till höger i tabellen kan du infoga en ny rad genom att trycka på tangenten Tab. Om du upptäcker att tabellen saknar en eller flera rader eller kolumner är det enkelt att infoga nya. Så här gör du: Placera insättningspunkten någonstans i tabellen. Öppna Modify-menyn och välj Table och sedan Insert Row eller Insert Column. Den nya kolumnen eller raden placeras ovanför eller till vänster om insättningspunkten. Infoga flera rader eller kolumner Det går även att infoga flera rader eller kolumner samtidigt och välja var de ska infogas i förhållande till insättningspunkten: 4 5 Öppna Modify-menyn och välj Table följt av Insert Rows or Columns. I dialogrutan bestämmer du om det är rader eller kolumner som ska infogas genom att markera Rows eller Columns. Ange även hur många rader/kolumner som ska infogas i rutan Number of rows/number of columns. Välj var de ska placeras vid Where: Välj Above the Selection om du har valt att infoga en eller flera rader och vill att de ska placeras ovanför insättningspunkten. Välj Below the Selection om du valt att infoga en eller flera rader och vill att de ska placeras nedanför insättningspunkten. Välj Before current Column om du valt att infoga en eller flera kolumner och vill att de ska placeras till vänster om insättningspunkten. Välj After current Column om du valt att infoga en eller flera kolumner och vill att de ska placeras till höger om insättningspunkten. Klicka på OK. 5 4 Text i kolumner Du ska inte använda upprepade mellanslag för att visa text i kolumner. Det är bättre att använda en tabell då du vill skapa en kolumnuppbyggd struktur. 08

9 5. TABELLENS EGENSKAPER När tabellen är markerad använder du panelen Properties för att göra inställningar för hur den ska se ut. Du använder panelen Properties för att ändra tabellens utseende. Du kan ge tabellen ett namn, bestämma storlek på den och ändra mellanrum mellan cellerna. Dessutom kan du styra cellmarginalerna och ange en bakgrundsfärg, kantfärg samt bakgrundsbild för tabellen. Vi börjar med att titta på hur du justerar tabellens utseende. A. Bakgrundsfärg och bakgrundsbild För att applicera en bakgrundsfärg eller infoga en bakgrundsbild i tabellen, gör du så här: Markera hela tabellen. Välj en färg i listan Bg color eller klicka på mappikonen Bläddra till höger om rutan Bg Image. Leta därefter reda på den bild som du vill använda och klicka på OK. Här visas en tabell med en bakgrundsbild. Tänk på att välja en ljus och inte alltför brokig bild, så att texten i tabellen inte störs. Om du infogar en bild som är mindre än själva tabellytan kommer bilden att upprepas i tabellen. 09

10 B. Cellfyllning och cellmellanrum Du kan se till så att innehållet i cellerna inte placeras så nära cellernas kanter och även se till att det blir ett visst mellanrum mellan cellerna i tabellen. Markera hela tabellen. Skriv ett värde i rutan CellPad i panelen Properties för att bestämma avstånd mellan cellernas kanter och innehållet i cellerna. Skriv ett värde i rutan CellSpace för att bestämma avstånd mellan cellerna. I tabellen längst upp till vänster används standardinställningarna för cellmarginaler och cellmellanrum. Standardinställningen motsvarar marginaler på punkt och ett cellmellanrum på punkter. I tabellen längst upp till höger används inga marginaler och inte heller något cellmellanrum. I den nedre tabellen till vänster används marginaler på punkter men inget cellmellanrum. I den nedre tabellen till höger är marginalerna punkter och cellmellanrummet 4 punkter. C. Bredd och höjd Om du vet exakt hur bred tabellen ska vara är det ofta lättare att ange det exakta värdet i panelen Properties i stället för att dra i kolumnkanterna eller radkanterna med musen. Gör så här: Markera hela tabellen. Ange hur bred tabellen ska vara i rutan W och välj måttenhet i listan till höger om rutan. Du kan välja mellan att ange bredd i pixlar eller i procent. Ange hur hög tabellen ska vara i rutan H och välj måttenhet i listan till höger om rutan. Du kan också ange bredd och höjd på kolumner respektive rader. Tillvägagångssättet är detsamma som har beskrivits ovan, men med den skillnaden att du först markerar den/de rader/kolumner som du vill justera. 0

11 D. Kantlinjer Du kan åstadkomma snygga effekter genom att välja olika färger på cellernas kantlinjer och tabellens yttre kantlinjer. Tjockleken på kantlinjerna anger du när du har markerat hela tabellen. Då anger du också färg på de yttre kantlinjerna. 4 5 Markera tabellen. Ange önskad tjocklek för kantlinjen i rutan Border i panelen Properties. Välj färg i rutan Brdr color. Markera några enstaka celler eller markera alla celler i tabellen. Välj färg på cellernas kantlinjer i rutan Brdr. I tabellen längst upp till vänster används en kantlinje på punkter i standardfärgen, vilket ger en grå skuggad kantlinje. I tabellen högst upp till höger är kantlinjen 4 punkter samt röd. Inga speciella inställningar har gjorts på cellernas kantlinjer, vilket gör att de har samma färg som den yttre kantlinjen. Tabellen längst ner till vänster har också en 4 punkter tjock kantlinje, men här har en vit färg applicerats på cellernas kantlinjer, vilket gör att de inte syns mot den vita bakgrunden. I tabellen längst ner till höger har en vit färg applicerats på tabellens yttre kantlinjer och en röd färg används på cellernas kantlinjer. Övning 6 Formatera tabell Fortsätt att arbeta med sidan KONTAKT.HTM. Tabellen ska ha cellutfyllnad med tre punkter och tre punkters cellmellanrum. Tabellen ska en kantlinje med en punkt. Högerställ tabellen. Applicera bakgrundsfärg enligt följande: Hela tabellen: #00FF00 Spara och förhandsgranska. Stäng webbläsaren och webbsidan. Stäng även webbplatsen.

12 6. RITA TABELLER I LAYOUTLÄGET A. Växla till layoutläget I Dreamweaver finns det också möjlighet att rita tabeller. Funktionen är inte tillgänglig i designläget utan du måste växla över till det så kallade layoutläget (Layout View) för att _ använda den. Layoutläget bör inte förväxlas med övriga visningslägen, utan används endast när du vill rita tabeller. Det är lätt att få intrycket av att det är en annan typ av tabell som skapas i layoutläget, men så är inte fallet. Det är bara en annan metod för att skapa tabeller. När du vill växla till layoutläget gör du så här: 4 Klicka på knappen Layout i panelen Insert under kategorin Layout. När layoutläget aktiveras första gången visas en dialogruta, som innehåller instruktioner för hur du arbetar i layoutläget. Läs igenom dialogrutan. Om du vill kan du markera kryssrutan Don t show me this message again, så slipper du få samma varning igen, nästa gång du växlar till layoutläget. Klicka på OK. 4