Dreamweaver CC - Essential Training

Define a site in Dreamweaver to connect your local files with remote hosting, unlocking the files panel, site management window, and file transfer for publishing.

Identify suitable web hosting providers, compare shared versus dedicated hosting, and keep your user id and password handy for defining the site in Dreamweaver.

Learn to build the fictitious vector corporation site in Dreamweaver CC, using assets and images folders, real content, and pages like home, about, solutions, and contact us.

Define a site in Dreamweaver by setting the local site folder and site name. Use the Files panel to mirror your project folder and manage assets.

Define remote server properties in Dreamweaver CC by configuring the server name, address, and connection type, testing the connection, and selecting remote hosting or a testing server for your site.

Explore advanced Dreamweaver site settings, including Subversion version control, server properties, cache and cloaking options, design notes, and collaboration features with Contribute integration.

Explore the manage sites dialog to view, edit, delete, duplicate, export, and import Dreamweaver sites, back up settings and passwords, and transfer configurations to a new computer.

Navigate the Dreamweaver site menu to manage check in/out, locate in site, and generate site reports. Learn to synchronize files, fix broken links, and monitor server logs for troubleshooting.

Publish a web page live by creating an index.html in the site root, saving it, and uploading via the site management window in Dreamweaver to a remote server.

Set up your Dreamweaver project and build a web page by using built-in features to format text with paragraphs and line breaks, insert images, and set page properties.

Explore creating a new web page in Dreamweaver CC using the new document dialog box, starting from a blank page with the HTML5 doctype and save as index.html.

Learn to work with text in Dreamweaver CC by copying content, pasting into a web page, and using paste special to select text only or text with structure.

Learn to paste Word content into a web page with the paste special dialog, choosing text structure with basic formatting, cleaning up Word paragraph spacing, and understanding embedded styles.

Learn how to structure web content by using line breaks and paragraph breaks in Dreamweaver, define paragraphs, and manage spacing and block-level elements for clean, accessible pages.

Explore the difference between the HTML and CSS categories in the Dreamweaver CC property inspector, learn basic HTML properties, and preview how CSS properties and inline styles affect text formatting.

Use the format menu to apply heading tags (h1–h6) with predefined sizes for emphasis and SEO. Convert text between headings and paragraphs and use pre-formatted when needed.

Apply font weights in Dreamweaver by bold or italic styles via the properties inspector, the keyboard, or the format menu, and explore em and strong tags.

Learn to work with lists in Dreamweaver, converting text to ordered, unordered, or definition lists, adjusting indentation, and using list properties and starting counts for numbering.

Learn how to indent text in Dreamweaver using the block quote element and indent controls, and manage spacing with non-breaking spaces and character entities for accurate browser rendering.

Learn to insert and utilize special character entities in Dreamweaver, including non-breaking spaces, copyright and trademark marks, and ampersand entities, by using insert > character and direct code edits.

Master spell checking in Dreamweaver CC training by using the built-in spell checker, shift f7, to scan pages, add words to a personal dictionary, or ignore terms, ensuring error-free content.

Validate your web page with Dreamweaver or the W3C validator to ensure conformance with the document type declaration, fix errors and warnings, and revalidate before publishing.

Learn how to insert and customize a horizontal rule in Dreamweaver CC, creating a line that spans the page with adjustable width from pixels to percent, defaulting to 100 percent.

Add a date stamp to your web page in Dreamweaver CC, with automatic updates on save and configurable date and time formats.

Modify page properties using basic and CSSA based options to set background image and colors, margins, and link styles, and update the page title and encoding.

Explore the web image formats GIF, JPEG, and PNG, and understand how color depth, transparency, and Photoshop's Save for the Web optimize file size and image quality.

Explore methods to insert images in Dreamweaver CC, including background images and inline images, drag-and-drop from assets, and basic html tag adjustments for clean layouts.

Learn how to manage image properties in Dreamweaver CC, from setting source, id, and alt text to resizing with aspect ratio and using range graphics editing to edit originals.

Discover how to optimize images with the image optimization tool, using presets for PNG and JPEG to reduce file size while balancing quality for mobile viewers.

Explore how CSS (CSSA) separates content from design to control layout, type, backgrounds, borders, and positioning, enabling responsive, site-wide styling in Dreamweaver CC.

Learn how css works through style rules with properties and values that define element styles, and how to create and apply an external stylesheet with class selectors in Dreamweaver CC.

Explore external stylesheets, embedded styles, and inline styles, and learn how the cascade overrides earlier rules for efficient site-wide styling with external CSS.

Learn the five common CSS selector types supported by Dreamweaver for external and document-wide styles. These include class, type, descendant, pseudo-class, and ID selectors.

