Adobe Dreamweaver CC (2022) Course

Course Details:

Length: 3 days

Price: $1,330/person (USD)

Group Price: Request Quote

Training Reviews

Course Features:

Live Instructor Teaching

Certificate of Completion

Digital Badge

Courseware: Print

Free 6 Month Online Retake

Hands-On Learning?: Yes

Software Lab Included?: Yes

Delivery Methods:

Live Online

Individuals and Groups
@ Your Location

Onsite for Teams

Group Teams
@ Your Organization

This is an instructor-led course. It is taught by an instructor live online or at organizations for groups.
For team training, we can teach onsite at your office or private live online.


Course Overview

This 3-day course teaches key techniques for working in Dreamweaver while editing and creating HTML and Cascading Style Sheets (CSS). Learn how to create web pages for the modern web; use and customize popular web frameworks to build web pages for a wide variety of desktop computers and mobile devices with a minimum of hand coding; incorporate graphics and text; add links to text and images; add interactive elements to your pages, such as HTML5-compatible interactivity; work with the latest HTML5 and CSS3 code and structures; and publish a finished site to the web.

Register Early: Registration Deadline is 2 Weeks Prior to Class Start.

Course Notes

Adobe Versions That Can Attend: CC 2022, 2021, 2020, 2019, & 2018 (Microsoft Windows PC or Macintosh)
Course Taught With: CC version 2022 (Microsoft Windows PC) Software

Related Certifications

ACP: Adobe Dreamweaver Certification

Certification Notes: Certification exams are administered by third party testing companies. Our courses prepare you for the certification exam, which is an additional fee paid to the testing provider. You must contact the corresponding testing provider to take a certification exam.


Course Topics

Chapter 1: Customizing your workspace - 16
Touring the workspace
Using the Start Screen
• Quick Start
• Starter Templates
• Create New and Open
Exploring the New Feature guides
Switching and splitting views
• Code view
• Design view
• Live view
• Split view
Working with panels
• Minimizing panels
• Closing panels and panel groups
• Dragging
• Floating
• Grouping, stacking, and docking
Personalizing Dreamweaver
• Saving a custom workspace
Working with toolbars
• Document toolbar
• Standard toolbar
• Common toolbar
Creating custom keyboard shortcuts
Using the Property inspector
• Using the HTML tab
• Using the CSS tab
• Accessing image properties
• Accessing table properties
Using the Related Files interface
Using the Tag Selector interface
Using the CSS Designer
• Sources
• @Media
• Selectors
• Properties
• All and Current modes
Using the Visual Media Query (VMQ) interface
Using the DOM Viewer
Using element dialogs, displays, and inspectors
• Position Assist dialog
• Element Display
• Image Display
• Text Display
• Setting up version control in Dreamweaver
Exploring, experimenting, and learning
Review questions
Review answers

Chapter 2: HTML basics - 48
What is HTML?
Where did HTML begin?
• What comprises HTML?
Frequently used HTML elements
• HTML tags
• HTML character entities
What’s new in HTML5
• HTML5 tags
• Semantic web design
• New techniques and technology
Review questions
Review answers

Chapter 3: CSS basics - 60
What is CSS?
HTML vs. CSS formatting
HTML defaults
• HTML5 defaults?
• Browser antics
CSS box model
Applying CSS styling
• Cascade theory
• Inheritance theory
• Descendant theory
• Specificity theory
• CSS Designer
Multiples, classes, and ids, oh my!
• Applying formatting to multiple elements
• Using CSS shorthand
• Creating class attributes
• Creating id attributes
• CSS3 features and effects
• CSS3 overview and support
Review questions
Review answers

Chapter 4: Working with code - 86
Creating HTML code
• Writing code manually
• Writing code automatically
Working with multicursor support
Commenting your code
Working with CSS preprocessors
Enabling a preprocessor
• Creating the CSS source file
• Compiling CSS code
• Nesting CSS selectors
• Importing other style sheets
• Learning more about preprocessors
• Using linting support
Selecting code
• Using line numbers
• Using tag selectors
• Using parent tag selectors
Collapsing code
Expanding code
Accessing Split Code view
Previewing assets in Code view
Review questions
Review answers

