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.
- 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 (
); if you create an HTML file, the icon is
a set of brackets (
). The second (
) and third icons (
) are visible, indicating that by default, all of the
pages are set to appear in navigation and in site maps respectively. The fourth
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 (
), 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.