ptg 244 .ad { margin-top:20px; } .clear { clear:both; } </style> <title>Default Master</title> </head> <body> <form id=”form1” runat=”server”> <div class=”content”> <div class=”leftColumn”> <asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”/> </div> <div class=”middleColumn”> <asp:ContentPlaceholder id=”ContentPlaceHolder2” runat=”server” /> </div> <div class=”rightColumn”> <asp:ContentPlaceHolder id=”contentAd” Runat=”server”> <asp:Image id=”imgAd” ImageUrl=”~/BannerAd.gif” CssClass=”ad” AlternateText=”Advertisement for Superexpert ASP Workshops” Runat=”server” /> </asp:ContentPlaceHolder> </div> <br class=”clear” /> </div> </form> </body> </html> CHAPTER 5 Designing Websites with Master Pages From the Library of Wow! eBook ptg 245 Creating Master Pages 5 The content page in Listing 5.4 uses the Master Page in Listing 5.3. It does not include a Content control that corresponds to the contentAd control in the Master Page. When you open the page in a browser, the default banner advertisement displays. LISTING 5.4 DefaultContent.aspx <%@ Page Language=”C#” MasterPageFile=”~/DefaultMaster.master” %> <asp:Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”> Content in the first column <br />Content in the first column <br />Content in the first column <br />Content in the first column <br />Content in the first column </asp:Content> <asp:Content ID=”Content2” ContentPlaceHolderID=”ContentPlaceHolder2” Runat=”Server”> Content in the second column <br />Content in the second column <br />Content in the second column <br />Content in the second column <br />Content in the second column </asp:Content> Of course, you do have the option of adding a Content control that overrides the default content contained in the contentAd control in the Master Page. For example, you might want to display different banner advertisements in different sections of your website. NOTE You can nest ContentPlaceHolder controls in a Master Page. If you do this, you have the option of overriding greater or smaller areas of content in the Master Page. Nesting Master Pages When building a large website, you might need to create multiple levels of Master Pages. For example, you might want to create a single sitewide Master Page that applies to all the content pages in your website. In addition, you might need to create multiple sectionwide Master Pages that apply to only the pages contained in a particular section. From the Library of Wow! eBook ptg 246 You can nest Master Pages as many levels as you need. For example, Listing 5.5 contains a Master Page named Site.master, which displays a logo image and contains a single content area. It also contains sitewide navigation links. LISTING 5.5 Site.master <%@ Master Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> html { background-color:DarkGreen; font:14px Georgia,Serif; } .content { width:700px; margin:auto; border-style:solid; background-color:white; padding:10px; } .tabstrip { padding:3px; border-top:solid 1px black; border-bottom:solid 1px black; } .tabstrip a { font:14px Arial; color:DarkGreen; text-decoration:none; } .column { float:left; padding:10px; border-right:solid 1px black; } .rightColumn { float:left; CHAPTER 5 Designing Websites with Master Pages From the Library of Wow! eBook ptg 247 Creating Master Pages 5 padding:10px; } .clear { clear:both; } </style> <title>Site Master</title> </head> <body> <form id=”form1” runat=”server”> <div class=”content”> <asp:Image id=”imgLogo” ImageUrl=”~/Images/SiteLogo.gif” AlternateText=”Website Logo” Runat=”server” /> <div class=”tabstrip”> <asp:HyperLink id=”lnkProducts” Text=”Products” NavigateUrl=”~/Products.aspx” Runat=”server” /> <asp:HyperLink id=”lnkServices” Text=”Services” NavigateUrl=”~/Services.aspx” Runat=”server” /> </div> <asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”> </asp:contentplaceholder> <br class=”clear” /> copyright © 2007 by the Company </div> </form> </body> </html> The Master Pages in Listing 5.6 and Listing 5.7 are nested Master Pages. Both Master Pages include a MasterPageFile attribute that points to the Site.master Master Page. From the Library of Wow! eBook ptg 248 LISTING 5.6 SectionProducts.master <%@ Master Language=”C#” MasterPageFile=”~/Site.master” %> <asp:Content id=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”server”> <div class=”column”> <asp:ContentPlaceHolder id=”ContentPlaceHolder1” Runat=”server” /> </div> <div class=”column”> <asp:ContentPlaceHolder id=”ContentPlaceHolder2” Runat=”server” /> </div> <div class=”rightColumn”> <asp:ContentPlaceHolder id=”ContentPlaceHolder3” Runat=”server” /> </div> </asp:Content> LISTING 5.7 SectionServices.master <%@ Master Language=”C#” MasterPageFile=”~/Site.master” %> <asp:Content id=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”server”> <div class=”column”> <asp:ContentPlaceHolder id=”ContentPlaceHolder1” Runat=”server” /> </div> <div class=”rightColumn”> <asp:ContentPlaceHolder id=”ContentPlaceHolder2” Runat=”server” /> </div> </asp:Content> CHAPTER 5 Designing Websites with Master Pages From the Library of Wow! eBook ptg 249 Creating Master Pages 5 The Master Page in Listing 5.6 creates a three-column page layout, and the Master Page in Listing 5.7 creates a two-column page layout. The Products.aspx page in Listing 5.8 uses the SectionProducts.master Master Page. When you request the Products.aspx page, the contents of Site.master, SectionProducts.master, and Products.aspx are combined to generate the rendered output (see Figure 5.3). FIGURE 5.3 Nesting Master Pages to display the Products.aspx page. LISTING 5.8 Products.aspx <%@ Page Language=”C#” MasterPageFile=”~/SectionProducts.master” %> <asp:Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”> Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products </asp:Content> From the Library of Wow! eBook ptg 250 <asp:Content ID=”Content2” ContentPlaceHolderID=”ContentPlaceHolder2” Runat=”Server”> Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products </asp:Content> <asp:Content ID=”Content3” ContentPlaceHolderID=”ContentPlaceHolder3” Runat=”Server”> Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products </asp:Content> The Services.aspx page in Listing 5.9 uses the SectionService.master Master Page. When this page is opened in a browser, the contents of Site.master, SectionServices.master, and Services.aspx combine to generate the rendered output (see Figure 5.4). LISTING 5.9 Services.aspx <%@ Page Language=”C#” MasterPageFile=”~/SectionServices.master” Title=”Services” %> <asp:Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”> Services, Services, Services <br />Services, Services, Services <br />Services, Services, Services <br />Services, Services, Services <br />Services, Services, Services </asp:Content> <asp:Content ID=”Content2” ContentPlaceHolderID=”ContentPlaceHolder2” Runat=”Server”> CHAPTER 5 Designing Websites with Master Pages From the Library of Wow! eBook ptg 251 Creating Master Pages 5 Services, Services, Services, Services, Services <br />Services, Services, Services, Services, Services <br />Services, Services, Services, Services, Services <br />Services, Services, Services, Services, Services <br />Services, Services, Services, Services, Services </asp:Content> Using Images and Hyperlinks in Master Pages You must be careful when using relative URLs in a Master Page. For example, you must be careful when adding images and links to a Master Page. Relative URLs are interpreted in different ways, depending on whether they are used with HTML tags or ASP.NET controls. If you use a relative URL with an ASP.NET control, the URL is interpreted relative to the Master Page. For example, suppose that you add the following ASP.NET Image control to a Master Page: <asp:Image ImageUrl=”Picture.gif” Runat=”Server” /> The ImageUrl property contains a relative URL. If the Master Page is in a folder named MasterPages, the URL is interpreted like this: /MasterPages/Picture.gif FIGURE 5.4 Nesting Master Pages to display the Services.aspx pages. From the Library of Wow! eBook ptg 252 CHAPTER 5 Designing Websites with Master Pages Even if a content page is in a completely different folder, the ImageUrl is interpreted rela- tive to the folder that contains the Master Page and not relative to the content page. The situation is completely different in the case of HTML elements. If an HTML element such as an <img> or <a> tag includes a relative URL, the relative URL is interpreted relative to the content page. For example, suppose you add the following <img> tag to a Master Page: <img src=”Picture.gif” /> The src attribute contains a relative URL, which is interpreted relative to a particular content page. For example, if you request a content page in a folder named ContentPages, the relative URL is interpreted like this: /ContentPages/Picture.gif Using relative URLs with HTML elements is especially tricky because the URL keeps changing with each content page. If you request content pages from different folders, the relative URL changes. You can solve this problem in three ways. First, you can replace all the HTML elements that use relative URLs with ASP.NET controls. An ASP.NET control automatically reinterprets a relative URL as relative to the Master Page. NOTE Relative URLs used by ASP.NET controls in a Master Page are automatically reinterpret- ed relative to the Master Page. This process of reinterpretation is called rebasing. Only ASP.NET control properties decorated with the UrlProperty attribute are rebased. Second, you can avoid relative URLs and use absolute URLs. For example, if your applica- tion is named MyApp, you can use the following <img> tag to display an image file located in the MasterPages folder: <img src=”/MyApp/MasterPages/Picture.gif” /> The disadvantage of using absolute URLs is that they make it difficult to change the loca- tion of a web application. If the name of your application changes, the absolute URLs no longer work and you end up with a bunch of broken images and links. The final option is to use the Page.ResolveUrl() method to translate an application-rela- tive URL into an absolute URL. This approach is illustrated with the page in Listing 5.10. The Page.ResolveUrl() method is used with the <img> tag in the body of the Master Page, which displays the website logo. From the Library of Wow! eBook ptg 253 Creating Master Pages 5 LISTING 5.10 MasterPages\ImageMaster.master <%@ Master Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Image Master</title> </head> <body> <form id=”form1” runat=”server”> <div> <img src=’<%=Page.ResolveUrl(“~/MasterPages/Logo.gif”) %>’ alt=”Website Logo” /> <asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server” /> </div> </form> </body> </html> The Master Page in Listing 5.10 is in a folder named MasterPages. This folder also includes an image named Logo.gif. This image displays with the following HTML tag: <img src=’<%=Page.ResolveUrl(“~/MasterPages/Logo.gif”) %>’ alt=”Website Logo” /> The Page.ResolveUrl() method converts the tilde into the correct path for the current application directory. The content page in Listing 5.11 uses the Master Page and correctly displays the website logo (see Figure 5.5): LISTING 5.11 ImageContent.aspx <%@ Page Language=”C#” MasterPageFile=”~/MasterPages/ImageMaster.master” %> <asp:Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”> <h1>Content</h1> </asp:Content> From the Library of Wow! eBook . Master Pages to display the Products.aspx page. LISTING 5.8 Products.aspx <%@ Page Language=”C#” MasterPageFile=”~/SectionProducts.master” %> < ;asp: Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1”. Runat=”Server”> Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products < /asp: Content> < ;asp: Content. Products <br />Products, Products, Products <br />Products, Products, Products <br />Products, Products, Products < /asp: Content> The Services.aspx page in Listing 5.9