9789185437313

Adobe 速

Dreamweaver CS3 Grundkurs

www.databok.se

Innehållsförteckning 1 Arbetsmiljön....................................... 1 Användningsområde.................................................... 1 Starta Dreamweaver..................................................... 2 Arbeta i Dreamweaver.................................................. 2 Fönster......................................................................... 3 Statusfältet.................................................................. 4 Menyer......................................................................... 5 Snabbmenyer............................................................... 5 Verktygsfält.................................................................. 5 Paneler......................................................................... 6 Flytta eller stänga panel.............................................. 7 Dölja paneler................................................................ 7 Egenskapskontrollen.................................................... 7 Grundläggande inställningar....................................... 8 Dialogrutan Inställningar............................................. 8 HTML eller XHTML...................................................... 11 Ange webbläsare........................................................ 12 Avsluta Dreamweaver................................................ 14 Tillämpningsuppgift.................................................. 14

2 Filhantering..................................... 15 Dialogrutan Platsdefinition........................................ 15 Skapa standardmapp för bilder.................................. 18 Lägga till plats............................................................ 19 Ta bort plats................................................................ 19 Första webbsidan....................................................... 20 Öppna ett nytt dokument.......................................... 20 Panelen Referens........................................................ 21 Panelen Fragment och kodfragment......................... 22 Ange sidegenskaper................................................... 23 Spara dokumentet...................................................... 24 Stänga dokument....................................................... 26 Öppna befintlig fil...................................................... 26

© Skandinaviska Databöcker AB

Förhandsgranska webbsida....................................... 27 Kopiera övningsfilerna............................................... 27 Kort om filöverföring.................................................. 27 Överföring av filer...................................................... 28 Checka in eller ut........................................................ 30 FTP-logg..................................................................... 31 Ange filer som ska öppnas vid start............................ 32 Tillämpningsuppgifter .............................................. 32

3 Hantera text.................................... 33 Teckensnitt................................................................. 33 Välja teckensnitt......................................................... 34 Redigera teckensnittslistor........................................ 35 Formatera med stil..................................................... 35 Styckejustering........................................................... 36 Teckenstorlek............................................................. 36 Rubriker...................................................................... 38 Kopiera, klipp ut och klistra in.................................... 38 Kopiera från annat program....................................... 39 Kopiera och klistra in HTML........................................ 40 Importera text från andra program........................... 40 Text från webbsida som skapats i Word..................... 40 Importera tabbavgränsad text................................... 42 Panelen Händelser..................................................... 43 Text med färg............................................................. 44 Skapa indragna stycken............................................. 46 Listor.......................................................................... 46 Punktlistor.................................................................. 47 Numrerad lista............................................................ 49 Ändra listtyp i dialogrutan......................................... 50 Definitionslista........................................................... 50 Övriga listtyper........................................................... 50 Kombinera listtyper................................................... 51

Dreamweaver CS3 grundkurs

i

Infoga datum.............................................................. 51 Datum med färg......................................................... 52 Ta bort datum............................................................. 52 Infoga vågrät linje som avdelare................................ 52 Justera avdelaren....................................................... 53 Skugga avdelaren....................................................... 53 Infoga specialtecken................................................... 53 Söka och ersätta text.................................................. 54 Spara och återanvända fråga..................................... 55 Stavningskontroll....................................................... 55 Linjaler....................................................................... 57 Stödlinjer.................................................................... 58 Ta bort stödlinje......................................................... 59 Zooma........................................................................ 59 Handverktyget........................................................... 59 Tillämpningsuppgift . ................................................ 60

4 Länkar............................................. 61 Länkadressering......................................................... 61 Absolut sökväg........................................................... 61 Relativ sökväg............................................................ 61 Infoga länk................................................................. 63 E-postlänk.................................................................. 64 Ankare........................................................................ 65 Länka till ankare inom dokument.............................. 65 Länka till ankare i annat dokument............................ 67 Formatera länkar........................................................ 68 Länkfärg..................................................................... 68 Länkar och teckensnitt............................................... 68 Panelen Resurser........................................................ 69 Kontrollera länkar....................................................... 69 Kontrollera hela platsens alla länkar.......................... 70 Platskarta................................................................... 70 Tillämpningsuppgift.................................................. 70

