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