Lektion 5: sida 1 av 3

 

 

Till kursens framsida

Sida 2 av 3 »

 

 

 

Lektion 5

Vi fortsätter med att infoga saker på våra sidor. Nu ska vi se hur man designar sina egna interaktiva knappar, som fungerar som tjusiga länkar, och hur man får dem att fungera.

Därefter lär vi oss hur man gör miniatyrer av sina bilder, infogar en rullande remsa, samt något som blir mer och mer populärt: hur man infogar filmer från Youtube rakt in på din webbsida, komplett med filmkontroller och allt!

Slutligen tittar vi på olika sorters ramar. En ram är i webbsammanhang en bit på ens sida som fungerar som ett "hål" genom vilket man kan se en annan sida! Ramar var väldigt populära för ett par år sen, men nu har det lugnat ned sig på den fronten. Kvar är den minsta och snällaste av ramarna, som kallas för "iframe". Vi ska se hur man skapar en sådan och får den att fungera.

Det här blir alltså en ganska lättsam lektion med mycket matnyttigt för dig som är intresserad av att skapa egna grejor, ofta i samarbete med ett grafikprogram. Om du inte är så intresserad av det finns det ändå mycket att hämta här för dig med. Från och med nästa lektion blir det litet tyngre grejor att prova på.

Till sist försöker vi få användning av det mesta här i veckans övning.

 

 

1. Interaktiva knappar

Nu ska vi skapa knappar! Dessa fungerar som länkar, men ser roligare ut. Det som gör dem "interaktiva" -- alltså att de reagerar på att du gör något -- är att de ändrar utseende när du för pekaren över dem (och när du klickar på dem).

Här är tre interaktiva knappar som skapats med hjälp av Expression Webs inbyggda knappdesign-program. Prova att peka på knapparna och klicka på dem. Just de här knapparna leder ingenstans, men när du skapar dina egna knappar får du göra dem till exakt hurdana länkar du vill.
 
Här är en knapp   Här är en till   Och ännu en!

 

Du kanske lägger märke till en prickig ram runt knapparma när du klickat på dem. Ren prickiga ramen visar var fokuset ligger, så om man trycker på Tab tills en knapp fått fokuset på sig och då t ex trycker på mellanslagstangenten så är det samma sak som att klicka på den knappen. Fokuset är till för att underlätta för t ex synskadade.

Man kan stänga av fokusramen, men bör egentligen inte göra det, för när t ex någon som är synskadad tabbat sig fram till en knapp som fått fokusramen avstängd så kommer hans eller hennes webbläsare att tro att det inte finns något mer att klicka på på den sidan och börja om från början istället, även om det kanske finns fler klickbara saker längre ned på sidan. Det är ju inte så bra.

Men det finns en kompromiss som underlättar för alla inblandade: en liten kodsnutt man kan lägga till som får ramen att försvinna efter att man klickat på länken, knappen eller bilden. Det tittar vi på i en senare lektion, men nu vet du att går att fixa till i alla fall!

Varje knapp består i huvudsak av tre bilder: en som visas när du inte gör något särskilt med knappen, en som visas när du för pekaren över knappen, samt en som visas när du klickar på knappen. Bilderna skapas automatiskt, du väljer bara själv hur knappen ska se ut.

För att skapa och infoga en interaktiv knapp i din sida så klickar du först där du vill ha knappen (fast det går alltid att flytta på den efteråt genom att klicka-och-dra mitt på den, precis som när man t ex flyttar bilder eller markerad text).

Sedan går du in på Insert > Interactive Buttons.

 

Då får du upp ett fönster som heter just Interactive Buttons.

Lägg märke till att fönstret består av tre flikar: Button, Font och Image. (Det betyder ungefär Knapp, Teckensnitt och Bild.)

När man väl börjat skapa en knapp bör man gå igenom alla tre flikarna innan kan klickar på OK, annars blir knappen bara halvfärdig.

Vi börjar med fliken Button.

 

 

1.1. Interactive buttons: fliken Button

 

Preview (Exempel). Prova att föra pekaren över knappen och klicka på den i rutan Preview högst upp. Då får du se hur knappen beter sig just nu. I takt med att du väljer olika saker kommer knappen att bete sig olika. Det är alltså här du kan testa hur knappen kommer att se ut när besökaren pekar och klickar på den.

