Startsida / Kurs / Fakta-serien / Webbsida med CSS

FAKTA - Webbsida med CSS

Audience: beginners-advanced

Objective: Följ ett webbsida från ax till limpa. Få kunskaper och erfarenheter i hur en webbsidas stil ändras med Cascading Stylesheet.

Keywords: webbsida, HTML, metadata, CSS, validering, layout, läsarkommentarer

Date of publish: 2005-04-25

Author: johan.sundstrom@mdh.se
 

1 Introduktion

Målet med denna övning är att ge ett budskap en stil så att det genom stilen blir lättare att överblicka den.

Vi skiljer vi på information, struktur och stil .

  • Informationen är budskapet i ren form.
  • Strukturen är HTML som pÃ¥verkar ordning och följd.
  • Stilen förstärker informationen och gör den mer överskÃ¥dlig och lättsmält.

Fördelen med att hålla dessa skilda är att man kan förändra/byta ut en del utan de andra påverkas. Exempelvis kan all stil bytas utan att innehållet eller strukturen påverkas.

2 Informationen

Detta är informationen. Inget får förändras i den. Den går att ladda ned i textform (källa: regeringen.se).

Mänskliga rättigheter. "Alla människor är födda fria och lika i värde och rättigheter." Så inleds FN:s allmänna förklaring om de mänskliga rättigheterna. För den svenska regeringen är det en prioriterad uppgift att stärka de mänskliga rättigheterna, och respekten för dem. Det gör vi i det politiska arbetet i Sverige och det gör vi i utrikespolitiken. Frågor om mänskliga rättigheter genomsyrar de flesta politikområden. Vad är mänskliga rättigheter? De rättigheter som inryms i FN:s allmänna förklaring om de mänskliga rättigheterna från 1948 innehåller, enkelt uttryckt 1) de grundläggande friheterna, såsom rätten att hysa eller uttrycka åsikter, att utöva en religion, att bilda eller gå med i en organisation eller att ordna möten 2) rätten till skydd mot övergrepp, till exempel rätten att inte bli godtyckligt arresterad eller utsättas för tortyr 3) rättigheter för att tillgodose de grundläggande behoven, till exempel rätten till en tillfredsställande levnadsstandard, till hälsovård och till utbildning. Under de drygt femtio år som gått sedan den allmänna förklaringen antogs har rättigheterna slagits fast i ett antal internationella konventioner. Konventionerna tillförsäkrar enskilda olika rättigheter gentemot statsmakten. Sverige har ratificerat de centrala konventionerna om mänskliga rättigheter, vilket innebär att vi förbundit oss att respektera konventionernas regler. Den svenska utrikespolitiken ska bidra till att människor också i andra länder får del av de mänskliga rättigheterna. Regeringens webbplats om mänskliga rättigheter. För att sprida kunskap om de mänskliga rättigheterna och informera om de svenska åtagandena på områdena har regeringen öppnat en webbplats om mänskliga rättigheter. Här finns bland annat mer information om regeringens arbete för mänskliga rättigheter i Sverige och i svensk utrikespolitik. På webbplatsen finns också nyheter, konventioner, skrivelser, publikationer och rapporter om de mänskliga rättigheterna i världens alla länder.

2.1 Analys

Texten behöver struktureras så att vi får en bra följd i informationen. Ett parti i texten innehåller en uppräkning från 1-3. Det går att förbättra med punklista. Vi kommer också att kunna göra rubriker av stycken i informationen.

3 Strukturen

Vi använder HTML för att strukturera informationen. Att strukturera informationen innebär kort att skapa rubriker och stycken. Läsbarheten höjs avsevärt genom att använda punktlistor där det är möjligt.

Resultat 1

Välj att visa dokumentets källa, alltså HTML-koden. Vid en betraktelse ser man att följande HTML-taggar i kronologisk ordning finns med för att strukturera koden.

<HTML> <HEAD> <TITLE> <BODY> <H1> <P> <CITE> <H2> <UL> <LI> <H3> <ACRONYM> <A>

Slå upp betydelsen av dessa HTML-kommandon om du inte är bekant med dem.

3.1 Metainformation

Informationen är nu strukturerad, vi tillför därefter meta-information (information om informationen) till dokumentet.

Exempel på meta-information är

  • Vem ansvarar för informationen
  • När skrevs den
  • Vilka sökord används i texten
  • Vad är det för typ av dokument
  • Vilket sprÃ¥k
  • Titel pÃ¥ dokumentet

Metainformation införs mellan <TITLE>- och <META>-taggarna i <HEAD>-delen och beskriver vad texten handlar om och vilka sökord den har. Vem som skrivit dokumentet (behöver inte vara samma som den som skrivit informationen).

Förslag på META-information:

