Image: Dreamweaver distance course logo
 
   

Lektion 1: sida 1 av 4

 

 

Till kursens framsida

Sida 2 av 4 »

 

 

 

Lektion 1

Då ska vi sätta igång med den här kursens första lektion!

Här kommer du att få lära dig hur man skapar och förbereder webbplatser och hur Expression Web använder dem. Du kommer även att få se hur man skapar webbsidor och fyller dem med text, samt hur man hämtar, sparar och infogar bilder: allt man behöver för att få en stadig grund att stå på!

I slutet på lektionen kommer en övning som du löser enligt beskrivningen. Men låt inte beskrivningen hindra dig, heller! Du får mer än gärna prova på olika saker utan att vi gått igenom det i kursen, och du får mer än gärna skapa egna sidor på den webbplats vi försett dig med. Det viktiga är att du lär dig det vi gått igenom i kurstexten, och att det tydligt framgår att du gjort det som övningen gick ut på.

Så om du kommer på något som du funderat över men som vi inte gått igenom ännu så är det bara att göra en egen sida där du skamlöst skryter om det inför alla andra. Huvudsaken är förstås att du lär dig använda programmet!

Läs kurstexten i den takt du själv vill, och häng gärna med i kurstexten genom att testa det jag beskriver i ditt eget Expression Web.

Då sätter vi igång!

 

 

 

1. Expression Webs beståndsdelar

När du startar Expression Web så ser programmet ut ungefär som i bilden nedan. Bli inte förskräckt av antalet delar jag pekar ut, de flesta används knappt alls, och när de gör det så talar jag om exakt vad man gör och hur man gör det.

Observera: om du har en nyare version av Expression Web ser det antagligen mer ut som i bilden under denna, men det är mest bara utseendet som skiljer sig åt -- så allt jag skriver i den här kurstexten gäller även de nyare versionerna om jag inte säger något annat.

 

Och om du har en nyare version av Expression Web ser det alltså ut så här: saker är svarta istället för grå. Men det är mest bara utseendet som skiljer sig, allt finns ändå på i stort sett samma ställen -- och där det inte gör det kommer jag att säga till. Så de är i stort sett likadana ändå. Oavsett vilken version du har läser du samma kurstext.

 

 

Beståndsdelarna jag pekat ut i bilderna ovan är de här:

1. Menyraden
2. Verktygsfältet
3. Filpaletten
4. Infoga-paletten
5. Arbetsytan
6. Vyknapparna
7. Stilpaletten
8. Egenskapspaletten

 

1. Menyraden

Högst upp är alla menyerna. En del lär du känna igen från andra program, t ex File och Edit (Arkiv och Redigera på svenska). Vi kommer att titta närmare på menyerna allt eftersom vi går vidare i kursen, men vi kommer inte att gå igenom allt de innehåller -- många av funktionerna är väldigt specialiserade och behöver bara användas vid väldigt särskilda tillfällen.

Något som är värt att nämna här är att när jag vill att du ska gå in på ett särskilt menyval, till exempel valet Open i menyn File, så skriver jag det oftast såhär: gå in på File > Open.

Om jag vill att du ska öppna menyn Insert, ta fram undermenyn HTML och klicka på Horizontal Line så skriver jag såhär: gå in på Insert > HTML > Horizontal Line.

 

 

2. Verktygsfältet

Under menyraden finns verktygsfältet. Det består av ett antal olika knappar och rutor som snabbt låter dig komma åt de vanligaste grejorna man brukar vilja kunna ändra på medan man jobbar med en sida -- t ex en ruta där man får skriva sidans titel, eller en knapp som snabbt låter dig se all kod som finns "bakom kulisserna" på dina sidor, och så vidare. Vi kommer att vilja göra allt det där litet längre fram i kursen, men inte än.

 

 

3. Filpaletten

Rutorna vid sidorna i Expression Web brukar kallas för olika saker i olika program, men ett vanligt samlingsnamn är "paletter". Vi kommer att använda oss av paletterna väldigt mycket i Expression Web, och av alla paletterna är det filpaletten som är den viktigaste.

Det är i filpaletten alla filer din webbplats består av kommer att synas: varje sida du skapat, varje bild du använder, samt allt annat som finns på din webbplats kommer att visas som separata filer i den här paletten.

 

 

4. Infoga-paletten

