Unit 3. Defining a site (II)

Document views

It's possible to visualize a site in the Files panel or in a window.

Files panel can be opened through the Window menu, and then clicking on the Files option. Or by pressing F8.

To change the views you have to press the button, located in the upper side of the panel.

At the same time, you can visualize the local site, the test remote server, or the site map.

In this image there is a view of the site map and the local site.

In this case test1.htm and test2.htm documents are linked to the index.htm document, because this has been defined as the site home Page and its contents link it to the other two.

If the files move through folders, or they change their names outside Dreamwaver, the Pages will not be correctly displayed. You will not see the images, the links will not work, etc...

But if these modifications are done inside Dreamweaver or through the site, the program will update the Pages automatically. So Dreamweaver will avoid this errors if a file referenced to an object that has changed.

When you edit an object that is referenced to another document, it will be shown in a window (see the image), which indicates the documents that have references to this object, and offers the option to update them to avoid the errors.

Just click on Update.

Documents properties

It's recommendable to define homogenous sites, this means that all the Pages of a site have to follow the same format, like having the same background color, the same font, etc...

You can define each Page format through Page properties.

You can open the window in three different ways:

Pressing the Ctrl+J keys.

Click on the Modify menu and select the Page Properties option.

Right-click on the bottom of the Page. It will appear at the end of the contextual menu the Page Properties option. And this dialogue window will appear.

In Appearance category, as you saw in the previous image, we find the properties:

Background image: Allows to specify a background image for the document. This image appears repeated. At the moment of selecting a background image it's important to notice that according to the image colors it will be necessary to establish some specific color for the text. It is not recommendable to have an animated gif as a background.

Background color: Allows to specify a background color for the document, but this color will only show up in the case the background color was not established.

Size: is used to define the font size.

Text color: is the font color.

Margins: Allow us to establish margins in the document. Left and top margins only work with Microsoft Internet Explorer, while the margin width and height only work with Netscape Navigator. None of those margins are in Dreamweaver document window, they are only shown in the browser.

The properties are organized by categories, in the Title/Codification category we find the properties:

Title: This is the document's title. It's in the browser's title and in the Dreamweaver document window.

In Links we find the next properties:

Link color: is the link color which helps the users to distinguish between normal text and the links connected to other Pages.

Visited links: is the visited link color, which lets the user distinguish between visited and unvisited links.

Active links: is the active links color.

Underline style: When we have a linked text, the text is underlined by default, with this option we can use another type of style, for example not to underline the word.

In the Tracing image category we find the following properties:

Tracing image: It allows us to establish an image as the document's background, but it will only appear in the Dreamweaver document window and never in a browser. This image is used as a graphic template to create the document.

Transparency: Allows us to establish the Tracing image's opacity.

The color palette

To assign colors you need to unfold a Color palette like this one. When you select a color from those in the color palettes, the hexadecimal value of the color is shown in the top left corner.

Dreamweaver color palettes use a 256 color palette for the web. These are the colors in Microsoft Internet Explorer and in Netscape Navigator, as well as in Windows and Macintosh.

You can customize colors through button, in the upper right corner of the palette.

You can assign colors through the buttons.

These buttons appear in the properties inspector of many objects, and also in many windows which let you specify properties (text properties, bottom or tables), like the Page properties window shown before.

The color can be inserted in two ways. One of these ways is by clicking on the gray tab , to display the Color palette. The other way is introducing the hexadecimal number of the color directly into the filed.

For example, if in the Color palette we select the blue color with #3399FF value, the color would remain like this: ,

To practice you can perform the Step by step exercise in Creating a new document and modifying its properties.

You have to be careful of not creating Pages that take too much time to download in the browser. To see how to verify the documents size, click here .

  Unit 3 Exercise.

Unit 3 Test

Page 3.2