The property inspector in Dreamweaver offers CSSA category options to set size, weight, measurement types, color, and alignment, but these often create inline styles.

Learn to create a new style sheet with the CSS designer, attach external styles, and add body background, font family, font size, and line height rules.

Compare the classic style definition dialog with the siestas designer in Dreamweaver CC, highlighting categories like type, background, colors, layout, positioning, and transitions.

Use the page properties dialog to set appearance, links, and headings styles—fonts, colors, background, margins, and link states. But prefer an external stylesheet and the designer for clean, centralized styling.

Structure a web page with divs and css, replacing table-based layouts with header, navigation, content, and footer blocks for a flexible, independent design.

Create a container wrapper to center all page elements with a fixed 960-pixel width, applying a css rule and auto margins.

Create a 960 by 235 header background as a non-repeating image in a div, nested inside a container, using Dreamweaver CC to optimize page performance.

Create a navigation div in Dreamweaver CC with a minimum height of 200 pixels to auto-expand as content grows, using float left or right to position it beside the content.

Create the content element to the right of the navigation, add a role in sources, set 720-pixel width in the 960-pixel layout, and use float to align with the navigation.

Create the page footer by inserting a div and using the classic rule definition dialog box to set a 960px width, 30px height, and a non-repeating background, clearing floats.

Finish the design by cleaning up the layout, applying a white background for content, and adding a container background image to ensure proper tiling and height.

Learn to create and apply CSS classes in Dreamweaver CC training to float images, wrap text around content, and reuse styles across sections while comparing classes, IDs, and type selectors.

Use descendant selectors to drill into content and headings, duplicate styles across elements, and build a left navigation menu with precise padding, borders, and display tweaks in Dreamweaver CC.

Explore creating and applying pseudo class selectors, implement hover rollover effects, and consolidate cascading style sheets with multiple selectors to minimize duplication in Dreamweaver CC.

Explore applying document-wide styles in Dreamweaver CC to unify page design, create selectors for elements like blockquotes, adjust margins and padding, and implement typography and colors for cohesive main page.

Create an inline style in Dreamweaver CC to turn text into a red link, and note that an external style sheet offers easier management for one-off designs.

Learn to design a standards-compliant webpage using HTML5 semantic elements—main, header, nav, section, article, aside, footer, and address—and style them with CSS for a modern layout.

Reconstruct a site with HTML5 section elements to create a horizontal navigation. Place the logo on the left and the navigation on the right, and note the larger header image.

Discover how to set up a Dreamweaver CC project by importing new site files, creating index.html and style.css, using a normalization CSS file, and structuring semantic HTML5 elements.

Attach the normalize.css framework from the styles folder to standardize tag rendering across browsers, improving cross-browser consistency. Normalize.css is widely used in web development, including with Twitter Bootstrap and Joomla.

Style the page by adding css for the main tag, noting Dreamweaver lacks support, set a white background and 960px width with 20px margins, and align navigation and logo beside content.

Build headings and a horizontal navigation menu for the Vecta Corp site, applying background colors, typography, padding, borders and radius, and convert bullets to an inline, uppercase, bold, backward-compatible navigation.

Discover how to achieve backward compatibility for older Internet Explorer versions by using a JavaScript file to convert unsupported tags to block elements and applying IE conditional comments.

Explore pre-designed CSS layouts in Dreamweaver CC essential training, using starter pages from the new document dialog box. Learn to implement HTML5 self-contained designs with head or external stylesheets.

Use templates to centralize site structure and propagate changes to template-derived pages, keeping navigation and layout consistent. Leverage library items for reusable components like menus and copyright across pages.

Learn to use the Dreamweaver assets panel to manage templates and library items, extract files, and create reusable navigation and footer libraries.

Create and manage library items in Dreamweaver CC by converting existing navigation menus and creating new library items from scratch, noting that stylesheet data isn't copied into the library item.

Insert library items in Dreamweaver CC, drag them into pages or footers, center text with a 10px light font, and preview in Firefox.

Edit the library item and save; Dreamweaver updates all pages using that library across the site, with a log showing the changes.

Create a second library item to host a navigation menu for the intranet. Use two libraries with a shared Dreamweaver template to support public and internal sites.

Explore templates in the assets panel, preview and apply templates to pages, build a template from an index file, refresh changes, and delete templates.

Create and save a Dreamweaver template by basing it on a starter page, clearing content, inserting editable regions, and updating links when moving the template to a templates folder.

Create and edit template editable regions to enable content in template-derived web pages, by inserting editable regions via insert > template > editable region, and adding descriptive content.

