Dreamweaver CS5 Grundkurs

Transkript

1 Dreamweaver CS5 Grundkurs

3 Innehållsförteckning Kapitel 1 Introduktion till Dreamweaver... 5 Välkomstskärm... 5 Skapa ett nytt HTML-dokument via Välkomstskärmen... 6 Spara och Spara som Menyraden... 8 Programfältet... 9 Anpassa arbetsytans layout Verktygsfält Verktygsfältet Standard Skapa ett HTML-dokument via dialogrutan Nytt Verktygsfältet Dokument Dokumnetvyer Förhandsgranska i olika webbläsare Linjaler Paneler Panelen Infoga Panelen Filer Statusfältet Taggväljaren Egenskapspanelen Övningsuppgifter Kapitel 2 Texthantering Textformat Textformatering Blockcitat Infoga specialtecken Importera text Listor Infoga datum Sök och ersätt Stavningskontroll Övningsuppgifter Kapitel 3 Plats- och Filhantering Skapa en ny Plats Ange en standardmapp för bilder Hantera Platser Mer om Filpanelen Skapa nya filer via Filpanelen Inställningar för nya HTML-dokument (Överkurs) Sidegenskaper Övningsuppgifter... 46

4 Kapitel 4 Länkar Skapa en E-postlänk Relativa länkar (Dokumentberoende sökvägar) Absoluta länkar Öppna länkar i nya flikar (fönster) Formatera länkar Övningsuppgifter Kapitel 5 Bildhantering Färger Bakgrundsfärg Lite om bildformat Bakgrundsbild Visa bilder i HTML-dokument Hjälpattribut för bildtagg Bildegenskaper Optimera bilder Beskära bilder Bildplatshållare Överrullningsbild Övningsuppgifter... 62

5 Kapitel 1 Introduktion till Dreamweaver Välkommen till Adobe Dreamweaver CS5. I detta kapitel kommer vi att gå igenom arbetsytan. Vi börjar med välkomstskärmen som visas upp vid uppstarten. Sedan utforskar vi de olika verktygsfälten, egenskapspanelen och övriga paneler som du använder för att bygga webbsidor. Välkomstskärm Börja med att starta Adobe Dreamweaver och undersök nedanstående fönster. Fönstret är uppdelat i tre kolumner. Den första kolumnen visar "Senast använda filer" och längst ner en genväg till dialogrutan "Öppna". Den andra kolumnen innehåller genvägar till att skapa några vanliga dokument som man brukar använda vid webbdesign och webbutveckling t.ex. HTML och CSS. Här kan man även klicka på "Mer..." för att skapa fler filformat. En genväg till dialogrutan "Dreamweaverwebbplats" finns här (mer om detta under Kapitel 3). Den sista kolumnen innehåller genvägar till videor från Adobe TV. Längst ner till vänster hittar man länkar till Adobes hjälpcentral och "Dreamweaver Exchange". Ett tips är att börja med att klicka på "Komma igång". Där hittar du välskrivna artiklar om Dreamweaver och även några lärorika videoklipp.

6 Skapa ett nytt HTML-dokument via Välkomstskärmen Klicka på knappen HTML från "Skapa ny" i välkomstskärmen. Välkomstskärmen försvinner och ett nytt HTML-dokument skapas. Dreamweaver föreslår filnamnet Untitled-1, vilket bör ändras till ett mer beskrivande filnamn.

7 Spara och Spara som... Den gamla vanliga hederliga diskettknappen i verktygsfältet standard fungerar utmärkt för att spara för första gången och spara ändringarna i en fil. Det finns även en verktygsknapp med två disketter. Denna knapp sparar alla öppna filer samtidigt. Men, om du vill spara en kopia av dokumentet i ett annat filnamn eller filformat så ska du istället gå in under menyn Arkiv och välja Spara som... Spara filen som index.html Nu ska vi gå igenom arbetsytan d.v.s. alla delar i programmet.

8 Menyraden Längst upp i programmet ser du 10 olika menyer. Här hittar du programmets alla funktioner, genvägar till olika dialogrutor och paneler. Utforska menyerna och klicka sedan på rubriken "Dreamweaver-Hjälp" under menyn Hjälp. Detta är den bästa referenskällan till Adobe Dreamweaver. Du kan även visa hjälpen som PDF (ca 650 sidor).

9 Klicka på rubriken "Referens" under menyn "Hjälp" Längst ner i programmet dyker upp ett fönster (panel) som innehåller ett antal användbara referensböcker om t.ex. HTML och CSS. Välj boken O'REILLY HTML Referens och gå gärna igenom några HTML-taggar. Programfältet Längst upp till höger om menyraden hittar du ett programfält och en arbetsyteväxlare Du kan dölja eller ta fram programfältet via menyn Fönster - Programfält. (mer om programfältet senare).

10 Anpassa arbetsytans layout I Dreamweaver kan man anpassa arbetsytans layout så att den passar med användarens bakgrund. Det finns åtta fördefinierade layouter enligt bilden nedan. Du kan även skapa och spara egna arbetsytor. Knappen Arbetsyteväxlare hjälper dig att växla mellan olika arbetsytor. Dreamweaver CS5 visar arbetsytan Klassisk vid en ny installation. Klicka på knappen Arbetsyteväxlare längst upp till höger om programfältet och välj "Programmerare". Undersök olika layouter och växla sedan tillbaka till "Klassisk" och försök att lista ut skillnaden! Tips! Klicka på Återställ Klassisk för att försäkra dig att få standard klassisk arbetsyta enligt bilden på föregående sida.

11 Verktygsfält Det finns fem verktygsfält i Dreamweaver CS5, därav rekommenderar jag att ni alltid visar dessa tre: Dokument, Standard och Kodning. Verktygsfältet Formatåtergivning är avsedd till avancerad CSS-kodning. Gå in under menyn "Visa". Välj "Verktygsfält" och se till att Dokument, Standard och Kodning är markerade enligt bilden nedan. Tips: Högerklicka på något av verktygsfälten för att kunna snabbt visa eller dölja ett verktygsfält. Verktygsfältet Standard Med hjälp av verktygsfältet "Standard" kan du skapa nya dokument, öppna och bläddra efter filer. Du kan spara en fil eller spara alla öppna filer. Du kan skriva ut kod. Här hittar du även Klipp ut, Kopiera och Klistra in. Två bra knapp som är bra att känna till här är Ångra och gör om!

12 Skapa ett HTML-dokument via dialogrutan Nytt Den första knappen, "Nytt" är en genväg till menyn Arkiv-Nytt... och används givetvis för att skapa nya dokument av olika slag. Vi ska nu skapa ett nytt tomt HTML-dokument. Klicka på knappen Nytt. Välj rubriken "Tom sida" och därefter sidtypen HTML. Se till du har <ingen> under layout. Du kan välja HTML 5 från menyn Dokumenttyp. Klicka på knappen "Skapa" eller dubbelklicka på HTML eller <ingen>.

13 Verktygsfältet Dokument Verktygsfältet "Dokument" innehåller bl.a. knappar som visar olika vyer (layouter) av ett dokument. Här kan du även ändra sidans titel (Dokumentrubrik) och förhandsgranska dokument i olika webbläsare. Dokumnetvyer Växla mellan Kod och Design genom att klicka på respektive knapp. Lägg märke till att knappen Dela visar både kodvyn och designvyn samtidigt och delar dessa vyer lodrätt. Du kan även ändra layouten och visa olika vyer med hjälp av programfältet som finns längst upp i programmet. Klicka på knappen Layout och avmarkera Dela lodrätt för att visa vyerna vågrätt. Dessa funktioner finns även under menyn Visa!

14 Förhandsgranska i olika webbläsare Klicka på knappen "Förhandsgranska/felsök i webbläsare". Här kan du förhandgranska ditt dokument i olika webbäsare t.ex. Firefox och Internet Explorer. Välj alternativet "Redigera webbläsarlistan..." för att lägga till flera webbläsare. Dialogrutan "Inställningar" visas med den förvalda kategorin "Förhandsvisning i Webbläsare". Klicka på plustecknet för att lägga till flera webbläsare.

15 Linjaler Med linjaler kan du mäta och planera webbsidans layout. Linjalerna visas på dokumentfönstrets vänstra och övre kanter. Gå in under menyn "Visa". Välj Linjaler och markera "Visa" för att visa linjalerna. Här kan du även ändra måttenheten till tum eller centimeter, men eftersom bildskärmens upplösning anges alltid i pixlar så rekommenderar jag att du väljer "Pixlar". Du kan även högerklicka på den översta eller vänstra linjalen för att ändra mått och dölja alla linjaler.

16 Paneler Paneler i Dreamweaver grupperas i olika grupper vilka kallas panelgrupper eller tabbgrupper. En vald panel i en grupp visas som en flik. Se exemplet nedan: Du kan stänga en panel eller en tabbgrupp genom att högerklicka på panelnamnet. Du kan även minimera paneler till ikoner genom att högerklicka eller med hjälp av ikonen Minimera till ikoner som finns längst upp till höger om panelerna.

17 Gå in under menyn "Fönster" och se till att panelerna: Infoga, Egenskaper, CSS-format och Filer är markerade enligt bilden nedan.

18 Panelen Infoga Den viktigaste panelen i Dreamweaver kallas Infoga. Den innehåller knappar som används för att skapa och infoga olika HTML-objekt såsom länkar, bilder och tabeller. Infoga-panelen organiserar knapparna i flera kategorier som kan antingen visas som en meny eller ett antal flikar. Högerklicka på någon flik och välj "Visa som meny". Nu organiseras knapparna i olika rubriker under en meny. Klicka på "Favoriter". Du kan nu högerklicka för att anpassa dina favoritobjekt. Visa knapparna "Hyperlänk", "Bild" och "Tabell" under favoriter enligt bilden nedan. Visa återigen panelen som flikar. Detta kan du göra längst ner i menyn (under färgikoner).

