What you’ll learn

Dreamweaver Module

Getting started

• Getting started overview
• Setting preferences

Creating documents

• Creating new HTML documents
• Setting up documents
• Changing the title of a page
• Defining a background image or page color
• Viewing and editing HEAD content

Formatting text

• Formatting text with HTML tags
• Changing font characteristics
• Modifying font combinations
• Changing the color of text
• Aligning text and elements
• Creating bullet or number lists

Inserting Images

• Inserting an image
• Creating a rollover
• Image properties
• Resizing images and other elements
• Creating image maps

Creating tables

• Creating tables
• Nesting tables
• Filling a table with content
• Selecting table elements
• Formatting tables
• Setting table properties
• Setting row and cell properties
• Resizing tables and cells
• Adding and removing and columns
• Splitting and merging cells

Using Frames

• Creating frames
• Creating a nested frameset
• Saving files in frames and framesets
• Selecting a frame or frameset
• About Frame and Frameset properties
• Specifying frame sizes
• Setting frame and frameset borders
• Controlling frame content with links

Creating Forms

• Creating a form
• Adding an object to a form
• Text field properties
• Button properties
• Image field properties
• Checkbox / radio button properties
• List / menu properties
• Processing forms

AP elements

• Creating an AP element
• Using the AP palette
• Moving AP elements
• Changing the stacking order of Aps
• Working with Timeline to make an animation banner etc

Site planning

• Creating a local site
• Creating a romote site
• Working with pages in the site map
• Upload files to romote site by FTP or local network
• Viewing files in the Site window
• Working with site files

Using the behavior

• Go to URL
• Open browser window
• Popup message
• Preload images
• Show-hide layers
• Swap image/swap image restore
• Validate form
• Play timeline and stop timeline
• Go to timeline frame

Insert media clips

• Inserting Animate media
• Inserting QuickTime / AVI movies
• Inserting music files (mp3, midi, etc)

Using CSS style

• Creating an external style sheet
• Defining a custom style
• Applying a custom style

HTML5, CSS3 and Javascript

HTML Basics

• Create an HTML Web Page
• Learning the core HTML Tags
• Styling Web Pages with Font Tag
• Working with Images
• Presenting and Formatting Data using Table Tags
• Creating Data Input Form

Introducing HTML5

• Introducing HTML5
• Understanding HTML5 Web Browsers
• Backward Compatibility Issues

Learning Page Layout Elements

• Understanding the Semantic Layout
• Using Header, Footer Elements
• Using a Navigation Element
• Using Section and Article Elements
• Using Heading and Paragraph Elements
• Using Figure and Aside Elements

Designing HTML5 Form

• Using Number, Telephone Input Type
• Using Email, URL Input Type
• Using URL, Search Input Type
• Using Date, Range Input Type
• Using Color Input Type
• Require a Value in an Input Field

Adding HTML5 Multimedia

• Understanding Audio and Video Formats
• Play Movies with the HTML5 video Element
• Play Sound with the HTML5 audio Element

CSS Basics

• Benefits of Cascading Style Sheets
• CSS Rules, Selectors
• Precedence of Selectors
• The Cascade
• Creating an Embedded Style Sheet
• Creating an External Style Sheet
• Adding Inline Styles
• Media Types
• Divs and Spans
• Units of Measurement

Typography

• Font-family, Font-size, Font-style
• Font Style, Font Variant and Font Weight
• Letter and Word Spacing
• Line-height
• Text-align, decoration, indent
• Text-transform, Vertical-align

Working with Objects and Boxes

• About Color Values
• Color, Background-color
• Background-image
• Colors and Backgrounds
• Borders, Margin and Padding

Custom Cursors

• Cursor Styles
• Custom Cursors
• Using Custom Cursors

Working with Navigation Menu

• Pseudo-classes
• CSS Button Links
• Modifying Links
• Using list properties
• Block display
• In-line display

Getting Started with JavaScript

