Home » Software Training » Adobe Dreamweaver CC
No. of
Lectures
Duration
(hrs:min)
152
22:32

Software Training: Adobe Dreamweaver CC Prof. Candyce Mairs (Adobe Certified)

4.6
234 ratings • 1 reviews
  • Level Intermediate
  • 152 Lessons (22hr : 32min)
  • 3,290 already enrolled!
  • Audio: English

Candyce Mairs returns to teach Dreamweaver CC, the newest version of Adobe's acclaimed website creation software. As an Adobe Certified Instructor and Expert in Dreamweaver, Candyce guides you through Dreamweaver's coding environment and visual interface. Everything in CC is covered from Setting up Preferences, HTML Headings, and Integrating CSS to Inserting Video, Tables, Templates, and Styling. Downloadable "before" and "after" lesson files let you work along with Candyce through each lesson. Professor Candyce Mairs has been in the training industry since 1994, is a Certified Internet Webmaster (CIW) Master Designer and Instructor, and also holds Adobe Certified Instructor and Expert certifications in Fireworks, ColdFusion, Acrobat, and Contribute.

Table of Contents

Section 1: Course Introduction
  What is Dreamweaver? 1:56
   Intro 0:00 
   What is Dreamweaver? 0:03 
    Dreamweaver Creative Cloud Overview 0:04 
  Creative Cloud Versioning 2:58
   Intro 0:00 
   Dreamweaver Creative Cloud Version 0:09 
    Checking & Updating Version 0:10 
  Using the Course Files 2:40
   Intro 0:00 
   Using the Course Files 0:07 
    Locating the Course Files 0:08 
    Course Files: Begin and End Version 0:41 
    Shortcut Sheet & Extra Folder 1:45 

Section 2: Introduction to the Web
  The Web Server Environment 6:12
   Intro 0:00 
   The Client Environment 0:05 
    Three Browsers 0:21 
    The Client Environment 1:22 
    View Page Source 1:36 
    Browsers Can Read Differently.. 2:24 
   The Web Server 2:59 
    inetpub 3:16 
    Web Servers are Software 3:25 
    wwwroot 3:47 
    ColdFusion9 4:16 
    ColdFusion 10 4:50 
    What is a Client? 5:17 
  Behind the Scenes 6:46
   Intro 0:00 
   CMairsCreate 0:15 
    Find This Under Resources 0:25 
   Static Web Page Request Process 0:35 
    Browser Reads Webpages 0:39 
    Web Server 1:09 
    So What Happens? 1:31 
    A Static Page 1:55 
   Dynamic Web Page Process 2:24 
    Server-Side Language 2:37 
    Client Requests A Page Not HTML 2:48 
    Application Server 2:56 
    Five Languages 3:18 
    Why Do We Need a Server-Side Language? 3:58 
   This Course Will Focus on Static Page Requests 5:06 
  What is a Browser 7:00
   Intro 0:00 
   A Browser is a Software That Reads a Web Page 0:10 
    3 Parts of a Browser 0:12 
    How is a Page Read by the Browser? 0:36 
   HTML 0:59 
    Parser 1:04 
    Page Structure 1:12 
    Header Tags 1:39 
    Paragraph Tags 1:59 
    Other HTML Tags 2:07 
    Content 2:21 
    Static Content 2:29 
    Dynamic Content 2:38 
   CSS 3:07 
    Formatting 3:13 
    Positioning 3:24 
    Example of Page Layout 3:39 
    Styling Can Include Images 4:13 
   JavaScript 4:28 
    User Interactivity 4:29 
    CSS and JavaScript are Interpreters 5:36 
    In Terms of Cross Browser Compatibility 5:53 
  HTML File Naming 8:23
   Intro 0:00 
   Looking at Site Structure 0:05 
    Using Dreamweaver to View Site Structure 0:10 
    Focusing on the Names 0:25 
    Index is Homepage 0:33 
    The Other Files 0:57 
    Lowercase Letter Preference 1:33 
    About Using Folders 1:52 
    HTML Page Names 3:36 
    Headless Camel Casing 4:09 
    Naming Format 4:33 
    Establish a File Naming Convention 5:05 
  How Can I Create Web Designs? 5:33
   Intro 0:00 
   Web Page Designs 0:07 
    No Limits to Programs 0:22 
    Tranquil Travel 0:53 
    Pre-Dreamweaver Planning 1:16 
    Fireworks 1:38 
    Homepage 1:56 
    Mobile 2:13 
    InnerPages 2:40 
    Photoshop CC 3:04 
    Work With Whatever is Most Comfortable 3:46 
    Remember: Mobile and innerPages, Too 4:29 
  Copyright in the Online Environment 8:49
   Intro 0:00 
   Copyright Laws 0:12 
    Copyright © 0:30 
    Copyright.Gov 1:45 
    Basically Copyright Means.. 1:56 
    In Other Words, No Plagiarism 2:18 
    Cannot Take Their Code Either 2:53 
    Automatically Copyrighted 3:27 
    Images are Copyright 3:48 
    Ask for Permission 4:10 
   Other Resources for Copyright Info 5:00 
    Copyright Basics 5:15 
    If It's on the Web, It's Not Yours 5:23 
    Stanford Copyright FAQs 5:42 
    Copyrights Differ in Countries 6:16 
    Websites: Five Ways to Stay Out of Trouble 6:41 
  The Importance of Accessibility 9:48
   Intro 0:00 
   Accessibility 0:15 
    What is Accessibility? 0:16 
    W3C 0:51 
    Recommended Standards Including Accessibility 1:07 
    Don't Forget 1:30 
    Accessibility = More User-Friendly 1:53 
    Accessibility in Planning Stages 2:14 
   Web Accessibility Initiative 2:33 
    Global Issue 2:39 
    Web Content Accessibility Guidelines 3:28 
    Info Meant for Web Developers, Authors, etc. 3:53 
    What is in WCAG 2.0 4:04 
   Getting Started with Web Accessibility 4:47 
    Things to Think About When Planning 5:04 
    How the Components Relate 6:09 
   Concepts of Accessibility 6:20 
    Perceivable 6:54 
    Operable 8:04 
    Understandable 8:40 
    Robust 8:52 
    For More Information 9:21 

Section 3: Dealing with Browsers
  How are Browsers Different? 6:40
   Intro 0:00 
   Audience Overview 0:15 
    Analytics 0:27 
    User Information 1:23 
    Browser Statistics 2:10 
    Mobile Devices Statistics 4:04 
    Traffic Sources 4:20 
    Map Overlay 4:32 
    Analytics Available 5:30 
  Web Tools Within the Browser 9:23
   Intro 0:00 
   Looking at Different Browsers 0:09 
    Internet Explorer 0:43 
    Use the Same Version as the Company 0:52 
   IE Developer Tools 1:04 
    F12 1:11 
    Pin It 1:37 
    Understanding Developer Tools 2:07 
    The Arrow 2:40 
    Crossed Out Styles 3:14 
    Select Parts to Observe 3:35 
   Google Chrome Tools 4:07 
    F12 4:13 
    Elements 4:25 
    Understanding Developer Tools 4:39 
    Magnifying Glass 4:49 
   Safari Tools 5:26 
    F12 5:33 
    Shortcuts Are a Little Different 5:41 
    Safari Extension 5:51 
   Firefox Tools 6:33 
    F12 6:39 
    Firefox Menu 6:46 
    Web Developer 6:51 
    Understanding Web Developer 7:00 
    Add-Ons 7:18 
    Inspector 7:31 
    Tools For You 7:49 
    Box Model 8:22 
  Helpful Browser Extensions 6:46
   Intro 0:00 
   Browser Resources at CMairsCreate 0:06 
    Helpful Extension: Text Generator 0:07 
    Browser Resources 0:27 
   Lorem Ipsum Generator 0:44 
    Creates Random Dummy Text 0:47 
    Install It 1:13 
    Using This Extension 2:17 
    Copy to Clipboard 3:00 
    Using the Text 3:13 
    Other Extensions 3:47 
   Helpful Extension: Ruul 3:51 
    Install It 3:57 
    Installing in Firefox 4:14 
    Checking Website Alignment 4:43 
    Type Height and Width 5:20 
    Using This Extension 5:38 

