Webbutveckling: Grundkurs (DA120A)

Malmö Högskola

Modul 5 - Layout med CSS

1. Kom igång med layoutbyggande

Vi har nu lärt oss grundläggande HTML för att strukturera upp vår information på de webbplatser vi hittills skapat, men också tittat på CSS för att formge denna information. Vi ska nu blicka framåt och fokusera mer på hur man kan skapa layouter på webbplatserna för bättre/tydligare/snyggare presentation av information. Här tänker vi mest på att våra sidor bör ha ett sidhuvud, en meny, en plats för sidans innehåll, sidfot, etc.

Vi ska också lära oss hur vi positionerar ut element på webbplatsen, t.ex. ska de ligga till höger eller vänster på sidan? Detta genom att titta på CSS och HTML för layout. Nya element som kan komma att användas är bl.a. (<header>, <footer>, <nav>, <aside>, <section>, <article>). Nya CSS egenskapar som vi kommer behöva titta på är t.ex. float, position.

Vi ska även lära oss att skapa separata CSS-mallar, så att vi kan separerar struktur (HTML) från formgivning (CSS). CSS-koden ska i denna uppgift alltså inte blandas med HTML-koden, utan finnas i ett eget CSS-dokument.

2. Material

2.2. Kurslitteratur

  • HTML och CSS-boken: Kapitel 5: Formatmallar
  • HTML och CSS-boken: Kapitel 6: Mer om text
  • HTML och CSS-boken: Kapitel 10: Avancerad CSS
  • BYOWUHAC*: Kapitel 4: Shaping up using CSS

Användning av allt material är fritt, om motsatsen inte anges. Länka gärna! Formellt utrycks detta med licensen Creative Commons Erkännande 4.0 Sverige.

Webbplatsen drivs av Anton Tibblin, som också ansvarar för kursen Webbutveckling: Grundkurs, fristående distanskurs, Malmö högskola.