Dreamweaver - Introduction with HTML

Course Overview

Importance of web design

• ROI
• Usability
• Web Standards and its benefits
• How Web pages work
• Internet
• Hosting
• Service providers
• Web page content
• History

Planning Process

• Planning
• Wireframing
• Storyboarding
• Information Architecture
• UX design considerations

Web design tools

• Text editors
• Visual editors
• Root folders

Fundamentals of HTML, XHTML, and CSS

• Structure (HTML) and Style (CSS)
• The aesthetic value of grid layouts
• The realities of grid layouts on the web

Graphics, color, & transparency

• Using graphics
• File size
• Format
• Image editors

Working with color

• Understanding web color space
• Understanding platform differences in color
• Best formats to save images and graphics with color

CSS for formatting text

• Creating and using CSS for text formatting
• Using Styles to define information hierarchy
• Importance of styles for SEO

Creating layouts with CSS

• Using DIVs as containers
• Creating an ID style
• ID vs. class styles for DIV tags
• Absolute positioning
• Styling DIVs with borders, background colors and padding
• Integrating background images into a layout
• Understanding overlap and the z-index property
• Using relative position
• Creating a wireframe layout
• Adding the float and clear properties
• Adding and formatting content

Introduction to interactivity and multimedia

• Flash
• Silverlight
• JavaScript
• Video
• Designing for mobile & devices
• Introduction to HTML5

Dreamweaver Jumpstart

• Design and layout tools
• Site management and file transfer protocol
• Coding environment and text editor
• Mobile design and development features
• Dreamweaver’s workspace features
• How websites work
• The role of web browsers
• An introduction to HTML
• Explorations in code
• Creating, opening, and saving documents
• Setting up a new site

Understanding sites and pages

• Creating a new site in Adobe Dreamweaver
• Using advanced site-creation options
• Adding pages
• Saving a page to your site
• Defining page properties
• Changing your work views
• Looking at the Files panel
• Viewing local files
• Selecting and editing files

Adding text and images

• Using type and images on the Web
• Adding text
• Introducing styles
• Previewing pages in a web browser
• Creating hyperlinks
• Inserting images
• Linking images
• Editing images
• Optimizing images
• Updating images

Styling your pages with CSS

• Understanding cascading styles sheets
• Creating and modifying styles
• Creating a class style with the Property Inspector
• Using advanced CSS formatting
• Putting Div tags and CSS IDs to use
• Saving internal vs. external style sheets
• Attaching external style sheets
• Modifying attached style sheets
• Creating a new .css file

Working with tables

• Using tables in web design
• Importing table data
• Modifying table structure
• Creating a table
• Formatting tables with HTML
• Formatting tables with CSS
• Advanced CSS styling of tables
• Reusing CSS for other tables
• Sorting data in tables

Fine-Tuning Your Workflow

• Working more efficiently
• Customizing panels and groups
• Adding Favorites
• Using the Insert bar
• Resizing the document window
• Changing the zoom level
• Using guides
• Using grids
• Navigating with the tag selector
• Tiling documents

Adding Flash, video and sound content

• Making web content interesting
• Inserting Flash movies
• Choosing the right video format
• Adding video
• Incorporating Flash Video
• Using QuickTime video and Windows media
• Adding video controls
• Understanding plug-ins
• Choosing the right audio format
• Inserting sound
• Updating and editing colors

Managing Your Website

• Working with the Files panel
• Creating a remote connection
• Viewing files on a remote web server
• Transferring files to and from a remote server
• Checking links site-wide
• Generating site reports
• Checking browser compatibility
• Adding metadata
• Launching your site
• Getting help and using the reference guides

Dreamweaver new features

• Fluid Grid Layout
• CSS transition
• Web fonts
• jQuery mobile swatches
• PhoneGap build service
• CSS3 and HTML5 authoring support
• jQuery mobile integration
• Native mobile app support

Prerequisites

• We recommend that you have the Adobe Dreamweaver software before starting the Adobe Dreamweaver class.