DISTANSKURS I EXPRESSION WEB

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

Den här kursen går igenom allt du behöver känna till för att kunna använda Expression Web 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.

Den här kursen har slutat ledas från och med 16 december 2012. Kursmaterialet nedan är numera fritt att läsa för vem som helst, men jag kan inte bistå med handledarhjälp om du stöter på problem. Kursmaterialet kommer att vara tillgängligt tills det inte går att använda längre.

I grundkurslektion 1 står att du får tillgång en kurswebbplats som du kan ladda upp dina övningswebbsidor till. Detta gäller förstås inte längre. Om du har en egen webbplats kan du däremot använda den istället. Det finns även gratis webbplatser du kan skaffa. Googla på "gratis webbhotell" eller liknande.

Allra sist i varje lektion, efter övningarna, finns en beskrivning på hur du skickar in en länk till dina övningsresultat till kursens FirstClass-forum. Detta gäller inte längre.

Jag som skrivit och lett den här kursen heter Mats Holmgren. Jag har även skrivit samt leder distanskurser inom Photoshop, Dreamweaver och SketchUp via Nätbildarna och Barents hus AB.

Mvh,
Mats Holmgren
Sverigefinska folkhögskolan
mats.holmgren@svefi.net

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 som du hittar i kursens FirstClass-konferens.

Kursen innehåller sju grundlektioner och sju fördjupningslektioner.

Lektion 1
Vi börjar den här grundkursen med att gå igenom Expression Webs 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 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. Sedan tittar vi på hur man skapar så kallade bokmärkeslänkar. Men det lektionen i huvudsak handlar om är hur man skapar 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
Här ska vi titta på grunderna i HTML-kodning: hur man programmerar 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 låter en visa flera webbsidor på samma gång -- den kallas inlagda ramar. Dessutom ser vi hur man infogar Youtube-filmer på sina sidor, något som förstås är väldigt vanligt idag.

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

Lektion 6
I vår näst sista grundkurslektion 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ördjupningslektionerna kommer inte att vara lika spretiga som grundkursens, utan kommer istället att koncentreras på ett eller ett par fastslagna resultat samt, förstås, hur man skapar det i Expression Web. Med "fördjupning" menas att vi främst bygger vidare på sakerna vi lärde oss i grundkursen -- vi lärde oss t ex grunderna i CSS där, så här går vi vidare till litet mer avancerade funktioner. Vi tittar även på några litet friare saker du kan ha nytta av när du bygger en egen webbplats, t ex hur du infogar saker som gästböcker, Flash-innehåll, med mera. Något vi däremot inte går igenom här är saker som php, databashantering, och liknande ämnen som egentligen skulle kräva helt egna kurser.

Fördjupningens övningar är mer ingående och kräver en del tid. Som tur är så kommer hela grundkursen att vara tillgänglig om du behöver fräscha upp minnet, och dessutom kommer jag förstås att gå igenom precis allt som behövs för att klara av övningarna.

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 gömma 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.

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: 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 »

Vanliga frågor om kursen

Här är en samling med svaren på de vanligaste frågorna vi brukar få angående Expression Web-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 Expression Web gäller kursen?

Alla! Kursen utformades med Expression Web 1, men i takt med att nyare utgåvor dykt upp så har kursens innehåll förnyats. Så nu ska kursen gå att läsa och följa med alla versioner, från 1:an till och med 3:an.

Fråga: kan jag köpa Expression Web till studentrabatt?

Svar: Nej! Men om du har ett CSN- eller Mecenat-kort så kan du faktiskt ladda ned senaste versionen av Expression Web helt gratis! Läs mer om detta här:

http://www.csn-kortet.se/studentrabatter/datorprodukter/programvaror/microsoftutvecklarverktyg

Vi som inte har CSN-kort får däremot hålla oss till köpesversionen. Men som tur är så är den inte så farligt dyr, åtminstone inte i programsammanhang: den kostar ungefär 1200 - 1600 kr. Var bara noga med att inte blanda ihop den med Expression Studio, som är ett samlingspaket och därmed betydligt dyrare!

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

Svar: ja, du kan ladda ned testversionen av senaste Expression Web från Microsofts webbplats. Man kan använda den i hela 60 dagar (dubbelt så länge än standardtiden för testversioner) innan den "tar slut". För att kunna fortsätta använda den måste du köpa programmet.

Testversionen finns att ladda ned här. Klicka på "Download Trial".

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