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)

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

 

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. som attribut via style="egenskab: værdi" i det pågældende tag
2. som style element i headen via <style type="text/css"> </style>
3. som ekstern style sheets (CSS filer)
 
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 arve udseende efter 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"> </div> 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,

No Layout 

1. The Floating Layout ("Iiquid design") lounge.html

2. Absolute   "The Jello Layout" = "Ice cube " = using a fixed width wrapper

#allcontent {starbuzz.css (line 65)
background-color:#675C47;
margin-left:auto;
margin-right:auto;
padding-bottom:5px;
padding-top:5px;

width:800px;

}

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

 

Se også følgende dokument om layout

 


 

Wireframes

Til planlægning af det overordnede layout for en webside.

wireframe

 

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

 

Strukturdiagrammer

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

sitemap

 

Portfolio website

Eksempler: Eksempel på simpel portfolio

 

http://www.slipsager.net/mdu/1sem/HTML_CSS/undersgelse/absolut_layer_test.html

Opgaver/Øvelser

 

1. Tutorial two column layout

2.

Gå sammen to og to, og lave et strukturdiagram 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. layouttet op bygget.

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