• JavaScript Programming Overview
• JavaScript and HTML: Using the SCRIPT Tag
• Hiding Scripts from Non-JavaScript Browsers

Variables and Operators

• Variables and Data Types Overview
• Using Data Types, Variables, and Operators
• Using Comments in JavaScript
• Defining Arrays

Functions and Objects

• Using Built-in Functions
• Creating Custom Functions
• Using Methods

Control Statements

• Controlling the flow - JavaScript Control Statements
• Using Control Statements and Loops
• Using Loops
• Conditional Statements: If...Else
• Using the For...In Loop
• Using the Break Statement
• Using the Continue Statement

The Window Object

• The Window Object
• Dialog Boxes
• Window Manipulations

The Document Object

• The Document Object
• Writing to Documents
• Dynamic Documents

Events Handling

• Using JavaScript Events
• OnMouseOver, OnMouseOut
• OnLoad, OnUnLoad
• OnSubmit, OnClick

Working with Forms

• The Form Object
• Reading Data from Form Elements
• Validating Data with Event Handlers
• String Methods Used in Input Validation
• Form-Level Validation

Validating Form Data

• A General Approach
• Testing for Required Fields
• Validating Numeric Data

Responsive Web Design

Responsive Workflow

• Planning and Strategy
• Content Before Layout
• Layout Consideration
• Prototypes
• Visual Design
• Responsive Design Tools

Mobile Pages Issues

• Mobile First
• Understanding Screen Size and resolution
• Deciding Which Devices to Support
• Testing your site on real devices

HTML for Responsive Sites

• Working with HTML
• Basic Page Structure
• Viewport
• Structural Elements
• Creating a Page
• Clean and Semantic HTML

Essential CSS for Responsive Sites

• The Cascade
• Using the Cascade
• Organizing Your Stylesheet
• The Box Model
• Display
• Positioning
• Float and Clear

Fluid Grids

• The Role of Fluid Grids
• Creating Your Own Response
• Fluid Solutions

Understanding Media Queries

• What’s a Media Query?
• Media Query Structure
• Using Media Queries in Stylesheet Links
• Browser Consideration
• Designing Responsively
• Using Media Queries
• Two-Column Layout
• Setting a Maximum Width

Navigation and Header Layout

• Responsive Navigation
• Navigation Links
• Navigation Patterns
• Header

Adaptive Images

• Adaptive CSS
• Scripted Adaptive Images
• HTML5 Adaptive Solution
• Ways to Display Images
• Responsive Images

Typography

• Typefaces
• Using Fonts
• Sizing Text
• Line Length
• Whitespace
• Margins and Padding
• Changing Typeface for Screen Size

Photoshop

Working with selection tools

• Using different marquees tools
• Using lasso tools
• Using quick selection tool

Type tool

• Using horizontal type tool
• Applying different font styles
• Setting line spacing and letter spacing

Layers

• Creating and deleting layers
• Managing layout with layers
• Grouping and merging layers

History Panel

• Restoring original image
• Undoing steps with history panel
• Using the snapshot

File Format

• Discussion on web image formats
• GIF, JPEG and PNG
• Optimizing images

Animation

• Frame by Frame Animation
• Tweening animation
• Output to animated GIF

Animate CC

Using imported artwork

• Placing artwork into Animate CC
• Imported bitmaps

Drawing

• About drawing tools
• Drawing modes and graphic objects
• Creating objects by pen tool

Symbols, instances, and library assets

• Working with symbols
• Working with symbol instances
• Working with the library

Timelines and animation

• Frames and keyframes
• Motion tween and shape tween
• Applying a motion onto a guide line
• Apply custom ease in/ease out to classic tweens

Publishing and Exporting

• Publish settings
• Specify publish settings for SWF files
• Specify publish settings for HTML documents

SEO

Search Engine Optimization

• Understanding ranking factors
• Assessing your own website
• Knowing what ranking elements you control
• Importance of Website structure and indexing
• Researching keywords
• Design you site for optimal SEO
• Create SEO friendly images