(Tutorial) Using Dreamweaver

The objective of this exercise is to familiarize you with the Macromedia Dreamweaver package. Your goal is to learn as much about the package as you can. This exercise is hands-on, meaning that it is designed such that you complete a series of steps so as to learn how to create a Web page and Web site with Dreamweaver. Each of the hands-on steps that you will complete appear as numbered steps.

To help you with this goal, you will create a Web page for Virtual Tide Realty (a simulated company). Your goal, however, is to learn Dreamweaver. It is not to create an absolute replica of the sample Web page and Web site. Feel free to experiment with colors, fonts and sizes while you are learning Dreamweaver. Be sure to periodically save your work. You must save your work before you can create certain types of links, such as anchor links. Save all of your Web pages to the same folder on the A: drive on your computer. In addition, use file names that adhere to the following rules:

To complete this hands-on exercise, you will need the following files. These files can be downloaded from WebCampus.

Note that a completed version of this Web site can be found at business.unr.edu/class/is301/demo.

Getting Started

Before you begin creating the Web site and its pages, you should set up a directory where you plan to save the files you create and the image files that you intend to use in your Web site. If you are using your own workstation, you might want to create a C:\Sites directory on your hard drive. Each site that you create should be saved in a separate directory under C:\Sites. For example, you might create the directory C:\Sites\Virtual-Tide for this tutorial. Alternatively, you could create C:\Sites\IndividualWebSite for the assignment. Of course, the names selected are up to you.

When working in the COBA instructional computing lab, be sure to save your work to a floppy diskette in drive A. Before continuing, copy the .html document, the Word document and the images files described above to the diskette in the a: drive.

  1. Copy the preceding files to the root directory of the floppy drive A:\

Now that you have set up the necessary files, you are ready to begin creating a Web site with Dreamweaver.

  1. Start the Dreamweaver package. If Dreamweaver has not been used before on the computer that you are using, a message will appear asking how the user interface should appear:
  2. Click Dreamweaver workspace.
  3. Dreamweaver starts, as shown in Figure 1.

 

Figure 1: Initial Dreamweaver window

As shown in Figure 1, Dreamweaver creates a blank Web page, and displays a window called the Properties Inspector along the bottom of the Dreamweaver window. Note that if someone else has used Dreamweaver on the computer that you are using, different windows may be visible and the appearance of some windows may differ too.

Naming the Web Page

By default, Dreamweaver creates a default Web page named Untitled Document. It is essential that you change the name of this page. Otherwise, the links to other documents will not work correctly. In this case, you are creating the home page for the Web site. The title of the Web page should be named Virtual Tide Realty. This title appears in the title bar of the Web browser, when the page is displayed. The file name, as it will be saved on the disk will be A:\index.html. (Assuming that you are working from the floppy disk drive.)

  1. Right-click in the blank document named Untitled Document, and then click Page Properties from the context menu.
  2. The Page Properties dialog appears, as shown in Figure 2.
  3. Set the Title to Virtual Tide Realty.
  4. Set the Background color to light blue by clicking the icon, and clicking the desired color from the color palette.
  5. Click OK to close the dialog box and apply the changes.

Figure 2: Page Properties dialog

It is important to set the title of the document and to save the file prior to inserting a background image, other graphic images, or links to your other Web page files. Otherwise, Dreamweaver will create the links as absolute links rather than relative links. If this happens, the links will not work when the Web site is uploaded to the Web Server. Next, the HTML document that you just created needs to be saved to the disk.

  1. On the menu bar, click File, and then click Save As. A Save As dialog appears
  2. Use the file named A:\index.html. Again, we assume that you are saving all files to the root directory on the A:\ drive. If you are using a different directory, save the Web page to that directory. Again, all images, and Web pages should appear in the same directory. We also suggest using all lower case characters for file names.

Having saved the document, you can now begin entering text on the page.

Entering Text on a Web Page

The steps to place text on a Web page are not that much different than the steps you would use to place text in a Microsoft Word document. The following list describes some special characteristics of placing text in a Web page with Dreamweaver:

  1. Enter the following text on the Index page you just created:

Virtual Tide Realty
Specialists in Kauai Real Estate
Please contact us at inquiry@vt.com

North Coast

Coconut Coast

Lihue Area

Piopu/Kapili Beaches

Virtual Tide Realty, Copyright 2003

Next, you will see how to copy information into Dreamweaver from another source (file). The descriptions of the properties are stored in a Microsoft Word document that you downloaded when you downloaded the other files necessary to complete this assignment. The name of the file is "properties.doc."

  1. Open the file named properties.doc in Microsoft Word.
  2. Copy and paste the descriptions between Word and Dreamweaver until you have a Web page that looks something like the one shown in Figure 3. Copy and paste operations work the same way in Dreamweaver as they do with any other program. You may have to hit the Enter key several times to properly space the text. Again, the goal of this assignment is not to create a page that looks exactly like the one shown in the Figure. Rather, your goal is to learn how to use Dreamweaver.

