Transcript Dreamweaver CS5 Grundkurs

Dreamweaver CS5
Grundkurs
Dreamweaver CS5 Grundkurs
Dreamweaver CS5 Grundkurs
Mahmud Al Hakim
Copyright © 2011
Mahmud Al Hakim
[email protected]
The Swedish Web Development Academy
www.webdevacademy.eu
DynamicOS Open Source Web Development
www.dynamicos.se
Dreamweaver CS5 Grundkurs
Innehållsförteckning
Kapitel 1 Introduktion till Dreamweaver .......................................................................... 5
Välkomstskärm ............................................................................................................. 5
Skapa ett nytt HTML-dokument via Välkomstskärmen................................................ 6
Spara och Spara som... ................................................................................................. 7
Menyraden ................................................................................................................... 8
Programfältet ............................................................................................................... 9
Anpassa arbetsytans layout ........................................................................................ 10
Verktygsfält ................................................................................................................. 11
Verktygsfältet Standard .............................................................................................. 11
Skapa ett HTML-dokument via dialogrutan Nytt… ..................................................... 12
Verktygsfältet Dokument ........................................................................................... 13
Dokumnetvyer ............................................................................................................ 13
Förhandsgranska i olika webbläsare .......................................................................... 14
Linjaler ........................................................................................................................ 15
Paneler ........................................................................................................................ 16
Panelen Infoga ............................................................................................................ 18
Panelen Filer ............................................................................................................... 19
Statusfältet ................................................................................................................. 20
Taggväljaren................................................................................................................ 21
Egenskapspanelen ...................................................................................................... 22
Övningsuppgifter ........................................................................................................ 23
Kapitel 2 Texthantering .................................................................................................. 24
Textformat .................................................................................................................. 24
Textformatering .......................................................................................................... 25
Blockcitat .................................................................................................................... 25
Infoga specialtecken ................................................................................................... 26
Importera text ............................................................................................................ 27
Listor ........................................................................................................................... 31
Infoga datum .............................................................................................................. 33
Sök och ersätt ............................................................................................................. 34
Stavningskontroll ........................................................................................................ 35
Övningsuppgifter ........................................................................................................ 36
Kapitel 3 Plats- och Filhantering ..................................................................................... 38
Skapa en ny Plats ........................................................................................................ 38
Ange en standardmapp för bilder .............................................................................. 40
Hantera Platser ........................................................................................................... 41
Mer om Filpanelen ..................................................................................................... 42
Skapa nya filer via Filpanelen ..................................................................................... 43
Inställningar för nya HTML-dokument (Överkurs) ..................................................... 44
Sidegenskaper............................................................................................................. 45
Övningsuppgifter ........................................................................................................ 46
Dreamweaver CS5 Grundkurs
Kapitel 4 Länkar .............................................................................................................. 47
Skapa en E-postlänk.................................................................................................... 47
Relativa länkar (Dokumentberoende sökvägar) ......................................................... 49
Absoluta länkar ........................................................................................................... 51
Öppna länkar i nya flikar (fönster) .............................................................................. 51
Formatera länkar ........................................................................................................ 52
Övningsuppgifter ........................................................................................................ 53
Kapitel 5 Bildhantering ................................................................................................... 54
Färger .......................................................................................................................... 54
Bakgrundsfärg ............................................................................................................. 54
Lite om bildformat ...................................................................................................... 55
Bakgrundsbild ............................................................................................................. 56
Visa bilder i HTML-dokument ..................................................................................... 56
Hjälpattribut för bildtagg ............................................................................................ 57
Bildegenskaper ........................................................................................................... 57
Optimera bilder .......................................................................................................... 58
Beskära bilder ............................................................................................................. 59
Bildplatshållare ........................................................................................................... 60
Överrullningsbild ........................................................................................................ 61
Övningsuppgifter ........................................................................................................ 62
Dreamweaver CS5 Grundkurs
Kapitel 1 Introduktion till Dreamweaver
Välkommen till Adobe Dreamweaver CS5. I detta kapitel kommer vi att gå igenom
arbetsytan. Vi börjar med välkomstskärmen som visas upp vid uppstarten. Sedan
utforskar vi de olika verktygsfälten, egenskapspanelen och övriga paneler som du
använder för att bygga webbsidor.
Välkomstskärm
Börja med att starta Adobe Dreamweaver och undersök nedanstående fönster.
Fönstret är uppdelat i tre kolumner. Den första kolumnen visar "Senast använda filer"
och längst ner en genväg till dialogrutan "Öppna". Den andra kolumnen innehåller
genvägar till att skapa några vanliga dokument som man brukar använda vid
webbdesign och webbutveckling t.ex. HTML och CSS. Här kan man även klicka på
"Mer..." för att skapa fler filformat. En genväg till dialogrutan "Dreamweaverwebbplats" finns här (mer om detta under Kapitel 3). Den sista kolumnen innehåller
genvägar till videor från Adobe TV.
Längst ner till vänster hittar man länkar till Adobes hjälpcentral och "Dreamweaver
Exchange". Ett tips är att börja med att klicka på "Komma igång". Där hittar du
välskrivna artiklar om Dreamweaver och även några lärorika videoklipp.
Dreamweaver CS5 Grundkurs
Skapa ett nytt HTML-dokument via Välkomstskärmen
Klicka på knappen HTML från "Skapa ny" i välkomstskärmen.
Välkomstskärmen försvinner och ett nytt HTML-dokument skapas.
Dreamweaver föreslår filnamnet ”Untitled-1”, vilket bör ändras till ett mer
beskrivande filnamn.
Dreamweaver CS5 Grundkurs
Spara och Spara som...
Den gamla vanliga hederliga diskettknappen i verktygsfältet standard fungerar utmärkt
för att spara för första gången och spara ändringarna i en fil. Det finns även en
verktygsknapp med två disketter. Denna knapp sparar alla öppna filer samtidigt.
Men, om du vill spara en kopia av dokumentet i ett annat filnamn eller filformat så ska
du istället gå in under menyn Arkiv och välja Spara som...
Spara filen som index.html
Nu ska vi gå igenom arbetsytan d.v.s. alla delar i programmet.
Dreamweaver CS5 Grundkurs
Menyraden
Längst upp i programmet ser du 10 olika menyer. Här hittar du programmets alla
funktioner, genvägar till olika dialogrutor och paneler.
Utforska menyerna och klicka sedan på rubriken "Dreamweaver-Hjälp" under menyn
”Hjälp”. Detta är den bästa referenskällan till Adobe Dreamweaver. Du kan även visa
hjälpen som PDF (ca 650 sidor).
Dreamweaver CS5 Grundkurs
Klicka på rubriken "Referens" under menyn "Hjälp"
Längst ner i programmet dyker upp ett fönster (panel) som innehåller ett antal
användbara referensböcker om t.ex. HTML och CSS.
Välj boken ”O'REILLY HTML Referens” och gå gärna igenom några HTML-taggar.
Programfältet
Längst upp till höger om menyraden hittar du ett programfält och en arbetsyteväxlare
Du kan dölja eller ta fram programfältet via menyn Fönster - Programfält.
(mer om programfältet senare).
Dreamweaver CS5 Grundkurs
Anpassa arbetsytans layout
I Dreamweaver kan man anpassa arbetsytans layout så att den passar med
användarens bakgrund. Det finns åtta fördefinierade layouter enligt bilden nedan.
Du kan även skapa och spara egna arbetsytor.
Knappen Arbetsyteväxlare hjälper dig att växla mellan olika arbetsytor. Dreamweaver
CS5 visar arbetsytan ”Klassisk” vid en ny installation.
Klicka på knappen ”Arbetsyteväxlare” längst upp till höger om programfältet och välj
"Programmerare".
Undersök olika layouter och växla sedan tillbaka till "Klassisk" och försök att lista ut
skillnaden!
Tips! Klicka på ”Återställ Klassisk” för att försäkra dig att få standard klassisk arbetsyta
enligt bilden på föregående sida.
Dreamweaver CS5 Grundkurs
Verktygsfält
Det finns fem verktygsfält i Dreamweaver CS5, därav rekommenderar jag att ni alltid
visar dessa tre: Dokument, Standard och Kodning.
Verktygsfältet ”Formatåtergivning” är avsedd till avancerad CSS-kodning.
Gå in under menyn "Visa". Välj "Verktygsfält" och se till att Dokument, Standard och
Kodning är markerade enligt bilden nedan.
Tips: Högerklicka på något av verktygsfälten för att kunna snabbt visa eller dölja ett
verktygsfält.
Verktygsfältet Standard
Med hjälp av verktygsfältet "Standard" kan du skapa nya dokument, öppna och
bläddra efter filer. Du kan spara en fil eller spara alla öppna filer. Du kan skriva ut kod.
Här hittar du även Klipp ut, Kopiera och Klistra in. Två bra knapp som är bra att känna
till här är Ångra och gör om!
Dreamweaver CS5 Grundkurs
Skapa ett HTML-dokument via dialogrutan Nytt…
Den första knappen, "Nytt" är en genväg till menyn Arkiv-Nytt... och används givetvis
för att skapa nya dokument av olika slag.
Vi ska nu skapa ett nytt tomt HTML-dokument. Klicka på knappen Nytt.
Välj rubriken "Tom sida" och därefter sidtypen HTML. Se till du har <ingen> under
layout.
Du kan välja ”HTML 5” från menyn ”Dokumenttyp”.
Klicka på knappen "Skapa" eller dubbelklicka på HTML eller <ingen>.
Dreamweaver CS5 Grundkurs
Verktygsfältet Dokument
Verktygsfältet "Dokument" innehåller bl.a. knappar som visar olika vyer (layouter) av
ett dokument. Här kan du även ändra sidans titel (Dokumentrubrik) och
förhandsgranska dokument i olika webbläsare.
Dokumnetvyer
Växla mellan Kod och Design genom att klicka på respektive knapp.
Lägg märke till att knappen Dela visar både kodvyn och designvyn samtidigt och delar
dessa vyer lodrätt.
Du kan även ändra layouten och visa olika vyer med hjälp av programfältet som finns
längst upp i programmet. Klicka på knappen ”Layout” och avmarkera ”Dela lodrätt”
för att visa vyerna vågrätt. Dessa funktioner finns även under menyn Visa!
Dreamweaver CS5 Grundkurs
Förhandsgranska i olika webbläsare
Klicka på knappen "Förhandsgranska/felsök i webbläsare".
Här kan du förhandgranska ditt dokument i olika webbäsare t.ex. Firefox och Internet
Explorer.
Välj alternativet "Redigera webbläsarlistan..." för att lägga till flera webbläsare.
Dialogrutan "Inställningar" visas med den förvalda kategorin "Förhandsvisning i
Webbläsare". Klicka på plustecknet för att lägga till flera webbläsare.
Dreamweaver CS5 Grundkurs
Linjaler
Med linjaler kan du mäta och planera webbsidans layout. Linjalerna visas på
dokumentfönstrets vänstra och övre kanter.
Gå in under menyn "Visa". Välj Linjaler och markera "Visa" för att visa linjalerna.
Här kan du även ändra måttenheten till tum eller centimeter, men eftersom
bildskärmens upplösning anges alltid i pixlar så rekommenderar jag att du väljer
"Pixlar".
Du kan även högerklicka på den översta eller vänstra linjalen för att ändra mått och
dölja alla linjaler.
Dreamweaver CS5 Grundkurs
Paneler
Paneler i Dreamweaver grupperas i olika grupper vilka kallas panelgrupper eller
tabbgrupper. En vald panel i en grupp visas som en flik. Se exemplet nedan:
Du kan stänga en panel eller en tabbgrupp genom att högerklicka på panelnamnet.
Du kan även minimera paneler till ikoner genom att högerklicka eller
med hjälp av ikonen ”Minimera till ikoner” som finns längst upp till
höger om panelerna.
Dreamweaver CS5 Grundkurs
Gå in under menyn "Fönster" och se till att panelerna: Infoga, Egenskaper, CSS-format
och Filer är markerade enligt bilden nedan.
Dreamweaver CS5 Grundkurs
Panelen Infoga
Den viktigaste panelen i Dreamweaver kallas Infoga. Den innehåller knappar som
används för att skapa och infoga olika HTML-objekt såsom länkar, bilder och tabeller.
Infoga-panelen organiserar knapparna i flera kategorier som kan antingen visas som en
meny eller ett antal flikar.
Högerklicka på någon flik och välj "Visa som meny".
Nu organiseras knapparna i olika rubriker under en meny.
Klicka på "Favoriter". Du kan nu högerklicka för att anpassa dina favoritobjekt. Visa
knapparna "Hyperlänk", "Bild" och "Tabell" under favoriter enligt bilden nedan.
Visa återigen panelen som flikar. Detta kan du göra längst ner i menyn (under
färgikoner).
Dreamweaver CS5 Grundkurs
Panelen Filer
Filpanelen grupperas med två andra paneler, "Resurser" och "Fragment". Alla dessa tre
tillsammans kallas för panelgruppen "Filer". Du kan komprimera eller utöka en grupp
genom att dubbelklicka på dess namn.
Med filpanelen kan du visa och skapa filer och mappar. Här kan du även skapa och
hantera en Plats (Sajt), ladda upp och ladda ner filer till en server m.m.
Tips!
Tryck på tangenten F4 för att dölja eller visa alla paneler samtidigt (ej infoga-panelen).
Dreamweaver CS5 Grundkurs
Statusfältet
Längst ned i dokumentfönstret hittar du statusfältet. Här kan du bl.a. zooma in och ut i
ett dokument i Designvy, ändra storlek på dokumentfönstret samt se ytterligare
information om dokumentet t.ex. den uppskattade storleken inklusive alla bifogade
bilder och objekt.
Ändra dokumentfönstrets storlek till 600 x 300.
Obs! Du kan inte ändra storleken på ett maximerat fönster. Därför behöver du först
återställa fönstret genom att klicka på återställknappen (se bilden nedan).
Dreamweaver CS5 Grundkurs
Taggväljaren
Längst ned till vänster i dokumentfönstret hittar du "Taggväljaren". Här kan du klicka
på HTML-taggar för att markera, redigera eller ta bort taggar utan att gå ur Designvyn.
Skriv lite text i Designvyn och tryck på retur (Enter) för att skapa ett stycke.
Klicka på <body> för att markera hela dokumentet.
Klicka på <p> för att markera ett stycke.
Högerklicka på en tagg för att ta bort en tagg.
Du kan även snabbredigera en tagg utan att gå ur Designvyn.
Dreamweaver CS5 Grundkurs
Egenskapspanelen
I egenskapspanelen kan du redigera de vanligaste attribut och egenskaper för
markerade taggar och objekt t.ex. text, bilder och tabeller. Innehållet i denna panel
ändras beroende på det markerade objektet. Om du t.ex. markerar en bild på sidan så
ändras egenskapspanelen så att den visar egenskaperna för bilden.
Tips: Klicka på frågetecknet som finns längst upp till höger i egenskapspanelen för att
se detaljerad information om varje funktion i panelen.
Exempel 1: Egenskaper för en bild
Exempel 2: Egenskaper för en tabell
Dreamweaver CS5 Grundkurs
Övningsuppgifter
1. Skapa ett nytt HTML-dokument via Välkomstskärmen.
Spara filen som sida1.html
2. Öppna boken "O'REILLY HTML Referens" som finns under panelen "Referens".
3. Växla mellan arbetsytan "Programmerare" och "Designer".
Skapa därefter en ny arbetsyta med valfritt namn.
Växla sedan till arbetsytan ”Klassik”
4. Visa panelen "Infoga" som en meny.
5. Visa knapparna "Hyperlänk", "Bild" och "Tabell" som favoriter under infoga-panelen.
6. Ändra dokumentrubriken (titel) och förhandsgranska dokumentet i olika
webbläsare.
7. Växla mellan Kod-, Dela -och Design-vyer och undersök skillnaden mellan dessa tre
vyer.
8. Visa "Linjaler" och ändra måttenheten till pixlar.
9. Visa panelerna "Filer" och "CSS-format". Dölj alla andra paneler.
11. Dölj/Visa alla paneler samtidigt med hjälp av en enda tangenttryckning (Tips F4).
12. Ändra dokumentfönstrets storlek till 955 x 600.
13. Skriv lite text i Designvyn och tryck på Enter för att skapa ett stycke. Markera
stycket med hjälp av "Taggväljaren".
14. Visa "Egenskapspanelen" för det aktuella dokumentet och undersök de olika
egenskaperna.
Dreamweaver CS5 Grundkurs
Kapitel 2 Texthantering
Vi ska i detta kapitel arbeta med text och ett antal formateringsmöjligheter i
Dreamweaver. Vi kommer att importerar text från MS Word samt gå igenom listor.
Textformat
Med textformat syftar man oftast till textens struktur t.ex. stycke och rubriker. Medan
textformatering innebär att man ändrar textens utseende t.ex. fet och kursiv.
Börja med att skriva följande text i Designvyn (oformaterat).
Huvudrubrik (Rubrik 1)
Detta är ett stycke. Några ord i fetstil och några ord i kursivstil.
Detta är ett nytt stycke.
Nu har jag en ny rad i samma stycke.
Du märker säkert att Dreamweaver skapar ett nytt stycke så fort du trycker på
returtangenten (Enter) automatiskt. Markera första stycket och välj ett annat format
från egenskapspanelen. Välj Rubrik 1 och titta noga i taggväljaren. Den HTML-tagg som
är kopplad till det valda formatet, alltså h1 för Rubrik 1, används på texten istället.
För att få en radbrytning istället för ett stycke behöver du hålla ner tangenten SHIFT
samtidigt som du trycker på Enter.
Kom ihåg:
ENTER infogar ett stycke (en p-tagg)
SHIFT + ENTER för att infoga en radbrytning (en br-tagg).
Dreamweaver CS5 Grundkurs
Textformatering
I egenskapspanelen kan du välja två vanliga textformateringar, nämligen fet och kursiv.
Markera ordet fetstil i exemplet ovan och klicka på knappen B för att få fetstil.
Markera ordet kursivstil och klicka på knappen I för att få kursivstil.
Vilka taggar appliceras på texten?
Blockcitat
Ibland behöver du göra ett citatblock eller särskilt betona något. Detta kan du, på ett
enkelt sätt, åstadkomma med hjälp av knappen ”blockcitat”.
Skriv följande text i Designvyn:
Detta är ett stycke utan indrag
”Detta är ett stycke med indrag. Lägg märke till att Dreamweaver
skapar ett sådant indrag med taggen <blockquote>".
Detta är ett stycke utan indrag
Markera det andra stycket och klicka på knappen ”Blockcitat”.
Testa att klicka på ”Blockcitat” flera gånger och ta bort formatet med knappen ”Ta bort
Blockcitat” som ligger till vänster.
Dreamweaver CS5 Grundkurs
Infoga specialtecken
Infoga-panelen har en flik som heter Text (se bilden nedan). Här hittar du de mesta
vanligaste formattaggarna och en liten speciell meny längst ut till höger.
Klicka på den lilla nedåtriktade pilen längst ut till höger.
Här hittar du radbrytningstaggen <br>, hårt mellanslag (&nbsp;), vänster- och höger
citattecken (“ ”), Långt tanktreck (—). Här finns även några vanliga tecken för valutor,
Copyright ©, registrerad varumärke ® och varumärke ™.
Klicka gärna på knappen "Andra tecken" för att
komma åt flera andra specialtecken som finns
inbyggda i Dreamweaver.
Dreamweaver CS5 Grundkurs
Importera text
Vid hemsidebyggandet brukar man oftast importera text från andra program t.ex. MS
Word. Knappen Klistra in som finns i verktygsfältet Standard fungerar utmärkt för
detta ändamål men det är bra att känna till att det finns fyra olika inklistringsalternativ
i Dreamweaver.
Starta den här övningen med att skriva följande text i MS Word.
Markera texten och kopiera med kortkommandot CTRL+C.
Dreamweaver CS5 Grundkurs
Växla till Dreamweaver och gå in under menyn Redigera och välj "Klistra in special..."
Dialogrutan "Klistra in special" visar fyra alternativ. Se bilden nedan.
Välj alternativet "Endast text" och tryck på OK.
Då kommer du att få ren text utan någon formatering. Du får inte ens en radbrytning
mellan stycken!
Öppna dialogrutan "Klistra in special" en gång till och välj det andra alternativet, Text
med struktur. Nu får du en rubrik, ett stycke och en radbrytning. Ingen annan
formatering tillämpas här!
Dreamweaver CS5 Grundkurs
Det tredje alternativet "Text med struktur plus grundläggande formatering". Ger även
fet- och kursivstil.
Under alternativet "Text med struktur plus fullständig formatering", försöker
Dreamweaver importera all formatering. Lägg märke till att Dreamweaver visar
teckensnitt, teckenstorlek och marginaler i CSS (Stilmallar)!
Om du tycker att du har fått med för mycket formatering så kan du gå in under menyn
Kommandon och välja alternativet "Rensa Word-HTML...".
Dreamweaver CS5 Grundkurs
I denna dialogruta kan du välja att rensa HTML från Word 97/98 samt Word 2000 och
senare. Du kan bl. a. ta bort alla Word-specifika taggar och rensa CSS (Stilmallar).
Testkör gärna denna funktion på ovanstående övning.
Dreamweaver CS5 Grundkurs
Listor
I Dreamweaver kan du skapa flera olika sorters listor. De viktigaste är numrerade listor
och punktlistor (Punktade listor). Numrerade listor kallas även ordnade listor och
punktlistor kallas oordnade listor.
Skriv följande text, separera med Enter.
Måndag
Tisdag
Onsdag
Torsdag
Fredag
Markera texten och klicka på knappen "Punktad lista".