Buttons (Knappar). Välj i listan Buttons hur knappen ska se ut. Här finns massvis med olika former och färger. Det är bara att klicka på ett val så ser du i Preview-rutan hur den kommer att se ut.

Text. Skriv i rutan Text vad det ska stå på knappen.

Link (Länk). Här skriver du vart knappen ska leda när någon klickar på den. Du kan ange hurdan länk som helst, men tänk bara på att skriva den rätt.

Om du vill länka till en sida som finns på din webbplats kan du klicka på knappen Browse (Bläddra) så får du ange exakt vilken sida du vill länka till i fönstret som dyker upp. Om du däremot vill länka till en helt annan sida som ligger utanför din webbplats, t ex Google, så skriver du:

 

http://www.google.se

 

Om du ska länka till din e-post måste du skriva såhär:

 

mailto:minmailadress@minmail.se

 

Och om du ska länka till ett bokmärke skriver du ju:

 

http://www.minwebbplats.se/sidan.htm#bokmarke

 

När du är nöjd med hur knappen ser ut klickar du på fliken Font.

 

 

1.2. Interactive buttons: fliken Font

 

Preview (Exempel). Här ser du hur dina val kommer att påverka textens utseende.

 

Font (Teckensnitt). Välj vilket teckensnitt knappens text ska stå i. Här får du för en gångs skull välja helt vilket teckensnitt du vill utan att behöva oroa dig för om dina besökare kanske saknar det teckensnittet på sina datorer. Knappen kommer nämligen att förvandlas till en bild när du är klar, och det spelar ju ingen roll vilket teckensnitt du använt för att skriva text i en bild.

 

Font style (Format). Välj om texten ska vara fet (Bold), kursiv (Italic), eller något annat.

 

Size (Storlek). Välj knapptextens storlek.

 

Original font color (Ursprunglig teckenfärg). Välj här vilken färg texten ska ha på knappen när ingenting särskilt händer med den.

 

Hovered font color (Teckenfärg vid hovring). Här väljer du vilken färg texten ska få när någon för muspekaren över den.

 

Pressed font color (Teckenfärg vid klickning). Och här väljer du vilken färg texten ska ha när någon klickar på knappen.

 

Horizontal alignment (Vågrät justering): Välj om knapptexten ska vara mer åt vänster, i mitten, eller mer åt höger.

 

Vertical alignment (Lodrät justering). Ska knapptexten vara längs knappens överkant, i mitten, eller längs underkanten?

 

När du gjort alla val här klickar du på fliken Image.

 

 

1.3. Interactive buttons: fliken Image

 

Preview (Exempel). Här ser du hur valen du gör kommer att ändra knappens uppförande.

 

Width och Height (Bredd och Höjd) samt Maintain proportions (Behåll proportioner). Här kan du välja hur stor knappen ska vara genom att ange exakt hur många pixlar bred och/eller hög du vill ha den. Så länge rutan Maintain proportions är förbockad så kommer både höjden och bredden att ändras samtidigt så att knappens nuvarande proportioner bibehålls.

Om du vill göra knappen t ex högre men inte bredare så måste du först bocka av rutan Maintain proportions. Sen kan du ändra på knappens höjd utan att bredden påverkas.

 

Create hover image (Skapa hovringsbild). Om du inte vill att knappen ska reagera alls när någon för pekaren över den bockar du av den här rutan. Annars låter du den vara förbockad.

 

Create pressed image (Skapa bild vid klickning). Den här rutan bestämmer om knappen ska byta utseende när du klickar. Om du bockar av den här rutan kommer knappen inte att reagera (synbart) när någon klickar på den.

 

Make the button a JPEG-image and use this background color (Skapa en JPEG-bild för knappen och använd den här bakgrunden). Om du låter det här valet vara ifyllt kommer knappen att sparas som en JPEG-bild. Det innebär att du först måste välja en bakgrundsfärg, och det gör du i rutan nedan som vanligt. JPEG kommer att göra kanterna litet mjukare på knappen, och om den dessutom består av många färger (mjuka övergångar) blir färgskalan mjukare med.

JPEG-bild

 

