Image: Expression Web distance course logo
 
   

Lektion 2: sida 1 av 3

 

 

Till kursens framsida

Sida 2 av 3 »

 

 

 

Lektion 2

I kursens andra lektion kommer vi att gå igenom resten av grunderna i vad man kan behöva känna till för att skapa en webbsida. Det kommer att handla om enkla saker som hur man infogar linjer och liknande, men vi kommer även att ta upp mer komplicerade saker som hur man anpassar en bild för att visas på nätet, och vad man måste tänka på då.

Och angående bilder så kommer du även att få stifta närmare bekantskap med ett mycket användbart galleri där det finns bokstavligen tusentals olika proffsfoton som är helt fria att användas.

I och med nästa lektion börjar vi ge oss på det litet mer avancerade sätten att designa webbsidans innehåll. Men först ska vi alltså gå igenom grunderna, och det är ju det vi ska göra här.

 

 

 

1. Skapa en ny sida

Det här gjorde vi redan i lektion 1, men då valde programmet själv namn åt vår sida: den fick namnet default.htm (eller default.html).

Men det är bara för att varje webbplats måste ha en plats som heter antingen default eller index -- den blir automatiskt webbplatsens "framsida". Utan den funkar inte webbplatsen som det är tänkt.

Men hur gör man för att skapa nya sidor utöver default- eller index-sidan? Det är ingen större svårighet:

Klicka en gång med höger musknapp någonstans där det är tomt i Folder List-paletten. Då visas en meny. Välj där valet New > HTML.

 

När du klickat på det valet så läggs en ny, tom webbsida in i din lokala webbplats (vars innehåll automatiskt visas i paletten Folder List, som vanligt). Eftersom alla sidor måste heta någonting och ha ändelsen .htm eller .html (det finns andra ändelser med, men de är inte aktuella än) så får sidan automatiskt ett namn. I Expression Web döps de vanligtvis till Untitled_1.htm, t ex ("untitled" betyder "obetitlad").

 

Då kan man byta namn på den. Om sidans namn är mörkt så är det bara att sudda ut Untitled_1 och skriva något eget namn där (men undvik att sudda bort punkten och filändelsen i slutet på namnet: om du råkar sudda ut dem måste du skriva in dem igen!).

Om du redan hunnit klicka någonstans så att den nya sidans namn avmarkerats kan du högerklicka på den, så visas en meny. Välj där Rename (som ju betyder "döp om").

 

Då markeras sidans namn igen, och då kan du skriva in något eget där.

 

Oavsett hur du gjorde för att skriva in ett nytt namn åt sidan så godkänner du namnändringen genom att antingen trycka på Enter eller genom att klicka någonstans där det är tomt i Folder List-paletten.

 

Kom ihåg att inte använda å, ä eller ö, inga mellanslag och inga extra punkter förutom den som skiljer sidans namn från dess ändelse.

Om du vill ha mellanslag i sidans namn kan du med fördel använda tecknen - eller _. Varför gjorde man så? Jo, det är mest en kosmetisk grej: i vissa webbläsares adressfält skrivs fortfarande mellanslag som "%20" och t ex bokstaven "ö" som "ä", webbläsarnas "översättning" av de två tecknen -- så om min sida får namnet...

"mats ölhävarlåtar.htm"

 

... och någon besöker den så är risken stor att det kommer att stå...

"mats%20öhävarlåtar.htm"

 

... uppe i webbläsarens adressfält hos besökaren.

Webbläsaren översätter alltså de okända tecknen mellanslag samt å, ä och ö till webbspråkets motsvarigheter. Det är inte så smidigt ifall någon t ex vill skriva ned adressen för hand. Och det är faktiskt mest därför man tänker på att undvika mellanslag samt å, ä och ö -- det är inte som om sidan blir trasig om man glömmer det.

 

 

 

2. Ta fram olika verktygsfält

De allra vanligaste knapparna man behöver för att skapa och ändra i sina webbsidor finns under menyraden.

Men ibland kan man vilja ha tillgång till litet mer ovanliga knappar, t ex en knapp som tar fram sökfunktionen på ett snabbt och bekvämt sätt istället för att man ska behöva börja rota i menyer.

I så fall kan man ta fram det verktygsfält man tycker behövs. Du kan lätt trolla fram alla möjliga olika verktygsfält genom att högerklicka på verktygsfältet alldeles under menyraden. Då får du fram en liten meny. (Du behöver högerklicka på någon knapp som finns där, inte på någon av textrutorna.)

 

Då får du fram en meny som visar alla verktygsfält du kan välja att ta fram. Det vanligaste verktygsfältet man brukar vilja lägga till heter Standard, så det är det vi ska titta på nu. Övriga verktygsfält är i regel väldigt specifika, så de blir nog inte intressanta för dig förrän du väl börjat pyssla med sånt som har med dem att göra.