Learn how to create a template-derived web page in Dreamweaver CC, bind pages to a main template, work with editable regions and template markers, and keep content synchronized.

apply a template to an existing page by mapping template regions, updating when template changes, and adding the events page to the main template for consistent navigation.

Edit templates to add a new top region and push changes to all template-derived pages, learning how optional regions maintain site-wide consistency across index and events.

Create an editable tag attribute in Dreamweaver CC to let users change the page background color via the template properties dialog.

Explore how to add optional regions to a Dreamweaver template, controlling visibility of headings and images by default or on demand through show and hide options.

Create and customize repeating regions and a repeating table inside a template to display event data, including name, date/time, and location, on the events page.

Detach a page from its template in Dreamweaver CC to create a one-off design, removing inheritance and template markup. Reapply the template anytime by clicking apply.

Learn to build a template with multiple library items and two optional navigation regions, assign nav_public and nav_internet, and control which navigation appears on each page.

Explore hyperlinking in Dreamweaver, learn to create hyperlinks to web pages, image maps, mailto and tel links, using absolute, relative, and site-relative paths.

Learn how to use document relative, site relative, and absolute paths to link between files in Dreamweaver, including when to use each and how Dreamweaver manages the path syntax.

Learn to build and link a Dreamweaver CC site with absolute and relative paths, a shared template, and a five-page navigation (home, about us, solutions, support, contact us), plus basic image linking.

Learn to link images in Dreamweaver by using the point file icon, apply an image class with margins and float left, and remove borders across browsers.

Create a simple contact page in Dreamweaver CC, using mailto and tel links with pre-populated fields like cc and subject for mobile-friendly communication.

Learn to create in-page links using named anchors in Dreamweaver, build a sub navigation that scrolls to page sections, and implement anchor linking with hash targets.

Learn how to use link targets and absolute paths in Dreamweaver to open links in a new tab without leaving the current page, and how to build reliable internal links.

Learn to convert a background image into an inline logo in Dreamweaver CC, create image maps with hotspot tools, and link header logo to the home page across templates.

Change link colors across pages by adding a CSS selector in the stylesheet, then set the color and text-decoration for consistent link styling and hover effects.

Use Dreamweaver's site-wide check links to scan for broken links and broken paths. Fix broken links by renaming paths or applying site-wide changes to ensure all pages stay interconnected.

Dreamweaver behaviors provide prepackaged javascript actions through the behaviors panel, enabling visual, code-free interactivity on web pages by attaching to objects like buttons, images, and forms.

Apply the popup message behavior in Dreamweaver using the behaviors panel, attach it to a button, and see how on click events trigger a JavaScript alert.

Learn to use the change property behavior in Dreamweaver CC to modify CSS properties like background color and font family, and apply multiple behaviors to elements such as buttons.

Explore implementing the check plug-in behavior to verify plugins on page load, keep users on the page if supported, or redirect to another site when not.

Learn to convert an element to an absolutely positioned drag element, configure drag behavior in the designer, and use constraints, drop targets, snapping, and JavaScript events during drag and drop.

Explore the Dreamweaver CC essential training on effects behaviors, learning how to apply blind, fade, scale, and shake animations to elements, adjust duration, direction, and target, with practical hands-on practice.

Learn to implement a simple redirect behavior for a button in Dreamweaver CC that redirects the browser to a new page or social media URL.

Attach a jump behavior to a dropdown menu in Dreamweaver to navigate to the selected item, using the go button to jump to destinations like Google or Yahoo.

Explore the open browser window behavior in Dreamweaver, using a popup triggered by a user event, with configurable window size, scrollbars, and resize handles, while considering popup blockers.

Use the call JavaScript behavior to insert inline JavaScript in Dreamweaver CC via a free-form text box, enabling quick code insertion when a built-in behavior falls short.

Explore set text behaviors to dynamically replace text in containers such as divs and text fields using a button trigger, with a hello world example and a single-page navigation demo.

Learn to use show and hide behaviors to toggle visibility of page elements in Dreamweaver CC, enabling simple interactions like mouseover effects and dropdown menus.

Learn to create rollover images with the swap image engine and swap image restore in Dreamweaver CC, including preloading, restoring images, and applying navigation link styling.

Open the contact form and add name and email fields with a submit button. Apply the body for behavior to enable basic form validation, including required inputs and email validation.

Learn how media queries power responsive design by tailoring CSS to viewport sizes, enabling fluid grids and adaptive layouts in Dreamweaver CC without changing content.

Learn to create and manage media queries in the Dreamweaver media panel, define conditions like max width, and apply media-specific styles alongside global styles for responsive design.

Discover how to use the 960 grid system to design consistent, responsive layouts in Dreamweaver. Overlay Photoshop templates and prototypes across desktop, tablet, and mobile breakpoints.

Translate a Photoshop 960-grid prototype into Dreamweaver CC by adding media queries and HTML5 structure to build a responsive desktop, tablet, and mobile navigation and content.

Add images and content to a responsive page by inserting a logo and header/footer backgrounds, swapping header images with media queries across viewports using assets and content folders.

Apply desktop css3 styles to a 960px centered main layout with a white background and a right-aligned navigation, and prepare a 300px three-column content area with padding and floats.

Adjust the desktop design for tablet and mobile by applying CSS3 media queries, resizing headers, navigation, and content blocks, and testing across landscape and portrait orientations.

Create a responsive mobile navigation for a dreamweaver cc project, converting the desktop menu into a styled list, refining padding and borders, and integrating a plugin for mobile portrait behavior.

Move to fluid grid layouts in Dreamweaver, where everything is managed by the fluid grid system using percentage values so designs adapt to viewport sizes without touching media queries.

Set up a fluid grid layout in Dreamweaver CC using a 12-column system for desktop, tablet, and mobile views, following a mobile-first approach.

Add and manage fluid grid layout elements in Dreamweaver CC, using resize handles to snap to columns; lock, hide, or delete divs. Duplicate and nest sections for navigation and content.

Add content and imagery to fluid grid layout elements by inserting logos and text from assets, then adjust columns, center the logo, and build navigation for tablet and desktop views.

Explore building a fluid navigation menu within a fluid grid layout using Dreamweaver, including creating menu items, styling with CSS, and adapting the menu for desktop, tablet, and mobile views.

Explore how Dreamweaver CC integrates jQuery and jQuery UI to streamline UI widgets like accordions, tabs, progress bars, and autocomplete through visual tools, CDN, and plugin options.

Explore how Dreamweaver implements the jQuery datepicker widget on a page. Learn to copy assets, refresh the site, and set month, year, two-month view, and locale formats.

Implement a jQuery UI accordion to present testimonials, with one panel open by default and others expandable, including section customization, active panel control, and basic styling.

Master the jQuery UI tabs widget in Dreamweaver CC by inserting tabs, designing the tab interface, and refining styles with padding, font size, and the code navigator.

Learn to implement the jQuery UI dialog widget, creating non-modal and modal dialog boxes, centered on the page, with titles, auto open, escape-key close, and resizable, fading interactions via JavaScript.

Learn to implement the jQuery UI autocomplete widget by loading a JSON file of keyword search terms to power a site search box.

Explore the jQuery UI slider widget in Dreamweaver CC, using it to capture ranges, set min/max values, define steps and defaults, and implement as a progress indicator or survey control.

Explore using jQuery UI button and buttonset widgets to trigger dialogs on click, remove links, configure button text and triggers, and set a 400px height for scrollable content.

Explore jQuery UI checkbox, radio button, and progressbar widgets, including inserting them, understanding their behavior in forms, and using a progress bar to reflect Ajax data loading progress.

Explore jQuery Mobile, a free open source JavaScript library that creates touch-optimized mobile web pages within a single HTML file. Learn about data-role attributes, widgets like accordions, and cross-device support.

Create a mobile web page with jQuery Mobile in Dreamweaver CC, unpack starter files, link the library via remote CDN or local copy, and build a simple multi-page layout.

Learn how to create multiple mobile pages in jQuery Mobile, link them from a main page, copy the header and footer for consistency, and use transitions like fade between pages.

Create dialog boxes with jQuery Mobile in Dreamweaver by using data-rel attributes to open dialogs or pages, and customize transitions with data-transition such as fade, slide, or flip.

Learn to create and customize jQuery mobile buttons—using the button tag, input types, or links—and add back buttons with icons and data-rel, to navigate prospect pages.

Learn to build a multi-page navigation bar in Dreamweaver using jQuery mobile techniques, creating home, solutions, and contact pages with data-role, icons, and an active state.

Learn to customize a jQuery Mobile web page using the data-theme attribute or the swatches panel, choosing from themes A through D to apply colors to elements or entire page.

Learn to create multi-column layouts in Dreamweaver CC using the layout grid to arrange content into rows and columns, such as two testimonials.

Learn how to create collapsible content blocks in jQuery Mobile to organize two testimonials in vertical columns with headers and an aesthetically pleasing layout.

Master creating a contents list in jQuery Mobile, including list types, items, descriptions, side content, split buttons, and dialog boxes for streamlined mobile interfaces in Dreamweaver.