Macromedia. Dreamweaver 8. Grundkurs.

Transkript

1 Macromedia Dreamweaver 8 Grundkurs

2 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 Ange webbläsare Avsluta Dreamweaver Övningsuppgift Filhantering Dialogrutan Site Definition Skapa standardmapp för bilder Lägga till plats Ta bort plats Första webbsidan Öppna ett nytt dokument Panelen Reference Panelen Snippets och kodfragment Ange sidegenskaper Spara dokumentet Stänga dokument Öppna befintlig fil Förhandsgranska webbsida Kopiera övningsfilerna Kort om filöverföring Överföring av filer Avsluta Dreamwever Ange filer som ska öppnas vid start Övningsuppgifter Hantera text...33 Teckensnitt Välja teckensnitt Redigera teckensnittslistor Formatera med stil Styckejustering Teckenstorlek Rubriker Kopiera, klipp ut och klistra in Kopiera från annat program Kopiera och klistra in HTML Importera text från andra program Text från webbsida som skapats i Word Importera tabbavgränsad text Panelen History Text med färg Skapa indragna stycken Listor Punktlistor Numrerad lista Ändra listtyp i dialogrutan Definitionslista Övriga listtyper Kombinera listtyper Infoga datum Datum med färg Ta bort datum Infoga vågrät linje som avdelare Justera avdelaren Skugga avdelaren Infoga specialtecken Söka och ersätta text Spara och återanvända fråga Stavningskontroll Linjaler Stödlinjer Zooma Handverktyget Ta bort stödlinje Övningsuppgift Skandinaviska Databöcker AB Dreamweaver 8 grundkurs i

3 4 Länkar...63 Länkadressering Absolut sökväg Relativ sökväg Infoga länk E-postlänk Ankare Länka till ankare inom dokument Länka till ankare i annat dokument Formatera länkar Länkfärg Länkar och teckensnitt Panelen Assets Kontrollera länkar Kontrollera hela platsens alla länkar Platskarta Övningsuppgift Bilder...75 Bildformat GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) Bilders upplösning Dpi och ppi Vektorbilder Infoga bild Bildegenskaper Lågupplöst bild Ange alternativ text Ändra storlek på bild Återställa bildens storlek Bildjusteringar Bildram Justering av bildens placering Bildplatshållare Bakgrundsbild Tracing image Överrullningsbild Beteenden Navigeringsfält Ändra navigeringsfält Mellanrum mellan bilder Bilder uppdelade i klickbara områden Ändra hotspot-område Radera hotspot-område Övningsuppgift Tabeller...93 Infoga tabell Markera hela eller del av tabell Slå samman och dela upp celler Lägga till kolumn eller rad Lägga till flera kolumner eller rader Ta bort rad eller kolumn Ändra bredd och höjd Hantera och formatera cellinnehåll Kopiera Kopiera tabell, rad eller kolumn Kopiera cell Kopiera cellinnehåll Kopiera HTML-kod Klippa ut Klistra in Klistra in och ersätta Klistra in för att lägga till Klistra in HTML Infoga kommentar Sortera tabell Importera tabell Layoutläget Rita layoutcell Autosträckning Ändra färger i layoutläge Tabellflik Lägga till layoutceller Växla läge Layouttabell Övningsuppgift Ramar Skapa ramuppsättning Ramuppsättningens egenskaper Panelen Frames Döpa ramarna Spara ramuppsättning Spara ram Spara ramkopia Dela upp en ram i flera Dela upp en ram manuellt Ta bort en ram Ramarnas innehåll Förhandsgranska ramar Inga ramar som alternativ Övningsuppgift ii Dreamweaver 8 grundkurs Skandinaviska Databöcker AB

4 8 Formulär Infoga formulär Textfält Kryssruta Alternativknapp Grupp med alternativknappar Lista/meny Formulärknappar Hoppmeny Ändra hoppmeny Övningsuppgifter Mallar Skapa mall Låsta och ändringsbara områden Spara dokument som mall Ange egen mall för nytt dokument Ange mall via dialogrutan New Document Ange mall via panelen Assets Sidutformningar CSS-mallar Skapa och länka CSS-mall Ändra i CSS-mall Övningsuppgift Kortkommandon Kortkommandoredigeraren Ta bort uppsättning Ändra namn på uppsättning Utskrift av kortkommandon Extra övningsuppgifter Sakregister Skandinaviska Databöcker AB Dreamweaver 8 grundkurs iii

5 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

6 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

7 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

8 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

9 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