</namespaces>
</pages>
If you’re using C#, you’ll need to add the pages element to the system.web ele-
ment yourself:
File: Web.config (excerpt)
<system.web>
⋮
<pages theme="Blue" />
⋮
</system.web>
Building the Master Page
This is where the real fun begins! All of the pages in Dorknozzle have a common
structure, with the same header on the top, and the same menu on the left, so it
makes sense to build a master page. With this master page in place, we’ll be able
to create pages for the site by writing only the content that makes them different,
rather than writing the header and the menu afresh for each page.
Figure 5.38. Creating a new master page
Right-click again on the root node in Solution Explorer and select Add New Item….
There, select the Master Page template from the list of available templates, and
name it Dorknozzle.master. Choose the language you want to program the
master page in from the Language drop-down list, and check the Place code in a
195
Building the Master Page
separate file checkbox, as illustrated in Figure 5.38. This latter option will instruct
Visual Web Developer to generate a code-behind file for the master page.
After you click the Add button, Visual Web Developer creates the new master
page, which will appear immediately in Solution Explorer. If you expand its node
as shown in Figure 5.39, you’ll see its code-behind file listed as a child node.
Figure 5.39. The code-behind file appearing as a child of its form
Double-click the Dorknozzle.master file (not its code-behind file) in Solution
Explorer, and you’ll find that Visual Web Developer has given you a very simple
default master page. Edit the markup inside the body element as shown below:
File: Dorknozzle.master (excerpt)
<body>
<form id="form1" runat="server">
<!-- Header -->
<div class="Header">
<asp:Image id="Image1" runat="server"
ImageUrl="~/Images/header.gif" Width="450" Height="174"
AlternateText="The Official Dorknozzle Company
Intranet" />
</div>
<!-- Menu -->
<div class="Menu">
<asp:SiteMapDataSource id="dorknozzleSiteMap" runat="server"
ShowStartingNode="false" />
<asp:Menu id="dorknozzleMenu" runat="server"
DataSourceID="dorknozzleSiteMap">
<StaticItemTemplate>
<img src="Images/book_closed.gif" alt="+"
width="16" height="16" style="border-width: 0;" />
<%# Eval("Text") %>
</StaticItemTemplate>
196
Chapter 5: Building Web Applications
</asp:Menu>
</div>
<!-- Content -->
<div class="Content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server" />
</div>
</form>
</body>
The code is pretty simple: basically, it defines the layout of all the Dorknozzle
pages. Each of the three sections defined here starts with a comment that identifies
the section as being the header, the menu on the left, or the content area. These
elements are positioned on the page using the CSS styles you added earlier to
the Dorknozzle.css file, so you may want to have another look at that file to
refresh your memory.
We saw in Chapter 4 that the TreeView and Menu controls know how to read
data from a SiteMapDataSource class, which reads the Web.sitemap file located
in the root of your project (unless you specify otherwise). To build the menu on
the left-hand side of the page, we create a Web.sitemap file, then add a
SiteMapDataSource control to our web form or master page:
File: Dorknozzle.master (excerpt)
<asp:SiteMapDataSource id="dorknozzleSiteMap" runat="server"
ShowStartingNode="false" />
You might recall that the Web.sitemap file forces us to add a root siteMapNode
element, but we can suppress this root element using the SiteMapDataSource—we
set its ShowStartingNode property to False.
To have the Menu control simply display the list of nodes, it’s sufficient to set its
DataSourceID to the ID of the SiteMapDataSource. However, the Menu control
also gives us the potential to customize the look of each menu item through
templates. Here, we used the StaticItemTemplate to add a little book image
to the left of each menu item:
File: Dorknozzle.master (excerpt)
<asp:Menu id="dorknozzleMenu" runat="server"
DataSourceID="dorknozzleSiteMap">
<StaticItemTemplate>
<img src="Images/book_closed.gif" alt="+"
width="16" height="16" style="border-width: 0;" />
<%# Eval("Text") %>
197
Building the Master Page
</StaticItemTemplate>
</asp:Menu>
After you write Dorknozzle.master, copy the Images folder from the code archive
to your Dorknozzle folder, which will probably be C:\WebDocs\Dorknozzle\.
1
Once this is done, you should have a Dorknozzle\Images folder that contains a
few image files. To make the Images folder appear in Solution Explorer, right-
click the root node and choose Refresh Folder.
The master page is now in place. Click the Design button at the base of the editor
window to see a preview of the page. Does yours look like the page shown in
Figure 5.40?
Figure 5.40. Viewing Dorknozzle.master in Design View
Note that the CSS styles don’t apply at design time, so you’ll have to hang on a
little longer to see that code in action.
1
Remember that all code and images used in building the Dorknozzle project are available in the
code archive, which is available for download from sitepoint.com.
198
Chapter 5: Building Web Applications
Get Build Your Own ASP.NET 2.0 Web Site Using C# & VB, Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
