På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett

Transkript

1 På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett relaterat ämne till ett annat. En länk från en sida till en annan, kan överbrygga ett stort avstånd med ett enda klick. Men länkar fyller också andra funktioner, öppnar epostmeddelanden för interaktiva svar eller tar besökaren till en särskild del inom samma sida. Dreamweaver hanterar alla slags länkar med lätthet och flexibilitet.

2 6 Infoga länkar I den här lektionen får du lära dig att infoga olika slags länkar till olika slags sidelement genom att göra följande: Länka till en annan sida inom samma plats. Länka från en bild. Länka till en sida på en annan webbplats. Skapa en epostlänk. Länka till ett särskilt avsnitt av en sida. Den här lektionen tar ungefär 60 minuter att göra klart. Innan du börjar måste du kopiera alla filer i mappen Lessons/Lesson06 till din hårddisk, från övningsskivan som följer med boken. Under arbetet med den här lektionen kommer du att skriva över ursprungsfilerna, därför måste du kopiera dem från cd-skivan igen, om du behöver återställa dem. Förhandsvisa ditt färdiga dokument För att få en känsla för dokumentet som du skall arbeta med under första delen av lektionen, skall vi först ta och förhandsvisa det färdiga dokumentet i din webbläsare. 1 Starta Adobe Dreamweaver CS3. 2 Om nödvändigt, tryck F8 för att öppna Filerpanelen och välj sedan DW CIB från Platslistan. 3 I Filerpanelen, maximerar du mappen lesson06.

3 134 LEKTION 6 Infoga länkar 4 Markera filen links_final.htm och tryck F12 (Windows) eller Alt+F12 (MacOS). 5 När sidan öppnas i din primära webbläsare, klickar du på länken The Spirit i navigationslisten; från sidan Spirit väljer du Back för att återvända till links_final. htm. Klicka på Maya Ren för att besöka en annan sida och välj sedan Back för att gå tillbaka. Om du har ett epostprogram installerat på din dator, klickar du på länken Got Something to Say? längst ned på sidan. När epostformuläret öppnas, stänger du det. Den här sidan innehåller ett antal länkar till sidor på samma plats såväl som länkar till externa sidor och en epostlänk. 6 Stäng din webbläsare och återvänd till Dreamweaver. Länka till sidor inom samma plats Länkar är kanske det allra mest typiska webbelementet och Dreamweaver gör det enkelt att infoga dem. I den här övningen kommer du att skapa såväl textlänkar som bildlänkar samt länka till sidor inom samma plats med hjälp av flera olika metoder. 1 Från Filerpanelen, maximerar du mappen lesson06 och dubbelklickar på filen links_start.htm för att öppna den.

4 ADOBE DREAMWEAVER CS3 135 Allt i en bok Även om det inte ser så ut vid första anblicken, så innehåller den aktuella sidan faktiskt inte några färdiga länkar alls. Därför börjar vi med att skapa ett par textlänkar. 2 Placera markören i texten Learn more about our spirit, som återfinns längst ner i den vänstra spalten. Från Taggväljaren, väljer du <p.more> för att markera hela raden. 3 Om nödvändigt, väljer du Fönster > Egenskaper för att öppna Egenskapspanelen. Klicka på Bläddra efter fil ( ), mappikonen alldeles bredvid Länkfältet. När dialogrutan för Välj fil öppnas, letar du dig fram till mappen lesson06 och markerar filen spirit.htm. När du är klar, klickar du på OK. Eftersom vi definierat en CSS-regel som formaterar alla länkar till att ha en klart lysande orange färg, ändrar den länkade texten nu färg. Metoden bläddra efter mapp erbjuder en traditionell teknik för att länka till filer. Nästa steg blir att prova ett mera visuellt angrepssätt. 4 I stycket närmast under rubriken Top dogs sleep here, markerar du orden Maya Ren. Du kan markera vilket eller vilka ord som helst som står bredvid varandra för att skapa en länk. Dreamweaver lägger automatiskt till den tagg som krävs runt den markerade texten. 5 Om nödvändigt, tryck F8 för att öppna Filerpanelen och maximera mappen lesson06.

5 136 LEKTION 6 Infoga länkar 6 Från Egenskapspanelen drar du Peka till fil ( ), målikonen bredvid Länkfältet, till Flerpanelen och pekar på folks_maya.htm. Båda metoderna för att skapa länkar kan också tillämpas på bildbaserade länkar. 7 I huvudnavigationslisten, markerar du Spirit-etiketten. Från Egenskapspanelen, låter du platshållarlänken javascript:; stå kvar i Länkfältet och drar Peka på filikonen till spirit.htm i mappen lesson05 i Filerpanelen. Så fort du använder dig av metoderna Peka-på-en-fil eller Bläddra-efter-mapp, ersätts den förutvarande länken automatiskt. OBS: Navigationslisten skapades, som vi lärde oss under lektion 04, i Adobe Fireworks CS3 och infogades sedan i Dreamweaver. Fireworks använder temporärt koden javascript:; för att trigga igång överrullningseffekterna i väntan på att länkarna infogas. 8 Välj Arkiv > Spara.

6 ADOBE DREAMWEAVER CS3 137 Allt i en bok Skapa en extern länk Alla sidor som vi länkade till i den föregående övningen finns inom den aktuella platsen. Du kan också skapa länkar till vilken sida som helst på nätet, om du känner till deras fullständiga webbadress eller URL. 1 Om nödvändigt, återöppna filen links_start.htm som du arbetade med i den föregående övningen, genom att dubbelklicka på namnet i Filerpanelen. 2 Markera bilden alldeles under rubriken Company Anon. 3 I Egenskapspanelen, skriver du in följande text i länkfältet: och trycker sedan på Tabb. 4 Välj Arkiv > Spara och tryck F12 (Windows) eller Alt+F12 (MacOS) för att förhandsvisa sidan i din primära webbläsare. Lägg märke till att markören ändras till en hand när markören förs över den länkade bilden, vilket betyder att den är en länk. Om du klickar på bilden kommer dock inte webbläsaren att kunna visa sidan, eftersom såväl länkadressen som företagsnamnet är påhittade. Stäng ner din webbläsare och återvänd till Dreamweaver. OBS: För att leva upp till gällande HTML-standard, infogar Dreamweaver inte längre automatiskt attributet border= 0 i <img>-taggen när en bildlänk skapas. För att förhindra att någon av dina bildlänkar uppvisar en kant, skapar du en CSS-regel enligt följande: img {border: 0;}.

7 138 LEKTION 6 Infoga länkar Skapa en epostlänk En epostlänk, är en länk som när besökarna på sidan klickar på den, öppnar ett färdigadresserat epostmeddelande. Koden är annorlunda jämfört med en vanlig länk och använder sig av prefixet mailto: följt av en fungerande epostadress. Dreamweaver skapar automatiskt den kod som krävs för en fungerande epostlänk. 1 Om nödvändigt, återöppna filen links_start.htm som du arbetade med i den föregående övningen, genom att dubbelklicka på namnet i Filerpanelen. 2 I sidfotsområdet längst ned på sidan, markerar du följande text: Got something to say? 3 Från kategorin Allmänt i verktygsfältet för att Infoga, klickar du på E-postlänk ( ), den kuvertliknande ikonen som är nummer två från vänster 4 När dialogrutan för E-postlänk öppnas, låter du textfältet stå som det gör och skriver in info@devdesign.com i Epost-fältet. Klicka på OK när du är klar. Du behöver inte skriva in prefixet mailto: Dreamweaver sköter kodningen automatiskt.

8 ADOBE DREAMWEAVER CS3 139 Allt i en bok 5 Välj Arkiv > Spara. Om du har ett epostprogram installerat på din dator, trycker du på F12 för att förhandsvisa sidan i din webbläsare och klickar på epostlänken som du just har skapat. När epostmeddelandet dyker upp, ser du att Till-fältet redan är ifyllt med rätt adress. 6 Stäng ner både epostmeddelandet och din webbläsare. Återvänd sedan till Dreamweaver. Länka inom samma sida Normalt sett så gör en länk till en sida att du hamnar högst upp på sidan du länkat till. En del layouter, särskilt de med mycket långa sidor, kräver ett mera målriktad angreppssätt. Med hjälp av Dreamweaver kan du infoga ett Namngivet ankare varsomhelst på en sidan och sedan länka direkt till det ankaret. I den här övningen kommer du att skapa en länk från en sida till ett specifikt avsnitt i mitten av en annan sida samt skapa ett namngivet ankare för att gå från mitten av sidan till högst upp på sidan. 1 Om nödvändigt, återöppna filen links_start.htm som du arbetade med i den föregående övningen, genom att dubbelklicka på namnet i Filerpanelen. Vi börjar med att lägga till lite ny text för vår länk. 2 Placera markören längst den i den högra spalten, alldeles efter platshållartexten Lorem ipsum dolor sit amet. Tryck sedan Enter (Windows) eller Return (MacOS) för att skapa en ny rad.