Section 4: The Dreamweaver Interface
  Dreamweaver Interface Overview 9:11
   Intro 0:00 
   Dreamweaver Welcome 0:14 
    Communicate with Dreamweaver 0:21 
    Adobe Messages & Updates 0:27 
    Welcome Screen is Conditionally Available 0:39 
    Recently Opened Items 0:55 
    Create New 1:34 
    Dreamweaver Offers Numerous Options 1:46 
    Panels & Menus at Startup Menu 2:10 
   Create New HTML 2:47 
    Menus Are Now Available 2:55 
    Panels 3:31 
    Modify Your Panels 4:07 
    Properties Panel 4:40 
    Document Window 5:10 
    Code View 5:25 
    Split View 5:33 
    Design View 5:36 
    Using These Views 5:47 
    Live View 6:57 
    The Globe: Preview in Browsers 7:11 
    Recap 7:42 
  Customizing the Interface 10:04
   Intro 0:00 
   Dreamweaver CC Default View 0:22 
    Identifying Default Panels 0:57 
   Activating Panels 1:08 
    Create New HTML  1:10 
    Example: Insert Tab 1:35 
   How to Move Panels 1:58 
    Moving Insert Panel 2:04 
     Dreamweaver Beginners Preferred Setup 3:04 
   Icons and Tabs Within Insert Panel 3:17 
    Selecting Icons 3:33 
   Opening/Closing Panels 4:14 
    Opening Panel 4:21 
    Closing Panel 4:30 
    Window Menu Checked Panels 4:58 
    Right Click to Open/Close 5:16 
    Close Tab Group Versus Close Option 5:22 
   Right Hand Double Arrow 8:00 
    Collapsing Panels Into Icons 8:10 
    Opening Hidden Panels 8:20 
    Expand and Contract Panels 8:35 
  Setting Dreamweaver Preferences 6:52
   Intro 0:00 
   Getting Started 0:14 
    Activate Page and Panels 0:22 
   Locating Preferences Menu 0:31 
    Mac Users 0:34 
    PC Users 0:41 
    Preferences 0:50 
   General Category 0:54 
    Editing Options 1:23  
   New Document Category 2:19 
    Default Document 2:29 
    Default Extension 2:33 
    Default Document Type 3:15 
   Preview in Browser 3:54 
   Fonts 4:53 
    Code View Default Font 5:15 
    Default Font Size 5:33  
  CSS Designer Panel 5:48
   Intro 0:00 
   Locating CSS Designer Panel 0:38 
    Open Files and Panels 0:44 
    Create New HTML 0:57 
    Activate CSS Designer Tab 1:10 
   CSS Designer’s “Four Panels-in-One” 1:20 
    Sources, @Media, Selectors and Properties Panels 1:32 
    Expanding Panel 1:50 
    Listing of Options for Closing Tabs 2:23 
   Overview of Source Panel 3:22 
    Sources Panel Option 3:34 
    Creating New CSS Page 4:05 
  Code View Tools 7:15
   Intro 0:00 
   Web Page Viewing 1:01 
    Design View 1:03 
    Code View 1:13 
    Left-Hand Tool Bar 1:15 
    Expand Tool Bar and Document Window 1:37 
   Coding Tool Bar 2:16 
    Icon Function 2:23 
   Line Numbers 3:00 
    Line Numbers 3:02 
    Select Line of Code 3:19 
    Collapsing Lines 3:24 
    Show Hidden Area 4:30 
    Split View Shows Both Code and Design Views 5:46 
    Vertically or Horizontally Split View 6:03 
  Installing Additional Browsers 9:13
   Intro 0:00 
    New Document Window 0:14 
    Design View 0:33 
   Globe Icon 0:44 
    Browser Preview(s) 0:46 
    Available Browsers and Shortcuts 0:58 
   Modifying Browsers Within Preferences: Preview in Browser 1:14 
    Removing a Browser 2:20 
    Adding a Browser 2:36 
    Application Field 3:38 
   Selecting Primary and Secondary Browsers 4:47 
    Creating Menu Shortcuts 6:14 
   Previewing Page 6:36 
    Opening in Browser 7:00 
    Opening With File Menu 8:11 

Section 5: Creating a Page Using a Pre-Defined Layout
  Creating a Pre-defined CSS Layout Page 8:44
   Intro 0:00 
   Using a Pre-Defined Layout Page 0:31 
    Opening From File Menu 0:36 
    New Document Window 0:47 
    Selecting Page Type 1:09 
   Blank Page Features 1:57 
    Pre-Built Features 2:05 
    Header Area 2:27 
    Footer Area 2:32 
    Text 2:34 
   Saving Documents 3:39 
    Naming Document 4:19 
    Assigning Title 5:51 
    File Save 7:00 
    Save All 7:09 
    Asterisk on Tab 7:40 
  Building the Header Area 11:12
   Intro 0:00 
   Setting Up Interface 0:28 
    Properties 0:33 
    Tag Selector 0:45 
    Expanding Files Tab 0:56 
    Collapsing Files Tab 1:35 
   Tag Selector 1:53 
    Example: Insert Logo 2:06 
    Body Tag 3:01 
    Placeholder 3:40 
    Header Tag 4:29 
   Changing Background Color 5:26 
    CSS Designer Panel 5:27 
    Determining Header CSS Rule 5:51 
   Header Properties 6:18 
    Properties Icons 6:45 
    Background Color 7:03 
    Inserting Image 8:07 
  Modifying the Navigation Column 8:06
   Intro 0:00 
   Navigation Bar 0:12 
    Identifying Codes With Tag Selector 1:20 
   Modifying With CSS Designer 2:09 
    Show Set Box 3:02 
    Changing Width 3:25 
   Background Color 4:22 
    Eye Dropper Tool 4:37 
   Moving Navigation Bar 5:14 
    Float Feature 6:00 
   Preview 6:27 
  Customizing the Hyperlinks 15:54
   Intro 0:00 
   Modifying Background Color of Side Bar 0:30 
    Selecting Column 0:50 
    CSS Designer Panel 1:05 
    Show Set 1:10 
   Selecting Color 1:38 
    Changing Color Format 2:00 
    Changing RGB Values 2:40 
   Re-naming Links 3:47 
    Adding Pages 5:00 
   Changing Link Appearance 6:22 
    Locating Properties 6:26 
    <a> Tag 8:40 
    Background Color 9:23 
    Disable 9:41 
    Eye Dropper Tool 10:33 
    Preview Page 11:09 
   Modifying Hyperlink Colors 11:40 
    Selecting Color (Focus) 11:59 
    Visited Link Text Color 12:31 
    Basic Link Appearance 13:38 
  Customizing the Navigation Area 7:25
   Intro 0:00 
   Adjusting Excess Space 0:41 
    <aside> 1:07 
    Inspect Tool 2:40 
   Adjusting Header Size 3:25 
    <img> 3:49 
   Setting Header Width and Height 4:05 
    Width 4:10 
    Height 4:49 
    Live View 5:40 
   Lesson Summary 6:20 
  Adding Content to the Page 9:25
   Intro 0:00 
   Inserting Content 1:10 
    Locating Content 1:18 
    Tag Selector 1:38 
    <article> versus <section> 1:48 
   Removing Content 2:02 
    <section> 2:16 
    Highlighting on Document 2:24 
   Inserting Text 2:52 
    Opening Text File 3:11 
    Predefined Index .txt File 3:14 
    Copy/Paste 4:01 
    Split View 5:08 
    Inserting in Code View 5:54 
   Removing Excess Space 6:20 
    Delete Key 6:24 
    Properties 6:29 
    Remove Tag Feature 7:02 
  Modifying the Footer Area 8:19
   Intro 0:00 
   Copyrights 0:10 
    Copyright.gov PDF 0:17 
    Notice of Copyright 0:42 
    Example 1:20 
    Insert Copyright Information 2:00 
   Edit Footer Properties 3:29 
    Change Background Color 3:50 
    Add Padding 4:14 
    Preview 5:30 
    Editing in Live View 6:39 
  Changing the Page Background Color 10:27
   Intro 0:00 
    Modifying Footer 1:24 
    Matching Color With Header Background 1:40 
   Matching Content and Header Width 3:07 
    Identifying Content Tags 3:26 
    Resizing Content Area 4:08 
    Resizing .container Properties 5:44 
   Body Background Color 6:06 
   Adding a Border 7:18 
    Locating Tag Selectors 7:37 
    Show Set 8:06 
   Selecting Border 8:22 
    Color 8:26 
    Width 8:32 
    Style 8:38 

Section 6: Getting Started
  Defining a Site in Dreamweaver 5:33
   Intro 0:00 
   Defining Websites Within Dreamweaver 0:30 
    Site Menu Setup 0:49 
    Locating Local Site Folder 1:16 
    Setting Local Site Folder Path 2:13 
   Files Local View 2:57 
    Window Versus Mac 3:09 
    Root Folder 4:14 
  The Importance of the Files Panel 9:19
   Intro 0:00 
   Files Panel Options 0:53 
    Right Click Open Area in Files Panel 1:47 
   Icons for Uploading/Downloading Files 2:15 
   Creating New Page 3:02 
    Moving Into New Area 3:35 
   Renaming a File 5:17 
   Removing File From a Folder 6:27 
    Deleting a File 7:08 
   Creating New Folder 7:55 
  HTML Doctypes 7:50
   Intro 0:00 
   Create New HTML 0:23 
    File Menu 0:46 
    Choose Doctype 0:56 
    HTML 5 Versus XHTML 1.0 Transitional 1:10 
   Horizontal/Vertical Tile 2:08 
    HTML 5 Versus XHTML 1.0 Transitional in Code View 3:32 
   Importance of Doctype 4:22 
    HTML 5 5:50 
    XHTML 1.0 Transitional in Code View 6:11 
  Page Titles are Important 5:42
   Intro 0:00 
   Saving New Page 1:16 
    Saving as Untitled 1:19 
   Importance of Page Titles 1:38 
    Tab Area 1:46 
    Bookmarks 2:02 
    Search Engines 3:11 
   Adding Title 4:14 
    Title Tags 5:03 
  Working With New Pages 5:16
   Intro 0:00 
   Creating New Files in Files Panel 0:27 
    File Menu Options 0:31 
    Root Folder 1:00 
   Creating Files in Welcome Screen 1:42 
   File Menu 2:13 
    Blank Page Options 2:18 
   Control+N/Command+N 2:58 
    Edit Preferences 3:30 

