Cascading Style Sheets

1
Cascading Style Sheets

• Advanced Web Design
• Dreamweaver 2
• Your Presenter Laura Silberstein

2
Agenda

• Announcement Short Class tonight
• DW Accessibility Prefs
• Resources for those who want more
• Image maps Photo Album Trick
• Cascading Style Sheets
• Homework ?
• Secure FTP login at Stanford

3
DW Accessibility

• EditPreferencesAccessibility

Dreamweaver MX also has check box for Tables
4
Access Data Tables

• HTML Code useful for tables
• ltSUMMARY gistgt
• ltCAPTIONgt What it is lt/CAPTIONgt
• ltTH scope colgt Header Info lt/THgt
• ltTH scope rowgt Header Info lt/THgt

5
Table Access Code

• Summary field
• Caption field
• Headings with scope tags
• Rows with scope tags

6
Layout Tables

• Layout Tables are not recommended for
  accessibility
• ?Use Layers and CSS instead
• Problem Browsers must be gt 4.0 versions
• Solutions
• Use Layers and export 2 versions of your page
• For gt4.0 Browsers using CSS and/or layers
• For lt4.0 Browsers (DW converts code to tables)
• Use Tables with ltsummarylayout tablegt tag

Keep It Simple
7
Layout Table Access

• Using layout tables with Accessibility-compliant
  tags

8
Access Images

• ltALT what it isgt
• ltlongdesc linkToLongDesc.htmgt

9
Resources for those who want more

• Macromedia Exchange
• Atomic Learning Library
• Entheos DW Tutorials
• http//www.lynda.com/
• H.O.T. Series (Hands-on Training)
• Macromedia Tutorials (MX 2004)
• PDF file on suse-jumbo server /DW_samples
• Learning CSS (from w3C) 1 2

10
Image Maps

• Copy imageMap pics folder to your website folder

11
Exercise 1 My First Image Map
Copy pics from suse_jumbo imageMap pics folder to
your website folder

• Make new DW html page
• Insert world picture ? Save
• Repeat steps 1 2 above for each continent
• Africa, Asia, Australia Oceana, Europe,
  NorthAmerica.htm, SouthAmerica.htm

12
Add hot spots

• See PDF tutorial file for tips

• Name your map
• Use rectangle tool or circle tool to drag hot
  spot
• Alt tag description
• Link (point and shoot or browse)
• Click arrow tool to complete polygon enclosures
• Test in Web Browser (F12)

13
Exercise 2Photo Album Trick

• Create empty folder in your website directory
• Name folder Destination
• Commands Create Web Photo Album

14
Set Up The Batch

• Need to have Fireworks installed
• Browse to find photos
• ?Use kids_Disneyland folder
• Set your Destination folder
• Set thumbnail size
• Set columns number

15
Watch the Magic

• DW Launches Fireworks
• Sets up and processes batch
• Creates image thumbnails
• Creates larger JPGS
• Writes HTML
• Youre Done!

16
Cascading Style Sheets

• Who?
• What?
• Where?
• When?
• Why?
• How?

17
Who?

• W3C World Wide Web Consortium
• CSS1 (96-99)
• 50 properties
• http//www.w3.org/TR/REC-CSS1
• CSS2 (98 2001)
• 120 properties
• http//www.w3.org/TR/REC-CSS2

18
What?

• Global typeface style sheets
• ? ltfontgt tags deprecated
• Also borders, colors, body imgs and color, more
• Syntax
• H1 color green

declaration
selector
19
CSS Syntax

• H1 color green

Value
Property
20
Where?

• Script in ltHEADgt of HTML page
• Inline CSS inside ltBODYgt tags
• External file with script
• filename.css

Best choice External file!!
21
When?

• gt 4.0 Web Browsers
• NOTE Dreamweaver will convert your CSS-styled
  page to HTML code for version 3.x Web browsers
• Netscape 4.0 notorious for CSS problems
• Layout borders, blocks, colors, spacing
• Style text fonts, weights, colors
• Background colors (and images)
• Highlight text
• Over-ride link style
• Use with XML databases ? XHTML

22
Why?

• Fonts consistent sizes
• Mac default 72 dpi
• Windows default 96 dpi
• CSS sets font size in Pixels
• Consistent style across the website
• Use one CSS stylesheet to control ALL pages
• Code once see everywhere

23
How?

• Hand-code or use DW
• Window CSS Styles
• New CSS Style ( icon, lower right)
• Set font properties
• Redefine HTML tag (eg., ltbodygt )
• Set in external file

24
Before adding CSS
Click on here to open CSS style dialog box
25
HTML Tag CSS

• Redefine Tag
• Choose body
• (or p or td)
• Define in New Style Sheet