9 140 LEKTION 6 Infoga länkar 3 Skriv in följande text: Learn more about Company Anon. Tryck på mellanslag och välj Infoga > HTML > Specialtecken > Övriga. När dialogrutan för att Infoga övriga tecken dyker upp, väljer du det högervinklade citationstecknet (fjärde till höger, på den andra raden uppifrån) och klickar sedan på OK. 4 Från Taggväljaren, väljer du <p>. I Egenskapspanelen, går du in under Stilmenyn och väljer more. Se till att taggen fortfarande är markerad och skriv in följande text i Länkfältet: work.htm#anon. Tryck sedan på Tabb. Fyrkantstecknet (eller nummertecknet), #, talar om att det här är en Ankarlänk. Ordet som kommer efter fyrkantstecknet i det här fallet: anon är själva namnet på ankarlänken. 5 Välj Arkiv > Spara och gå till Filerpanelen och dubbelklicka på filen work.htm för att öppna den. Du är nu klar med arbetet i dokument links_start.htm. Det som återstår är att lägga till det namngivna ankaret i filen du länkar till. 6 Placera markören framför rubriken Company. Från kategorin Allmänt i verktygsfältet för att infoga, kickar du på Namngivet ankare ( ), ankarsymbolen som är nummer tre från vänster.

10 ADOBE DREAMWEAVER CS3 141 Allt i en bok 7 När dialogrutan för Namngivet ankare öppnas, klickar du på Namnfältet och skriver in anon. Avsluta med att klicka på OK. Dreamweaver infogar nu en ankarsymbol på sidan för att tala om var koden placerats. Länkningen från den föregående sidan är nu komplett. Men för att göra det lättare att arbeta med långa sidor, skall vi ta och infoga ännu en länk och ännu ett namngivet ankare för att förflytta oss till högst upp på sidan. 8 Placera markören i ordet Top» alldeles under stycket som heter Company Anon. I Taggväljare, väljer du <p.more>. I länkfältet i Egenskapspanelen, skriver du in #top och tycker på Tabb. Eftersom länken går till ett namngivet ankare inom samma sida, behöver du inte ange något filnamn. Det sista steget är att lägga till det namngivna ankaret högst upp på sidan. 9 Placera markören till vänster om logotypen dev / design logo och gå till Taggväljaren, där du väljer <div #wrapper>. Tryck på vänster piltangent för att förflytta dig till den framför den markerade <div>-taggen. Från verktygsfältet för att Infoga, väljer du Namngivet ankare.

11 142 LEKTION 6 Infoga länkar 10 När dialogrutan för Namngivet ankare öppnas, skriver du ordet top i Namnfältet och klickar sedan på OK. Återigen dyker ankarsymbolen upp på sidan för att tala om var koden är infogad. Det är nu dags att testa om dina ankarlänkar fungerar som de ska. 11 Välj Arkiv > Spara och markera fliken för links_start.htm. Tryck F12 (Windows) eller Alt+F12 (MacOS) för att förhandsvisa sidan i din primära webbläsare. Klicka på länken Learn more about Company Anon. Lägg märke till att dokumentet work.htm öppnas med avsnittet om Company Anon högst upp i webbläsarfönstret. Klicka på länken Top» för att gå till högst upp på sidan. 12 När du är klar, stänger du ner din webbläsare och återvänder till Dreamweaver. Välj Arkiv > Stäng allt. Grattis, du är nu klar med den här lektionen!

12 Repetition Repetitionsfrågor 1 Beskriv två olika sätt att infoga en länk på en sida 2 Sant eller falskt: I Dreamweaver kan du bara länka till sidor inom samma plats. 3 Vad är skillnaden mellan vanliga sidlänkar och epostlänkar? 4 Vilka två sidelement krävs för att skapa en länk inom samma sida? Repetitionssvar 1 Ett sätt är att markera en text eller bild och sedan gå till Egenskapspanelen, klicka på ikonen Bläddra efter fil bredvid länkfältet och leta dig sedan fram till den önskade sidan. Ett annat sätt är att dra ikonen Peka-på-en-fil till en av filerna i Filerpanelen. 2 Falskt. Du kan länka till en extern sida genom att skriva in den fullständiga webbadressen (en komplett URL) i länkfältet i Egenskapspanelen. 3 Epostlänkar använder sig av prefixet mailto: följt av en fungerande epostadress, medan vanliga sidlänkar använder sig av vägen till och namnet på filen, till exempel../folks/rena_may.htm eller 4 För det första måste du placera ett namngivet ankare där du vill att sidfönstret skall börja. Ett sådant infogar du genom att gå till kategorin Allmänt i verktygsfältet för att Infoga och klicka på Namngivet ankare. För det andra behöver du en länk till det namngivna ankaret som består av fyrkantstecknet, #, följt av namnet på det namngivna ankaret, till exempel #top.