Section 7: Adding Text Content
  Adding Text to a Web Page 19:22
   Intro 0:00 
   Manage Sites 0:36 
    Defined Sites 0:42 
    Removing Sites 1:06 
    Modifying Site 1:15 
   New Site 2:16 
    Locating File Folder 2:36 
    Files Panel 3:28 
   New Dreamweaver Page 4:09 
    Document Title 4:28 
    Saving and Naming Page 5:28 
   Paste Special 6:44 
    Text Folder 6:48 
   Command.docx Versus Command.html 6:59 
    Command.docx 7:14 
    Microsoft Word Copy/Paste 7:43 
    Command.HTML 7:54 
   Edit Menu Paste Special 8:40 
    Options 8:55 
   Basic Paste Versus Paste Special 10:35 
    Updated Properties Features 11:33 
    Preview in Firefox 12:00 
   Firefox Developer Tools 12:06 
    Web Developer 12:16 
    Inspector 12:45 
    Microsoft Word Code 13:30 
   Text With Structure Paste Special Option 14:17 
   Text Only 15:53 
    Forward Delete Versus Backward Delete 16:40  
    Copy/Paste Preferences 18:04 
  Importing a Word Document 3:21
   Intro 0:00 
   Create New Page 0:39 
    Name Document 0:58 
   File Menu Import 1:08 
    Word Document 1:29 
    Locating Text File 1:35 
    Formatting 1:58 
    Title Document 2:35 
  HTML Headings 8:24
   Intro 0:00 
   Setting Heading Tags 1:36 
    Numbering Heading Tags 2:08 
    Control/Command 2:49 
   Importance of Heading Tags 4:00 
    XHTML Versus HTML5 4:33 
   Split View 5:05 
   Headings in Code View 5:56 
  Adding Paragraphs & Line Breaks 9:42
   Intro 0:00 
   Creating Line Space 1:09 
    PC Versus Mac Delete 1:10 
   Split View 2:57 
    Highlighting Text 3:44 
    <p> Tag 4:24 
   Properties 5:39 
    Format 5:49 
    Changing Headings 6:18 
   Tag Selector 6:38 
   Line Breaks 7:10 
    Shift-Enter or Shift-Return 7:44 
    <br> Tag 8:02 
  Creating Lists 9:04
   Intro 0:00 
   Title Document 1:12 
    Page Header 1:23 
   Creating Bulleted List 2:11 
    Select Content 2:19 
   Properties 3:26 
    Unordered List 3:29 
   Creating a Secondary List 5:32 
    Indent 6:16 
   Changing Bullets 7:35 
    List Item 7:56 
    Styles 7:59 
  What is a Definition List? 3:13
   Intro 0:00 
   Creating Definition Lists 0:34 
    <p> 0:45 
   Definition Term Versus Definition 1:03 
    Format Menu 1:28 
    List Option 1:30 
   Definition List 1:48 
    Organization of Definitions 1:58 
  Bold & Italics 7:17
   Intro 0:00 
   Evolution of <b> and <i> 0:17 
   Dreamweaver Default 1:38 
    XHTML Format 1:42 
   Setting Preferences 2:00 
   Applying Bold 3:05 
   Applying Italics 3:40 
    Applying Both Italics and Bold 3:53 
   Turning Off Bold/Italics 4:19 
   Numbered List 5:26 
    Modifying List 5:55 
  The Importance of Entity Names 9:36
   Intro 0:00 
   Entity Overview 0:06 
    ASCII 0:32 
    Entity Numbers Versus Names 1:15 
   Creating Symbols 2:00  
    Copyright Symbol 3:10 
    Common Tab 3:44 
    Down Arrow 4:02 
   Entity Name in Split View 5:10 
    Insert Other Characters 5:37 
    Browser Preview 6:40 
    Example: Trouble-Shooting 7:22 

Section 8: CSS Basics
  What Does CSS Do? 7:17
   Intro 0:00 
   Example of CSS 0:37 
    Firefox Developer Tools 1:01 
    Inspector 1:08 
    Style Editor 1:23 
   Adobe Website Example 2:47 
   CSSZenGarden.com Example 3:47 
    Opening HTML Page 4:09 
   What is CSS? 5:41 
  The Syntax for a CSS Rule 10:03
   Intro 0:00 
   Code View 0:56 
    <style> 1:35 
    Closing Tags 2:14 
   Creating Rule for Heading 1 2:51 
    Brackets 3:08 
    Selector 3:48 
   Adding a CSS Comment 4:13 
    Coding Tool Bar Apply Comment 4:33 
   Fonts 5:25 
    Color 5:44 
    Design View 6:23 
   CSS Rule Syntax Overview 6:40 
    Pre-Assigned Properties 7:57 
   CSS Designer 8:33 
    Selectors 8:40 
    Properties 9:05 
  CSS Style Rule Locations 10:31
   Intro 0:00 
   Importance of CSS Rule Location 0:08 
    Page Coding 0:33 
    Cascading Style Sheets 1:16 
   CSS Style Rule Locations 1:37 
    Inline 1:55 
    Internal or Embedded 2:15 
    External 2:36 
   Inline Style Rules 2:59 
    Example of Inline Style Rule 4:16 
   Internal/Embedded Style Rules 5:36 
    <style> Tag Block 5:43 
    One Page Style Rule 6:19 
    Example 6:56 
   External Style Rules 7:43 
    Multiple Rules 8:13 
    Multiple Files 8:27 
    Example of Style Sheet Link 8:52 
  CSS Selector Options 9:17
   Intro 0:00 
   CSS Selector Types 0:04 
    HTML Tags 0:53 
    Classes 2:13 
    Naming Classes 2:32 
   Creating Class Rule 2:50 
    Two-Step Process 2:52 
   IDs 3:19 
    Naming Function 3:32 
   Example of Rules in CSS 4:53 
    Locating Properties 6:16 
    Locating Value 6:24 
    Font Stack 7:33 

Section 9: Formatting Text Using CSS
  Using Inline Styles 8:23
   Intro 0:00 
   Creating an Inline CSS Rule 0:48 
    Identifying Tags 1:23 
    Properties 2:07 
    Select CSS 2:21 
   Targeted Rule 2:31 
    <New Inline Style> 3:27 
    Setting Font 3:40 
    Bold 4:30 
    Size 5:13 
    Color 5:30 
   Matching Colors 7:13 
    Code View 7:28 
  Working with Rules on the Page 13:38
   Intro 0:00 
   .txt Versus .rtf File 0:56 
    Copy/Paste 2:04 
    Header 1 2:36 
   Undoing Header 1 Style 2:53 
    Adding <p> 3:27 
    <p> Shortcut 3:35 
   Adding Styles 4:50 
    CSS Designer 4:55 
    Sources Panel 5:43 
    Define in Page 6:16 
   Adding Selector 6:43 
    Properties 7:52 
   Modifying Text 8:10 
    Color 8:26 
    Font Family 8:49 
    Font Size 9:28 
    Em Unit 9:32 
    Font Size 9:53 
    Body Font Size 12:08 
  The Benefits of Using an External CSS File 10:49
   Intro 0:00 
   Selecting Styles in Code View 1:27 
    Format Menu 2:10 
    CSS Styles 2:13 
   Move CSS Rules 2:17 
    Style Sheet Versus A New Style Sheet.. Option 2:30 
    Saving CSS File 3:45 
    Sources Area 5:38 
   External CSS Sheet 6:32 
    Locating CSS Style Sheet 7:55 
    Saving in New Location 8:28 
  Attaching a Style Sheet 11:15
   Intro 0:00 
   Related Files Toolbar 0:43 
    Basic HTML Versus Related Files Toolbar 1:15 
   CSS Designer 2:18 
    Sources 2:23 
    Adding Existing CSS Style 2:48 
    Locating File 3:12 
    Conditional Usage 3:28 
    Attach as Screen CSS 3:43 
   Creating a Style for <li> 5:40 
    Select External Style Sheet 5:49 
    P, li 6:13 
    Preview in Browser 6:32 
    p,li,dt,dd 7:35 
   Changing Bullet Appearance 8:20 
   Demonstration Summary 10:27 
  Creating & Using a Class Selector 12:46
   Intro 0:00 
   Refresh 0:46 
   Basic Paste From .txt to .html 1:27 
    Title 2:14 
    Header 1 and Header 2 2:30 
   CSS Designer 3:00 
    Adding External Style Sheet 3:10 
    Conditional Usage 3:30 
    Adding h1 to External Style Sheet 4:03 
   Modifying to Create h2 4:10 
    Duplicate Tag 4:33 
    Rename Tag 4:39 
    Re-size 4:46 
   Highlighting Partial Area of <p> 5:40 
    Class Selector 6:06 
    Create New Class Selector 6:14 
    Naming Class Selector 6:33 
    Assigning Properties 6:56 
   Defining Class 8:46 
    Select Content 9:03 
    Properties 9:07 
    Class Section 9:09 
   Adjusting Class Properties 9:19 
    Bold 10:03 
    Applying Class 10:26 
  Dreamweaver Style Tools 6:24
   Intro 0:00 
   Code Navigator 0:25 
    Properties and Values 2:24 
   Inspect in Live View 3:20 
    Inspect 3:24 
    Properties 4:14 
    Tag Selector Area 4:24 
   Importance of Inspect and Code Navigator 5:20 