5 Bilder................................................71 Bildformat.................................................................. 71 GIF (Graphics Interchange Format)............................. 71 JPEG (Joint Photographic Experts Group)................... 72 PNG (Portable Network Graphics).............................. 72 Bilders upplösning..................................................... 72 Dpi och ppi.................................................................. 72 Vektorbilder............................................................... 73 Infoga bild.................................................................. 73 Bildegenskaper........................................................... 75 Lågupplöst bild.......................................................... 75

ii

Dreamweaver CS3 grundkurs

Ange alternativ text................................................... 76 Ändra storlek på bild.................................................. 76 Återställa bildens storlek............................................ 77 Bildjusteringar............................................................ 77 Photoshop och Dreamweaver..................................... 78 Bildram....................................................................... 80 Justering av bildens placering.................................... 80 Bildplatshållare.......................................................... 80 Bakgrundsbild............................................................ 81 Hjälpbild..................................................................... 82 Överrullningsbild........................................................ 82 Beteenden.................................................................. 82 Navigeringsfält........................................................... 83 Ändra navigeringsfält................................................ 86 Mellanrum mellan bilder............................................ 86 Bilder uppdelade i klickbara områden....................... 87 Ändra hotspot-område............................................... 89 Radera hotspot-område............................................. 89 Animeringar............................................................... 89 Tillämpningsuppgift . ................................................ 90

6 Tabeller............................................ 91 Infoga tabell............................................................... 91 Markera hela eller del av tabell.................................. 94 Slå samman och dela upp celler................................. 95 Lägga till kolumn eller rad......................................... 96 Lägga till flera kolumner eller rader .......................... 96 Ta bort rad eller kolumn............................................. 97 Ändra bredd och höjd................................................. 97 Hantera och formatera cellinnehåll............................ 98 Kopiera..................................................................... 100 Kopiera tabell, rad eller kolumn............................... 100 Kopiera cell............................................................... 100 Kopiera cellinnehåll.................................................. 101 Kopiera HTML-kod.................................................... 101 Klippa ut .................................................................. 102 Klistra in................................................................... 102 Klistra in och ersätta................................................ 103 Klistra in för att lägga till.......................................... 103 Klistra in HTML......................................................... 103 Infoga kommentar................................................... 103 Sortera tabell............................................................ 104 Importera tabell....................................................... 105 Layoutläget.............................................................. 106 Rita layoutcell........................................................... 106 Autosträckning......................................................... 108

© Skandinaviska Databöcker AB

Ändra färger i layoutläge.......................................... 109 Tabellflik................................................................... 109 Lägga till layoutceller................................................110 Växla läge..................................................................111 Layouttabell..............................................................111 Tillämpningsuppgifter .............................................113

7 Ramar............................................. 115 Skapa ramuppsättning..............................................115 Ramuppsättningens egenskaper..............................117 Panelen Ramar..........................................................118 Döpa ramarna............................................................119 Spara ramuppsättning............................................. 121 Spara ram................................................................. 122 Spara ramkopia........................................................ 122 Dela upp en ram i flera............................................. 122 Dela upp en ram manuellt........................................ 122 Ta bort en ram.......................................................... 123 Ramarnas innehåll................................................... 123 Förhandsgranska ramar............................................124 Inga ramar som alternativ........................................ 125 Tillämpningsuppgift . .............................................. 126

8 Formulär........................................127 Infoga formulär........................................................ 127 Textfält..................................................................... 128 Kryssruta.................................................................. 129 Alternativknapp....................................................... 130 Grupp med alternativknappar.................................. 130 Lista/meny............................................................... 132 Formulärknappar..................................................... 134 Hoppmeny................................................................ 135 Ändra hoppmeny...................................................... 137 Tillämpningsuppgifter ............................................ 139

9 Mallar............................................. 141 Skapa mall.................................................................141 Låsta och ändringsbara områden............................. 142 Spara dokument som mall....................................... 144 Ange egen mall för nytt dokument ......................... 144 Ange mall via dialogrutan Nytt dokument............... 144 Ange mall via panelen Resurser............................... 146 Sidutformningar....................................................... 146 Stilmallar.................................................................. 147 Vad är CSS?............................................................... 147

© Skandinaviska Databöcker AB

