Course Outline

Offered by Networked Information Services

Instructor: http://www.bu.edu/webcentral/help/
Prerequisites: HTML: Introduction, or equivalent knowledge
2 hours (50 minutes lecture, 50 minutes hands-on exercises, 5-minute break)

Organizing Files and Directories (5 minutes)

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 (5 minutes)

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 (10 minutes)

1. Introduction
2. Making "server-relative" links
3. Making "file-relative" links
4. Making "absolute" links
5. Linking Tips

Hands On: Linking
Making links using absolute, server-relative, and file-relative paths (10 minutes)

1. Using Dreamweaver, download the practice web site.
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.

Lists (10 minutes)

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

Hands On: Lists
Making an HTML list (10 minutes)

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.

Break (5 minutes)

Tables (15 minutes)

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

Hands On: Modifying Tables

1. Specify a border for an existing table in your practice site.
2. Add color to the table, rows, and cells to improve readability.
3. Add row spanning and column spanning.
4. Identify and correct common table errors.

Hands On: Formatting Tables
Formatting a home page using an HTML table (15 minutes)

1. Recreate the practice site's home page by deleting its text and creating a 2-column, 3-row table from scratch.
2. Add graphics to each cell for navigation and improved appearance.
3. Link the navigation graphics to other pages in the site.

Special and Extended Characters (5 minutes)

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

Hands On: Using Special and Extended Characters & 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 using the address provided in the handout.

Supplementary Materials (not covered in class): 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 Materials (not covered in class): 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.