Måndag
Tisdag
Onsdag
Torsdag
Fredag
Dreamweaver CS5 Grundkurs
Klicka nu på knappen "Numrerad lista".
1.
2.
3.
4.
5.
Måndag
Tisdag
Onsdag
Torsdag
Fredag
Du kan på ett enkelt sätt ändra listans egenskaper eller enskilda listposformat genom
att klicka på knappen "Listobjekt ..." längst ner i egenskapspanelen.
Ändra stil till ”Romerska siffror, stora”.
I.
II.
III.
IV.
V.
Måndag
Tisdag
Onsdag
Torsdag
Fredag
Dreamweaver CS5 Grundkurs
Infoga datum
Det allra enklaste sättet att infoga ett datum är att skriva in datumet direkt i
Designvyn, men vill du uppdatera datumet automatiskt varje gång du sparar
dokumentet, så bör du använda knappen "Datum" i infoga-panelen, fliken Allmänt.
Skriv följande text längst ner i dokumentfönstret:
Sidan är senast uppdaterad den
Klicka på knappen "Datum" och välj ett lämpligt datumformat. Välj gärna även ett
tidsformat för att kunna testa den automatiska uppdateringen.
Spara dokumentet och undersök datumet!
Dreamweaver CS5 Grundkurs
Sök och ersätt
I Dreamweaver kan du snabbt söka efter alla förekomster av ett specifikt ord eller en
specifik fras.
Gå in under menyn Redigera och välj "Sök och ersätt..."
Skriv den text du vill söka efter i rutan "Sök" och klicka på knappen "Sök nästa".
Vill du ersätta texten med något annat skriv den nya texten i rutan "Ersätt" och klicka
på knappen "Ersätt" eller "Ersätt alla".
Dreamweaver CS5 Grundkurs
Stavningskontroll
Det finns ett antal stavningsordlistor i Dreamweaver.
Gå in under menyn Redigera och välj Inställningar. Under fliken Allmänt hittar du en
lista med de tillgängliga stavningsordlistorna. Välj Svenska.
Du kan nu kontrollera stavningen genom att gå in under menyn
Kommandon – Välj ”Kontrollera stavning”
eller tryck på tangentkombinationen Skift+F7.
Dreamweaver CS5 Grundkurs
Övningsuppgifter
1. Skriv och formatera följande text i Dreamweaver.
Huvudrubrik (Rubrik 1)
Detta är ett stycke med några ord i fetstil och kursivstil.
Nu har jag en ny rad i samma stycke.
2. Skriv och formatera följande text.
Detta är ett stycke utan indrag
"Detta är ett stycke med indrag.
Lägg märke till att Dreamweaver skapar ett sådant indrag
med taggen <blockquote>".
Detta är ett stycke utan indrag
3. Skriv följande text.
Copyright © 2011
4. Skriv följande text i MS Word.
Huvudrubrik
Detta är ett stycke text skrivet i MS Word med några enkla textformateringar.
Teckensnittet är Calibri. Teckenstorleken är 12 punkter. Några ord är i fetstil och några
ord i kursivstil.
Det här stycket är centrerat.
Markera texten och kopiera med kortkommandot CTRL+C.
Växla till Dreamweaver och klistra in texten med struktur plus fullständig formatering.
Du ska därefter "Rensa Word-HTML".
Dreamweaver CS5 Grundkurs
5. Skriv följande lista i Dreamweaver.





Måndag
Tisdag
Onsdag
Torsdag
Fredag
6. Ändra listan till en "Numrerad lista" istället.
Ändra formatet (Stil) till ”Romerska Siffor, stora”
7. Skriv följande text längst ner i dokumentfönstret
Sidan är senast uppdaterad den 01-okt-2011
Se till att datumet uppdateras automatiskt när man sparar filen.
8. Använd funktionen "Sök och ersätt". Sök efter ordet Huvudrubrik och ersätt den
med Dreamweaver
9. Kontrollera stavningen i dokumentet.
Spara med ett valfritt namn och avsluta Dreamweaver.
Dreamweaver CS5 Grundkurs
Kapitel 3 Plats- och Filhantering
En plats i Dreamweaver är en samling som består av alla filer, bilder och andra resurser
på en webbplats. Med hjälp av en plats kan du redigera och uppdatera dina filer som
skapas i Dreamweaver. I detta kapitel kommer vi att gå igenom platshantering. Vi ska
skapa nya platser, hantera befintliga och ta bort platser.
Skapa en ny Plats
Gå in under menyn Plats och klicka på "Ny plats ...".
Du kan även skapa nya platser via programfältet.
Eller via välkomstskärmen
Dreamweaver CS5 Grundkurs
Dialogrutan Platskonfiguration visas. Se till att fliken "Plats" är markerad.
Du kan nu definiera en ny plats.
Ange ett namn (Platsnamn). Skriv t.ex. "Min första DW Plats".
Under ”Lokal mapp för platsen” behöver du ange sökvägen till en lokalmapp på
hårddisken, alternativt navigera till en mapp eller skapa en ny mapp via knappen
”Sök efter mapp”.
Den lokala mappen blir webbplatsen rot som också kallas ROTMAPP.
Klicka på knappen Spara.
Dreamweaver CS5 Grundkurs
Ange en standardmapp för bilder
Dubbelklicka på platsens namn i filpanelen för att ta fram dialogrutan
Platskonfiguration. Klicka sedan på fliken Avancerade inställningar.
Till vänster ser du en lista på ett antal underkategorier. Den första kategorin, Lokal
information, är den viktigaste och därför visas först när du väljer Avancerade
inställningar.
Här kan du bl.a. ange en ”Standardmapp för bilder”. Du anger sökvägen till den mapp
som du använder för att spara alla bilder i den aktuella platsen. Klicka på knappen ”Sök
efter mapp” för att skapa en ny mapp eller välja en befintlig mapp. Många
webbdesigner föredrar namnet "images" som bildmapp.
Obs! Det är viktigt att skapa bildmappen direkt under rotmappen.
Tips! Klicka på knappen Hjälp för mer information om att "Konfigurera en
Dreamweaver-plats".
Dreamweaver CS5 Grundkurs
Hantera Platser
Gå in under menyn Plats och klicka på "Hantera platser...".
I dialogrutan ”Hantera platser kan du komma åt alla Dreamweaver platser. Här kan du
skapa nya platser, redigera befintliga, duplicera och ta bort platser. Du kan även
exportera och importera inställningarna i XML-format. Observera att inga filer eller
bilder exporteras här, alltså detta är ingen backup funktion i Dreamweaver!
En annan viktig sak att poängtera här är att "Ta bort"-knappen, tar endast bort
inställningarna. Inga filer eller bilder tas bort från den lokala hårddisken. Så om du vill
ta bort webbplatsen permanent, behöver du gå in i utforskaren och ta bort filer och
mappar manuellt.
Testa gärna att duplicera en plats och sedan ta bort den. Klicka på knappen Klart när
du känner att du behärskar platshanteringen i Dreamweaver.
Dreamweaver CS5 Grundkurs
Mer om Filpanelen
Gå in under menyn Fönster och markera Filer eller tryck på tangenten F8 för att ta
fram/dölja filpanelen (Se bilden nedan). I denna panel kan du, på ett enkelt sätt, skapa
nya filer, öppna, byta namn och ta bort befintliga filer. Här ser du en översikt av alla
filer som ingår Dreamweaver-platsen.
Direkt under fliknamnet visas en grön mappikon, platsens namn och en liten pil som
markerar en rullgardinslista. Klicka var som helst på detta område för att växla till
andra Dreamweaver-platser.
Här kan även utforska andra enheter, komma åt skrivbordet och längst ner i menyn
hittar du en länk till dialogrutan ”Hantera platser…”
Dreamweaver CS5 Grundkurs
Skapa nya filer via Filpanelen
Jag nämnde tidigare att du kan skapa nya filer i Filpanelen.
Högerklicka på platsens rot och välj "Ny fil".
Dreamweaver föreslår namnet untitled.html. Ändra till ett bättre beskrivande filnamn
t.ex. index.html (startsida) och tryck på Enter. Tryck på Enter en gång till eller
dubbelklicka på filen för att öppna filen.
Tips:
På samma sätt kan du skapa nya mappar. Högerklicka i Filpanelen och välj "Ny mapp".
Skriv ett lämpligt mappnamn och tryck på Enter.
Dreamweaver CS5 Grundkurs
Inställningar för nya HTML-dokument (Överkurs)
Gå in under menyn Redigera och klicka på Inställningar...
Välj kategorin "Nytt dokument". Här kan du ange standardinställningar för nya HTMLdokument. Se till att det står HTML under standarddokument och .html under
standardtillägg.
Under Standarddokumenttyp kan du välja en av HTML eller XHTMLdokumenttypsdefinitionerna för att skapa webbsidor enligt W3C standarder. De
viktigaste dokumenttypsdefinitionerna som du bör känna till är ”HTML 4.01 Strict” och
”HTML 4.01 Transitional” och ”HTML 5”.
Väljer du Strict så måste du använda de senaste och aktuella taggar. Här bör all
formateringen t.ex. teckensnitt och teckenstorlek kodas med stilmallar (CSS), vilket
innebär striktare separation av innehåll/struktur och utseende. Transitional är
däremot tolerant mot gamla HTML presentationstaggar, alltså den tillåter dig använda
allt som är enligt Strict och även äldre HTML-taggar och attribut såsom font-taggen och
attributet align.
Standardkodningen är den teckenkod som används i dokumentet.
Välj Unicode (UTF-8). Denna kodning fungerar i alla språk.
Dreamweaver CS5 Grundkurs
Sidegenskaper
Vi ska nu ändra utseendet på ett html-dokument med hjälp av dialogrutan
Sidegenskaper.
Gå in under menyn Ändra och välj Sidegenskaper...
På den vänstra delen av dialogrutan ser du 6 olika kategorier: Utseende (CSS),
Utseende (HTML), Länkar (CSS), Rubriker (CSS), Titel/kodning och Hjälpbild.
Utforska den första kategorin, Utseende (CSS). Ändra Typsnitt på sidan. Välj
teckenstorlek, textfärg och bakgrundsfärg.
Dreamweaver CS5 Grundkurs
Övningsuppgifter
1. Skapa en ny mapp direkt under enheten C: (eller valfri enhet i din dator). Ange
"Mina Webbplatser" som mappnamn.
2. Skapa en ny Dreamweaver-plats. Ange "Min första DW Plats" som platsnamn. Skapa
en ny mapp under mappen "Mina Webbplatser” med samma namn (Min första DW
Plats) och spara den nya platsen där.
3. Under "Standardmapp för bilder" ska du skapa en ny mapp direkt under rotmappen.
Namnge mappen som "images".
4. Skapa följande HTML-sidor via Filpanelen:
index.html, kontakt.html, om.html, produkter.html
Tips! Högerklicka på platsens rot och välj "Ny fil". Skriv filens namn och tryck på Enter.
5. Öppna alla filer.
Ändra dokumentrubriken (titel) på alla sidor till en lämplig titel.
Ta fram sidans egenskaper (Dialogrutan Sidegenskaper).
Ändra standardtypsnitt till "verdana" och ange "10 punkter" som teckenstorlek på alla
sidor.
Dreamweaver CS5 Grundkurs
Kapitel 4 Länkar
Vi ska i detta kapitel fokusera oss på HTML-Länkar. Kapitlet påbörjas med att infoga epostlänkar. Sedan går vi vidare med att länka olika HTML-dokument till varandra. Här
är det viktigt att förstå skillnaden mellan absoluta och relativa länkar samt kunna
öppna länkar i nya fönster.
Börja med att skapa och konfigurera en ny Dreamweaver-plats med valfritt namn.
Skapa sedan ett HTML-dokument och spara filen som index.html
Vi ska nu skapa en meny i detta dokument. Skriv följande punktlista:




