Navigation Web Site


1.  Create a website project. Make it a file system based web site.

2.  In the File menu , choose either WebSite. Select ASP.Net Web Site in the Templates pane.



3.  Change the Name to NavigationSite and click OK.

4.  Delete Default page from the application. Why we are deleting Default page because it would be easier to implement master page.

To remove the page, select it from Solution Explorer and press the DELETE key. Visual studio will ask for confirmation, press YES.

5.  Create a Master page for the Web Site. Click the right mouse button on the Project node to solution and select Add New Item. Choose Master Page from the template. Keep default name. Click ADD.



6.  Add Several Pages Based on the Master Page.  I am going to add four pages here.
  Default
  Right
  Left
  Center
  Home
To add a page, click right mouse button on Project and select Add New Item. Choose Web Page from template. Make sure one thing the Select Master Page check box in checked as you select in the template. By doing this Master page will get apply automatically on each page.
After clicking add button, new dialog box will appear, select Master Page and click Ok there.
While adding page give name as Center.aspx, Right.aspx, Left.aspx and Home.aspx.






7.  Add a New Site Map to the Project. Click the right mouse button on the project in solution explorer . Select Site Map from the template. Keep the name Web.sitemap as it is. This is default  name for Site map.



8.  Write  code for Site Map. To write code for Site Map click on Web.sitemap in solution explorer. Code window will open for Web.sitemap.  By default  below code will appear

Modify above code accordingly , like below.

In above code  all pages are being added to siteMapNode.

9.  Click on Home.Aspx  in Solution explorer. Sleect design view . Drag menu from ToolBox and drop it on the Home.aspx page.

10.  Click on arrow button of menu or select its property . Click on Choose Data source then select New Data Source. After new Data source select SiteMap and press ok.



 


11.   Now add few images in site. Right click on Project . click add existing item. Then browse to add four images in the project.

12.  Drag a Image Control on Left.aspx , Right.aspx, center.aspx and Home.aspx.

13.  Select  property of Image Control. Click on Image Url then select any image .



14.  After adding image run the Project or browse the website in browser. Output will come like below.