Publications > Dateline Houston > March 2004 > Feature Article

Volume 43, Issue 5

March 2004

Using Dreamweaver for Web Page Updates

by Jeff Staples, Information Developer, Kitba Consulting

You have just inherited a Web site that contains outdated information. Your boss wants the information updated as soon as possible. You are familiar with HTML but don't want to update all the pages manually.

Recently, I found myself in a similar situation. To enhance my Web development skills, I took on the Web duties for my local STC chapter. After
I initially updated the HTML files manually, a colleague recommended Dreamweaver.

This article describes how to use

• Dreamweaver to create a test environment for your development activities
• typical Dreamweaver procedures to get started with your Web development activities

Leaving Manual Updating Behind

Manually updating HTML code is not hard, and it worked well initially. However, manual updates can be time consuming, especially if you are responsible for a large Web site.

Inadvertent changes often occurred when I saved the HTML files. For example, the formatting of a header might change, or the HTML code became a jumbled mess. I couldn't determine what was causing these changes. (The jumbled code did not affect the output of the file, but it did make the code more difficult to read.)

Dreamweaver makes updating text as simple as cut and paste. In addition, you no longer have to scroll or search through endless lines of code to find the information that you want to update.

Creating a Local Website

You can get started by using Dreamweaver to create a local (offline) copy of your remote (online) Web site. By having a copy of your Web site files on your hard drive or network, you have a test environment for making updates without affecting your remote site. Then once you are satisfied with the updated files, you can move the files to your remote site. The local site provides a backup of all files on your remote Web site.

Tip: Make a backup copy of the entire local site. This backup copy might come in handy if the files on your local or remote sites become lost or damaged.

Before you begin, assemble the following information:

• Access information—the host name, logon name, and password for accessing the server where your remote Web site files are stored. This information should be supplied to you by the Internet Service Provider (ISP) that hosts your Web site or the person who previously handled Web duties.
• Directory location—the location where you store local Web site files.

To create your local Web site, perform the following steps:

1. From the toolbar on the main Dreamweaver window, click Site > New Site. Dreamweaver displays the Site Definition dialog box (Figure 1). The Local Info pane is displayed by default.
2. Enter the name and directory location of your local site and the URL address of your remote Web site.
3. From the Category list, select Web Server Info. The Web Server Info pane is displayed (Figure 2).
4. From the Server Access pull-down menu, click FTP to display the FTP-related fields.
5. Enter the access information that Dreamweaver will use to access the server that hosts your remote Web site. Click OK. Dreamweaver creates a local version of your remote Web site.

Updating a Web Page

Now that you have created your local Web site, you are ready to beginupdating files. Dreamweaver offers a multitude of capabilities to help you update and enhance your site. Some tasks, such as updating text, may require only a simple cut and paste.

The following section describes tasks that you will perform often: updating embedded links and referencing text through embedded tags.

Updating Embedded Links

Your Web pages will contain embedded links such as URL and e-mail addresses. Because these addresses often change, you will probably update embedded links on a regular basis.

To update an embedded link, perform the following steps:

1. From the Dreamweaver toolbar, click File > Open to open your file.
2. Place your cursor on the text with the link that you want to update and right click.
3. From the pop-up menu, select Edit Tag. The HTML code for the link is displayed (Figure 3).
4. With the link highlighted (as shown in Figure 3), press Delete. The link is removed (Figure 4).
5. Type the correct URL (Figure 5) and press Enter. The Edit Tag box is closed, and the new URL is saved.

Removing Text without Deleting

While updating text, you may find information that you no longer need but want to keep for reference or later use. Converting the information into a comment will keep the information in the file but prevent its display to users.

To convert existing text into a comment, perform the following steps:

1. Highlight the text that you want to convert and click Edit > Cut.
2. Place your cursor where you want the comment text and click Insert > Comment.
3. In the Comment pop-up box, right-click and select Paste. Click OK. The text is still visible to you but will not be seen after the file is posted to your remote site and accessed by users.

Referencing Text through Embedded Tags

To save your users from having to scroll through large volumes of text to find the detailed explanation of a bulleted item, you can embed a tag to link the detailed text to the bullet. Dreamweaver provides the Anchor option to implement this functionality.

To implement embedded tag (anchor) links, perform the following steps:

1. Place your cursor where you want the bullet list and click Text > List > Unordered List. Type the text for the first bullet and press Enter. Repeat for each bullet in your list.
2. Place your cursor where the expanded text that is associated with the first bullet will start and select Insert > Named Anchor.
3. In the Anchor Name pop-up box, type a name for the anchor. For example, bullet1 (Figure 6).
4. Return to the bullet list and place your cursor on the text of the first bullet. Right-click and select Edit Tag.
5. Repeat Steps 2 through 5 for each bullet text and its expanded text.

ETip: You should also give the user the option to return to the bullet list after viewing the text for a particular bullet topic. To do so, place an anchor at the top of the page (or at your bullet list) and then add text (such as Back to Top or Back to Bullet List) at the bottom of each text block and make it a link to the anchor at the top of the page (or to your bullet list).

Previewing an Updated Page

Once you have updated a file, Dreamweaver gives you the option of checking the updates with the Preview option. With Preview, you can see what the page will look like to your users.

From the Dreamweaver toolbar, click File > Preview in Browser > (your browser). If you are using Microsoft Internet Explorer, you will see iexplore . Dreamweaver displays the file (Web page), and you can check whether all the information is correct. If more updates are required, close the browser. Your file is still open in Dreamweaver, and you can continue making updates. You can preview the file as needed.

Uploading Files to Your Remote Website

After making updates to files on your local site, you will need to upload the files to your remote site so that your users can view the updated information. You can use the following Dreamweaver functions (on the site toolbar shown in Figure 8) to move files between the local and remote sites:

• Connect—Executes your access information (as shown in Figure 2), giving you access to the files on the remote site.
• Get—Copies a file from the remote site to the local site.
• Put—Copies a file from the local site to the remote site.

Advancing Your Dreamweaver Skills

This article has presented some basic tasks that will help you to start updating your Web site. However, Dreamweaver has much more to offer.

As you become familiar with the software, you can enhance your Web site with features such as interactive forms for collecting data and behaviors for implementing actions such as causing a pop-up window to display when the user moves the mouse pointer over a specific link. These capabilities and more will help you bring more viability to your Web site and will enhance your Web development skills.