Dreamweaver Advanced with Spry, CMP902
Become a Dreamweaver power user! This advanced course shows you how to take your web sites to the next level---making sites attractive, dynamic, accessible, and easy to maintain using Dreamweaver's powerful and popular features. Topics include positioning and designing page elements using divisions and Cascading Style Sheets, and creating Templates and Library items to mange web sites. The course also introduces Dreamweaver's Spry technologies for adding dynamic "user interactivity" features to your pages, including Spry Widgets - navigation and expandable and collapsible panes; Spry "effects" and form field validation. Additional topics include adding behaviors to HTML "objects"; rollover buttons; site maintenance techniques; importing data from external files, adding audio and video, and creating and incorporating simple Fireworks and Flash components into your site.
Prerequisites: Dreamweaver / Fireworks Level I and Cascading Style Sheets (CSS) or equivalent experience. Java Script highly recommended.
Technology update: Please bring a Flash Drive/Memory Stick 512MB or larger to class which will enable you to save your class work.
Textbook:
Books may be purchased at the MC Bookstore or online. You will need to know the CMP#(Continuing Education classes) for the class you are taking in order to look up information about the textbook.
Classroom hours: 21
Course Objectives:
Upon completion of this course, students will be able to:
- Design web sites, position page elements, and style those elements using divisions and Cascading Style Sheets
- Design web sites using Dreamweaver Templates and other reusable features
- Apply Dreamweaver’s Spry features and frameworks to web pages, including Spry Widgets and Effects
- Prepare and validate client-side web forms using Dreamweaver’s Forms tools and form field validation features, including form validation behaviors and Spry validation tools
Course Content
Note: Individual instructors may teach included topics in a different order. This list is intended to be instructive of the course coverage and objectives.
Day 1:
- Site Set-Up and Management
- Positioning Page Content Using Divisions
- Division Basics
- Using Dreamweaver Division tools
- CSS Layout Basics
- Laying Out Your Page
- Floats and Clears
- The CSS “Box” panel; it’s use and effects
Day 2:
- Managing Styles
- Renaming, Deleting, creating external style sheets, moving internal styles to external styles
- Using style sheets to position and manage division elements on a page.
Day 3
- Templates, Library Items and Snippets
- Creating a Template
- Adding Editable Regions
- Building new pages based on a template
- Applying existing pages to a template.
- Creating, using, and editing re-usable Library items
- Dreamweaver code Snippets
Day 4
- Creating Forms and Fields
- Forms and text fields, text areas, check boxes, radio button group, list / menus, form buttons using Dreamweaver features.
- Validating Forms using Behaviors
- Validating Forms using Spry elements
Day 4: Behaviors, Navigation Objects, Rollover Buttons
- Making Rollover buttons in Dreamweaver
- Importing Fireworks HTML to include Roll-over buttons and navigation bars made in Fireworks
- Using other behaviors on a page.
Day 5
- Building Web Page features using Spry
- The Spry Famework
- Spry Widgets, Elements, Forms Validation, Effects, and XML databases
- Building a Menu Bar with Spry widgets
- Building a Tabbed Panels Widget
- Building a Collapsible Panel Widget
- Using the Accordion Widget
Day 6
- Spry Features Continued.
- How to modify Spry CSS to change the appearance, color, look and feel of Spry elements
- How to review and interpret Spry CSS code
- Validating forms with spry
Day 7
- Dreamweaver/Spry Lab
- Build a web site with the following features
- Position and design all page elements positions using divisions and CSS styles
- Design navigation bars and other features using Spry widgets
- Modify Spry widget CSS to incorporate your site styles
- Use templates to reuse common page elements such as banners, navigation bars
- Build a form which is validated with Dreamweaver form validation behaviors and Spry validation elements.
- Create roll-over features with buttons or navigation bars designed in Fireworks.
- Import media elements to the web site, such as Flash or other media elements.