O'Reilly logo



Start Free Trial

No credit card required

Adobe Dreamweaver CC Learn by Video (2015 release)

Video Description


Lesson Files


Table of Contents

  1. This chapter offers an introduction to the October 2015 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.
    1. Welcome 00:02:37
    2. What Is Dreamweaver? 00:04:12
    3. Synchronizing Settings with the Creative Cloud 00:01:35
    4. About This Video and the Project Files 00:04:25
    5. Displaying Filename Extensions on Windows 00:00:34
  2. If you're new to web development, this chapter covers basic knowledge required to start working with Dreamweaver.
    1. How Web Pages Are Built 00:06:00
    2. Understanding Family Tree Relationships 00:03:21
    3. How CSS Styles Web Pages 00:06:14
    4. Understanding Pixels and Other Units of Measurement 00:08:35
    5. Color Formats on the Web 00:02:59
    6. Naming Conventions 00:03:42
  3. 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.
    1. Exploring the Preset Workspaces 00:01:30
    2. Creating Folders 00:02:39
    3. Defining a Site in Dreamweaver 00:02:13
    4. Creating New Documents 00:03:12
    5. Using a Predefined Layout 00:01:32
    6. Organizing Files Within a Site 00:00:56
    7. Exploring the Document Window 00:06:06
    8. Editing Attributes and Text in Live View 00:00:48
    9. Viewing and Editing Values in the Property Inspector 00:01:22
    10. Using the Tag Selector 00:01:12
    11. Selecting and Manipulating HTML with the DOM Panel 00:01:25
    12. Using the CSS Designer 00:05:15
    13. Changing the Look of Code View 00:01:32
    14. Changing Dreamweaver Preferences 00:04:14
  4. 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.
    1. Setting up the Working Site 00:01:50
    2. Formatting Headings, Paragraphs, and New Lines 00:07:18
    3. Creating Bulleted and Numbered Lists 00:02:07
    4. Importing from Word and Paste Special 00:02:52
  5. This chapter explains how to make text in your web pages look more distinctive by styling it with CSS and using web fonts.
    1. Attaching an External Style Sheet 00:01:14
    2. Setting the Font, Size, and Color of Text 00:03:02
    3. Using Adobe Edge Web Fonts 00:04:22
    4. Building a Custom Font Stack 00:01:39
  6. 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.
    1. Introducing Bootstrap 00:02:49
    2. Understanding the CSS Box Model 00:11:13
    3. Adding DIV tags for styles 00:02:08
    4. Adjusting Width, Padding, and Margins 00:03:17
    5. Floating Elements 00:04:55
    6. Adding HTML5 Structural Elements 00:07:40
    7. Introducing Skeleton 00:03:52
  7. This chapter explores the various types of links you can add to your site and how to style them.
    1. Internal and External Links 00:04:59
    2. Linking to a Specific Point in a Page 00:03:46
    3. Using a Library Item for Common Page Elements 00:09:08
    4. Using Pseudo-Classes to Style Links 00:04:06
    5. Converting a List into a Navigation Bar 00:08:23
  8. 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.
    1. Choosing the Right Image Format 00:07:20
    2. Introducing the Extract Panel 00:03:57
    3. Setting Extract Preferences 00:02:32
    4. Dragging and Dropping an Image from a Photoshop Comp 00:02:46
    5. Using the Extract Panel to Download an Image 00:02:34
    6. Copying and Pasting Styles into the CSS Designer 00:03:43
    7. Using Code Hints to Extract CSS 00:04:12
  9. This chapter explores techniques for working with images. You'll learn about inserting images, adding captions, and doing quick edits.
    1. Importing and Inserting Images 00:06:14
    2. Working with SVG images 00:08:12
    3. Inserting Images in Live View 00:04:24
    4. Adding an image as a background in CSS 00:04:55
    5. Using Images as Links 00:04:25
    6. Modifying Images 00:09:34
  10. The CSS Designer in this version of Dreamweaver CC has been improved to a great degree. This chapter covers some of the new capabilities.
    1. Setting Border Colors and Styles 00:12:25
    2. Creating Drop Shadows 00:04:43
    3. Using a CSS Gradient 00:08:42
  11. 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.
    1. How CSS Positioning Works 00:12:02
    2. Fixing an Element within the Browser Viewport 00:06:19
    3. Keeping Absolutely Positioned Elements in Sync 00:08:37
    4. Layout the Header 00:05:27
  12. 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.
    1. Rotating Elements 00:07:14
    2. Introduction to CSS Transitions 00:06:44
    3. Using the CSS Transitions Panel 00:04:00
    4. Setting the Transform Origin 00:06:08
  13. 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.
    1. Using Inspect Mode 00:02:24
    2. Viewing the CSS Cascade 00:05:13
    3. Organizing Styles for Easy Maintenance 00:03:49
  14. This chapter shows how to adapt the case study as a responsive web design using CSS media queries to deliver different styles to mobile phones, tablets, and desktop computers depending on the width of the browser viewport.
    1. What Are Media Queries? 00:05:32
    2. Determining Break Points 00:03:22
    3. Styling a Responsive Layout 00:08:18
    4. Creating Navigation on Mobile 00:11:24
    5. Viewing Pages on Mobile Devices 00:03:31
  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.
    1. Inserting a Table 00:04:59
    2. Adding Data to a Table 00:05:27
    3. Importing Tabular Data 00:04:25
    4. Modifying a Table 00:03:47
    5. Styling a Table with CSS 00:06:11
  16. 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.
    1. Introduction to Forms 00:04:55
    2. Creating Text Input Fields 00:07:25
    3. Checkboxes and Radio Buttons 00:05:37
    4. Select Menus and Lists 00:02:31
    5. Inserting a Button 00:02:52
    6. Styling Form Elements 00:08:58
  17. 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.
    1. Adding Meta Tags to the Site 00:04:37
    2. Running Site Reports 00:01:47
    3. Setting Up Your Server Login Details 00:04:50
    4. Uploading and Downloading Files 00:05:25