Section 10: Working with Fonts on the Web
  Using Fonts on the Web 5:52
   Intro 0:00 
   Google Fonts 1:40  
    Open Source Fonts 1:55 
   FontsSquirrel.com 2:15 
    Example 2:33 
   Adobe.com 2:54 
    Edge Web Fonts 3:04 
   TypeKit.com 3:22 
    Free Trial 3:57 
   Downloading Fonts 4:45  
  Using Google Fonts 16:48
   Intro 0:00 
   New to Google Fonts? Link 0:25 
   Google Developers 0:58 
    Font Effects 1:33 
    Browser Compatibility 2:22 
   Preview Text 4:06 
    Sizing 4:29 
    Sort By Available Font 4:41 
    Filtering 5:32 
    Font Name, Creator 6:08 
   Collecting Fonts 6:48 
    Review 7:17 
    Use 7:37 
    Load Time 7:45 
   Google Font in Dreamweaver 8:30 
    Code View 9:34 
    Link Tag 9:42 
    Pasting Google Code 9:48 
   Integrating Fonts 11:17 
    Setting Up New CSS Source Code 12:19 
    New Selector 12:42 
    Adding Google Font 13:30 
    Preview 14:34 
    Definition List 15:39 
  Adding Fonts from Fontsquirrel 14:51
   Intro 0:00 
   Font Squirrel Categories 1:20 
    Examples 1:30 
    Font Search 1:40 
    Font Information 2:50 
   Test Drive 3:13 
   Licensing Information 3:40 
   Web Font Kit Tab 4:07 
    Format Options 4:21 
    Saving Font Kit 5:20 
   Font Squirrel in Dreamweaver 6:39 
    How to Use 7:00 
    Locating Font 8:49 
    Linking to Style Sheet 9:50 
    Replacing Font Family 11:34 
    Setting Default Font 12:40 
  Creating a Custom Font Stack 7:11
   Intro 0:00 
   Customizing Fonts 0:29 
    Manage Fonts 0:31 
    Custom Font Stacks 0:55 
    Available Fonts 1:51 
    Choosing Fonts 2:17 
    Adding Fonts 3:49 
    Font Families 4:49 
   Updating Font Family 5:45 
  Working with Adobe Edge Fonts 11:55
   Intro 0:00 
   Inner Page 0:44 
   Logo Class 1:54 
    Text Area 2:49 
   Adding Adobe Edge 3:08 
    Manage Fonts 3:20 
    Adobe Edge Web Fonts Tab 3:25 
    Filtering 4:45 
   Applying Text 6:02 
    Preview in Live View 6:47 
    Preview in Code View 8:02 
    Source Code 8:24 
    Java Script 9:29 

Section 11: Inserting Images
  Web Image File Formats 13:54
   Intro 0:00 
   Vector Images Versus Raster Images 0:52 
   Raster Image Formats 2:27 
    PNG 2:51 
   Optimization 3:41 
    Control Removal 5:27 
    Photoshop 6:09 
   GIF Image Format 6:26 
    Drawbacks 6:41 
    Lossless Format 8:12 
   JPG Image Format 9:19 
    Lossy Format 9:49 
   PNG Image Format 10:16 
   Vector Graphics 11:10 
    Scalable Vector Graphics 11:43 
  Tips for Web Image Creation 4:10
   Intro 0:00 
   Optimization 0:22 
    Importance of Optimizing 1:08  
   File Size 1:37 
   Saving Images 2:26 
   Original Image 3:14 
  The Assets Panel 7:47
   Intro 0:00 
   Assets Panel 0:39 
    Windows Menu 0:49 
    Images 1:49 
    Colors 4:08 
   Hyperlinks 4:38 
   Flash Files 4:57 
   Adding Images to Assets Panel 6:06 
  Inserting Images & Adding Alternate Text 8:51
   Intro 0:00 
   Adding Images 1:08 
    Dragging Images onto Page 2:21 
    Alt Text 3:42 
   Adding Image With Icon 5:02 
   Adding With Insert Button 6:58 
   Removing Image 7:48 
  Modifying Code Using the Quick Tag Editor 8:26
   Intro 0:00 
   Control T/Command T 1:17 
    Selected Image 1:26 
    Edit Tag 1:38 
   Selecting Content 3:00 
    Wrap Tag 3:23 
    Insert HTML 3:52 
   Adding Class 4:15 
    Edit 5:34 
    Properties 5:44 
    Removing Tag 6:29 
   Quick Tag Editor in Properties 6:52 
  The Difference Between Alternate Text & Title 5:08
   Intro 0:00 
   Title Area in Properties 0:43 
    Preview in Browser 0:57 
   Title in Browser View 1:29 
    Preview 2:29 
   Quick Tag Editor 3:23 
    Title Versus Alternate Text 4:24 
  Image Scaling Using the Properties Panel 7:39
   Intro 0:00 
   Image Dimensions 1:11 
    Lock 1:24 
    Reset to Original Size 2:14 
    Commit Image Size 2:24 
   Changing Width and Height in Properties 3:04 
    Resized Image in Assets Panel 3:54 
    Commit Image Size Pop Up Window 4:15 
    Caution for Overriding Images 5:14 
  Setting the Default Editors for Dreamweaver 7:51
   Intro 0:00 
   Select Image 0:24 
    Edit Area 0:32 
   Changing Preferences 0:56 
    Preferences 1:00 
    File Types and Editors 1:15 
    External Applications to Associate with Dreamweaver 1:27 
    Exploring Image Formats 1:35 
   Incorrect Editor 2:05 
    Make Primary 2:28 
    Adding Editor 3:18 
    Locating Program 4:39 
    Updating Preferences 5:18 
   Missing File Editor 7:08 
  Incorporating Photoshop Smart Objects 9:01
   Intro 0:00 
   PSD 0:24 
    Inserting PSD 0:50 
    Linking to Different Image Page 1:02 
    New File 1:45 
    Dragging Image 2:38 
    Optimizing Image Within Dreamweaver 3:24 
    File Size 3:42 
    Image Sync Icon 4:55 
    Modifying Image in Photoshop 5:21 
   Locating Modified Image 6:11 
    Original Asset Modified 6:36 
    Update From Original 6:49 

Section 12: Adding Video to Web Pages
  Inserting Flash Files 10:02
   Intro 0:00 
   Saving Flash File 0:56 
    Flash .swf File 1:44 
    Slide Show 2:04 
   Insert 2:14 
    Media 2:17 
   Inserting Slide Show Description 3:17 
    Properties 4:10 
    Flash Plugin 4:20 
    Play 4:32 
    Edit 5:29 
    Loop and Autoplay 5:39 
    Stop Autoplay 5:44 
   Additional Files 6:24 
    Scripts Folder 7:13 
   Eye Ball Icon 7:24 
    Default Text 7:30 
    Preview 8:30 
   Playing Flash File 9:00 
  Inserting Flash Video 9:31
   Intro 0:00 
   Assets Panel 0:19 
    Built-in Flash Player 0:55 
    Flash Video File (flv) 1:30 
   Inserting flv. Into Web Page 2:26 
    Insert Bar 2:42 
    Inserting Flash Video 3:00 
    Locating FLV 3:39 
   Skin 4:13 
    Types of Skins 4:38 
    Detect Size 4:53 
    Controls 5:11 
    Preview 6:49 
   JavaScript 8:10 
  Inserting a HTML5 Video 12:18
   Intro 0:00 
   HTML 5 Videos 0:07 
    Different Formats 1:19 
    HTML 5 Video Option 2:15 
   Video Tags With Controls 2:39 
    Alternative Method 2:50  
    Controls 3:09 
    Poster Option 3:20 
   Hyperlink 4:15 
    MP4 Format 4:45 
    .webm 5:08 
   Flash Video Fallback 5:49 
    Insert Using Dreamweaver 6:49 
    Right Click Save As 7:40 
   Insert Flash Video in Dreamweaver 9:00 
   Poster PNG 11:13 

