Todays Schedule

1
Todays Schedule

• 930 - 940 HTML Page open house
• 940 - 950 HTML Presentation from the Redhook
  Group
• 950 - 1000 Open Critique
• 1000 - 1050 Introduce Assignment 7 and this
  weeks design concept Working with CSS for
  websites

2
Week 8

• Web Page Design continued
• Reading
• Rosefeld and Morville Labeling Systems
• Krug Street signs and breadcrumbs
• Brink and Wood Information Architecture pp.
  146-177
• Lecture CSS and XHTML current web standards
• Software CSS/Dreamweaver
• Assignment Simple web site using CSS in
  Dreamweaver
• Discussion Friday
• Members from UW Bookstore to bring in samples of
  effective navigation cues on the web
• Members from Do-it to bring in a samples of
  effective use of labels, lists and links on the
  web

3
Assignment 7
4
This assignment

• You will need your designs mocked-up in PSD
  before you start
• You can use the design or some elements you
  established in the PSD assignment
• however you are going to want to simplify
  tremendously.
• Commercial site vs. intranet
• If you plan to use your existing design or
  elements if I indicated on your rationale -
  please set up a time to meet with me to discuss
  the changes you need to make to your design to
  make it web compatible and appropriate for an
  intranet site.
• Meet with me to talk about how to approach coding
  your site once you have the PSD mock-ups
  REGARDLESS unless you are very comfortable doing
  this yourself.

5
Wednesday Tutorial

• Photoshop mock-up (created by me)
• We will create a CSS website.
• May need to finish on Friday
• This will equip you with the ability to turn your
  ideas into functional CSS websites

6
Schedule Change - ?

• Looking at the next 2 weeks.
• CSS and Dreamweaver are more challenging than
  Visioso
• Do we want to delay the due date on this until
  Wednesday (before Thanksgiving)?
• Would need to do Visio Tutorial on same day as
  presentation
• Will ask again on Wednesday

7
CSS Background
8
The Big Picture

• Browsers follow an object model
• First it creates a DOM (document object model)
• Interprets the HTML and creates all page elements
  (sub objects)
• Uses CSS to apply properties to each sub-object
  in the DOM (where the CSS designates a property
  to apply)
• CSS stylesheets were first called property
  sheets

9
CSS

• CSS Cascading Styles Sheets
• A way to style HTML.
• Whereas the HTML is the content, the style sheet
  is the presentation of that document
• Everything was once organized with tables

10
Inspiration

• Zen Garden
• http//www.csszengarden.com/
• Note Browser differences

11
Why CSS

• Clean up the mess
• Most (older) sites use tables and font tags
• None of which conveys semantic meaning
• ltfont size3 face helvetica color
  redgtPageTitlelt/fontgt
• What good is a font tag to a speech-synthesis
  browser?

12
Why CSS

• Search engines
• Increase accessibility
• Easier to maintain
• Easier to make site wide changes
• Can be used site wide

13
HTML vs. CSS

• lth2gtltfont colorpurplegtThis is
  purplelt/fontgtlth2gt
• This has to be applied EACH time
• VS.
• h2
• colorpurple
• This is universal to all selectors named h2

14
Cascadingwhat does that mean?

• Provisions for conflicting rules
• Priority
• Browser default
• External style sheet
• Internal style sheet (inside the ltheadgt tag)
• Inline style (inside an HTML element)
• So - an inline style
• (inside an HTML element) has the highest priority
  
• which means that it will override a style
  declared inside the ltheadgt tag, in an external
  style sheet, or in a browser (a default value).

15
Cascadingwhat does that mean?

• Provisions for conflicting rules (external)
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltlink href"../stylesheets/headerlinkstyles_subpa
  ges.css" rel"stylesheet" type"text/css" /gt
• ltlink href"../stylesheets/portfoliobase.css"
  rel"stylesheet" type"text/css" /gt
• ltlink href"../stylesheets/portfoliodescription.c
  ss" rel"stylesheet" type"text/css" /gt
• ltbodygt
• ---- this is where your webpage goes
• lt/bodygt
• lt/htmlgt

16
Why CSS.more reasons

• CSS stylistic language
• HTML structural language
• W3C body that debates web standards
• Is removing stylistic elements from HTML
• XHTML (current accepted standard)
• Some older stylistic HTML will be rendered
  obsolete and not supported
• ltfontgt, ltugt, ltstrikegt, ltcentergt
• HTML might eventually be replaced by XML
• More powerful, more flexible easily localized
• Does not declare styles