1
3
2
26
Name the File

• Save .css file in root folder of website
• filename uses normal rules
• Define the style next

27
Define the style

• Type panel
• ? Font
• Serif for body
• Sans serif for headings
• ? The rest is optional
• Size
• Weight
• Style

28
After body style CSS
29
The CSS is linked
30
Exercise 3Linked CSS file

• Open your index.html page
• Window ? DesignCSS Styles
• Add button
• Redefine body tag
• Define in New Style Sheet
• Save it in your root folder
• Set font properties
• Preview in Web browser (F12)

31
Repeat for H2 style
Edit Style (pencil paper icon)
32
Edit Stylesheet

• Select filename of stylesheet
• Click Edit button
• Click New button

33
Redefine ltH2gt Tag

• If Heading 2 style text was selected
• DW shows h2 in selector pull-down list
• Click OK

(if not ? type it in)
34
Set h2 Font Props

• Sans serif
• Size
• Weight
• Color
• whatever

35
H2 Styled by CSS
36
The CSS Code

• Open file.css to see code
• Edit by hand if you want to

37
Apply To All Pages

• Add the link code to each web page header
• Your Choice
• CSS Styles Panel
• Copy/Paste code
• DW Find/Replace code

38
Exercise 4Attach Styles

• Open each page
• Click Attach icon
• Click Attach button
• Browse for .css file
• Add as link

39
Linking .css File To All

• Repeat for each page
• Attach
• Browse
• Link
• Done

40
CSS SelectorPsuedo-class for links

• Avoid normal link style
• Requires gt IE 5.5 or Netscape 6.2
• Define in this order
• alink
• avisited
• ahover
• aactive
• Clear browser history to test links

41
Clear History

• IE5
• Tools ? Internet Options ? General ? Clear
  History
• NN4
• Edit ? Prefs ? Navigator ? Clear History
• Refresh Browser (F5 or CTRL R)

42
CSS SelectorPsuedo-class for links

• Window CSS Styles
• New CSS Style
• Selector Type
• DW MX Use CSS Selector
• DW MX 2004 Advanced
• Type or choose alink
• Define style
• Repeat for avisited and ahover
• Test in Web Browser

43
CSS Advanced Links

• Homework 2
• Apply alink styles using CSS selector
• Add
• avisited
• ahover
• aactive

44
On Your Own

• Homework 2 gt alink
• Advanced Students
• Explore CSS Classes
• Look at code for ltspangt tags and ltclass
  myClassgt tags
• Use these slides (below), DW Help, Web tutorials
  to explore more about CSS

45
CSS Classes

• Apply text style anywhere
• Doesnt depend on HTML tag
• Define new class (starts with .name)
• Can use locally to over-ride alink code
• Assign new text properties for links
• eg., in menu bar with different background color
• Select text, right-click and choose CSS ? Styles
  from DW menu

46
Step 1Define CSS Class

• Add to your style sheet the usual way
• Select Class or Custom Class
• Name must start with DOT
• Define properties of text

47
The .silly class

• .silly
• font-family "Baskerville Old Face", Batang,
  "Bauhaus 93", "Book Antiqua, serif
• font-size 18px
• font-weight bold
• color 990099

Code View of .css file
48
Step 2Apply CSS Class to Text
Right-click on selected text

• Select text
• Right-click
• Choose CSS styles from pop-up menu
• Choose your class name

49
Code View

• After applying .silly class format to selected
  text, HTML code has added a ltspangt tag

HTML Code View
WYSWYG View
50
Multiple Link Styles
a.twolink color ff0000 font-family "Comic
Sans MS", "Lucida Sans, sans-serif
a.twovisited color 0000ff, font-family
"Comic Sans MS", "Lucida Sans, sans-serif
a.twohover font-size 110 font-family
"Comic Sans MS", "Lucida Sans, sans-serif

• In the HTML page
• lta href"bio.htm" class"two"gt Bio lt/agt
• OR
• ltspan classtwo"gtlta href"http//www.yahoo.com"gt
  YAHOOlt/agtltbrgtlta href"http//www.google.com"gtGOO
  GLElt/agtlt/spangt

51
Sample Class CSS Code

• a.donkeylink color red text-decoration
  none a.donkeyvisited color purple
  text-decoration none a.donkeyhover color
  orange text-decoration underline
  a.donkeyactive color blue

In the HTML page lta href"bio.htm"
classdonkey" target"_blank"gt Bio lt/agt
52
Inheritance

• When you add in extra link groups beyond the
  default group (the one without the class),
  further groups will inherit or take on the
  formatting of the default group.
• Example If you have defined your default links
  as bold, all future link classes will be bold
  unless you put them back to normal using
  font-weight normal