Adobe Dreamweaver CC Level 1

Planning Information

The duration of this course is 2 Days.
Classes are priced from $790.00. See individual sessions for details.


Description

This course introduces students to Adobe® Dreamweaver® and guides students step-by-step through the development of a sample Web project using Dreamweaver. Students learn to create web pages by formatting text, inserting images, setting links and working with tables.


Intended Audience

Anyone needing to design, update content and administer a web site.


At Completion

Upon successful completion of this course, students will be able to:

  • Get acquainted with the Dreamweaver workspace - views, panels and workspace layouts
  • Overview of HTML and CSS Basics
  • Set up a Dreamweaver site
  • Create pages with CSS layouts
  • Create, modify and select CSS styles
  • Use imbedded, inline and external style sheets
  • Use Code Navigator, CSS Styles, Insert and Property Panels
  • Create styles for printing
  • Create, apply and edit Dreamweaver templates and library items
  • Work with text, lists and tables
  • Check spelling, search and replace
  • Work with images and Photoshop Smart Objects
  • Optimize, crop and adjust images with the Dreamweaver graphic tools
  • Use Adobe Bridge to view and insert images
  • Add navigation with text links, e-mail links and image-based links
  • Check for broken links and browser compatibility

Prerequisites

Proficiency with Windows required. Students should also be familiar with basic Internet concepts and terminology.


Materials

Adobe Dreamweaver CC Classroom in a Book® - Kindle Edition


Course Outline

Lesson 1:  Customizing Your Workspace

  • Touring the Workspace
  • Switching and Splitting Views
  • Working with Panels
  • Selecting a Workspace Layout
  • Adjusting Toolbars
  • Personalizing Preferences
  • Creating Custom Keyboard Shortcuts
  • Using the Property Inspector

Lesson 2: HTML Basics

  • What is HTML
  • Where did HTML Begin
  • Writing your own HTML Code
  • Frequently used HTML 4 Codes
  • Introducing HTML5

Lesson 3: CSS Basics

  • What is CSS
  • HTML vs. CSS Formatting
  • HTML Defaults
  • CSS Box Model
  • Formatting Text
  • Formatting Objects
  • Multiples, Classes, and IDs
  • CSS3 Overview and Support

Lesson 4: Web Design Basics

  • Defining a Dreamweaver Site
  • Working with Thumbnails and Wireframes
  • Creating web assets using Adobe Generator
  • Previewing the Completed File
  • Working with the CSS Styles Panel
  • Working with Type
  • Using Images for Graphical Effects
  • Creating New CSS Rules
  • Creating an Interactive Menu
  • Modifying Hyperlink Behavior
  • Creating Faux Columns
  • Moving Rules to an External Style Sheet
  • Creating Style Sheets for Other Media

Lesson 5: Creating Page Layouts

  • Modifying an Existing CSS Layout
  • Working with the CSS Designer
  • Working with type
  • Using web fonts
  • Creating a CSS background
  • Changing Element Alignment
  • Modifying the Page Background Color
  • Building and styling a navigation bar
  • Building semantic content
  • Using Element Quick View to position elements
  • HTML entities; Validate the HTML code

Lesson 6: Designing for Mobile Devices

  • Media queries
  • Configure page components to work on mobile devices
  • Previewing mobile pages in Dreamweaver
  • Using Element Quick View
  • Test responsive designs on mobile devices

Lesson 7: Working with Templates

  • Creating a Template from an Existing Layout
  • Creating an external CSS file
  • Inserting Editable Regions
  • Inserting metadata
  • Producing Child Pages
  • Updating a Template

Lesson 8: Working with Text, Lists, and Tables

  • Creating and Styling Text
  • Creating semantic structures
  • Creating lists
  • Creating and Styling Tables
  • Inserting tables from other sources
  • Making tables responsive
  • Spell Checking Webpages
  • Finding and Replacing Text

Lesson 9: Working with Images

  • Web Image Basics
  • Inserting an Image
  • Adjusting Image Positions with CSS Classes
  • Working with the Insert Panel
  • Using Adobe Bridge to Insert Images
  • Inserting Non-web File Types
  • Working with Photoshop Smart Objects
  • Inserting Images by Drag and Drop
  • Optimizing Images with the Property Inspector

Lesson 10: Working with Navigation

  • Hyperlink Basics
  • Creating Internal Hyperlinks
  • Creating an Image-Based Link
  • Creating an External Link
  • Setting up Email Links
  • Targeting Page Elements
  • Checking your Page

Pin It on Pinterest

Share This