17
XHTML is a W3C Recommendation

• XHTML 1.0 became a W3C Recommendation January 26,
  2000.

18
CSS and XHTML

• Web 2.0
• Web 2.0 doesn't have a hard boundary, but
  rather, a gravitational core
• http//www.oreillynet.com/pub/a/oreilly/tim/news/2
  005/09/30/what-is-web-20.html
• CSS and XHTML is the 2.0 standard

19
XHTML
20
XHTML

• XHTML
• EXtensible HyperText Markup Language
• Aimed to replace HTML
• Almost identical to HTML 4.01
• Stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application
• Therefore follows the rules of XML

21
Why XHTML?

• We have reached a point where many pages on the
  WWW contain "bad" HTML.
• The following HTML code will work fine if you
  view it in a browser, even if it does not follow
  XML rules
• lthtmlgt
• ltheadgt
• lttitlegtThis is bad HTMLlt/titlegt
• ltbodygt
• lth1gtBad HTML
• lt/bodygt

22
XML

• XML markup language where everything has to be
  marked up correctly
• Results in "well-formed" documents.
• XML was designed to describe data and HTML has
  evolved a tool to display data. 
• Different browser technologies
• Internet on computers
• Internet on mobile phones and hand helds.
• Do not have the resources or power to interpret a
  "bad" markup language.
• HTML XML (and their strengths) markup
  language that is useful now
• XHTML pages can be read by all XML enabled
  devices
• AND while waiting for the rest of the world to
  upgrade to XML supported browsers XHTML gives
  you the opportunity to write "well-formed"
  documents now, that work in all browsers and that
  are backward browser compatible !!!
• and forward compatible ?

23
XHTML

• Follows the rules of XML
• elements must be properly nested
• elements must always be closed
• elements must be in lowercase
• documents must have one root element

24
XHTML elements must be properly nested

• Wrong
• ltulgt
• ltligtCoffeelt/ligt
• ltligtTea
• ltulgt
• ltligtBlack tealt/ligt
• ltligtGreen tealt/ligt
• lt/ulgt
• ltligtMilklt/ligt
• lt/ulgt
• Correct
• ltulgt
• ltligtCoffeelt/ligt
• ltligtTea
• ltulgt
• ltligtBlack tealt/ligt
• ltligtGreen tealt/ligt
• lt/ulgt

25
XHTML elements must always be closed

• Wrong
• ltpgtThis is a paragraph
• ltpgtThis is another paragraph
• Correct
• ltpgtThis is a paragraphlt/pgt
• ltpgtThis is another paragraphlt/pgt

26
XHTML elements must be in lowercase

• Wrong
• ltBODYgt
• ltPgtThis is a paragraphlt/Pgt
• lt/BODYgt
• Correct
• ltbodygt
• ltpgtThis is a paragraphlt/pgt
• lt/bodygt

27
XHTML documents must have one root element

• All XHTML elements must be nested within the
  lthtmlgt root element.
• All other elements can have sub (children)
  elements.
• Sub elements must be in pairs and correctly
  nested within their parent element.
• The basic document structure is
• lthtmlgt
• ltheadgt ... lt/headgt
• ltbodygt ... lt/bodygt
• lt/htmlgt

28
CSS Overview
29
Browsers (Stats)

• All major browsers support Cascading Style Sheets
• Web Statistics and Trends October 2006
• http//www.w3schools.com/browsers/browsers_stats.a
  sp
• Also see http//www.upsdell.com/BrowserNews/stat.
  htm

30
CSS

• The CSS syntax is made up of three parts
• Selector
• Three types
• ID (nameOfYourChoice or HTML)
• Class (. nameOfYourChoice or HTML)
• HTML(ltpgt, ltagt, ltbodygtetc)
• Property
• Value

31
CSS

• 'properties' are inside curly brackets (called
  braces)
• take the form of words such as color, font-weight
  or background-color.
• A value is given to the property following a
  colon and semi-colons separate the properties.
• This is a selector ? centerPanel
• This is a property ? positionrelative
  lt-Value followed by
• backgrounddff3fd
• margin-leftauto
• margin-rightauto
• width1000px
• height100
• z-index1
• Curly Bracket (Brace) ?

32
External vs. Internal Stylesheets

• Can be part of the page itself OR
• Can be brought in as a link
• I always start with them internal and then
  usually externalize

33
Inserting Style Sheets

• External
• ltheadgt
• ltlink rel"stylesheet" type"text/css
• href"mystyle.css" /gt
• lt/headgt

34
Inserting Style Sheets

