- Both the Design view and Source view can be used - HTML code can be edited directly.
- Here is sample solution:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MasterPages_SiteNavigation.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel1" runat="server" BackColor="Maroon" Width="100%">
<table width="100%">
<tr>
<td>
<a href="http://www.mini.pw.edu.pl">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/mini_logo.gif" />
</a>
</td>
<td style="width: 90%">
<div style="text-align: center">
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="tahoma" ForeColor="White"
Text="My Great Web Site"></asp:Label>
</div>
</td>
<td>
<a href="http://www.pw.edu.pl">
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/pw_logo.gif" />
</a>
</td>
</tr>
</table>
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:Panel ID="Panel2" runat="server" BackColor="Maroon" Width="100%">
<table width="100%">
<tr>
<td style="width: 100%">
<div style="text-align: center">
<asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="tahoma" ForeColor="White"
Text="Copyright \u169 ? 2008"></asp:Label>
</div>
</td>
</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>
- Set the MasterPageFile property.
- In the Design or Split view mode error message
appears:
- Remove all the selected markup code:
- Right click on the ContentPlaceHolder1(Master) place
and choose the Create Custom Content option.
- Something can be added to the Default.aspx page now,
e.g. a text:
- Compile your project and run it in the browser. See
an error:
This is an parser error, i.e. error generated in case of problems with parsing .aspx file. It clearly explains, that the 3rd line in the Default.aspx line should be removed.
Remove the 3rd line from the Default.aspx file and run the page again:
- about.aspx, president.aspx, vicepresident.aspx, keyaccountmanager.aspx, callcenter.aspx, clients.aspx
- Add content to these pages. e.g. for the about.aspx page:<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeFile="about.aspx.cs" Inherits="about" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/about.jpg" /><br />
<strong><span style="font-size: 24pt">Super Company</span></strong><br />
The greatest company all around the world.
</asp:Content>
- Make the Web site navigable:
- Add a Site Map to the project
- Modify the created Web.sitemap file to adapt to site's content:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="default.aspx" title="Home" description="The beginning">
<siteMapNode url="about.aspx" title="About us" description="Short information about the company">
<siteMapNode url="president.aspx" title="The President" description="Our great president" />
<siteMapNode url="vicepresident.aspx" title="The Vice-President" description="Very clever vice-president" />
<siteMapNode url="keyaccountmanager.aspx" title="Key Account Managers" description="Key account managers" />
<siteMapNode url="callcenter.aspx" title="Call Center" description="Call Center Department" />
</siteMapNode>
<siteMapNode url="clients.aspx" title="Clients" description="Our clients" />
</siteMapNode>
</siteMap> - Add navigational controls to the master page:
- Add the SiteMapDataSource control (from the Data group on the Toolbox). It will serve the navigation data of the site for all controls using it.
- Add the SiteMapPath control (from the Navigation group in the Toolbox). It should start working automatically, taking all necessary data from the Web.sitemap file.
- Add the TreeView control (from the Navigation group). Set the DataSourceID property to SiteMapDataSource1 (note, that you can see your site map in the Design view).
- Use 'Auto Format' option (available at the
'>' small button on the selected control) for
better look.<table cellpadding="5">
<tr>
<td colspan="2">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana"
Font-Size="0.8em" PathSeparator=" : ">
<PathSeparatorStyle Font-Bold="True" ForeColor="#990000" />
<CurrentNodeStyle ForeColor="#333333" />
<NodeStyle Font-Bold="True" ForeColor="#990000" />
<RootNodeStyle Font-Bold="True" ForeColor="#FF8000" />
</asp:SiteMapPath>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ImageSet="Arrows">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD"
HorizontalPadding="0px" VerticalPadding="0px" />
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
</td>
<td style="vertical-align: top;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
- Compile and run the project. Your users have two possibilities to navigate on
your great Web site.
- Add a Site Map to the project