Unit-4 Working with Master page and Themes

Size: px

Start display at page:

Download "Unit-4 Working with Master page and Themes"

Hubert Norton
5 years ago
Views:

The output result is a combination of the master page and the content page. The content pages contain the content you want to display. When users request the content page, ASP.

1 MASTER PAGES Master pages allow you to create a consistent look and behavior for all the pages in web application. A master page provides a template for other pages, with shared layout and functionality. The master page defines placeholders for the content, which can be overridden by content pages. The output result is a combination of the master page and the content page. The content pages contain the content you want to display. When users request the content page, ASP.NET merges the pages to produce output that combines the layout of the master page with the content of the content page. Master page having.master extension. Define master page directive on top a web page. The Content of master pages is fixed for all derived pages. To place the changing data for every pages master page provide <ContentPlaceHolder> where each page hold its local content. Major characteristics of a master page: Defining common properties of a website, such as header, footer, banners, navigation menus and other elements that can be accessed by the content pages. Allowing single or multiple content pages to access single or multiple master pages. Displaying the content of each content page in content place holder. MasterPage.master <%@ Master Language="VB" CodeFile="MasterPageTest.master.vb" Inherits="MasterPageTest" %> <html> <head <title>untitled Page</title> <asp:contentplaceholder id="head" </asp:contentplaceholder> </head> 1 Dept: CE AWT ( ) Prof. Akash N. Siddhpura

2 <body><form id="form1" <div><h1>standard Header From Masterpage</h1> <asp:contentplaceholder id="cph1" </asp:contentplaceholder> <div> <asp:button ID="btnContent2" runat="server" Text="Content-1" /> </form></body></html> MasterPage.master(Coding) Public Class MasterPage Inherits System.Web.UI.MasterPage Protected Sub btncontent2_click(byval sender As Object, ByVal e As EventArgs) Handles btncontent2.click Response.Redirect("Control.aspx") End Sub End Class Default.aspx <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile=" ContentPage.aspx.vb" Inherits=" ContentPage" title="untitled Page" %> <asp:content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <asp:content ID="Content2" ContentPlaceHolderID="CPH1" Runat="Server"> <h2>this is Home Page</h2> Control.aspx <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile=" ContentPage.aspx.vb" Inherits=" ContentPage" title="untitled Page" %> <asp:content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <asp:content ID="Content2" ContentPlaceHolderID="CPH1" Runat="Server"> <h2>this is Another Page</h2> NESTED MASTER PAGE * To demonstrate nesting master pages we will need to create two master pages, a main master page and a sub master page. Then, we will derive a content page from the sub master page to demonstrate how the pages all link together. Add MainMasterPage: Right click the project in your solution explorer. 2 Dept: CE AWT ( ) Prof. Akash N. Siddhpura

3 Select add new item Select a master page. Name it MainMasterPage.master. Click add. The code for the MainMasterPage.master should look like this: <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="MainMaster.master.vb" Inherits="NestedMasterPageExample.MainMaster" %> <head <style type="text/css"> html background-color:silver; 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:fuchsia; text-decoration:none;.column float:left; padding:10px; border-right:solid 1px black;.rightcolumn float:left; padding:10px;.footer background-color:lime; border:3px dotted red; 3 Dept: CE AWT ( ) Prof. Akash N. Siddhpura

4 text-align:center;.clear clear:both; </style> <title>website Main Master Page</title> <asp:contentplaceholder ID="head" </asp:contentplaceholder> </head> <body> <form id="form1" <div class="content"> <asp:image id="imglogo" AlternateText="Logo" <div class="tabstrip"> <asp:hyperlink id="lnkproducts" Text="HOME" NavigateUrl="~/Column1_Con_Home.aspx" <asp:hyperlink id="lnkservices" Text="FORUM" NavigateUrl="~/Column2_Con_Home.aspx" <asp:contentplaceholder ID="ContentPlaceHolder1" </asp:contentplaceholder> <br class="clear" /> <div class="footer"> Copyright 2016 By DARSHAN INST. OF ENG. & TECH. FOR DIPLOMA STUDIES. </form> </body> </html> Add SubMasterPage: Right click the project in your solution explorer. Select add new item Select a Nested master page. Name it SubMasterPage.master. 4 Dept: CE AWT ( ) Prof. Akash N. Siddhpura

5 Ensure that the Select nested master page option is checked. The SubMasterPage.master code should look like this: Master Language="VB" MasterPageFile="~/MainMaster.Master" AutoEventWireup="false" CodeBehind="Column1.master.vb" Inherits="NestedMasterPageExample.Column1" %> <asp:content ID="Content1" ContentPlaceHolderID="head" <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" <div class="column"> <asp:contentplaceholder id="contentplaceholder1" <div class="column"> <asp:contentplaceholder id="contentplaceholder2" <div class="rightcolumn"> <asp:contentplaceholder id="contentplaceholder3" Add SubMasterPage(2 nd ): Right click the project in your solution explorer. Select add new item Select a Nested master page. Name it SubMasterPage2.master. Ensure that the Select nested master page option is checked. The SubMasterPage2.master code should look like this: <%@ Master Language="VB" MasterPageFile="~/MainMaster.Master" AutoEventWireup="false" CodeBehind="Column2.master.vb" Inherits="NestedMasterPageExample.Column2" %> <asp:content ID="Content1" ContentPlaceHolderID="head" <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" <div class="column"> <asp:contentplaceholder id="contentplaceholder1" <div class="rightcolumn"> <asp:contentplaceholder id="contentplaceholder2" 5 Dept: CE AWT ( ) Prof. Akash N. Siddhpura

