Navigation Web Site1. 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.
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
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.
Drag a Image Control
on Left.aspx , Right.aspx, center.aspx and Home.aspx.
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.