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, then 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 the 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 shown. You will not see the images, the links will not work, etc...

So, if these modifications are done inside Dreamweaver or through the site, you can update the Pages automatically, because if they make references to an object that has changed, you can avoid errors.

When you modify an object that is referenced by another document, it's shown in a similar window to this, which indicates the documents that make references to this object, and it can be updated to avoid errors.

You just have to clic on Update.

Documents properties

It's recommendable to define homogenous sites, this means that all the Pages of a site 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 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.

The properties are organized by way of 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 Appearance category, as you saw in the previous image, we find the properties:

Background image : Allows one to specify a background image for the document. This image appears in mosaic. At the moment of selecting a background image it's important to notice that according to the image colours it will be necessary to establish some specific colour for the text. And it isn't recomendable to have an animated gif as a background.

Background color : Allows one to specify a background colour for the document, but this colour will only show up in case of a background colour not having been 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 in the browser.

In Links we find the properties:

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

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

Active links : is the active links colour.

Underline style: When we have a linked text, the text is underlined by defect, 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 colours you need to unfold a Color palette like this one. When you select a colour from those in the colour palettes, the hexadecimal value of the colour is shown in the top left corner.

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

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

You can assign colours through the buttons.

These buttons appear in 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 colour 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 by introducing the hexadecimal number of the colour directly into the white tab.

For example, if in the Color palette that is up in this Page we selecte the blue color with #3399FF value, the colour 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 evaluation test .

Page 3.2