19 Panelen Filer Filpanelen grupperas med två andra paneler, "Resurser" och "Fragment". Alla dessa tre tillsammans kallas för panelgruppen "Filer". Du kan komprimera eller utöka en grupp genom att dubbelklicka på dess namn. Med filpanelen kan du visa och skapa filer och mappar. Här kan du även skapa och hantera en Plats (Sajt), ladda upp och ladda ner filer till en server m.m. Tips! Tryck på tangenten F4 för att dölja eller visa alla paneler samtidigt (ej infoga-panelen).

20 Statusfältet Längst ned i dokumentfönstret hittar du statusfältet. Här kan du bl.a. zooma in och ut i ett dokument i Designvy, ändra storlek på dokumentfönstret samt se ytterligare information om dokumentet t.ex. den uppskattade storleken inklusive alla bifogade bilder och objekt. Ändra dokumentfönstrets storlek till 600 x 300. Obs! Du kan inte ändra storleken på ett maximerat fönster. Därför behöver du först återställa fönstret genom att klicka på återställknappen (se bilden nedan).

21 Taggväljaren Längst ned till vänster i dokumentfönstret hittar du "Taggväljaren". Här kan du klicka på HTML-taggar för att markera, redigera eller ta bort taggar utan att gå ur Designvyn. Skriv lite text i Designvyn och tryck på retur (Enter) för att skapa ett stycke. Klicka på <body> för att markera hela dokumentet. Klicka på <p> för att markera ett stycke. Högerklicka på en tagg för att ta bort en tagg. Du kan även snabbredigera en tagg utan att gå ur Designvyn.

22 Egenskapspanelen I egenskapspanelen kan du redigera de vanligaste attribut och egenskaper för markerade taggar och objekt t.ex. text, bilder och tabeller. Innehållet i denna panel ändras beroende på det markerade objektet. Om du t.ex. markerar en bild på sidan så ändras egenskapspanelen så att den visar egenskaperna för bilden. Tips: Klicka på frågetecknet som finns längst upp till höger i egenskapspanelen för att se detaljerad information om varje funktion i panelen. Exempel 1: Egenskaper för en bild Exempel 2: Egenskaper för en tabell

23 Övningsuppgifter 1. Skapa ett nytt HTML-dokument via Välkomstskärmen. Spara filen som sida1.html 2. Öppna boken "O'REILLY HTML Referens" som finns under panelen "Referens". 3. Växla mellan arbetsytan "Programmerare" och "Designer". Skapa därefter en ny arbetsyta med valfritt namn. Växla sedan till arbetsytan Klassik 4. Visa panelen "Infoga" som en meny. 5. Visa knapparna "Hyperlänk", "Bild" och "Tabell" som favoriter under infoga-panelen. 6. Ändra dokumentrubriken (titel) och förhandsgranska dokumentet i olika webbläsare. 7. Växla mellan Kod-, Dela -och Design-vyer och undersök skillnaden mellan dessa tre vyer. 8. Visa "Linjaler" och ändra måttenheten till pixlar. 9. Visa panelerna "Filer" och "CSS-format". Dölj alla andra paneler. 11. Dölj/Visa alla paneler samtidigt med hjälp av en enda tangenttryckning (Tips F4). 12. Ändra dokumentfönstrets storlek till 955 x Skriv lite text i Designvyn och tryck på Enter för att skapa ett stycke. Markera stycket med hjälp av "Taggväljaren". 14. Visa "Egenskapspanelen" för det aktuella dokumentet och undersök de olika egenskaperna.

24 Kapitel 2 Texthantering Vi ska i detta kapitel arbeta med text och ett antal formateringsmöjligheter i Dreamweaver. Vi kommer att importerar text från MS Word samt gå igenom listor. Textformat Med textformat syftar man oftast till textens struktur t.ex. stycke och rubriker. Medan textformatering innebär att man ändrar textens utseende t.ex. fet och kursiv. Börja med att skriva följande text i Designvyn (oformaterat). Huvudrubrik (Rubrik 1) Detta är ett stycke. Några ord i fetstil och några ord i kursivstil. Detta är ett nytt stycke. Nu har jag en ny rad i samma stycke. Du märker säkert att Dreamweaver skapar ett nytt stycke så fort du trycker på returtangenten (Enter) automatiskt. Markera första stycket och välj ett annat format från egenskapspanelen. Välj Rubrik 1 och titta noga i taggväljaren. Den HTML-tagg som är kopplad till det valda formatet, alltså h1 för Rubrik 1, används på texten istället. För att få en radbrytning istället för ett stycke behöver du hålla ner tangenten SHIFT samtidigt som du trycker på Enter. Kom ihåg: ENTER infogar ett stycke (en p-tagg) SHIFT + ENTER för att infoga en radbrytning (en br-tagg).

