Dreamweaver CS4. Adobe. Grundkurs

Transkript

1 Dreamweaver CS4 Adobe Grundkurs

2 Adobe Dreamweaver CS4 Grundkurs

3 Till denna bok medföljer ett antal övningsfiler på cd-skiva (filerna finns i mappen Dreamweaver CS4 Grundkurs). Kopiera filerna till lämplig mapp på din hårddisk. Du kan även ladda ner övningsfilerna från vår webbplats 1. Starta webbläsaren, skriv i adressfältet och tryck på Enter. 2. Skriv artikelnumret, 3067, i sökrutan och klicka på Sök. 3. Klicka på titeln Dreamweaver CS4 Grundkurs. 4. Klicka på filen 3067.zip högst upp på sidan. 5. Klicka på Spara, välj var du vill spara filen, exempelvis på skrivbordet, och klicka på Spara. 6. När filen har hämtats stänger du dialogrutan och avslutar webbläsaren. 7. Om du har valt att spara filen på skrivbordet visas den som en ikon med namnet 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. Tryckeri: Livonia Print, Lettland 2009 Första upplagan, första tryckningen ISBN: Artikelnummer: 3067-S Författare: Iréne Friberg Omslag: Iréne Friberg

4 Innehållsförteckning 1 Arbetsmiljön...1 Användningsområde...1 Starta Dreamweaver...1 Arbeta i Dreamweaver... 2 Vyer... 4 Statusfältet... 5 Menyer... 6 Snabbmenyer... 6 Verktygsfält... 6 Paneler... 7 Flytta eller stänga panel... 8 Dölja paneler... 8 Egenskapskontrollen... 8 Grundläggande inställningar... 9 Dialogrutan Inställningar... 9 HTML eller XHTML?...12 Ange webbläsare...13 Avsluta Dreamweaver...15 Tillämpningsuppgifter Filhantering...17 Dialogrutan Platsdefinition...17 Skapa standardmapp för bilder...19 Lägga till plats Ta bort plats Öppna ett nytt dokument...21 Panelen Referens Panelen Fragment och kodfragment Ange sidegenskaper...24 Stänga dokument...27 Öppna befintlig fil...27 Förhandsgranska webbsida Kopiera övningsfilerna Kort om filöverföring Överföring av filer Checka in eller ut...31 Bli funnen på webben...32 Ange filer som ska öppnas vid start...32 Tillämpningsuppgifter Hantera text Formatera med CSS...33 Olika versioner av CSS...33 Skilj mellan utseende och innehåll Skapa CSS-regel Skapa en klass...35 Skapa en unik regel Pseudo-klasser för länkar Kommentera CSS...37 DIV och SPAN...37 Teckensnitt Välja teckensnitt Ny CSS-regel via egenskapskontrollen Redigera teckensnittslistor Formatera med stil...41 Döpa om stil...41 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 Formatera med klass Ändra i CSS-regel...51 Ändra regel via panel...51 Skapa ny regel via panel Ta bort regel Skapa indragna stycken Listor Punktlistor Numrerad lista Ändra listtyp i dialogrutan Definitionslista Övriga listtyper Kombinera listtyper iii

5 Infoga datum Datum med färg...57 Ta bort datum...57 Infoga vågrät linje som avdelare...57 Justera avdelaren...57 Skugga avdelaren...57 Infoga specialtecken Söka och ersätta text Spara och återanvända fråga Stavningskontroll Linjaler...61 Stödlinjer...61 Zooma Handverktyget Tillämpningsuppgifter Länkar...64 Länkadressering Infoga länk E-postlänk Ankare Formatera länkar Panelen Resurser...71 Ta bort länk Kontrollera länkar Tillämpningsuppgift Bilder...74 Bildformat...74 Bilders upplösning...75 Infoga bild...75 Bildegenskaper...77 Ange alternativ text Ändra storlek på bild Återställa bildens storlek...79 Bildjusteringar...79 Photoshop och Dreamweaver Smart objekt...81 Bildram Justering av bildens placering Bildplatshållare Bakgrundsbild Hjälpbild Överrullningsbild Beteenden Live-vy Navigeringsfält Mellanrum mellan bilder Bilder uppdelade i klickbara områden Ändra hotspot-område Radera hotspot-område Animeringar Tillämpningsuppgift Tabeller...92 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 Infoga bild i tabellcell Kopiera Klippa ut Klistra in Infoga kommentar Ändra egenskaper Sortera tabell Importera tabell Tillämpningsuppgift Ramar Skapa ramuppsättning Ramuppsättningens egenskaper Panelen Ramar Döpa ramarna Dela upp en ram i flera Dela upp en ram manuellt Ta bort en ram Ramarnas innehåll Spara ramuppsättning Spara ram Spara ramkopia Förhandsgranska ramar Inga ramar som alternativ Tillämpningsuppgift iv

6 8 Formulär Infoga formulär Textfält Kryssruta Alternativknapp Grupp med alternativknappar Lista/meny Formulärknappar Hoppmeny Ändra hoppmeny Tillämpningsuppgift Mallar Skapa mall Låsta och ändringsbara områden Valfri region Upprepande region Upprepande tabell Spara dokument som mall Ange egen mall för nytt dokument Ange mall via dialogrutan Nytt dokument Ange mall via panelen Resurser Sidutformningar Koppla mall till webbsida Öppna och ändra i kopplad mall Koppla bort en mall Koppla ihop CSS-mall och HTML-dokument Infoga stilmallen direkt i dokumentet Placera stilmallen i dokumenthuvudet Länka till en stilmall Importera stilmallar Stilmallars rangordning Ändra rangordningen Skapa extern CSS-mall från exempel Koppla CSS-mall Ändra i CSS-mall Spara som extern stilmall Tillämpningsuppgifter Beteenden Text i statusfältet Effekter Validera formulär Extra övningsuppgifter Extra övningsuppgifter Text Extra övningsuppgift Länkar Extra övningsuppgifter Bilder Extra övningsuppgifter Tabeller Extra övningsuppgifter Ramar Extra övningsuppgifter Formulär Extra övningsuppgift Mallar Extra övningsuppgift CSS-mallar Sakregister Kortkommandon Kortkommandoredigeraren Ta bort uppsättning Ändra namn på uppsättning Utskrift av kortkommandon v

7 6 Tabeller Tabeller används normalt för att visa information av olika slag i rader och kolumner på ett lättöverskådligt sätt. Ett annat användningsområde för tabeller i webbdesign är att placera objekt mer exakt på en webbsida. Du kan formatera tabeller i stort sett hur du vill. Det finns två redigeringslägen för tabell, standard (som en tabell öppnas i normalt) och utökat tabelläge. När du väljer det (Visa, Tabelläge, Utökat tabelläge) första gången visas en dialogruta med information om vad läget innebär: När utökat läge är valt är det bland annat lite lättare att placera markören där man vill ha den i cellen. Det kan ibland vara lite knepigt om man till exempel har en bild i en cell med liten eller ingen marginal. Standardtabell Utökad tabell I detta kapitel kommer du använda standardläget men det är bra att veta att utökat läge finns. Infoga tabell 1. Spara ett nytt dokument med namnet Tabeller. 2. Välj Infoga, Tabell. Du kan infoga en tabell via panelen Infoga om du hellre vill gå den vägen: Dialogrutan Infoga tabell öppnas. 92

8 6 Tabeller I dialogrutan kan du ange följande: Rader: hur många rader tabellen ska innehålla. Kolumner: hur många kolumner tabellen ska innehålla. Tabellbredd: hur bred tabellen ska vara. Du kan ange den i procent eller absolut bredd i bildpunkter. Väljer du procent anpassas tabellen efter storleken på webbläsarens fönster. Kanttjocklek: hur bred tabellens kantlinjer ska vara (0=ingen kant). Cellfyllnad: hur stor marginalen ska vara mellan cellinnehållet och cellkanten. Cellmellanrum: hur stort mellanrum det ska vara mellan cellerna. Du behöver inte vara så exakt i detta läge för alla dessa inställningar går att ändra på senare om du skulle vilja det. 3. Klicka på knappen OK. En tabell med tre rader och tre kolumner ritas upp i dokumentfönstret (om du inte ändrat innan; detta är annars standardinställningen). Under tabellen visas dess bredd (200) angiven i pixlar. 93

9 6 Tabeller I egenskapskontrollen kan du ändra tabellen på olika sätt om den är markerad: Rutorna Rader, Kolumner, B(redd), Cellfyllnad, Cellmellanrum och Kant känner du igen från dialogrutan som öppnades när du skapade tabellen. De andra är: Tabell: Där skriver man in ett tabellnamn. Justering: i listan väljer du var på sidan tabellen ska placeras. Gruppen med knappar: Nollställ kolumnbredder Konvertera tabellbredder till pixlar Konvertera tabellbredder till procent Nollställ radhöjder Markera hela eller del av tabell Du markerar enklast med muspekaren. För att välja hela tabellen klickar du någonstans på tabellens yttre kant när en dubbelpil visas. Vill du bara välja en rad eller kolumn, klickar du när en svart pil visas (cellernas kanter ändrar även färg till röd) när du för pekaren över kanten till vänster om en rad eller ovanför en kolumn. Vill du bara markera en eller flera celler klickar du i en cell och drar till en angränsande cell, tills en svart ram visar att cellen är markerad. Ligger inte cellerna bredvid varandra markerar du den första cellen och därefter klickar du i de andra utvalda cellerna samtidigt som du trycker Ctrl (Kommando för Mac). 1. Pröva att markera hela och delar av tabellen. 94

10 6 Tabeller När du markerar rad, kolumn eller cell så ändrar egenskapskontrollen utseende. I stort sett ser den likadan ut för alla tre (följande bild visar egenskapskontrollen för kolumn): Visas inte egenskapskontrollen som i bilden ovan så klicka på den lilla pilen i nedre högra hörnet, se bilden till höger: Den övre delen av egenskapskontrollen visar de textinställningar du kan göra. I den undre ställer du in egenskaperna för själva cellen, raden eller kolumnen beroende på vad du har markerat i tabellen. Längst till vänster visas en liten bild (tumnagel) på vad du för tillfället har markerat (i exemplet visas kolumn) och bredvid står det även med text. Slå samman och dela upp celler 1. Markera en kolumn. Klicka på knappen Slår samman markerade celler: Cellerna i kolumnen slås nu ihop till en enda cell. På samma sätt gör du om du markerar en rad eller två celler som är placerade bredvid varandra i tabellen. 2. Klicka på knappen Delar upp cellen i rader eller kolumner (till höger om knappen för att slå samman celler). Dialogrutan Dela upp cell öppnas: I dialogrutan är redan alternativet Rader och antal angivna men du kan ändra dem om du skulle vilja. 3. Acceptera genom att klicka på knappen OK. Nu har du återigen tre celler i kolumnen. 95