Adobe. Dreamweaver CS3. Grundkurs.

Transkript

1 Adobe Dreamweaver CS3 Grundkurs

2 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 Ange webbläsare Avsluta Dreamweaver Tillämpningsuppgift Filhantering Dialogrutan Platsdefinition Skapa standardmapp för bilder Lägga till plats Ta bort plats Första webbsidan Öppna ett nytt dokument Panelen Referens Panelen Fragment 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 Checka in eller ut FTP-logg Ange filer som ska öppnas vid start Tillämpningsuppgifter 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 Händelser Text med färg Skapa indragna stycken Listor Punktlistor Numrerad lista Ändra listtyp i dialogrutan Definitionslista Övriga listtyper Kombinera listtyper Skandinaviska Databöcker AB Dreamweaver CS3 grundkurs i

3 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 Ta bort stödlinje Zooma Handverktyget Tillämpningsuppgift Länkar 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 Resurser Kontrollera länkar Kontrollera hela platsens alla länkar Platskarta Tillämpningsuppgift Bilder...71 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 Photoshop och Dreamweaver Bildram Justering av bildens placering Bildplatshållare Bakgrundsbild Hjälpbild Överrullningsbild Beteenden Navigeringsfält Ändra navigeringsfält Mellanrum mellan bilder Bilder uppdelade i klickbara områden Ändra hotspot-område Radera hotspot-område Animeringar Tillämpningsuppgift Tabeller 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 ii Dreamweaver CS3 grundkurs Skandinaviska Databöcker AB

4 Ändra färger i layoutläge Tabellflik Lägga till layoutceller Växla läge Layouttabell Tillämpningsuppgifter Ramar Skapa ramuppsättning Ramuppsättningens egenskaper Panelen Ramar 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 Tillämpningsuppgift Formulär Infoga formulär Textfält Kryssruta Alternativknapp Grupp med alternativknappar Lista/meny Formulärknappar Hoppmeny Ändra hoppmeny Tillämpningsuppgifter Mallar Skapa mall Låsta och ändringsbara områden Spara dokument som mall Ange egen mall för nytt dokument Ange mall via dialogrutan Nytt dokument Ange mall via panelen Resurser Sidutformningar Stilmallar Vad är CSS? Olika versioner av CSS Skilj mellan utseende och innehåll Skapa en CSS-mall Skapa en klass Klasser för olika taggar Klasser för specificerade taggar Skapa en unik regel Pseudo-klasser för länkar Kommentera CSS Koppla ihop stilmall och HTML-dokument Infoga stilmallen direkt i dokumentet Placera stilmallen i dokumenthuvudet Länka till en stilmall Importera stilmallar Stilmallars rangordning Ändra rangordningen DIV och SPAN Goda egenskaper Om du vill lära dig mer Skapa och länka CSS-mall Ändra i CSS-mall Automatiskt skapade stilar Skapa ny textstil Döpa om stil Spara som extern stilmall Skapa ny css-regel Ändra eller ta bort regel Tillämpningsuppgifter Kortkommandon Menyn Arkiv Menyn Redigera Menyn Visa Menyn Infoga Menyn Ändra Menyn Text Menyn Plats Menyn Fönster Menyn Hjälp Kortkommandoredigeraren Ta bort uppsättning Ändra namn på uppsättning Utskrift av kortkommandon Beteenden Text i statusfältet Effekter Skandinaviska Databöcker AB Dreamweaver CS3 grundkurs iii

5 12 Extra övningsuppgifter Extra övningsuppgifter Text Text Text Extra övningsuppgift Länkar Extra övningsuppgifter Bilder Bilder Bilder Extra övningsuppgifter Tabeller Tabell Tabell Extra övningsuppgifter Ramar Ramar Ramar Extra övningsuppgifter Formulär Formulär Formulär Extra övningsuppgift Mallar Extra övningsuppgift CSS-mallar Sakregister iv Dreamweaver CS3 grundkurs Skandinaviska Databöcker AB

6 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

7 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

8 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

9 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

10 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

11 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

12 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: 3 Hantera text 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