25 Textformatering I egenskapspanelen kan du välja två vanliga textformateringar, nämligen fet och kursiv. Markera ordet fetstil i exemplet ovan och klicka på knappen B för att få fetstil. Markera ordet kursivstil och klicka på knappen I för att få kursivstil. Vilka taggar appliceras på texten? Blockcitat Ibland behöver du göra ett citatblock eller särskilt betona något. Detta kan du, på ett enkelt sätt, åstadkomma med hjälp av knappen blockcitat. Skriv följande text i Designvyn: Detta är ett stycke utan indrag Detta är ett stycke med indrag. Lägg märke till att Dreamweaver skapar ett sådant indrag med taggen <blockquote>". Detta är ett stycke utan indrag Markera det andra stycket och klicka på knappen Blockcitat. Testa att klicka på Blockcitat flera gånger och ta bort formatet med knappen Ta bort Blockcitat som ligger till vänster.

26 Infoga specialtecken Infoga-panelen har en flik som heter Text (se bilden nedan). Här hittar du de mesta vanligaste formattaggarna och en liten speciell meny längst ut till höger. Klicka på den lilla nedåtriktade pilen längst ut till höger. Här hittar du radbrytningstaggen <br>, hårt mellanslag ( ), vänster- och höger citattecken ( ), Långt tanktreck ( ). Här finns även några vanliga tecken för valutor, Copyright, registrerad varumärke och varumärke. Klicka gärna på knappen "Andra tecken" för att komma åt flera andra specialtecken som finns inbyggda i Dreamweaver.

27 Importera text Vid hemsidebyggandet brukar man oftast importera text från andra program t.ex. MS Word. Knappen Klistra in som finns i verktygsfältet Standard fungerar utmärkt för detta ändamål men det är bra att känna till att det finns fyra olika inklistringsalternativ i Dreamweaver. Starta den här övningen med att skriva följande text i MS Word. Markera texten och kopiera med kortkommandot CTRL+C.

28 Växla till Dreamweaver och gå in under menyn Redigera och välj "Klistra in special..." Dialogrutan "Klistra in special" visar fyra alternativ. Se bilden nedan. Välj alternativet "Endast text" och tryck på OK. Då kommer du att få ren text utan någon formatering. Du får inte ens en radbrytning mellan stycken! Öppna dialogrutan "Klistra in special" en gång till och välj det andra alternativet, Text med struktur. Nu får du en rubrik, ett stycke och en radbrytning. Ingen annan formatering tillämpas här!

29 Det tredje alternativet "Text med struktur plus grundläggande formatering". Ger även fet- och kursivstil. Under alternativet "Text med struktur plus fullständig formatering", försöker Dreamweaver importera all formatering. Lägg märke till att Dreamweaver visar teckensnitt, teckenstorlek och marginaler i CSS (Stilmallar)! Om du tycker att du har fått med för mycket formatering så kan du gå in under menyn Kommandon och välja alternativet "Rensa Word-HTML...".

30 I denna dialogruta kan du välja att rensa HTML från Word 97/98 samt Word 2000 och senare. Du kan bl. a. ta bort alla Word-specifika taggar och rensa CSS (Stilmallar). Testkör gärna denna funktion på ovanstående övning.

31 Listor I Dreamweaver kan du skapa flera olika sorters listor. De viktigaste är numrerade listor och punktlistor (Punktade listor). Numrerade listor kallas även ordnade listor och punktlistor kallas oordnade listor. Skriv följande text, separera med Enter. Måndag Tisdag Onsdag Torsdag Fredag Markera texten och klicka på knappen "Punktad lista". Måndag Tisdag Onsdag Torsdag Fredag

32 Klicka nu på knappen "Numrerad lista". 1. Måndag 2. Tisdag 3. Onsdag 4. Torsdag 5. Fredag Du kan på ett enkelt sätt ändra listans egenskaper eller enskilda listposformat genom att klicka på knappen "Listobjekt..." längst ner i egenskapspanelen. Ändra stil till Romerska siffror, stora. I. Måndag II. Tisdag III. Onsdag IV. Torsdag V. Fredag

33 Infoga datum Det allra enklaste sättet att infoga ett datum är att skriva in datumet direkt i Designvyn, men vill du uppdatera datumet automatiskt varje gång du sparar dokumentet, så bör du använda knappen "Datum" i infoga-panelen, fliken Allmänt. Skriv följande text längst ner i dokumentfönstret: Sidan är senast uppdaterad den Klicka på knappen "Datum" och välj ett lämpligt datumformat. Välj gärna även ett tidsformat för att kunna testa den automatiska uppdateringen. Spara dokumentet och undersök datumet!

34 Sök och ersätt I Dreamweaver kan du snabbt söka efter alla förekomster av ett specifikt ord eller en specifik fras. Gå in under menyn Redigera och välj "Sök och ersätt..." Skriv den text du vill söka efter i rutan "Sök" och klicka på knappen "Sök nästa". Vill du ersätta texten med något annat skriv den nya texten i rutan "Ersätt" och klicka på knappen "Ersätt" eller "Ersätt alla".

35 Stavningskontroll Det finns ett antal stavningsordlistor i Dreamweaver. Gå in under menyn Redigera och välj Inställningar. Under fliken Allmänt hittar du en lista med de tillgängliga stavningsordlistorna. Välj Svenska. Du kan nu kontrollera stavningen genom att gå in under menyn Kommandon Välj Kontrollera stavning eller tryck på tangentkombinationen Skift+F7.

36 Övningsuppgifter 1. Skriv och formatera följande text i Dreamweaver. Huvudrubrik (Rubrik 1) Detta är ett stycke med några ord i fetstil och kursivstil. Nu har jag en ny rad i samma stycke. 2. Skriv och formatera följande text. Detta är ett stycke utan indrag "Detta är ett stycke med indrag. Lägg märke till att Dreamweaver skapar ett sådant indrag med taggen <blockquote>". Detta är ett stycke utan indrag 3. Skriv följande text. Copyright Skriv följande text i MS Word. Huvudrubrik Detta är ett stycke text skrivet i MS Word med några enkla textformateringar. Teckensnittet är Calibri. Teckenstorleken är 12 punkter. Några ord är i fetstil och några ord i kursivstil. Det här stycket är centrerat. Markera texten och kopiera med kortkommandot CTRL+C. Växla till Dreamweaver och klistra in texten med struktur plus fullständig formatering. Du ska därefter "Rensa Word-HTML".

37 5. Skriv följande lista i Dreamweaver. Måndag Tisdag Onsdag Torsdag Fredag 6. Ändra listan till en "Numrerad lista" istället. Ändra formatet (Stil) till Romerska Siffor, stora 7. Skriv följande text längst ner i dokumentfönstret Sidan är senast uppdaterad den 01-okt-2011 Se till att datumet uppdateras automatiskt när man sparar filen. 8. Använd funktionen "Sök och ersätt". Sök efter ordet Huvudrubrik och ersätt den med Dreamweaver 9. Kontrollera stavningen i dokumentet. Spara med ett valfritt namn och avsluta Dreamweaver.

38 Kapitel 3 Plats- och Filhantering En plats i Dreamweaver är en samling som består av alla filer, bilder och andra resurser på en webbplats. Med hjälp av en plats kan du redigera och uppdatera dina filer som skapas i Dreamweaver. I detta kapitel kommer vi att gå igenom platshantering. Vi ska skapa nya platser, hantera befintliga och ta bort platser. Skapa en ny Plats Gå in under menyn Plats och klicka på "Ny plats...". Du kan även skapa nya platser via programfältet. Eller via välkomstskärmen

39 Dialogrutan Platskonfiguration visas. Se till att fliken "Plats" är markerad. Du kan nu definiera en ny plats. Ange ett namn (Platsnamn). Skriv t.ex. "Min första DW Plats". Under Lokal mapp för platsen behöver du ange sökvägen till en lokalmapp på hårddisken, alternativt navigera till en mapp eller skapa en ny mapp via knappen Sök efter mapp. Den lokala mappen blir webbplatsen rot som också kallas ROTMAPP. Klicka på knappen Spara.

40 Ange en standardmapp för bilder Dubbelklicka på platsens namn i filpanelen för att ta fram dialogrutan Platskonfiguration. Klicka sedan på fliken Avancerade inställningar. Till vänster ser du en lista på ett antal underkategorier. Den första kategorin, Lokal information, är den viktigaste och därför visas först när du väljer Avancerade inställningar. Här kan du bl.a. ange en Standardmapp för bilder. Du anger sökvägen till den mapp som du använder för att spara alla bilder i den aktuella platsen. Klicka på knappen Sök efter mapp för att skapa en ny mapp eller välja en befintlig mapp. Många webbdesigner föredrar namnet "images" som bildmapp. Obs! Det är viktigt att skapa bildmappen direkt under rotmappen. Tips! Klicka på knappen Hjälp för mer information om att "Konfigurera en Dreamweaver-plats".

41 Hantera Platser Gå in under menyn Plats och klicka på "Hantera platser...". I dialogrutan Hantera platser kan du komma åt alla Dreamweaver platser. Här kan du skapa nya platser, redigera befintliga, duplicera och ta bort platser. Du kan även exportera och importera inställningarna i XML-format. Observera att inga filer eller bilder exporteras här, alltså detta är ingen backup funktion i Dreamweaver! En annan viktig sak att poängtera här är att "Ta bort"-knappen, tar endast bort inställningarna. Inga filer eller bilder tas bort från den lokala hårddisken. Så om du vill ta bort webbplatsen permanent, behöver du gå in i utforskaren och ta bort filer och mappar manuellt. Testa gärna att duplicera en plats och sedan ta bort den. Klicka på knappen Klart när du känner att du behärskar platshanteringen i Dreamweaver.