Figure 3: Unformatted text

At this point, all of the textual information appears on the Web page without any special formatting. The next set of tasks will help you format the page, add images, and add links.

Saving the Page

Before adding any additional formatting to the page, it should be saved. Again, save your work frequently.

  1. Click File, and then click Save from the Dreamweaver menu bar.

Formatting the Page

The steps to format a Web page with Dreamweaver are not that much different from the steps to format text in Microsoft Word. The text formatting buttons in the Property Inspector work almost the same way as those in Word. The following list describes how to apply various formatting attributes:

  1. Using the buttons on the Property Inspector, format the text so that it resembles Figure 4. Note that you will insert the images and the table in a moment.

 

Figure 4: Formatted text

Placing Images on the Page

The divider on the sample page is an image file. This image was downloaded from one of the "matched set" image sites on the Internet (http://www.erinet.com/jelane/families.thumb.html).

To place an image on the page, first position the cursor on the line where you wish the image to appear. We will insert the first divider bar under the heading so place the cursor on the third header line ("Please contact us ."). Clicking Insert from the main menu, and then clicking Image opens the Select Image Source dialog box, as shown in Figure 5. Select the desired image. Note that the image should be placed in the same folder as the Web Site that you are creating. Again, Figure 5 uses the root directory on the A:\ drive.

The divider image is named bar.gif and should have been copied to the diskette in the A: drive, as discussed previously in this document.

  1. On the menu bar, click Insert, and then click Image. In the Select Image Source dialog, locate and select the image named A:\bar.gif.
  2. Click OK to close the dialog box. The image is inserted into the document.

Figure 5: Select Image Source dialog

Notice that the image is enclosed in a rectangle. This means that it is the current object and its properties are displayed in the Property Inspector.

The Width (W) and Height (H) of the image (in pixels) is displayed in the upper-left part of the Property Inspector box. We want the bar to stretch across the entire page regardless of the screen characteristics of any specific computer. You may experiment with the height setting but leave it in pixels. Simply highlight the entry in the height box (H) and replace it with any number of pixels to set the height of the bar. You may go back and change the properties of any image by clicking on the image and then adjusting its properties in the Property Inspector box.

  1. Position the cursor on the Width attribute (W), highlight the entry and type in 100%. This means that the image will be displayed with a width of 100% of the browser window regardless of the actual image size.
  2. Press Enter a couple of times to insert some space below the separator bar image and repeat the steps above to enter the second separator bar.

Inserting a Table into the Web Page

Tables are frequently used in Web pages for a variety of reasons. Of course, data that needs to be displayed in rows and columns should be placed in a table. Tables are also used to place text next to images, display text in columns, or to insert information that is separated by blanks but is displayed on the same line. Typically, the size of tables is automatically adjusted to fit the size of the browser window.

We will use a table to hold the links to each of the location headings in the page. These links will be placed between the separator bars.

  1. Position the cursor above the separator bar (image) that you just created.
  2. Click the Insert menu item, and then click Table. This will cause the Insert Table dialog box to open. You must define how many rows and columns you want to appear in the table. In our case, we want one row and four columns (one for North Coast, Coconut Coast, etc.). Note that it is possible to change the number of rows and columns in a table after creating it.
  3. Position the cursor and highlight the entry in the Rows box and type in 1.
  4. Type a 4 into the Columns box.
  5. To make the table to spread across the entire width of the screen, enter 100% into the Width box and select Percent from the drop down box, immediately to its right. Alternatively, you can set the width of a table with an absolute number of pixels.
  6. Set the border width to 0 so that the border will not appear.
  7. Click OK to create the table.

The "Border" entry defines thickness of the border that separates each table element. A setting of "0" causes no border to appear. A setting of about "2" is normal if you want the border to be displayed. The "Cell Padding" entry defines the amount of space between the border for each table element and whatever information you type into that element. "Cell Spacing" defines the amount of space between table elements.

The table is surrounded by a thick line, which indicates that it is the current object selected on the page. Its properties are displayed in the Property Inspector . Notice you can change the border, cell padding, and cell spacing for a table using the Property Inspector.

  1. Move the cursor to the first element in the table and then click the left mouse button. Notice the table border is now shown as dotted lines. This is because we selected a border width of 0. If you selected any positive number, the table border will show as a solid line. We are now ready to enter information into the table.
  2. Type North Coast into the first entry and press the Tab key on your keyboard. This puts the typed information into the first table element and moves the cursor to the next one. Do not hit the Enter key on the keyboard unless you wish to enter more text into a specific table element. Pressing the Enter key will cause the selected cell to display its data on multiple lines.
  3. Now type Coconut Coast into the second element. After you have finished, position the cursor in the third element of the table and left-click the mouse.
  4. You may position the cursor in a table by either clicking on the desired element or using the Tab key on the keyboard. Now enter Lihue Area and Piopu/Kapili Beaches into the third and fourth elements of the table, respectively.

You may modify or delete a table by positioning the cursor on the upper left corner until the four-way arrow symbol appears and then double-clicking the left mouse button. The table is surrounded by a dark solid line. This indicates that the table is selected as the current object on the page. At this point, you may delete the table by pressing the "Delete" key on the keyboard, or modify its properties in the Property Inspector box. You may also adjust the width of the specific columns or the height of specific rows. Select the table by double-clicking on the upper left corner and slowly moving the cursor to the border between the first and second table element. When the opposite-facing arrows appear, hold down the left mouse button and drag the border either right or left. When you release the mouse button, the border has been moved to the new position.

Creating Links

There are three kinds of links on the sample Web page:

  1. Email link: This link will automatically bring up an email window on the Web page. The window displayed will depend on the default mailer configured on the system.
  2. External links: These links will display the other two Web pages that work with the Web page you are designing. One of these links will be to another page within your Web site. The second will be a link to a page on the Internet.
  3. Links to Named Anchors: These are links to another section of this Web page. Web pages automatically load and position the reader at the top of the page. If the Web page contains more data than will fit on the screen, it is handy to have a way for the reader to move quickly to another part of the page. This feature is handled through a "named anchor" link. You will create a named anchor at a part of the document where you want the reader to be able to go directly, and then link that named anchor to a table of contents.

In the following steps, you will create each type of link, in turn.

Each type of link is established in a similar way. You highlight the area (text or image) where you want to create a link, and then tell Dreamweaver the destination of the link. This destination can be an email link, an external link, or a link to a named anchor. Next, you will define the e-mail link.

  1. Highlight the part of the screen that says: inquiry@vt.com.
  2. Click on the Link box in the Property Inspector.
  3. Type in the word mailto: followed by your email address (be sure to include the colon). For example, I would type "mailto:ekedahl@ix.netcom.com."
  4. After pressing the Enter key, you should now have a highlighted email link. That is, the email link appears underlined.

To create an external link, highlight the words that you want to activate the link. These words will appear underlined in the browser indicating that the text (or image) represents a link. Then, in the Property Inspector, select the Link box, and then type the name of the path or Web page that forms the link.

  1. On this sample Web page, highlight the word Kauai in the second heading line.
  2. Click on the Link box in the Property Inspector.
  3. At this point, you can type in the name and path of the Web page where you want to link, or you can click on the folder icon to the right of the "Link" box to "browse" to locate the page to which you want to link. The correct page for the link should be located on the a:\ drive, and is named kauai.html. Again, be sure to use lower case characters for the file name so that the link will work correctly after it has been uploaded to the Web server.

The process to create a link to the Web is almost identical to creating any other link. Simply select the text that will form the link, and then enter the name of the hyperlink in the Link box

  1. On the sample Web page, enter the text Visit Hawaii.com just below the separator bar.
  2. Select the text you just entered.
  3. In the Properties Inspector, enter the text http://www.hawaii.com to create the link.

You can also use an image as a link. Simply click on the image to select it as the current object. You may now enter the file to link to in the Link box in the Property Inspector just as you did in the prior examples.

Last, you will create named anchor links within the Web page. The table at the top of the page should allow the reader to go directly to the desired geographic area for real estate listings.

  1. Position the cursor at the point where you want to create an anchor. For example, scroll down through the Web page until you get to the property listings for North Coast. Click to the left of the text that says North  Coast (not in the table - in the actual area of the page for North  Coast property listings).
  2. Click the Insert menu, and then the Named Anchor menu item. The Named Anchor dialog will appear.
  3. You must name the anchor point. Type NorthCoast into the Anchor Name entry in the dialog, and then click OK button to create the named anchor. An anchor icon will appear to the left of the named anchor. As a general rule, do not include embedded blanks in the name.
  4. Create the link to the named anchor. With the mouse, highlight the text North  Coast in the table at the top of the page (this should be between the separator bars).
  5. Click on the Link box in the Property Inspector dialog and type the number sign (#) and the name that you assigned to the anchor that you just inserted into your page. In this example you should enter #NorthCoast in the Link box. When a visitor to your Web site clicks on the " North Coast" link in the table at the top of your page, the browser will immediately move to the North Coast listing in the page.
  6. Use the same process to create named anchor links for each of the geographic areas served by Virtual Tide Realty. You may name each anchor anything you wish but it is a good idea to pick highly descriptive names. Remember not to use embedded blanks in the anchor name.

Testing the Web Site

Make sure you save your Web page. You can test your page even though it isn't on a Web server accessible to the rest of the world. To test out your page, double click on the index.html page that you created to execute the Web browser available on your workstation (probably Netscape or Internet Explorer). Check out the formatting and see if you like it. Try out the links and see if they work. Go back to Dreamweaver if you want to do modifications - remember you can't modify your pages in a Web browser. Remember that you must save the file after any changes and click on the "Reload" button in the browser to view the changes.

F12 also works to test your page.