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
English
Price: $45
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • Dreamweaver CC
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.

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
10:28:12
+
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
03:34

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
01:41
+
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
03:47

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
05:29

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
03:19

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
03:23

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
04:52

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
03:24

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
03:38

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
03:56
+
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
04:46

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
04:30

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
05:51

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
01:43

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
06:20

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
05:47

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
06:11

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
05:27

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
04:15

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
03:42

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?
04:51
+
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
07:23

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
06:49

Inserting Special Characters
04:49

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
03:27

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
05:07

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
02:52
+
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
05:14

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
06:31

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
07:06

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
05:54

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
04:14
+
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
05:08

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
02:57

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
08:10

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
08:45

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
10:34

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
06:17

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
06:00

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
05:22
+
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
08:05

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
05:22

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
05:39

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
05:32

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
05:23

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
06:11
+
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
05:24

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
04:29

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
03:58

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
06:29

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
02:36

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
06:28

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
07:45

Converting a List into a Navigation Bar
05:35
+
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
05:28

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
03:30

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
05:49

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
04:17

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
05:21

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
04:30

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

Creating Drop Shadows
06:28

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
06:14

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
09:20
+
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
07:08

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
04:59

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
06:21

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
02:59
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

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