Unit 3. Defining a site (I)

Unit 3. Defining a site (I)

In this section we're going to see what a web site is, how to create one and to manage it. Also we will see how to modify the document properties.

Introduction

A web site is a Set of archives and folders, related to each other, and with a similar design or common objective. It's necessary to design and to plan the Web Site before creating the Pages that are going to be contained in this Web Site. The traditional way of making a site consists in creating A folder in local drive. HTML documents are usually created in this folder, whereas to contain the images, the animations, the style sheets, etc. new folders within this one are due to be created with the objective to have a better organization of the archives at the time of working. This is what is known as a Local site. Then we will be able to copy the archives in a web server, in the named Remote site, which is equivalent to publishing the site, so that people will be able to see it in the Internet. The organization of the archives in a site allows the administrator to share archives, automatically check the links, and use FTP to load the local site onto the server, etc. It's convenient that the home Page of the site has the name index.htm or index.html, because the browsers look for a Page with that name when they try to access a generic URL. For example, if we wrote a generic direction like http://www.teacherclick.com in a browser, this one would try to load the Page http://www.teacherclick.com/index.htm, and so an error would take place in case any Page with the name index.htm doesn't exist.

Creating and publishing a Website

Once the folders that compose a local site are created, it's possible to define the site in Dreamweaver. So, go to Site menu, and select the Manage Sites... option. Remember that through the Files panel, in its Files tab, it's possible to access each one of the created sites and the Manage Sites option.

In the case of having selected the Manage sites option, a window will appear containing the list of local sites previously defined. Of course, several local sites in a same computer can exist. If the New option is chosen, or if the Edit option is chosen, it will show the same window where the characteristics of the site will be defined.

The characteristics of the site are grouped in different categories located on the left. To visualize the characteristics of a Category you just have to select it by clicking on it. Let's look at the data to edit for the Local Info category. Site name has to be defined, and also a Local root folder, which is where you find the site in the local hard drive. Then, if it's required, through the Site Map Layout category you can define the home Page of the site, of which the rest of the HTML documents inside the site will depend. If there is a Page in the root folder of the site with the name index.htm or index.html, Dreamweaver will select it by default. These three characteristics are essential when you are defining a local site. We're not interested in the other options at this stage because we're focusing on defining the local site, and it isn't necessary to establish the server data located in the remote site. After filling in all the data, click on the OK button and open the site. If we would rather use the Wizard to create the web site, we just have to select the Basics tab instead of Advanced tab.

Opening a site

To open a site previously defined you have to go to the Site menu, then click on the Manage sites... option, then select the site out of the site list and click the Done button. We could use the Files panel too. Look for the site in the drop down menu of the Files tab and select it to open it.

Tutor 3,2

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: ,