Master pages ppt
- 1. Training on Master pagesIntroducing Master pagesbyPRAVEEN NANDAGIRI
- 2. AgendaMaster PagesMenu, Tree View ControlsThemes and SkinsTraining on Master pages
- 3. Training on Master pagesMaster PageContent Page
- 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 pagesMasters define common content and placeholders (<asp:ContentPlaceHolder>)Content pages reference masters and fill placeholders with content (<asp:Content>)Site.masterdefault.aspxhttp://.../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 PageTraining on Master pages
- 8. Training on Master pagesThis slide shows how to add a new item to a web site (here we add a master page)
- 9. Training on Master pagesThis slide shows how to give a name to a master page
- 10. Training on Master pagesThis 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 pagesThis slide shows that how to give a content placeholder to a master page
- 12. Training on Master pagesThis 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 page1. Create a master page with .master extension2. Define a master directive:<%@ master .. %>3. Add content:Can contain any html or control page contentDefine replaceable place-holder regions:Use an <asp:contentplaceholder> controlAdd default content within it (optional)
- 15. Modified Master Page<%@ Master Language="VB" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td colspan="2" style="height: 100px"> <img src="images/asp_net_logo.gif" /> <span style="font-size: 24pt">Minder Chen ASP.NET Learning Web Site</span></td> </tr> <tr> <td style="width: 49px" valign="top"> <asp:Menu ID="Menu1" runat="server"> </asp:Menu> </td> <td><asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </td> </tr> </table> </div> </form></body></html>
- 16. Default ContentContentPlaceHolder 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>
- 17. Add a Content Page based on a Master Page
- 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 Page1. Create an ASP.NET page (.aspx extension)2. On the page directive:<%@ page masterpagefile= %> attribute to reference masterSet the title attribute <%@ Page title=“jeff” %>3. Optionally add content to override the master:a. Only <asp:content> controls or server-side script allowedb. <asp:content> controls replace regions in the master:The contentplaceholderid identifies master’s region<asp:content> controls can contain any page content
- 20. A Content Page with a Master Page Applied
- 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 [email protected] <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 PropertyRetrieves reference to master pageInstance of class derived from System.Web.UI.MasterPageNull if page doesn't have a masterUsed to programmatically access content defined in the master pageUse FindControl for weak typingUse public property in master page for strong typing (preferred)
- 24. Menu200+ Properties; here are the top 4:Orientation = HorizontalStaticDisplayLevels = 2StaticSubMenuIndent = 0DisappearAfter = 300
- 25. Menu Control Tag <asp:Menu ID="Menu1" runat="server" BackColor="#B5C7DE" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" Orientation="Horizontal" StaticSubMenuIndent="10px"> <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <DynamicHoverStyle BackColor="#284E98" ForeColor="White" BorderStyle="Groove" /> <DynamicMenuStyle BackColor="#B5C7DE" /> <StaticSelectedStyle BackColor="#507CD1" /><DynamicSelectedStyle BackColor="#507CD1" /> <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <StaticHoverStyle BackColor="#284E98" ForeColor="White" /></asp:Menu>
- 26. Menu or Tree: Choosing the right control
- 27. Theme and Skin
- 28. Add a Style Sheet in a Theme
- 31. Style Builder – Build Style RuleH1{ font-size: 30px; color: yellow; font-style: italic; font-family: 'Comic Sans MS'; background-color: blue; font-variant: small-caps;}
- 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 SheetUpdates properties on your controlsTwo groups of files:Your site – Nothing here changesTheme A – Style Sheets, Images, SkinsAt runtime these files are associated
- 36. Themes: Recommended usageDo as much as you can inside the Style SheetForeground Images can’t be controlled by CSS, so use SkinsAdvanced controls, use Skins
- 37. Skin
- 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" />
- 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>
- 41. Thank You !