42 Mer om Filpanelen Gå in under menyn Fönster och markera Filer eller tryck på tangenten F8 för att ta fram/dölja filpanelen (Se bilden nedan). I denna panel kan du, på ett enkelt sätt, skapa nya filer, öppna, byta namn och ta bort befintliga filer. Här ser du en översikt av alla filer som ingår Dreamweaver-platsen. Direkt under fliknamnet visas en grön mappikon, platsens namn och en liten pil som markerar en rullgardinslista. Klicka var som helst på detta område för att växla till andra Dreamweaver-platser. Här kan även utforska andra enheter, komma åt skrivbordet och längst ner i menyn hittar du en länk till dialogrutan Hantera platser

43 Skapa nya filer via Filpanelen Jag nämnde tidigare att du kan skapa nya filer i Filpanelen. Högerklicka på platsens rot och välj "Ny fil". Dreamweaver föreslår namnet untitled.html. Ändra till ett bättre beskrivande filnamn t.ex. index.html (startsida) och tryck på Enter. Tryck på Enter en gång till eller dubbelklicka på filen för att öppna filen. Tips: På samma sätt kan du skapa nya mappar. Högerklicka i Filpanelen och välj "Ny mapp". Skriv ett lämpligt mappnamn och tryck på Enter.

44 Inställningar för nya HTML-dokument (Överkurs) Gå in under menyn Redigera och klicka på Inställningar... Välj kategorin "Nytt dokument". Här kan du ange standardinställningar för nya HTMLdokument. Se till att det står HTML under standarddokument och.html under standardtillägg. Under Standarddokumenttyp kan du välja en av HTML eller XHTMLdokumenttypsdefinitionerna för att skapa webbsidor enligt W3C standarder. De viktigaste dokumenttypsdefinitionerna som du bör känna till är HTML 4.01 Strict och HTML 4.01 Transitional och HTML 5. Väljer du Strict så måste du använda de senaste och aktuella taggar. Här bör all formateringen t.ex. teckensnitt och teckenstorlek kodas med stilmallar (CSS), vilket innebär striktare separation av innehåll/struktur och utseende. Transitional är däremot tolerant mot gamla HTML presentationstaggar, alltså den tillåter dig använda allt som är enligt Strict och även äldre HTML-taggar och attribut såsom font-taggen och attributet align. Standardkodningen är den teckenkod som används i dokumentet. Välj Unicode (UTF-8). Denna kodning fungerar i alla språk.

45 Sidegenskaper Vi ska nu ändra utseendet på ett html-dokument med hjälp av dialogrutan Sidegenskaper. Gå in under menyn Ändra och välj Sidegenskaper... På den vänstra delen av dialogrutan ser du 6 olika kategorier: Utseende (CSS), Utseende (HTML), Länkar (CSS), Rubriker (CSS), Titel/kodning och Hjälpbild. Utforska den första kategorin, Utseende (CSS). Ändra Typsnitt på sidan. Välj teckenstorlek, textfärg och bakgrundsfärg.

46 Övningsuppgifter 1. Skapa en ny mapp direkt under enheten C: (eller valfri enhet i din dator). Ange "Mina Webbplatser" som mappnamn. 2. Skapa en ny Dreamweaver-plats. Ange "Min första DW Plats" som platsnamn. Skapa en ny mapp under mappen "Mina Webbplatser med samma namn (Min första DW Plats) och spara den nya platsen där. 3. Under "Standardmapp för bilder" ska du skapa en ny mapp direkt under rotmappen. Namnge mappen som "images". 4. Skapa följande HTML-sidor via Filpanelen: index.html, kontakt.html, om.html, produkter.html Tips! Högerklicka på platsens rot och välj "Ny fil". Skriv filens namn och tryck på Enter. 5. Öppna alla filer. Ändra dokumentrubriken (titel) på alla sidor till en lämplig titel. Ta fram sidans egenskaper (Dialogrutan Sidegenskaper). Ändra standardtypsnitt till "verdana" och ange "10 punkter" som teckenstorlek på alla sidor.

47 Kapitel 4 Länkar Vi ska i detta kapitel fokusera oss på HTML-Länkar. Kapitlet påbörjas med att infoga e- postlänkar. Sedan går vi vidare med att länka olika HTML-dokument till varandra. Här är det viktigt att förstå skillnaden mellan absoluta och relativa länkar samt kunna öppna länkar i nya fönster. Börja med att skapa och konfigurera en ny Dreamweaver-plats med valfritt namn. Skapa sedan ett HTML-dokument och spara filen som index.html Vi ska nu skapa en meny i detta dokument. Skriv följande punktlista: Hem Om oss Våra Produkter Kontakta oss Skapa en E-postlänk Markera texten under den sista punkten "Kontakta oss" och klicka på knappen "E-postlänk" som finns under fliken Allmänt i Infoga-panelen. Dreamweaver öppnar dialogrutan E-postlänk. Texten "Kontakta oss" fylls i automatiskt i det första textfältet. Skriv en giltig e-postadress under "E-post" och klicka på OK.