6 Add WebPage: Right click the project in your solution explorer. Select add new item Select a web form. Name it Column1_Con_Home.aspx. Ensure that the Select master page (SubMasterPage.master) option is checked. Click add. The Column1_Con_Home.aspx code should look like this: <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Column1.master" CodeBehind="Column1_Con_Home.aspx.vb" Inherits="NestedMasterPageExample.Column1_Con_Home" %> <asp:content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" <asp:content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" Column:3 Column:3 Column:3 Column:3 Column:3 6 Dept: CE AWT ( ) Prof. Akash N. Siddhpura

7 Add WebPage: Right click the project in your solution explorer. Select add new item Select a web form. Name it Column2_Con_Home.aspx. Ensure that the Select master page (Column1.master) option is checked. Click add. Select Column2.master. Click ok. The Column2_Con_Home.aspx code should look like this: <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Column2.master" CodeBehind="Column2_Con_Home.aspx.vb" Inherits="NestedMasterPageExample.Column2_Con_Home" %> <asp:content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Access master page controls from content page In ASP.NET need to access the master page controls from content page. Master page controls are not directly accessibly by content page. To access master page control we need to understand following: Master The Master property returns the MasterPage object associated with this page. FindControl(String) Searches server control with the specified id parameter. 7 Dept: CE AWT ( ) Prof. Akash N. Siddhpura

8 MasterPage.master <asp:label ID="lblMasterLabel" runat="server" Text="Master Page Text"></asp:Label> ContentPage.aspx <asp:label ID="lblDisplay" runat="server" Text=""></asp:Label> ContentPage.aspx.vb Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim masterlbl As Label = Master.FindControl("lblMasterLabel") masterlbl.text = "This is Master Label" End Sub THEMES WITH SKIN FILE ** Theme Themes in Asp.Net enable you to define the style properties and the change the appearance of a Web Page. They provides User friendly interface with similar all over look with optimized code. You can set theme in master page directive in master page as well in web.config also. Theme can be defined as collection of element that is common look and feel for whole application. The Key Features are as follows: Providing flexibility to easily change the appearance of all web pages just by making changes in few template files with minimum possible efforts. Providing various options to customize a web page. E.g. in Orkut, you can change website appearance as per your requirement. Themes contain following elements: Skin It is having.skin extension that contains tags, property settings and formatting options for server side controls. Such as Label, TextBox and Button. Skin is divided into following two groups: Default: Default skin is applied automatically to all the controls of the same type in web page, when theme is applied to the page. SkinID attributes is used to determine whether the applied skin is default or not. If SkinID is not present in current tag means it is a default skin. Named: It is a customized skin that is applied to controls when theme is applied. It has SkinID property which allows different styles to different controls. 8 Dept: CE AWT ( ) Prof. Akash N. Siddhpura

9 Applying existing theme to an application There are 3 different options to apply themes to our website: 1. Setting the theme at the page level: the Theme attribute is added to the page directive of the page. <%@ Page Language="VB" CodeFile="Default.aspx.cs"Inherits="Default" Theme="Theme1"%> 2. Setting the theme at the site level: to set the theme for the entire website you can set the theme in the web.config of the website. Open the web.config file and locate the <pages> element and add the theme attribute to it: <pages theme="theme1">... </pages> 3. Setting the theme programmatically at runtime: here the theme is set at runtime through coding. Page.Theme = Theme1; CSS Refers to a mechanism of adding fonts, colors, styles and behavior to web pages. CSS is used to provide the visual inheritance to all the web pages in the website. It is an Asp.Net file with.css extension and applies a style sheet as a part of theme in a web page. It should include in App_theme folder. Create CSS File & Theme Add Theme: Solution Explorer -> Right click -> Add ASP.NET folder -> Themes. A folder App_Themes is added to the Solution Explorer and a new folder Theme1 is added inside it. Theme1 -> Right click -> Add new item -> Skin File Skin1.skin Inside Skin1.skin <asp:label runat="server" width="300px" height="40px" font-bold="true" fontsize="x-large" forecolor="yellow" backcolor="green" SkinID= lbl /> <asp:textbox runat="server" font-bold="true" font-size="medium" forecolor="blue" backcolor="silver" font-italic="true" SkinID= txt /> <asp:button runat="server" forecolor="red" backcolor="yellow" SkinID= btn /> Create CSS Add Theme file: Solution Explorer -> Right click Add New Item Select StyleSheet Inside StyleSheet1.css p font-family:impact; text-align:center; 9 Dept: CE AWT ( ) Prof. Akash N. Siddhpura

10 color:green; Applying CSS to a webpage; Content.aspx <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Content.aspx.vb" Inherits="CSSExample.Content" %> <head <title></title> <Link rel="stylesheet" type="text/css" href="stylesheet1.css" /> </head> <body> <form id="form1" <div> <p> Hello My Name is ABCXYZ</p> <p> I am Student of Darshan Inst. of Eng. & Technology for Diploma Studies,Rajkot</p> <p> I am a Computer Engineer</p> </form></body> </html> 10 Dept: CE AWT ( ) Prof. Akash N. Siddhpura

5 Snowdonia. 94 Web Applications with C#.ASP

5 Snowdonia. 94 Web Applications with C#.ASP 94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial