Image: Dreamweaver distance course logo
   

 
Hej och välkommen till den här distanskursen i Dreamweaver!

Den här kursen går igenom allt du behöver känna till för att kunna använda Dreamweaver i vardagen. Du hittar alla lektioner för både grundkursen och fördjupningen längre ned på den här sidan.

Det mesta vi går igenom kommer att förklaras ingående och med många exempelbilder, så du kan lätt följa med där hemma. Kom bara ihåg att du inte måste plugga in allt eller kunna allting utantill: nyckeln till att kunna använda ett program på ett bra sätt är trots allt att känna till möjligheterna -- exakt hur man gör går ju alltid att klura ut vid behov.

I slutet på varje lektion får du en eller ett par övningar som du utför hemma. Dessa innebär oftast att du själv får ladda upp dem på nätet! Det finns noggranna instruktioner för hur du gör, så det borde inte vara några problem.

Läs gärna igenom den här sidan innan du börjar. Här förklaras nämligen det du behöver veta för att enklast kunna ta dig igenom kursen.

 

 

Lektioner

Här hittar du alla lektioner som ingår i kursen. Du börjar förstås med lektion 1 och går vidare därifrån i takt med studieschemat.

Kursen innehåller sju grundlektioner, sju fördjupningslektioner, samt olika frivilliga lektioner för de som vill ha litet mer att bita i.

 

Lektion 1
Vi börjar den här grundkursen med att gå igenom Dreamweavers beståndsdelar och grundläggande funktioner. Sedan går vi igenom hur man skapar och förbereder en lokal webbplats på sin dator -- det är där alla sidorna man gör först hamnar. Därefter kopplar vi den lokala webbplatsen till den kurswebbplats du fått i samband med den här kursen. Slutligen går vi igenom hur man infogar text och bilder i sina sidor och publicerar dem på nätet så att alla kan se dem!

Klicka här för att gå till lektionen »

 

Lektion 2
I vår andra lektion ska vi gå igenom resten av grunderna. Men det viktigaste i den här lektionen handlar om hur vi hämtar hem bilder från nätet (helt lagligt!) och anpassar dem för att visas på våra sidor. Det är mycket nyttigt att känna till, särskilt för er som vill visa era egna digitala foton -- annars finns chansen att de är alldeles för stora. Vi har ju alla sett bilder som är så stora att bara ena hörnet syns på skärmen. Så blir det med de flesta digitala foton man tar. Här beskriver jag exakt hur man gör för att krympa ned dem till hanterbar storlek innan man sätter ut dem på sina sidor.

Klicka här för att gå till lektionen »

 

Lektion 3
Nu har vi gått igenom grunderna, så då är det dags att ta en titt på ett av många olika sätt man kan strukturera innehållet i sina webbsidor. Det kallas tabeller, och är något man måste känna till. Utöver tabellerna ser vi även hur man skapar e-post-länkar samt fem enkla regler (men svåra att följa!) om webbdesignens ädla konst: vad man bör tänka på för att få så stiliga och effektiva webbplatser som möjligt.

Klicka här för att gå till lektionen »

 

Lektion 4
I den fjärde lektionen kommer vi att se hur man designar utseendet på sina länkar och hur man skapar bokmärken i sina sidor. Men främst av allt kommer vi att se hur man gör för att skapa formulär på sina sidor. Formulär går att använda till det mesta: intresseundersökningar, enkäter, enkla webbshopar, allt möjligt. Det är något som är mycket bra att känna till. I instruktionen ingår även en gratis säkerhetstjänst som kommer att stänga ute de allra flesta reklamrobotarna.

Klicka här för att gå till lektionen »

 

Lektion 5
I lektion fem ska vi se hur man kan formatera sina bilder -- det innebär att man placerar dem på olika sätt och ställen i textstycken och så vidare utan att man behöver använda t ex tabeller. Vi ska även se hur man skapar "hotspot-länkar", alltså hur man omvandlar särskilda delar av bilder till klickbara länkar. Men det viktiga i den här lektionen är att vi ska se hur man gör för att programmera en webbsida för hand! Fast det blir bara det allra mest grundläggande, så att alla får prova på hur det går till. Jag beskriver naturligtvis exakt vad, hur och varför. Sedan ska vi använda en funktion som man inte kan ställa in rätt om man inte törs gå in i kodvyn och mixtra litet. Den kallas iframes, och låter dig visa flera olika webbsidor på en och samma gång! Det låter kanske litet väl avancerat, men du kan dämpa skrämselhickan: det är mycket enklare än man tror.

Klicka här för att gå till lektionen »

 

Lektion 6
I grundkursens näst sista lektion kommer vi att börja med hur man infogar filmer från YouTube i sina sidor. Sedan tar vi äntligen upp det jag tjatat om genom hela kursen: grunderna i CSS. Vi ser hur man gör för att skapa egna utseenden som man kan använda i sina sidor -- bara det är en halv vetenskap!

Klicka här för att gå till lektionen »

 

Lektion 7
Då har vi nått fram till grundkursens sista lektion! Här går vi igenom allt annat av grunderna i CSS som är värt att känna till: hur man skapar en lista med stilar som man kan koppla flera sidor till, hur man skapar lager -- fritt flytande rutor man kan fylla med innehåll och placera precis var man vill -- och hur man kombinerar dem och det vi lärde oss i förra lektionen för att skapa moderna webbsidor som byggts upp helt utan tabeller.

Klicka här för att gå till lektionen »

 

 

 

Fördjupningslektioner

Fördjupningen börjar i september. Du kan anmäla dig till den på www.natbildarna.nu.


Fördjupningslektion 1
Vi lär oss att använda CSS-kommandona Visibility och Display som med ett enkelt knapptryck låter oss (eller besökarna!) göra olika bitar osynliga -- eller temporärt ta bort dem helt och hållet från våra sidor!

Sedan lugnar vi ned oss med att se hur man skaffar en gästbok till vår webbplats där besökare kan lämna meddelanden åt oss, och hur man ställer in den så att den ser ut precis så som vi vill ha den. Gästboken är förvånansvärt stor och full med valmöjligheter, så det finns gott om grejor att pyssla med i den.

Klicka här för att gå till lektionen »

 

Fördjupningslektion 2
Bildgalleri och spoilerknappar. I vår andra fördjupningslektion går vi främst igenom hur man kan skapa ett enkelt bildgalleri som automatiskt bläddrar igenom sitt innehåll -- men man kan även låta besökaren själv välja vad som ska visas.

Sedan tar vi en titt på så kallade spoilerknappar. De är litet mer flexibla versioner på de vi skapade i förra lektionen: när man klickat på knappen för att visa något som var gömt så kan man klicka på samma knapp för att visa det igen.

Klicka här för att gå till lektionen »

 

Fördjupningslektion 3
Klassändring. Nu ska vi lära oss hur man kan låta sina besökare ändra utseende på ens sida med ett enda knappklick. Utseendena består av olika klasser, och genom att ge ens olika saker på sidan olika ID:n kan man snabbt och enkelt göra så att en viss knapp ger en namngiven sak en viss klass, medan en helt annan sak kanske får en helt annan klass. När man väl lärt sig hur det fungerar så inser man möjligheterna!

Klicka här för att gå till lektionen »

 

Fördjupningslektion 4
Nu ska vi lära oss hur man infogar filmer på sina webbsidor! Vi ska se hur man får de två mest populära mediaspelarna att samarbeta med ens webbsidor så att man kan baka in dem och låta besökaren styra filmen. Sedan tittar vi närmare på hur man gör för att få mer avancerade JavaScript-funktioner, med egna, separata filer, att fungera som man vill.

Klicka här för att gå till lektionen »

 

Fördjupningslektion 5
 I vår femte fördjupningslektion ska vi ta oss an en av de mest populära nätgrejorna: Flash! Vi har alla sett det i aktion: läckra reklamsnuttar som glider, glöder, piper och visslar. Vi ska se hur vi som användare och webbsidemakare kan använda olika Flash-filer för att roa besökare och underlätta för oss själva med hjälp av widgets och element vi får designa själva med hjälp av olika gratisresurser ute på nätet. Sedan går vi igenom hur man kan skapa en sida som ser ut på ett sätt i en webbläsare men som automatiskt ser helt annorlunda ut när den skrivs ut. Det är ett enkelt sätt att göra utskriftsanpassade webbsidor.

Klicka här för att gå till lektionen »

 

Fördjupningslektion 6
I den här lektionen ska vi se hur vi kan installera och ändra på en väldigt kraftfull sorts bildgalleri som kallas för lightbox. Du kan ha sett dem ute på andra webbplatser; de låter oss bläddra mellan bilder på ett väldigt elegant och smidigt sätt genom att bara klicka på olika knappar eller rent av styra bläddrandet med tangentbordet! Vi går igenom alla finesser som finns att använda i galleriet, och kombinerar dem även med olika saker vi gick igenom i tidigare lektioner.

Klicka här för att gå till lektionen »

 

 

