Introduction to Web Authoring

1
Ellen Cushman cushmane_at_msu.edu
Introduction to Web Authoring
Class mtg. 14
www.msu.edu/cushmane/wra210.htm www.msu.edu/cush
mane/wa2.htm
2
Web Tech UA Schedule

• Dates of interest for the UA project
• 2/11 - Introduction to assignment 3 Teams
• 2/13 - UA Background Principles
• 2/18 - Semantic Principles of User Assistance
• 2/21 - UA Storyboard
• 2/25 - UA Walkthrough
• 2/27 - Workshop Dreamweaver CSS
• 3/3-3/5 - Spring Break
• 03/10 WorkshopDreamweaver CSS
• 03/12 WorkshopUser Feedback Revision Plans
• 03/17 Final Versions Posted

3
Todays Agenda Next Class

• Download a template for your personal site
• Apply the template
• Troubleshoot problems and adapt content to your
  template
• Post your project logs

• More fun with CSS your UA sites
• Develop the site architecture and import
  content.

4
Recall What is CSS?

• Multiple styles can be defined and used in
  individual HTML documents and across multiple
  HTML documents (fonts, spacing/placement, colors)
• Browser follows an order of interpretation (aka,
  a cascade) of the style definitions
• 3 W3C CSS standards (CSS1 and CSS2 are current
  CSS3 in development)

5
Style hierarchy

• Style sheets work together in a cascading manner
• Inline (Controls style on an element basis in the
  ltbodygt of htm) trumps embedded and linked
• Embedded (controls style in the ltheadgt of htm)
  trumps linked
• So use linked for global, generic types of things
  and keep to a minimum

6
Page.html
page.css
In most cases, you will have two documents
controlling how a page looks on the screen. One
html file and one css file.
Browser Rendered View
7
Linked style

• Linked style uses same syntax as embedded style
  but is in a separate .css file that you link to
  from the HTML file requesting the style
• Controls style more globally, spanning documents
  or an entire Web site

8
Saving Linked files

• Note the folder/file architecture of the
  stylesheet youve downloaded.
• Save the image folder to your Web on afs/p drive
  space. Make sure it has images and the .css file
  in it.
• Do NOT put the index. Html into your afs
  folder!!!! You will overwrite all your other
  index pages.

9
Linked style 2

• Open Dreamweavergtyour personal pagegt recall the
  name/location the stylesheet youve
  downloadedgtinsert its name into the head in the
  code of your personal page.
• HTML file using the linked style uses ltlinkgt tag
  within the ltheadgt tag to link to it
• lthtmlgtltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"linked_style.css"gtlt/headgt

10
Linked style 3

• In Dreamweavergtopen the css sheet in a new window
• Heres the style definition in the
• linked_style.css file
• h1 font-family Arial,sans-serif font-size
  48pt font-weight bold
• Find other style codes using what you know about
  semantic structure

11
CSS Syntax
Remember all code has to be enclosed!

• CSS rules have the following structure
• selector property1 value property2 value
• P font-family sans-serif font size 9
• With this rule applied, everything enclosed by a
  ltpgtlt/pgt tag will display in sans-serif, 9pt.

12
CSS will make your old HTML look uhhhhgly!

• CSS references objects in most cases, chunks of
  text or images enclosed by tags so you must
  define as an object any text that you want to
  reference in a style sheet.
• This means You have to close those ltpgt tags

13
CSS will make your old HTML look uhhhhgly, 2

• It also means
• You define object Classes, IDs and learn their
  properties and value ranges
• You learn to use wildcard tags like ltdivgt and
  ltspangt to define sub-sections of text within the
  body of a document
• You have to get good at designing
  documentsthinking ahead what will help both
  content developers and readers

14
CSS Classesnaming objects

• In CSS, a class refers to a particular category
  of a more general tag.
• Let say you wanted odd and even table cells to
  be different colors for easier scanning In your
  css style sheet you would define the following
  code for table cells
• TD font-face sans-serif font-size 12pt
• .even bgcolor FFFFFF
• .odd bgcolor CCCCCC

15
CSS Classescont.
TD font-face sans-serif font-size
12pt .even background-color FFFFFF .odd
background-color CCCCCC

• In your HTML code for the table, you simply
  reference the class to invoke the style
• lttd classevengtdisplay this text with a white
  backgroundlt/tdgt
• lttd classoddgtand this text with a grey
  backgroundlt/tdgt

16
Getting more specificIDs

• You can set IDs for specific kinds of objects
  too by giving them a unique ID name and set of
  display rules.
• Lets say, for example, we want a table row that
  serves as a column header it could be different
  than our odd or even classes of rows and even
  different from our default row look.

17
An ID rule

• Here, I have added a new ID to our TR rules
• Now, I can specify a row as a header
• lttr idheadergtRed, sans-serif, 12pt type on a
  white background, por favorlt/trgt

TR font-face sans-serif font-size
12pt .even background-color FFFFFF .odd
background-color CCCCCC header color red
18
ltDIVgt ltSPANgt are your friends

• ltdivgt and ltspangt tags allow you define exceptions
  to the general rules of your body textand they
  are helpful tools for document designers and web
  developers
• ltdivgt is usually used to designate styles for
  block elements that should stand apart from the
  body textlike callout quotes. Everything inside
  a ltdivgt tag takes on the ltdivgt attributesand you
  can specify classes and ids for ltdivgt too!

19
More on ltSPANgt

• The ltspangt tag is usually used to change the
  display attributes of a short run of text or
  objects within a block-level element (such as a
  paragraph or table cell).
• I might use ltspangt, for example, to define a look
  for code examples (like the one below) that is
  different than the body text
• ltspan classexamplegtTR font-face sans-serif
  font size 12ptlt/spangt

20
Seeing a document as a collection of objects

• All of these tags, attributes, rules, selectors,
  declarationswhat do they mean?
• They are all tools you use well ONLY if you can
  see a document as a collection of objectsso,
  lets practice.

21
For Homework

• apply the CSS to your personal page
• adapt the color scheme, images, and organization
  of the css style sheet to suit your tastes
• in your personal log explain what you have
  changed and how.