Adobe Dreamweaver CC Learn By Video
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.
54 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Adobe Dreamweaver CC Learn By Video to your Wishlist.

Add to Wishlist

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.
54 students enrolled
Created by Peachpit Press
Last updated 10/2013
Price: $45
30-Day Money-Back Guarantee
  • 10.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn Dreamweaver's HTML5 and CSS3 improvements
  • Learn Best Practices
  • Learn how to work within the Creative Cloud
View Curriculum
  • Dreamweaver CC

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.

Who is the target audience?
  • Users who want to learn to build web sites using Adobe Dreamweaver CC
Students Who Viewed This Course Also Viewed
Curriculum For This Course
113 Lectures
Introducing Dreamweaver CC
3 Lectures 12:35

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.

Preview 07:20

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

About This Course and the Project Files

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.

Displaying Filename Extensions on Windows
Web Basics
8 Lectures 31:48

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.

Planning Your Website

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.

How Web Pages Are Built

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.

Basic CSS Selectors

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.

Understanding Pixels and Other Units of Measurement

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.

Setting Colors and Alpha Transparency

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..

Naming Conventions

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.

Understanding Copyright

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.

Making Web Pages Accessible
Dreamweaver Basics
12 Lectures 56:35

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.

The Welcome Screen

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.

Defining 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.

Exploring the Document Window

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

Preview 03:12

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.

Disabling the Code Navigator Indicator

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.

Introducing the CSS Designer

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

Organizing Your Workspace

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.

Changing Dreamweaver Preferences

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.

Using 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.

Inspecting the Basic Page Structure

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.

Creating the Web Page Title

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.

What's Different on a Mac?
Working with Text
6 Lectures 30:27

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.

Formatting Headings, Paragraphs, and New Lines

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.

Creating Bulleted and Numbered Lists

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.

Using Blockquote Correctly

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.

Importing from Word and Paste Special

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.

Copying and Pasting Inside Dreamweaver
Styling Text
5 Lectures 28:59

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.

Attaching an External Style Sheet

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.

Setting the Font, Size, and Color of Text

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.

Using Adobe Edge Web Fonts

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.

Installing Web Fonts Locally

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.

Building a Custom Font Stack
Basic Page Layout
8 Lectures 53:13

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.

Using a Predefined Layout

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.

Introducing the Case Study

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.

Inserting HTML Structural Elements

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.

Adding Content and Basic Styles

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.

Understanding the CSS Box Model

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.

Adjusting Width, Padding, and Margins

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.

Floating Elements

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.

Setting Background Colors
Working with Images
6 Lectures 36:12

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.

Preparing Images for the Web

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.

Inserting Images and Alternate Text

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.

Adding a Caption to an Image

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.

Resetting Figure Margins

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.

Using an Image as Background

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.

Modifying Images
Using Text and Images as Links
8 Lectures 42:44

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.

Internal and External Links

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.

Linking to a Specific Point in a Page

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.

Using Images as 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.

Creating an Image Map

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.

Creating an Email Link

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.

Opening Files in a New Window

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.

Using Pseudo-Classes to Style Links

Converting a List into a Navigation Bar
Diving Deeper into CSS
9 Lectures 50:57

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

Useful CSS 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.

Resolving Conflicting Styles

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.

Using Inspect Mode

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.

Using the Code Navigator

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

Setting Border Colors and Styles

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.

Adding Rounded Corners

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

Creating Drop Shadows

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.

Using a CSS Gradient

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.

Creating Styles for Print
Library Items and Templates
4 Lectures 21:27

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.

Creating and Modifying a Library Item

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.

Creating a Template from an Existing Page

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.

Creating Child Pages from a Template

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.

Templates Assessed
9 More Sections
About the Instructor
Peachpit Press
4.1 Average rating
177 Reviews
2,284 Students
51 Courses
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.