Video description

Table of Contents

In this chapter you’ll get a brief introduction to Dreamweaver CC – what it is, and how it works. You’ll also get an overview of what’s covered in this course.

Welcome 00:02:14

What Is Dreamweaver? 00:07:20

About This Course and the Project Files 00:03:34

Displaying Filename Extensions on Windows 00:01:42

This chapter looks at some fundamentals of planning and building web pages, as well as key concepts like basic CSS selectors, naming conventions, copyright, and accessibility.

Planning Your Website 00:03:48

How Web Pages Are Built 00:05:30

Basic CSS Selectors 00:03:20

Understanding Pixels and Other Units of Measurement 00:03:23

Setting Colors and Alpha Transparency 00:04:53

Naming Conventions 00:03:25

Understanding Copyright 00:03:38

Making Web Pages Accessible 00:03:56

In this chapter you’ll be introduced to the Dreamweaver interface, including the Welcome screen, the Document window, and panels. You’ll also learn how to define a site in Dreamweaver, organize your workspace, and set up your preferences.

The Welcome Screen 00:04:46

Defining a Site in Dreamweaver 00:04:31

Exploring the Document Window 00:05:52

Using the Property Inspector 00:03:13

Disabling the Code Navigator Indicator 00:01:43

Introducing the CSS Designer 00:06:21

Organizing Your Workspace 00:05:48

Changing Dreamweaver Preferences 00:06:11

Using the New Document Dialog Box 00:05:28

Inspecting the Basic Page Structure 00:04:15

Creating the Web Page Title 00:03:42

What’s Different on a Mac? 00:04:52

In this chapter you’ll learn how to insert and format text directly in the Document window, as well as preserving formatting when copying and pasting from external documents. You’ll also learn how to avoid problems when copying and pasting inside Dreamweaver.

Formatting Headings, Paragraphs, and New Lines 00:07:24

Creating Bulleted and Numbered Lists 00:06:50

Inserting Special Characters 00:04:50

Using Blockquote Correctly 00:03:28

Importing from Word and Paste Special 00:05:07

Copying and Pasting Inside Dreamweaver 00:02:52

This chapter explains how to make text in your web pages look more distinctive by styling it with CSS and using web fonts.

Attaching an External Style Sheet 00:05:14

Setting the Font, Size, and Color of Text 00:06:32

Using Adobe Edge Web Fonts 00:07:06

Installing Web Fonts Locally 00:05:55

Building a Custom Font Stack 00:04:14

This chapter takes you step by step through the process of building a web page, starting from a blank page, adding the HTML structure and text content, and creating a two-column layout for the case study that runs through subsequent chapters.

Using a Predefined Layout 00:05:08

Introducing the Case Study 00:02:58

Inserting HTML Structural Elements 00:08:10

Adding Content and Basic Styles 00:08:45

Understanding the CSS Box Model 00:10:34

Adjusting Width, Padding, and Margins 00:06:18

Floating Elements 00:06:00

Setting Background Colors 00:05:23

This chapter explores techniques for working with images. You’ll learn about file formats, alternate text, scaling, captions, and more.

Preparing Images for the Web 00:08:05

Inserting Images and Alternate Text 00:05:22

Adding a Caption to an Image 00:05:40

Resetting Figure Margins 00:05:33

Using an Image as Background 00:05:23

Modifying Images 00:06:12

This chapter explores the various types of links you can add to your site and how to style them.

Internal and External Links 00:05:24

Linking to a Specific Point in a Page 00:04:29

Using Images as Links 00:03:59

Creating an Image Map 00:06:29

Creating an Email Link 00:02:36

Opening Files in a New Window 00:06:28

Using Pseudo-Classes to Style Links 00:07:46

Converting a List into a Navigation Bar 00:05:36

This chapter explores some more advanced techniques for working with CSS. You’ll see how to use Inspect Mode and the Code Navigator, and how to apply rounded corners, drop shadows, and CSS gradients.

Useful CSS Selectors 00:05:28

Resolving Conflicting Styles 00:03:30

Using Inspect Mode 00:05:50

Using the Code Navigator 00:04:17

Setting Border Colors and Styles 00:05:21

Adding Rounded Corners 00:04:31

Creating Drop Shadows 00:06:28

Using a CSS Gradient 00:06:15

Creating Styles for Print 00:09:20

In this chapter you’ll get tips for managing the assets on your site. We’ll look at renaming and moving files, working with library items, creating templates, and more.

Creating and Modifying a Library Item 00:07:08

Creating a Template from an Existing Page 00:04:59

Creating Child Pages from a Template 00:06:21

Templates Assessed 00:02:59

CSS positioning lets you fix the position of an element with pinpoint accuracy, but it can be difficult to understand. This chapter explains the subtleties of fixed, relative, and absolute positioning.

How CSS Positioning Works 00:04:20

Fixing an Element within the Browser Viewport 00:06:43

Shifting an Element’s Relative Position 00:03:09

Keeping Absolutely Positioned Elements in Sync 00:05:32

Stacking Elements with z-index 00:05:06

This chapter explains how you can introduce greater variety to your layouts using CSS transforms to rotate and scale elements. You’ll also learn how to use Dreamweaver’s CSS Transitions panel to create smooth transitions from one state to another when hovering over an element.

Rotating Elements 00:05:28

Introduction to CSS Transitions 00:03:38

Using the CSS Transitions Panel 00:07:25

Setting the Transform Origin 00:05:32

In this chapter, you’ll see how to add interactivity to web pages using jQuery UI widgets and effects, which are based on jQuery, the most popular JavaScript framework.

Inserting an Accordion 00:08:15

Creating Tabbed Panels 00:07:50

Styling jQuery UI Widgets 00:08:03

Using jQuery Effects to Reveal and Hide Elements 00:07:15

HTML tables should not be used for page layout because they cause accessibility problems. However, they’re ideal for presenting structured data, as this chapter demonstrates.

Inserting a Table 00:06:37

Modifying a Table 00:06:07

Importing Tabular Data 00:04:44

Styling a Table with CSS 00:07:49

In this chapter we’ll look at online forms. You’ll learn about the different types of input elements and how to style a form.

Introduction to Forms 00:07:46

Inputting Single- and Multiple-Line Text 00:07:56

Specialized Text Input Fields 00:07:01

Checkboxes and Radio Buttons 00:07:45

Select Menus and Lists 00:05:20

Using a Datalist 00:04:17

Styling Form Elements 00:07:33

This chapter shows how to adapt the Pacific Highway case study as a responsive web design using Dreamweaver’s Fluid Grid Layout tools. A Fluid Grid Layout uses CSS media queries to deliver different styles to mobile phones, tablets, and desktop computers depending on the width of the browser viewport.

Introducing Fluid Grid Layouts 00:06:42

What Are Media Queries? 00:04:19

Defining the Grid 00:05:58

Inserting Fluid Elements 00:08:04

Adapting the Structure 00:04:57

Adding the Content 00:02:46

Adjusting the Layout for Different Resolutions 00:08:17

Styling a Fluid Grid Layout 00:08:22

These days it’s easier than ever to add multimedia like video and audio to web pages. You’ll also learn how to import an animation from Adobe Edge Animate.

Inserting an Edge Animate Composition 00:06:27

Creating a Flash Video Player for Older Browsers 00:06:30

Inserting HTML5 Video 00:05:54

Inserting HTML5 Audio 00:06:21

Troubleshooting HTML5 Video and Audio 00:03:11

In this chapter you’ll learn about tools and utilities that can make your work in Dreamweaver CC easier, including the powerful Find and Replace dialog box.

Using Find and Replace 00:05:40

Using a Saved Query 00:03:47

Running Site Reports 00:04:42

The moment of truth comes when you publish your site and share it with the world. In this chapter you’ll learn how to prepare for publishing by running site reports and validating and testing your code, then actually deploy your website to a server.

Adding a Description to a Page 00:03:18

Validating Your HTML 00:03:33

Setting Up Your Server Login Details 00:06:55

Uploading and Downloading Files 00:06:38