Olika versioner av CSS............................................... 148 Skilj mellan utseende och innehåll........................... 148 Skapa en CSS-mall.................................................... 148 Skapa en klass.......................................................... 149 Klasser för olika taggar............................................. 149 Klasser för specificerade taggar............................... 150 Skapa en unik regel.................................................. 150 Pseudo-klasser för länkar......................................... 151 Kommentera CSS...................................................... 152 Koppla ihop stilmall och HTML-dokument............... 152 Infoga stilmallen direkt i dokumentet..................... 152 Placera stilmallen i dokumenthuvudet.................... 152 Länka till en stilmall................................................. 153 Importera stilmallar................................................. 153 Stilmallars rangordning........................................... 154 Ändra rangordningen............................................... 154 DIV och SPAN............................................................ 154 Goda egenskaper ..................................................... 155 Om du vill lära dig mer............................................. 155 Skapa och länka CSS-mall........................................ 155 Ändra i CSS-mall....................................................... 157 Automatiskt skapade stilar....................................... 159 Skapa ny textstil....................................................... 159 Döpa om stil............................................................. 159 Spara som extern stilmall......................................... 160 Skapa ny css-regel.................................................... 161 Ändra eller ta bort regel........................................... 163 Tillämpningsuppgifter............................................. 164

10 Kortkommandon.......................... 165 Menyn Arkiv............................................................. 165 Menyn Redigera....................................................... 166 Menyn Visa............................................................... 166 Menyn Infoga........................................................... 166 Menyn Ändra............................................................ 167 Menyn Text............................................................... 167 Menyn Plats.............................................................. 167 Menyn Fönster.......................................................... 168 Menyn Hjälp............................................................. 168 Kortkommandoredigeraren..................................... 168 Ta bort uppsättning.................................................. 171 Ändra namn på uppsättning.................................... 171 Utskrift av kortkommandon..................................... 172

11 Beteenden......................................173 Text i statusfältet . ................................................... 173 Effekter......................................................................174

Dreamweaver CS3 grundkurs

iii

12 Extra övningsuppgifter.................175 Extra övningsuppgifter Text . ...................................175 Text 1.........................................................................175 Text 2.........................................................................176 Extra övningsuppgift Länkar ................................... 177 Extra övningsuppgifter Bilder.................................. 177 Bilder 1..................................................................... 177 Bilder 2..................................................................... 178 Extra övningsuppgifter Tabeller............................... 178 Tabell 1..................................................................... 178 Tabell 2..................................................................... 179 Extra övningsuppgifter Ramar................................. 179 Ramar 1.................................................................... 179 Ramar 2.................................................................... 180 Extra övningsuppgifter Formulär............................. 180 Formulär 1................................................................ 180 Formulär 2................................................................ 180 Extra övningsuppgift Mallar.................................... 180 Extra övningsuppgift CSS-mallar............................. 181

Sakregister........................................183

iv

Dreamweaver CS3 grundkurs

© Skandinaviska Databöcker AB

3 Hantera text

3

Hantera text Det är möjligt att skapa en webbplats med sidor som bara innehåller vanlig text utan formatering. Nackdelen med detta är att det skulle vara utomordentligt trist för webbplatsens besökare att hamna på en sådan webbplats. De skulle antagligen väldigt snabbt bestämma sig för att gå vidare.

Formatering används i första hand för att göra en textmassa mer lättläst. Det är också ett sätt att göra det hela mer lockande och intressant. Några exempel på delar i en text som brukar formateras är stycken, rubriker och listor. Till det brukar bilder läggas till för att förtydliga och göra innehållet mer intressant.

I detta kapitel kommer du att lära dig formatera text; senare i materialet kommer du att lära dig mer om bilder. Du kan formatera text genom att gå via menyn Text, fliken Text på verktygsfältet Infoga eller i egenskapskontrollen.

Teckensnitt I många program finns det en grundinställning som styr så att de teckensnitt som används i nya dokument vanligtvis är Arial eller Times New Roman.

Anledningen till att man väljer just dessa teckensnitt är att de vanligtvis finns på alla datorer. Detta innebär att det du ser på skärmen vad gäller textens utseende är samma som någon som arbetar vid en annan dator ser, om du t.ex. skickar en fil mellan er. Använder du däremot ett teckensnitt av det mer ovanliga slaget som mottagaren inte har, kommer texten att se helt annorlunda ut.

