Interaktionsudvikling, Multimediedesigneruddannelsen, Århus Erhvervsakademi

Dag 3

HTML og CSS

Plan

Løsningsforslag for dag2

  1. CSS
  2. Layout via CSS
  3. Wireframes, Strukturdiagram
  4. Præsentation af projekt (se Fronter)

Pensum:

 

Head First – HTML with CSS & XHTML

Chapter 8 - 12

 

 

Supplerende resourcer

HTML.dk Om CSS http://www.html.dk/tutorials/css/default.asp
Maxdesign Om CSS http://css.maxdesign.com.au/index.htm
Firefox addons Firebug https://addons.mozilla.org/da/firefox/addon/1843

 

Værktøj til CSS retning m.m.

Webdeveloper kan hentes ved at clicke på dette link. (husk at tjekke om du har en passende version af Firefox før du tilføjer denne addon)

 

Kapitel 8 getting started with CSS
 
Husk indhold styres med XHTML og præsentation/stil styres med CSS (style sheet)
 
 
At bruge CSS
 
 
p{   color:green;   }
 
selektor     { egenskab/property :   værdi/value; }
 
 Eksempel fra dag 1 øvelse 6

 

3 metoder til at bruge CSS i et HTML dokument
 
1. Inline CSS : css som style="egenskab: værdi" attribut inde i et tag
2. Intern CSS som style element i headen via <style type="text/css"> </style>
3. Ekstern style sheet via ekstern CSS fil
 
Se: http://www.html.dk/tutorials/css/lektion2.asp
 
 
 

Eksterne CSS filer er smarte at anvende ved websites hvor de enkelte websider kan refererer til samme style sheet.

 

 Sider i sitet som skal fremstå lidt anderledes en standarden på sitet kan så styles via på en CSS i headen (intern style sheet) eller som attribut (inline).
Eksempel: http://www.w3schools.com/css/demo_default.htm
Eksempel: http://www.csszengarden.com/

 

 

Eksempel på brug af eksterne style sheets fra chapter 11. Lounge.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print/print.css" media="print" />

</head>


 
Nedarvning af CSS (s.311- 314)
 
F.eks. Vælges body elementet som selektor i et CSS, vil underelementerne/børnene  dvs. h1, p m.m. arve stylingen fra body.
 
 
 
 
Kapitel 9 styling with fonts and colors
 
font-family:
font-size
color
font-weight
text-decoration
background-color
 

Se også http://www.html.dk/tutorials/css/lektion3.asp

 

Online referencer:
 
http://www.w3schools.com/css/css_reference.asp
 
http://meyerweb.com/eric/css/references/css2ref.html
 

 

Box modellen som gælder ved styling af alle blockelementer (h1,h2,p, div, blockguote m.m.)

boxmodel

Eksempel:chapter 11. lounge.html

 

Chapter 12 Layout and position

Making a division of blockelements with the div tag.

<div id="elixirs"> in  lounge.html

 

#elixirs {

width: 200px;
margin-left: 40px;
padding: 0px 20px 20px 20px;

float: right; // moves thís division out of the flow of the blockelements.

 

}

 Two-column layout example Chapter 12: Starbuzz Coffee,

 

1. The Floating Layout ("Liquid design") lounge.html . Tilpasser sig skærmens størrelse.

 

float

 

 

2. Absolute   "The Jello Layout" = "Fixed width layout " = using a fixed width wrapper. Designet er her nemmere at styre.

#allcontent {starbuzz.css (line 65)

background-color:#675C47;

 

margin-left:auto; // centrere alt indholdet

 

margin-right:auto;

 

padding-bottom:5px;

 

padding-top:5px;

width:800px; // alt indholdet vil være have en fast width på 800px.

}

 

På følgende Screendump anvendes Firefox værktøjet (addon) "Webdeveloper" til at rette og arbejde med et fixed width layout og css generelt.

Webdeveloper kan hentes på ved at clicke på dette link. (husk at tjekke om du har en passende version af Firefox før du tilføjer denne addon)

 

fixed width

 

Ved at linke starbuzz.html til det eksterne starbuzz960.css kan man tilpasse layouttet til at udnytte mere af en 1024x768px skærmopløsning.

Se eksempel.

 

 

3. The Floating Layout with Absolute and Fixed elements

 

#award {    

left:365px;
position:absolute;
top:30px;
z-index:99;
}

#coupon {

left:-90px;
position:fixed;
top:300px;

}

 

 

The three column layout

 

 

Fixed width via Absolute positioning ! (Her bliver også de positionerede elementer centreret )

 

 

Se også følgende dokument om layout

 

Modellering af site struktur og side struktur (Informationsstruktur og layout)
 

Strukturdiagrammer

Planlægning af sites struktur. Strukturdiagrammer omtales også som sitemap eller flowchart.

sitemap

 

Portfolio website

Eksempler: Eksempel på simpel portfolio

 

Wireframes

Til planlægning af det overordnede layout for en webside. Dette layout kunne f.eks. på alle de blå sider i ovenstående sitemap.

wireframe

 

Endelige webside: http://www.headfirstlabs.com/books/hfhtml/chapter12/starbuzz-work/

 

 

 

 

Opgaver/Øvelser

 

1.

Gå sammen to og to, og lave et strukturdiagram/sitemap og et wireframe for følgende portfolio.

Eksempler: Eksempel på simpel portfolio

Prøv at forklare html og css koden for hinanden. Hvordan er f.eks. layoutet opbygget, hvor linkes der til et eksternt css m.v..

 

2. Tutorial Horizontal List. Viser hvordan man kan lave en horisontal navigationsmenu via lister og css.

 

3. Lav et eller flere forskellige layouts via css til jeres introtur sitet.