Professor: Eduardo Navas (ean13@psu.edu)

 

Dreamweaver HTML Lecture #3

Once you have all five pages sliced properly, open them in Dreamweaver.

Here you will learn how to change the page background color and include background-images, as well as to choose different typefaces. The most important thing is to understand css style sheets.

First an introduction of Dreamweaver's interface.

To change the background color and other attributes, on the top menu choose: Modify > Page Properties. A window will appear. Choose the background color, and/or background image you desire. Also you may predefine other features such as font type for links, as well as headings. Experiment with this features as I introduce them in the in-class exercise.

Note that all the adjustments that you make to your page will appear in the head under brackets as follows:

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,td,th {
color: #999900;
}
a {
font-size: 14px;
color: #999933;
}
a:visited {
color: #0000FF;
}
-->
</style></head>

The above is a style attribute. This one is useful because it can be applied to many areas of a page by adjusting an html tag once, as opposed to each time the tag is written. For example, regular text color is defined in the body attribute as "color: #999933;". This is most efficient when the CSS attributes are place in one sheet that can be referenced by all of your pages. If you make one change in the style sheet it automatically affects all of your pages. This is the reason why this type of tags are called Cascading Style Sheets (CSS), like a cascade, it starts at a source and extend as far as the landscape will allow.

You can adjust your type and create headings from very large <h1></h1> to very small <h6></h6>.

You can also create links in this section and define other styles.

------------

As you design your pages, you may find that you need to include your text in html rather than a graphic created in Photoshop. To do this you will need to decide which area of your design will contain the html text. In Photoshop and Imageready prepare the design keeping in mind that the area where the text will be placed will be an empty graphic, which you will later delete in Dreamweaver, once you have finished your design specs in Photoshop and Imageready.

To do this: Design your pages in Photoshop and Imageready, and open them in Dreamweaver. In Dreamweaver select the areas (blank squares) where the html text will go, and delete them; then add the html text as you desire. You may do this for links as well if you like, or any area of the webpage. You can think of the pages created in Photoshop and Imageready as templates that you can further develop in Dreamweaver.