<title>Mänskliga rättigheter</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
<meta http-equiv="Content-Language" content="sv"/>
<meta http-equiv="author_email" content="johan.sundstrom@mdh.se"/>
<meta http-equiv="Author" content="Johan Sundström"/>
<meta name="keywords" content="Mänskliga rättigheter, FN:s allmänna förklaring, Regeringens webbplats"/>
<meta name="description" content="Mänskliga rättigheter, regeringen sprider kunskap via webbplats"/>

Resultat 2

Studera koden i Resultat 2. Notera att informationen inte är förändrad på något sätt. Det som ändrats från Resultat 1 är endast synligt i koden.

3.2 HTML Validering

Vi håller oss till den rekommenderade standarden XHTML 1.0 och validerar därför koden och får ett diplom när allt klart. För att indikera att dokumentet är validerat genom att lägga till diplomet till dokumentet.

Resultatet efter Tidy blir något i stil med detta:

Resultat 3

Vi har nu en kod som är Tidy och Valid.

4 Stilen

Nu kommer vi till det roliga, att sätta stil på informationen med CSS.

Innan vi sätter igång och förändrar utgångsstilen så tar vi oss en funderare på hur dokumentet ska visas. Hur ska vi presentera temat "Mänskliga rättigheter"?

-Jag tänker FN... jag tänker Rädda Barnen... jag tänker happy-kids... jag tänker "född fri".

...Jag väljer temat mjuk ton kombinerat med barn.

Vi delar upp stilsättningen i fyra områden

  1. Text
  2. Layout (som inte är struktur)
  3. Färg
  4. Bild

Alla delarna hänger ihop, att vilken layout vi har kommer att påverka vilken textstil osv. Uppdelningen görs för att fokusera på ett område i taget.

4.1 Text

Eftersom det är en relativt stor textmassa totalt så får texten inte bli för stor. Webbsäkra teckensnitt måste användas. Webbsäkra teckensnitt innebär att användarens dator antas ha det teckensnittet installerat.

TIPS
Allmänt gäller att tunn text behöver vara mörk på vit botten. En mer fet text på vit botten kan vara mer ljus för att skapa effekten av att inte skrika ut.

Följande textdelar finns

  • Rubriken <H1>
  • Citatet <CITE>
  • Brödtexten <P>
  • Punktlistan <UL>
  • Underrubrikerna <H2>
  • Ordförklaringen <ACRONYM>
  • Länken <A>

4.1.1 CSS på Text

Att sätta stil på body som omfattar alla övriga HTML-kommandon, innebär att man har angivit en standard stil som de övriga ärver.

body { font: normal 0.9em Georgia; }

Det finns bara en rubrik per HTML-rubrik och den får egen tjocklek och storlek.

h1 { font: bold 2em Tahoma; }
h2 { font: bold 1.4em Tahoma; }
h3 { font: bold 1.2em Tahoma; }

Stycken får en extra radhöjd på 140%.

p { line-height:140%; }

Citatet får stilen Georgia. Det ger intrycket av att se gammal ut och som om den var skriven med gåsfjäderpenna.

cite { font: italic 24px Georgia; }

HTML-taggen Acronym används för att visa ytterligare information för de som ställer pekaren ovanför. Vi visar en svart prickad linje under ordet.

acronym { border-bottom: 1px dotted #000; cursor: help; }

Länken kräver en beskrivning. Jag har blivit förtjust i länkar där inte "strecket" som visar att det är en länk, går genom de hängande tecknen. Dekorationsstilen här tar bort ursprungliga stilen och skapar en blå undre kantlinje.

a { text-decoration: none; border-bottom: solid 1px blue; }

Eftersom detta ger speciellt utseende på alla länkar även logotypen för XHTML ger detta en "återställning" till normalt länkutseende. Samtidigt får vi här en chans att demonstrera pseudo-klassen CLASS.

.normallink { border-bottom: 0px; }

Här är hela stilen som läggs inom kommentarstaggar för att inte visas i webbläsare som inte hanterar CSS:

<STYLE>
<!--
.normallink { border-bottom: 0px; }
body { font: normal 0.9em Georgia; }
h1 { font: bold 2em Tahoma; }
h2 { font: bold 1.4em Tahoma; }
h3 { font: bold 1.2em Tahoma; }
p { line-height:140%; }
acronym { border-bottom: 1px dotted #000; cursor: help; }
cite { font: italic 24px Georgia; }
a { text-decoration: none; border-bottom: solid 1px blue; }
-->
</STYLE>

Resultat 4

4.2 Layout

I detta läge är dags att börja skissa på papper med penna hur sidans layout ska bli.

Informationens två första delar får utgöra en grupp, vi kallar den vänsterdel och stycket med "Regeringens webbplats om mänskliga rättigheter" blir högerdel. Eftersom svenskans öäå inte passar som namn så beslutar vi oss för leftpart och rightpart som namn på "informationsklumparna".

Skissen:

Här måste vi "klumpa" ihop delar av HTML-koden. Det kan vi göra med HTML-taggen <DIV>. Vi placerar <DIV> så att de omfattar de två informationsdelarna och lägger till de namn vi bestämde oss för, leftpart och rightpart.

Här visas en del av koden.

...
<body>
<div id="rightpart">
<h1>Mänskliga rättigheter</h1>
...
...
Den svenska utrikespolitiken ska bidra till att människor ocks&aring; i andra länder f&aring;r del av de mänskliga rättigheterna.</p>
</div>
<div id="leftpart">
<h2>Regeringens webbplats om mänskliga rättigheter</h2>
...

Därefter deklarerar vi ny stil för de nya informationsklumparnas (information chunks) positionering och egna stilar genom:

4.2.1 CSS och layout

Rightpart
Den högra delen är enkel. Den beskriver att vi ska marginaljustera texten och placera den absolut på position 20px, 240px (X,Y) från övre högra hörnet. Blocket ska också vara 20px från högra hörnet. I övrigt ärver den stil från <BODY> elementets stil.

#rightpart {
position: absolute;
left: 240px;
top: 20px;
right: 20px; }
text-align: justify;
}

