Bygg en styleväljare till din webbplats

By . Latest revision .

Uppgiften bygger på ett exempelprogram av en multisida och en styleväljare. Du skall bygga ut styleväljaren med fler funktioner och en ytterligare stylesheet.

#Förkunskaper

Du har jobbat igenom artikeln “Att bygga en styleväljare till sin webbplats” samt “Vanliga CSS-konstruktioner som är bra att kunna”.

#Introduktion

Du skall bygga ut den multisida som visas i artikeln ovan. Du skall lägga till fler funktioner.

Börja med att ta en kopia från exempelkoden som följer med artikeln.

# Ställ dig i rooten av kursrepot
cp -ri example/stylechooser/* me/kmom04/stylechooser/

Nu har du din bas du kan utgå ifrån. Spara alla dina filer i katalogen me/kmom04/stylechooser.

Tips.

Att visa aktivt val i en select/option-lista, lägg till attributet selected på den option som skall visas som vald när sidan laddas.

<select name="style">
    <option value="default">Default style</option>
    <option value="second" selected>Second style</option>
</select>

#Krav

  1. Lägg till en ny undersida som enbart visar en dropdown med knapp för att välja stylesheet (ingen text runtomkring). Använd POST och en processingsida. Dropdownen skall visa den aktiva stylesheeten som vald.

  2. Lägg till ytterligare en stylesheet.

  3. Den nya stylesheeten skall vara färgglad.

  4. Den nya stylesheeten skall använda sig av nedladdningsbara fonter.

  5. Den nya stylesheeten skall använda sig av en bakgrundsbild/textur.

  6. Validera och publicera din kod enligt följande.

# Ställ dig i roten av kurskatalogen
dbwebb publish stylechooser

Rätta eventuella fel som dyker upp och publicera igen. När det ser grönt ut så är du klar.

#Extrauppgift

  • Byt ut knappen för att submitta formuläret mot ett JavaScript som submittar formuläret varje gång du byter till ett annat värde.
<select onchange="form.submit();">

#Tips från coachen

Lycka till och hojta till i forumet om du behöver hjälp!

#Revision history

  • 2016-01-13: (B, mos) Slog ihop krav 1 och 2.
  • 2015-06-03: (A, mos) Första utgåvan i samband med kursen htmlphp v2.

Document source.

Category: php.