Dreamweaver CS6 - Essential Training

Define a Dreamweaver site to establish file references, enable local and remote file management, and smoothly transfer assets to a web hosting provider via ftp.

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.

Create a realistic corporate website in Dreamweaver CS6 by building a fictitious company site with navigation, pages, and assets organized in a project folder.

Define a Dreamweaver site by configuring local site properties and linking the Files panel to your computer files. Prepare for remote setup using domain, user name, and password.

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.

Discover advanced Dreamweaver site settings, including version control with Subversion, path configuration, and enabling caching. Learn to cloak folders, manage design notes, and handle Spry assets for collaboration.

Manage sites with the Dreamweaver sites dialog box by viewing, removing, duplicating, and editing properties such as username, password, and proxy; export and import site files to move between computers.

Explore the site menu options in Dreamweaver CS6, including creating new sites, transferring files to remote servers, managing check in/out, running site reports, and synchronizing the site cache.

Learn to upload and manage files to a remote web host using the site management window, connect to the server, transfer files with one-click, and handle dependent files.

Set up your Dreamweaver CS6 workspace, copy module files, refresh the site, and begin building a web page while exploring text formatting, images, and the new document dialog box.

Create a blank page in Dreamweaver CS6 using the document dialog box and save as index with an HTML5 doctype. Explore template options, fluid grid layouts, and predefined stylesheets.

Discover how the Dreamweaver cs6 properties inspector unifies text formatting, linking, and styles, and compare html vs css settings, including how css options create styles for fonts, colors, and alignment.

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.

Explore how Dreamweaver CS6 processes rich text from a Word document, using paste options (text, text with structure, formatting cleanup) and insert document or drag‑and‑drop to control embedded style sheets.

Explore how to use line breaks and paragraph breaks in Dreamweaver CS6, comparing br versus p tags, and learn how block-level formatting and indenting affect content flow.

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.

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.

Master how to create and format lists in Dreamweaver CS6, including bulleted, numbered, and definition lists. Learn to convert between list types and manage list items and styles.

Learn how to insert images in Dreamweaver CS6 using drag-and-drop or the images dialog box, configure accessibility with alt text, and apply background images with repeat settings.

Master spell checking in Dreamweaver cs6 by launching the check spelling dialog, reviewing suggestions, adding words to a personal dictionary, and previewing the page in Firefox.

Insert horizontal rules to separate sections in Dreamweaver CS6. Customize width, height, alignment, shading, and apply class or id attributes for CSS styling.

Add a date time stamp in Dreamweaver CS6, place a bottom flow footer after a horizontal rule, and enable auto update on save for the last updated timestamp.

Learn how the Dreamweaver page properties dialog affects appearance, background image, colors, margins, title, encoding, and tracing image to set the page's tone.

Learn to visually wrap text with the abbr tag in Dreamweaver using the quick tag editor, defining abbreviations without editing code via the properties inspector.

Explore the three web image formats—gif, jpeg, and png—focusing on color depth, transparency, file size, and when to use each format to optimize web pages.

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.

Use the Dreamweaver CS6 properties inspector to set image source, linking, hotspots, and alt text. Learn safe resizing practices with external editors like Photoshop and image formats GIF, JPG, PNG.

Move from basic markup to cascading style sheets, separating content from design. Learn structuring and formatting with css for multiple outputs in dreamweaver cs6.

Learn how CSS works by understanding style rules, selectors, and properties, explore external stylesheets, linking them to pages, and applying classes with Dreamweaver’s properties inspector.

Explore three methods to define styles in Dreamweaver CS6: external, document-wide, and inline, discussing usage, precedence, and maintenance benefits.

Explore the six most common css selector types, including class, type, descendant, pseudo-class, and id selectors, and see how Dreamweaver applies them to internal and external stylesheets.

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.

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.

Create a new style rule for the body tag using Dreamweaver CS6's style definition dialog, covering font properties, background color, and key CSS categories.

Learn to build a web page with divs and css in Dreamweaver, using a container to center the layout, and define header, navigation, content, and footer blocks.

Create the container rule by defining a new style for the #container ID and applying it to a div, centering with auto margins and tiling a vertical background image.

Create the header rule inside a container, assign an id to the header, nest header, content, and footer divs, and apply a non-repeating background image with defined width and height.

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.

Create and style content by adding a new rule, setting width and floating elements left to build a multi-column layout, then insert content after tags and test in the browser.

