Adobe Dreamweaver CS4 Website Development

Duration: 2/3 days
Time: 10am - 6pm. Breaks are scheduled throughout the day and lunch is typically scheduled between 12-1pm
Course Materials: Vendor Authorized Courseware provided
Locations: Reston, VA / On-Site
Related Courses: Fireworks - Photoshop - Flash - Illustrator
Download Course Outline (PDF)
Cost: $1495
Registration: Click Here to Register

Course Synopsis

Adobe Dreamweaver Website Development is a 3-day course that provides web designers with the knowledge and hands-on practice they need to build and manage professional web sites using industry standard for professional web development and design. This class introduces the student to the fundamentals of Dreamweaver with an emphasis on best practices and current web standards.

Who Should Attend

This course is for people new to web design and development and would like to use Dreamweaver to build intuitive, attractive and accessible web sites. This class will cover design techniques as well as best practices for CSS and design standards.

Prerequisites

Because of the amount of material we cover in class, we do require students to be comfortable using a mouse, opening and saving files, and the general operations of computers. While we will make every reasonable effort to help, students with insufficient skills may be required to observe the class lessons or do their best to keep up without slowing down the rest of the class.

What You Will Learn

Dreamweaver Interface Basics
Getting started with web design and layout
Working with text and images
Creating links and anchors
Designing for devices with CS4
Building Successful Site Navigation
Building forms in Dreamweaver
Fireworks CS4 integration
Accessibility and Standards
Site maintenance

LESSON PLANS

Web Basics
HTML vs. XHTML
What is CSS?
What is XML?
What is DHTML?
What is JavaScript?
File Naming Conventions
What is an Index Page?

Lesson 1: Dreamweaver CS4 Jumpstart

* Starting up
* What is Dreamweaver?
* Design and layout tools
* Site management and File Transfer Protocol
* Coding environment and text editor
* Who uses Dreamweaver?
* What’s new in Dreamweaver CS4?
* New user interface
* Live View
* Related files
* Code Navigator
* CSS improvements
* HTML data sets
* Photoshop smart objects
* Other new features
* Adobe AIR authoring support
* Subversion
* An overview of features
* How web sites work
* A simple flow chart
* Domain names and IP addresses
* Servers and web hosts
* The role of web browsers
* An introduction to HTML
* Tag structure and attributes
* The structure of an HTML document
* Placing images in HTML
* Colors in HTML
* Case sensitivity and whitespace rules
* Tag hierarchy
* XHTML 1.0 Transitional
* What’s the difference?
* Explorations in code
* A look at the Welcome Screen
* Creating, opening, and saving documents
* Creating new documents
* Self study
* Review

Lesson 2: Setting Up a New Site

* Starting up
* Creating a new site
* Advanced site-creation options
* Adding pages
* Saving a page to your site
* Defining page properties
* Work views
* A look at the Files panel
* Viewing local files
* Selecting and editing files
* Files panel options
* Changing the Files panel view
* Self study
* Review

Lesson 3: Adding Text and Images

* Starting up
* Typography and images on the web
* Adding text
* An introduction to styles
* Previewing pages in a web browser
* Understanding hyperlinks
* Creating hyperlinks
* Relative versus absolute hyperlinks
* Linking to an e-mail address
* Creating lists
* Using the Text Insert panel
* Inserting images
* Image resolution
* Image formats
* Creating a simple gallery page
* Linking images
* Using image placeholders
* Editing images
* Adjusting brightness and contrast
* Resizing images
* Updating images
* Self study
* Review

Lesson 4: Styling Your Pages with CSS

* Starting up
* What are Cascading Style Sheets?
* A little bit of ancient history: when <font> tags roamed the Earth
* The dawn of CSS
* How do you create CSS rules in Dreamweaver?
* Understanding Style Sheets
* Understanding why they’re called Cascading
* Creating and modifying styles
* Creating a class style with the Property Inspector
* Creating and modifying styles in the CSS Styles panel
* Advanced text formatting with CSS
* Fine-tuning page appearance with contextual and pseudo-class selectors
* Div tags and CSS IDs
* Internal versus external style sheets
* Attaching an external style sheet to your page
* Modifying attached style sheets
* Creating a new .css file (external style sheet)
* Self study
* Adobe Device Central
* Review

Lesson 5: Creating Page Layouts with CSS

