Om detta exempel: CSS (stilmallar)

Denna beskrivning av tre kolumn-design gjordes för att uppfylla, eller försöka uppfylla, kraven för betyget väl godkänd (VG) på kursen CSS-baserad webbdesign vid Umeå universitet sommaren 2008. Nedan listas kraven för godkänt (G) respektive väl godkänd (VG) samt om, och eventuellt var, jag uppfyllt respektive krav ([visas så här] efter krav).

Krav för godkänt (G)

  • Webbplatsens layout skall baseras på div-element (med tillhörande stilregler i ditt CSS-dokument). Du får således inte använda dig av tabeller för att skapa webbplatsens layout.
    [Ja, se beskrivning på "startsida" av exempel.]
  • Webbplatsens layout skall vara centrerad i webbläsaren (observera dock att texten i din layout inte skall vara centrerad).
    [Ja, finns marginaler till vänster och höger på denna webbsida.]
  • Det skall finnas en meny genom vilken en användare kan navigera mellan webbplatsens olika sidor.
    [Ja, se meny till vänster.]
  • Inom den här examinationen får alla CSS selektorer användas, men dessa måste finnas med:
    • ID-selektor
      [Ja, respektive DIV-element har id-attribut för att idenitifera dem.]
    • Klass-selektor
      [Ja, denna text mot grön bakgrund innesluts av en SPAN-tagg med attributet class.]
    • Descendant selektor (kallas ibland för kontextuell selektor)
      [Ja, stycken har rak vänster- och högermarginal enbart i innehållsdelen (den med vit bakgrund).]

Krav för väl godkänt (VG)

  • Samtliga XHTML-sidor skall validera utan vare sig fel eller varningar samt använda doctype XHTML 1.0 Strict.
    [Ja, gjort 2008-08-06.]
  • CSS-dokumentet skall validera utan fel eller varningar (se till att visa alla varningar).
    [Ja, gjort 2008-08-06.]
  • På minst en av de tre XHTML-sidorna skall ankarlänkar användas. Detta innebär länkar inom det aktuella dokumentet (exempelvis en länk från den övre delen av dokumentet till en specifik sektion i den nedre delen av det aktuella dokumentet).
    [Ja, se "startsida" för exempel.]
  • Dina sidor ska innehålla en lista (ul eller li) som presenteras horisontellt istället för vertikalt.
    [Ja, se innehållsförteckning på "startsida".]
  • All text på sidorna ska han en angiven textstorlek i ditt CSS. Alla textstorlekar ska anges med relativa värden i enheten em.
    [Ja, pixlar, m.m. används endast för bredder på webbsidas delar och marginaler.]
  • Sidorna ska vara utformade så att layoutens totala bredd avgörs av hur stort fönstret är. Med andra ord ska inte din layout ha en fix bredd angiven i antal pixlar. Din layout ska i stället präglas av att sidans textinnehåll utnyttjar en viss proportion av fönstrets faktiska bredd. När fönsterbredden förändras ska även layoutens bredd förändras.
    [Ja, innehållets bredd anpassas (liksom "sidbredden" - grå bakgrund har min. bredd på 800 pixlar och max. bredd på 1000 pixlar).] Observera att jag valt att begränsa bredden på designen så att textrader inte ska bli så långa, d.v.s. att stycken inte ska bli svårlästa!

Till början på sida