© Skandinaviska Databöcker AB

Dreamweaver CS3 grundkurs

33

3 Hantera text

Datorn kommer då att välja det som verkar vara mest likt eller helt enkelt ta något av standardteckensnitten som ersättning. Det kan bli mycket fel om en text i en sirlig handstil ersätts med ett mer klumpigt. Den tänkta effekten uteblir helt! Därför är det viktigt att tänka på valet av teckensnitt. I webbdesign väljer du helst sådana du vet finns på de flesta datorer. Vill du använda något ovanligt teckensnitt är det många gånger bättre att göra om just den texten till en bild för att besökaren säkert ska se texten så som den är tänkt att se ut. Tänk dock på att det inte heller är helt säkert eftersom en del stänger av bildvisning i webbläsaren för att det ska gå snabbare att ladda ner information i form av text.

Välja teckensnitt 1. Öppna filen Teckenformatering.html.

´ Enklast är att dubbelklicka på filen, i panelen Filer, för att öppna den.

2. Markera hela det första stycket t.ex. genom att trippelklicka i stycket.

3. Klicka på nedpilen i rutan där det står Standardtypsnitt, i egenskapskontrollen:

4. Välj alternativet Arial, Helvetica, sans-serif i listan.

5. Avmarkera stycket.

Du har med detta val angivit att webbläsaren först ska leta efter Arial, sedan Helvetica och till sist, om inget av de föregående finns på datorn, välja något annat sans-serift (Arial och Helvetica är sans-serifer) teckensnitt. Genom att göra så här är du relativt säker på att webbsidorna kommer att se ut ungefär som du har tänkt dig.

34

Dreamweaver CS3 grundkurs

© Skandinaviska Databöcker AB

3 Hantera text

Redigera teckensnittslistor I listan för teckensnitt (i egenskapskontrollen, se föregående bild) kan du välja olika grupper av teckensnitt men du kan även redigera dessa eller skapa egna genom att istället välja alternativet Ändra typsnittslista.

I dialogrutan som öppnas väljer du teckensnitt i nedre delen, för det nya alternativet. Välj i listan under etiketten Tillgängliga typsnitt och för över det eller dem du valt till rutan under etiketten Valda typsnitt, genom att klicka på knappen med dubbelpilarna mellan rutorna. Vill du skapa ytterligare alternativa teckensnittsgrupper klickar du på knappen med plustecknet, och vill du ta bort alternativ klickar du på knappen med minustecknet:

Formatera med stil Ibland är det bra att markera utvalda ord på ett annorlunda sätt jämfört med omgivande text. I ordbehandlingsprogram används t.ex. fet och kursiv stil eller understrykning. Dessa kan du även använda i Dreamweaver.

1. Markera ordet fet i första stycket. Klicka på knappen B i egenskapskontrollen: 2. Markera ordet kursiv och klicka på knappen med ett I (till höger om B-knappen) i egenskapskontrollen. Avmarkera.

© Skandinaviska Databöcker AB

Dreamweaver CS3 grundkurs

35

3 Hantera text

För att få tillgång till fler stilar använder du dig av menyn Text.

3. Markera ordet Hela (i sista meningen, första stycket).

4. Välj menyn Text, alternativet Stil och därefter Understruken. Avmarkera.

Din text ska nu se ut som följande:

Hela stycken går naturligtvis också att formatera med olika stilar.

Styckejustering Ett effektivt sätt att utmärka hela stycken på är att justera dem på olika sätt. Även detta kan du göra via egenskapskontrollen.

1. Markera andra stycket och klicka på knappen Centrera i egenskapskontrollen: 2. Markera tredje stycket och klicka på knappen Högerjustera i egenskapskontrollen.

Beroende på hur stort dokumentfönstret är så syns effekten av justeringarna olika mycket. I ett stort fönster syns de mer.

Knappen Marginaljustera ger stycket raka vänster- och högerkanter. Detta sätt att justera ett stycke kan vara effektfullt men kan även göra texten svårläst eftersom stycket kan få för stora mellanrum mellan orden.

Teckenstorlek Tecknens storlek har betydelse för bl.a. läsbarheten. Det kan också vara ett bra sätt att utmärka enstaka bokstäver, ord eller hela stycken.

