4. On the left is a master page as seen in the Visual Studio 2005 IDE. On the right is a content page that uses that master page, also shown in Visual Studio. Note the rich design-time exeprience: when the content page is open in the designer, content declared in the page itself is shown in full color, while content inherited from the master page is shown in half-color. Master pages enable developers to build templates that contribute code and content to other pages ("content pages") on the site. Because ASP.NET 1.x lacked template support, developers often resorted to factoring common UI elements--elements that appear on multiple pages--into user controls and then declaring the user controls in each page that uses them. Master pages provide a more elegant solution to the problem of defining common look and feel. The term "visual inheritance" is often used to describe master pages because content pages inherit appearance from master pages the same way derived classes inherit methods, properties, and other type members from base classes. Training on Master pages
5. Training on Master pages Masters define common content and placeholders (<asp:ContentPlaceHolder>) Content pages reference masters and fill placeholders with content (<asp:Content>) Site.master default.aspx http://.../default.aspx <%@ Master %> <asp:ContentPlaceHolder ID="Main" RunAt="server" /> <%@ Page MasterPage- File="Site.master" %> <asp:Content ContentPlaceHolderID= "Main" RunAt="server" /> </asp:Content>
6. The first and most important concept to grasp when learning about master pages is that of Content and ContentPlaceHolder controls. Master pages use ContentPlaceHolder controls to define where content pages can plug in content. Content pages plug in content by declaring Content controls whose ContentPlaceHolderID properties match ContentPlaceHolder IDs in the master. A master page can contain an unlimited number of ContentPlaceHolder controls. All content defined in content pages MUST appear in Content controls--that is, between <asp:Content> and </asp:Content> tags. Training on Master pages
7. Master file “A.master” Content file “B.aspx” . . < % @ Page < % @ Master % > Master = ”A . master” % > < asp : Content runat = server ContentName = ”Main” > < / asp : Content > < asp : Content < asp : ContentPlaceHolder runat = server runat = server ContentName = ”Footer” > ContentName = ”Main” / > < / asp : Content > < asp : ContentPlaceHolder runat = server ContentName = ”Footer” / > Resulting Page Training on Master pages
8. Training on Master pages This slide shows how to add a new item to a web site (here we add a master page)
9. Training on Master pages This slide shows how to give a name to a master page
10. Training on Master pages This slide shows that once you add a master page to a website how it looks (This is the sourse of master page)
11. Training on Master pages This slide shows that how to give a content placeholder to a master page
12. Training on Master pages This slide shows that design of the master page and it contains content place holder
13. Defining a Master Page <%@ Master Language="VB" %> <html> <body> <!-- Banner shown on all pages that use this master --> <table width="100%"> <tr> <td bgcolor="darkblue" align="center"> <span style="font-size: 36pt; color: white">ACME Inc.</span> </td> </tr> </table> <!-- Placeholder for content below banner --> <asp:ContentPlaceHolder ID="Main" RunAt="server" /> </body> </html>
14. Master Pages: Creating a master page 1. Create a master page with .master extension 2. Define a master directive: <%@ master .. %> 3. Add content: Can contain any html or control page content Define replaceable place-holder regions: Use an <asp:contentplaceholder> control Add default content within it (optional)
16. Default Content ContentPlaceHolder controls can define content of their own ("default content") Default content is displayed ONLY if not overridden by content page <%@ Master %> ... <asp:ContentPlaceHolder ID="Main" RunAt="server"> This is default content that will appear in the absence of a matching Content control in a content page <asp:ContentPlaceHolder>
18. Create a Content Page: Applying a Master Page <%@ Page MasterPageFile="~/MasterPage.master" %> <asp:Content ContentPlaceHolderID="Main" RunAt="server"> This content fills the content place holder "Main" defined in the master page (site.Master) </asp:Content>
19. Using a Master Page 1. Create an ASP.NET page (.aspx extension) 2. On the page directive: <%@ page masterpagefile= %> attribute to reference master Set the title attribute <%@ Page title=“jeff” %> 3. Optionally add content to override the master: a. Only <asp:content> controls or server-side script allowed b. <asp:content> controls replace regions in the master: The contentplaceholderid identifies master’s region <asp:content> controls can contain any page content
21. Code for AboutUS.aspx <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="A bout US" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <strong><span style="font-size: 14pt">This is a web site developed by Minder Chen tohelp others to learn ASp.NET 1.X and 2.0. <br /> He has used ASP.NET for more than 3 years by now and has developed a Web-based DecisionSupport System using ASP.NET. He can be reached at minderchen@hotmail.com <br /> </span></strong> </asp:Content>
22. Applying a Master Page to a Site <configuration> <system.web> <pages masterPageFile="~/MasterPage.master" /> </system.web> </configuration>
23. The Page.Master Property Retrieves reference to master page Instance of class derived from System.Web.UI.MasterPage Null if page doesn't have a master Used to programmatically access content defined in the master page Use FindControl for weak typing Use public property in master page for strong typing (preferred)
24. Menu 200+ Properties; here are the top 4: Orientation = Horizontal StaticDisplayLevels = 2 StaticSubMenuIndent = 0 DisappearAfter = 300
33. Apply Themes to the Web Site <configuration> <system.web> <pages theme="ThemeName" /> </system.web> </configuration>
34. To apply a theme to an individual page <%@ Page Theme="ThemeName" %> <%@ Page StyleSheetTheme="ThemeName" %>
35. Themes: Architecture Themes are made up of a set of elements: skins, cascading style sheets (CSS), images, and other resources. At a minimum, a theme will contain skins. Themes are defined in special directories in your Web site or on your Web server. Basically: Inserts a link to your CSS Style Sheet Updates properties on your controls Two groups of files: Your site – Nothing here changes Theme A – Style Sheets, Images, Skins At runtime these files are associated
36. Themes: Recommended usage Do as much as you can inside the Style Sheet Foreground Images can’t be controlled by CSS, so use Skins Advanced controls, use Skins
38. SkinFile.skin <%--Default skin template. The following skins are provided as examples only. 1. Named control skin. The SkinId should be uniquely defined because duplicate SkinId's per control type are not allowed in the same theme. <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" > <AlternatingRowStyle BackColor="Blue" /> </asp:GridView> 2. Default skin. The SkinId is not defined. Only one default control skin per control type is allowed in the same theme. <asp:Image runat="server" ImageUrl="~/images/image1.jpg" /> --%> <asp:Button runat="server" BackColor="Red" ForeColor="White" Font-Name="Arial" Font-Size="9px" SkinID="Red" /> <asp:Button runat="server" BackColor="Blue" ForeColor="Yellow" Font-Name="Arial" Font-Size="14px" />
39.
40. Sample Code You need to use Theme in order to use Skin <%@ Page Language="VB" Theme="Theme1" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) End Sub </script> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h1>Contact Information</h1> Email: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" SkinID="Red" runat="server" Text="Submit" /> <asp:Button ID="Button2" runat="server" Text="Reset" /> </asp:Content>