Create the footer rule by inserting layout objects, define an id rule, set width 697px and height 35px, and apply a no-repeat footer background image.

Finish the design by creating a left navigation menu, moving content to the right, and preparing content for styling with CSS, in Dreamweaver CS6.

Discover how to create and apply CSS classes in Dreamweaver CS6, using class selectors and pseudo class selectors to format text, padding, borders, and margins while differentiating classes from IDs.

Learn to use independent (descendant) selectors to target h2 headings inside a content container, creating compound selectors in Dreamweaver to apply color, background, padding, borders, and decorative imagery.

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.

Create and apply document-wide styles in Dreamweaver CS6 using an external stylesheet, and learn how to define a new testimonial style with color and bold formatting.

Rename a class in Dreamweaver CS6 and automatically update all instances across your site; create and apply inline styles, with guidance on when to use external style sheets.

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.

Explore HTML5 section elements—header, nav, section, article, aside, and footer—and learn how to semantically structure a page and integrate them with CSS to replace div-based layouts.

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.

Tested the HTML5 structure across Firefox, Safari, Chrome, and older Internet Explorer versions, then implemented an HTML5 shiv that converts section elements to block-level elements for backward compatibility.

Transform a vertical navigation into a horizontal top menu in Dreamweaver CS6 by adjusting container backgrounds, padding, margins, widths, and floats to create a clean, flexible navigation across the page.

Learn to structure a website with Dreamweaver CS6 using pre-designed CSS layouts and a fluid grid layout to define major content areas.

Learn how Dreamweaver CS6 templates and library items centralize page structure, enable global updates across thousands of pages, and manage reusable navigation and editable regions.

Explore how library items and templates organize site navigation in Dreamweaver CS6, using the assets panel to create dynamic administrator and public library views and manage updates.

Learn to create a library item in Dreamweaver CS6, from scratch or by converting an existing element like a navigation menu, and preview how stylesheets affect it.

Drag library items from the library panel onto the page to insert them as single entities. Place the copyright notice in the bottom area.

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.

Create a second library item for admins by duplicating assets, organizing with libraries, and linking to an administrator page within a Dreamweaver CS6 template.

Finalize the page, remove extraneous markup, and save it as a Dreamweaver template, then use the templates and assets panel to manage a reusable starting point for pages.

Save pages as templates in Dreamweaver CS6, manage templates in the templates folder, update links when templating, and apply a template to existing pages using editable regions.

Explore how editable regions in templates let users replace text and add content when creating a page from a template, using insert template objects and the editable region dialog.

Discover step-by-step options for creating a new page from a template in Dreamweaver CS6, preview templates, and manage update template changes for pages derived from that template.

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.

Edit a template to adjust layout and spacing, then save to push updates to all derived pages via Dreamweaver's cache.

Learn to create editable tag attributes in Dreamweaver CS6, enabling users to edit keywords and descriptions in templates without touching the code.

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.

Learn to implement repeating regions and the repeating table in Dreamweaver CS6, using optional regions, template objects, and table-like layouts to create structured, repeatable content.

Learn how to use master templates in Dreamweaver CS6, propagate changes to child pages, detach from template, and break inheritance to make a page independent.

Create a single template that serves both public and administrator pages by embedding multiple library items with optional and editable regions to manage dynamic navigation and global library updates.

Explore hyperlinks as the web's lifeblood, creating source and destination anchors, and navigate with absolute, relative, or site-relative paths while managing link targets in Dreamweaver.

Explore three path types—document relative, site relative, and absolute—and how Dreamweaver uses them to link files, images, and external locations, with practical examples for pages, folders, and emails.

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.

Link images using the same steps as linking text, select logos from the images folder, and add a css class to float left and remove borders for cross-browser display.

Learn to create email links in web pages using mailto, including pre-populated subject, cc, and body, with text or image links and placeholders, opening the default email client.

Explore Dreamweaver CS6 named anchors, now called placeholders, and build in-page navigation by linking sub menu items to sections, with back-to-top links and images linked to anchors.

Learn how to work with targets to target a specific browser instance for a destination path or to open links in a new tab, with default self; targets are deprecated.

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.

Change link colors in Dreamweaver CS6 by modifying page properties or editing the CSS styles panel to redefine link, visited, and active colors.

