Adobe Dreamweaver

Also see How to code HTML5, CSS3, & JavaScript (this class can be conducted in Dreamweaver or in a text editor such as Notepad++ or BBEdit).

The Dreamweaver Work Area

• Insert and Properties Toolbar
• CSS and Files panels
• Working with other panels

Working With Sites

• Planning a site
  • Site Map
  • Page Design
• Creating a New Site
  • Blank Site
  • Importing/Defining existing Sites
• Adding Files to Site
  • From Desktop/Windows Explorer
  • Updating Site Window
• Organizing your site
  • Adding Subfolders
  • Moving Files
  • Renaming Pages and Files
• Modifying Site window
  • Changing column views
  • Hide/Show Remote view
  • Sorting items in view pane
• Publishing your sites via FTP

Creating Page Templates

• Understanding Templates
  • Editable Regions
  • Repeating Regions
  • Optional Regions
  • Editable Attributes
• New page window
• Using and modifying a pre-built template

Understanding CSS for page layout

• Basic HTML5 elements
• CSS structure
• Building your own CSS page with HTML5 elements

Working with Pages

• Naming conventions
• Preview Pages with Live View and in Browser

Working with Type and CSS type formatting

• Type Limitations on the Web
• Understanding CSS for type formatting
  • Internal vs. External CSS
  • Tags, classes, and compound styles
  • Borders, Padding, and Margins
• Entering Text
  • Direct Typing
  • Copy and Paste from Word
• Font Selection
• Type Size
• Text Color application
• Text Alignment
• Lists
  • Uses and Application
  • Adjusting List Indent
  • Removing List format
• Special Characters/Formats
  • Paragraph returns vs. Line breaks
  • Non-Breaking Space
    • Mac: Option-Spacebar
    • Win: Shift-Spacebar
• Character palette
• Editing Text
  • Spell Checking
  • Find and Replace
• Line Spacing (Leading)
• Letter Spacing (Tracking)
• Paragraph Spacing

Working with Images

• Image Formats
  • Working with Photoshop Smart Objects
    • Optimizing
    • Resizing and updating
  • Working with Animation
    • Flash SWF
    • Adobe Animate
  • Working with video & audio
    • Best formats to use
  • Working with and exporting from other programs
    • Photoshop
    • Illustrator
• Placing an Image on the page
  • Insert Image menu
  • Image icon in Objects palette
  • Click-and-Drag From Site window
• Sizing/Resizing an Image
  • By Pixel or Percent
  • Resetting to original size
• Image Alignment
• Image Border
  • Leave Border selected and enter Ø
  • Using CSS img tag
• Adding an Alternate Tag
• Placing and Modifying a Rule
• Single-Pixel Gif Image
  • Transparent Gif as spacer for tables and line spacing
  • Color Gif as colored rule or box
• Using iFrames

Links

• Understanding Link
  • Absolute vs. Relative Links
  • Changing Link Colors (Page Properties)
• Creating Text Links
  • To another web site
  • To another page (target)
  • On the same page (Anchors)
• Creating an E-Mail Link

Navigation methods

• CSS Text-based menus
• Graphic Rollovers
• jQuery menus

Tables

• Creating a standard Table
  • Inserting a Table
    • From Excel
  • Selecting
    • a Table
    • a Cell(s)
    • a Colunm
    • a Row
• Resizing a Table
• Properties palette vs. CSS formatting
  • Table
    • Number of Rows & Columns
    • Width & Height
    • Suggest Height on Auto
    • Cell Pad & Cell Space
    • Border & Color
    • Background Image
  • Cell
    • Vertical & Horizontal Alignment
    • Width & Height
    • Color
    • Cell merge
    • Add/Delete Row or Column menu
• Nesting Tables

Forms

• Creating a Form
  • Form Box from Objects palette
  • Adding Text fields
  • Adding Checkbox fields
  • Adding Radio Button fields
  • Adding Buttons
  • Adding a Popup Menu & List Box
  • Using jQuery form fields

Using the Library and Assets panel

• Adding Library items
• Placing Library items
• Modifying and Update items