9789175310428

Adobe® Grunder DR MWEAVER CC a

I denna bok har vi använt svensk version av Dreamweaver CC (13.2) och Windows 8. Om du använder andra versioner kan det se lite annorlunda ut hos dig. Har du installerat programmet på Mac skiljer det bland annat vid filhantering och tangentkombinationer.

Till boken medföljer ett antal övningsfiler som du hämtar från vår webbplats www.docendo.se:

1. Starta webbläsaren, skriv www.docendo.se i adressfältet och tryck på Retur.

2. Skriv artikelnumret, 3095, i sökrutan och klicka på Sök.

3. Klicka på titeln Dreamweaver CC Grunder.

4. Klicka på filen 3095.zip högst upp på sidan.

5. Klicka på Spara för att spara filen på datorn.

6. Välj var du vill spara filen, exempelvis på skrivbordet, och klicka på Spara.

7. När filen har hämtats stänger du dialogrutan och avslutar webbläsaren.

8. Om du har valt att spara filen på skrivbordet visas den som en ikon med namnet 3095. Dubbelklicka på ikonen för att packa upp filerna till lämplig mapp på din hårddisk.

Copyright © Docendo AB

Detta verk är skyddat av upphovsrättslagen. Kopiering, utöver lärares rätt att kopiera för undervisningsbruk enligt BONUS-avtal är förbjuden. BONUS-avtal tecknas mellan upphovsrättsorganisationer och huvudman för utbildningsanordnare, exempelvis kommuner/universitet.

Våra böcker och tillhörande produkter är noggrant kontrollerade, men det är ändå möjligt att fel kan förekomma. Vi tar gärna emot förbättringsförslag.

Produkt- och producentnamnen som används i boken är ägarens varumärken eller registrerade varumärken.

ISBN: 978-91-7531-042-8

Artikelnummer: 3095

Författare: Iréne Friberg

Omslag: Fredrik Anderberg

Innehållsförteckning

5 Bilder ............................................... 82

Bildformat 82

Bilders upplösning ....................................................... 83

Infoga bild 84

Bildegenskaper ............................................................ 84

Bildjusteringar ............................................................ 86 Smart objekt 88

Bildram ....................................................................... 88

Justering av bildens placering 89

Bakgrundsbild 90

Hjälpbild ............................................................... 90

Överrullningsbild 91

Mellanrum mellan bilder.............................................. 92

Bilder uppdelade i klickbara områden ......................... 93

6 Tabeller............................................ 97

Infoga tabell 97

Markera hela eller del av tabell.................................... 98

Slå samman och dela upp celler 99

Lägga till kolumn eller rad 100 Lägga till flera kolumner eller rader .................... 100

Ta bort rad eller kolumn 101

Ändra bredd och höjd .................................................

1 Arbetsmiljön

Användningsområde

Du använder Dreamweaver CC för att skapa webbsidor och kan bygga upp hela webbplatser bestående av sidor med både text och bild.

Både nybörjare, som inte arbetat i programmet tidigare, och avancerade användare har stor hjälp av programmet. Som nybörjare får du mycket hjälp, du behöver inte kunna skriva någon som helst kod för att skapa webbsidor med Dreamweaver. (I detta material utgår vi dock från att du känner till grunderna i webbdesign.) När du sedan blir duktigare kommer du att kunna använda de mer avancerade verktygen i programmet. Du kan få hjälp med många enformiga och tidskrävande uppgifter vilket gör programmet till en tillgång när du skapar webbplatser.

Starta Dreamweaver

För att starta Dreamweaver klickar du (eller dubbelklickar, beroende på var den finns) på programmets ikon. Exakt hur den ser ut varierar, bilden till höger är ett exempel

1. Starta Dreamweaver.

Är det första gången du startar programmet får du kanske välja vilka filer Dreamweaver ska associeras till. Standardinställningen brukar passa de flesta så innan du är säker på vilka du vill ha så behåll den. Skulle du få uppmaningen att skapa en plats eller rotmapp så klicka på knappen Avbryt. Det kommer du att göra senare.

När Dreamweaver startar väljer du vad du vill göra, i välkomstskärmen (se följande bild). Det kan vara att öppna ett nytt eller befintligt dokument, lära dig om grunderna i programmet eller skapa ett dokument med hjälp av guider. Vill du inte att välkomstskärmen ska visas varje gång du startar programmet så markerar du rutan vid alternativet Visa inte det här igen. Den hittar du i nedre vänstra hörnet.

Arbeta i Dreamweaver