Skapa en GIF-bild för knappen och använd den här bakgrundsfärgen (Make the button a GIF-image and use a transparent background). Men om nu JPEG-valet är så bra, varför skulle någon någonsin vilka använda GIF-valet? Av två enkla anledningar. Ett: filen blir mycket mindre som GIF. Som jag tjatat om tidigare så spelar det inte så himla stor roll nuförtiden, särskilt inte när bilden blir lika liten som knapparna vi skapar här. Däremot är den andra anledningen är betydligt mer talande:

 Gif-bild!

 

Jag har skapat en cell och infogat en bakgrundsbild i den. Sedan har jag infogat en GIF-knapp i cellen -- och som du ser så blir GIF-knappens bakgrundsfärg genomskinlig! Bakgrundsbilden syns i alla hål och mellanrum i knappens text.

Detta betyder alltså att om jag har en tjusig bakgrund under knappen så kommer den att synas runtom och till och med igenom knappen. Det skulle den aldrig göra om jag hade gjort knappen till en JPEG. Kanterna blir litet vassare på kurvor och sånt, men det går att skyla ganska bra om man väljer en passande bakgrund.

GIF-bilder kan alltså vara delvist genomskinliga. Det är därför de är så välanvända på nätet; de blir pyttesmå till filstorleken så länge man håller själva bilden relativt liten med, och så kan de göras mer eller mindre genomskinliga. Nackdelen med GIF-bilder är att de ofta blir ganska hackiga i kanterna: om du tittar på bilden ovan så syns det ju ganska tydligt.

 

När du är klar är det bara att klicka på OK.

När du sparar sidan kommer den att vilja spara tre nya bilder (om du lät programmet skapa en hovrings- och klickningsbild, annars blir det färre). Den sparar alltså en bild per knappreaktion. Sedan pusslar de samman allihopa automatiskt beroende på vad besökaren gör. Fiffigt va?

Ett tips är att du gör en ny mapp i din webbplats som du sparar alla knapp-bilder i. Om du gör flera olika knappar kommer du nämligen ganska snabbt att få en himla massa olika små bilder i din rotmapp (alltså mappen för själva webbplatsen, som i sin tur innehåller alla övriga mappar, t ex "bilder"). Om du redan hunnit få en massa knapp-bilder i din rotmapp så går det bra att skapa en ny mapp och bara klicka-och-dra knappbilderna in i den. Detta är inget krav, men det kan underlätta om du vill hålla ordning i din webbplats. Knappbilderna får automatiskt namnet "button" följt av en siffra, så de är lätta att känna igen.

 

 

 

2. Miniatyrer

Den här funktionen låter dig ta en bild du vill visa upp och skapa en miniatyr av den -- alltså en pytteliten version av samma bild. Miniatyren blir mycket liten till filstorleken, och förvandlas dessutom automatiskt till en länk som leder direkt till originalet.

Detta är mycket behändigt om man t ex har många bilder man vill visa upp. Då kan man istället för att pracka sidan full med stora, tunga bilder ha en sida med små, behändiga miniatyrer. När besökaren sedan klickar på en av miniatyrerna får han eller hon se bilden i originalstorlek istället!

Varje ny sida du skapar har en egen inställning för hur stora miniatyrerna på just den sidan ska vara.

Du bestämmer hur stora sidans miniatyrer ska vara genom att gå in på menyvalet Tools > Page-Editor Options.

 

Nu får du fram fönstret med samma namn. Här finns en massa olika flikar. Den vi är intresserad av heter AutoThumbnail. Miniatyrerna kallas nämligen för Thumbnails på engelska. Klicka på den fliken så får du fram ett fönster där du kan bestämma hur miniatyrerna ska se ut.


 

Width, Height, Shortest side, Longest side samt Pixels (Bredd, Höjd, Kortaste sidan, Längsta sidan samt Bildpunkter)
Om du klickar i rutan Set så får du välja vilken sida av bilden den tilltänkta miniatyren ska använda sig av.

Width gör så att miniatyrerna får en fast bredd. Då blir alla miniatyrer exakt så breda. De kan däremot skifta i höjd. Du anger hur breda miniatyrerna ska vara i rutan Pixels.

Height gör så att miniatyrerna får en fast höjd. Då blir alla miniatyrer exakt så höga. De kan däremot skifta i bredd. Du anger hur höga miniatyrerna ska vara i rutan Pixels.