Jag klickar alltså på valet Standard i menyn som dykte upp.

Då öppnas det här verktygsfältet:

 

Det är inte alltid verktygsfält man öppnar på det här viset hamnar precis där man vill ha dem. Men som tur är så är det lätt att flytta på dem. Om jag t ex vill flytta in verktygsfältet Standard under det normala verktygsfältet strax under menyerna så är det bara för mig att peka på det nya fältets namn ("Standard") och klicka-och-dra det in i det andra verktygsfältet.

 

Eftersom verktygsfältet Standard kan vara riktigt användbart så ska vi gå igenom vad det innehåller. Det finns fler knappar i Standard-verktygsfältet än de vi tittar på just nu, men de är såna som har mer speciella användningområden. Vi hoppar över dem tills de behövs. Vi går igenom följande knappar nu:

Observera att inte alla dessa knappar nödvändigt finns i din version av Expression Web. De flesta är ändå mest en genväg till ett menykommando, så om du saknar en knapp i ditt Standard-verktygsfält så är det inte hela världen.

2.1. Find
2.2. Publish Site
2.3. Stavningskontroll
2.4. Cut, Copy, Paste (Klipp ut, kopiera, klistra in)
2.5. Format Painter
2.6. Undo och Redo
2.7. Insert Image
2.8. Insert Hyperlink

 

 

2.1. Find. Find betyder "hitta", och du kan använda den här knappen för att leta rätt på särskilda ord i din sida. Det kanske inte är så värst användbart just nu, men när du väl börjat fylla dina sidor med mycket information och snabbt vill kunna hitta något särskilt i dem så kommer Find-funktionen att bespara dig en hel del tid.

När du klickar på Find-knappen så får du upp ett fönster som innehåller tre flikar. Dessa låter dig leta efter olika saker, och göra olika saker med de saker som hittas. Just nu är det bara två av dessa flikar som är av intresse för oss: Find och Replace. Den tredje fliken blir inte intressant förrän långt senare i den här lektionen.

Så om jag har en sida med en himla massa text på...

 

... och vill hitta ordet "hej" någonstans i texten så kan jag klicka på knappen Find. Då dyker ju fönstret med samma namn upp. Där ser jag till så att fliken Find är intryckt, så visas textrutan Find what (alltså "Hitta vad"). Om jag då skriver in hej i rutan och klickar på knappen Find...

 

... så letar sökfunktionen upp det första ordet som börjar med "hej" i sidan.

Då kan du alltid stänga fönstret om du vill göra något särskilt med det ordet. Annars, om du vill fortsätta leta efter samma ord, kan du klicka på Find Next, eller byta ord i rutan Find what och söka på det istället.

 

Det finns en flik som heter Replace med. Replace betyder "ersätt" och är en utbyggnad av Find. När du klickar på den här fliken läggs en ny ruta till vid sidan om Find what. Den nya rutan heter Replace with, som betyder "Ersätt med".

Jag har skrivit "hej" i rutan Find what. Om jag nu skriver "hejsan" i rutan Replace with så betyder det att Find-funktionen nu kommer att leta efter ordet hej i sidan och ersätta det med ordet hejsan.

Om jag vill ersätta samtliga förekomster av ordet "hej" i sidan kan jag klicka på knappen Replace all (alltså "Ersätt alla"). Då byts alla förekomster av "hej" ut mot "hejsan". Om jag däremot inte är säker på att alla förekomster av "hej" ska bytas ut kan jag klicka på "Find next" istället. Om jag vill hoppa över det "hej" som hittas då så kan jag klicka på Find next igen, men om jag vill byta ut den mot hejsan kan jag klicka på Replace.

 

Det finns fler finesser i det här fönstret, men de är inte så viktiga att känna till. Lek gärna runt med dem ifall du vill!

 

 

2.2. Publish Site. Det här är nog en av de mer användbara knapparna: när du klickar på den här så öppnas publiceringsrutorna där du kan peka ut vad som ska kopieras ur din lokala webbplats och klistras in i den som finns på nätet.

 

 

2.3. Spelling. Spelling betyder "stavning". Klicka här för att göra en stavningskontroll på din sida.

 

 

2.4. Cut, Copy, Paste (Klipp ut, kopiera, klistra in). De här knapparna är genvägar till Cut, Copy och Paste-funktionerna (Alltså "Klipp ut", "Kopiera" och "Klistra in".) De fungerar exakt likadant, så för att kunna klippa ut eller kopiera något måste du först ha markerat det (eller klickat på det, om det är en bild).

 

 

2.5. Format Painter. Det här är en litet speciell funktion som inte alla tycker om, men om man lär sig använda den så kan den bespara en en hel del tid.

Vi säger att jag har litet text som ser ut så här...

 