Fördjupningslektion 7
I vår sista fördjupningslektion ska vi först gå igenom en mycket populär och användbar sak som faktiskt finns inbyggd i Dreamweaver -- men som tyvärr är ganska svår att använda. Därmed ska vi göra vår egen, som blir mycket mer hållbar och pålitlig. Jag pratar förstås om utfällbara menyer! Sedan ska vi se hur man ger sin webbplats en personlig touch med hjälp av Faviconer, och hur man skapar en egen sida som visas istället för det vanliga felmeddelandet ifall någon skrivit in fel adress i ens webbplats. Slutligen tar vi en titt på de vanligaste webbplatsstrukturerna man kan använda sig av när man väl börjat göra riktiga webbplatser.

Klicka här för att gå till lektionen »

 

 

 

Frivilliga lektioner

Det finns en del saker som kan vara kul att känna till, men som av någon anledning inte riktigt passar in i de reguljära lektionerna. Det kanske är för obskyrt, eller så kan det vara något bara de med en viss version av Dreamweaver kan använda. Såna saker hamnar här som frivilliga lektioner. Det är alltså lektioner du får läsa själv om du vill.

 

Frivillig lektion 1
Dreamweaver CS4 innehåller Adobes nya webbsatsning, Spry. Det är en blandning av färdiga Java- och CSS-bitar som tillsammans är tänkta att skapa enkla och funktionella widgets man kan sätta in i sina sidor och sen ställa in så som man vill ha dem. Spry är värt att känna till, men det är inte världens enklaste att klura ut hur det fungerar. Därmed ska vi här gå igenom ett par av de vanligaste Spry-objekten: en horisontell samt en vertikal meny som fälls ut när man pekar på vissa val i den. När man väl lärt sig dem kan man alltid ge sig på de övriga Spry-objekten som finns intryckta i CS4. I lektionen medföljer även en noggrann beskrivning på hur man skapar bakgrundsbilder till sina menyer i både Photoshop och det webb-baserade gratisprogrammet SumoPaint.

Klicka här för att gå till lektionen »

 

 

Vanliga frågor om kursen

Här är en samling med svaren på de vanligaste frågorna vi brukar få angående Dreamweaver-kursen.

 

Fråga: jag är inte så van vid datorer / har mycket att göra. Kommer jag att klara av kursen?

Svar: den här kursen är speciellt anpassad för de som inte är så bra på datorer eller som helt enkelt har annat att tänka på, så den börjar från början och går igenom allt man behöver känna till i en stadig takt. Allt tas upp i tur och ordning, och inget rusas igenom. Så chansen är nog god att du också kommer att klara av den!

 

 

Fråga: vilka versioner av Dreamweaver gäller kursen?

Svar: nästan alla! Kursen utformades främst för Dreamweaver CS4, men vi har även gått igenom den med många av de äldre versionerna och ändrat eller lagt till i kurstexten där det behövdes. Så nu ska kursen gå att läsa och följa även med äldre versioner, ända ned till Dreamweaver MX. Det tog stopp vid MX, helt enkelt för att vi inte hade tillgång till äldre versioner än så! Vi kan alltså inte garantera att kursen går att utföra med Dreamweaver 4 och tidigare versioner.

Versionerna det går att göra kursen med är följande:

  • Dreamweaver MX
  • Dreamweaver MX 2004
  • Dreamweaver 8
  • Dreamweaver CS3
  • Dreamweaver CS4

Ju äldre version du använder desto mer kan det bli att pyssla och leta efter olika funktioner, men allt ska fungera även i dem såvida inget annat anges i kurstexten.

 

 

Fråga: kan jag köpa Dreamweaver CS4 till studentrabatt?

Svar: Ja, om du blivit antagen till kursen så kan du köpa Dreamweaver CS4 till studentrabatt. Detta innebär en prissänkning på 80%, vilket sänker priset till omkring 1300 kronor. Detta gäller även dig som inte har något CSN-kort.

Begränsningar: studentversionen finns bara på engelska, levereras utan manual (och installationskod; se nedan), samt att man lovar att inte använda programmet för att skapa sidor åt andra. Annars är det exakt densamma som fullversionen.

Du kan beställa hem en studentversion (kallas ibland även educational version) från olika återförsäljare, t ex www.dustinhome.se eller www.amazon.co.uk (engelska Amazon). Leta bara på "dreamweaver student" eller "dreamweaver education" i butikernas sökrutor så bör den senaste utgåvan av studentversionen dyka upp. Kom ihåg att välja rätt typ: den finns för både Mac och Windows.

Studentversionen levereras utan installationskod, så du kommer att behöva ett digitalt intyg från oss på att du faktiskt går kursen. Du vidarebefordrar intyget till Adobe, Dreamweavers skapare, tillsammans med allt annat de vill ha. När Adobe mottagit detta så e-postar de koden till dig, och du kan använda den för att installera programmet som vanligt.

Men du behöver inte hamna efter om du väntar på din studentversion: du kan alltid ladda ned testversionen av den senaste utgåvan av Dreamweaver från Adobes webbplats, http://www.adobe.com/se/products/dreamweaver.

