Contents:

Overview of HTML More CSS

 Brief history of HTML and XHTML  The box formatting model

 How the web works — clients and  Borders
servers  Margins and padding
 Browsers and rendering  Collapsing margins
 Formatting edges differently
The Basics of HTML  Background colours and
background images
 Hierarchical structure: elements  Selectors
(tags) and text  Multiple selections
 Basic XHTML document structure  Classes
 Paragraphs  <div> and <span>
 Whitespace and line breaks in  Descendant selectors
XHTML  Text appearance
 Headings  Typefaces
 Phrase mark-up in XHTML  Font sizes
 Hypertext links  Other font properties
 Embedded images  Leading
 Lists  Text alignment and justification
 Preformatted text
 Special characters in XHTML XHTML
 XHTML and Semantic markup
 What is XML?
Simple design customisation with CSS  Relationship between HTML and
XHTML
 Relationship between  Why use XHTML?
XHTML/HTML and CSS  Changes in the document prologue
 Linking to a stylesheet in a  Changes in element tags
separate file  Handling empty elements
 Examples of common
customisations HTML and Scripting
Images  Server-side scripting: forms
 XHTML Form elements
 Bitmapped images
 Client-side scripting
 Types of image: GIF, JPEG, PNG
 JavaScript
 Image type tradeoffs
 Graceful degradation
 Creating images
 Examples
Tables
Embedding Multimedia
 Using tables for tabular data
 Image maps
 Abusing tables for layout in XHTML
 Embedding flash movies
 Basic table structure
 Cells that span rows or columns
 Cell alignment  Graceful degradation
 Styling table cells
CSS Training Course Contents
Getting Started with CSS

 Introduction to this CSS course

 Course Organisation
 HTML Structure and Content, CSS Presentation
 Advantages of CSS
 Creating and Using Style-Sheets
 CSS Rules: The Basic Syntax
 Case, Whitespace and Comments in CSS
 The CSS Standards
 The Scope Of CSS
 Browser Support for CSS
 Hands-on Exercises

CSS Boxes and CSS Selectors

 The CSS Box Model

 CSS and Logical HTML Structure
 Styling Boxes: Borders, Margins and Padding
 The IE Box Model and Quirks Mode
 IE Box Model Workarounds
 Using IE6 Standards Mode
 Specifying CSS Distances
o Problems with Absolute Units: pixels and point sizes
o Using Proportional Units: em, ex and percentages
 Formatting Box Edges Differently
 Shorthand Syntax for Sets of Edges
 Using Margins and Padding Effectively
 Collapsing Vertical Margins on Paragraphs
 Using Negative Margins on Boxes
 Background Images on CSS Boxes
 Grouping Elements with HTML Classes
 Styling Multiple Elements Similarly (Selector Grouping)
 Block Boxes and Inline Boxes
 Block Box Behaviour
 Inline Box Behaviour
 Using the Generic Block Level Element: <div>
 Hands-on Exercises

Text Formatting in CSS

 Text Formatting
 Typefaces, Alternatives and Defaults
 Text Size — a Serious Usability Issue
 Font Characteristics
 Setting and Using Space Within Text
 Formatting Blocks of Text
 Using Arbitrary Inline Tags: <span>
 Hands-on Exercises
More CSS Selectors and Selection

 Using HTML Element IDs in CSS

 Using CSS Descendant Selectors
 Descendant Selector Examples
 Child, Sibling and Pseudo-Class Selectors
o Why You Need To Know Them
o Browser Support and CSS Hacks
 Distinguishing and Setting Link States
o Link, Visited, Hover, Active, Focus
 Modularising CSS Style-Sheets
o Simpler Management, Less Effort, More Control
 Embedded CSS Styles in HTML Documents
o How and When to Use Them (Rarely).
 Distinguishing Print, Screen and other Output Formats
o Special Issues in CSS for Print
 Hands-on Exercises

CSS Positioning

 Choosing the Right CSS Technique for Positioning Blocks

o The Position Property, Floats, Margins (inc. Negative and Auto), etc
 Static Positioning and Normal Flow
 Absolute Positioning Outside Normal Flow
 Relative Positioning — Not What You May Expect!
 Fixed Positioning Outside Normal Flow
 Relative Absolute Positioning