... och jag vill att texten på den nedre raden ska se likadan ut som den stora, röda texten. Då kan jag markera texten jag vill kopiera utseendet från (eller bara klicka in markören i den) och klicka på knappen Format Painter.

 

Sedan kan jag antingen klicka på ett enskilt ord om jag vill att bara det ska se ut så...

 

... eller markera de ord jag vill ska se ut så. När jag släpper musknappen efter markeringen så läggs utseendet in på det som markerades. (Notera att du behöver göra om stilkopieringen först; den försvinner när du väl lagt in den en gång.)

 

 

2.6. Undo och Redo. Undo ("Ångra") är den vänstra pilen, och med den kan du ångra ditt senaste inlägg i sidan. Du kan ångra upp till 50 av dina senaste inlägg, så man har ganska stort spelrum här. Med inlägg menar jag allt som påverkar hur sidan ser ut, t ex text du skrev in eller en bild du infogade. Du kan även ångra genom att gå in på Edit > Undo (Redigera > Ångra).

Redo (Gör om) är den högra pilen, och med den kan du ångra det du just ångrade! Så om du använt Undo för att ta bort en bild, men vill ta tillbaka bilden igen, så kan du välja Redo. Då slipper du infoga bilden igen. Du kan även göra om något genom att gå in på Edit > Redo (Redigera > Gör om).

 

2.7. Insert Picture from File. Den här knappen fungerar exakt som när man går in på menyvalet Insert > Picture > From File, som vi gjorde i förra lektionen. Så istället för att gå in på det menyvalet räcker det med att klicka på den här knappen.

 

 

2.8. Insert Hyperlink

Den här knappen använder man när man vill göra något man markerat till en länk. Vi kommer att använda den litet senare i den här lektionen.

 

 

 

3. Enkla objekt

Det finns ett antal enkla objekt som fortfarande hänger kvar sen den grå forntiden, och som man fortfarande alltså kan använda i sina webbsidor. De vi ska se på nu kallas Horizontal Rule (eller Vågrät linje), Date (eller Datum) samt Symbols (Symboler).

 

3.1. Horizontal Rule (Vågrät linje)

Öppna en sida (eller skapa en ny) och tryck in några tomma rader i den.

Vi ska nu börja lägga in litet grejor i våra sidor som varken är text eller bilder. De kallas för "objekt". Det allra enklaste objektet kallas för Horizontal Line, eller vågrät linje. Och det är precis vad det är: en vågrät linje.

Linjen används som avskiljare mellan t ex kapitel om man skriver mycket text. Man använder dem inte så värst ofta nu för tiden, men det är en bra plats att börja på. Så nu ska vi se hur man infogar och ställer in en vågrät linje (eller flera) i sin sida.

Klicka på den rad i din sida där du vill ha linjen tills markören blinkar där.

Gå sedan in på menyn Insert > HTML > Horizontal Line.

 

Då läggs en vågrät linje in där markören var:

 

Så svårt var alltså det!

För att ändra utseende på linjen kan man alltid dubbelklicka på den (alltså klicka två gånger jättesnabbt), eller högerklicka en gång på den så att en meny dyker upp. Då kan man välja Horizontal Line Properties.

 

Då visas det här fönstret:

 

Width (bredd), Percent of window och Pixels. Klicka i rutan för Width så får du bestämma hur bred linjen ska vara. Bredden här beror på hurdant mått du valt för linjen: Percent of window (procent) eller pixlar.

En bredd som mäts i procent gör så att linjen automatiskt anpassar sig efter besökarens webbläsare: oavsett hur bred eller smal den är så är linjen alltid att vara det angivna procentvärdet bred. Exempel: Jag har en linje som jag gett en bredd på 80%. Det betyder att den alltid kommer att ta upp en bredd som är exakt 80% av besökarens webbläsare. Ifall han eller hon gör sin webbläsare smalare eller maximerar den så kommer linjen att hänga med och öka eller minska i bredd.

En bredd som mäts i pixlar har däremot en fast bredd som aldrig ändras oavsett hur besökarens webbläsare ser ut. Exempel: Jag har en linje som jag gjort 200 pixlar bred. Då spelar det ingen roll hur bred eller smal besökarens webbläsare är: min linje kommer alltid att vara exakt 200 pixlar bred.

Det finns inget rätt eller fel här, utan det räcker att hålla sig till det man tycker blir bäst. Jag ställer in så min linje blir 250 pixlar bred.

 

Height (höjd). Här anger man hur tjock linjen ska vara. Jag låter linjen vara 2 pixlar hög.

 

Alignment (justering) bestämmer var på raden den vågräta linjen ska vara. Om linjens bredd är inställd på 100% så spelar det ingen roll, men om den är kortare än så -- och alltså har litet utrymme att flytta sig på -- så kan du använda den här rutan för att placera linjen längst till vänster (Left), i mitten (Center) eller längst till höger (Right). Precis som med text, alltså. Jag ställer in att min linje ska placeras i mitten på sidan.

 

Color (färg). Klicka i rutan Color för att välja vilken färg linjen ska ha. Om du låter färgen vara inställd på Automatic, som den är från början, så kommer linjen att bli helt "genomskinlig" vilket inte alltid är så kul.

Men du kan alltså själv välja vilken färg linjen ska ha genom att klicka i rutan Color. Du väljer färg på precis samma sätt som när du t ex väljer färg för text. Jag gör min linje läckert lila.

 

Solid line (solid linje). Det här är en jätteläcker 3D-effekt! Om du kisar jättenära på linjens underkant och klickar ett par gånger i den här rutan, så den bockas av och på ett par gånger, så kanske du ser att när rutan är förbockad så blir linjen litet mörkare på undersidan! Läckert, va? Jag låter rutan vara avbockad....

 

När man är klar med inställningarna är det förstås bara att klicka på OK.

 

 

 

 

3.3. Infoga symboler

Man kan infoga symboler i det man skriver. Här är ett par vanliga symboler som exempel:

© • « ¥ ® ™

 

 

Här har jag litet text. Jag vill lägga in en Copyright-symbol där markören blinkar.

 

Då går jag in på Insert > Symbol.

 

Då öppnas ett fönster som innehåller en mängd olika symboler.

Om texten på din sida skrivs i teckensnittet Verdana, t ex, och vill infoga en symbol i sidan så kan du göra så att även symbolen skrivs i just Verdana. I så fall är det bara att klicka i rutan Font uppe till vänster och välja teckensnitt där.

Subset, rutan uppe till höger, behöver man inte bry sig om: den visar bara vilken underkategori av tecken den symbol man väljer tillhör.

Då är det bara att leta rätt på en symbol man vill ha, och när man hittat den kan man klicka på den och sen klicka på knappen Insert...

 

... så läggs symbolen in där markören blinkar i sidan.

 

 

 

4. Gör en säkerhetskopia på din sida

Om du har en sida som du är nöjd med, men som du ändå vill jobba vidare med, så lönar det sig att göra en säkerhetskopia på din sida så att du inte sabbar den helt ifall du råkar göra fel.

Vi säger att du har en sida som heter apburen.htm. Du är helnöjd med den, men vill ändå göra något mer i den. Då vore det dumt att riskera det du redan gjort -- det är dags för en säkerhetskopia!

Du kopierar sidan genom att högerklicka en gång på den i paletten Folder List. Då visas en meny. Där kan du välja Copy.

 

Sedan klistrar du in en kopia på sidan genom att högerklicka någonstans där det är tomt i Folder List-paletten. Då visas en annan sorts meny. Välj där valet Paste (som ju betyder "Klistra in").

 

Då dyker en kopia på sidan apburen.htm upp! Kopian får automatiskt namnet apburen_copy(1).htm.

 

Det betyder att du nu kan fortsätta att mixtra med sidan apburen.htm utan att oroa dig för något. Ifall du råkar göra något riktigt allvarligt fel i sidan apburen.htm som inte går att ångra bort (du kanske råkade spara sidan med felet i -- nästa gång du öppnar sidan går det i så fall inte att ångra bort felet) så är det bara att radera sidan.

Sedan kan du göra en kopia på apburen_copy(1).htm, på samma sätt som ovan, och klistra in den på samma ställe. Döp om den nya kopian till apburen.htm, så har du återgått till hur den var innan. Då har du alltså bara förlorat det du gjorde senast, och har dessutom fortfarande kvar din säkerhetskopia.

Många brukar vara slarviga med säkerhetskopior, men det straffar sig alltid. Programmet kan krascha, eller så sitter du uppe klockan halv fyra på natten och gör fel utan att märka det, och nästa gång du öppnar sidan börjar du gråta. Sånt händer! Så var noga med att göra säkerhetskopior när du tycker att det behövs. Det finns alltid plats för fler.

Ett tips är att du skapar en mapp i din lokala webbplats där du sätter dina säkerhetskopior, så är de inte i vägen. Det snabbaste sättet att skapa en mapp är att högerklicka i Folder List-paletten och välja valet New folder (Ny mapp). Då skapas en ny, tom mapp som du kan döpa som vanligt. Sen kan du snabbt och enkelt bara dra in de filer du vill spara i mappen. Allt detta sker direkt i Files-paletten.

Notera att i vissa fall kan du inte radera filer från den webbplats du fått i samband med kursen. I så fall kan du skapa en tom mapp som du t ex döper till "skräp". Dra in allt du vill slänga i den, och säg till mig när du vill tömma den så går jag in i din webbplats och raderar allt som finns i skräp-mappen.

 

 

 

 

Till kursens framsida

Sida 2 av 3 »