Image: Dreamweaver distance course logo
 
   

Fördjupningslektion 7: sida 1 av 3

 

 

Till kursens framsida

Sida 2 av 3 »

 

 

 

Fördjupningslektion 6

Den här fördjupningskursen började med en gästbok, och så här mot sluttampen ska vi titta hur man gör en blogg. Det är rätt passande, för bloggar är som omvända gästböcker: det är bara du som kan skriva i din blogg, andra får bara läsa den.

De flesta har nog hört talas om bloggar idag. Det blev ett stort fenomen väldigt snabbt, så nu finns det bloggar överallt. Kvällstidningar har officiella bloggar, många olika företag har bloggar, organisationer med -- men främst av allt så har ett oräkneligt antal privatpersoner egna bloggar där de skriver om sina intressen eller rent av om sig själva och sina liv. Man bestämmer helt själv vad man vill skriva om -- det finns bloggar om allt från modellbygge till trädgårdsskötsel till polisarbete.

Vi ska nu se hur man gör för att skapa en egen blogg på världens mest populära bloggplats. Det är Google som äger den, så den är lätthanterlig, gratis och säker.

Sedan ska vi se hur man skapar Jump-menyer. Det är en diskret liten ruta man kan använda istället för att ha en lång rad med länkar på sin sida: genom att sätta in länkarna i Jump-menyn istället så sparar man en massa plats, det blir tydligt, och ser dessutom  riktigt läckert ut!

Slutligen tittar vi litet på vad meta-information är och vad man använder det till.

 

 

1. Utfällbar meny

Det finns tonvis med olika menyer att hämta hem från nätet, och alla fungerar på litet olika vis: det finns Flash-menyer som är extra tjusiga och glassiga, och krångliga CGI-menyer. Den meny vi ska titta på är enkel och ganska grov, men fördelen är att den är som en Volvo: den funkar i alla väder, och dessutom behöver inte besökaren förlita sig på extraprogram som Flash Player eller något sådant: om webbläsaren kan se menyn så kan den hantera menyn. Så enkelt är det.

Menyn består av tre olika delar: en samling CSS-stilar som bestämmer utseendet på den, så det blir lätt att ändra på, en mycket liten styrkod som får menyn att fungera, samt ett antal tabeller som tillsammans utgör hela menyn. När allt är på plats och funkar som det ska så blir resultatet så här:

 

 

Inte illa, va? Då sätter vi igång!

 

 

 

1.1. Stilarna

Vi ska börja med att sätta in stilarna som menyn använder sig av så att menyn inte ser helt tokig ut när man klistrar in den. Kopiera de här stilarna:


STILARNA FÖR MENYN



Ett snabbt och enkelt sätt att kopiera den markerade texten
är att hålla ned tangenten Ctrl och trycka på C

 

Först ska vi se efter var du vill ha dem. Vill du ha dem i en formatmall dina sidor använder sig av, så att du kan ha en exakt likadan meny på flera olika sidor utan att behöva klistra in samma stilar flera gånger om? Eller vill du ha dem inbakade i den sida menyn finns i? Du väljer själv, och följer det stycke som beskriver ditt val nedan.

 

 

1.1.1. Sätt in stilarna i en formatmall

Om du valt att sätta in stilarna i en formatmall är det det här stycket du ska läsa. Annars är det stycket efter detta som gäller.

 

0. Markera och kopiera stilarna ur rutan ovan.

 

1. Om du redan har en formatmall i din webbplats och vill klistra in stilarna i den så kan du dubbelklicka på formatmallen i paletten Files så att den öppnas, och gå direkt till steg 3 nedan. Annars, om du inte har någon formatmall men vill skapa en, så gör du så här: gå in på File > New > CSS.

 

Då skapas en ny, tom formatmall.

 

2. Det första du bör göra när du skapat en helt ny formatmall är att spara mallen på en gång så att den får ett namn. Kom ihåg: spara den helst i "roten" -- alltså utanför alla mappar som finns i din webbplats -- och undvik att ge den ett namn med å, ä, ö eller andra dåliga tecken.

 