I Dreamweaver kan du göra nästan allting på flera olika sätt. Du kan arbeta med paneler, via verktygsfält, med kortkommandon och från menyerna. Om du till exempel ska infoga en bild kan du antingen gå via panelen Infoga eller använda menyn Infoga, se höger.

För att arbeta mer ergonomiskt bör du lära dig de vanligaste kortkommandona.

Då kan du växla mellan att klicka dig fram och att använda tangentbordet. För att visa vad som är möjligt i programmet växlar vi i detta material sätt att utföra en åtgärd.

I följande bild ser du utseendet i programmet när du valt nytt HTML-dokument och delad vy. Det du ser är bland annat menyer, verktygsfält, fönster, paneler och kontroller. Det används så få färger som möjligt, bland annat på ikonerna, för att det man arbetar med ska vara i fokus.

Paneler (dockade)

Verktygsfält

Menyer

Dokumentflik Programfält

Kodfönster

Egenskapskontroll

Dokumentfönster

Statusfält

Via menyn i panelen Infoga kan man även välja att visa eller dölja ikonetiketterna.

Arbetsytor

I Dreamweaver CC finns det genvägar till olika arbetsytor det vill säga hur programfönstret visas, Kompakt eller Utökad. Man kan även skapa sin egen arbetsyta och spara den. De olika genvägarna finns längst upp i programfönstret, på menyn som visas när man klickar på knappen för att växla arbetsyta. I detta material kommer vi huvudsakligen använda Kompakt.

1. Pröva de olika arbetsytorna. Välj Kompakt.

Vyer

Du kan välja att visa en eller båda av de två olika vyer i programfönstret när du arbetar i Dreamweaver: kodvy och designvy. Du klickar på knappen Dela (på verktygsfältet Dokument) för att visa båda vyerna samtidigt.

Genom att ha dessa öppna samtidigt ser du både koden och hur det grafiskt kommer att se ut i webbläsaren.

Standardinställningen är att vyerna då visas i fönster som placeras vertikalt. Vill du hellre att de placeras lodrätt klickar du på menyn Visa och avmarkerar

Dela lodrätt.

Genom att dra i avskiljaren mellan vyerna (placera muspekaren över den, klicka och dra när en dubbelpil visas) kan du välja hur du vill fördela den tillgängliga ytan mellan de båda.

Du kan även välja att bara ha en av vyerna aktiverade om du hellre arbetar enbart i en av dem eller för att få ännu mer plats för innehållet. Det gör du genom att klicka på knappen Kod eller Design, beroende på vilken vy du väljer att ha öppet.

Live-vyn

Den tredje vyn som är mycket användbar under arbetets gång är Live

När den aktiveras så ser du sidan som när den visas i en webbläsare. För vissa mer avancerade funktioner lämpar sig inte livevyn men för det grundläggande är den utmärkt. När du befinner dig i Livevy kan du även se tillhörande kod i vyn Live-kod. Knappen för den finns bredvid Live-knappen.

Försöker du ändra koden visas en varning:

Statusfältet

Vid statusfältets vänstra nederkant ser du den HTML-kod där markören för tillfället är placerad. Klickar du på taggen så markeras kod och eventuellt tillhörande objekt (till exempel text eller bild), både i dokument- och kodfönstret.

HTML-kod kallas också för taggar; en tagg är till exempel <body> som syns i bilden.

I statusfältet ser du även tre skärmförhandsvisningar: mobil (480x800), bärbar dator (768x1024) och skrivbordsskärm (1000x530). Dessa storlekar går inte att ändra i skrivande stund. Efter skärmikonerna visas information om skärmstorlek som dokumentfönstret är inställt att passa för.

Klickar du på pilen vid storleksangivelsen kan du i menyn som öppnas välja att ändra fönstrets storlek. (Kan du inte välja storlek beror det ofta på att dokumentfönstret är maximerat.)

Väljer du istället alternativet Ändra storlek i menyn, öppnas en dialogruta där du kan ändra fönsterstorlek.

Menyer

När du klickar på menyerna visas det olika kommandon beroende på menyns namn. Det är här du ska börja att leta om du inte riktigt vet var du ska hitta ett kommando. Menyernas namn ger dig en bra ledtråd till vad du kan hitta under respektive meny. Under menyn Redigera hittar du till exempel kommandon för att klippa ut, kopiera och klistra in. En meny som är extra bra att lära sig använda är Hjälp. Där hittar du kommandon som kan hjälpa dig om du kör fast. För att öppna hjälpfönstret väljer du Hjälp, Dreamweaver-hjälp, eller trycker F1.

Snabbmenyer

