Montgomery College Banner Link to Home PageLink to Home - Montgomery College Maryland
Future Students Current Students Information for Businesses and Training Courses Information on Faculty and Staff Information for Montgomery College Alumni Information for Visitors
  Information About Montgomery College Information on Credit Applications and Admissions to Montgomery Collge Information about Courses and Programs Information About Student Services Alphabetical Index of Pages and Sites Web Help Page



Page Building Lessons
A, Hello MC!
1. MC "Data" Page
2. MC Table Structure
3. Basic Table Page
4. MC Horizontal NavBar
5. MC "Cool" Banners
6. MC "Data" w/ Nav Bar

Assets & Links

Little Bitty Arrows
MC Home
MC Staff Courses
RJ Kimball Home
Dreamweaver 8
MC Standards
MC Banners
MC Graphics
RJK Graphics

How To Build A Montgomery College Web Site Using Dreamweaver:

Students At Language Lab Computer, RockvillePage Design   Assets   Structure  Storyboarding  Banners  CSS  Navigation  Links  Anchor Links
Email Links - Contact Information

Welcome to the Center for Professional and Organizational Development's (C.P.O.D.) web site on "Building Montgomery College Web Sites in Dreamweaver." You will find information about page design, page assets, site and page structure, storyboarding, banners, cascading style sheets, horizontal and Left navigation bars, links, and contact information.

After taking this course you will know how to use Dreamweaver to build web sites generally and Montgomery College web sites in particular.

We will refer to a number of examples from College web sites, including the Counseling and Advising page, Web Standards, and the General Education page, http://www.montgomerycollege.edu/curricula/gep.htm.

  1. Collect Web Page Assets
  • Text
    • Writing for the Web
  • Graphics
  • Banners -
  • NavBars
  • Cascading Style Sheets

Back to Top

  1. Storyboard Your Web Site
  • How many pages?
  • How many levels
  • Links, Navigation
  • "Lumping and Splitting" - Don't "lump" bundles of scrolled information on the same page. 
    • How can you "split up" a page and put information on separate, smaller pages?
    • See HTML Tutorial - Maricopa Community College, Maricopa County, Arizona.

Back to Top

  1. Page Structure - Design Table
  • 4-Row, 2-column table
    • Row 1 - Banner Row - Merge & Center row
    • Row 2 - Horizontal Navigation Bar
    • Row 3 - Left NavBar, Main Text & Graphics
    • Row 4 - Contact Information

Back to Top

  1. Attach Cascading Style Sheet(s)
  • leveltwo.css - Montgomery College's Level 2 style sheet.
  • Window>CSS Styles>Attach Style Sheet Button
    • Link tag is added in the Header of the document
    • <link href="leveltwo.css" rel="stylesheet" type="text/css" />
    • This is an XHTML single tag - not a tag pair.  Note the  /> with the space at the end of the code.
  • Note:  The MC Cascading Style Sheet (CSS) is not complete. Leveltwo.css does not define the Paragraph, ordered lists, or unordered lists, for example.  Most MC pages contain <font> tags, which are at least discouraged if not fully compliant with Section 508 Accessibility standards. All styling in modern web pages should be placed into style sheets, especially when using an editor as helpful and powerful as Dreamweaver in creating and editing style sheets.
  • Accordingly, I created an additional style sheet which incorporated the MC Level 1 and 2 <font> styles.  You are free to use this additional business.css style sheet if you wish. Use this additional style sheet to build upon the leveltwo.css style sheet created by the Montgomery College designers.

Back to Top

  1. Note the MC Body Tag -
  • <BODY bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" link="#996633" vlink="#996633" alink="#996633">
  • What's wrong with this tag?  How would you modify it to be XTML Compliant?
    • Mistake 1
    • Mistake 2
  • Add the modified <body> tag to your web page.

Back to Top

  1. Banner

Back to Top

  1. Links in the body of the text must be underlined according to current Montgomery College thinking.  Must use <a href="" class="bodylinks">
  • Links in the Left NavBar can be without underlining, but should be underlined on mouse-over.  Use the class "smalllinks." <a href="" class="smalllinks">

Back to Top

MC Buttons

The graphics for MC buttons are located inside the "images" folder.  Load the gold or green button first in the Rollover Images Dialog Box.  Load the black button second.

Dreamweaver > Insert Toolbar > Common > Images > Rollover Image

Anchor links

Anchor Links help your visitors navigate around a page.  Anchor links are especially helpful for long pages with may paragraphs, or lists.  Give your paragraphs headers, and link to the headers using Anchor Links.  See page 65 of Hester, "Creating a Web Page in Dreamweaver"

Back to Top

Contact Information

Contact Raymond J. Kimball Using an Email Link
Insert Toolbar > Common > Envelope Icon