This lesson demonstrates how to design the structure 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 on the database.
- A page that adds a new classified ad to the database.
- A page that changes or deletes an ad currently on the database.
- A page that shows search results by filtering the ads by category.
We will create the pages themselves in the next exercise.
- In the Project Explorer view, expand ClassifiedsTutorial.
- Double-click Web Site Navigation in the Project Explorer view.
Web Site Designer opens to the Navigation view. 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 view. 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 view. 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
- 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 Classifides 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. Note: 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 view 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, diplays 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 and the other facets of the page icon display
as you work through this module.
Now that you have created your general
Web site structure, you can start the next lesson by clicking on Next.