Testversionen håller i 30 dagar från det att du installerat den, sen måste du antingen skriva in en kod eller köpa programmet. Det går bra att skriva in koden du får från Adobe i testversionen, så blir den till ett "vanligt" Dreamweaver. Det är alltså egentligen koden man betalar för, inte själva programmet!

Studentversionen är precis densamma som standardversionen. Enda begränsningen är att den är på engelska, att du inte får med någon manual, och att du lovar och svär att bara använda programmet för personligt, icke-kommersiellt bruk.

 

 

Fråga: kan man provköra senaste versionen av Dreamweaver?

Svar: ja, du kan ladda ned testversionen av senaste Dreamweaver från Adobes webbplats. Man kan använda den i 30 dagar. Det är särskilt lägligt om man t ex beställt studentversionen och väntar på den.

Testversionen finns att ladda ned här.

 

 

 

Vanliga termer

Om du inte använt dig så värst mycket av datorer förut kan det förekomma en del termer som kan verka lite förvirrande. Här är de vanligaste:

Fil Allt som kan öppnas i ett program är en fil. En bild du får i din e-post är en fil. Webbsidorna vi kommer att spara är filer. Ljud som kan spelas upp på din dator är filer. Man skiljer dem åt genom att kalla dem t ex bildfiler, ljudfiler, och så vidare. Det kommer att bli lite prat om "filformat" senare i kursen. Filformatet avgör hurdan sorts fil det rör sig om. Det låter mystiskt, men vi kommer att gå igenom det noga när vi väl kommer till det.
 
Klicka Ett vanligt klick med vänster musknapp.
 
Dubbelklicka Två snabba klick med vänster musknapp. Var noga med att inte röra musen mellan klicken, annars räknas det bara som två enkla klick! Det är skillnad, förstår du. Det är ofta det felet man gjort när man vet att man dubbelklickat men inget verkar hända.
 
Klicka-och-dra När jag säger "klicka-och-dra" menar jag en procedur som utförs såhär: för muspekaren över det du vill påverka. Håll ned vänster musknapp. För sedan pekaren dit du vill ha den. Släpp musknappen. Sådär!
 
Högerklicka Ett enkelt klick med höger musknapp. Enda gången du använder höger musknapp är när det uttryckligen står högerklicka. Annars är det alltid vänster musknapp som gäller. (Såvida du inte ställt in så att dina musknappar är omkastade, men det vet du ju själv om du gjort.) Man dubbeklickar aldrig med höger musknapp. (Din dator kommer inte att explodera om du gör det,  det finns bara ingen funktion för dubbelklick med höger musknapp.)
 
Shift Ibland kommer jag att vilja att du håller ned tangenten Shift. Jag brukar förklara det rätt ingående i texten, men det är lika bra att ta upp det här med.

Det finns vanligtvis två Shift-tangenter på ditt tangentbord. Båda har en uppåtpekande pil på sig, och är tangenten du håller ned när du vill skriva stor bostav eller tecken som !, ", # och så vidare. Den ena Shift-tangenten finns nedanför tangenten Caps Lock till vänster på tangentbordet, och den andra finns nedanför tangenten Enter.

När jag vill att du håller ned en Shift-tangent spelar det ingen roll vilken av dem du trycker på; använd den som blir bekvämast för dig.
 
Alt Ibland kommer jag att vilja att du håller ned tangenten Alt. Den brukar du hitta till vänster om mellanslagstangenten. Alt är inte samma sak som Alt Gr.
 
Alt Gr Och ibland kommer att vilja att du håller ned tangenten Alt Gr. Den finns till höger om mellanslagstangenten. Det här är inget du behöver komma ihåg, men det kan hjälpa om du vet med dig att du sett var tangenterna sitter när jag börjar prata om dem.
 
Ctrl Det finns två Ctrl-tangenter. (Ctrl är en förkortning på Control, så det är ingen slumpmässig sammansättning av bokstäver!) Dessa finns längst ned till vänster och längst ned till höger på tangentbordet. När jag vill att du håller ned en Ctrl-tangent spelar det ingen roll vilken av dem du håller ned.
 
Enter Enter är förstås tangenten du trycker på när du vill byta rad eller godkänna något. Om det inte står Enter på tangenten känner du igen den genom dess underliga form eller på symbolen som ser ut som en pil som pekar nedåt och åt vänster. Du hittar Enter längst till höger på tangentbordet.

 

 

 

Kontakt

Kursen är skriven och leds av Mats Holmgren för Sverigefinska folkhögskolan och Nätbildarna.

Du når honom på följande e-post-adress:

mats.holmgren@svefi.net