Hem
Om oss
Våra Produkter
Kontakta oss
Skapa en E-postlänk
Markera texten under den sista punkten "Kontakta oss" och klicka på knappen
"E-postlänk" som finns under fliken Allmänt i Infoga-panelen.
Dreamweaver öppnar dialogrutan E-postlänk. Texten "Kontakta oss" fylls i automatiskt
i det första textfältet. Skriv en giltig e-postadress under "E-post" och klicka på OK.
Dreamweaver CS5 Grundkurs
Spara och förhandsgranska sidan i en webbläsare. Dreamweaver kommer nu att visa
texten "Kontakta Webmaster" som en standard länk. Texten visas i en annan färg och
är understruken.




Hem
Om oss
Våra Produkter
Kontakta oss
Lägg märke till att e-postlänkar öppnar e-postklienten som du använder i din dator
t.ex. MS Outlook eller Mozilla Thunderbird. Om du får problem med att öppna länken
så behöver du förmodligen konfigurera din e-postklient först.
Du ska nu skapa 3 nya HTML-sidor. Skapa följande filer direkt under roten index.html,
om.html och produkter.html
Dreamweaver CS5 Grundkurs
Relativa länkar (Dokumentberoende sökvägar)
Relativa länkar som även kallas ”dokumentberoende sökvägar” passar bäst för lokala
länkar på en och samma webbplats (filer som ligger i samma rotmapp).
Gå till filen index.html. Vi ska nu länka den första rubriken Hem till startsidan d.v.s. till
samma dokument. Markera texten och skriv index.html i textfältet Länk i
egenskapspanelen.
För att undvika felstavningar erbjuder Dreamweaver två grafiska metoder att skapa
relativa länkar. Den första kallas för "Bläddra efter fil" och den andra "Peka på fil".
Markera ”Om oss” och klicka på knappen "Bläddra
efter fil" i egenskapspanelen. Bläddra efter filen
om.html.
Dreamweaver CS5 Grundkurs
Tips! Klicka på knappen Platsrot om du har flera plaster med samma filnamn. Då
hamnar du alltid i den aktuella platsens rotmapp.
Innan du klicka på OK, notera sökvägen (URL) längst ner. Dreamweaver visar filnamnet
om.html och direkt under filnamnet ser vi att Dreamweaver väljer Dokument under
"Relativt till", vilket innebär att länken är dokumentberoende.
Den andra grafiska metoden är betydligt enklare och smartare. Markera texten ”Våra
Produkter” och klicka på knappen "Peka på fil".
Håll i knappen nedtryckt och dra till filen produkter.html för att skapa en länk.
Förhandsgranska dokumentet i en webbläsare och testa alla länkar. Kopiera menyn till
alla sidor om alla länkar fungerar. Spara alla filer och testa igen.
Tips! Om du ändrar filnamn i filpanelen, uppdateras alla relativa länkar automatiskt!
Dreamweaver CS5 Grundkurs
Absoluta länkar
Öppna filen index.html och skapa en länk till www.google.se
Här ska du skriva webbadressen (URL), inklusive protokollet http:// i länkfältet.
Detta kallas för en absolut länk. Du måste använda absoluta länkar när du länkar till
webbplatser och filer som ligger på en annan server. Testa gärna att länka till en extern
adress utan att ange http:// förhandsgranska sidan och klicka på länken! Vad händer?
Öppna länkar i nya flikar (fönster)
Ibland behöver man öppna en länk i ny flik i webbläsaren. Attributet Mål (Target) har
ett värde som heter ”_blank” som fixar detta.
Markera länken till Google och välj ”_blank” från listan som visas under Mål i
egenskapspanelen.
Dreamweaver CS5 Grundkurs
Formatera länkar
I Dreamweaver kan du, på ett enkelt sätt, formatera alla länkar som visas på en sida.
Du kan ändra Länktypsnitt, Storlek och färgerna på länkar, Svävning-länkar (Rolloverlänkar), Besökta länkar och Aktiva länkar.
Gå in under menyn Ändra och öppna dialogrutan Sidegenskaper. Välj kategorin Länkar
(CSS) och testa gärna att ändra länktypsnitt, storlek och alla färger. Här kan du även
ange länkens understrykningsformat. Alternativet "Använd aldrig understrykning" är
relativt modernt!
Dreamweaver CS5 Grundkurs
Övningsuppgifter
1. Skapa och konfigurera en ny Dreamweaver-plats med namnet Mina Länkar.
Skapa en bildmapp direkt under rooten.
Skapa sedan ett HTML-dokument och spara filen som index.html
2. Skriv följande punktlista:




