Lektion 17. Fald-ned menuer, semantiske tags og responsivt design

Forberedelse

  • Læs/genlæs resten af kapitel 8 fra og med afsnit 8.8 en menu med dropdown
  • Læs kapitel 9 løst igennem. Dvs. orienter dig i kapitlet, du behøves ikke at nærlæse det

Formål

  • Lære, hvordan man bygger en dropdown menu
  • Forstå semantiske tags
  • Tage hul på responsivt design og den tilhørende kodning

Fælles gennemgang

Fra sidst

  • Hvad er et <div> tag
  • Nævn nogle nyttige egenskaber ved et <div> tag
  • Hvordan kan vi skrue et menu sammen

Lektien til denne gang

I dag er der en hel del teori. Til gengæld bliver der mindre teori næste gang om overhovedet noget 🙂

Semantiske tags
  • Responsivt design

Opgaver

17.1 En lille dropdown menu

Gå ind på siden https://www.w3schools.com/css/css_dropdowns.asp og find stedet her (se billedet nedenfor).

Kopier koden fra https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button over i et selvstændigt HTML dokument.

  • Ændr farven til mørkeblå på selve knappen
  • Ændr farven til violet (eller hvad du finder på) på selve fald-ned menuen
  • Hvad sker der, hvis du ændrer display til block under dropdown-content
  • Hvad sker der. hvis du ændrer position til relative under dropdown-content

17.2 En stor dropdown menu

Gå igen ind på siden https://www.w3schools.com/css/css_dropdowns.asp og gå helt ned i bunden. Vi skal arbejde med den sidste menu (se billede nedenfor). Du finder selve koden her: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

  • Kopier koden ind i et selvstændigt HTML dokument
  • Ændr baggrundsfarven til mørkeblå
  • I eksemplet i menuen har de valgt Times New Roman som skrifttype
    • Hvorfor er den valgte skrifttype ikke verdens smarteste
    • Ændr skrifttypen til Arial
  • Ændr baggrundsfarve på fald-ned menuen
  • Lav en fald-ned menu under “News” med 5 menupunkter
  • Lav et sidste punkt i hovedmenuen, “In Danish”, som skal floate helt til højre

17.3 Hvad er et semantisk tag

  • Forklar, hvad et semantisk tag er
  • Hvad bruger vi det til
  • Nedenfor har jeg lavet en lille tabel, der viser opbygningen af en side. Hvilke semantiske tags vil du bruge og hvorfor. Argumenter for dit valg. Tip. Kik gerne i afsnit 9.8 i lærebogen.
Tabel til opgave

17.4 Responsivt design

I kapitlet nævner jeg 3 teoretiske måder, som man kan bruge, hvis man vil arbejde med responsivt design

  • En metode, hvor f.eks. bredden på tagget kan følge med sidens bredde (skalering)
  • En metode, hvor man kan holde proportionerne på et billede (skalering)
  • En sidste metode, hvor man regulært kan skifte udseende ved en bestemt sidebredde målt i pixels. Bemærk: Vi skifter typisk ved 6 – 800 pixels

Selve opgaven:

  • Hvor almindeligt er det, at en hjemmeside/app ses både på f.eks. pc og på en smartphone. Dvs. med meget forskellig skærmbredde
  • Beskriv de 3 metoder ovenfor kort, gerne med små eksempler
  • Hvorfor foretrækker vi <div> tags, selvom tabeller umiddelbart er nemmere at gøre responsive
  • Vi har nu et billede. Billedet skal kunne skalere op og ned, men det må aldrig blive bredere end 800px. Kom med et forslag til, hvad vi gør her.
  • Hvilket meta-tag skal vi fremover altid tilføje, når vi arbejder responsivt

Opgave 17.5 Er hjemmesiderne responsive

Undersøg 5 danske hjemmesider efter eget valg plus vores allesammens Lectio. Undersøg for hver af hjemmesiderne og tag gerne skærmdumps.

  • Er de responsive
  • Hvis ja, hvordan reagerer de ved lille bredde. Ændrer menuen sig?

Opgave 17.6 Media quiry

Kik på eksemplet i lærebogen i afsnit 9.6. “Rigtig” responsiv kode med media quiry

  • Forklar, hvordan den kan skifte farve