1. Markera ordet större i sista stycket.

2. Klicka på nedpilen till höger om rutan Storlek.

3. Välj storlek 5 i listan.

36

Dreamweaver CS3 grundkurs

© Skandinaviska Databöcker AB

3 Hantera text

Det går naturligtvis även att göra tecken mindre: 4. Markera ordet andra och välj storleken -5.

När du börjar skriva in text är storleken angiven till Ingen i listan. Det innebär att teckenstorleken som används är standardstorleken, vilket i HTML-kod brukar vara storlek 3. De siffror som, i listan, visas med plus- eller minustecken framför är relativa storlekar dvs. relativt tecknens standardstorlek.

De andra kallas absoluta teckenstorlekar.

Hade du haft inställningen ”Använd CSS istället för HTML-koder” ´

aktiverat i Inställningar/Allmänt hade istället menyn nedan till höger

visats. Alternativen pytteliten till jättestor kan jämställas med storlekarna 1 till 7 som du väljer för text i den nuvarande HTML-inställningen.

Väljer du en av siffrorna visas ytterligare en listruta i vilken du kan välja enhet, se bild nedan.

© Skandinaviska Databöcker AB

Dreamweaver CS3 grundkurs

37

3 Hantera text

Rubriker Rubriker brukar skilja sig från resten av texten på något sätt för att vara lätta att se. De kan vara i större storlek, i annat teckensnitt, formaterade med annan stil eller alla tre effekterna samtidigt. I Dreamweaver får du hjälp med att utmärka rubriker. Har du läst webbdesign vet du att rubriker anges med koden <hx></hx> där x är en siffra från 1 till 6 (från största till minsta; 1 ger alltså största rubriken).

1. Skriv in följande mening före första stycket och tryck Enter: Rubriker underlättar!

2. Markera meningen och klicka på nedpilen i rutan Format , se bilden till höger: 3. Välj alternativet Rubrik 2.

Meningen ändrar storlek ganska rejält och i kodfönstret ser du att den är omgiven av koden <h2> och </h2>.

4. Pröva de andra rubrikformateringarna för att se skillnaderna.

Skulle du senare av någon anledning vilja göra om någon rubrik till stycke igen så väljer du alternativet Stycke i listan Format.

Kopiera, klipp ut och klistra in Något som utförs i samband med textbehandling är kopiering eftersom det oftast går fortare än att skriva in hela texten på nytt. Detsamma gäller när text klipps ut och klistras in. Dessa funktioner underlättar arbetet med att redigera text. För det blir så mycket enklare och det kan utföras på kortare tid.

Här kommer du använda verktygsfältet, men du kan även använda snabbmenyn eller gå in under menyn Redigera för att kopiera, klippa ut och klistra in.

1. Markera första meningen i första stycket efter rubriken.

2. Klicka på verktygsknappen Kopiera i verktygsfältet Standard:

3. Klicka därefter sist i allra sista meningen i dokumentet och tryck Enter.

38

Dreamweaver CS3 grundkurs

© Skandinaviska Databöcker AB

3 Hantera text Observera att stycket får samma justering som föregående stycke. ´

Stycket ärver justeringen från stycket du utgår ifrån för att göra nytt.

Du kommer stöta på flera sådana arv i arbetet i Dreamweaver.

4. Klicka på verktygsknappen Klistra in i verktygsfältet Standard: 5. Markera ordet två i andra stycket och klicka på verktygsknappen Klipp ut i verktygsfältet Standard.

6. Klicka framför ordet olika i sista stycket och klicka sedan på verktygsknappen Klistra in.

7. Tryck Mellanslag för att skapa mellanrum mellan orden.

Spara.

Texten ska nu se ut som följande:

Kopiera från annat program Det är möjligt att kopiera text från andra program och klistra in det i Dreamweaver. Du kan välja om formateringen från det externa programmet ska följa med eller inte. Du måste i så fall formatera om den kopierade texten i Dreamweaver. Hur mycket av formateringen som ska följa med anger du i dialogrutan Klistra in special (som öppnas när du väljer Redigera, Klistra in special):

© Skandinaviska Databöcker AB

Dreamweaver CS3 grundkurs

39