site map frequently asked questions technology resources for faculty using multimedia resources online technology in the classroom creating an electronic coursepack resources for instructors school of nursing guide to online faculty resources

Macromedia Dreamweaver is the premier HTML editor available to U-M faculty and staff. You should be able to use Dreamweaver from any Campus Computing Site. Dreamweaver offers all the flexibility of HTML but is easy enough for a web novice to use! Dreamweaver offers a what-you-see-is-what-you-get interface as well as an HTML code interface. The program gives you complete control over the design of your web page.

Dreamweaver¹s interface is quite sophisticated and somewhat daunting at first. This introduction will focus both on learning Dreamweaver as a program and learning the basics of web design. We've created a step-by-step guide for making a simple web page in Dreamweaver. Feel free to open the program up and follow along!

Quick Links:

Creating Links in Dreamweaver
Adding HTML Pages to Your Main Page
Adding Images to your Web Page in Dreamweaver
Dreamweaver Special Features Tour

A Step-by-Step Guide to Creating a Web Page in Dreamweaver

  1. When you open Dreamweaver you see a blank web page before you. The first thing you should do is save this blank page to your web space (The "html" folder within the "Public" folder of your IFS, generally) as index.html If you've already created images you'd like to use on your site you should save these images to the same directory as the index.html page.

  2. Now give your page a title! Type your title - "Welcome!" for example - into the title bar at the top of your Dreamweaver screen.

  3. Now let's set the colors for the page. Select Page Properties from the Modify menu at the top of your screen. To change the color of an element, click the box with an arrow inside and select a new color from the color menu that pops up.

  4. It's time to type in the content of your web page. Dreamweaver works just like a word processor. Type directly into the main area! Don't worry too much about fonts or headings right now. We'll get to that in a minute.

    Here is the content of our sample web page:

    Welcome to Ann A. Nurse's Web Page!

    Hello! I'm a Ph.D/R.N. at the University of Michigan. This semester I'm teaching two sections of Nursing 140. On my web site you will find course syllabi, a little bit about my classes, and links to helpful resources.

    Thanks for visiting!

    Links:

    Nursing 140 Syllabus
    About Nursing 140
    University of Michigan School of Nursing
    Taubman Medical Library

  5. Now let's change the font in Dreamweaver. Select all of your text either with your mouse or using the Edit -> Select All command and use the menu bar at the bottom of the screen to change the font.

  6. Let's say you want to make text a different color or a different size. Select the text and use the menu bar at the bottom of the screen to change these attributes.

    7. Link box in the toolbar at the bottom of your screen.

  7. What about that syllabus? Well, before we can create a link to the syllabus it needs to be saved as an HTML file. If you've created your syllabus in Microsoft Word you can simply select File > Save as Web Page... to create an HTML syllabus. Be sure to save additional HTML files you create to the same directory as your index.html file!

    To link to your other HTML files, select the text on your index.html page that you want to "link" ("Nursing 140 Syllabus", for example) and type the filename into the Linkbox in the toolbar at the bottom of your screen like this: "file.html" (where file is your filename)

  8. To insert an image into your web page either select Insert > Image from the menu at the top of your screen or use the Insert Image Button on the left hand side of the screen. Select your image file from the appropriate folder on your hard drive. If you haven't saved your images to the same folder as your index.html file, Dreamweaver will ask you if you want to move the image file to that folder. Say yes: it will make your life easier!
Now that you know the basics you should be able to create your very own web page using Dreamweaver. Remember that one-on-one help is always available from the Faculty Exploratory and that there are often Dreamweaver training sessions for faculty.

Dreamweaver Special Features Tour


Insert Table
This button allows you to create a table. Dreamweaver will prompt you to enter the number of rows and columns your table should include. You can also draw a table in Layout Mode.


Insert Tabular Data
You can import tabular data into Dreamweaver from other applications that support tables, like Word or Excel. After you click the Insert Tabular Data button Dreamweaver will prompt you to browse for a file. Note: this feature does not work very well.


Insert Horizontal Rule
A horizontal rule is a line that extends across your web page, usually to indicate a break between sections. This button allows you to slam one into your Dreamweaver page.


Insert E-mail Link
Use this button to insert a link to your e-mail mailbox so that people who visit your site can contact you.


Insert Date
This button inserts the date on your web page.

Still haven't found what you're looking for?

Keep in mind that the Faculty Exploratory regularly offers Dreamweaver training. For now, try our frequently asked questions or one of these resources: