Dreamweaver CS6 - Essential Training

Name: Dreamweaver CS6 - Essential Training
Rating: 4.5 (55 reviews)

Learn everything from the basics of Dreamweaver CS6 to applying it to build a fully interactive and engaging website.

Created byZak Ruvalcaba

Last updated 2/2017

English

What you'll learn

Navigate the new Dreamweaver CS6 interface
Create web pages with basic and advanced formatting
Upload web pages to a web hosting provider
Link between web pages
Format web pages using Cascading Style Sheets (CSS)
Work with advanced structuring techniques using CSS and DIV tags
Work with HTML5 section elements and CSS3 to structure a web site
Create adaptive layouts for print and mobile using Media Queries
Design dedicated mobile web pages using jQuery Mobile
Automate workflows using Templates and Library Items
Automate tasks using Commands, the Assets panel, and Snippets
Use team collaborative features like Design Notes, reports, and more
Use Behaviors and Spry Effects to simplify JavaScript development
Create engaging and interactive functionality with Spry Widgets
Incorporate XML data into your web pages using Spry DataSets

Course content

12 sections • 156 lectures • 18h 36m total length

What is Dreamweaver?14:28
What are we Building with Dreamweaver?17:02
HTML, CSS, and JavaScript16:07
Browsers to Download1:57
The Welcome Screen and The Menu Bar16:09
The Document Window and The Tabbed File Chooser8:22
The Document, Style Rendering, and Standard Toolbars24:46
The Status Bar7:39
The Properties Inspector4:52
Tabs and Tab Groups8:34
Shows how to use Dreamweaver CS6 tab groups and right-hand panels, dock and resize them, and manage files, sites, window options, and favorites for a streamlined workflow.
Customizing your Working Environment5:27
Setting Up Browsers for Testing5:55
Setting Up External Code Editors4:01
Defining Preferences29:22
Setting Up Keyboard Shortcuts6:14
Learn to customize Dreamweaver keyboard shortcuts by duplicating and renaming shortcut sets, remapping common commands like save all to efficient keys, and exporting or managing shortcuts for quick access.

About Dreamweaver Sites8:10
Identifying a Web Host Provider12:36
Learn how to choose a web hosting provider, compare shared and dedicated plans, and prepare a domain name, user ID, and password for Dreamweaver integration.
The Vecta Corp Project6:42
Create a realistic corporate website in Dreamweaver CS6 by building a fictitious company site with navigation, pages, and assets organized in a project folder.
Creating a Site - Defining the Local Site Properties9:06
Creating a Site - Defining the Remote Server Properties20:44
Learn how to define a Dreamweaver CS6 site by adding and configuring remote servers, including FTP and SFTP options, and setting up testing server connections.
Additional Settings to Consider16:21
Managing Sites3:49
Other Options within the Site Menu11:28
Uploading Your Files : The Site Management Window15:44

Setting Up4:19
Creating a New Page10:08
The Properties Inspector : HTML vs. CSS2:58
Working with Text7:43
Learn to paste text into a new Dreamweaver document via the assets panel, using paste special options like text only to preserve line and paragraph structure.
Working with Word Documents5:58
Line Breaks versus Paragraph Breaks6:10
Headings and Paragraphs4:44
Learn to use the format menu and the properties inspector in Dreamweaver CS6 to apply paragraph and heading styles (h1–h6), manage pre-formatted content, and remove formatting.
Working with Font Weights6:58
Learn how to apply font weights in Dreamweaver, using bold and italic options and semantic tags like strong, em, code, and keyboard tag, with inline versus block elements.
Working with Lists5:41
Indenting & Spacing10:31
Spell Checking3:42
Adding Horizontal Rules4:41
Adding Date Stamps3:34
Modifying Page Properties10:09
Learn how the Dreamweaver page properties dialog affects appearance, background image, colors, margins, title, encoding, and tracing image to set the page's tone.
Quickly Adding Your Own Tags4:21
Working with Images / Image Formats9:30
Inserting Images10:31
Insert images in Dreamweaver CS6 using drag-and-drop or the images dialog, adjust image properties, set alt text for accessibility, and work with background images and repeat options.
Setting Image Properties10:25

Why Use CSS?21:25
How CSS Works5:36
Defining Styles10:58
Selector Types13:08
Using the CSS Panel9:06
Discover how to use the css panel in dreamweaver cs6 to create and manage style sheets, attach external or document style sheets, and edit properties in the show set view.
Using the CSS-Based Properties Inspector7:29
Explore how the cssa styles panel and properties inspector enable inline styling, class management, and on-the-fly rule edits, plus design-time stylesheets and queries for viewport sizes.
Creating a New Style - The New CSS Rule Dialog5:47
Creating a New Style - The Style Definition Dialog15:29
Structuring a Web Page with DIVs and CSS10:53
Creating the Container Rule11:21
Creating the Header Rule7:43
Creating the Nav Rule5:02
Create the navigation by adding a new CSS style, assign an id, and apply float left so the navigation and content appear side by side in a two-column layout.
Creating the Content Rule2:56
Creating the Footer Rule3:34
Finishing Up the Design4:07

Creating and Applying Classes15:56
Creating and Applying Dependant Selectors / Duplicating Classes9:07
Creating and Applying Pseudo Class Selectors / Working with Multiple Selectors12:00
Explore pseudo class, descendant, and dependent selectors in Dreamweaver CS6 to create a rollover navigation, convert items into links, and duplicate CSS for button-like menu styles.
Creating and Applying Styles using Embedded Style Sheets5:05
Creating and Applying Inline Styles / Renaming Classes3:22
Creating and Applying Styles within Page Properties4:08
Explore creating and applying styles through Dreamweaver's page properties, setting font, colors, background, and margins, and customizing link appearances with color and underline options. Compare page properties with external stylesheets.
Introducing HTML5 Section Elements7:12
Redesigning the Structure using HTML5 Section Elements4:46
Migrate a div-based layout to html5 section elements by converting divs to sections, adding a header and article tag, and updating css for html5 compliance.
Making the HTML5 Structure Backward Compatible4:05
Modifying the Structure : A Horizontal Navigation Menu12:55
Using Pre-Designed CSS Layouts4:49

Working with Templates and Library Items8:09
Understanding Library Items4:31
Creating a Library Item6:45
Inserting Library Items3:16
Editing and Pushing Changes out to the Site3:20
Edit library items in Dreamweaver CS6 and push changes to the site. Save edits and update only the pages that use that library item, via the update pages dialog.
Creating a Second Library Item for Admins3:21
Understanding Dreamweaver Templates3:12
Creating and Saving Templates6:02
Setting Editable Regions2:18
Deriving a New Page from a Template4:01
Applying a Template to an Existing Page3:47
Apply an existing template to an existing Dreamweaver CS6 page, resolve inconsistent region names by mapping them to nowhere, and observe the page inheriting from the template.
Editing Templates and Pushing Changes to the Site3:09
Creating an Editable Tag Attribute8:54
Defining Optional Regions7:09
Explore how to implement optional regions in Dreamweaver CS6 templates by assigning per-page images from a library, toggling show-by-default, and updating template properties for dynamic page displays.
Repeating Regions and the Repeating Table8:15
Breaking the Inheritance - Detaching from Template2:42
Working with Multiple Library Items within a Template4:19

Working with Links6:16
Absolute vs. Relative Paths8:52
Getting Started / Linking Text14:20
Learn to create text links in Dreamweaver CS6 by choosing document or site-root paths and linking navigation to index, about us, solutions, support, and contact us.
Linking Images6:50
Email Links5:30
Named Anchors / Placeholders6:51
Working with Targets2:38
Image Maps3:44
Create image maps in Dreamweaver CS6 by drawing rectangle hotspots around a header logo to link to index, then set the target and update all pages for live preview.
Changing Link Colors3:01
Changing and Checking Links4:47

Introduction to Tables10:20
Inserting Tables9:41
Modifying Table Properties12:15
Selecting & Modifying Table Cells6:26
Adding & Removing Columns & Rows4:24
Resizing, Splitting, & Merging Table Cells3:12
Adding Content to Tables3:24
Nested Tables5:24
Master nested tables by inserting a table inside a cell, set width and spacing, and vertically align content precisely. Understand the challenges of tables-based designs and their legacy-site implications.
Tracing Images3:40
Expanded Tables Mode1:36
Use expanded tables mode in dreamweaver cs6 to create space between cells, nested tables, easing cursor placement. Enable via insert > layout > expanded tables, then return to normal mode.
Styling Tables and Table Content9:19

