Including more than 10 hours of video tutorials, the course comes complete with lesson files, assessment quizzes, and review materials. In it, users will receive a comprehensive introduction to Dreamweaver, including best …
Including more than 10 hours of video tutorials, the course comes complete with lesson files, assessment quizzes, and review materials. In it, users will receive a comprehensive introduction to Dreamweaver, including best practices as well as fundamental web design concepts. Covered topics include Dreamweaver’s HTML5 and CSS3 improvements, multimedia, interactivity, working within the Creative Cloud, and more.
This chapter offers an introduction to the October 2014 release of Dreamweaver CC. You’ll learn what it is and how it works. This chapter also includes an overview of what’s covered in this video course.
Welcome 00:01:41
What Is Dreamweaver? 00:07:48
Welcome Tour and Synchronizing Settings with the Creative Cloud 00:06:39
About This Video and the Project Files 00:04:42
Displaying Filename Extensions on Windows 00:02:23
If you’re new to web development, this chapter covers basic knowledge required to start working with Dreamweaver.
How Web Pages Are Built 00:05:59
Understanding Family Tree Relationships 00:05:08
How CSS Styles Web Pages 00:05:58
Understanding Pixels and Other Units of Measurement 00:05:20
Color Formats on the Web 00:03:02
Naming Conventions 00:03:08
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.
Exploring the Preset Workspaces 00:06:00
Introducing the Extract Panel 00:07:13
Defining a Site in Dreamweaver 00:05:07
Creating New Documents 00:04:53
Using a Predefined Layout 00:08:45
Organizing Files Within a Site 00:03:04
Exploring the Document Window 00:07:15
Editing Attributes and Text in Live View 00:08:09
Viewing and Editing Values in the Property Inspector 00:05:58
Using the Tag Selector 00:03:02
Selecting and Manipulating HTML with Element Quick View 00:04:57
Using the CSS Designer 00:05:49
Changing the Look of Code View 00:04:31
Changing Dreamweaver Preferences 00:05:10
What’s Different on a Mac? 00:04:37
In this chapter you’ll learn how to create text content and format it both working directly in the Document window and importing text from a Microsoft Word document in preparation for styling it with CSS and adding images from a layout created in Adobe Photoshop.
Introducing the Case Study 00:04:20
Formatting Headings, Paragraphs, and New Lines 00:07:29
Creating Bulleted and Numbered Lists 00:06:02
Importing from Word and Paste Special 00:06:33
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:04:27
Setting the Font, Size, and Color of Text 00:07:45
Using Adobe Edge Web Fonts 00:07:14
Building a Custom Font Stack 00:04:05
Whether you create the design for your website in Photoshop or simply style it directly in Dreamweaver, you need to build the basic structure and layout first. This chapter takes you step by step through adding the HTML5 structural elements and creating the two column layout for the case study.
Understanding the CSS Box Model 00:08:36
Adding HTML5 Structural Elements 00:07:28
Using the Snippets Panel to Support Older Versions of Internet Explorer 00:06:08
Adjusting Width, Padding, and Margins 00:06:38
Floating Elements 00:05:05
Creating the Two-Column Layout for Internal Pages 00:07:42
This chapter explores the various types of links you can add to your site and how to style them.
Internal and External Links 00:04:33
Linking to a Specific Point in a Page 00:03:13
Opening Files in a New Window 00:04:22
Dragging a URL from the Assets Panel 00:04:39
Using a Library Item for Common Page Elements 00:05:48
Using Pseudo-Classes to Style Links 00:04:51
Converting a List into a Navigation Bar 00:06:49
The new Extract panel is one of the greatest new features of this release of Dreamweaver. With it, you can easily extract images and CSS styles. This chapter covers the process in detail.
Choosing the Right Image Format 00:07:22
Setting Extract Preferences 00:02:48
Uploading the Photoshop Comp to the Creative Cloud 00:04:06
Dragging and Dropping an Image from a Photoshop Comp 00:05:58
Using the Extract Panel to Download an Image 00:04:52
Copying and Pasting Styles into the CSS Designer 00:05:08
Using Code Hints to Extract CSS 00:04:55
Extracting Colors and Measurements 00:05:32
This chapter explores techniques for working with images. You’ll learn about inserting images, adding captions, and doing quick edits.
Importing and Inserting Images 00:08:23
Adding a Caption to an Image 00:04:55
Inserting Images in Live View 00:07:16
Using Images as Links 00:07:17
Modifying Images 00:07:06
The CSS Designer in this version of Dreamweaver CC has been improved to a great degree. This chapter covers some of the new capabilities.
Setting Border Colors and Styles 00:06:53
Adding Rounded Corners 00:04:50
Creating Drop Shadows 00:06:02
Using a CSS Sprite to Add Background Images 00:07:02
Using a CSS Gradient 00:04:57
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:03:36
Fixing an Element within the Browser Viewport 00:07:24
Shifting an Element’s Relative Position 00:03:48
Keeping Absolutely Positioned Elements in Sync 00:05:26
Stacking Elements with Z-index 00:06:40
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:04:31
Introduction to CSS Transitions 00:02:51
Using the CSS Transitions Panel 00:06:12
Setting the Transform Origin 00:04:56
Dreamweaver’s Inspect Mode and Code Navigator are useful tools for inspecting CSS and troubleshooting problems. This chapter also explains the rules governing which styles take precedence when there’s a conflict.
Using Inspect Mode 00:03:16
Viewing the CSS Cascade 00:05:24
Resolving Conflicting Styles 00:03:30
Organizing Styles for Easy Maintenance 00:03:30
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:05:31
What Are Media Queries? 00:04:16
Defining the Grid 00:07:27
Inserting Fluid Elements 00:06:50
Adding the Content 00:06:23
Adjusting the Layout for Different Resolutions 00:08:09
Styling a Fluid Grid Layout 00:05:44
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 HTML5 Video 00:08:52
Inserting an Edge Animate Composition 00:04:43
Inserting HTML5 Audio 00:05:43
Troubleshooting HTML5 Video and Audio 00:03:03
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:26
Modifying a Table 00:04:41
Importing Tabular Data 00:06:05
Styling a Table with CSS 00:08:28
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:32
Creating Text Input Fields 00:07:09
Checkboxes and Radio Buttons 00:07:16
Select Menus and Lists 00:04:19
Associating a Datalist with a Text Input Field 00:04:07
Styling Form Elements 00:07:06
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 deploying your website to a server.
Adding a Description to a Page 00:02:52
Validating Your HTML 00:06:04
Running Site Reports 00:05:00
Setting Up Your Server Login Details 00:05:08
Uploading and Downloading Files 00:06:40