Advanced Website Design Using CSS
The use of Cascading Style Sheets (CSS) enables web designers to create visually consistent sites that provide a better user experience. CSS driven sites are easier to develop and maintain, more accessible, rank better with search engines and download faster.
Quick Facts
Duration: 2 Days
Class Size: 10
Level: Beg / Int
Times: 9.00am to 5.00pm approx
About the Course
During this 2 day course, participants will learn how to use CSS to control the appearance of text, images, forms, and tabular data. Exercises include building navigation systems, testing designs in different browsers, replace table-based pages with fixed-width and liquid CSS, and create switchers that provide user options.
Who should do this course?
This course is ideal for anyone who has become frustrated with table-based page design and/or needs the benefits and advantages provided by designing with XHTML+CSS. Upon successful completion of the course, students should be able to develop flexible websites quickly, with consistent design and optimal performance.
Prerequisites
Participants should have completed the Dreamweaver Website Development course or have equivalent knowledge prior to commencing this course.
Course Units
- 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
|
Upcoming Courses
|
Sydney
Level 11, 32 Walker Street
North Sydney
View map
|
- Date:
- 20-21 Sep 10
- 14-15 Oct 10
- 08-09 Nov 10
- 09-10 Dec 10
|
|
Melbourne
Level 12, 379 Collins Street
Melbourne
View map
|
- Date:
- 09-10 Sep 10
- 12-13 Oct 10
- 11-12 Nov 10
|
|
Brisbane
C/- Training Choice, Mezzanine Level, 88 Creek Street
Brisbane
View map
|
- Date:
- 11-12 Oct 10
- 17-18 Nov 10
|
|
Canberra
C/- Training Choice, Level 4, 54 Marcus Clarke Street
Canberra
View map
|
Date: upon demand
|
|
Adelaide
C/- Mindfull Computer & Seminar, Level 4, 74 Pirie Street
Adelaide
View map
|
- Date:
- 25-26 Oct 10
|
|
Perth
C/- Training Choice, Level 7, 105 St Georges Terrace
Perth
View map
|
Date: upon demand
|
Duration: 2 Days
Class Size: 10
Level: Beg / Int
Times: 9.00am to 5.00pm approx
