Custom Course

This is a custom course that may have been designed with a specific client (you?) in mind. If you have happened upon this page without being directed here by a Webucator representative and are interested in learning more about the course, please email sales@webucator.com.

Project-based Learning with Dreamweaver (DRW_ATC101)

Course Length: 3 days

Delivery Methods: Available as private class only

Course Overview

If you have a group of five or more people who need to get up to speed on Dreamweaver quickly, this project-based Dreamweaver course is what you are looking for. After introducing your team to the Dreamweaver interface, one of our expert instructors will guide you through multiple real-world Dreamweaver projects.

The course can be customized to help you get started on an Dreamweaver project of your own.

Course Benefits

Become familiar with a wide array of Dreamweaver features.
Gain experience completing real-world projects with Dreamweaver.
Leave class with a portfolio of projects that you build yourself.

Course Outline

Getting to Know the Interface
1. Launch the Dreamweaver Application
2. Explore the Dreamweaver Workspace
3. Understanding the Common Toolbar
4. Create a Saved Workspace
5. Customizing Keyboard Shortcuts
6. Explore the Dreamweaver Document Window
7. Understanding New Feature Guides
8. Preview Files in Dreamweaver Live View
9. Preview a File in a Browser
10. Remove a Site from Dreamweaver
Project 1: Bistro Site Organization
1. Stage 1: Exploring Site Structure
  1. Create a New Site Definition
  2. Examine the Site Files
  3. Plan Folder Organization
  4. Sort and Move Site Files
2. Stage 2: Organizing the Site Navigation
  1. Changing the Update Preferences
  2. Create Hyperlinks Within the Site
  3. The HTML Insert Panel In Depth
  4. Copy and Paste Links
  5. Adjust Relative Link Paths
  6. Create an Email Link
3. Stage 3: Naming and Titling Documents
  1. Rename Pages for Search Engine Optimization
  2. Understanding Web File Naming Conventions
  3. Create Document Titles for Individual Pages
  4. Understanding Find and Replace Options
  5. Hide Files from a Web Server
  6. Export and Remove the Site Definition
  7. Uploading Files to a Server
  8. Project Review
  9. Portfolio Builder Project
Project 2: HTML Book Chapter
1. Stage 1: Preparing the Workspace
  1. Define the ATC Site
  2. Create a New HTML Document
  3. Understanding Element Names, Tags, and Attributes
2. Stage 2: Working with Semantic Markup
  1. Paste Text Content in Design View
  2. Format Headings in Design View
  3. Formatting Text with the Properties Panel
  4. Format a Blockquote and Inline Quote
  5. Mark up Abbreviations in Code View
  6. Format with Strong and Em Elements
  7. Understanding Code View Formatting
3. Stage 3: Working with Special Characters
  1. Insert Special Characters
  2. Create a Table of Quote Characters
  3. More about Working with HTML Tables
  4. Use the Insert Other Character Dialog Box
  5. Insert Special Characters in Code
4. Stage 4: Creating Lists
  1. Create an Ordered List of Web Resources
  2. Create an Unordered List of Navigation Links
5. Stage 5: Attaching an External CSS File
  1. Add Tags and Element IDs
  2. Attach the CSS File
  3. Learning about HTML5 Tags
  4. Project Review
  5. Portfolio Builder Project
Project 3: Arts Council Website
1. Stage 1: Placing Static Foreground Images
  1. Review the Existing Project Status
  2. Place an Image in the Regular Design View
  3. Place an Image with the Insert Panel
  4. Drag and Drop an Image from the Insert Panel
  5. Insert an Image with the Assets Panel
2. Stage 2: Extracting Photoshop Assets
  1. Verify Your Adobe ID in Dreamweaver
  2. Load a Photoshop File into Your CC Account
  3. Extract Text and Images from a Photoshop File
  4. Format the Page Body
  5. Format Element Backgrounds with Extracted Styles
  6. Define Background Images
  7. Format Text with Extracted Styles
  8. Format Links with Descendant Selectors
  9. Defining Color in CSS
  10. Define Background Images for Navigation Link States
  11. Project Review
  12. Portfolio Builder Project
Project 4: Museum CSS Layout
1. Stage 1: Creating Layouts with Style Sheets
  1. Prepare the Site Files
  2. Define a New Element and Tag Selector
  3. Drag and Drop to Create New Elements
  4. Define a Selector with an ID Attribute
  5. Understanding CSS Shorthand
  6. Create New Selectors Using the CSS Designer Panel
  7. Create and Manage Nested Elements
  8. Control Element Float Position
  9. Work with the CSS Box Model
  10. Define Properties for the
  11. Tag
2. Stage 2: Working with a Template
  1. Create a Template
  2. Apply the Template to Existing Pages
  3. More About Working with Dreamweaver Templates
3. Stage 3: Using CSS to Control Content
  1. Define HTML Tag Selectors
  2. Create Named Anchors
  3. Create a Pseudo-Class Selector
  4. Create a Figure and Figure Caption
  5. Create Descendant Selectors
  6. Project Review
  7. Portfolio Builder Project
Project 5: Music Festival CSS Site
1. Stage 1: Working with Classes
  1. Review Existing Site Files
  2. Create a Class Selector to Place Background Images
  3. Manually Edit CSS Code
  4. Make an Editable Attribute in a Template
  5. Control Float Properties
  6. CSS Mode of the Properties Panel
  7. Apply Multiple Classes to Elements
  8. Insert One HTML Page into Another
2. Stage 2: Creating Online Forms
  1. Create a Form Element
  2. The Form Properties Panel In Depth
  3. Create Form Text Fields
  4. HTML Form Fields In Depth
  5. Create a Menu Field
  6. Create a Check Box
  7. Add Submit and Reset Buttons
  8. Apply CSS to the Form
  9. Project Review
  10. Portfolio Builder Project
Project 6: jQuery Mobile Site
1. Stage 1: Creating a Mobile-Friendly Design
  1. Create the Basic Page Structure
  2. Define Inline Navigation Links
  3. Control Image Size and Position
  4. Create a Site Template
2. Stage 2: Adding jQuery UI Elements
  1. Insert a jQuery Tabbed Panel
  2. Add Tab Content
  3. Change Tab Content CSS
  4. Grouping CSS Selectors
  5. Using Inspect Mode in Live View
3. Stage 3: Creating a JavaScript Photo Gallery
  1. Attach External CSS and Script Files
  2. Create the Lightbox Img Elements
  3. Define the Lightbox Link Objects
  4. Grouping CSS Selectors
  5. Using Inspect Mode in Live View
  6. Project Review
  7. Portfolio Builder Project
Project 7: Bootstrap Responsive Page
1. Stage 1: Working with Bootstrap
  1. Create a New Bootstrap Page
  2. More About the Visual Media Queries Bar
  3. Examine Bootstrap Media Queries
  4. Define the Bootstrap Page Layout Grid
  5. Insert Responsive Images
  6. Copy Content into a Bootstrap Page
  7. Show and Hide Content in Different Layouts
  8. Use CSS to Format Page Content
  9. Understanding Relative Measurement Units
  10. Create New Media Queries
2. Stage 2: Creating CSS3 Transitions
  1. Restrict Element Height and Overflow
  2. Use the CSS Transitions Panel
  3. Project Review
  4. Portfolio Builder Project
Project 8: CSS Grid Responsive Page
1. Stage 1: Working with CSS Grids
  1. Review the Provided Source Files
  2. Define a CSS Grid Container
  3. Define the Size and Position of CSS Grid Items
2. Stage 2: Working with CSS
  1. Create a Universal Selector
  2. Explore CSS Methods of Targeting Specific Elements
  3. Create Multiple Columns of Text
  4. Create a Fixed-Position Element
3. Stage 3: Working with Web Fonts
  1. Activate Adobe Edge Web Fonts
  2. Working with External Web Fonts
  3. Apply Web Fonts to Page Elements
4. Stage 4: Adding HTML5 Video
  1. Place a Video in an HTML5 Page
  2. Understanding Video Tag Attributes
5. Stage 5: Making the Grid Responsive
  1. Define Named Grid Areas
  2. Project Review
  3. Portfolio Builder Project

Class Materials

Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Live Private Class

Private Class for your Team
Live training
Online or On-location
Customizable
Expert Instructors

Request Proposal