Positionering (blog)

Syftet med denna uppgift är att du ska visa att du kan skapa en tvåkolumnslayout med CSS för ett redan uppmärkt XHTML-dokument.

Innehållsmässigt är XHTML-dokumentet en fiktiv bloggsida som innehåller tre blogginlägg och några kommentarer. Längre ned i dokumentet presenteras dokumentets uppbyggnad och resonemanget bakom uppmärkningen. Denna del är viktig dels för att kunna förstå hur du kan göra ett CSS för just den här uppgiften, dels för att du kan lära dig hur man kan resonera kring semantiskt rimlig uppmärkning. Du hittar bloggsidan samt andra dokument du behöver för att lösa uppgiften i zip-filen blogg.zip nedan.

Din uppgift är att göra ett CSS-dokument med namnet ”style.css”. Denna CSS ska användas för att definiera hur bloggsidan skall formateras. Du ska inte ändra något i blogg.html, detta dokument är att betrakta som givet. Du skall med andra ord bara skicka in filen style.css som examination.

En godkänd inlämning skall uppfylla följande:

• Layouten ska vara centrerad på sidan. Detta innebär att om fönstret förstoras så ska det lediga utrymmen fördelas jämt på vardera sida om innehållet. Det innebär alltså inte att texten ska vara centrerad.
• Layouten ska ha två kolumner. Den ena kolumnen ska innehålla en navigeringsmeny m.m. (se mer om detta nedan) med klickbara länkar. Den andra kolumnen skall innehålla blogginläggen.Du väljer själv om navigeringsmeny skall ligga till höger eller vänster om blogginläggen.
• Layouten ska ha ett sidhuvud som presenteras ovanför de två kolumnerna och skall spänna över båda kolumners totala bredd.
• Layouten ska ha en sidfot som presenteras nedanför de två kolumnerna och skall spänna över båda kolumners totala bredd.
• Kalendern skall formateras så att udda och jämna rader skall ha olika bakgrundsfärg samt att tabellens huvudrad (namnen på dagarna) har en avvikande formatering från de andra raderna.

Uppgiften kan lösas på näst intill oändligt många sätt. Det viktiga för examinationens skull (dvs för att du ska bli godkänd) är att din lösning uppfyller ovanstående krav. Det är tillräckligt. För ditt eget lärandes skull får du (och uppmuntras att) ta ut svängarna betydligt mer så länge kraven är uppfyllda.

Sidan har följande struktur. Observera att alla länkar är inte är kopplade till några befintliga länkar (d.v.s. de kan inte användas). På den yttersta nivån finns ett div-element med id ‘container’. Inuti detta finns fyra div-element:

• ett div- element med id ‘header’ som utgör sidans sidhuvud och som innehåller två rubriker av olika storlek varav den ena har id ‘bloggtitle’.
• ett div- element med id ‘sidebar’ som i sin tur innhåller ett antal div-element:
• ett div-element med id ‘searchbar’ som innehåller ett enkelt webbformulär (form).
  • ett div-element med id ‘aboutme’ som innehåller en kort beskrivning av bloggar samt en bild/ikon av denna.
  • ett div-element med id ‘menu’ som innehåller några allmäna länkar för bloggsystemet i form av en osorterad lista (ul).
  • ett div-element med id ‘bymonth’ för att hitta inlägg efter år och månad. Denna länkstruktur utgörs av en två-nivåers länkmenu i form av en yttre osorterade lista som har två inre osorterade listor som deldelistor.
  • ett div-element med id ‘rss’ som innehåller en länk till ett RSS-flöde.
  • ett div-element med id ‘calendar’ som innehåller en kalender för maj månad i form av en tabell.
  • ett div-element med id ‘articles’ som innehåller tre stycken blogginlägg. Varje blogginlägg är strukturerat som dett div element av klassen ’article’. En sådan div innehåller en rubrik, ett datum och tid för inlägget samt själva inläggets text i form av en eller flera p-element. Ett av inläggen har också två kommentarer som utgörs av div-element av klassen ‘comment’ som i sig innehåller en rubrik, datum och tid samt kommentarstexten i form av ett p-element.
  • ett div-element med id ‘footer’ som utgör sidans sidfot som innehåller ett p-element.

Det är viktigt att du studerar xhtml-dokumentets uppbyggnad och vilka olika id och klasser som används.

blogg.zip och ett ex på vad som minst krävs för godkänd uppgift.

Du skall lämna in ditt css-dokument style.css.

Om du vill använda bilder utöver det som är givet, som bakgrunder för olika element måste dessa bilder länkas in ifrån CSS-dokumentet. Du måste då också packa ihop CSS-filen samt dessa bilder i en zip-fil. Här är kravet att dessa bilder skall placeraras i style-mappen, d.v.s. samma mapp som css-filen ligger i.