Macromedia Dreamweaver 8 Grundkurs www.databok.se
Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 1 Arbeta i Dreamweaver... 3 Fönster... 4 Statusfältet... 4 Menyer... 5 Snabbmenyer... 5 Verktygsfält... 5 Paneler... 6 Flytta eller stänga panel... 6 Dölja paneler... 7 Egenskapskontrollen... 7 Grundläggande inställningar... 8 Dialogrutan Preferences... 8 HTML eller XHTML... 10 Ange webbläsare... 12 Avsluta Dreamweaver... 14 Övningsuppgift... 14 2 Filhantering... 15 Dialogrutan Site Definition... 15 Skapa standardmapp för bilder... 18 Lägga till plats... 19 Ta bort plats... 20 Första webbsidan... 20 Öppna ett nytt dokument... 21 Panelen Reference... 22 Panelen Snippets och kodfragment... 23 Ange sidegenskaper... 24 Spara dokumentet... 25 Stänga dokument... 27 Öppna befintlig fil... 28 Förhandsgranska webbsida... 29 Kopiera övningsfilerna... 29 Kort om filöverföring... 29 Överföring av filer... 30 Avsluta Dreamwever... 31 Ange filer som ska öppnas vid start... 32 Övningsuppgifter... 32 3 Hantera text...33 Teckensnitt... 33 Välja teckensnitt... 34 Redigera teckensnittslistor... 35 Formatera med stil... 35 Styckejustering... 36 Teckenstorlek... 36 Rubriker... 37 Kopiera, klipp ut och klistra in... 38 Kopiera från annat program... 40 Kopiera och klistra in HTML... 40 Importera text från andra program... 41 Text från webbsida som skapats i Word... 41 Importera tabbavgränsad text... 43 Panelen History... 44 Text med färg... 45 Skapa indragna stycken... 47 Listor... 48 Punktlistor... 48 Numrerad lista... 51 Ändra listtyp i dialogrutan... 52 Definitionslista... 52 Övriga listtyper... 53 Kombinera listtyper... 53 Infoga datum... 53 Datum med färg... 55 Ta bort datum... 55 Infoga vågrät linje som avdelare... 55 Justera avdelaren... 55 Skugga avdelaren... 56 Infoga specialtecken... 56 Söka och ersätta text... 56 Spara och återanvända fråga... 58 Stavningskontroll... 58 Linjaler... 60 Stödlinjer... 61 Zooma... 61 Handverktyget... 62 Ta bort stödlinje... 62 Övningsuppgift... 62 Skandinaviska Databöcker AB Dreamweaver 8 grundkurs i
4 Länkar...63 Länkadressering... 63 Absolut sökväg... 63 Relativ sökväg... 63 Infoga länk... 65 E-postlänk... 66 Ankare... 67 Länka till ankare inom dokument... 67 Länka till ankare i annat dokument... 69 Formatera länkar... 70 Länkfärg... 70 Länkar och teckensnitt... 71 Panelen Assets... 71 Kontrollera länkar... 72 Kontrollera hela platsens alla länkar... 72 Platskarta... 73 Övningsuppgift... 73 5 Bilder...75 Bildformat... 75 GIF (Graphics Interchange Format)... 75 JPEG (Joint Photographic Experts Group)... 76 PNG (Portable Network Graphics)... 76 Bilders upplösning... 76 Dpi och ppi... 76 Vektorbilder... 77 Infoga bild... 77 Bildegenskaper... 79 Lågupplöst bild... 79 Ange alternativ text... 80 Ändra storlek på bild... 80 Återställa bildens storlek... 81 Bildjusteringar... 81 Bildram... 82 Justering av bildens placering... 82 Bildplatshållare... 83 Bakgrundsbild... 84 Tracing image... 84 Överrullningsbild... 85 Beteenden... 85 Navigeringsfält... 86 Ändra navigeringsfält... 89 Mellanrum mellan bilder... 90 Bilder uppdelade i klickbara områden... 90 Ändra hotspot-område... 92 Radera hotspot-område... 92 Övningsuppgift... 92 6 Tabeller...93 Infoga tabell... 93 Markera hela eller del av tabell... 96 Slå samman och dela upp celler... 97 Lägga till kolumn eller rad... 97 Lägga till flera kolumner eller rader... 98 Ta bort rad eller kolumn... 99 Ändra bredd och höjd... 99 Hantera och formatera cellinnehåll... 100 Kopiera... 102 Kopiera tabell, rad eller kolumn... 102 Kopiera cell... 103 Kopiera cellinnehåll... 103 Kopiera HTML-kod... 104 Klippa ut... 105 Klistra in... 105 Klistra in och ersätta... 105 Klistra in för att lägga till... 105 Klistra in HTML... 106 Infoga kommentar... 106 Sortera tabell... 107 Importera tabell... 108 Layoutläget... 109 Rita layoutcell... 109 Autosträckning...111 Ändra färger i layoutläge...112 Tabellflik...113 Lägga till layoutceller...113 Växla läge...114 Layouttabell...114 Övningsuppgift...115 7 Ramar... 117 Skapa ramuppsättning...117 Ramuppsättningens egenskaper...119 Panelen Frames... 120 Döpa ramarna... 121 Spara ramuppsättning... 123 Spara ram...124 Spara ramkopia...124 Dela upp en ram i flera...124 Dela upp en ram manuellt... 125 Ta bort en ram... 125 Ramarnas innehåll... 125 Förhandsgranska ramar... 126 Inga ramar som alternativ... 127 Övningsuppgift... 128 ii Dreamweaver 8 grundkurs Skandinaviska Databöcker AB
8 Formulär... 129 Infoga formulär... 129 Textfält... 130 Kryssruta...131 Alternativknapp... 132 Grupp med alternativknappar... 132 Lista/meny... 134 Formulärknappar... 136 Hoppmeny... 137 Ändra hoppmeny... 139 Övningsuppgifter...141 9 Mallar...143 Skapa mall... 143 Låsta och ändringsbara områden... 144 Spara dokument som mall... 146 Ange egen mall för nytt dokument... 146 Ange mall via dialogrutan New Document... 147 Ange mall via panelen Assets... 148 Sidutformningar... 148 CSS-mallar... 150 Skapa och länka CSS-mall... 150 Ändra i CSS-mall... 152 Övningsuppgift... 152 Kortkommandon...153 Kortkommandoredigeraren... 156 Ta bort uppsättning... 159 Ändra namn på uppsättning... 159 Utskrift av kortkommandon... 160 11 Extra övningsuppgifter... 161 Sakregister...167 Skandinaviska Databöcker AB Dreamweaver 8 grundkurs iii
1 Arbetsmiljön Användningsområde Du använder Dreamweaver 8 för att skapa webbsidor och webbplatser. Både nybörjare 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 (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 ikonen finns) på programmets ikon. Skulle du få uppmaningen att skapa en plats eller rotmapp så klicka på knappen Cancel. Det kommer du att göra senare. 1. Starta Dreamweaver. När Dreamweaver startar allra första gången får du, om du arbetar i Windows, välja vilken vy du vill arbeta i: Skandinaviska Databöcker AB Dreamweaver 8 grundkurs 1
Välj då ett av alternativen och klicka på knappen OK. Skulle du ångra dig senare kan du ändra inställningen. Nästa steg är att du i startrutan väljer vad du vill göra. 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 startrutan ska visas varje gång du startar programmet så markerar du rutan vid alternativet Don t show again. Den hittar du i nedre vänstra hörnet i rutan. 2 Dreamweaver 8 grundkurs Skandinaviska Databöcker AB
2. Klicka på HTML under Create New. 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. I slutet av boken hittar du en förteckning över några kortkommandon i programmet, som är bra att känna till. I följande bild ser du det grundläggande utseendet i programmet när du valt nytt HTML-dokument. Här visas bara designfönstret: Visa kod Visa design Verktygsfält Visa kod och design Paneler Menyer Dokumentfönster Det du ser är bl.a. menyer, verktygsfält, fönster, paneler och kontroller. Här följer en kort beskrivning av de olika delarna. Det kan hända att det s.k. kodfönstret visas på din skärm där du kan se all kod istället. Vill du se designfönstret klickar du på Design-knappen ovanför dokumentytan. Du klickar på knappen Split om du vill visa båda fönstren. Skandinaviska Databöcker AB Dreamweaver 8 grundkurs 3
Fönster Du kan, om du vill, se två olika fönster i själva programfönstret när du arbetar i Dreamweaver: kodfönster och dokumentfönster. Du klickar på knappen Split för att visa båda fönstren. Genom att ha dessa öppna samtidigt ser du både koden och hur det grafiskt kommer att se ut i webbläsaren. Du kan även välja att bara ha ett av fönstren öppna, för att få ännu mer plats för innehållet. Det gör du genom att klicka på knappen Code eller Design (på verktygsfältet Document), beroende på vilket fönster du väljer att ha öppet. För att det ska finnas mer plats för de båda kan du ställa in så att bildskärmen visas i upplösningen 1024 x 768. En vanlig upplösning är annars 800 x 600. Genom att dra i avskiljaren mellan fönstrena (se bilden till höger) kan du välja hur du vill fördela den tillgängliga ytan mellan de båda. Ovanför dokumentfönstret visas 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. Statusfältet Vid statusfältets vänstra nederkant (som visas under dokumentfönstret) ser du den HTML-kod (vilket också kallas för taggar; en tagg är t.ex. <body> som syns i bilden) där markören för tillfället är placerad. Klickar du på taggen så markeras kod och eventuellt tillhörande objekt (t.ex. text eller bild), både i dokument- och kodfönstret. I statusfältets högra del ser du verktyg för objektmarkering, handverktyg (för att flytta runt en sida i dokumentfönstret när inte allt syns för att den t.ex. är zoomad), zoomningsverktyg och en lista med fördefinierade förstoringsgrader. Längst till höger finns information om vilken skärmstorlek dokumentfönstret är inställt att passa för, filstorlek och den beräknade nedladdningstiden för aktuellt dokument. Genom att hålla ett öga på tidsangivelsen kan du se till att sidan inte blir alltför tung så att den tar lång tid att ladda i webbläsaren. 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 Edit Sizes... i menyn, öppnas en dialogruta där du kan ändra fönsterstorlek och anslutningshastighet för den beräknade nedladdningstiden. 4 Dreamweaver 8 grundkurs Skandinaviska Databöcker AB
Menyer Under menyerna finns 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, t.ex. under menyn Edit hittar du kommandon för att klippa ut, kopiera och klistra in. En meny som är särskilt bra att lära sig använda är Help. 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 Help/Using Dreamweaver, 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 Document placerat: Där finns bl.a. 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å det kan du se vilka verktygsfält du kan välja att visa. (Visas kodfönstret (Code) finns även alternativet Coding i listan.) Du kan t.ex. välja att visa eller stänga fältet Insert där du kan välja mellan flera olika paneler. Insert visas som standard direkt under menyfältet. På den hittar du grundläggande kommandon, som visas i form av ikoner, på de olika panelerna (panelerna växlar du mellan genom att klicka på pilen). Detta gör programmet ännu mer lättarbetat. Vill du se flikar istället klickar du och väljer Show as Tabs i menyn: Verktygsfältet Insert med flikar. Skandinaviska Databöcker AB Dreamweaver 8 grundkurs 5