 |
|||||||||||||||||||||
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:
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.
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>:
Gör så här:
Klart!
1.3. Menykoden Varje sida som ska ha en sån här meny behöver den här koden:
Då är det dags att sätta in vår enkla meny.
... 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:
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.
|
|
||||||||||||||||||||
