Adobe Dreamweaver CC Learn By Video

A comprehensive training course on Adobe Dreamweaver CC
4.6 (6 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
• 51 students enrolled
Instructed by Peachpit Press Design / Design Tools
Take This Course
  • Lectures 113
  • Length 10.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2013 English

Course Description

This critically-acclaimed training program from Adobe Press offers exceptional quality high-definition video to teach the fundamentals of Adobe Dreamweaver CC.

Including more than 10 hours of video tutorials, the course comes complete with lesson files. Experienced instructor David Powers presents a comprehensive introduction to Dreamweaver as well as best practices.

What are the requirements?

  • Dreamweaver CC

What am I going to get from this course?

  • Learn Dreamweaver's HTML5 and CSS3 improvements
  • Learn Best Practices
  • Learn how to work within the Creative Cloud

Who is the target audience?

  • Users who want to learn to build web sites using Adobe Dreamweaver CC

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introducing Dreamweaver CC

Dreamweaver is a one-stop shop for creating websites with support for a wide range of Web-related technologies. This introductory lesson gives a brief overview of the program's capabilities.


This video explains how this course is organized, what it covers, and how to find the course assets.


By default, Windows hides filename extensions for known file types, which can create problems with identifying images and videos stored in different formats. Windows users are recommended to follow the instructions in this lesson to enable the display of filename extensions.

Section 2: Web Basics

Planning a website involves more than just thinking about the visual design. As this lesson explains, factors such as who it's for and why it's being built will affect the structure, look, and feel of the site.


Each web page is made up of multiple files that the browser draws together to construct the page. This lesson looks at the main page of one of the case studies in this course, and examines how it's constructed, using HTML for the page structure and CSS for the way the page is styled and laid out.


CSS uses selectors to identify elements in a web page and apply styles to them. This lesson introduces you to the four most common selectors: type (tag name), ID, class, and descendant.


Pixels, ems, and percentages are widely used in HTML and CSS to specify the size of text, images, and other elements. This video explains the difference between device pixels and those used in CSS. You'll also learn about the relationship between pixels and points.


Computers represent colors in several different formats. This lesson describes the different formats, and explains which browsers support them. You'll also learn about alpha transparency, which makes elements translucent, allowing the background to show through.


This video offers advice on choosing names for files, folders, and attributes such as IDs and classes, helping make your sites easier to navigate and maintain..


Web designers should have a clear understanding of copyright and the need to obtain permission before using copyrighted material. Copyright also protects your own assets, such as text, images, and videos.


In most countries, it's a legal requirement to ensure that websites are accessible to the blind and people with other disabilities. This video explains some very simple measures you can take to make your sites accessible. They should also help improve your search engine ranking.

Section 3: Dreamweaver Basics

The Dreamweaver Welcome screen provides a set of quick shortcuts to create new documents, open recent ones, and access resources on the Adobe website. This lesson also shows how to re-enable the Welcome screen if it has been disabled.


Dreamweaver is a site-based application where you create and maintain a copy of your live website on your local computer. In this lesson you'll learn how to define a site in Dreamweaver.


The Document window is where you will do most of your work in Dreamweaver. In this lesson, you'll learn how to view web pages in Design, Code, and Split views. You'll also see how to work with related documents using the Related Files toolbar.


The Property Inspector is one of the most important panels in Dreamweaver. It provides context-sensitive access to the most commonly used HTML attributes.


This lesson describes how to prevent the Code Navigator indicator, a little ship's wheel icon, from popping up whenever the cursor is idle in the Document window for a few seconds.


The CSS Designer is where you control and manage most of the CSS that styles your web pages. It replaces functionality that was split over different panels and dialog boxes in earlier versions of Dreamweaver. This lesson also describes how Live Highlight (reverse inspect) works in Live view.


Dreamweaver's workspace is highly configurable. This lesson explores the many options and explains how to create a workspace to fit your own requirements.


Dreamweaver's defaults are fine for most people, but there are some preferences you may want to change to suit your way of working. This lesson highlights some of the most useful, including preferences for synchronizing Dreamweaver settings with the Creative Cloud.


Dreamweaver is capable of handling a wide range of web-related files. This lesson explains the large number of options available in the New Document Dialog box.


Although Dreamweaver creates the HTML code on your behalf, it's important to understand how web pages are structured. This lesson describes the basic HTML skeleton Dreamweaver inserts in Code view when you create a new web page.


One of the most common mistakes is to forget to give your web pages a title. This lesson explains the importance of the title, and shows how to add it to a page.


The Windows and Mac versions of Dreamweaver are virtually identical, but there are a few key differences in the Mac version, as you'll see in this lesson.

Section 4: Working with Text

When you type text directly in Design view, Dreamweaver automatically creates paragraph tags to add structure to your document. In this lesson, you'll also learn how to format headings, and to create line breaks when adding an address to a page.


Lists of bullet points are known as unordered lists in HTML, and lists of numbered items are called ordered lists. Dreamweaver makes it easy to create both types. You'll also learn how to nest lists and how to control the style and start number of an ordered list.

Inserting Special Characters

Blockquote is one of the most misused elements in HTML. This lesson explains what it's really intended to be used for, and clarifies the dual function of two icons in the Property inspector.


When you copy and paste from Microsoft Word documents, Dreamweaver's Paste Special option preserves as much or as little of the formatting as you want. In the Windows version of Dreamweaver, you can also import directly from a Word document without having to open it.


When copying and pasting inside Dreamweaver's Document window, you need to be aware of the difference between Design view and Code view. This also applies when copying HTML or other code from external sources.

Section 5: Styling Text

This lesson explains why using an external style sheet is more efficient than using inline or embedded styles. It also shows you how to attach an external style sheet to a page in Dreamweaver CC.


This lesson shows how to change the font for the whole page by setting the font-family property in a style rule for the body. You'll also learn how to set the font size, center text, and use the color picker to set colors and to sample colors from an outside source, such as an image.


You can make your text look more distinctive by choosing from more than 500 Edge Web Fonts. The fonts are hosted on Adobe servers, and are free to use. This lesson shows how to enable Edge Web Fonts in Dreamweaver CC, and explains how to avoid a flash of unstyled text on slow connections.


Instead of relying on an online service, you can also use local web fonts. Dreamweaver CC simplifies the installation of local web fonts, creates the necessary style rules, and copies the font files to a dedicated folder in the site root.


When using web fonts, it's a good idea to create a custom font stack listing fallback fonts in case the web font can't be loaded by the browser. In this lesson, you learn how to define and edit your own font stacks in Dreamweaver CC.

Section 6: Basic Page Layout

Dreamweaver has a small number of predefined layouts that can be useful if you're in a hurry to create a website. The style sheets are also heavily commented, so you can use them to experiment and learn about basic web concepts.


This lesson explains how the main page of the case study is structured, and gives instructions for setting up for the case study that will run through this and subsequent chapters.


The Insert panel lets you insert HTML structural elements precisely in relation to any element that has an ID. In this lesson, you'll build a solid HTML structure using a div and HTML5 structural elements for the case study's main page.


This lesson continues the preparation for the case study, replacing the placeholder text in the HTML structure, adding some basic styles, and attaching an external JavaScript file to ensure that Internet Explorer 8 and earlier apply styles correctly to HTML5 structural elements.


The CSS box model controls vertical and horizontal space around elements, and it also affects how width and height are calculated. This lesson explains how it works.


In this lesson, you control the width of the page content using a combination of width, margins, and padding. You also learn how to center an element by giving it a width and setting its horizontal margins to auto.


The float property is currently the most reliable cross-browser method of aligning elements alongside each other by floating an element to the left or right to allow subsequent elements to move into the vacated space alongside. You'll also learn how to prevent elements moving alongside floated elements using the clear property.


In this video, you'll see how to apply both solid background colors and translucent ones. When using a background color with alpha transparency, it's important to provide a fallback for older browsers.

Section 7: Working with Images

Images can be stored in many formats, but not all are suitable for the web. Discover the strengths and weaknesses of the different formats, and learn which to avoid.


This lesson shows how to insert an image in a web page and flow text around it using a CSS class. For images that are an important part of the page content, you should also add alternate text for the benefit of screen readers for the blind, and for search engines.


HTML5 adds the figure and figcaption elements, which are ideal for displaying an image with a caption. Browsers add a default margin to figure elements, so this lesson also shows how to adjust the margin yourself.


This lesson shows how to position the insertion point accurately between two elements to insert a figure element for a hero image. It then explains why resetting the margins on all figure elements doesn't affect the margins already set using a descendant selector.


Decorative images should be added to a page using the CSS background-image property. By default, background images automatically tile horizontally and vertically to fill the element. In this lesson, you learn how to control the repeat behavior and position of the image.


Dreamweaver has a range of image editing options that can be accessed directly from the Document window. However, they make permanent changes to your files, so they should be used with caution. This lesson will tell you what you need to know.

Section 8: Using Text and Images as Links

This lesson describes how to convert text into internal links within the same site and external links to other sites using the Link field in the Property inspector.


You can link to a specific point in a page by assigning an ID to the element you want to link to, and appending the ID to the end of the URL as a URL fragment.


In this lesson, you'll learn how to use an image as a link. You'll also learn how to remove the blue border that some Internet Explorer wraps around image links.


An image map creates hotspots on part of an image to link to other web pages. In this lesson, you learn how to create hotspots of different shapes, as well as how to prevent Internet Explorer from surrounding the image map with a blue border.


An email link should open the local email program to allow visitors to send an email to a specific address. But, as this lesson explains, it doesn't always work in practice.


In this lesson, you'll learn how to open links in a new window or browser tab using the target attribute. This technique is particularly useful when linking to non-web files, such as PDF documents, that may take a long time to load on a slow connection.


In this lesson you'll learn how to use the link and user action pseudo-classes to apply styles to links in various interactive states. You'll also see how to apply different styles to links in another part of a page.

Converting a List into a Navigation Bar
Section 9: Diving Deeper into CSS

Knowing which selectors to use is an important skill in CSS. This lesson provides an overview of the most widely used and useful selectors.


When a style rule fails to work, it's usually because another style rule is applying the same property with a different value. This lesson explains how to calculate which rule takes precedence using a principle known as specificity.


Dreamweaver has two modes that help inspect the effect of CSS. Live Highlight (reverse inspect) identifies which elements are affected by a selector, while Inspect Mode highlights padding and margins, and shows the dimensions of elements, helping you to understand how a page is laid out and to troubleshoot problems with your CSS.


In this lesson you'll learn about the Code Navigator, a useful tool for inspecting styles in context. It displays the cascade of rules that apply to the current selection and provides a direct link to the style definition in your style sheet.


With CSS, you can set the color, width, and style of each side of an element independently, as shown in this lesson.


The border-radius visual tool in the CSS Designer makes light work of applying rounded corners to elements that have a border, background, or both. In this lesson, you'll see how to create circles, ellipses, and other shapes using just CSS.


The CSS3 text-shadow and box-shadow properties adds drop shadows to HTML elements, as you'll see in this lesson.


Dreamweaver CC's gradient tool makes it easy to create linear and repeating-linear gradients without the need for images. CSS gradients are supported by all modern browsers, but this lesson also shows how to use the gradient tool to pick a suitable background color as a fallback for Internet Explorer 9 and earlier.


Many people like to print out web pages to refer to the information they contain. Creating a print style sheet to override some of your main style rules improves the user experience, and in this lesson you'll see how to do so, including displaying the URLs of external links using CSS generated content and the :after pseudo-element.

Section 10: Library Items and Templates

Library items are useful for common page elements because Dreamweaver automatically updates the element in all pages where the library item has been used. In this lesson, you'll see how to convert a footer into a library item, and then update it.


Unlike library items, which control only part of a page, templates control the whole page. This lesson shows how to convert an existing page into a template and set up editable regions.


In this lesson, you'll see how to apply a template to an existing page and create a new child page from the template. When you make changes to a non-editable region of the master template, Dreamweaver updates the child pages automatically.


This lesson discusses some of the potential drawbacks of using Dreamweaver templates, which are best suited to relatively small websites. You'll also see how to detach a page from a template if you decide to stop using templates.

Section 11: Using CSS to Fix Elements in Position

This lesson sets the scene for the rest of this chapter, describing the basics of CSS positioning and highlighting some of the potential pitfalls.


This lesson shows how to fix the header at the top of the page so that the other content disappears behind it when the page is scrolled. Although fixing an element in the browser viewport is easy, it can cause complications for the rest of the page.


Relative positioning moves an element from its normal position without affecting the position of surrounding elements. This lesson shows how to use relative positioning to add an artistic effect to the main heading of the Pacific Highway case study.


Absolute positioning is rarely suitable for laying out whole web pages, but it's extremely useful for positioning elements precisely in relation to each other. In this lesson, you'll learn how to add a splash banner across the corner of another image.


When positioned elements overlap, you can control their stacking order with the z-index property. You'll also learn why some elements never come to the front however high you set their z-index.

Section 12: Using CSS Transforms and Transitions

The CSS transform property allows you to rotate, scale, and skew elements. It's supported by all modern browsers, but some browsers still require a vendor-specific prefix. As well as rotating images, you'll learn how to work with properties not currently listed in the CSS Designer.


This lesson looks at CSS transitions, which are simple animations that create smooth transitions from one state to another, such as when you hover over an element, without requiring the use of JavaScript.


The new CSS Transitions panel in Dreamweaver CS6 simplifies the process of applying a transition from one state to another. In this lesson, you'll learn how to rotate and scale images smoothly on hover.


This lesson looks at the transform-origin property, which controls the point from which a transform is executed, giving you greater control over how images are rotated and scaled. You'll also learn how to use relative positioning to prevent images from dropping behind other elements when scaled.

Section 13: Using jQuery UI Widgets and Effects

Accordion widgets are useful for displaying a lot of information in a limited space. This lesson shows how to insert and edit a jQuery UI accordion, and explains the various options available.


The jQuery UI Tabs widget is similar to an accordion in that only one panel is displayed at a time. Instead of the panels sliding up and down to reveal the content, they're controlled by a series of tabs across the top.


Styling jQuery UI widgets can be a major challenge because so many classes are applied dynamically. However, as you'll see in this lesson the simple solution is to use the jQuery UI Themeroller, a free online resource, and to replace the default style sheets with your customized theme.


This lesson shows how to apply jQuery UI effects to animate elements as they're revealed or hidden. The jQuery UI effects replace similar Spry effects used in Dreamweaver CS6 and earlier.

Section 14: Using Tables for Structured Data

In this lesson, you'll see how to insert a table into a web page. Although you can modify a table's structure after creating it, some important decisions need to be made at the time of insertion.


After inserting a table in a web page, you can insert or delete rows and columns using options in the Property Inspector or by right-clicking and choosing options from the context menu. This lesson demonstrates both methods.


Importing data from an external file saves a lot of time and effort. As long as the file is in a suitable format, Dreamweaver constructs an HTML table and populates it automatically with the data.


With a handful of CSS styles, you can turn a bland table into something far more attractive and readable. This lesson will show you just how easy it is.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Peachpit Press, Books, eBooks and Videos for Creative People produces top-notch videos, books and ebooks on the latest in graphic design, Web design and development, digital photography, multimedia, video, and general computing. Our award-winning products are authored by the creative industry's top professionals and feature step-by-step explanations, timesaving techniques, savvy insider tips, and expert advice. Peachpit is the home of Peachpit Press, Adobe Press, Apple Certified and New Riders and is the publishing partner for The National Association of Photoshop Professionals (NAPP), and others.

Ready to start learning?
Take This Course