• Internal
• ltheadgt
• ltstyle type"text/css"gt
• hr
• color sienna
• p
• margin-left 20px
• body
• background-image url("images/back40.gif")
• lt/stylegt
• lt/headgt

35
Selectors rule of thumb

• .class selectors for general use
• ID selectors for specific use
• You can group selectors
• Separate each selector with a comma.
• h1,h2,h3,h4,h5,h6
• color green
• Much more to know herebuy a good book

36
Class Selectors

• In the Style sheet
• p.right
• text-align right
• p.center
• text-align center
• In the HTML
• ltp class"right"gt
• This paragraph will be right-aligned.
• lt/pgt
• ltp class"center"gt
• This paragraph will be center-aligned.
• lt/pgt

37
Selectors

• Do NOT start a class or ID name with a number!
• It will not work in Mozilla/Firefox.

38
Pseudo Classes

• link is for an unvisited link.
• alink
• color black font-size 0.8em
• font-family Verdana
• visited is for a link to a page that has already
  been visited.
• avlink
• color black font-size 0.8em
• font-family Verdana
• active is for a link when it is gains focus (for
  example, when it is clicked on).
• aactive
• color black font-size 0.8em
• font-family Verdana
• hover is for a link when the cursor is held over
  it.

39
Adding Comments

• / This is a comment /
• p
• text-align center
• / This is another comment /
• color black
• font-family arial

40
Fonts and CSS
41
Font-family

• The font you specify must be on the user's
  computer
• little point in using obscure fonts.
• Safe' fonts are few
• Common arial, verdana and times new roman - but
  you can specify more than one font, separated by
  commas.
• If the user does not have the first font you
  specify, the browser will go through the list
  until it finds one it does have.
• This is useful because different computers
  sometimes have different fonts installed.
• font-family arial, helvetica, for example, is
  used so that similar fonts are used on PC (which
  traditionally has arial, but not helvetica) and
  Apple Mac (which, traditionally, does not have
  arial and so helvetica, which it does normally
  have, will be used).
• Note if the name of a font is more than one
  word, it should be put in quotation marks
• font-family "Times New Roman".

42
Font Family

• centerPanel
• positionrelative
• font-familyArial, Helvetica, sans-serif
• backgrounddff3fd
• margin-leftauto
• margin-rightauto
• width1000px
• height100

43
Font Size

• Be careful with this.
• Avoid Pixels inconsistent display (esp. on
  Macs)
• p
• font-familyArial, Helvetica, sans-serif
• font-size12px
• pts and picas okaybut really designed for print
• p
• font-familyArial, Helvetica, sans-serif
• font-size12pt
• ems are reccomended
• Relative font measurement wher one em the
  hieght of M in the default user size

44
ems

• 100 users default
• p
• font-familyArial, Helvetica, sans-serif
• font-size1em
• 90
• p
• font-familyArial, Helvetica, sans-serif
• font-size0.9em
• 110
• p
• font-familyArial, Helvetica, sans-serif
• font-size1.1em

45
Font Weight

• Bold or not
• In practice this usually only works as
  font-weight bold or font-weight normal.
• In theory it can also be bolder, lighter, 100,
  200, 300, 400, 500, 600, 700, 800 or 900,
• Many browsers will not support (safest to stick
  with bold and normal
• p
• font-familyArial, Helvetica, sans-serif
• font-size0.8em
• font-weight bold

46
Font Style

• This states whether the text is italic or not.
• It can be font-style italic or font-style
  normal.
• p
• font-familyArial, Helvetica, sans-serif
• font-size1em
• font-weight bold
• font-styleitalic

47
Font Decoration

• This states whether the text is underlined or
  not.
• text-decoration overline, which places a line
  above the text.
• p
• font-familyArial, Helvetica, sans-serif
• font-size1em
• font-weightbold
• font-styleitalic
• text-decorationoverline
• text-decoration line-through
• text-decoration underline should only be used
  for links because users generally expect
  underlined text to be links.
• This property is usually used to decorate links,
  such as specifying no underline with
  text-decoration none.

48
Sample

• body     font-family arial, helvetica,
  sans-serif     font-size 0.8em
• h1     font-size 2em
• h2     font-size 1.5em
• a     text-decoration none
• strong     font-style italic
      text-transform uppercase

49
Text Spacing

• The letter-spacing and word-spacing properties
  are for spacing between letters or words. The
  value can be a length or normal.
• The line-height property sets the height of the
  lines in an element, such as a paragraph, without
  adjusting the size of the font.
• number (which specifies a multiple of the font
  size, so '2' will be two times the font size, for
  example), a length, a percentage or normal.
• The text-align property will align the text
  inside an element to left, right, center or
  justify.
• p     letter-spacing 0.5em
      word-spacing 2em     line-height 1.5
      text-align center

50
Spans and Divs(Tying this all together)
51
ltspangt and ltdivgt

• "dummy" tags that don't do anything in
  themselves.
• Excellent for carrying CSS style

52
ltSpangt

• ltSPANgt is an "inline-tag" in HTML, meaning that
  no line breaks are inserted before or after the
  use of it.
• Use sparingly
• Style
• .hilite
• background-color FFFFCC
• HTML
• ltpgt These ltspan classhilitegtstuffed
  pepperslt/spangt are lovely.ltpgt

53
ltdivgt

• Dreamweaver calls them layers
• z-index1
• Think of them as a container
• Your page will now be composed of divs which will
  be described by styles
• Often called a box model

54
Key Properties to know
55
Positioning

• Describe the placement of the divs
• static
• absolute
• relative
• fixed
• inherit

56
Absolute Positioning

• Removed from the document flow
• Dreamweaver default
• Calculated from the upper left corner of the page
  
• Unless the div is defined inside another div, in
  which case it will be calculated from the upper
  left corner of the parent layer.
• Assumes a fixed design
• Not accessible
• Good Servant.bad master

57
Relative

• The position will be calculated relative to the
  element that comes before it
• Defaults to under the element before
• Use a float property to place side by side
• Remains in the flow of the document
• Good for accessibility
• Good masterfine servant

58
Margin and Padding

• A margin is the space outside of the element
• Padding is the space inside the element.

59
Property Examples

• All from http//www.w3schools.com/

60
Backgrounds

• Set the background colorThis example
  demonstrates how to set the background color for
  an element.
• Set an image as the backgroundThis example
  demonstrates how to set an image as the
  background.
• How to repeat a background image only
  verticallyThis example demonstrates how to
  repeat a background image only vertically.
• How to repeat a background image only
  horizontallyThis example demonstrates how to
  repeat a background image only horizontally.
• How to place the background imageThis example
  demonstrates how to place the image on the page.
• How to set a fixed background imageThis example
  demonstrates how to set a fixed background image.
  
• All from http//www.w3schools.com/

61
Borders

• Set the style of the four bordersThis example
  demonstrates how to set the style of the four
  borders.
• Set different borders on each sideThis example
  demonstrates how to set different borders on each
  side of the element.
• Set the color of the four bordersThis example
  demonstrates how to set the color of the four
  borders. It can have from one to four colors.
• Set the width of the bottom borderThis example
  demonstrates how to set the width of the bottom
  border.
• All the bottom border properties in one
  declarationThis example demonstrates a shorthand
  property for setting all of the properties for
  the bottom border in one declaration.
• All the left border properties in one
  declarationThis example demonstrates a shorthand
  property for setting all of the properties for
  the left border in one declaration.
• All the right border properties in one
  declarationThis example demonstrates a shorthand
  property for setting all of the properties for
  the right border in one declaration.
• All the width of the border properties in one
  declarationThis example demonstrates a shorthand
  property for setting the width of the four
  borders in one declaration, can have from one to
  four values.
• All the border properties in one declarationThis
  example demonstrates a shorthand property for
  setting all of the properties for the four
  borders in one declaration, can have from one to
  three values.
• All from http//www.w3schools.com/

62
Lists

• The different list-item markers in unordered
  listsThis example demonstrates the different
  list-item markers in CSS.
• The different list-item markers in ordered
  listsThis example demonstrates the different
  list-item markers in CSS.
• Set an image as the list-item markerThis example
  demonstrates how to set an image as the list-item
  marker.
• Place the list-item markerThis example
  demonstrates where to place the list-item marker.
• All list properties in one declarationThis
  example demonstrates a shorthand property for
  setting all of the properties for a list in one
  declaration.
• All from http//www.w3schools.com/

63
Text Margins

• Set the left margin of a textThis example
  demonstrates how to set the left margin of a
  text.
• Set the right margin of a textThis example
  demonstrates how to set the right margin of a
  text.
• Set the top margin of a textThis example
  demonstrates how to set the top margin of a text.
• Set the bottom margin of a textThis example
  demonstrates how to set the bottom margin of a
  text.
• All the margin properties in one declarationThis
  example demonstrates how to set a shorthand
  property for setting all of the margin properties
  in one declaration.
• All from http//www.w3schools.com/