Section 13: Creating Hyperlinks
  Linking to Website Files 13:06
   Intro 0:00 
   Identifying Photoshop Smart Objects 0:51 
   Avoiding Extra Spaces in Hyperlinks 2:20 
    Double Click to Select 2:43 
   Point to File 3:20 
    Drag to a File 3:46 
   Adding New File 5:14 
    Deleting File 6:06 
   Triple Clicking 6:34 
   Adding by Browsing 7:54 
   Linking to a PDF (or Word, Excel, etc) 8:53 
    Point to File Feature 10:40 
    Testing Link 12:11 
  Linking to Files Outside Your Website 8:37
   Intro 0:00 
   Split View 0:58 
    Select Text 1:48 
    Paste Link in Properties 2:24 
    Test Link 3:04 
   Target 4:29 
    Adding Link Manually 6:13 
  Email Links 10:42
   Intro 0:00 
   Shift-Home to Highlight 1:15 
    Common Tab 3:03 
    Email Link 3:32 
    Mailto: 4:15 
   Adding Subject Line 6:45 
    Insert %20 7:45 
    Preview 8:30 
    &cc= 9:01 
  Image Maps or Hotspots 16:13
   Intro 0:00 
   Hot Spot 0:09 
    Assets Panel 1:19 
    Tile Vertical 3:29 
   Properties 4:05 
    Map 4:11 
    Editing Versus Drawing Tools 4:33 
    Draw Area 5:03 
    Alt Text 7:04 
    Insert Link 7:22 
    New 7:43 
   Circle Hotspot Tool 9:11 
   Polygon Hotspot Tool 11:30 
   Preview 14:17 
  Creating the Navigation Bar 9:18
   Intro 0:00 
   Insert Menu 1:23 
    Structure 1:34 
    Navigation 1:57 
   Building Navigation Bar 2:56 
    Creating List 3:26 
    Linking Pages 5:06 
    Deleting Linked File 7:52 
  Horizontal Navigation Bar 10:05
   Intro 0:00 
   CSS Designer 0:49 
    Define in Page 1:10 
    <ul> Versus <li> 1:51 
    Set Margin and Padding 3:14 
    Assigning Values 3:26 
   List Style Type 5:08 
    Layout 6:32 
    Display 6:44 
    Inline 6:47 
    Adjusting Padding 7:20 
    Text Transform 7:57 
   Overview 8:38 
  Adding Styles for Unvisited & Visited Links 13:08
   Intro 0:00 
   Style Links 1:26 
    <a> 1:42 
    Select Color 2:48 
    Font Family 2:55 
    Text Decoration 3:30 
    Preview 4:14 
   a:link Selector 5:39  
    Preview 6:29 
   a:visited 8:25 
   Remove CSS Property 10:04 
   Disable CSS Property 10:12 
  Adding Styles for Hovering on a Link 6:08
   Intro 0:00 
   a:hover 1:24 
    Show Set 1:39 
    Color 1:48 
    Font Weight 1:58 
    Text Decoration 2:08 
    Preview 2:35 
   Bold Hyperlinks 3:29 
   Hyperlink States 4:45 

Section 14: Positioning Content Using CSS
  How to Use CSS for Page Layout 11:08
   Intro 0:00 
   HTML Functions 1:02 
    Assigning Names 2:11 
   CSS 2:44 
    Formatting and Positioning 2:50 
   Content Area 3:59 
    Adding ID 4:23 
    Selectors 4:46 
    Properties and Values 5:06 
   Coding 6:12 
    Div id= content 6:57 
    Wrapper 7:49 
   CSS Code Styles 8:46 
  Understanding the Box Model 9:16
   Intro 0:00 
   Outer Wrapper 0:43 
    Adding Margin 2:09 
    Width 3:43 
   Adding a Guide 4:43 
    View 4:47 
    Rulers 4:49 
    Dragging Ruler 5:14 
   Scrubbing 5:36 
   Total Width 6:51 
  Creating the Header and Navigation Areas 7:53
   Intro 0:00 
   Insert Area 1:30 
    Insert Bar 1:44 
   Insert Header 2:15 
    Sources 3:44 
    Define in Page 3:52 
   Adding Navigation Bar 4:12 
    Properties 4:35 
    Separating From Header 4:43 
    Removing <p> 5:40 
    Insert Navigation 6:18 
  Adding Styles to the Header & Navigation Area 9:57
   Intro 0:00 
   CSS Designer 0:41 
   Adding Styles 1:04 
    Assign Properties 1:12 
    Add Selector 1:21 
    Deleting Selectors 1:41 
   Header 1:56 
    Properties 2:19 
    Layout Type Features 2:20 
   Adjusting Header Width 2:44 
    100% of the Width 3:07 
   Background 3:54 
    Color 4:08 
   Adding Margin Top 4:53 
    Text Color 5:24 
   Navigation 6:59 
    Assign Color 7:02 
    Adding Margin 8:08 
  Creating the Content & Footer Areas 12:26
   Intro 0:00 
   Content Area 0:34 
    Locating Margin/Padding 1:00 
    Select 1:46 
    Insert <div> 1:52 
   New CSS Rule 2:23 
    Naming ID 2:59 
    Define in Page 3:12 
    RBD Colors 3:43 
    Modifying Margin/Padding 4:41 
   CSS Designer 5:55 
    Content ID 6:09 
    Max/Min Height 6:18 
    Auto Margin 6:47 
   Footer 7:27 
    Add Selector 7:39 
    Footer Width 8:39 
    Background Color 8:53 
    Color Format 9:38 
   Insert 10:03  
    Footer Tag 10:07 
   Preview 11:19 
  Centering Page Content 9:01
   Intro 0:00 
   Properties 0:44  
    <body> 1:01 
    Insert Div 1:20 
    New CSS 1:40 
    Selector Type 1:44 
   Wrapper 1:47 
    Box 2:02 
    Set Width 2:07 
    Auto Margins 2:42 
    Background Color 3:03 
   Background Color for the Page 6:33 
    Body 6:47 
    Properties 7:02 
  Fine Tuning the Page Layout 14:23
   Intro 0:00 
   Background 0:38 
    Wrapper ID 0:47 
    Header Tag 1:33 
    Nav 2:15 
    Content ID 2:24 
    Insert Image 3:00 
    Replacing Text With Image 3:39 
    Matching Wrapper Width With Image 4:26 
   Nav Area 5:05 
    Live View 5:41 
    Modify Content Within CSS Designer 5:44 
     Padding 6:43 
   Modifying Background Color 7:23 
   Preview 8:10 
   Footer 9:08 
    Width 9:50 
    Color 9:59 
   IE Browser Mode 11:27 
   HTML5 in IE 11:55 

Section 15: Additional CSS Properties for Positioning

  Absolute Positioning 15:14
   Intro 0:00 
   Insert Div Tag 1:50 
    New CSS Rule 2:18 
    Selector Name 2:34 
   CSS Designer 3:24 
    Properties 3:44 
    Layout 3:54 
    Background Color 4:24 
   Code View 4:49 
    Copy/Paste 5:24 
    Left, Middle, Right Div IDs 5:41 
    Background Color 6:46 
   Absolute Positioning 7:19 
    Layout 8:08 
    Setting Position to Absolute 8:26 
    Setting Margins for Middle 8:56 
    Positioning Left 9:08 
    Live View 9:49 
   Browser Offset 10:19 
   Summary 12:55 
   Code View 13:42 
  Exploring Floats 10:01
   Intro 0:00 
   Adding Float to Header 2:16 
    Select Header 2:24 
    Layout Icon 2:26 
    Resetting Float 2:38 
    Preview 4:18 
   Code View 5:02 
   Moving Divs in Between Right, Left 5:05 
    Left Float 7:43 
    Right Float 7:49 
  What is a Clear? 12:18
   Intro 0:00 
   Previewing Within Dreamweaver 1:27 
   Modifying Header Width, Height 2:14 
    Modify Footer Width, Height 2:55 
    Modifying Left Div Width 3:22 
    Right Div Width 4:13 
   Float None 4:48 
    Removing Float 6:06 
   Clear 8:48 
    Left 8:57 
   Preview 9:10 
   Clearing Right Versus Left 11:10 
  Aligning Images Using Floats 10:02
   Intro 0:00 
   Image Tag in Tag Selector 1:34 
    alignRight Class 1:39 
    Unused Class, IDs 1:43 
    Creating Class 2:58 
    .alignLeft 3:12 
    Add Float Left 3:55 
    Add Padding 4:07 
   Adding Class to Image 4:58 
    Code View 6:39 
   Duplicate 8:03 
    .alignRight 8:06 
    Testing Alignment 8:55 
  Linking to an ID Selector 11:41
   Intro 0:00 
   Page Length 1:00 
   Creating a Hyperlink to an ID on the Page 2:06 
   Create a Nav Bar 2:28 
    Linking to Different Parts of the Page 3:13 
   ID 3:53 
    Insert Div 4:20 
    Select and Link 4:57 
    Preview 5:45 
   <body> 7:09 
    Define in Page 7:38 
    #top 7:49 
    Create Link to Top 8:12 
   Preview 10:18 
  Fixed Positioning 7:03
   Intro 0:00 
   Add Image 1:05 
    Matching to Wrapper 1:24 
   Set Fixed Positioning on Div 2:03 
    Copy/Paste ID Rule 2:16 
    Preview 3:45 
    Design View 4:42 
    CSS Designer 4:51 
    Show Set 4:56 
   Deleting Fixed Image 5:08 
    Assigning Background Image 5:23 
    Preview 6:04 

