ATT GÖRA: (080708) Utveckla beskrivning av nya stilmallen!
På denna sida beskrivs stilmallarna för denna webbplats samt varför de utformats och applicerats som de gjorts.
Denna webbplats, Björns studiewebb, har existerat sedan 2000, vilket gett gott om tid för att utveckla och ändra designen för webbplatsen och dess underwebbar. Idag, 2008-07-08, finns tre designfaser, vilket först beskrivs kort nedan för att beskrivas mer ingående ännu längre ner. :-)
Björns studiewebb utvecklades ursprungligen som en uppgift på kursen Interaktiv WWW-hantering på Örebro universitet hösten 2000. Bl.a. skulle man utveckla en webbplats med motiverad design, vilket ledde till att jag utvecklade webbplatsen med skånska flaggan som tema, d.v.s. röd och gul. :-)
Jag var inte riktigt nöjd med min ursprungliga design av Björns studiewebb. Därför försökte jag mig på en ny och enklare (?) design (den för bl.a. PHP och Java). Främst ville jag göra mig av med ramarna samt att jag levde i tron om att utvecklingen av skärmar hade gått framåt, d.v.s. man borde kunna förutsätta en upplösning på minst 1024x768 punkter på besökares skärmar (mot 640x480 till 800x600 när webbplatsen först skapades).
Läs mer... (om beskrivning görs...)
Sommaren 2008 läste jag kursen CSS-baserad webbdesign (och Webbdesign med JavaScript och Document Object Model) vid Umeå universitet och fick en bättre förståelse av CSS (men även XHTML samt JavaScript och DOM). Som en uppgift på (första) kursen så skulle man skapa en webbplats som enbart använder CSS (och XHTML 1 Strict) för design, vilket ledde till denna nya design (och uppdatering av min underwebb Stilmallar :-). Min "senaste" design, den s.k. CSS2-designen (då den bygger på CSS version 2), använder inga (X)HTML-tabeller för design (som den första och andra designen gör/gjorde). Resultatet av detta är bl.a. att CSS-filen är mer än dubbelt så stor men XHTML-koden så mycket mer läsbar (färre antal taggar). Ytterligare en fördel är att underwebbar (med denna design) kan läsas på alla typer av klienter, vanliga webbläsare på stationära/bärbara datorer liksom enklare webbläsare på handhållna datorer och mobiltelefoner (även om inte med lika trevlig form).
Läs mer... (om beskrivning görs...)
2011 började jag titta på HTML 5 och CSS 3, vilket ledde till CSS3-designen. Denna design bygger vidare på CSS2-designen, men har anpassats för HTML 5 och använder CSS 3 egenskaper.
Läs mer... (om beskrivning görs...)
Temat för webbplatsen är skånska flaggan, d.v.s. röd och gul. Gul har använts som bakgrundsfärg då den är lugnare än den röda och därmed återstår den röda för rubrikerna. Men för att göra texten läsbar så används, för längre textstycken, färgerna svart för text och vit för bakgrund (då jag antar att det är den mest läsbara kombinationen).
För största rubriken (h1), som använts
längst upp på sidorna, har
valts att använda en röd färg mot vit bakgrund. Som huvudsakliga
typsnitt för de två största rubrikerna (h1 och h2) har Copperplate
Gothic Bold valts och, om det saknas, något av typsnitten i familj sans
serif (Verdana, Arial och Helvetica). För övriga rubriker har
typsnittsfamiljen sans serif valts.
h1 {
color: red;
background-color: white;
font-family: "Copperplate Gothic Bold",
Verdana, Arial, Helvetica, sans-serif;
}
h2 {
font-family: "Copperplate Gothic Bold",
Verdana, Arial, Helvetica, sans-serif;
}
h3, h4, h5, h6 {
font-family: Verdana, Arial, Helvetica,
sans-serif;
}Det mesta av webbplatsens innehåll är placerad i stycken, länkar eller punktlistor. Utformningen av denna text ska vara den samma för all text utom rubriker ovan. Verdana är som sagt ett lämpligt typsnitt för att läsa på skärmen och är därför det huvudsakliga typsnittet. Storleken 13 pixlar har valts efter diverse tester på skärmar med olika upplösningar och inställningar. (Tidigare hade storleken 10 punkter använts, bl.a. då Verdana i standardstorlek visar sig inte vara så lätt att läsa eller se så bra ut. Erfarenhet har också visat mig att punktstorlekar varierar i olika upplösningar på/inställningar för skärmar, vilket kan påverka design av hemsidor.)
p, a, ol, ul {
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 13px;
}För text som inte ska visas med webbplatsens "standard-inställning"
(taggarna p, a, m.fl.) används klasser.
Några av de saker som ändras är
t.ex. kod, rubriker i tabeller och kommentarer.
Nedanstående stilar har skapats för att främst hantera stilmallars funktion i äldre versioner av webbläsare men även för att kunna applicera stilar på t.ex. celler och för att motverka andra stilar.
.brodtext, .normal {
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 13px;
}Stilmall nedan används bl.a. för att ändra text i rubriker i tabeller.
.fetgul {
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 13px;
font-weight: bold;
background-color: yellow;
color: black;
}För att verkligen markera något, utöver t.ex. fet stil, så används
nedanstående stilmall tillsammans med span-taggen.
.highlight {
color: black;
background-color: yellow;
}
.gulbakgrund {
font: 13px Verdana, Arial, Helvetica,
sans-serif;
color: black;
background-color: #ffff99;
}Kod är tänkt att visas med fast teckenbredd och med gul bakgrund för att göra den enkel att hitta bland annan text.
.kod {
font: 13px "Courier New", Courier,
monospace;
color: black;
background-color: #ffff99;
}
.luftigt {
margin-top: 1em;
}Kommentarer är just det, d.v.s. dom ska inte synas så mycket då dom kan förklara något som inte har med ämnet direkt att göra.
.kommentar, .parentes {
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 10px;
color: blue;
background-color: white;
margin-left: 25;
margin-right: 25
}Utformning av länkar (d.v.s. A-taggen) har valts att inte ändras, d.v.s. de ska, utöver den blåa färgen och understrykningen, vara utformade som omgivande text. Men i menyer (de till vänster) önskas inga understrykningar då dessa antas kunna uppfattas som länkar. Därför används egenskapen text-decoration med värdet none.
.lank{
text-decoration: none;
}
.lista {
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 13px;
margin-top: 20px;
}Vissa rubriker har placerats i celler, till vilka denna stilmall används.
.rubrik {
color: red;
background-color: white;
font-family: "Copperplate Gothic Bold",
Verdana, Arial, Helvetica, sans-serif;
}Sidfoten har anpassats med nedanstående stilmall.
.sidfot {
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 11px;
}En del rubriker i tabeller har bevisligen valts att visa med annat utseende (d.v.s. annat än med klassen fetgul ovan).
.tabellrubrik {
color: white;
background-color: blue;
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
}Till början på sidan
Stilmallar för denna design påminner mycket om den för den ursprungliga designen. Endast smärre förändringar har gjorts, d.v.s. stilmallarna används främst för att ändra utseende på elementen i webbsidorna.
ATT GÖRA: (2005-någon gång) Beskriv nya stilmallen mer ingående.
Till början på sidan
Denna senaste design, CSS2-designen, är mycket mer komplex, främst då jag använder mig av positionering. Bl.a. skapas de två kolumnerna för menyn och innehållet genom att "flyta" (float) blocken med dess innehåll. Dessa två block har, i princip, placerats i en s.k. container (ett div-element med gul bakgrund) för att skapa den gula ramen för sidan.
ATT GÖRA: (080708) Beskriv senaste stilmallen utförligt.
Till början på sidan
Denna senaste design, CSS3-designen, bygger vidare på CSS2-designen, men för HTML 5.
ATT GÖRA: (111016) Beskriv senaste stilmallen utförligt.
Till början på sidan
Denna senaste design bygger på design stilen Material Design och använder CSS-ramverket Skeleton.
ATT GÖRA: (171029) Beskriv senaste stilmallen utförligt.
Till början på sidan