Lesson 2: Design the structure of the Web site

This lesson demonstrates how to design the hierarchy of the Web site.

Web pages contain content, such as HTML elements, images, and links; however, a Web site is more than just a collection of Web pages. A Web site is the hierarchical design and organization of how the Web pages fit together. A Web site should have a high-level goal (such as providing an organized collection area for classified listings), and each Web page should serve a specific purpose in meeting that goal (for example, a page that searches through the listings).

When designing a Web site, you should consider what functions the site should support to achieve the overall goal. For a Classified Web site, there are several functions that you want the site to perform. For example, you probably want site visitors to be able to search the listings as well as create and edit new listings.

To make a Web site that performs these functions, we will plan four pages in this exercise:

A home page that shows all of the classified ads
A page that adds a new classified ad
A page that changes or deletes an ad
A page that shows search results by filtering the ads by category.

You will create the pages in the next lesson.

In the Enterprise Explorer view, expand ClassifiedsTutorial.
Double-click Web Site Navigation in the Enterprise Explorer view. Web Site Navigation opens to the Navigation pane. With this tool, you can add, delete, and rearrange the Web pages that compose the Web site.
At first, there are no page icons displayed in the Navigation tab. Typically, the first page that you consider when designing your Web site is the top page, or the home page of the site. This is the page where visitors enter your Web site. Drag the New Page component from the Palette view and drop it onto the Navigation pane. A page icon displays with the navigation title of the page in focus.
This page will be the home page that displays all of the ads on the database. Type View All Classifieds for the navigation title of the page. Later you will learn how the navigation title is used as the page label for site navigation purposes.
For site visitors to post their own listings, they need a page for creating new listings. Add a second page icon by right clicking on the View All Classifieds page icon and selecting Add > New Page > As Child
Name the new page Post a Listing. Notice that the new page icon is displayed beneath the View All Classifieds page icon and connected with a line. This means that Post a Listing and View All Classifieds have a parent-child relationship.
You also need a page where visitors can edit or delete existing listings. For example, if a visitor has added a listing for a bicycle and it has been posted for a long period of time with no response, the seller might want to lower the asking price. Add another page icon as a child of View All Classifieds and name it Update Listing. Notice that this new page icon is a sibling of Post a Listing, and another child of View All Classifieds.
Next, your Web site needs a search function to enable visitors to search for existing listings. To add a page for displaying search results, create another page icon as a child of View All Classifieds and name it Filtered Listings. If you accidentally place a page in the wrong place, or if you want to reorder your page structure, you can drag the page icons at any time to rearrange your site.
Press Ctrl+S to save your site design. The Navigation pane should look like this:

Notice that there is a row of small icons across the bottom of each page icon. The first icon, which is not yet visible, represents actual files associated with the icon and will appear after those files are created. If you create a JSP file, the icon is a blue diamond ( diamond icon ); if you create an HTML file, the icon is a set of brackets ( bracket icon ). The second ( arrow icon ) and third icons ( included graphics ) are visible, indicating that by default, all of the pages are set to appear in navigation and in site maps respectively. The fourth icon ( nonav icon ), which is not yet visible, displays when you have associated a page icon with an actual file that file does not contain any Web site navigation. The icon ( navroot icon ), which is not yet visible at the top of the page icon represents the navigation root. You will learn more about these icons as you work through this tutorial.