Chapter 5: Web design basics - 124
Developing a new website
• What is the purpose of the website?
• Who is the audience?
• How do they get here?
Working with thumbnails and wireframes
• Creating thumbnails
• Creating a page design
• Creating wireframes
• Designing for mobile devices
• The third way
Review questions
Review answers

Chapter 6: Creating a page layout - 138
Evaluating page design options
Working with predefined layouts
Styling a predefined layout
Styling elements using the Extract panel
Troubleshooting CSS conflicts
Extracting text from a Photoshop mockup
Deleting components and attributes from a template
Inserting new menu items
Creating new elements with the DOM panel
Creating menu items with copy and paste
Extracting text styling
Creating a gradient background using Extract
Extracting image assets from a mockup
Creating new Bootstrap structures
Adding a background image to the header
Finishing up the layout
Review questions
Review answers

Chapter 7: Working with templates - 188
Creating Dreamweaver templates
Removing unneeded components
Modifying a Bootstrap layout
Modifying text formatting in a Bootstrap element
Adding template boilerplate and placeholders
Fixing semantic errors
Inserting metadata
Validating HTML code
Working with editable regions
• Image carousel
• Card-based section
• List-based section
• Inserting a new Bootstrap element
• Inserting an editable region
• Inserting an editable optional region
Working with child pages
• Creating a new page
• Adding content to child pages
• Adding metadata to a child page
Updating a template
• Removing an optional region from a child page
• Removing unused sections from a child page
Review questions
Review answers

Chapter 8: Working with text, lists, and tables - 236
Previewing the completed file
Creating and styling text
• Importing text
• Duplicating Bootstrap rows
• Deleting unused Bootstrap components
Creating lists
Basing content structures on lists
• Pasting multiple elements in Live view
• Creating new list-based items
Creating and styling tables
• Creating tables from scratch
• Copying and pasting tables
• Styling tables with CSS
• Styling table cells
• Adding header rows to tables
• Controlling table display
• Inserting tables from other sources
• Creating semantic text structures
• Adding and formatting caption elements
Spell-checking webpages
Finding and replacing text
Review questions
Review answers

Chapter 9: Working with images - 294
Web image basics
• Vector graphics
• Raster graphics
• Raster image le formats
Inserting an image
Inserting images in Design view
Resizing images
Inserting Photoshop Images
Inserting images using the Assets panel
Adapting images to mobile design
Using the Insert menu
Working with the Insert panel
Inserting images into the site template
Adding CSS classes to template structures
Adding images to a Bootstrap carousel
Styling headings and text in a Bootstrap carousel
Self-paced exercise: Inserting images in child pages
Review questions
Review answers

Chapter 10: Working with navigation - 340
Hyperlink basics
• Internal and external hyperlinks
• Relative vs. absolute hyperlinks
Previewing the completed files
Creating internal hyperlinks
• Creating relative links
• Creating a home link
• Updating links in child pages
Creating an external link
• Creating an absolute external link in Live view
Setting up email links
Creating an image-based link
• Creating image-based links using the Element Display
• Creating text links using the Text Display
Targeting page elements
• Creating internal targeted links
Creating a destination link in the Element Display
• Targeting id-based link destinations
Locking an element on the screen
Styling a navigation menu
Adding a telephone link
Checking your page
Self-paced exercise: Adding additional links
Review questions
Review answers

Chapter 11: Publishing to the web - 386
Defining a remote site
• Setting up a remote FTP site (optional)
Cloaking folders and files
Wrapping things up
• Creating a home page
• Completing the home page
Putting your site online (optional)
Synchronizing local and remote sites
Review questions
Review answers

Chapter 12 Working with mobile design - 414
Responsive design
• Mobile-first design
• Testing responsiveness in Dreamweaver
Media type properties
Media queries
Media query syntax
Working with the Visual Media Query interface
Introducing web frameworks
Setting up web-hosted fonts
• Setting the base font
• Building font stacks with web-hosted fonts
• Specifying font size
Creating custom media queries
• Adding rules to a media query
• Controlling text styling with media queries
• Changing component visibility with media queries
Controlling Bootstrap element alignment
Revising Bootstrap template structure
Adapting content to mobile design
• Checking pages for design conflicts
• Making HTML tables responsive
Previewing pages using Real-Time Preview
Fixing issues for mobile design and desktop
Review questions
Review answers

Course FAQs

What are the available class formats?

This course is taught by a live instructor and is available in two class formats:

  1. Live Online for Individuals
  2. Onsite/Online for Private Groups

What is the Adobe Dreamweaver workspace?

Adobe Dreamweaver is a powerful web development application that offers an intuitive workspace to help streamline the website creation process. The workspace provides quick access to all of the necessary tools and features needed to create, design, code and publish professional websites. With its user-friendly interface and simple drag-and-drop functionality, Adobe Dreamweaver makes it easy for users to design and collaborate on their web projects. The workspace includes several panels, such as the Properties Inspector, which provides a detailed view of the HTML elements in your webpage; the Insert panel which allows you to quickly add new elements like images or videos; and the Files panel which gives you an overview of all the files connected to your project. Adobe Dreamweaver also features a live view of the page you’re editing, so you can see changes in real time. With its comprehensive workspace, Adobe Dreamweaver has become a favorite among web developers for creating and managing professional websites with ease.

What is Adobe Dreamweaver code view?

Adobe Dreamweaver Code View is a powerful tool for creating and managing HTML, CSS, JavaScript, and other coding languages. It allows web developers to quickly design HTML code with less effort than if they were writing it by hand. The code view provides an intuitive user interface that makes working with complex coding languages easier than ever before. It also allows developers to quickly debug their code and make changes as needed. By taking advantage of the powerful coding tools offered by Adobe Dreamweaver Code View, web developers can be sure they are creating high-quality websites that are optimized for search engine results.

What is page layout in Adobe Dreamweaver?

Page layout in Adobe Dreamweaver is a powerful tool for designing and coding web pages. It allows users to quickly create complex page designs with features such as HTML, CSS, JavaScript, and more. With its drag-and-drop interface, users can easily place elements on the page, including text boxes, images, videos, and tables. It also offers a range of features for customizing the look and feel of web pages, including color pickers, font styles, and more. Adobe Dreamweaver makes it easy to create professional-looking page layouts with minimal effort. Furthermore, its intuitive design allows users to quickly create complex page designs with complete control over details such as HTML tags or Cascading Style Sheets (CSS). With its expansive array of tools and features, Adobe Dreamweaver is the perfect choice for web developers and designers looking to create engaging page layouts for their websites.

What are Adobe Dreamweaver templates?

Adobe Dreamweaver templates are web page designs created in the Adobe Dreamweaver software. These templates provide a foundation for web developers and designers to quickly create custom websites with professional looking results. With the help of these templates, users can easily set up the basic look and feel of a website without needing to start from scratch. They also allow for customization to match the website's content and branding. This makes Adobe Dreamweaver templates an invaluable tool for web developers and designers, saving them time while creating beautiful websites.

What are text, lists and tables features in Adobe Dreamweaver?

Adobe Dreamweaver is a powerful web development tool that allows users to create and maintain websites. It offers several features such as text, lists, tables, and more to help build attractive and dynamic websites.

Text formatting tools in Adobe Dreamweaver enable you to customize the look of your content by changing font sizes, colors and styles, and adjusting line spacing. You can also add hyperlinks to create clickable text and images. Lists help you organize content into bullet points or numbered items for easy readability, while tables let you layout your content in an organized manner. With Adobe Dreamweaver, you have the power to turn simple text, lists and tables into an eye-catching and engaging website.

Adobe Dreamweaver offers the flexibility to customize these features in a variety of ways. You can choose from an array of fonts, adjust font sizes and add borders, background colors and more to personalize your text. Lists can be formatted into bullet points or numbered items with options for spacing between items. Tables can be created with variable cell sizes and borders, background colors and more to make your content look professional.

What are the image features in Adobe Dreamweaver?

Adobe Dreamweaver offers several image features that make it simple to create and manage high-quality images in webpages. These include the ability to compress, resize and crop photos; adjust brightness, contrast and color saturation; add borders and shadows; apply filters such as blurring and sharpening; insert text captions; and even save images as a copy in web-friendly formats such as JPEG, PNG or GIF. All of these features make it easy to create attractive images for websites and other digital projects. Additionally, Adobe Dreamweaver allows users to embed external images into their HTML code, including images from stock photography sites or other sources. With the help of these tools, designers and developers can create stunning images to enhance their web content.

What navigation features are in Adobe Dreamweaver?

Adobe Dreamweaver provides a comprehensive set of navigation features to help users create and manage websites. These navigation features allow users to create menus, link content between pages, and create custom navigation paths for their visitors. The integration with Adobe Creative Cloud makes it easy to collaborate on projects with team members. Additionally, the real-time preview feature allows users to quickly view the changes they make in real time and test the effects of their navigation decisions. With Adobe Dreamweaver, users can create powerful and engaging websites with advanced navigation features.

What publishing options are are in Adobe Dreamweaver?

Adobe Dreamweaver is a powerful web design and development tool that provides an array of publishing options for developers. Once you have completed your website project, you can publish it locally or remotely via FTP, FTPS or SFTP. You can also use Adobe Dreamweaver's built-in WebDAV client to upload files to a WebDAV server. In addition, Dreamweaver supports publishing to an Amazon S3 account and configuring websites for Microsoft IIS Web Server and Apache. After the website is published, Adobe Dreamweaver also allows you to preview the site in different browsers on your local computer, or test it remotely via a URL. You can even deploy sites to mobile devices with Adobe Edge Inspect. With all of these publishing options available, you have the flexibility to create and deliver a website that meets your requirements.

What mobile design features are in Adobe Dreamweaver?

Adobe Dreamweaver has a range of mobile design features to help create and optimize websites for mobile devices. These features allow users to preview their website designs on different devices, adjust the layout and content according to device dimensions and add interactive elements including touch gestures, menus and navigation bars. Adobe Dreamweaver also supports HTML5 and CSS3 web standards, enabling developers to quickly and easily create websites that are optimized for mobile devices. In addition, it has built-in support for Adobe PhoneGap which helps developers package their website into a native app that can be downloaded from mobile app stores. With these features and more, Adobe Dreamweaver is an excellent choice for creating and optimizing websites for mobile devices.

Related Adobe Dreamweaver Information:

How Much Do Adobe Dreamweaver Training Courses Cost?

Public instructor-led Adobe Dreamweaver course prices start at $1330 per student. Group training discounts are available.

Self-Paced Adobe Dreamweaver eLearning courses cost $250 at the starting point per student. Group purchase discounts are available.

What Adobe Dreamweaver Skills Should I Learn?

A: If you are wondering what Adobe Dreamweaver skills are important to learn, we've written a Dreamweaver Skills and Learning Guide that maps out Dreamweaver skills that are key to master and which of our courses teaches each skill.

Read Our Dreamweaver Skills and Learning Guide

Is Adobe Dreamweaver hard to learn?

A: There is no definitive answer to whether or not Adobe Dreamweaver is hard to learn. It depends on various factors such as your prior experience with web development, your level of comfort with design software, and your willingness to put in the time and effort to master the program.

That being said, Dreamweaver is a powerful tool that can be used to create sophisticated websites. If you're willing to invest the time and effort into learning how to use it, you'll be rewarded with the ability to create amazing websites. So, while the answer to the question of whether or not Adobe Dreamweaver is hard to learn is subjective, we think it's definitely worth the effort.

Can a beginner use Dreamweaver?

A: Yes, a beginner can use Dreamweaver to create a website. Dreamweaver is a user-friendly web development tool that enables even those with no prior coding experience to create a professional-looking website. While more advanced users may prefer to hand-code their websites using HTML, CSS, and other web programming languages, Dreamweaver makes it easy for anyone to create a beautiful and functional website without having to write a single line of code. So whether you're just getting started with web design or you're an experienced coder looking for an easier way to develop websites, Dreamweaver is the perfect tool for the job.