Section 16: Working with Tables
  Creating a Table 7:16
   Intro 0:00 
   Tables 0:19 
    Insert Menu 1:00 
    Common Tab 1:16 
    Rows 1:34 
    Columns 1:39 
    Split View 2:23 
    NBSP 3:18 
    Clicking and Dragging Into Table 3:32 
    Widths 4:00 
  Modifying HTML Table Properties 11:05
   Intro 0:00 
   Double Border 0:22 
    Deleting Double Border 1:16 
    Select Table Tag 1:30 
   Properties 1:37 
    Rows and Columns 1:43 
    Cell Spacing 1:49 
    Cell Padding 1:59 
    Preview 2:32 
   Deleting Rows 3:08 
    <tr> 3:45 
   Header Row 5:07 
    <th> 6:00 
    CSS Designer 6:24 
    External Style Sheet 6:43 
    Properties 6:49 
   Text Align 7:17 
    Setting Font Family 7:35 
    Modifying Line Height 8:09 
   Delete Column 9:49 
    Table Widths 10:23 
  Formatting Content Within a Table 10:46
   Intro 0:00 
   Table Header 0:10 
   Styling the Table 0:34 
    Alignment 1:03 
   Modifying a Cell 2:17 
    Setting Vertical Alignment 2:19 
   Modifying Font 3:14 
    CSS Designer 3:36 
    Span Tag 3:52 
    Adding Styles to <td> 4:22 
    Text Area 5:39 
    Enable/Disable 6:14 
    Font Size 6:42 
   Widths 7:32 
    Select Table 7:56 
    Adjust Widths 8:14 
    Pixel Width 8:25 
    Dragging Cells 8:34 
    Locking Columns in Place 8:44 
    Clear All Widths 8:59 
    Visual Aids 9:19 
    Centering Table 9:42 
  Importing Spreadsheet Data 7:36
   Intro 0:00 
   Importing Data 0:21 
    File Menu 0:51 
    Import 0:54 
   Importing Data From Excel 1:28 
    Locating Document 1:32 
   Delimited File 3:24 
    Importing Tabular Data 4:09 
    Modifying Delimiter 4:59 
    Cell Padding and Spacing 5:37 
    Table Widths 6:36 
  Merging and Splitting Table Cells 9:23
   Intro 0:00 
   Moving Files 0:50 
   Insert Table 1:26 
    Caption 1:54 
   Adding Content to Table 2:46 
    Using the Tab Key 3:35 
    Adding a New Row 3:57 
   Merge/Split Cells 4:47 
    Right-Click 4:59 
    Merging Cells 5:06 
    Splitting Cells 5:52 
   Setting Width 8:43 
  Adding Column and Moving Tables 4:32
   Intro 0:00 
   Adding a Column 0:13 
    Column Table Width 0:27 
    Adding Column 0:43 
    Deleting Column 1:18 
   Moving Table 1:24 
    Dragging Text 2:37 

Section 17: Creating a Form Using HTML 5
  Creating an HTML Form 10:19
   Intro 0:00 
   Insert Bar 1:59 
    Forms 2:04 
    Adding ID 3:31 
    Method 4:08 
    Form Tags 4:38 
   POST Versus GET Method 4:54 
   Assigning ID 5:29 
    Naming 5:49 
   Fieldset 7:30 
    Legend 7:40 
   Action Attribute 8:29 
  Text Field Elements 8:54
   Intro 0:00 
   Text Field 0:04 
    <fieldset> 0:23 
    Form Tab Text Icon 0:54 
   Renaming Text Field 1:15 
    <label> 1:28 
    Labeling Box 1:58 
   Text Box Re-sizing 2:14 
    Default Size 2:17 
    Title Area 2:52 
   Inserting Text Field 4:53 
    Code View 5:13 
    Label Tag 6:25 
    Adjusting Form Field Name 7:17 
  Adding Radio Buttons 9:55
   Intro 0:00 
   New Fieldset 0:42 
    Radio Button 1:48 
   Radio Button Versus Radio Group 2:55 
   Name Radio Button 3:15 
    Adding Label 3:31 
    Adding Value 3:38 
   Label Icon 5:39 
    Radio Button Label 6:57 
    Checked Value 8:37 
  Select Lists 9:05
   Intro 0:00 
   Drop-down Menu 1:02 
    Rename Label 2:41 
    Name Drop-down 3:07 
   List Values 3:16 
    Modify List Values 4:17 
    Using Up Arrow 5:04 
    Preview in Browser 5:35 
    # as a List Value 6:18 
    Selected Menu 7:15 
  Checkboxes & Submit Button 9:28
   Intro 0:00 
   Checkbox Group 1:11 
   Adding Checkbox Labels and Values 1:33 
    Checkbox Group Quark 2:32 
    Alphabetize Checkboxes 3:21 
    Deleting Checkbox 3:37 
    Modify List 4:24 
    Preview 4:52 
   Radio Buttons Versus Checkboxes 4:53 
   Adding Submit Button 5:53 
    Reset Button 7:04 
    Value 7:43 
  Adding a Multi Line Text Area 5:24
   Intro 0:00 
   Comments Area 0:30 
    Insert Text Area 0:55 
    Rename Text Area 1:16 
    Rows and Columns 1:38 
    Value 2:47 
    Preview 3:04 

Section 18: HTML5 Form Elements & Form Validation
  Required Fields in HTML5 12:24
   Intro 0:00 
   Preview Contact Form 0:54 
    Hovering Over Fields 0:59 
    Google Chrome Feature 1:11 
    Test Send Form 1:29 
   HTML5 Email Field 2:15 
    Split View 2:24 
   Creating Required Fields 2:47 
    Auto Focus 3:01 
   Creating Required Email Field 4:49 
    Required Checkbox 6:08 
    Preview 6:21 
    Form Validation 6:46 
   HTML5 Forms in Internet Explorer 7:28 
    Firefox 7:49 
   Client Side Validation 9:31 
    Server Side Validation 9:53 
    Setting Email Box Size 10:34 
  Validating Email & Phone Fields 6:26
   Intro 0:00 
   HTML5 Phone Field 0:41 
    Tel Field 0:47 
    Naming 1:14 
    Sizing 1:23 
   Coding 3:19 
    Apply HTML Comment 3:26 
    Un-Comment 5:21 
  Adding an HTML Date Picker 6:22
   Intro 0:00 
   Date 1:23 
    Preview in Firefox 1:49 
   Chrome Compatibility 2:04 
   Date Picker 2:11 
   Safari Compatibility 2:53 
   Internet Explore Compatibility 3:25 
   Related Form Fields 5:15 
  Styling Valid, Invalid & Required Fields 12:34
   Intro 0:00 
   Text Area 2:10 
    CSS Rules 2:12 
    Code View 2:34 
   Required Fields 3:14 
   Colors 3:58 
    Form Validation 4:30 
    Testing Form Validation 4:40 
   Firefox 5:19 
    Colored Borders 5:32 
   Commenting Out Background Color 7:39 
    Valid Versus Invalid 8:08 
    Preview in Firefox 9:08 
   Invalid Overrides Required 9:40 
   Preview in Safari 10:34 

Section 19: Reusable Content
  Saving Code Content Using the Snippets Panel 7:59
   Intro 0:00 
   Snippets 0:35 
    Copy Fieldset 1:18 
    Window 1:37 
   Snippets Panel 1:42 
    Creating New Folder 2:10 
    Dragging Folder 3:06 
   New Snippet Icon 3:54 
    Snippet Type 4:42 
    Preview Type 4:55 
    Dragging Into New Page 5:09 
   Recent Snippets 6:56 
  Template & Library Overview 6:26
   Intro 0:00 
   Dreamweaver Templates 1:17 
    .dwt Extension 1:36 
    Templates Folder 1:40 
    Applies to Entire Page 2:20 
   Library Item 2:33 
    .lbi Extension 3:02 
    Dreamweaver Folder 3:10 
    Repeatable Page Element 3:44 
    Size 4:09 
   Maintaining Folders 4:50 
  Creating a Library Item 7:51
   Intro 0:00 
   Creating Template and Library Folders 0:59 
    Select Library Item Content 1:30 
    Assets 1:56 
    Images 2:09 
    Library Area 2:42 
    Properties 3:49 
    Open Library Item 4:19 
   Insert 5:24 
    Adding Library Item Under Form Field 5:45 
    Dragging From Panel 6:14 
   Saving to Web Server 7:24 
  Modify a Library Item 4:26
   Intro 0:00 
   Open Library Item 0:20 
    Pencil Icon 0:22 
    File 1:06 
   Update Library Items 1:09 
    Show Log 1:59 
    Using Library Items 3:44 
  Converting A Page into a Template 6:11
   Intro 0:00 
   Save as Template 1:05 
    Naming Template 1:31 
    Adding Description 1:42 
    Update Links 1:54 
   Preview 2:36 
    Safari Compatibility 4:50 
   Locating Templates in Assets Panel 5:28 
  Creating Editable Regions 8:06
   Intro 0:00 
   Editable Regions 0:47 
    Naming Region 1:03 
    Preview 3:19 
    Removing Tag 4:24 
    New Page Based on Template 5:41 
    Saving Multiple Copies of a Template 7:27 
  Applying a Template 8:33
   Intro 0:00 
   Modify Menu 0:34 
    Templates 0:38 
    Apply Template to Page 0:46 
    Select Template 0:50 
    Inconsistent Region Names 1:05 
    Move Content to New Region 1:52 
    Nowhere Region 2:06 
    Preview 2:34 
   Bulleted List in Template 4:10 
   Modifying Templates 5:07 
   Page Header 8:16 
  Correcting CSS Issues on Pages Based on the Template 13:25
   Intro 0:00 
   Bulleted List in Template 0:33 
    CSS Designer 1:28 
    Selectors Causing Issue 1:44 
    Deleting Tags 2:04 
   Chevron Selector 4:14 
   Hyperlinks 5:51 
   Update Template Files 6:24 
    Updates Pages Status 6:40 
   Modifying Logo Class 7:54 
    Left Div Margin/Padding 10:01 
    Float 10:28 
   Available Modifying Tools 12:30 
  Completing the Template Corrections 8:32
   Intro 0:00 
   Nav>ul>li 1:05 
   Adding New Selector 2:19 
    Modifying Layout 2:50 
    Modifying Margin 2:54 
    Nav a 3:56 
    Preview 4:55 
   Modifying Width 5:29 
   Previewing Other Pages With Same Template 6:14 
   Why Templates Corrections? 8:12 

