Create a Web Site using Dreamweaver

This lab introduces Dreamweaver as a web editor. We'll use Dreamweaver to create and format a web site about volcanoes. Dreamweaver generates both HTML and CSS code. Additional information is available from Wellesley College Information Services: Dreamweaver Documentation

Setting up your file structure

To start, create a new folder on your desktop, and name it Volcanoes.
Inside Volcanoes, create a sub-folder named Graphics, and another one named Documents.
Download a few images into your Graphics folder from this web page.

We will create a site about volcanoes during today's lab, and it will have the following structure:

Structure of the Volcanoes web site

Use Dreamweaver to produce HTML Code

Please notice that the instructions on this page are not very detailed, and they don't intend to substitute for the official Dreamweaver documentation. Instead, they are intended to be used as reminders on how things are done. For exact step-by-step instruction, please use the on-line Dreamweaver documentation, which is user-friendly and absolutely great!

Start Dreamweaver, and create a new file. Type some text in that file, along these lines:

The Web's Premier Source of Volcano Information
You can find here:
Introduction to Volcanoes
Volcanic Places on Mars
Volcanoes in the USA
Volcanoes on the Earth
Teaching and Learning about Volcanoes
< Your Name >
Save your document within the Volcanoes folder, as index.html
Add a title to your index page, and change its background (Modify --> Page Properties)
Use the Property Inspector to edit your text. Specifically:
- Edit the page's text, so the page has an <H1> header, the different topics appear on a bullet list, and your name, separated with a line from the rest of the pages, shows in smaller font.
- Add a date to the lower part of your document
- Make sure that you check the spelling of your page.
- Add a few of <EM> tags to your file (we will customize them later!)
Save your file, and view it in a browser (or two...) (File --> Preview in Browser)

Here is how my index.html looks at this stage.
Now it is time to start creating the other HTML files of our site, and link them together.
- Using Dreamweaver, create a new file in your Volcanoes/Documents folder, and name it usa.html
- Type a bit of introductory text, and add a couple of USA volcano images from your Graphics folder. (Insert --> Image, or use the object pallet )
- Go back to your index.html and link the text "Volcanoes in the USA" to the usa.html. (Use the Property Inspector to create the link)
- Repeat the last three steps to create one more html file, named earth.html, and add the image earthMap.gif to it. Then link the text "Volcanoes on the Earth" from the index.html file, to earth.html.
- In your index.html file, link the text "Teaching and Learning about Volcanoes" to an external web site.
- Here is how my index.html looks at this stage
- Open your earth.html, which should contain the earthMap.gif image, and make into an Image Map. (Use the Property Inspector")
- Here is my Image Map of theVolcanic earth.
- Open your usa.html file, and use one or more tables to arrange your images nicely on the page.

Before we continue with css code, add a few <H2> tags to each of the html documents in your Volcanoes site.

Use Dreamweaver to produce CSS Code

1: External Style-Sheets

A: Create a new External Style Sheet and a new Rule

First of all, you need to decide on the characteristics that are common to all (or many) of the pages in your site. It is best to include the rules effecting those elements in your external style sheet. In the Volcanoes site, we want all the H2 headers to appear pink and underlined.
Here are the steps to create a new external style sheet and a new css rule:

Text --> CSS Styles --> New...
In the "New CSS Rule" window that pops up, select "Tag" as the Selector Type.
In the Tag drop-down menu, select H2 as the tag you want to modify.
In the "Define In" choice, choose "New Style Sheet File".
Click OK.
In the pop up window, give a name to your .css file ("my_style.css"), and save it in the right place (within "Documents" in this case).
In the "CSS Rule Definition" window, define your rules. In particular, choose a pink color for these headers, and for decoration check "underline".
Click OK.

The H2 Headers in your HTML document should be effected by this rule now! They should be in pink, and underlined. Make sure you study the produced CSS code, in the my_style.css document! Does it seem familiar?

B: Link an html document to an external css document

Often times you want to link an HTML document to an external style sheet. You know already that this is done by adding the LINK tag in the HEAD of the HTML document. Let's link the "usa.html" document to the "my_style.css" document we just created.
Here is how this can be done within Dreamweaver:

Open the "usa.html" document within Dreamweaver.
Text --> CSS Styles --> Attach Style Sheet
Browse to locate "my_style.css" file.
Click OK

Repeat the steps above to attach the same external style sheet (my_style.css) to the other html documents in the Volcanoes site.

C: Add a new Rule to an existing external style sheet

This time we want to modify the appearance of some of your P tags in more than one HTML documents. It makes sense to create a new rule, in the external style sheet, that defines a class of Paragraphs with the characteristics you want.
As an example, let's make some paragraphs have a bright colored background and name our class ".highlightP".
Here is how you can do it in Dreamweaver:

Dreamweaver --> Text --> CSS Style --> New...
In the "New CSS Rule" window that pops up, select "Class" as the Selector Type.
Name this rule ".highlightP"
Define in: my_style.css
Click OK
In the "CSS Rule Definition" window that pops up, define your rules. In particular, click "background" under "Category" and choose a bright color for the "background color".
Click OK.

The last step would be to specify the paragraph(s) we wish to belong to the ".highlightP" class. To do so, select the specific paragraph in the HTML document, and in the property inspector, choose ".highlightP" from the drop-down Style menu.

2: Document-Level Rules

Open your index.html document in the Volcanoes site, in Dreamweaver. We will try to use the application to produce a document-level CSS rule, to customize the EM tags in that document.
Open the Rule editor:

Text --> CSS Styles --> New...
In the "New CSS Rule" window that pops up, select "Tag" as the Selector Type.
In the Tag drop-down menu, select EM as the tag you want to modify.
In the "Define In" choice, choose "This document only".
Click OK.
In the "CSS Rule Definition" window that pops up, define your rules, i.e. choose the properties for the EM tag as you wish.
Click OK

View your html document (index.html) in a browser, and look at the text modified by the EM tags. Did it work? Make sure you study the produced CSS code, responsible for this change. You will find this code in the HEAD part of the index.html!

Notice that, in addition to using Dreamweaver to create new html and css documents, you can also use it to edit/modify existing such documents!