Webbplatsen har nu utökats med en del bilder, så som det tagits upp i föreläsning F8 och laboration L8.
Bilder
Det har ju redan från början funnits en del bilder på webbplatsen. Dessa är också anpassade till den användning de har på webbplatsen.
På startsidan finns en karta som visar Smålands gamla land. Denna är transparent och sparad i PNG-format.
Bilderna i "kollagen" på sidan Småland och sidorna för städerna är sparade i JPG-format. De är beskurna och anpassade i form till den användning de har på sidorna. Upplösningen är något högre än vad de har på sidan, men huvudsakligen anpassade till den form och storlek de har på sidan.
Responsiva bilder
På matsidorna har två olika varianter av bilderna tagits fram. De som funnits sedan tidigare är i formatet 600x400 pixlar. Dessa bilder har nu beskurits, för att få en närbild och de har sparats i storleken 400x300 pixlar. I HTML-koden finns det picture/source-elemement där byte till de mindre bilderna görs vid en bredd på max 400px. På en liten skärm, får man alltså de nya bilderna. Testa i Följsamt designläge i webbläsaren.
CSS sprites
På startsidan la jag in tre "ikoner" med vapensköld för Småland och de tre länen. Alla dessa ligger i filen coat-of-arms.webp. De är sparade i samma fil, så att endast en fil behöver läsas in och formatet WebP, för att få en liten filstorlek. I HTML-koden ligger ett tomt div-element och i CSS-koden läggs bildfilen in som en bakgrundsbild. Storleken sätts, så att endast den första vapenskölden visas. Med ytterliugare en regel förskjuts bilden till den sista vapenskölden, då man pekar på bilden. Det finns också en transition-effekt, som gör att förskjutneingen sker långsamt, så man hinner se alla fyra bilderna.
Favicon
Jag tog också fram en favikon till webbsidorna. Detta har inte tagits upp i labben, men beskrivs i bocke Learning Web Design, kapitel 23, som ingår i veckans läsanvisningar.
I boken beskrivs två sätt. I det första sättet tar man fram en fil kallad favicon.ico och lägger i webbplatsens "root directory", huvudmappen. Den metoden kan dock inte användas i detta fall, eftersom webbplatsen om Småland är en del av en större webbplats för hela kursen. Mappen för webbplatsen om Småland är alltså inte roten och jag vill ju inte ha favikonen för hela kursens webbplats. Så därför valde jag den andra metoden.
Jag tog fram en favikon i formatet 32x32 pixlar med Smålands flagga. Denna sparade jag i formatet PNG och la i webbplatsens img-mapp. I varje HTML-dokument la jag in en link-tagg, där jag refererar till bilden favicon.png.
Favikonen visas tillsammans med texten i title-elementet i titelraden för fliken i webbläsaren.