Section 20: Adding CSS3 Properties
  Using CSS3 & Proprietary Prefixes 7:25
   Intro 0:00 
   Live View 0:57 
   Preview in Google Chrome 1:40 
    Gradient 1:45 
    Firefox 1:55 
     Safari 2:01 
    Internet Explorer 8 2:06 
   Code View 2:29 
    CSS 3 Properties 2:39 
    Prefixes 2:55 
    Testing Prefixes 4:21 
    MS Filter 5:00 
    Box Shadow Property 5:09 
    Firefox 5:19 
    Google Chrome 5:24 
   Proprietary Prefixes 6:29 
  Creating Drop Shadows 8:16
   Intro 0:00 
   CSS3 Properties in Live View 0:57 
    CSS3 Properties in Browser 1:03 
   Styles 1:19 
    Drop Shadow ID 1:22  
    Background Color 1:50 
    Background Image 1:54 
   Box Shadow Property 2:04 
    Adjust in Live Button 2:16 
    h-Shadow, v-shadow, blur 2:29 
    Preview in Browsers 4:39 
   Applying MS Filter 5:45 
    Copy/ Paste 6:00 
   Modifying Offsets 7:00 
  Working with Gradients 10:08
   Intro 0:00 
   Live View 0:45 
    Gradient ID 1:26 
   Background Properties 1:53 
    Background Gradient 2:11 
    Gradient Warning Prompt 2:23 
   Rgba 2:46 
    Applying Gradient 3:45 
    Preview in Live View 4:11 
    Modifying Gradient 4:19 
   Code View 5:00 
    Webkit Prefix 5:17 
    Preview in Browsers 5:31 
   Older Browsers 6:10 
    Rgba in Background Color 6:57 
    Converting rgba to rgb 7:24 
  Rounded Corners 8:31
   Intro 0:00 
   CSS Designer 1:04 
    Styles 1:11 
    Rounded Corners ID 1:17 
   Properties 1:21 
    Changing Color Format 2:05 
    Background 2:55 
    Changing Properties of Border 3:10 
    Linking Border Radius 5:10 
    Unlinking Border Radius 5:26 
    Preview in Browsers 7:26 
  Working with Multiple Background Images 8:32
   Intro 0:00 
   Wrapper Box 0:58 
    Remove Comment 1:43 
    Background Images 2:20 
    Background Repeat 2:36 
    Background Position 2:42 
   Adjusting Wrapper Height 4:29 
   Applying Comment 5:46 
   Overlapping Images 7:22 
  Working with CSS Transitions Panel 12:37
   Intro 0:00 
   CSS 3 Transitions 0:34 
    Opening in Window Menu 0:59 
   Remove Transition 1:24 
    Options 1:27 
   Transition Functions 2:44 
   Setting Target Rule 3:54 
    Transition On 4:15 
    Setting Transition Duration, Delay 4:37 
    Timing Function 5:11 
    Adding Properties 5:41 
    Create Transition 7:08 
    Preview/Test in Browser 7:28 
   Hover State 9:08 
    Transition Coding 9:42 
    Proprietary Prefixes 10:15 
    Edit Transitions 11:52 
  Methods for Expanding Transition Code 9:46
   Intro 0:00 
   Edit Transition 0:35 
    Use Different Transitions 0:47 
   Code View 1:24 
    Select Present Transition Code 1:41 
    Comment Out 1:55 
    Copy/Paste New Code 2:33 
   No Repeat 5:19 
    Preview in Browsers 6:53 
   Animation Alternative 9:27 

Section 21: Going Beyond HTML & CSS
  Adding a Swap Image Behavior 7:30
   Intro 0:00 
   Image Swap 0:36 
    Behavior 0:50 
    Insert Image to Transition 1:47 
    Alt Text 2:12 
   Behaviors Panel 2:36 
    JavaScript 2:52 
    Swap Image 3:12 
   Adding Name to Image 3:17 
    Adding ID 3:49 
   Select Image Source 4:29 
    Preloading Image 4:59 
    Restore Images on Mouse Out 5:24 
  Adding a Larger Image Pop Up Window 8:21
   Intro 0:00 
   Thumbnail 1:19 
    Properties 1:48 
    Behaviors 2:17 
   Add Open Browser Menu 2:25 
     2:42 
   Open Browser Window 3:39 
    onClick 3:51 
   Set Window Width and Height 4:48 
   Firefox Preview 6:07 
   Resize Handles 7:36 
  Extending Dreamweaver Using the Adobe Exchange Panel 7:57
   Intro 0:00 
   Extensions 0:25 
    Manage Extensions 0:43 
   Adobe Exchange Panel 0:51 
    Sort 2:46 
    My Stuff 2:54 
    Searching 3:53 
    Manage Extensions from Window Menu 5:04 
   Preview Extension 6:00 
    Notes 6:18 
  Installing the Easy Rotator Extension 7:08
   Intro 0:00 
   Dreamweaver Exchange Classic 0:18 
    Easy Rotator 0:47 
    Checking Compatibility 1:00 
    Downloading Extension 1:20 
   Adobe Extension Manager 2:44 
    Instructions for Opening 3:34 
   Adding EasyRotator 4:47 
    Insert Menu 5:53 
  Creating a jQuery Image Gallery Using EasyRotator 7:13
   Intro 0:00 
   Windows Wizard 0:17 
   Insert 0:32 
    Rotator Name 1:04 
    Add Photos 1:25 
    Titling Photos 1:56 
    Layout and Presentation 2:30 
    Preview Feature 3:19 
   General Settings 3:50 
    Preview 4:53 
    Internet Explorer Compatibility 5:22 
  Dreamweaver Web Widgets 3:46
   Intro 0:00 
   Dreamweaver Web Widgets 0:19 
    Free and Paid Extensions 0:34 
    Free Responsive HTML Template 1:30 
    Checking Compatibility 1:53 