Här visas de vanligaste av alla komponenter man kan infoga i sina sidor. Det är vanligtvis bara att placera muspekaren ovanpå den komponent man vill ha, hålla ned vänster musknapp, och dra in komponenten i sin sida (detta kallas för att "klicka-och-dra" och är något vi kommer att göra en hel del). Då läggs komponenten in där. Vanliga komponenter är t ex horisontella linjer, lager (som vi kommer till först mot slutet på den här kursen), och liknande. Vi kommer naturligtvis att ta en rejäl titt på den här paletten när det blir dags.

 

 

5. Arbetsytan

Det här är såklart det allra viktigaste i hela Expression Web: arbetsytan. Det är här dina sidor kommer att visas när du öppnat dem och jobbar med dem.

 

 

6. Vyknapparna

Alla webbsidor består egentligen av en mängd kod, men webbredigeringsprogram som Expression Web översätter koden till något som blir litet mer begripligt för oss vanliga användare: vi ser all kod som bilder och text som vi lätt kan ändra på.

Men ibland behöver man komma åt koden som finns "bakom kulisserna" på webbsidan. Då kan man använda sig av vyknapparna. Det finns tre stycken.

 

Vyknappen Design tar fram designvyn, där all kod automatiskt översätts till bilder och text. Det är främst den här vyn vi kommer att jobba i.

Om man däremot vill se koden sidan består av (något vi inte kommer att göra förrän en bit in i den här kursen) så är det Code-knappen som gäller. Då visas all kod. Om man är ovan ser det ut som ett enda virrvarr av text och konstiga tecken, men man lär sig ganska snabbt att hitta bland alla krumelurer.

Och om man vill se båda samtidigt, vilket är vanligast om man vill jobba med koden så att man direkt ser hur ens ändringar påverkar sidans utseende "på riktigt", så är det knappen Split som gäller. Den delar upp skärmen i två sektioner: i den övre halvan visas sidans kod, och i den undre visas designvyn, och man kan hoppa mellan dem som det passar.

 

 

7. Stilpaletten

Här listas de utseenden ("stilar") du skapat och använt i dina sidor.

 

Vi går igenom hur man ändrar utseende på text litet längre fram i den här lektionen, men så snart vi börjat med det kommer du att märka att så fort du gjort en ändring -- t ex ändrat färg eller teckensnitt -- så kommer det att dyka upp en ny rad i den här paletten. Det beror på att varje utseende man lägger till automatiskt sparas som en separat stil.

Och vad är då en stil? Jo, en stil är ett sparat utseende som man kan återanvända gång på gång. Så om du t ex gett ett särskilt textstycke teckensnittet Arial, röd färg, och storleken 14 så kommer den samlingen med ändringar att sparas som en särskild stil i Stilpaletten. Då är det lätt att återanvända den på andra ställen i din webbsida genom att helt enkelt markera den text du vill ge samma utseende och sen klicka på den stilen i Stilpaletten.

Fördelen med detta är att man när som helst kan öppna en sparad stil och ändra i den. Så om du någon gång öppnar en stil och t ex ändrar dess teckenfärg från röd till gul så kommer all text du använt den stilen på automatiskt och omedelbart att ändra färg från rött till gult.

Det låter tjorvigt om man inte är van, men vi kommer att lära oss det här ganska snabbt. Vi kommer alltså att pyssla en hel del med stilpaletten.

 

 

8. Egenskapspaletten

Det här är en grej vi mest kommer att använda oss av i fördjupningskursen (om du väljer att läsa den sen), men det är lika bra att presentera den på en gång så du vet vad det är.

 

Här listas alla egenskaper en viss sak på din sida består av. Om du t ex infogat en bild och klickat på den så ser du här alla egenskaper just den bilden består av: här står dess bredd och höjd, och du kan både ändra på redan existerande egenskaper eller enkelt lägga till egna, t ex ramlinjer och liknande. Det är alltså det den här paletten är till för.

 

 

Sådär! Nu vet vi hur Expression Web ser ut, och vad som finns där. Men innan vi börjar göra något så ska vi först ställa in och förbereda vår webbplats så att den kan ta emot det vi skapar. Det är bara att följa stegen nedan. Det är många steg, och det kan gälla att hålla tungan rätt i mun om du inte är så van vid datorer, men bara du läser noga och följer instruktionerna så ska det lösa sig.

 

 

 

 

Till kursens framsida

Sida 2 av 4 »