Dreamweaver

Description

Highlights | Essentials

Adobe Dreamweaver CC is the industry-leading web authoring software, providing both visual and code-level capabilities to create and maintain standards- based websites and applications for desktops, smartphones, and tablets. New and enhanced features help streamline your design and development work ow, build adaptive page layouts, and deliver content from one source to virtually any screens or devices.

DURATION | 4 DAYS

Assumed Knowledge

Basic computer skills required.

Each student on this Course will receive:

• Certificate of completion
• 12 months FREE email support
• FREE class repeat (if necessary)
• Course Notes/Slides
  

MSD holds the below Accreditation

Introduction to Dreamweaver

■ The Basics ■ Web Browsers ■ What is HTML? ■ Browser incompatibilities ■ Nesting tags

HTML Structure

■ Global Structure ■ The HTML, BODY, HEAD, TITLE Elements ■ Creating an HTML Document ■ Basic Content Structure ■ Headings ■ Paragraphs ■ Lists ■ Horizontal Rules ■ Divisions ■ Line Breaks

Working with Links

■ Local Links and Navigation Bars ■ Remote Links ■ E-mail Links ■ Named Anchors (Bookmarks)

HTML Formatting

■ Block-level Formatting ■ Inline Formatting ■ HTML Entities

Using Colors

■ Websafe colours ■ Hexidecimal colour values Working with Graphics

■ Embedding Images in a Web Page ■ The “alt” Attribute and Accessibility ■ Graphic Formats (GIF, JPEG, and PNG) ■ Using Graphics as Links ■ Using Background Images

Working with Tables

■ Creating and Modifying Tables ■ Working Around Browser Inconsistencies ■ Formatting Tables ■ Table Headers and Captions ■ Spanning Rows and Columns

Creating Forms

■ Introduction to Forms ■ Applying Input Types (Buttons, Check Boxes, Radio Buttons etc) ■ Creating a Text Area Field

Using Dreamweaver

■ Understanding static page architecture ■ Introducing DreamWeaver, Device Central & Bridge ■ Using HTML code and page architecture ■ Learning the Interface and Interface elements

Define a Local Site

■ Site structures, design and planning: Local, remote sites ■ Local sites ■ Root folders ■ Creating a local site -procedure ■ Cloaking ■ Files Panel

Web Page Creation

■ Web building basics ■ Creating a new HTML5 pages ■ Fluid grid layouts (CS6) ■ Real-time Multiscreen Preview ■ New document -preferences ■ Page titles ■ Document Properties ■ Background colour /image ■ Page sizes/ view options ■ Enhanced Inspection Tools /Inspect Command ■ Live view

Working with Text

■ Structural elements: headers, paragraphs, line breaks ■ Horizontal rules ■ Coding content in Code View, refreshing ■ Lists ■ Special characters ■ Font sets ■ Quick tag editor

Working with Graphics

■ Rules for using Graphics on web pages ■ Photoshop Integration ■ Inserting Images, image paths (relative vs. absolute) ■ ALT text and image properties ■ Linking Images ■ Rollover images ■ Editing images from DreamWeaver ■ Adobe Photoshop Smart Objects

Navigation Elements

■ Understanding site navigation ■ Linking to sites ■ Setting Targets ■ Creating links from images ■ Creating Named Anchors ■ Creating e-mail link ■ Creating a jump menu ■ Importing and using Fireworks Navigation bars (Fireworks students) ■ Image map Hotspots

Working with Tables

■ Creating tables, editing tables ■ Table formatting, content ■ Nested tables ■ Standard and layout mode ■ Layout tables, auto stretch, spacer images ■ Modify tables ■ Importing tabular data ■ HTML data sets

Cascading Style Sheet

■ Introducing cascading style sheets (Class styles and tag styles) ■ Understanding cascading order and inheritance of styles ■ Styles -page styles (auto) and external styles ■ Creating, editing and updating page styles ■ Importing/ attaching/ linking .CSS (pages and sites) ■ Tag inspector ■ CSS3 transitions ■ CSS3 best practices ■ CSS Enable /Disable Feature

Working with DIV’s

■ Using DIV’s ■ Controlling page structure with DIV’s ■ DIV over ow options ■ DIV’s and the Timeline palette (advanced only) ■ Adding CSS to DIV’s ■ Using absolute and relative positioning ■ Designing with DIVs

Structuring Pages

■ Examine page structure -principles ■ Present data in table layout ■ Using page templates and samples ■ Library palette ■ Assets palette

Working with Forms

■ Form functioning ■ HTML forms and form objects ■ Action, Method property ■ Form buttons ■ Check boxes and radio buttons ■ Lists and menus ■ Form focussing ■ Form validating

Frame Sets

■ Creating framesets and frame layouts ■ Customized Frameset layouts ■ Editing, navigating, layout with framesets ■ Framesets and metatags, refresh rates

Managing Head elements and Meta Tags

■ HTML ■ Meta tags ■ Index.htm page ■ Spiders and search engines ■ Keywords ■ Descriptions

Site Attributes

■ Importing image rollovers, image placeholders etc ■ Importing Flash, Flash text, Flash Buttons and Flash Video ■ Snippets ■ Special characters

Spry framework for Ajax

■ Spry widgets ■ Collapsable panel ■ Accordion ■ Tabbed panels ■ Menu bars

jQuery Mobile themes

■ jQuery mobile theme panel ■ Preview and apply themes

DreamWeaver Templates

■ Creating DreamWeaver Templates ■ Setting up DreamWeaver Template regions ■ Editable regions, optional editable regions ■ Creating new pages from templates ■ Default templates

Site Management and Maintenance

■ Testing your site (Check links / change links site wide) ■ Clean up HTML, Word HTML ■ Browser Compatibility Check ■ W3C validation for improved accuracy (CS6) ■ Connecting to a remote site ■ Site reports ■ Locate in site function