Många av de kommandon du hittar under menyerna når du även via snabbmenyerna. Dessa kommer du åt om du högerklickar (Ctrl-klickar för Mac).

Verktygsfält

I övre delen av programfönstret är verktygsfältet Dokument placerat:

Där finns bland annat kommandon för att ställa in hur dokumentet och dokumentfönstret du har öppet ska visas på skärmen. Om du högerklickar på verktygsfältet kan du se vilka andra verktygsfält du kan välja att visa. (Visas kodvyn finns även alternativet Kodning i listan, se bilden till höger.) Du kan till exempel välja att visa eller stänga fältet Standard. På den hittar du grundläggande kommandon, som visas i form av ikoner, som till exempel Spara och Skriva ut.

Kan du redan HTML-kodning har du stor nytta av verktygsfältet Kodning som du kan se när kodfönstret är öppet. Med hjälp av det kan du till exempel visa vilka dokument som är öppna, dölja och visa kod i olika nivåer (vilket kan göra det lättare att hitta det man söker i koden), visa felaktig kod, infoga kommentar, skapa indrag, formatera kod med mera.

Ovanför verktygsfältet Dokument visas flikar med namnet på dokument som är öppna. För att växla till ett annat dokument, om du har flera öppna samtidigt, klickar du på dess namn.

Paneler

Till din hjälp har du en mängd paneler med kommandon, som du lätt kommer åt. Till höger på skärmen ser du ett ”paket”, paneldocka, med olika panelgrupper där gruppens namn och ikon visas.

Visas inte flikar när du öppnar ett dokument så är fönstret inte maximerat. Klicka då på knappen Maximera i dokumentfönstrets (inte programfönstret) övre högra hörn. Vilka paneler som visas på din skärm skiljer sig kanske från bilden eftersom det finns flera olika att välja mellan.

I varje panelgrupp hittar du en eller flera paneler (som visas i form av flikar). Vill du maximera/minimera någon av grupperna så att de olika flikarna visas/ döljs klickar du någonstans i fältet med dubbelpilen uppe till höger i panelen.

För att ändra till utökad/minimerad klickar du på dubbelpilen igen.

Vill du placera en av panelgrupperna tillsammans med andra (i paneldockan; dra den då över till gruppen och när en blå ram visas släpper du musknappen) eller som flytande någonstans i programfönstret, klickar du någonstans i området där panelens (eller panelernas) namn visas och drar till önskad plats.

Klickar du på ikonen längst till höger i en panelgrupp (ikonen visas när en panelgrupp är maximerad) får du tillgång till en meny med olika alternativ. Dessa alternativ varierar beroende på vilken grupp du klickar på. Behöver du mer information om den aktuella panelen klickar du på alternativet Hjälp så öppnas ett fönster med förklarande text.

Flytta eller stänga panel

Skulle du vilja flytta en panel från den nuvarande panelgruppen klickar du på panelens flik och drar. Du kan placera den i ensam någonstans på arbetsytan (flytande panel) eller lägga till den i en annan grupp.

För att stänga panelgruppen kan du gå via panelens meny och välja Stäng tabbgrupp. Vill du bara stänga den aktiva panelen väljer du Stäng. Det går också att stänga en panel via menyn Fönster i menyraden genom att klicka på dess namn så att bocken till vänster försvinner.

Dölja paneler

I Fönster-menyn visas även respektive panels kortkommando.

Behöver du mer plats för dokumentet men inte vill stänga panelgrupperna, kan du klicka och dra sidan av panelgrupperna, se bild till höger. Dra sedan åt höger så mycket du tycker behövs. Det finns dock en gräns för hur mycket du kan minska ytan för panelerna.

Vill du dölja alla paneler samtidigt trycker du F4. Genom att göra så får du hela skärmen ledig för dokumentet.

Egenskapskontrollen

Under dokumentfönstret ser du egenskapskontrollen (Egenskaper). I den ställer du in till exempel höjd och bredd för en bild eller teckensnitt för text. Egenskapskontrollen visar alltså egenskaperna för det du har markerat. Visas den inte väljer du Fönster, Egenskaper. Det finns två kontroller, en för HTML och en för CSS (mer om css senare i boken). Du väljer vilken som ska visas genom att klicka på någon av knapparna längst till vänster i kontrollen.

Kontrollen är delad i två delar: en övre standarddel och en undre med mer avancerade inställningsmöjligheter. För att dölja eller visa den undre delen klickar du på den lilla pilen i nedre högra hörnet. Den syns om paneldockan till höger inte är alltför breddad eller om kontrollen är flytande. Vill du ha hjälp med den egenskap du håller på med, kan du klicka på symbolen med frågetecknet i kontrollens övre högra kant, under namnlisten (se föregående bild). Då öppnas ett webbfönster med mer information.

Grundläggande inställningar

I ett avancerat program som Dreamweaver CC har du en mängd inställningsmöjligheter. Du ska nu kontrollera några av dem så att din skärmbild ska stämma bättre överens med bilderna i detta material. Många av inställningsmöjligheterna kommer du inte ha användning för innan du kommit en bit på väg mot att bli en driven webbdesigner. De inställningar du får göra här är bara för att ge en inblick i vad som finns att välja bland och för att du ska få kunskap om hur man kan anpassa programmet efter egna behov. Standardinställningarna är annars bra nog i början så nybörjaren kan sätta igång med att lära sig att skapa webbsidor.

Dialogrutan Inställningar

1. Gå in under menyn Redigera och välj Inställningar så öppnas dialogrutan med samma namn:

Till vänster i dialogrutan ser du en kolumn med rubriker som anger vilka kategorier du kan göra inställningar för. När du klickar på en kategori får du möjlighet att göra en mängd olika val, beroende på kategorins namn. Dessa inställningar kommer sedan att gälla tills vidare.

Med tiden som du blir kunnigare kommer du kanske att vilja göra fler inställningar. Glöm då inte av denna dialogruta. Du kommer här att gå igenom några av kategorierna.

I kategorin Allmänt som vanligtvis öppnas direkt när du väljer alternativet Inställningar, ställer du bland annat in om du vill att välkomstskärmen ska visas. (Om du markerat kryssrutan Visa inte det här igen men ångrar dig är det här du ändrar inställning.) Du kan också ställa in om det dokument som var öppet när programmet stängdes automatiskt ska öppnas vid nästa start, och antal steg som är möjliga att ångra (händelser som till exempel ändring av färg på bakgrund).

2. Klicka på kategorin Nytt dokument.

Här ställer du in vad som ska gälla för nya dokument, till exempel vilken typ av kod som ska användas, se följande bild.

I listan Standarddokument har du ett flertal alternativ att välja bland. Många kommer du kanske aldrig att använda. Så här i en grundkurs kan du välja att behålla standardinställningen.

I rutan Standardtillägg ser du vilket filtillägg som läggs till när du sparar. I Dreamweaver sparas dokument med tillägget .html. Ett annat vanligt tillägg till HTML-dokument är .htm, som du kanske känner igen från andra program som kan spara dokument som webbsidor.

Vill du se vad andra standarddokument har för filtillägg kan du markera dem i listan ovanför (Standarddokument) så visas tillägget i rutan. Det kan vara användbart till exempel när du inte kommer ihåg ett speciellt filtillägg eller inte känner till ett du träffar på under ditt arbete med Dreamweaver.

I Standarddokumenttyp (DTD) anger du utifrån vilken standard dokumentet ska ”byggas”. Standard är XHTML och den är bland de vanligaste när det gäller dokumenttyp för grundläggande webbsidor. Den allra senaste heter HTML 5. Men det är inte alla webbläsare som förstår den typen så än så länge är det säkrast att använda någon av de föregående. För att ange en annan standard klickar man på pilen vid rutan och väljer alternativ i listan.

I listan Standardkodning kan du välja ett alternativ som passar dig, beroende på vilket (talat) språk du skriver på och vilken teckentabell du kommer att behöva ha tillgång till. Normalt används Unicode eller Västeuropeisk (även kallad Latin1, eller ISO 8859-1) i Sverige om man skriver på svenska eller engelska.

HTML eller XHTML?

Webbsidor skapas av kod. Ett av de senaste vad gäller webbsidekod är XHTML. Det är efterföljaren till HTML som fortfarande används av många för att skapa webbsidor. En skillnad mellan HTML och XHTML är att i den senare versionen måste du vara mer noggrann när du skriver start- och stopptaggarna. En annan är att det är bara gemener som är tillåtna i XHTML-koden. I boken hittar du kodexempel med versaler men det är endast för tydlighetens skull. Något att tänka på när du väljer vilken version du vill koda med, är att XHTML inte alltid behandlas helt rätt av äldre webbläsare.

I detta material har vi valt att behålla standardinställningen. När du själv, efter kursens slut, skapar webbsidor kan du själv välja alternativ. Ta för säkerhets skull reda på vilka webbläsare som klarar att visa webbsidor kodade med XHTML och kontrollera själv genom att skapa några webbsidor både i HTML och XHTML och förhandsgranska dem i några olika webbläsare. De sidor du skapat i HTML kan du senare konvertera till XHTML om du vill det.

Markerar du rutan Visa dialogrutan Nytt dokument när Ctrl+N trycks ned så får du möjlighet att i dialogrutan välja typ av dokument. Avmarkerar du rutan skapas ett nytt dokument enligt de inställningar du gjort i denna kategori (Nytt dokument).

3. Klicka på kategorin Typsnitt och kontrollera att dialogrutan stämmer överens med följande bild:

Ange webbläsare

1. Klicka på kategorin Förhandsvisning i Webbläsare

Här väljer du vilken eller vilka webbläsare du vill kunna förhandsgranska webbsidorna i. I detta material används Mozilla Firefox och/eller Internet Explorer 10 som webbläsare. Även du kan ange en sekundär webbläsare och har då möjlighet att förhandsgranska i två olika, vilket är att rekommendera. I alla fall när du sedan själv börjar arbeta med att skapa webbsidor. De olika webbläsarna visar nämligen webbsidor lite olika ibland, eftersom olika koder (särskilt de mer avancerade) kan tolkas olika beroende på vilken läsare som används.

Du kan ange många olika webbläsare och två av dem kan du välja med tangenterna F12 (den primära) och Ctrl + F12 (den sekundära) (Cmd + F12 på Mac) för snabb åtkomst.

För att lägga till en webbläsare klickar du på knappen Redigera och i dialogrutan som öppnas anger du namn, sökväg och om den ska vara primär eller sekundär.

Använder du en annan webbläsare under kursens gång än de som används i denna bok så var då medveten om att det du ser på skärmen och vad bilderna i materialet visar kanske inte alltid är exakt likadant.

Om du vill slippa att behöva spara filen du arbetar med varje gång du förhandsgranskar i webbläsaren, markerar du rutan vid Förhandsgranska med temporär fil.

Några andra inställningsmöjligheter är: Fönsterstorlekar. Här kan du ange storlekar som ska visas i statusraden. Du kan ändra dem genom att klicka och skriva in nya mått. Bredvid etiketten Anslutningshastighet kan du välja vilken uppkopplingshastighet som ska vara inställd som standard.

2. Undersök de andra kategorierna för att se vad de innehåller.

3. Klicka sedan på knappen Använd.

Du har nu gjort några grundläggande inställningar som påverkar det du ser på skärmen när du arbetar med Dreamweaver. När du senare fått mer erfarenhet av webbsideredigering kommer du eventuellt att behöva göra ytterligare inställningar som underlättar ditt arbete. Då går du till dialogrutan Inställningar igen.

Avsluta Dreamweaver

Du behöver inte stänga filer innan du avslutar programmet. Har du inte sparat ändringar så får du frågan om de ska sparas. För att stänga programmet går du in under menyn Arkiv och väljer Avsluta. Eventuellt visas en dialogruta med frågan om du vill spara ändringar du gjort sedan sist du sparade. Klicka då på lämplig knapp. I detta fall ska du inte spara.

4. Klicka på Nej.

Tillämpningsuppgifter

Arbetsmiljön

Undersök de olika menyerna och panelgrupperna för att få insikt i vad de innehåller.

Använda hjälpen

Undersök hjälpfönstret och lär dig använda det genom att söka efter olika ämnen.

Panelhantering

Pröva att dölja och visa panelerna. Gruppera om panelen Resurser med gruppen CSS

Adobe® Grunder DR MWEAVER CC a

Adobe Dreamweaver CC används för att skapa och redigera webbsidor och andra webbapplikationer. Det moderna visuella gränssnittet gör det både lätt och roligt att bygga webbsidor. Med den här boken lär du dig grunderna i programmet. Du får bland annat kunskap om hur du skapar webbsidor för olika ändamål och hur du bygger upp mallar. Du lär dig att hantera teckensnitt och hur text justeras, infoga och optimera bilder, bygga sidor som innehåller bland annat länkar och hur du formaterar dessa. Boken ger dig också grundkunskaper i CSS, Cascading Style Sheets vilket betyder stilmall, som är ett språk som beskriver formatet på en eller en grupp av webbsidor.

Du lär dig även använda det inbyggda FTP-verktyget för att föra över filer från den lokala datorn till en webbserver och hur du därefter uppdaterar så att de senaste filerna används på webbplatsen. Boken kan användas för både pc och Mac.

ISBN 978-91-7531-042-8

I boken varvas teoridelar med steg för steg-beskrivningar som är lätta att följa. I tillämpningsuppgifterna får du arbeta självständigt och pröva dina nyvunna kunskaper. Övningsfilerna till boken laddar du ner utan kostnad från vår webbplats docendo.se. 9 789175 310428