Webbutveckling med HTML och CSS

Förberedelser

• Öppna mappen L8b i Visual Studio Code (VSC).
• Öppna filerna lab8b-1.html och style.css i VSC och öppna sidan i Live Server.
  • Du kommer endast göra ändringar i HTML-filen, men studera både HTML- och CSS-koden, så du förstår alla delar.
• I mappen img finns filerna cows300.jpg, cows600.jpg och cows900.jpg, som är samma bild i tre olika upplösningar.

Olika pixeltäthet

• I den första img-taggen (den inom det första section-elementet) lägger du till följande attribut

      srcset = "img/cows300.jpg 1x,
                img/cows600.jpg 2x,
                imgcows900.jpg 3x"
  

  • Dela gärna upp det på varsin rad, dvs radbrytning efter kommatecknen, för att öka läsbarheten och stilen på koden.
• Ta fram Följsamt designläge i Firefox. Prova att ändra pixelförhållande mellan DPR: 1, DPR: 2 och DPR: 3 i menyn högst upp, för att se att olika bilder används.
  • DPR = Device Pixel Ratio

Olika bredd på enhetens skärm (fönster) och användning av bilden

• I den andra img-taggen (den inom det andra section-elementet) lägger du till följande attribut

      srcset = "img/cows300.jpg 300w,
                img/cows600.jpg 600w,
                imgcows900.jpg 900w"
  

  • Detta talar om för webbläsaren vilken bredd (width) bilderna har.
• Ta fram Följsamt designläge i Firefox. Prova att ändra sidans bredd. Notera att olika bilder används. Vid en bredd över 700px används bilden cows900.jpg, vilket är onödigt i den layout som sidan då har. Sidans innehåll är max 1000px och bilden fyller endast halva denna bredd.
  • Se till att DPR: 1 nu är valt i Följsamt designläge.
• I img-taggen lägger du till följande attribut

      sizes = "(max-width: 700px) 100vw,
               (max-width: 1000px) 50vw,
               500px"
  

  • Den första gränsen på 700px är densamma som används i media queryn i CSS-koden, som ändrar layouten till en kolumn. För ett fönster som är mindre än 700px ska bilden fylla hela bredden (100vw).
  • Den andra gränsen på 1000px är den som satts med max-width för body i CSS-koden. För ett fönster mellan 700px och 1000px är det en layout med två kolumner, där bilden upptar halva bredden och därmed halva fönstrets bredd (50vw).
  • För fönster som är bredare än 1000px läggs det till marginaler enligt stilinställningen för margin i regeln för body. Bilden blir då inte bredare, utan kommer vara halva bredden, dvs 500px.
• Ta fram Följsamt designläge i Firefox. Prova att ändra fönstrets bredd. Nu används ingen större bild än vad som behövs.

Förberedelser

• Öppna mappen L8b i Visual Studio Code (VSC), om du inte redan har den öppen.
• Öppna filerna lab8b-2.html och style.css i VSC och öppna sidan i Live Server.
  • Du kommer endast göra ändringar i HTML-filen, men studera både HTML- och CSS-koden, så du förstår alla delar.
• I mappen img finns filerna cows-small.jpg, cows-narrow.jpg och cows-wide.jpg, som är bilden på korna fast beskuren på olika sätt och i olika storlek.

Val av olika bilder

• Lägg in start- och sluttagg för ett picture-element före och efter img-taggen.
• Ovanför img-taggen lägger du till ett source-element med attributen media="(max-width: 600px)" och srcsset="img/cows-wide.jpg".
• Ta fram Följsamt designläge i Firefox och prova att ändra fönstrets bredd, för att se att bilden byts ut i de båda layouterna.
• Lägg till ytterligare ett source-element ovanför det förra med attributen media="(max-width: 400px)" srcset="img/cows-small.jpg".
  • Det är viktigt att source-elementen (dvs deras media queries) kommer i denna ordning och att img-taggen ligger sist, för att valet av bild ska bli rätt.
• Ta fram Följsamt designläge i Firefox och prova att ändra fönstrets bredd. Det ska nu ske en växling mellan tre bilder vid de gränser du angett i media-attributen.

Förberedelser

• Öppna mappen L8b i Visual Studio Code (VSC), om du inte redan har den öppen.
• Öppna filerna lab8b-3.html och style.css i VSC och öppna sidan i Live Server.
  • Denna gång kommer du endast göra ändringar i CSS-filen, men studera både HTML- och CSS-koden, så du förstår alla delar.
• I mappen img finns filerna box.png och fruit-icons.png, som innehåller några små bilder. Öppna dessa, så du ser att varje fil innehåller flera bilder.

Boxen

• Skriv en regel för #boxBtn med följande egenskaper:

      display: inline-block; width: 290px; height: 120px;
      background: url(../img/box.png); background-repeat: no-repeat;
  

  • Hela bilden bör då visas i webbläsaren.
• Lägg till background-position: -145px 0px; i regeln för #boxBtn
  • Då förskjuts bilden, så att endast den andra halvan visas.
• Visa endast första halvan:
  • Ändra width till 145px.
  • Ändra första värdet i background-position till 0px. hela värdet ska alltså vara 0px 0px.
• Lägg till en regel för #boxBtn:hover med background-position: -145px 0px;
• Prova att föra muspekaren över boxen i webbläsaren.

En annan visuell effekt

• Lägg till transition: background-position 1s; i regeln för #boxBtn.
• Prova att föra muspekaren över boxen i webbläsaren.
  • I detta fall växlar man mellan de två bilderna med en glidande rörelse. Det passar ju inte direkt för de bilder på boxen som vi har i detta fall, men för andra bilder kanske man vill ha denna effekt.

Bilderna på frukter

• Lägg till följande egenskaper i regeln för #fruitlist a

      background-image: url(../img/fruit-icons.png);
      background-repeat: no-repeat;
      color: transparent;
  

  • Med en transparent färg på texten, görs texten i länkarna osynlig. Nu ska ju istället bilderna visas. Samtidigt finns texterna kvar i HTML-koden, för de som inte kan se bilderna, vilket ökar tillgängligheten.
• Skriv en regel för #fruitlist li:nth-of-type(1) a med background-position: 0px 0px;
• Skriv ytterligare fyra likadana regler, fast med ordningsnumren 2 till 5 inom nth-of-type och värdet -60px 0px, -120px 0px, etc. i background-position.
• Kontrollera i webbläsaren att bilderna är fördelade till de olika rutorna.