Page Properties, Layout, and Images

This introductory course will teach you how to develop a website using Adobe Dreamweaver, the industry-standard, web-editing tool. You’ll learn how to format pages, create tables, and insert images with ease, and be introduced to tools, menus and palettes.

MCTC Continuing Education
Prerequisite: HTML I and HTML II or equivalent.
Text: Dreamweaver CS4 Visual Quickstart Guide, Peachpit Press, 2009
ISBN: 0-321-57352-8

Downloads:
Week 2 – Roundtangle

Getting Started

  1. Introducing Web Design
  2. Launching Dreamweaver and Exploring The Workspace (pg 2)
  3. Working With Panels (pg 10-20, fig 1.6)
    • Docking/Undocking a Panel Group
    • Showing/Hiding Panels
    • Design/Split/Code Views
    • Displaying the Properties of Web Page Elements
  4. Toolbars (pg 9)
    • Using the Standard Toolbar
    • Previewing Your Pages in a Browser
  5. Setting General Preferences
    • Setting Document Options
    • Setting Editing Options

File management and Working With HTML Documents

  1. Defining a Site (pg 34-49)
  2. Creating New and Opening Existing HTML Documents (pg 60, fig 3.3)
  3. Setting New HTML Document Preferences (pg 62-63)
    • Recommended New Document Preferences Settings
    • Doctype declaration

Page properties/Page layout

  1. Setting Page Properties (pg 77-84)
    • Dreamweaver Video Tutorial – Property Inspector
    • Choosing a Font Grouping
    • Choosing a Font Size
    • Choosing a Font Color
    • Choosing Heading Properties
    • Setting Background Color Properties
    • Using a Background Image
    • Setting Page Margins
    • Changing the Page Font
    • Defining a Page Title

Working With Text

  1. Dreamweaver Video Tutorial – Styling Text With CSS
  2. Paragraphs
    • Formatting Headings
    • Inserting a New Paragraph
    • Inserting a Line Break
  3. Character Formatting
    • Adding Emphasis to Text
  4. Formatting Lists
    • Unordered Lists
    • Ordered Lists
  5. Inserting HTML Elements
    • Inserting a Horizontal Rule
    • Inserting Special Characters
  6. Aligning Text
    • Default Text Alignment

Working with Anchors and Links

  1. Dreamweaver Video Tutorial – Creating Links
  2. Absolute and Relative Links (pg 168-169)
    • Linking with the Link Text Field
    • Reading Absolute File Paths
    • Linking to an Email Address
    • Linking with Browse for File
    • Linking with Point to File
    • Making Graphic Links
    • Reading Relative File Paths
  3. Named Anchor (pg 175-177)
    • Creating a Named Anchor
    • Linking to a Named Anchor
    • Reading a Named Anchor File Path
  4. Modifying a Link (pg 174)
    • Targeting a new Browser Window
    • Changing a Link’s Destination
    • Removing a Link
  5. Styling a Link (pg 172-174)
    • Underline and Style Properties
    • Using the CSS Styles Panel
    • Deleting Internal Styles
    • Reading the Link Tag

Working With Images

  1. Dreamweaver Video Tutorial – Adding Images
  2. Inserting Images on the Page (pg 130-131)
    • Working with Images
    • Applying Borders
    • Working with Alternative Text
    • Inserting an Image Placeholder
    • Replacing an Image Placeholder
  3. Resizing and Refreshing Images
    • Refreshing an Image
  4. Editing Images in Dreamweaver (pg 141-146)
    • Cropping and Image
    • Resampling and Image
  5. Aligning Images with Text (pg 137)
    • Wrapping Text Around an Image
    • Aligning an Image to a Single Line of Text
    • Adding Space Around an Image
  6. Image Maps (pg 179-180)