Web Rangers

Adobe Authorized

d'Vinci Interactive offers Adobe Authorized instructor led training in Authorware, Captivate, ColdFusion, Dreamweaver, Flash, and Robohelp.

Training

Adobe Authorized Training Partner 2005

CSS Training: Web Design with Cascading Style Sheets

Welcome

Using Cascading Style Sheets (CSS) for design, layout and development of Web pages has dramatically changed the way developers and designers build web sites. Creating Web standards-compliant (X)HTML for content and using CSS for design, layout and presentation requires today's developers to "think" CSS as they design and code websites.

This two-day CSS course is designed to introduce CSS concepts and teach website design using (X)HTML and CSS.

Course Objective

  1. Assist learners in how to make the switch from table-based Web page design to design and layout using CSS
  2. Provide an overview of authoring websites using CSS
  3. Introduce the major concepts required to code Web standards-compliant (X)HTML using CSS for presentation
  4. Introduce the concepts, techniques, properties, and values of CSS

Three phases for the 2 day course:

Phase 1:

Students will be introduced to:

  1. Web Standards compliance
  2. CSS and (X)HTML: Separating content from presentation
  3. Creating pages using semantically correct (X)HTML code
  4. The Box Model
  5. CSS syntax

Phase 2:

Students will do hands-on exercises designed to familiarize them with the properties and values of CSS. These exercises are meant to build on each other and demonstrate how the property/value design rules affect the appearance of the pages. These exercises will cover color, typography, the "layout/design" styles and finally, special techniques for customizing forms, link styles and lists.

Phase 3:

Students will be given two or three (time permitting) (X)HTML pages with content coded. They will then take these pages and write stylesheets and apply styles to the (X)HTML to match a specific design/layout.

Learners will be able to work on their projects from within the Dreamweaver interface using the visual editor to author the stylesheets or you can work with a text editor, whichever you are comfortable with. You will be modifying stylesheets and (X)HTML documents, coding the styles and applying those styles to the (X)HTML pages.

Prerequisite

It is suggested that students have basic knowledge of (X)HTML tags. If you have questions about this suggestion, please contact the instructor.

Course Outline

Lesson 1: Controlling Color and Typography

  • Create an Embedded Style Sheet
  • Apply Color
  • Comment Your Code
  • Modify Text Styles
  • Modify Font Styles
  • Create a Linked Style Sheet

Lesson 2: Designing with the Cascade

  • Create Class Styles
  • Create ID Styles
  • Create Contextual Styles
  • Target Styles to Elements with Specific Attributes
  • Create Style Sheets that Cascade
  • Import Style Sheets
  • Create Inline Styles

Lesson 3: Designing Content Sections

  • Control Margins and Padding
  • Create Borders
  • Control Element Dimensions
  • Create Floating Elements
  • Control Content Overflow

Lesson 4: Controlling Layout with Positioning

  • Controlling Layout with Absolute Positioning
  • Create a Fixed, Multi-column Layout
  • Create a Fluid, Multi-column Layout
  • Control Layout with Relative Positioning
  • Control the Display of Layered Elements
  • Apply Fixed Positioning

Lesson 5: Enhancing an Existing Design

  • Customize Cursors
  • Customize Link Styles
  • Customize Forms
  • Display and Manipulate Background Images
  • Customize Lists
  • Create Generated Content

Lesson 6: Creating Alternate Style Sheets

  • Create Accessible Style Sheets
  • Apply User-Defined System Fonts and Colors
  • Create a Print Style Sheet

Return to Top