* Starting up
* The CSS Box model
* The basics of CSS margins, padding, and borders
* Reviewing the <div> element
* Reviewing the ID selector
* Positioning content with AP Divs
* Creating your first boxes with Draw AP Div
* Centering your page with relative positioning
* Making layouts cross-browser compatible
* Adding columns and headers to a layout
* Absolute versus relative positioning
* Adding a global navigation
* Box overlap and z-index
* Reordering <div> elements
* Adding additional content and styles
* Setting margins, padding, and borders
* Overriding default margins in CSS
* Futureproofing your layout
* Moving the internal styles
* Self study
* Review

Lesson 6: Working with Tables

* Starting up
* Using tables in web design
* Importing table data
* Selecting table elements
* Modifying table size
* Modifying table structure
* Creating a table
* Formatting and styling tables in HTML
* Formatting and styling tables with CSS
* Advanced CSS styling of tables
* Controlling cell alignment, padding,
and borders with CSS
* Creating alternate row styling with CSS
* Reusing CSS for other tables
* Data sorting tables
* Self study
* Review

Lesson 7: Fine-Tuning Your Workflow

* Starting up
* Customizing panels and panel groups
* Using the Favorites tab on the Insert bar
* Resizing the document window
* Using guides
* Using grids
* The tag selector
* Switching between tabs and cascading documents
* Zooming
* Self study
* Review

Lesson 8: Adding Flash, Video, and Sound Content

* Starting up
* Making web content interesting
* Inserting Flash movies
* Adding video
* Flash Video
* QuickTime video and Windows Media
* Inserting sound
* Self study
* Review

Lesson 9: Maximizing Site Design

* Starting up
* Creating modular page elements
* Introducing snippets
* The Snippets panel
* Creating new snippets
* Introducing library items
* Modifying and updating library items
* Introducing templates
* Creating a new template
* Working with editable regions
* Creating new pages from templates
* Modifying templates
* Repeating regions
* Putting repeating regions into action
* Detach from Template command
* Self study
* Review

Lesson 10: Under the Hood: Editing in the Code View

* Starting up
* Getting to your code
* Accessing code with the tag selector
* Editing an HTML tag with the Quick Tag Editor
* Inserting tags with the Tag Chooser
* Inserting and editing comments
* Working in the Code view
* The Coding toolbar
* Collapsing and expanding tags and code blocks
* Validating your code
* Highlighting and correcting invalid code
* Using the Check Page menu
* The Validate Markup option
* Formatting code
* Indenting
* Self study
* Review

Lesson 11: Building Web Forms

* Starting up
* Forms in everyday (web) life
* How forms work
* Building a contact form
* Inserting the <form> tag
* Setting form properties
* Adding form elements
* Adding text fields
* Adding checkboxes
* Adding radio buttons
* Adding radio groups
* Adding lists and menus
* Adding a text area
* Adding a File Upload field
* Creating Submit and Reset buttons
* Styling forms with CSS
* Attaching external styles
* Setting a background color
* Styling form elements
* Applying the .label style
* Form processing and validation
* Adding form validation
* A look at the Behaviors panel
* Setting an event or trigger
* Previewing the button behavior
* Validating form fields
* Changing a form field’s behavior order
* Verifying field contents
* Self study
* Review

Lesson 12: Working with the Spry Framework

* Starting up
* Introducing the Spry Widgets
* The Spry framework for AJAX
* What is AJAX?
* A look at the project
* The Spry Menu bar
* Customizing Spry Widgets with CSS
* The Spry Tabbed panel
* The Spry Accordion panel
* The Spry Collapsible panel
* Working with Spry Data Widgets
* What is XML?
* Creating a Spry XML data set
* Adding a Spry Data Widget: The Spry Repeat List
* Styling and fine-tuning data widgets
* Self study
* Review

Lesson 13: Managing Your Web Site: Reports, Optimization, and Maintenance

* Starting up
* Working with the Files panel
* Creating a remote connection
* Viewing files on a remote web server
* Transferring files to and from a remote server with Get and Put
* Using Check In/Check Out and Design Notes
* Check In and Check Out
* Using Design Notes
* Sharing Design Notes
* Displaying Design Notes in the Files panel
* Testing site integrity
* Using Check Links
* Checking links sitewide
* Generating site reports
* Understanding report results
* Addressing a listed item
* Saving reports
* The Browser Compatibility Check
* The CSS Advisor
* Optimizing pages for launch
* Search engine visibility and Search Engine Optimization
* Titling your documents with the <title> tag
* Adding meta keywords and descriptions
* Describing images with alternate text
* Launching your site
* Site Launch Checklist
* Uploading your site
* Getting help and using the reference guides
* The Reference panel
* Suggested next steps
* Self study
* Review

Lesson 14: Using Legacy Tools: Frames and Tables

* Starting up
* Legacy sites
* How frames work
* Advantages and disadvantages of frames
* Common frame usage
* Creating framesets
* Selecting frames
* Selecting framesets
* The Frames panel
* Setting frameset properties
* Setting frame properties
* Splitting a frame
* Dragging a frame border
* Specifying frame content
* Targeting frames
* Linking to outside web pages
* Using _top to replace a frameset
* Adding <noframes> content
* Using tables for layout
* Tables versus CSS
* Inserting a table
* Selecting tables
* Modifying tables
* Setting table borders
* Merging cells
* Nesting a table inside a row
* Specifying column widths
* Adding content to tables
* Adding another table
* Formatting tables
* Other ways to work with tables
* Deleting rows and columns Importing table data
* Self study
* Review

 

 

 

Adobe Dreamweaver CS4: Advanced Development

Duration: 2/3 days
Time: 10am - 6pm. Breaks are scheduled throughout the day and lunch is typically scheduled between 12-1pm
Course Materials: Vendor Authorized Courseware provided
Locations: Reston, VA / On-Site
Related Courses: ColdFusion - Photoshop - Fireworks - Flash - ActionScript - Flex - AIR
Cost: $1495
Registration: Click Here to Register

Course Synopsis

Adobe Dreamweaver CS4: Application Development provides students with the knowledge and hands-on practice they need to build and manage dynamic websites using Dreamweaver CS4. In this course, you’ll learn how to connect to a database, search and display results, and build a page to update the database. If you’ve always dreamed of building a more advanced, data-powered site, but didn’t know where to start, then this course is for you.

Who Should Attend

This course is for people new to Dreamweaver (or who have used it only to build static web sites) that want to use it to create data-driven web applications. To take this course, you should:

Be comfortable working with the Windows operating system.
Be familiar with web terminology.
Be comfortable with what is required to develop a static web application.
Have completed the Adobe Dreamweaver CS4: Website Development course or have equivalent experience.

Prerequisites

Because of the amount of material we cover in class, we do require students to be comfortable using a mouse, opening and saving files, and the general operations of computers. While we will make every reasonable effort to help, students with insufficient skills may be required to observe the class lessons or do their best to keep up without slowing down the rest of the class.

What You Will Learn

Database Panel and Application Wizards
Basics of Dynamic App Dev
Working with a Database and Dreamweaver
Basics of Drill-Down Interface • Building Recordsets and Binding Data to a Page
Server Debug Options
SQL - INSERT, UPDATE, SELECT, and DELETE
Security and Login
Creating a Dynamic Search Interface

LESSON PLANS

Introduction
Understanding the course format
Reviewing the course objectives and prerequisites
Looking at the course outlines

Getting Started
Understanding static vs. dynamic pages
Working with sites in Dreamweaver
Learning Dreamweaver interface basics
Developing dynamic pages
Including common code

Using the Database Panel
Using databases on the web
Creating a database connection
Using the Database panel
Using the Bindings panel to create a simple recordset
Creating an advanced recordset using joins

Binding Data to a Page
Binding data to a page
Using Live Data View
Formatting data using the Bindings panel
Inserting a dynamic image

Customizing Recordset Display
Introducing Server Behaviors
Displaying all rows in a recordset using Repeat Region
Introducing Application Objects
Using the Recordset Navigation Bar to page through recordsets
Displaying Recordset Navigation Status
Using the Server Debug View

Creating Drill-down Interfaces
Creating a drill-down interface
Generating dynamic links
Using dynamic filters in SQL
Using the Dynamic Table Application Object
Creating a master-detail page set

Creating a Search Interface
Reviewing HTML Forms
Creating dynamically populated drop-down menus
Creating fi ltered recordsets

Inserting Rows into a Table
Creating a form and using the Insert Record Server Behavior
Validating form data using Behaviors
Creating dynamic form elements
Using the Recordset Insertion Form Application Object

Updating Rows
Creating an interface for updating data
Displaying results in a table using the Dynamic Table Application Object
Creating a pre-filled form for the row to update
Using URL parameters
Using the Record Update Form Application Object
Manually creating a form and applying an Update Record Server Behavior

Deleting Rows
Understanding the delete process
Creating a delete confi rmation page
Passing hidden data in a form
Using a SQL Delete statement
Using the Delete Row Application Object

Authenticating Users
Setting and retrieving cookies
Authenticating users with a web application
Building the registration pages
Building the log-in page
Restricting access to pages