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.
  1. 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.

     

  2. 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.


  3. 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.



  4. 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.


  5. 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


<?xml
version=1.0
encoding=utf-8 ?>

<siteMap
xmlns=http://schemas.microsoft.com/AspNet/SiteMap-File-1.0 >

<siteMapNode
url=“”
title=“”
description=“”>

<siteMapNode
url=“”
title=“”
description=“” />

<siteMapNode
url=“”
title=“”
description=“” />

</siteMapNode>

</siteMap>

 

Modify above code accordingly , like below.

 

 

<?xml
version=1.0
encoding=utf-8 ?>

<siteMap
xmlns=http://schemas.microsoft.com/AspNet/SiteMap-File-1.0 >

<siteMapNode
url=Home.aspx
title=HOME
description=This is My Home>

<siteMapNode
url=Right.aspx
title=Right Rotation
description=This is Right Window />

<siteMapNode
url=Left.aspx
title=Left Rotation
description=This is Left Window />

<siteMapNode
url=Center.aspx
title=Center Rotation
description=This is Center Window />

</siteMapNode>

</siteMap>

In above code all pages are being added to siteMapNode.

 

  1. Click on Home.Aspx in Solution explorer. Sleect design view . Drag menu from ToolBox and drop it on the Home.aspx page.
  2. 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.



  1. Now add few images in site. Right click on Project . click add existing item. Then browse to add four images in the project.
  2. Drag a Image Control on Left.aspx , Right.aspx, center.aspx and Home.aspx.
  3. Select property of Image Control. Click on Image Url then select any image .


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



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com