Is Dreamweaver good for coding?

A: Yes, Dreamweaver is good for coding. It is a powerful and popular web development tool that can be used to create websites and web applications. It has many features and functions that make it easy to use and helpful for coding. Additionally, Dreamweaver is constantly being updated with new features and improvements, so it is always a good choice for coding.

What are the top Adobe Dreamweaver skills?

A: Some of the most important Adobe Dreamweaver skills include an understanding of HTML, CSS, and web standards. Additionally, Dreamweaver provides a number of features and tools that can help streamline web design and development workflows. As such, knowing how to use Dreamweaver effectively can greatly improve your efficiency and productivity. Here are some key Adobe Dreamweaver skills that every web designer or developer should master:

Top Adobe Dreamweaver Skills

1. Understanding HTML and CSS - As a web designer or developer, it is essential to have a good understanding of HTML and CSS. These two technologies form the foundation of all modern website development, so having a firm grasp of them is essential for anyone who wants to build websites using Dreamweaver. Additionally, understanding HTML and CSS will also make it easier to take advantage of Dreamweaver's many powerful features and tools.

2. Web Standards - Adhering to web standards is important for ensuring that your website will be accessible to the widest possible audience. Additionally, following web standards can help improve your site's search engine optimization (SEO) and make it easier to maintain and update your website over time. Dreamweaver includes a number of features and tools that can help you develop websites that meet the latest web standards.

3. Streamlined Workflows - Dreamweaver includes a number of features and tools that can help streamline your web design and development workflows. For example, Dreamweaver's code-hinting feature can help you quickly find and insert the right HTML code for your web pages. Additionally, Dreamweaver's live view feature allows you to see how your web pages will look in a web browser without having to preview them manually. Learning how to take advantage of these and other features can help you work more efficiently and produce higher-quality websites.

4. Optimized Code - One of the great things about Dreamweaver is that it can help you generate optimized HTML, CSS, and JavaScript code for your web pages. This can be extremely helpful for improving your website's performance and ensuring that your pages load quickly for visitors. Additionally, using Dreamweaver's code optimization features can also help reduce the size of your web pages, which can further improve your site's performance.

5. Mastering Dreamweaver - Of course, the best way to get the most out of Dreamweaver is to master its many features and tools. The more you know about Dreamweaver, the more quickly and easily you'll be able to build high-quality websites. Luckily, there are many great resources available for learning Dreamweaver, including books, online tutorials, and training courses. Investing some time in learning Dreamweaver will pay off handsomely in terms of your efficiency and productivity as a web designer or developer.

Adobe Dreamweaver is a powerful tool for building websites, and there are many skills that every web designer or developer should master. Understanding HTML and CSS, adhering to web standards, and taking advantage of Dreamweaver's many features and tools can help you build better websites faster. So if you want to get the most out of Dreamweaver, be sure to master these important Adobe Dreamweaver skills.

Where Can I Learn More About Adobe Dreamweaver?

Adobe Blogs

Adobe User Groups

Adobe Online Forums

Explore Dreamweaver Training Classes Near Me:

Certstaffix Training provides Dreamweaver classes near me or online, depending on the number of students involved. We offer online courses for individual learners, as well as in person classes at your office for corporate groups. Our trainers are highly experienced professionals with the expertise necessary to help you gain a thorough understanding of Dreamweaver concepts and tools. With our courses available online for individuals or in person for corporate groups, it's easy to develop your Dreamweaver skills. Start learning today and see how Certstaffix Training can help you reach your goals.


Have a Group?
Request Private Training

5/28/2024 10:00:00 AM
Online Class

Registration Deadline - 05/13/2024


7/10/2024 10:00:00 AM
Online Class

Registration Deadline - 06/25/2024


8/21/2024 10:00:00 AM
Online Class

Registration Deadline - 08/06/2024


9/30/2024 10:00:00 AM
Online Class

Registration Deadline - 09/15/2024


11/12/2024 10:00:00 AM
Online Class

Registration Deadline - 10/28/2024

Start your training today!