Shortest site gör så att miniatyrernas kortaste sida får det pixelmått du anger i rutan Pixels.

Longest side gör så att miniatyrernas längsta sida får det pixelmått du anger i rutan Pixels.

Pixels-rutan används för att ange hur breda eller höga dina miniatyrer ska vara.

Border thickness (Tjocklek på kantlinjer). Bocka för den här rutan om du vill att alla miniatyrer ska få en kantlinje. Ställ in i rutan Pixels (Bildpunkter) till höger hur tjocka kantlinjerna ska bli. Kantlinjerna får automatiskt samma färg som sidans länkar, men du kan förstås ändra detta genom att gå in i kantlinjernas egenskaper så som vi gjorde i förra lektionen.

Beveled Edge (Fasade kanter). Den här rutan är vanligtvis avbockad. Om du bockar för den blir kantlinjerna runt miniatyrerna "fusk-3D". De ser ut att vara fasade eller vinklade. I vissa fall kan det bli rätt snyggt, men oftast ser det bara störande ut.

 

När du valt klart klickar du på OK. Nu har du gjort miniatyrinställningarna. Då är det dags att börja förvandla bilder till miniatyrer.

 

För att göra en bild till en miniatyr infogar du först bilden som vanligt i din sida. Sedan kan du göra om den till en miniatyr på två sätt: det enkla sättet är att klicka en gång på bilden och sen hålla ned Ctrl + T, men det är inte säkert att det funkar i alla varianter av Expression Web.

Det andra sättet är att högerklicka på någon av knapparna i verktygsfältet strax under menyn, så får du ju fram en meny där du kan välja flera andra verktygsfält. Välj fältet Pictures...

 

... så får du fram ett nytt verktygsfält med knappar i. Klicka en gång på bilden du vill göra till en miniatyr, och klicka sedan på knappen Auto Thumbnail i det nya verktygsfältet...

 

... så blir bilden en miniatyr enligt de inställningar du angav.

 

När du skapat en miniatyr av en bild kan du föra pekaren över den. Då får du dels upp en etikett som talar om att bilden är en länk (som alltid leder till originalbilden), och om du tittar längst ned till vänster i programmet ser du exakt vart länken leder. I mitt fall leder miniatyren till bilden yawn.jpg som finns i mappen bilder. (Detta är inget du behöver göra, men du kan testa.)

 

När du sparar sidan så ombes du automatiskt spara miniatyren som en egen bild (den får automatiskt tillägget _small efter filnamnet). Om du vill spara den i en egen särskild mapp kan du klicka på knappen Change Folder, annars sparas den direkt i roten (alltså utanför alla mappar).

 

Om du sedan sparar sidan och förhandsgranskar den (eller publicerar den, och är noga med att publicera båda varianterna av bilden -- den stora och den lilla) och besöker den så ser du en miniatyr på sidan, och kan klicka på den...

 

... så visas originalbilden.

 

Observera att originalbilden ínte visas på en egen sida, utan att den visas "rakt av": om du tittar på webbläsarfliken ovanför bilden så står det "yawn.jpg" där. Det är alltså en .jpg-bild som visas, inte en webbsida.

Du kan testa min miniatyr här.

 

Att visa originalbilden sådär utan krusiduller funkar ju om du bara har en bild du vill visa upp sådär i förbifarten, men om du vill att originalbilden ska visas på en egen sida som miniatyren leder till, hur gör man då?

Jo, då måste du först göra en sådan sida där originalbilden är infogad, t ex så här:

 

Jag sparar sidan med namnet "storgasp.htm".

Sedan måste man alltså ändra på miniatyrens länk så att den inte leder rakt till originalbilden, utan till sidan där originalbilden infogades. Det enklaste sättet är att öppna sidan där miniatyren finns, högerklicka på miniatyren och välja Hyperlink Properties.

 

Då får man ändra på miniatyrens länk som vanligt. Jag klickar på sidan storgasp.htm i listan i mitten och klickar på OK...

 

... och om jag då förhandsgranskar eller publicerar och besöker sidan så blir det så här: jag klickar på miniatyren...

 

... så hamnar jag på sidan storgasp.htm, där jag ju satt in originalbilden:

 

 

 

Till kursens framsida

Sida 2 av 3 »