Du skal nu ændre i koden. Tag gerne en kopi af koden over i Visual Studio og arbejd med den dér.

  • I stedet for, at baggrundsfarven bliver gråblå når vinduet kommer under 600, så skal den være lyseblå
  • Skiftet skal nu ske ved en breakpoint på 500 px
  • Lav en overskrift med et <h1> tag. Overskriften skal have farven rød og have skrifttypen Calibri og en skriftstørrelse på 30px.
  • Ved 550px bredde skal overskriften skal skriftfarven være mørkegrå og have skrifsstørrelsen 25px
  • Indsæt 2 billede ind efter eget valg. Sæt noget CSS på billedet, så det kan skalere med siden
  • Indsæt 2 <div> tags i 2 kolonner (gerne i semantiske tags. Den ene kolonne skal være 40% bred, den anden 60%. Giv de 2 kolonner hver sin farve og lidt tilfældig tekst. Skaler for at teste, om bredden følger med. Når skærmbredden kommer under 500px, skal deres bredde være 100%. Tip: Kik eksemplet i afsnit 9.8 over skuldrene
    • Tror du, at den opgave, du lige har løst, er realistisk i virkeligheden

Opgave 17.7 Strynø om styrbord

Kan du huske opgaven om Anholt? Rygterne om, hvor dygtig en webudvikler du er, har nu spredt sig til helt til Strynø. Strynø er lige som Anholt en af Danmarks mange småøer, men hvor Anholt ligger vindblæst midt i Kattegat, så ligger Strynø idyllisk i det Sydfynske Øhav mellem Fyn, Langeland og Ærø. Der bor ca. 215 indbyggere på øen, og man kan sejle til øen på 25 minutter fra Rudkøbing. Hvis du er nysgerrig, kan du se Strynø på Google Maps her:

Beboerne har en hjemmeside, https://www.strynoe.dk/. De er trætte af, at den ikke er responsiv, og det skal du hjælpe dem med. Du skal lave et “proof of concept”. Krav til din opgave:

  • Vigtigt: For at løse alt andet end ekstraopgaverne er det kun nødvendigt, at du laver en forside + et eksternt stylesheet
  • Det vigtigste i opgaven er at vise, at du kan lave en responsiv hjemmeside til dem med menuer, der ændrer sig med sidebredden
  • Det er også vigtigt at vise, at du kan bruge semantiske tags. Dvs. at du skal lave en forside med en menu, der er vandret ved bred visning (skærmbredde over 600 pixels) og lodret under 600 pixels i bredden. Du skal bruge de menupunkter, som findes på strynoe.dk. Menupunkterne skal så bare være pseudo-links, f.eks. <a href=”#”>link text</a>
  • For overskuelighedens skyld skal du benytte 2 forskellige baggrundsfarver efter eget valg. En til det brede format og en anden farve til det smalle format
  • Du skal benytte
    • Et eksternt stylesheet til alt din CSS kode
    • Du skal opbygge din forside med semantiske tags. Det er dog nok med følgende områder
      • Et område til menuen
      • Et område til et billede, der dækker 100% i bredden (lige som på den nuværende side), og som er responsivt. Dvs. det følger med, når siden bliver mindre
      • En midtersektion til alt muligt. Sæt evt. lorem-ibsum eller bacon-ibsum tekst ind. Du behøves ikke at lave undersektioner til video og lignende, bare du har en midtersektion til “brødteksten”
      • En footer til kontaktoplysninger

Fald-ned menu

Strynøboerne har ikke nogle fald-ned menuer. Men de vil gerne se, at du kan lave en. De har nemlig luret, at deres menu fylder ret meget tekstmæssigt. Lige nu er menuen sådan her:

Velkommen
Gæst på Strynø
Aktiviteter
Boligmarked
Flyt til Strynø
Erhverv
Foreninger
Strønyt

Lav din menu, så den ser sådan ud. Underpunkterne skal være i fald-ned menuer.

Velkommen
Gæst på Strynø
– Overnatning
– Spisesteder
Flyt til Strynø
– Boligmarked
– Lej en bolig
Øens liv
– Erhverv
– Foreninger
– Aktiviteter
Strønyt

Ekstra point

Du kan tjene ekstra point:

  • Giv din side noget generel styling, så den ser pæn ud. Strynøboerne skulle jo helst købe dig til opgaven
  • Vis, at du kan lave en anden styling af f.eks. skriftstørrelsen i det smalle format
  • Vis, at du kan lave en 3-kolonne side, som du så får til at blive til 1 kolonne på en smal skærm. Tip. Der er hjælp hos W3schools her: https://www.w3schools.com/css/css_website_layout.asp