3. Om du har en sida som är kopplad till din formatmall så kan du gå till steg 4. Men om om du inte har någon sida som är kopplad till mallen får du antingen öppna en sida eller skapa en ny (genom att gå in på File > New > HTML.) Om du skapar en ny sida så bör du spara den på en gång så att den får ett namn, annars blir det bara krångel när du ska koppla den till en formatmall.

Sedan klickar du på Attach Style Sheet i paletten Apply Styles (som, om den inte syns på din skärm, tas fram via Task Panes > Apply Styles)...

 

... och klickar på knappen Browse. Då får du leta fram den mall (Style Sheet på engelska) som sidan ska kopplas till.

 

När du hittat mallen så klickar du på den och klickar sedan på Open.

 

Nu kan du stänga alla öppna fönster.

 

4. Gå in i formatmallen du just skapat och klicka på en tom rad i den (eller tryck på Enter tills du får fram ett par tomma rader)...

 

... och klistra in koden för stilarna där.

 

Men än är du inte klar: du måste även radera raden <style type="text/css"> högst upp i stycket du just klistrade in...

 

... och så måste du radera raden </style> längst ned i stycket.

 

Nu är stilarna inklistrade i en formatmall!

 

 

1.1.2. Sätt in stilarna direkt i en webbsida

Om du hellre vill klistra in stilarna direkt i en webbsida än att klistra in dem i en formatmall så är det det här stycket du följer.

Öppna sidan och ta fram dess kod. Där klickar du in markören till höger om starttaggen <head> i sidan (den finns nära toppen).

