The Basics: Dreamweaver for Course Development
Rather than teaching an entire workshop in using Adobe Dreamweaver for course development, we'll provide a model page and ideas for adapting it to meet your course needs.
Getting Started
Let's begin by creating a folder on your computer and downloading sample files.
- Identify a place on your hard drive to save your practice activity. Create a folder called practice.
- Right-click and save each of the following documents in your practice folder: index.htm, practice.css, title.gif, title.png, titlebanner.gif, and titlebanner.png.
Now, we'll open Dreamweaver and explore the sample files.
- Open the Dreamweaver application.
- Pull down the File menu, choose Open... and locate the index.htm file. Open it.
Let's examine the Index.htm document.
- Notice that the tab says index.htm. If you have more than open page open, you would see each page name such as page1.htm or syllabus.htm.
- Note: If you name your entry page "index.htm" this becomes your default "home page" for the practice folder.
- Notice the Title area (box) above the ruler. This is where you change the name of the page as it appears across the top of end user browsers.
- Notice the Properties information across the bottom of the screen. When you click anywhere in the body of the page, information will appear indicating styles, links, and other information.
- Click on the Heading 1: Course Title. Notice that the Format is set to Heading 1 or <h1>. Also notice that you are using the feature style of your layout.
- Click on the Heading 2: Welcome. The Format is set to Heading 2 or <h2>.
- Click on the Paragraph text. Course description. The Format is set to Paragraph or <p>.
- Click on text in the sidebar. Notice the information in the Link box such as page1.htm. This is a place where you can set or change the hyperlinks.
- Note: When possible, do not set the fonts, sizes, colors, etc. using the Properties options. Instead, you should modify the CSS (Cascading Style Sheet) associated with the page.
Modifying the Sample Page
Let's make some changes in this page.
- Change the title of the page to reflect the title of your course.
- Note: Provide information about the level of the page within the overall website in the title such as Sample Course: Unit 1: Practice Activities. This indicates that the Practice Activities page is inside Unit 1 of the Sample Course.
- Change the first heading to reflect the title of your course.
- Change the paragraph information to include a welcome and description of your course.
- Change the sidebar titles to reflect major headings in your course such as Syllabus, Course Calendar, Course Guide, Unit 1, Unit 2, Unit 3.
Modifying the Page Code
Notice that there are three ways to view this page: Code, Split, or Design. Let's make changes to the Code of the page.
- Click on the Code button to see the code.
- Note. You are now presented with the XHTML coding. Don't be overwhelmed by this page. You don't need to be able to code from scratch. However you do need to be able to modify code.
- Scan down the code. You'll find the <head> tag indicating special information for this page. Notice the tags for the <title>.
- Scan down further and notice that meta tags. These are used to tell search engines about your page. You may wish to make some small changed. ONLY change the information within the quotation marks.
- Change the author information from "Annette Lamb and Larry Johnson" to your name.
- Change the keywords, description, and copyright date as needed.
- Scan down further and notice the <body> tag indicating the beginning of the viewable page.
- Scan down further and notice the <div id="masthead"> and <div id="mastheadlogo"> information.
- The div tags indicate sections of your document that are dictated by particular styles. In this case, it indicates information about the banner across the top of the page.
- Scan down the bottom of the page. Notice the information about the navigation area with the <div id="navBar"> and <div id="sectionLinks"> tags.
- Scan down to the very bottom of the page for the site information.
- Scroll back up to the top of the page. Look for the following code:
<link rel="stylesheet" href="practice.css" type="text/css" />
This code indicates that the page gets style information from another document called practice.css.
- Click on the Design button to go back to the regular page view.
Exploring the CSS File
A Cascading Style Sheet (CSS) is used to dictate both the layout of the page and the "look and feel" of aspects such as fonts and images.
- Pull down the File menu, choose Open and select the practice.css document.
- This document contains the style information used by your practice document.
- Note. When you change the CSS document, it will impact all of the pages that share this document. Simply change the colors on this page and all of the colors in your website will change.
- Scan down the CSS document and notice the information for the body. The default fault for the body is Arial or other sans-serif.
- Scan down the CSS document and notice the a:link and the color: #990000. This indicated that links will be red rather than the standard blue. They will also be bold and won't be underlined.
- Scan down the page and notice the font information for each of the the headings.
- Scan down further and you'll find information about different sections of the page.
- The banner across the top is masthead and mastheadlogo.
- The left sidebar is navBar and sectionLinks
- The right content area is content and feature
- The area across the bottom is siteInfo
- Scan to the bottom of the page and you'll find some other specialty boxes and fonts indicated.
- Note: You'll find other styles that may or may not be relevant for your document.
Creating Additional Pages
Let's create additional pages.
- Open the index.htm page.
- Pull down the File menu, choose Save As. Give the page a name such as page1.htm.
- Now, you can make changes to this page.
- Note: If you goof up a page, don't worry. You can also download another copy of the practice page and CSS.
To learn more about Information Architecture, go Information Architecture for the Web.
To learn more about coding, go to Information Architecture: Coding.