Leftpart
Vänstra blocket är värre. Den ska ha en solid kantlinje med olika tjocklekar och färger på de olika sidorna, för att förstärka 3D-effekten.

Vidare ska den ha 8pixlars utfyllnad runt om i hela blocket.

#leftpart {
position: absolute;
left: 20px;
top: 20px;
width: 160px;
border-style: solid;
border-top: 1px #C0C0C0;
border-left: 1px #C0C0C0;
border-right: 3px #808080;
border-bottom: 3px #808080;
padding: 8px;
font: normal 12px Tahoma;
}

Resultat 5

Det börjar likna nåt! Prova att förändra webbläsarens storlek och se hur det behandlas.

4.3 CSS och färg

Dags för färg och kompletterande bilder som passar till innehållet. Vi börjar med färgen. Jag tar fram en passande färgpalett där färgerna glider i skalan.

Tanken är nu att vi ska ha en lugn bakgrundsfärg och en mjuk textfärg.
-Vad sägs om färgen #FBF3EA och motsvarande #3C342B?

body { color: #3C342B; background: #FBF3EA; font: normal 0.9em Georgia; }

Blocket leftpart ska ha vit bakgrundsfärg som får den att sväva över bakgrundsfärgen.

#leftpart {
position: absolute;
left: 20px;
top: 20px;
width: 160px;
border-style: solid;
border-top: 1px #C0C0C0;
border-left: 1px #C0C0C0;
border-right: 3px #808080;
border-bottom: 3px #808080;
padding: 8px;
font: normal 12px Tahoma;
background: white; }

Resultat 6

Nu är det en lugn färg som bakgrund och en lite mjukare mörk färg som text. Jämför med resultat 5.

4.3.1 CSS och färg på text

Nu kan vi finlira med H1, H2, H3 och CITE-taggarna. Vi måste också göra nåt åt länkfärgen.

a {
text-decoration: none;
color: #3C342B;
border-bottom: solid 1px blue;
}
h1 { color: #786757; font: bold 2em Tahoma; }
h2 { color: #B39B82; font: bold 1.4em Tahoma; }
h3 { color: #786757; font: bold 1.2em Tahoma; }
cite { color: #181511; font: italic 24px Georgia; }

Resultat 7

Nu sticker citatet ut och syns bra. Prova att göra citatet BOLD och konstatera att det ser alldeles för tungt ut.

4.4 CSS och bild

En bild som kompletterar texten önskas. Vi söker bilder på glada barn som är nöjda med tillvaron, det förstärker intrycket av att ett land ska vara rädd om sina mänskliga rättigheter. Jag googlade och hittade denna bild.

Ett förslag på en beskuren bild.

  • Beskuren del av bilden gör att vi endast fÃ¥r intrycket av V-tecknet som ett av barnen har

  • Den rosa t-shirten passar in i det övriga färgvalet

  • Den skrattande munnen syns även om den är skymd.

Vi ska nu infoga bilden i texten och låta bilden flyta till höger om texten. Det gör vi genom följande.

Bilden flyter till höger om texten med en marginal runt bilden som är 0px upp, 0px till höger, 5px nedåt och 15 till vänster.

img { float: right; margin: 0px 0px 5px 15px; }

Resultat 8

4.5 CSS validering

Nu kör vi till sist en CSS-validering och får ytterligare ett diplom att lägga in i HTML-dokumentet.

Slutresultatet

5 Läsarkommentarer

5.1 Kommentera själv

  • Här finns möjlighet att komplettera informationen, ställa frÃ¥gor eller kommentera detta dokuments mÃ¥lgruppsanpassning eller utformning.

Kommentar:

Namn (frivilligt)

Publicerad av:
Johan Sundström
  • Mälardalens högskola |
  • Box 883 |
  • 721 23 Västerås/Eskilstuna |
  • 021-10 13 00, 016-15 36 00 |
  • info@mdh.se |
  • Om webbplatsen