Men innan du gör något: som med allt annat vi gjort i den här kursen blir det enklast om du skapar en helt ny sida och bygger upp menyn i den. (Den måste förstås vara kopplad till formatmallen du klistrade in stilarna i, eller ha stilarna inklistrade i sin <head>-sektion, och måste även ha styrkoden inklistrad i <head>-sektionen. Sedan, när menyn väl funkar och ser ut som du vill ha den, så kan du alltid kopiera den ur den sidan och klistra in den där du vill ha den i någon annan sida. (Fast då måste förstås även den sidan ha styrkoden i sin <head>-sektion samt tillgång till stilarna, antingen genom att de också är inklistrade i sidans <head>-sektion eller genom att de finns i en formatmall sidan är kopplad till.)

 

När markören blinkar till höger om <head> trycker du på Enter ett par gånger, så du får ett par tomma rader under den.

 

Sedan klistrar du in stilstycket där.

 

Nu har vi stilarna på plats!

 

 

 

1.2. Styrkoden

Varje sida som ska ha en sån här meny behöver det här kodstycket intryckt i <head>:


STYRKODEN FÖR MENYN



Ett snabbt och enkelt sätt att kopiera den markerade texten
är att hålla ned tangenten Ctrl och trycka på C

 

Gör så här:

 

1. Markera och kopiera styrkoden ovan.

 

2. Öppna sidan som ska ha menyn.

Om du satte in stilarna i en formatmall måste sidan vara kopplad till den mallen.

Och om du klistrade in stilarna direkt i en sidas <head>-sektion så måste det vara just den sidan du klistrar in det här kodstycket i.

 

3. Leta rätt på sidans <head>-tagg (den finns som sagt nära toppen). Klicka in markören till höger om den och tryck på Enter ett par gånger så du får ett par tomma rader under den.

 

4. Klistra in styrkoden där.

 

Klart!

 

 

 

1.3. Menykoden

Varje sida som ska ha en sån här meny behöver den här koden:


MENYKODEN



Ett snabbt och enkelt sätt att kopiera den markerade texten
är att hålla ned tangenten Ctrl och trycka på C

 

Då är det dags att sätta in vår enkla meny.

 

1. Kopiera koden ur rutan Menykoden ovan.

 

2. Öppna sidan du vill ha menyn i och ta fram dess kodvy.

 

3. Klicka till höger om starttaggen <body> och tryck på Enter ett par gånger, så får du ett par tomma rader under den.

 

4. Klistra in koden på någon av de tomma raderna.

 

5. Klicka nere i designvyn...

 

... så har du fått en egen meny!

(Det kan hända att titelraden i din meny ser ut som om den fått en extra rad intryckt i sig, så den ser extra tjock ut. Det är bara en egenhet som syns i designvyn: när du publicerat sidan, eller förhandsgranskar den, så försvinner den extra raden.)

Den är ju inte så snygg, men som tur är så kan man byta utseende på den. Det är lätt gjort! Vi bara ändrar i stilarna vi just klistrade in -- för oavsett om de befinner sig direkt i sidans <head>-sektion eller om de finns i en formatmall som sidan är kopplad till så visas de nu i paletten Apply Styles.

Vi går igenom vad stilarna gör, och sen visar jag hur jag gör för att byta utseende på menyn med hjälp av dem.

Det blir litet repetition av vad vi just gått igenom i början, men det är så att genomgången blir komplett.

 

 

 

1.4. Menyns olika stilar

Menyns utseende är uppbyggd av ett antal stilar. De är inte många, så de bör vara enkla att hålla reda på. Dessa stilar är:

 

a.menylank:link, a.menylank:visited, a.menylank:active
Dubbelklicka på den här stilen och gå in i kategorin Type för att ändra på hur länkarna ska se ut när ingen gör något med dem. Du kanske märker på stilens namn att hela tre utseenden för menyns länkar är samlade i en enda stil: utseendet för en normal länk i menyn (menylank:link), utseendet för hur en menylänk ska se ut när någon redan besökt den (menylank:visited), samt utseendet för hur en länk i menyn ska se ut när någon just klickat på den (menylank:active). Det är numera standard att de tre utseendena ser likadana ut, så jag har samlat ihop dem i en klump. Det betyder att de ändringar du gör i den här stilen kommer nu att ge menyns länkar exakt samma utseende under alla tre situationer: när ingen gör något med dem, när någon varit in på den sida länken leder till, och när någon just klickat på dem.

Notera att all text i hela menyn är länkar, inklusive "huvudvalen" -- de man pekar på för att få fram menyerna -- så all text i menyn får de utseenden du bestämmer här och i nästa stil.

 

a.menylank:hover
Det fjärde utseendet för menyns länkar (de tre första -- link, visited och active -- tar ju den föregående stilen hand om) är hur länkarna ska se ut när någon pekar på dem. Dubbelklicka på stilen och gå in i kategorin Type för att ändra hur länken ska se ut när någon pekar på dem. Vanligast är att bara ändra färg (i det här fallet blir länken man pekar på vit) och textdekoration (just nu är den inställd på none, men ofta brukar man välja underline som gör att en linje dyker upp under länken när man pekar på den).

 

.kolumnbredd
Den här stilen bestämmer hur breda tabellens kolumner ska vara. Dubbelklicka på den här stilen och gå in i kategorin Box, så ser du i rutan Width ("bredd") hur bred varje kategorin i menyn ska vara. Just nu är den inställd på 150 pixlar, men du kan alltså ändra bredden till vad du vill.

 

.huvudval
Här bestämmer du vilken bakgrundsfärg de översta länkarna i menyn ska ha. Det gör du genom att dubbelklicka på stilen .huvudval och gå in i kategorin Background. Då kan du klicka i färgrutan där och välja en annan färg.

Varje huvudval i menyn har dessutom fått en pixels mellanrum mellan sin tabellrutas kant och själva länken, eftersom detta gör så att länken inte är helt tryckt mot vänsterkanten. Om du vill ändra på mellanrummets storlek (eller ta bort det helt) kan du göra det i kategorin Box, i sektionen Padding. Det blir enklast om du låter rutan Same for all vara förbockad. Då kommer alla ändringar du gör i den översta rutan där ("Top") att bli exakt likadan på alla sidor i huvudvalens rutor.

 

.underval
Den här stilen bestämmer över själva menyernas bakgrundsfärg. Dubbelklicka på stilen och gå in i kategorin Background, så ser du en färgruta där. Klicka i den så får du välja vilken färg menyerna ska ha.

 

.table.menyval
Den här stilen bör du bara gå in i när du ska jobba med menyn. Då kan du dubbelklicka på .table.menyval och gå in i kategorin Positioning. Där ställer du parametern Visibility till Visible. Då kommer menyerna att synas. Sedan, när du är klar med menyn och ska publicera den, så måste du ändra Visibility till Hidden igen. Då göms varje meny tills man pekar på dess huvudval.

 

 

 

1.5. Mats sätter in en meny i sin sida

Jag har en ny, tom sida. Det första jag gör är att spara den med namnet "menysidan.htm".

 

Sedan skapar jag en ny, tom formatmall genom att gå in på File > New> CSS. (Fast det går förstås bra att använda både sidor och formatmallar som det redan finns grejor i).

 

Då får jag fram en tom formatmall. Det första jag gör är att spara den. Jag ger den namnet "menystilar.css". Det är viktigt att mallen får ett eget namn så snart som möjligt (och du får naturligtvis döpa den till vad du vill, men undvik å, ä, ö som vanligt).

 

Jag kopplar min nya sida till formatmallen menystilar.css genom att öppna sidan och klicka på Attach Style Sheet i Apply Styles-paletten.

 

Då får jag välja vilken formatmall i min webbplats jag vill koppla sidan till. (Om det inte finns några mallar att välja i rutan URL så kan man klicka på Browse-knappen och bläddra sig fram till den mall man vill använda.)

 

Jag väljer förstås menystilar.css.

 

Nu ska jag börja med att klistra in stilarna, så jag kopierar de som finns i rutan i "Stilarna" högre upp på den här sidan. Sedan klistrar jag in dem på en tom rad i formatmallen...

 

... och tar bort <style type="text/css"> högst upp samt </style> längst ned.

 

Då är det dags att sätta in menyns styrkod i sidan. Jag kopierar koden som finns i rutan i stycket Styrkoden högre upp.

Sedan öppnar jag den sida som ska innehålla menyn och klickar på vyknappen Split (Dela). Då visas ju sidans kod i skärmens övre halva, och designläget i den nedre. Jag letar rätt på starttaggen <head> nära toppen i sidans kod och trycker in ett par tomma rader under den.

 

Sedan klistrar jag in styrkoden på någon av de tomma raderna.

 

Sådär! Nu ska jag sätta in själva menyn. Jag kopierar koden som finns i rutan Menykoden högre upp och går tillbaka till sidans kodvy. Där trycker jag in ett par tomma rader under starttaggen <body>...

 

... och klistrar in menykoden där.

 

Om jag nu klickar nere i designvyn...

 

... så har jag fått en fullt fungerande meny!

(Om du inte ser själva menyerna under titlarna på den oranga raden så behöver du göra en liten inställning i Expression Web: gå in på View > Visual Aids och se till så att åtminstone valet CSS Visibility:hidden elements är förbockat.)

 

Menyn ser någorlunda okej ut eftersom den hämtar sitt utseende från stilarna jag satte in i formatmallen (som jag sedan kopplade sidan till). Om jag hade klistrat in stilarna i sidans <head>-sektion hade det funkat lika bra, men då hade jag behövt göra så för varje sida som skulle ha menyn, vilket snabbt hade blivit en pina ifall jag behövde ändra något i den. Nu när stilarna finns i en formatmall alla sidor som ska ha menyn är kopplade till så går det däremot som en dans.

Om jag hade klistrat in menyn i sidan innan jag satte in stilarna (oavsett om det var i formatmallen eller <head>-sektionen) så hade menyn sett ut som en katastrof.

Det första jag gör nu är att ändra på menyns utseende.

 

 

 

 

Till kursens framsida

Sida 2 av 3 »