Hem
Våra Tjänster
Om Företaget
Kontakt
3. Markera den sista punkten "Kontakt" och infoga en E-postlänk.
Ange din egen e-postadress som länk.
4. Skapa ytterligare 2 HTML-sidor under rooten, tjanster.html och om.html
5. Gå till index.html och skapa länkar till alla sidor.
6. Kopiera menyn till alla sidor.
7. Öppna filen index.html och skapa en extern länk t.ex. till www.google.se
8. Se till att länken öppnas i ny flik i webbläsaren.
Dreamweaver CS5 Grundkurs
Kapitel 5 Bildhantering
Under detta kapitel kommer vi att arbeta med färger och bilder i Dreamweaver. Vi
startar med att ändra bakgrundsfärg och bakgrundsbild. Sedan infogar vi några bilder
och visar hur man optimerar och beskär dessa.
Färger
Det finns endast 17 namngivna färger enligt W3C HTML och CSS standarder.
Dessa färger är: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, och yellow.
Men de flesta webbläsare har stöd för ca 150 namngivna färger.
En lista på dessa färger finns här:
http://www.w3schools.com/tags/ref_colornames.asp
Starta Dreamweaver och skapa en HTML-sida. Spara som colors.html
Bakgrundsfärg
Du kan ange sidan bakgrundsfärg i dialogrutan Sidegenskaper på två olika sätt
antingen via HTML eller CSS.
Från menyn Ändra välj Sidegenskaper eller klicka på knappen Sidegenskaper i
egenskapspanelens nedre del. Klicka sedan på fliken ”Utseende (HTML)”.
Dreamweaver CS5 Grundkurs
Under alternativet ”Bakgrund” kan du skriva en namngiven färg t.ex. blue. Testa gärna
några andra standardfärger såsom lime, maroon och navy.
Man kan även ange en färg enligt det hexadecimala talsystemet där färgen svart anges
med värdet #000000 och färgen vit med värdet #FFFFFF. Men du behöver inte kunna
HEX-koder utantill. Dreamweaver erbjuder en liten palett (Färgruta) med alla färger
som kan, på ett enkelt sätt plockas med en lite pipett. Smart va :-)
Under denna kategori kan du även textfärgen på hela sidan. Testa gärna olika färger
och klicka på knappen Använd för att testa färgerna på sidan.
Lite om bildformat
Det finns tre bildformat som används på webbsidor. Dessa är GIF, JPEG (eller JPG) och
PNG.
GIF (Graphic Interchange Format) innehåller max 256 färger och lämpar sig för
animerade bilder (Gif-animeringar).
JPEG (Joint Photographic Experts Group) kan innehålla miljontals färger och därför är
mest lämpade för foton och bilder med halvtoner.
PNG (Portable Network Graphics) lämpar sig för all slags webbgrafik. PNG har stöd för
miljontals färger samt stöd för alfakanaler, vilket gör att delar av bilden kan vara
genomskinliga.
Dreamweaver CS5 Grundkurs
Bakgrundsbild
För att ändra bakgrundsbilden klickar du på knappen "Bläddra...". Sök efter en bild,
markera bilden och klicka på OK. Dreamweaver visar bakgrundsbilden upprepade
gånger om den inte fyller hela fönstret.
Visa bilder i HTML-dokument
Du kan visa bilder i HTML-dokument på många olika sätt.
Placera insättningspunkten där du vill att bilden ska visas. Gå in under menyn Infoga
och välj Bild. Markera en valfri bild från din dator och klicka på OK.
Du kan även klicka på knappen ”Bild” i Infoga-panelen under fliken Allmänt för att
infoga en bild.
Dreamweaver CS5 Grundkurs
Hjälpattribut för bildtagg
Standardinställningen i Dreamweaver visar dialogrutan "Hjälpattribut för bildkod" när
man infogar en bild. Här kan du ange alternativ text för bilden (tillgänglighetsattribut)
som kan t.ex. läsas upp av handikappadeanpassade webbläsare.
'
Bildegenskaper
När du markerar en bild visas egenskapspanelen för bilder längst ner i programmet.
Här kan du ange ändra och ange bildens egenskaper t.ex. bredd (B) och höjd (H).
Om du ändrar bredd eller höjd visar Dreamweaver en liten rund pil vars uppgift är att
återställa bilden till original storlek.
I den egenskapspanelen hittar du den alternativa texten (Alt) som vi pratat om under
"Hjälpattribut för bildkod".
Under "Kant" anger du bredd på bildramen mätt i pixlar.
Dreamweaver CS5 Grundkurs
Optimera bilder
Knappen "Redigera bildinställningar" (kugghjulet) öppnar dialogrutan
"Bildförhandsvisning".
Här kan du optimera bildens filstorlek och ändra dess kvalitet. Du kan ändra filformat
och justera färgpaletten för att ta bort färger som inte används.
Dreamweaver CS5 Grundkurs
Under fliken "Fil" kan du skala eller exportera ett område på bilden.
Skala bilden till 50% och klicka på OK.
Beskära bilder
Knappen "Beskär" i egenskapspanelen hjälper dig att kapa kanterna på en bild, lodrätt
eller vågrätt. Du kan beskära bilder om du vill dra uppmärksamheten till ett visst
område. Lägg märke till att Dreamweaver ändrar filen på hårddisken men du kan ångra
beskärningen och återställa bilden tills du avslutar programmet.
Dreamweaver CS5 Grundkurs
Bildplatshållare
En bildplatshållare är en bild som används tillfälligt, tills den färdiga bilden är klar att
läggas på webbsidan.
Klicka på den lilla pilen till höger om knappen Bilder i fliken Allmänt och välj
"Bildplatshållare".
Ange Namn, Bredd och Höjd, Färg och Alternativ text enligt figuren nedan!
Resultatet visas i Dreamweaver men förhandsgranska gärna i olika webbläsare för att
se hur bildplatshållaren behandlas utanför programmet.
Dreamweaver CS5 Grundkurs
Överrullningsbild
En överrullningsbild är en bild som ändras när muspekaren svävar över den i en
webbläsare. Här behöver man först förbereda två bilder, en originalbild som visas när
webbsidan visas först i webbläsaren och en överrullningsbild som visas när
muspekaren befinner sig över den första bilden.
Dreamweaver CS5 Grundkurs
Övningsuppgifter
1. Starta Dreamweaver. Skapa ett nytt HTML-dokument och skriv några ord.
Öppna dialogrutan Sidegenskaper och ändra textfärg och bakgrundsfärg. Testa gärna
olika färger.
3. Vilka bildformat används på webbsidor. Ange förkortning och användningsområde!
4. Infoga en valfri bild i och ange en alternativ text till bilden.
5. Ändra bredd och höjd på bilden. Återställ därefter bilden till original storlek.
6. Ange 3 pixlar under ”Kant”.
7. Skala bilden till 50 %.
8. Skapa en bildplatshållare enligt nedanstående figur.
Dreamweaver CS5 Grundkurs
Copyright © 2011
Mahmud Al Hakim
[email protected]
The Swedish Web Development Academy
www.webdevacademy.eu
DynamicOS Open Source Web Development
www.dynamicos.se