We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

What you will need for this tutorial

• Microsoft Visual Studio 2010 or Microsoft Visual Web Developer 2010 Express
• A computer with an internet connection and Microsoft Windows 7 operating system
• A basic understanding of the web and some programing experience would be helpful

Topics that will be covered

• Creating basic web pages to navigate using the web form method
• Creating a navigation system to form a structured website using an XML document

Download the project source for this tutorial

Creating Basic Web Pages to Navigate

This tutorial will walk you through building simple website pages a navigation structure. We will also create a basic navigation system by creating a sitemap for the navigation structure.

1. Open Visual Web Developer 2010 and in the file menu select the new website option from the dropdown menu or on the start page.


2. When the new website dialogue box appears, select installed templates and then select visual C# from the dropdown list to set the programing language.


3. Select Empty ASP.NET Website from the list in the center. This will start your project without the default webpage.


4. In the Web location box, select the browse option and navigate to the folder location where you want to save the files to your project. For now, leave the name of the website as its default name (Example: Website1).


5. Click OK and Visual Web developer will generate the project.


6. In the solution explorer, right click the name of the website (Example:C:\…\...website1) and select Add New Item from the list.


7. When the Add New Item display opens, select Web Form from the installed templates list.


8. In the name box type Home.aspx and make sure the “place code in separate file” box is checked, and the “select master page” box is unchecked.


9. Click Add.


10. For our website, we are going to need 6 more pages. Repeat steps 1 through 4 six more times for the following pages; About.aspx, History.aspx, Products.aspx, Services.aspx, Staff.aspx, and Support.aspx.


11. Select the Home.aspx page and be sure you are in source view. In source view, place the curser in between the pre-formatted Div tags and type the code: <h1>This is the Home Page</h1>. This will apply a heading to the page so it is visible in the browser. The code should look like the code in the image below:

      

12. Now repeat step 7 and apply the same heading to the rest of the pages using the same name as the page name (Example: This is the Products Page).

Now that we have all of these functional pages, we need to create a navigational structure to tie all of the pages together.

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

Creating a navigation System to form a Structured Website Using a Sitemap

1. First, we want to create a Sitemap file for the entire website. This is an alternative and faster way to bind the controls to a single file. In the solution explorer, right click the name of the website and select Add New Item from the list.
2. Select Site Map from the installed templates menu, leave the name as default (Web1.aspx) and click Add.
3. When the page opens in source view, copy and paste the following text into the code overwriting the default sitemap code on the page:



<siteMap>
<siteMapNode title="Home" description="Home" url="~/home.aspx" >
<siteMapNode title="About" description="About Us"
url="~/About.aspx">
<siteMapNode title="History"
description="The History of our Company"
url="~/History.aspx" />
<siteMapNode title="Staff"
description="Our Staff"
url="~/Staff.aspx" />
</siteMapNode>
<siteMapNode title="Services" description="Services we offer"
url="~/Services.aspx">
<siteMapNode title="Products" description="Our Products"
url="~/Products.aspx" />
<siteMapNode title="Support" description="Support"
url="~/Support.aspx" />
</siteMapNode>
</siteMapNode>
</siteMap>





It is important to point out how this XML document is structured. The SiteMapNode property is the same for each page. The only element that is different is how they are nested in the document. The way the SiteMapNodes are nested will determine their place in the navigational structure of the website.



4. Now that we have a structure to our navigation system, we will create the SiteMapDataSource page method and the menu system. Select the home page and switch to design view. Under the Data list in the Toolbox, select the SiteMapDataSource item and drag it into the page under the heading.


5. Repeat step 1 for the rest of the pages.



The SitMapDataSource will automatically bind the menu on the page to the XML document you created! There are three different types of navigation menus available in the toolbox; TreeView, Menu, and SiteMapPath. For this tutorial we will explore the TreeView control.



6. Return to the Home.aspx page and make sure you are in design view.


7. Under the navigation list in the Toolbox click on the TreeView control and drag it into the page under the SiteMapDataSource object.


8. When you place your mouse pointer over the TreeView menu on the page you will see a small box with an arrow in it. Click on the box to open the TreeView tasks menu.


9. In the dropdown menu next to “Choose Data Source”, select SiteMapDataSource1.



This will bind the TreeView control to the SiteMapDataSource control you previously placed on the page.



10. Repeat steps 3 through 6 for the other pages in the site.


11. Right click on the Home.aspx page and select Set As Start Page.


12. Run or debug the application.

That’s all there is to it! Now you have a functional menu structure for your website. This is a very simple example but you should have a firm understanding of how to incorporate a menu into a website using the Data Binding method with an XML document.

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.