Building the Master Page
</namespaces>
</pages>
If you’re using C#, you’ll need to add the pages element to the system.web element 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
Chapter 5: Building Web Applications
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
Building the Master Page
</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
Chapter 5: Building Web Applications
</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, rightclick 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