Change a link site-wide in Dreamweaver CS6 to point to a new path, then check links site-wide to detect and fix broken references across templates and pages.

Trace the antiquated history of table-based layouts and explain why they persist for troubleshooting legacy websites, despite the shift to divs and css in Dreamweaver.

Insert tables in Dreamweaver CS6 using the insert table dialog and insert panel. Configure rows, columns, border thickness, cell padding, and cell spacing, with accessibility notes and backward compatibility considerations.

Explore how to select a table in Dreamweaver and modify its properties through the properties inspector, including table ID, width in pixels or percent, padding, and alignment.

Select and modify table cells in Dreamweaver CS6 by using control-click to pick cells, rows, or columns, then adjust alignment, size, wrap, and background color.

Learn to add and remove rows and columns in Dreamweaver CS6 using table tools, insert/delete commands, and modify table options, with keyboard shortcuts and notes on a control-key bug.

Resize, split, and merge table cells in Dreamweaver CS6 by dragging handles to resize horizontally or vertically, selecting cells, and using merge or split commands or the properties inspector.

Add images to table cells and paste introductory text into the content area, then drag and drop elements, wrap text, and plan styling to complete navigation, footer, and background color.

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.

Explore how tracing images aid layout in Dreamweaver CS6 by overlaying a semi-transparent prototype background to guide table-based and div-based structures, measure guides, and translate designs from Photoshop or Fireworks.

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.

Finish the navigation, then style the site with a new stylesheet. Define content and navigation classes, convert to a list, and compare table-based design with CSS for standards.

Learn how Dreamweaver CS6 adds interactivity with prepackaged JavaScript behaviors, applied to objects and events to run actions without writing code, including pop up messages and image swaps.

Explore how to use the Dreamweaver behaviors panel to add a popup message behavior to a link, automatically generating a JavaScript alert and configuring events like click and focus.

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.

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.

In Dreamweaver CS6, apply the drag element behavior to the body tag, configure movement constraints and drop targets with snap rules, and preview dragging elements around the page.

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.

Learn how to implement the go to url behavior in Dreamweaver CS6 by turning an element into a JavaScript redirect that navigates users to another page after form submission.

Explore how to build navigation with Jump Menu and Jump Menu Go in Dreamweaver CS6, comparing drop-down navigation with older behaviors and adding links and a logo button.

Learn to implement the open browser window behavior in dreamweaver cs6, using it sparingly for a help popup with a 100 by 300 window and configurable navigation and status bars.

Demonstrates how to use set text behaviors in Dreamweaver CS6, focusing on set text of container and set text of textfield, with comparisons to status bar and iframe usage.

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.

Learn how to create rollover images in Dreamweaver cs6 by swapping images on hover, using the easy insert rollover image method or the behaviors approach with preloading.

Explore validating form inputs in Dreamweaver CS6 by enforcing required fields like name, company, phone, and email on a contact us form, and compare basic and Spry validation features.

Explore the Spryte framework in Dreamweaver CS6, a JavaScript and CSS library that enables AJAX-driven, widget-based interfaces with no plugins, separating the UI from back-end logic.

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.

Explore Spry tabbed panels in Dreamweaver CS6, learning to create a tabbed interface to separate content, customize tabs with images, and adjust CSS for spacing and typography.

Explore how the spry accordion organizes content into collapsible panels, insert and customize the widget, adjust panel sizes, borders, and padding, and preview behavior in Firefox.

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.

Learn to build Spry tooltip widgets in Dreamweaver CS6, using triggers, delays, and offsets to create dynamic tooltips with content or iframe panels.

Learn Spry validation textfields to enable dynamic pattern-based validation for a contact form, with required fields like name, company, phone, and email, plus custom patterns and blur validation.

Demonstrate Spry validation for multi-line textareas by enforcing character limits with a live counter that blocks extra characters, plus optional required fields.

Learn Spry validation for checkboxes and radio groups, including enforcing required selections and using radio groups to require one option, plus checkboxes for agreeing to the privacy policy.

Demonstrate Spry validation for selects by enforcing a non-default value on drop-downs, validating against 'select one', and previewing in the browser.

Demonstrate Spry validation for password and confirm password fields in Dreamweaver CS6, including character rules and matching checks, and extend to email validation and interactive form feedback.

Create a dynamic management directory using Spry data sets to display team bios from a data file, with Ajax refreshing and Dreamweaver integration.