Section 22: Building Responsive Designs
  What is Responsive Design? 7:05
   Intro 0:00 
   Responsive Website 1:17 
    Responsive Image Example 2:08 
    Fireworks File 4:01 
   Mobile Version 4:13 
    Planning for Mobile 5:14 
   Responsive Web Design 6:29 
  Setting Separate Styles for Screen & Print 8:42
   Intro 0:00 
   Screen and Print Style Sheets 0:22 
    Deleting Style Sheet 0:53 
    Attach Existing Style File 1:09 
    Conditional Usage 1:37 
    Preview in Firefox 2:07 
   Hiding Navigation in Print 4:07 
    Select Styles Print 4:23 
    Main Links 4:42 
    Display None 4:50 
    Visibility Hidden 5:37 
   Site Templates 7:14 
    Blank Page 7:18 
    CSS Layout 7:22 
  Planning for Multiple Screen Sizes 7:55
   Intro 0:00 
   Viewing in Different Screen Widths 2:14 
    Mobile Device Navigation 3:52 
   Mobile Size Icon 5:25 
    Tablet Size Icon 5:53 
    Desktop Size Icon 6:04 
    Resolution Switcher 6:30 
    Full Size View 6:47 
  Adjusting Screen Sizes Using Media Queries 14:48
   Intro 0:00 
   Main Links 1:20 
    @Media Panel 1:34 
    Define Media Query 1:56 
    Max-Width 2:36 
    Coding 2:49 
    Main Links Selector 3:14 
    Modify Font Size 3:59 
    Adding Min-Width Condition 4:25 
    Preview in Browser 5:47 
    Adjusting Min-Width 6:20 
    Modifying Padding 7:18 
    Block Display 10:24 
    Set Background Color 11:41 
   Media Query 14:09 
  Modifying Media Queries within the Media Panel 16:17
   Intro 0:00 
   Modifying Nav Selector 2:09 
    Padding Inner Link 3:08 
    Modify li 3:57 
    Modify Logo 4:46 
    Adjust Line Height 4:59 
   Gradients in Live View 6:07 
   Properties 7:43 
    Modifying Main Links Class 8:08 
    Multiple Main Links Selectors 8:57 
   Modifying in Code View 11:13 
    Red @Media Code 11:31 
    Defined in Global 13:37 
  Modifying the Navigation Area to Accommodate Mobile Devices 11:56
   Intro 0:00 
   Hovering Over Selector 0:47 
    Text Transform 2:06 
   Create New Main Links Selector for Wider Size 3:57 
    Display Inline 4:20 
    Add li Selector 5:15 
    Nav for Larger Width 6:47 
   Adding Proprietary Prefixes 9:32 
  Media Queries for Responsive Design 8:41
   Intro 0:00 
   Modify 450px Screen View 1:10 
    Add li Selector 1:26 
    Block Display 2:06 
    Adjust Line Height 2:38 
    Set Border Properties 3:07 
   Remove Media Query 5:32 
   Double-Clicking Media Query 6:54 
  What is a Responsive Image? 4:23
   Intro 0:00 
   Preview in Browser 0:45 
   What is a Responsive Image? 1:10 
   Eliminating Media Queries 1:49 
   Images on Larger Screen 3:43 
  Creating a Responsive Image 14:28
   Intro 0:00 
   Steps to Creating a Responsive Image 1:23 
    Removing Image From p Tag 2:26 
    Split View 2:55 
    Create Div and ID 4:10 
   New CSS Rule 4:55 
    Name Selector 5:16 
    Drag & Drop Image 7:29 
   Create a Compound Rule 7:58 
    Creating Responsive Img ID 8:58 
    Setting 100% Max-Width 9:44 
    Delete Original Width and Height 10:14 
    Apply Class 11:12 
    Test in Browser 11:26 
   Class Versus ID 13:21 

Section 23: Adobe Edge Product
  Adobe Edge Products Available in Creative Cloud 7:52
   Intro 0:00 
   Edge Tools for CC 0:53 
    Edge Animate 1:07 
    Edge Reflow 2:00 
    Edge Code 2:16 
    Edge Inspect 2:45 
    Edge Web Fonts 4:18 
    Typekit 4:52 
    PhoneGap Build 5:10 
   Adding to Your Creative Cloud 6:26 
  Working with Edge Web Fonts & Typekit 4:27
   Intro 0:00 
   Typekit 0:23 
    Option Available 1:18 
    Trial Offer 1:36 
   Creative Cloud Membership 2:09 
    Apps Available and Installed 2:13 
   Manage Fonts 3:27 
    Adobe Edge Web Fonts 3:31 
  Inserting Edge Animate Compositions into Web Pages 11:56
   Intro 0:00 
    Create New 0:26 
     Settings 1:01 
    Animate Deployment Package 1:34 
   Preview in Browser 4:02 
   Split View 5:08 
    Animation Goes Here Tag 5:16 
   Insert Media 6:01 
    Selecting Edge Animate Package 6:25 
    Preview in Browser 7:06  
    Edge Animate Assets Folder 7:21 
    Preview in Live View 8:52 
    Split View 10:07 
  Adding Styles to the Composition 5:45
   Intro 0:00 
   Animate ID 0:52 
    Select Composition 1:30 
    Insert Div 2:00 
    Wrap Around Selection 2:22 
    Select ID 2:38 
    Modifying Width 3:19 
    Positioning Composition 4:40 
  Setting Up Edge Inspect to Preview in Multiple Devices 6:32
   Intro 0:00 
   Why Edge Inspect? 0:36 
    Sign into Creative Cloud 1:24 
    Instructions on Creative.Adobe.com 1:44 
   Google Chrome 2:15 
    Download Browser Extension 2:27 
    Install Mobile Client 4:26 
  Using Edge Inspect to Preview Pages on Other Devices 8:11
   Intro 0:00 
   Incorporating Additional Devices 0:56 
    Edge Inspect Instructions 1:51 
   Edge Inspect Icon 2:34 
    Locating Connected Device 2:39 
    Refresh 2:52 
    Show Full Screen 2:59 
    Screen Shots on Devices 3:09 
    Screen Shot Folder 3:19 
    Connecting Mobile Device 4:49 
   Example: Delta.com 5:36 

Section 24: Site Maintenance & Publishing
  Find & Replace for Text or Coding 12:56
   Intro 0:00 
   Find and Replace 1:17 
    Control-F, Command-F 1:20 
    Edit 1:29 
    Find In Drop Down Menu 1:45 
   Searching Entire Website 2:59 
    Search Source Code, Text, Text (Advanced) 3:58 
    Search Specific Tag 4:53 
    Replace Prompt 6:27 
   Find and Replace Icon 8:18 
   Finding Selectors 9:21 
    Search Source Code 9:41 
    Match Case Option 9:57 
    Use Regular Expressions Option 11:54 
    Close Tab Group 12:29 
  Creating Untitled Documents & Alt Text 6:25
   Intro 0:00 
   Site Report 0:32 
    Clear Results 0:51 
    Running a Report on Entire Current Local Site 1:20 
    Opening the Page 3:33 
    Empty Document Title Versus Untitled Document 4:39 
   When to Run Site Reports 5:42 
  Entering Web Server Information 7:17
   Intro 0:00 
   Site Menu 0:37 
    Manage Sites 0:40 
    Pencil Icon 0:48 
    Site Setup 0:53 
   Servers Category 1:26 
    What is an FTP? 1:49 
    FTP Address, Username and Password 2:10  
    Test FTP Server 3:03 
   Trouble Connecting 4:36 
   Remote and Testing 6:07 
  Uploading Files to the Web Server 8:13
   Intro 0:00 
   Manage Sites 0:14 
    Successful Web Server Connection 1:10 
    Site, Put 1:44 
    Dependent File Prompt 1:56 
    Preview in Browser 3:19 
   Uploading Multiple Files 4:43 
    Details of Upload 5:39 
    Preview in Browser 5:56 
    Error Message 6:23 
  Downloading from the Web Server 4:31
   Intro 0:00 
   Site, Get 0:23 
    Exploring Local and Remote Sites 1:03 
    Connect 1:30 
    Downloading Files 1:56 
    Expand Icon 3:03 
    Collapse Interface 3:44 

Section 25: Creating Mobile Websites with jQuery Mobile
  What is jQuery Mobile? 8:21
   Intro 0:00 
   jQuery.com 0:47 
    jQuery Mobile 1:44 
    Compatible Mobile Devices, Operation Systems 3:02 
    Theming 3:33 
    ThemeRoller 3:42 
   Examples of jQuery Websites 4:00 
    jQuery Mobile Plugin 6:15 
    Dreamweaver & Building jQuery Mobile Sites 7:27 
  jQuery Mobile Versions 2:51
   Intro 0:00 
   Updating jQuery Mobile 0:01 
    Determining if You Need to Upgrade 0:41 
    Legacy Versions 1:25 
    Upgrading 1:33 
    Dreamweaver and jQuery 2:39 
  Building a jQuery Mobile Page 8:35
   Intro 0:00 
   Site Templates 0:52 
    Starter Templates 1:09 
   JQuery Mobile Versions 1:13 
    CDN 1:22 
    Local Versions 2:06 
   jQuery Mobile CSS Pages 3:58 
    Saving jQuery Mobile File 4:50 
    Downloading Dependent Files 5:25 
   Preview in Browser 6:48 
   jQuery Mobile Base Page 6:52 
  jQuery Mobile Pages 8:05
   Intro 0:00 
   Renaming Pages, Sections 0:30 
    Footer 1:51 
    Preview in Browser 3:15 
    Navigating Through the Mobile Website 3:28 
    Dreamweaver Tabs in jQuery Mobile 4:48 
   Code View 5:33 
    CSS Files 5:44 
    JavaScript Files 5:51 
   Internet Explore Compatibility 7:18 
  Working with jQuery Mobile Themes 5:47
   Intro 0:00 
   jQuery Mobile Built-in Themes 1:11 
    Black and Grey Theme 2:10 
    Blue Theme 2:21 
    Shades of Grey 2:47 
    Yellow Theme 2:59 
   How to Apply Themes 3:35 
    Adding Themes 3:59 
   Compatibility 5:00 

Duration: 22 hours, 32 minutes

Number of Lessons: 152

Student Feedback

4.6

1 Reviews

100%
0%
0%
0%
0%
By Kelvin Tjia•September 7, 2014
Hi Candyce, I'm trying to build my own company website and would like to know how do I add more buttons on the navigation bar. And also, I see some websites have their navigation bar that go across the top. How can I get this float option?

Thanks for your help and great tutorials so far!

Related Courses:

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
or
Still having trouble? Contact us
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
 Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.