CSS Package
Build on existing HTML or Dreamweaver knowledge and gain an understanding of both XHTML and CSS. Learn how to apply CSS skills to separate document content from document presentation.
Quick Facts
$1,485 incl GST
Save $990.00
Download Course Brochures
About the Package
This package is for web designers who want to streamline development and maintenance using style sheets. Learn to use CSS to improve workflows within HTML or Dreamweaver, and improve content accessibility, provide more flexibility and control presentation. Multiple pages can share formatting, reducing complexity and repetition in the structural content.
The CSS Package includes the following courses:
Advanced Website Design Using CSS (2 days)
CSS Masterclass (3 days)
Prerequisites
Participants should complete the Dreamweaver CS4: Website Development course, or have equivalent skills, before attending Advanced Website Design using CSS. Participants should also follow the sequence of the courses listed above. More details on prerequisites can be found within individual course descriptions.
Subject to prerequisites being met, one or more participants can book into a package. Review training package conditions .
Courses Units: Advanced Website Design Using CSS
- Unit 1: Intro to CSS
- - Defining Styles with CSS
- - CSS Selectors
- - CSS Properties
|
- Unit 2: Basic Text Styling
- - Specifying font sizes and families correctly
- - Controlling the appearance of hypertext links
- - Styling individual words rather than paragraphs
- - Specifying the line-height (leading) of text
- - Indenting and centering text
- - Controlling the appearance of lists (including changing or removing bullets, using images for list item bullets, removing list indenting, and displaying a list horizontally)
- - Removing page margins
- - Adding comments to a CSS file
|
- Unit 3: CSS and Images
- - Adding borders to images
- - Wrapping text around an image without using the HTML align attribute
- - Setting a background image for a page with CSS
- - Positioning background images
- - Creating a background image that remains stationary when the text scrolls
- - Placing text on top of an image
|
- Unit 4: Navigation
- - Replacing image-based navigation with CSS
- - Using lists to create a navigation menu
- - Using CSS to create rollover navigation without images or JavaScript
- - Making a horizontal menu using CSS and lists
- - Creating button-like navigation using CSS
|
- Unit 5: Tabular Data
- - Adding borders to tables without using the HTML border attribute
- - Displaying table rows in alternating colors
- - Changing a table row’s background color on hover
|
- Unit 6: Forms and User Interfaces
- - Styling form elements using CSS
- - Applying different styles to fields in a single form
- - Controlling white space and line breaks in a form
- - Using different colored highlights in a select menu
- - Highlighting the form field that the user clicks into
|
- Unit 7: Browser and Device Support
- - Testing a site in different browsers
- - Testing for browsers on different operating systems
- - Installing multiple versions of Internet Explorer in Windows
- - Hiding CSS from Netscape 4
- - Hiding CSS from other browsers (the Box Model Hack)
- - Understanding Internet Explorer’s Quirks Mode
- - Creating a print style sheet
- - Using alternate style sheets
- - Making a style sheet switcher
- - Using alternate style sheets without duplicating code
|
- Unit 8: CSS Positioning and Layout
- - Deciding when to use a class and when to use an ID
- - Can I make an inline element display as if it were block-level, and vice versa
- - Margins and padding in CSS
- - Stopping the next element moving up when you use float
- - Aligning elements left and right without using a table
- - Setting an item’s position on the page using CSS
- - Cent ring a block on the page
- - Creating a liquid, two-column layout with the menu on the left, and the content on the right
- - Reversing this layout and putting the menu on the right
- - Creating a fixed-width, centered, two-column layout
|
Courses Units: CSS Masterclass
- Unit 1: CSS Foundations
- - Structuring code correctly
- • Meaningful markup
- • DOCTYPE switching and browser modes
- • Validation
- - Advanced CSS selectors
- • Universal selector
- • Child and adjacent sibling selectors
- • Attribute selectors
- - The cascade and specificity
- - Inheritance
- - Planning, organising, and maintaining stylesheets
- • Adding and removing comments
- • Optimising your stylesheets
- • Style guides
|
- Unit 2: The Visual Formatting Model
- - The CSS Box Model
- • IE/Win and the box model
- • Margin collapsing
- - Positioning
- • Visual Formatting model
- • Relative positioning
- • Absolute positioning
- • Fixed positioning
- - Floating
|
- Unit 3: Background Images
- - Rounded-corner boxes
- • Fixed width
- • Flexible
- - Drop-shadows
- • Easy CSS drop shadows
- • Clagnut drop shadow
- • Fuzzy shadows
- - Fluid Images
|
- Unit 4: Image Replacement
- - Using bitmaps
- • Fahner method
- • Phark method
- • Gilder/Levin method
- - Using Flash
- • Inman Flash Replacement
- • Scaleable Inman Flash Replacement
|
- Unit 5: Advanced Link Styling
- - Fancy link underlines
- - Highlighting different types of links
- - Highlighting downloadable documents and feeds
- - Visited link styles
|
- Unit 6: Buttons and Rollovers
- - Simple rollovers
- - Image rollovers
- - Pixy-style rollovers
|
- Unit 7: Styling Lists and Navigation Bars
- - Basic list styling
- - Creating a vertical navigation bar
- - Highlighting the current page in a nav bar
- - Creating a horizontal navigation bar
|
- Unit 8: More Complex Navigation
- - CSS Tabs
- - CSS image maps
- - Dropdown menus
|
- Unit 9: Advanced Layout
- - Centering a design
- • Using positioning
- • Using negative margins
- - Float-based layouts
- • Two-column layout
- • Three-column layout
- - Liquid and elastic layouts
- - Faux columns
|
- Unit 10: Introduction to hacks and filters
- - Using hacks sensibly
- - Filtering separate stylesheets
- • Internet Explorer conditional comments
- • Band pass filters
- - Applying IE conditional comments
|
- Unit 11: Filtering individual rules and declarations
- - Child selector hack
- - Attribute selector hack
- - Star HTML (* HTML) hack
- - Escaped property hack
- - Tantek's box model hack
- - Modified simplified box model hack
- - The important and underscore hacks
- - Owen hack
|
- Unit 12: Bugs and Bug Fixing
- - A systematic approach to bug hunting
- - Recognizing common CSS problems
- • Specificity and sort order
- • Margin collapsing
- - Bug hunting basics
- • Isolate the problem
- • Create a minimal test case
- • Fix the problem, not the symptoms
- • Ask for help
- - Understanding IE's rendering engine
- • What is "layout"?
- • What is the effect of "having layout"?
- - Common bugs and their fixes
- • Double-margin float bug
- • Three-pixel text jog bug
- • IE6 duplicate character bug
- • IE6 peek-a-boo bug
- • Absolute positioning within a relative container
|
Upcoming Dates
You’ll need to check the dates for each of the individual courses within this Package.
Check our Course Dates, or contact us to discuss your specific needs.
$1,485 incl GST
Save $990.00