o Absolutely Positioned Blocks in Relatively Positioned Containers
 Floating Boxes with the CSS float property
 Page Layout Using Absolutely Positioned Blocks
 Page Layout Using Floated Blocks
 Hands-on Exercises

More on CSS Page Layout

 Alternative Methods of CSS Positioning

 Centring Blocks
 Styling Lists
 Redefining the Behaviour of Inline and Block Elements
 Hiding and Revealing Blocks
 Table Formatting in CSS
 Styling Table Cell Borders
 Page Layout with Table Display Properties
 Hands-on Exercises

Cascade, Precedence, Specificity and Inheritance in CSS

 Taking Control: Ensuring that CSS Rules Interact in the Way You Want
 Combining Styles: Different Types, Origins, Importance, Specificity and Order
 Examples: Combining Rules
 Cascading and Cascade Order
 Resolving Style Conflicts By Origin
 Resolving Style Conflicts By Importance
  Resolving Conflict By Selector Specificity
 Resolving Conflict By Order
 Non-CSS Presentational Hints
 Property Inheritance
 Hands-on Exercises

CSS Layers and Translucency

 Different Forms of Layered Presentation in CSS

 Layering with the z-index Property
 Different Methods for Creating Translucency Effects
 The CSS3 opacity Property
 opacity Example
 Fixed Attachment Backgrounds in Layers
 background-attachment Example
 Transparency and Semi-transpaency with Alpha-Blended PNG
 PNG Translucency Example and Sample Code
 Pseudo-Transparency with JPG Positioned Backgrounds
 JPG Pseudo Transparency Example
 Hands-on Exercises

Using CSS in the Real World

 Deploying CSS
 CSS Formatting Versus HTML Formatting
o Achieving a Balance
 Standard Tags and Semantic Markup
 Usability
o Readable Pages
o Screen Size and Fluid Design
o Text Size, Including Internet Explorer Quirks
 Table Layout and CSS Positioning
o Table Layout and CSS Positioning as Alternatives
o Combining Table Layout with CSS Positioning
 CSS Browser Support
 Testing Websites
o Using Test Suites and Multiple Browsers
o Cross-platform Testing in Single-platform Environments
 CSS Help and Advice
o Authorative Sources versus Web Myths and Gossip
 Free Lifetime Support
Contents:
Introduction to web site usability Navigation and searching in web site
usability
 Pragmatism and methodology
 Art versus engineering  From page design to site design
 Why everyone gets web site  Homepages are over-estimated
design wrong the first time  Splash screens — just say no
 Navigation: the three big
Page design issues in web usability questions
 Where am I?
 Screen space: the scarcest  Where have I been?
resource  Where can I go?
 User controlled presentation  Creating and revealing site
 Screen resolution structure
 Standard and non-standard  Reducing navigational clutter
content  Managing subsites or sections
 Application versions  Search-dominant versus link-
 Data lifetimes dominant users
 Response times  Implementing searching
 Connections and partial  Presenting search results
downloads  Search term usage
 Link descriptions  Search destination design
 Link titles  Presenting URLs and domain
 Link colours names
 Link consistency and site  Archival and old URLs
structure  Executable links and URLs
 Link expectations
 Outbound links Web usability testing
 Inbound links
 Linking to subscriptions and  Statistics and methods
registrations  Whom to test
 Linking from adverts  When and where to test
 Stylesheets for consistency  The test cycle
 Stylesheets for separating  Conducting a test
content from presentation  Observing a test
 Fonts and font sizes  Interpreting and using results
 Text size  Using results
 Frames: just say no
 Frames: more reasons to say no Intranets, accessibility,
 If you must use frames internationalisation and usability
 Printing issues
 Extranets
Content issues in web site usability  Intranets
 Accessibility
 Content is critical and web  Visual disabilities
content is different
 The value of an editor  Auditory and speech disabilities
 Discursive style  Motor and cognitive disabilities
 Keeping texts short  Internationalisation and cultural
 Checking and copy editing difference
 Scannability
 Plain English
 Managing long texts by chunking
 Page titles
 Headings, sub-headings, and pull
quotes
 Legibility
 Understanding image formats
 Reducing image file sizes
 Multimedia and plugins
 Animation
 Animation pitfalls
 Video
 Audio
 Downloading and streaming
 3D
 Conclusion: the attention
economy