48 Spara och förhandsgranska sidan i en webbläsare. Dreamweaver kommer nu att visa texten "Kontakta Webmaster" som en standard länk. Texten visas i en annan färg och är understruken. Hem Om oss Våra Produkter Kontakta oss Lägg märke till att e-postlänkar öppnar e-postklienten som du använder i din dator t.ex. MS Outlook eller Mozilla Thunderbird. Om du får problem med att öppna länken så behöver du förmodligen konfigurera din e-postklient först. Du ska nu skapa 3 nya HTML-sidor. Skapa följande filer direkt under roten index.html, om.html och produkter.html

49 Relativa länkar (Dokumentberoende sökvägar) Relativa länkar som även kallas dokumentberoende sökvägar passar bäst för lokala länkar på en och samma webbplats (filer som ligger i samma rotmapp). Gå till filen index.html. Vi ska nu länka den första rubriken Hem till startsidan d.v.s. till samma dokument. Markera texten och skriv index.html i textfältet Länk i egenskapspanelen. För att undvika felstavningar erbjuder Dreamweaver två grafiska metoder att skapa relativa länkar. Den första kallas för "Bläddra efter fil" och den andra "Peka på fil". Markera Om oss och klicka på knappen "Bläddra efter fil" i egenskapspanelen. Bläddra efter filen om.html.

50 Tips! Klicka på knappen Platsrot om du har flera plaster med samma filnamn. Då hamnar du alltid i den aktuella platsens rotmapp. Innan du klicka på OK, notera sökvägen (URL) längst ner. Dreamweaver visar filnamnet om.html och direkt under filnamnet ser vi att Dreamweaver väljer Dokument under "Relativt till", vilket innebär att länken är dokumentberoende. Den andra grafiska metoden är betydligt enklare och smartare. Markera texten Våra Produkter och klicka på knappen "Peka på fil". Håll i knappen nedtryckt och dra till filen produkter.html för att skapa en länk. Förhandsgranska dokumentet i en webbläsare och testa alla länkar. Kopiera menyn till alla sidor om alla länkar fungerar. Spara alla filer och testa igen. Tips! Om du ändrar filnamn i filpanelen, uppdateras alla relativa länkar automatiskt!

51 Absoluta länkar Öppna filen index.html och skapa en länk till Här ska du skriva webbadressen (URL), inklusive protokollet i länkfältet. Detta kallas för en absolut länk. Du måste använda absoluta länkar när du länkar till webbplatser och filer som ligger på en annan server. Testa gärna att länka till en extern adress utan att ange förhandsgranska sidan och klicka på länken! Vad händer? Öppna länkar i nya flikar (fönster) Ibland behöver man öppna en länk i ny flik i webbläsaren. Attributet Mål (Target) har ett värde som heter _blank som fixar detta. Markera länken till Google och välj _blank från listan som visas under Mål i egenskapspanelen.

52 Formatera länkar I Dreamweaver kan du, på ett enkelt sätt, formatera alla länkar som visas på en sida. Du kan ändra Länktypsnitt, Storlek och färgerna på länkar, Svävning-länkar (Rolloverlänkar), Besökta länkar och Aktiva länkar. Gå in under menyn Ändra och öppna dialogrutan Sidegenskaper. Välj kategorin Länkar (CSS) och testa gärna att ändra länktypsnitt, storlek och alla färger. Här kan du även ange länkens understrykningsformat. Alternativet "Använd aldrig understrykning" är relativt modernt!

53 Övningsuppgifter 1. Skapa och konfigurera en ny Dreamweaver-plats med namnet Mina Länkar. Skapa en bildmapp direkt under rooten. Skapa sedan ett HTML-dokument och spara filen som index.html 2. Skriv följande punktlista: Hem Våra Tjänster Om Företaget Kontakt 3. Markera den sista punkten "Kontakt" och infoga en E-postlänk. Ange din egen e-postadress som länk. 4. Skapa ytterligare 2 HTML-sidor under rooten, tjanster.html och om.html 5. Gå till index.html och skapa länkar till alla sidor. 6. Kopiera menyn till alla sidor. 7. Öppna filen index.html och skapa en extern länk t.ex. till 8. Se till att länken öppnas i ny flik i webbläsaren.

54 Kapitel 5 Bildhantering Under detta kapitel kommer vi att arbeta med färger och bilder i Dreamweaver. Vi startar med att ändra bakgrundsfärg och bakgrundsbild. Sedan infogar vi några bilder och visar hur man optimerar och beskär dessa. Färger Det finns endast 17 namngivna färger enligt W3C HTML och CSS standarder. Dessa färger är: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, och yellow. Men de flesta webbläsare har stöd för ca 150 namngivna färger. En lista på dessa färger finns här: Starta Dreamweaver och skapa en HTML-sida. Spara som colors.html Bakgrundsfärg Du kan ange sidan bakgrundsfärg i dialogrutan Sidegenskaper på två olika sätt antingen via HTML eller CSS. Från menyn Ändra välj Sidegenskaper eller klicka på knappen Sidegenskaper i egenskapspanelens nedre del. Klicka sedan på fliken Utseende (HTML).

55 Under alternativet Bakgrund kan du skriva en namngiven färg t.ex. blue. Testa gärna några andra standardfärger såsom lime, maroon och navy. Man kan även ange en färg enligt det hexadecimala talsystemet där färgen svart anges med värdet # och färgen vit med värdet #FFFFFF. Men du behöver inte kunna HEX-koder utantill. Dreamweaver erbjuder en liten palett (Färgruta) med alla färger som kan, på ett enkelt sätt plockas med en lite pipett. Smart va :-) Under denna kategori kan du även textfärgen på hela sidan. Testa gärna olika färger och klicka på knappen Använd för att testa färgerna på sidan. Lite om bildformat Det finns tre bildformat som används på webbsidor. Dessa är GIF, JPEG (eller JPG) och PNG. GIF (Graphic Interchange Format) innehåller max 256 färger och lämpar sig för animerade bilder (Gif-animeringar). JPEG (Joint Photographic Experts Group) kan innehålla miljontals färger och därför är mest lämpade för foton och bilder med halvtoner. PNG (Portable Network Graphics) lämpar sig för all slags webbgrafik. PNG har stöd för miljontals färger samt stöd för alfakanaler, vilket gör att delar av bilden kan vara genomskinliga.

56 Bakgrundsbild För att ändra bakgrundsbilden klickar du på knappen "Bläddra...". Sök efter en bild, markera bilden och klicka på OK. Dreamweaver visar bakgrundsbilden upprepade gånger om den inte fyller hela fönstret. Visa bilder i HTML-dokument Du kan visa bilder i HTML-dokument på många olika sätt. Placera insättningspunkten där du vill att bilden ska visas. Gå in under menyn Infoga och välj Bild. Markera en valfri bild från din dator och klicka på OK. Du kan även klicka på knappen Bild i Infoga-panelen under fliken Allmänt för att infoga en bild.

57 Hjälpattribut för bildtagg Standardinställningen i Dreamweaver visar dialogrutan "Hjälpattribut för bildkod" när man infogar en bild. Här kan du ange alternativ text för bilden (tillgänglighetsattribut) som kan t.ex. läsas upp av handikappadeanpassade webbläsare. Bildegenskaper När du markerar en bild visas egenskapspanelen för bilder längst ner i programmet. Här kan du ange ändra och ange bildens egenskaper t.ex. bredd (B) och höjd (H). ' Om du ändrar bredd eller höjd visar Dreamweaver en liten rund pil vars uppgift är att återställa bilden till original storlek. I den egenskapspanelen hittar du den alternativa texten (Alt) som vi pratat om under "Hjälpattribut för bildkod". Under "Kant" anger du bredd på bildramen mätt i pixlar.

58 Optimera bilder Knappen "Redigera bildinställningar" (kugghjulet) öppnar dialogrutan "Bildförhandsvisning". Här kan du optimera bildens filstorlek och ändra dess kvalitet. Du kan ändra filformat och justera färgpaletten för att ta bort färger som inte används.

59 Under fliken "Fil" kan du skala eller exportera ett område på bilden. Skala bilden till 50% och klicka på OK. Beskära bilder Knappen "Beskär" i egenskapspanelen hjälper dig att kapa kanterna på en bild, lodrätt eller vågrätt. Du kan beskära bilder om du vill dra uppmärksamheten till ett visst område. Lägg märke till att Dreamweaver ändrar filen på hårddisken men du kan ångra beskärningen och återställa bilden tills du avslutar programmet.

60 Bildplatshållare En bildplatshållare är en bild som används tillfälligt, tills den färdiga bilden är klar att läggas på webbsidan. Klicka på den lilla pilen till höger om knappen Bilder i fliken Allmänt och välj "Bildplatshållare". Ange Namn, Bredd och Höjd, Färg och Alternativ text enligt figuren nedan! Resultatet visas i Dreamweaver men förhandsgranska gärna i olika webbläsare för att se hur bildplatshållaren behandlas utanför programmet.

61 Överrullningsbild En överrullningsbild är en bild som ändras när muspekaren svävar över den i en webbläsare. Här behöver man först förbereda två bilder, en originalbild som visas när webbsidan visas först i webbläsaren och en överrullningsbild som visas när muspekaren befinner sig över den första bilden.

62 Övningsuppgifter 1. Starta Dreamweaver. Skapa ett nytt HTML-dokument och skriv några ord. Öppna dialogrutan Sidegenskaper och ändra textfärg och bakgrundsfärg. Testa gärna olika färger. 3. Vilka bildformat används på webbsidor. Ange förkortning och användningsområde! 4. Infoga en valfri bild i och ange en alternativ text till bilden. 5. Ändra bredd och höjd på bilden. Återställ därefter bilden till original storlek. 6. Ange 3 pixlar under Kant. 7. Skala bilden till 50 %. 8. Skapa en bildplatshållare enligt nedanstående figur.

Visa mer