Adding Web Pages, Links, and Images (Adobe Dreamweaver CS5) Part 1

Introduction

The majority of Web sites consist of several pages with links between the pages. The pages in a site generally are linked and contain shared attributes, such as related topics, a similar design, or a shared purpose. Dreamweaver contains a site structure feature that provides a way to maintain and organize your files within a site. Most Web site developers also enhance a Web site by including images on their Web pages.

Project — Two New Pages, Links, and Images

When creating a Web site, you should follow a standard format or style for all pages contained within the site. The content, which is the information provided on the Web site, should be engaging, relevant, and appropriate to the audience. Accessibility issues should be addressed when developing the site. Experience level of the users, the types of tasks that will be performed on the site, and required connection speeds are important components.

In this topic, you continue building the Montana Parks Web site. You create two additional Web pages, add image backgrounds to the two new pages, add images to the two new pages and to the index page, add links to and from the index page, and add absolute links to the national preserves and historic sites highlighted in the two new pages.

Each new page contains a link to the home (index) page, and the index page contains links to each new page. This arrangement presents the information to the users in a logical order, making it easy to always return to the home page from any point within the Web site. The two new pages and the home page also follow Web site design guidelines that address accessibility principles (Figures 2-1a, 2-1b, and 2-1c on the next page).


Figure 2-1

Figure 2-1

Overview

As you read this topic, you will learn how to add pages to the Montana Parks Web site to create and modify the documents shown in Figure 2-1 and how to use Dreamweaver to perform the following tasks:

•    Copy data files to the Web site folder.

•    Add pages to a Web site.

•    Use Dreamweaver’s image accessibility features.

•    Insert, resize, and align images within a Web page.

•    Create relative, absolute, and e-mail links.

•    Edit, change color, and delete links.

•    Check spelling.

•    Use Live view.

•    Display a page in Code view.

General Project Guidelines

When creating a Web site, the organization of the site and how different users will approach the site is of paramount importance. Most Web sites have a home page or index page, but that does not necessarily mean that all visitors enter the Web site through the home page. Generally, with most Web sites, considering that the visitor has a Web page address, they can enter the site at any point. As you modify the home page and add the pages shown in Figures 2-1a, b, and c, you should follow these guidelines.

1.    Organize your content. Create and organize the content for the two new pages.

2.    Identify links. Consider the content of each new page and how it will link to and from the home page.

3.    Include standard links for navigation. Visitors to your Web site will use links to navigate the site, and expect to find links to the home page and to main topics. They also expect descriptive links and links for sending e-mail to someone in charge of the Web site.

4.    Prepare images. Acquire and then organize your images within the Assets panel. Determine which one goes with which Web page.

5.    Consider image placement. Consider where you will place the images on each of the pages. Determine how much vertical and horizontal space to designate around the image.

6.    Resize images as necessary. Review each of the images regarding size and determine which ones, if any, need to be resized.

7.    Consider accessibility. Consider accessibility issues, how they can be addressed, and which ones you need to address within the Web site.

8.    Verify browser viewing. Use your browser to verify that the page is displayed appropriately and that the links work.

9.    Proofread and check spelling. Proofread each page and check the spelling.

With a good understanding of the requirements, and an understanding of the necessary decisions and planning process, the next step is to copy the data files to the parks Web site.

Copying Data Files to the Local Web Site

See the inside back cover of this topic for instructions for downloading the data files, or see your instructor for information about accessing the files required for this topic.

The folder containing the data files for this topic is stored on Removable Disk (H:). The location on your computer may be different. If necessary, verify the location of the data files folder with your instructor.

To Copy Data Files to the Parks Web Site

The following steps show how to copy the files to the parks local root folder using Windows Computer. Before you start enhancing and adding to your Web site, you need to copy the data files into the site’s folder hierarchy.

Click the Start button on the Windows taskbar and then click Computer to display the Computer window.

Click the clark01 image file, or the first file in the list, hold down the SHIFT key, and then click the montana_map image file, or the last file in the list.

Right-click the selected files to display the context menu, click the Copy command, and then navigate to the your name folder, which contains the folders and files for the Montana Parks Web site.

Double-click the your name folder, double-click the parks folder, and then double-click the images folder.

Right-click anywhere in the open window to display the context menu, and then click the Paste command to copy the images into the Montana Parks Web site images folder. Verify that the folder now contains seven images, including the parks_bkg image (Figure 2-2).

Figure 2-2

Figure 2-2

Starting Dreamweaver and Opening a Web Site

Each time you start Dreamweaver, it opens to the last site displayed when you closed the program. You might therefore need to open the parks Web site. Clicking the Site pop-up menu button on the Files panel lists the sites you have defined. When you open the site, a list of pages and subfolders within the site is displayed.

To Start Dreamweaver and Open the Montana Parks Web Site

The following steps illustrate how to start Dreamweaver and open the Montana Parks Web site.

tmpdf00-2

Figure 2-3

1

•    Click the Start button on the Windows taskbar.

•    Click Adobe Dreamweaver CS5 on the Start menu or point to All Programs on the Start menu, and then click Adobe Dreamweaver CS5 on the All Programs list to start Dreamweaver.

•    If necessary, display the panel groups.

• If the Montana Parks hierarchy is not displayed, click the Site pop-up menu button in the Files panel to display the drives on your computer and Web sites created with Dreamweaver (Figure 2-3).

Q&A

My Dreamweaver window appears in a different size from the one shown in Figure 2-3. Is that a problem?

No. Make sure your Dreamweaver window is maximized. The figures in this topic show the Dreamweaver window using a 1024 x 768 resolution. The window might still appear in a different size depending on the type of monitor you are using.

Figure 2-4

Figure 2-4

2

• Click Montana Parks to display the Montana Parks Web site hierarchy (Figure 2-4).

Q&A

What type of Web O structure does this top use for the Montana Parks Web pages?

The Introduction topic illustrates four types of Web structures: linear, hierarchical, web (or random), and grid. This topic uses a hierarchical structure. The index page is the home page, or entrance to the Web site. From this page, the visitor to this site can link to a page about Montana National Parks and Preserves or to a page about the Lewis and Clark National Historical Trail.

My Files panel is open, but the Montana Parks files are not displayed. How can I display them? o3

Refresh the Files panel. To do so, click the Refresh button on the Files panel toolbar or press the F5 key.

Managing a Web Site

Organization is a key element of Web design. Dreamweaver works best with entire sites rather than individual Web pages and has many built-in tools, such as checking links and organizing files, to make site creation easy. You can add pages to your site by creating a new page and saving it as part of the site, or by opening an existing page from another source and saving it as part of the site. In this topic, you will create two new pages.

Almost all Web sites have a home page. Compare the home page to your front door. Generally, the front door is the first thing guests see when they visit you. The same applies to a Web site’s home page. When someone visits a Web site, he or she usually enters through the home page.

The home page normally is named index.htm or index.html. Recall that this file name has special significance. Most Web servers recognize index.htm (or index.html) as the default home page and automatically display this page without requiring that the user type the full Uniform Resource Locator (URL), or Web address. For example, if you type nps.gov into a Web browser’s Address box to access the National Park Services Web site, what you see is http://www.nps.gov/index.htm — the actual file name of the site’s home page — even though you did not type it that way.

Organizing your Web site and using Dreamweaver’s site management features can assure you that the media within your Web page will be displayed correctly. Bringing all of these elements together will start you on your way to becoming a successful Web site developer.

Next post:

Previous post: