Prerequisites: HTML: Introduction, or equivalent knowledge

Organizing files and directories

  1. Web directories on the server are navigable like Windows Explorer, Finder
  2. Hierarchy of directories – work from General concept >> General topics >> Specific topics >> Specific details

Naming files and directories

  1. Use: Lowercase a-z, numbers 0-9, hyphen character ( – )
  2. Do not use: Spaces, uppercase, underscore (_), slash (/), apostrophe (‘), and other symbols and punctuation
  3. Avoid repetition
  4. Always: Short, descriptive, one word
  5. Easy to say, easy to write down, easy to remember

Linking, revisited

  1. Introduction
  2. Making “server-relative” links
  3. Making “file-relative” links
  4. Making “absolute” links
  5. Linking tips

Hands-on exercise: Making links using absolute, server-relative, and file-relative paths

  1. Using Dreamweaver, download the practice website.
  2. Create a link that specifies an absolute URL.
  3. Create a link that specifies a path that is relative to the server.
  4. Create a link that specifies a path that is relative to the current file.


  1. Unordered Lists (bulleted lists)
  2. Ordered Lists (numbered lists)
  3. Definition Lists (describe terms and definitions)

Hands-on exercise: Making an HTML list

  1. Using the non-HTML list provided in a practice page, format an ordered HTML list.
  2. Add list attributes to designate list items with letters or roman numerals.
  3. Change the list to be an unordered (bulleted) list.
  4. Experiment with modifying list attributes.


  1. Introduction to HTML tables
  2. Creating a table
  3. Adding table rows
  4. Adding table cells

Special and extended characters

  1. Useful for characters reserved in HTML
  2. Useful for non-keyboard characters

Hands-on exercise: Using special and extended characters, and publishing your work

  1. Experiment with adding special characters to your practice page.
  2. Save your work, then publish your files by using Dreamweaver’s Synchronize tool.
  3. Review your live pages online.

Supplementary material: More formatting tags

  1. Modifying fonts
    • <font size=” “>: absolute (7=largest; 1=smallest) and relative (+ or -)
    • <font face=” “>face: one face, multiple faces, type family (serif or sans-serif)
    • <font color=” “> color
  2. Aligning with <div>
    • Aligns any element (works on text, images, tables … everything)

Supplementary material: Tables vs. frames

  1. What frames are, and how they work
  2. The problems with frames
    • Problems with bookmarking
    • Problems with printing
    • Problems with navigation
  3. We recommend using tables to create similar layouts, and to avoid frames.