Adding Interactivity Using Behaviors4:34
Applying Behaviors with the Behaviors Panel (The Popup Message Behavior)8:44
Call JavaScript2:42
Learn to use the call javascript behavior in Dreamweaver CS6 to run javascript functions from a page, including calling window close and handling basic errors.
Change Property4:32
Check PlugIn4:20
Explore the check plug in behavior in Dreamweaver CS6, using plugin presence (Flash, Shockwave, Live Audio, Windows Media) to decide redirects or stay on the page.
Drag AP Element3:55
Effects Behaviors7:54
Learn to use Dreamweaver cs6 effects behaviors with Spry, applying appear, fade, highlight, shake, slide, and squish to target elements, with toggle functionality and the Spry assets library.
Go to URL1:38
Jump Menu and Jump Menu Go3:28
Open Browser Window2:10
Set Text Behaviors2:13
Show-Hide Elements1:34
Learn how to use the show-hide elements technique with javascript to hide and show content, toggle visibility with show and hide controls, and adjust background color for interactive pages.
Creating a Rollover Image (Swap Image and Swap Image Restore)3:14
Validate Form4:10

Introducing the Spry Framework8:32
Spry Widgets : Spry Menu Bar9:52
Explore Spry widgets in Dreamweaver CS6, focusing on the Spry menu bar and related tools, and learn how to insert, customize, and manage Spry assets, JavaScript, and CSS files.
Spry Widgets : Spry Tabbed Panels11:20
Spry Widgets : Spry Accordion5:26
Spry Widgets : Spry Collapsible Panel4:39
Master the spry collapsible panel in dreamweaver cs6, configure default open or closed states, and apply margins and styles via a linked css stylesheet for smooth expand and collapse.
Spry Widgets : Spry Tooltip7:11
Spry Validation : Textfields8:29
Spry Validation : Textareas2:53
Demonstrate Spry validation for multi-line textareas by enforcing character limits with a live counter that blocks extra characters, plus optional required fields.
Spry Validation : Checkboxes and Radio Groups3:55
Spry Validation : Selects2:07
Spry Validation : Passwords and Password Confirms5:02
Working with Spry Data Sets to Create a Management Directory10:51

Requirements

Download and install Adobe Dreamweaver CS6
Exercise files and support PowerPoint presentations are provided as additional resources at the beginning of each lecture.

Description

In Adobe Dreamweaver CS6 - Essential Training, professor, author, trainer, and web developer Zak Ruvalcaba delves into the many features of this version of the powerful web design application. This 19 hour course covers numerous topics including building a simple web page, building an advanced web page using HTML5 and CSS3, using templates to streamline the management of your web sites, adding interactivity with Behaviors and Spry, building a responsive web site, using jQuery Mobile to build a native-feeling web experience, and more. Zak explains the new interface features in depth, and demonstrates how to create, edit, manage, design, and publish a professional website with Dreamweaver CS6 and complementary applications.

Who this course is for:

This course is meant for beginning to intermediate web developers looking to expand their skills to a visual editor

Dreamweaver CS6 - Essential Training

What you'll learn

Explore related topics

Course content

Introducing Dreamweaver15 lectures • 2hr 51min

Setting Up a Site9 lectures • 1hr 45min

Building a Web Page18 lectures • 2hr 2min

Cascading Style Sheets - Part 1 (Building the Website Structure)15 lectures • 2hr 15min

Cascading Style Sheets - Part 2 (Adding Style to the Website)11 lectures • 1hr 23min

Working with Templates and Library Items17 lectures • 1hr 23min

Working with Hyperlinks10 lectures • 1hr 3min

Tables11 lectures • 1hr 10min

Enhancing Interactivity with Behaviors14 lectures • 55min

The Spry Framework12 lectures • 1hr 20min

Requirements

Description

Who this course is for: