Lab Working With Site Navigation
In this lab, you create a Web application using frames. The top frame contains a title for your Web application and a SiteMapPath control. The left frame contains a Tree-View control for navigation. Clicking any node on the TreeView or SiteMapPath controls cause the main frame to load the desired page.
► Exercise 1: Create the Web Application Project and Its Frames
In this exercise, you create the Web application project. You also configure Default.aspx to be a frames page and add the top and left frames.
1. Open Visual Studio 2005 and create a new Web Application project called Work-ingWithSiteNavigation using your preferred programming language.
The new project will create a Web page called Default.aspx, which will be configured to be the frames page for the Web application.
2. Configure the Default.aspx page to have a top frame, a left frame, and a main frame. Remove the code-behind page as well. Your Default.aspx should look like the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/htm14/frameset.dtd"> <htm1 xm1ns="http://www.w3.org/1999/xhtm1"> <head id="Head1" runat="server">
<tit1e>Frame Page</tit1e> </head>
frame src="Tit1ePage.aspx"> frameset co1s="20%, 80%">
frame src="MenuPage.aspx" > frame src="MainPage.aspx" name="MainFrame"> </frameset> <noframes>
This is a frames page.
3. Add a new Web page called TitlePage.aspx for the top frame.
4. On the TitlePage.aspx page, add a textual title called Working With Site Navigation. Set the font size for the title to xx-large and center the title text.
5. Add a new Web page called MenuPage.aspx for the left frame.
6. On the MenuPage.aspx page, add a TreeView control.
7. Select the TreeView control and click the symbol in the upper-right corner of the control to reveal the TreeView Tasks window. Click the drop-down list for the Choose Data Source option and click New Data Source. Click Site Map as the data source and click OK.
8. In the Source View window, locate the <head> element and add the following directive to specify that the hyperlinks use the MainFrame as their target window:
<base target="MainFrame"/>
9. Add a Site Map to the Web application by right-clicking the Web application in the Solution Explorer and clicking Add New Item. Click Site Map, keep the default file name of Web.sitemap, and click Add.
10. Change the Web.sitemap file to look like the following:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/MainPage.aspx" title="Main Page" description="This is the main page."> <siteMapNode url="~/Support.aspx" title="Support Page" description="The support page." > <siteMapNode url="~/Faqs.aspx" title="FAQs Page"
description="The frequently asked questions page." /> </siteMapNode>
<siteMapNode url="~/Products.aspx" title="Products Page" description="The products page." /> </siteMapNode>
11. Add the following Web pages to the Web application: MainPage.aspx, Support.aspx, Faqs.aspx, and Products.aspx. On each of these pages, add a SiteMapPath control.
12. Build the Web application project.
► Exercise 2: Test the Site Navigation
In this exercise, you test the site navigation on the Web application.
1. Continue with the project from the previous exercise, or open the completed Lesson 2, Exercise 1 project from the CD.
2. Right-click the Default.aspx page, and select Start As Start Page.
3. Test the Web application by pressing F5 to display the Default.aspx frame page. You should see the frames page, as shown in Figure 6-5.
|
Frame Page - Microsoft Internet Explorer |
^lnijsi | |
|
1 File Edit View Favorites Tools Help |
II * | |
|
Qßack • J ' 0 1 |
'■ii P Search •.'.'? Favorites T 0 " | |
Post a comment