Thông tin tài liệu
Introducing Styles, Themes, and Master Pages Chapter 3 You can create a website by creating several Web pages connected to each other. However, a professional website requires much more than creating individual Web pages and connecting them. The look and feel of the text on a professional website should be consistent across all the Web pages. All the information and controls should appear in a standard consistent format across all the Web pages. In addition, all the Web pages should have a standard layout. All this can be achieved by using styles, themes, and master pages. This chapter discusses how to work with styles, and themes. In addition, it discusses how to define a standard layout for all the Web pages on a website by using master pages. In this chapter, you will learn to: Work with styles Work with themes Work with master pages Objectives NIIT Introducing Styles, Themes, and Master Pages 3.3 The look and feel of a Web page depends upon the appearance and arrangement of the HTML elements contained in it. Therefore, you need to format the HTML elements contained in your Web page to make it look attractive. Formatting each HTML element individually will be a tedious and complex task. In addition, it does not bring about consistency in the appearance of all the Web pages on the website. Styles provide a solution to this problem by enabling a programmer to apply consistent formatting across the entire website. Styles are used to define a set of formatting options, which can be reused to format different HTML elements on a single or multiple Web pages. You can define styles in any of the following ways: Using inline styles Using an embedded style sheet Using an external (linked) style sheet Inline styles are style definitions that are applied to the style property of a particular HTML element, and are placed directly inside the element on which it has to be implemented. Inline styles are used when you want to apply one-time formatting to an HTML element. To use inline styles in a Web page, you need to use the style attribute in the relevant HTML tag. For example, if you want to display the text of a paragraph in italicized Arial font, you have to define the style for the <p> tag as shown in the following markup: <p style="font-family:arial;font-style:italic"> … … </p> In the preceding markup, the style applied to the <p> tag will be applied to all text written within the <p> </p> tag in the preceding example only. An embedded style sheet is a group of styles that are defined by using the <style> tag. This tag needs to be placed within the <head> </head> tag on your Web page. The embedded style sheet is used when you want to apply a unique style to the various elements on a Web page. Working with Styles Using Inline Styles Using an Embedded Style Sheet 3.4 Introducing Styles, Themes, and Master Pages NIIT The embedded style sheet enables you to define all the styles for a Web page at one place. This reduces the time required to design a Web page because you need not define the properties for the tags individually. You can define the properties for the desired elements once in the embedded style sheet and the properties will be implemented to all the elements throughout your Web page. For example, consider the following markup: <html> <head> <title> An Embedded Style </title> <style type="text/css"> h1 { font-style:italic;background:yellow;color:red } p { font-style:bold;color:blue} </style> </head> <body> <h1> An Embedded Style </h1> <p> Embedded style sheet is a part of HTML document. </p> </body> </html> In the preceding markup, the <style> tag is used to define an embedded style sheet. The <style> tag defines the properties for the <h1> and <p> tag. All the <h1> and <p> tags defined within the Web page will inherit the style defined in the <style> tag. The style definitions in an external style sheet are stored in a separate file having the .css extension. An external style sheet is used when you want to apply the same style rules to more than one Web page on a website. The external style sheet can contain styles for individual elements or generic styles that can be applied to any element. For example, you can create a stylesheet by the name style.css containing the style definitions for the <h1> tag, as shown in the following code snippet: h1 { font-weight: bold; font-size: large; color: green; font-family: Verdana, Arial, Sans-Serif; } Using an External (Linked) Style Sheet NIIT Introducing Styles, Themes, and Master Pages 3.5 N ot e The preceding style can only be applied to the <h1> tags. You can also create generic styles, as shown in the following code snippet: .heading { font-weight: bold; font-size: large; color: green; font-family: Verdana, Arial, Sans-Serif; } The preceding style can be applied to any element on the Web page. After the .css file is created, it has to be linked with HTML documents on which the styles are to be implemented. This can be done by using the <link> tag. The <link> tag should be defined within the <head> element of the HTML document. The following markup shows how to link an external style sheet to an HTML document by using the <link> tag: <head> <link rel=stylesheet href="style.css" type="text/css"> </head> In the preceding markup, rel=stylesheet specifies that the document will use a style sheet, href="style.css" specifies that the document will refer to the file, style.css, for the style definition, and type="text/css" signifies that it refers to a .css file for picking up the style definitions. To apply generic styles created in an external style sheet to an element, you need to include the class="<name of the style>" or cssClass="<name of the style>" attribute in the element. Task 3.1: Creating Styles by Using Style Builder Task 3.2: Modifying a Style Rule by Using the CSS Properties Window 3.6 Introducing Styles, Themes, and Master Pages NIIT Task 3.3: Creating a Style Sheet NIIT Introducing Styles, Themes, and Master Pages 3.7 The style sheet rules are limited to a fixed set of style attributes, such as fonts, borders, and foreground and background colors. These rules cannot control other aspects of ASP.NET controls, such as organizing items into rows and columns in the CheckBoxList control, specifying graphics for a TreeView control, and specifying the template layout of a GridView control. This gap can be filled by using the ASP.NET themes. ASP.NET themes are a collection of properties that enable you to define the appearance of Web pages and controls on your website. A theme can include skin files, cascading style sheet files (.css files), and graphics. By applying a theme, you can give Web pages a consistent appearance across your website. You can use a theme in Web applications by creating a skin file and attaching it to the Web pages on which you want to apply the theme. Skin files are used to define the property settings for ASP.NET Web server controls. Generally, skin files are created and stored in a theme folder. This theme folder is placed inside the folder named App_Themes. All the themes in a Web application are placed inside the App_Themes folder. This folder is placed inside the top-level directory of your Web application. For example, you can create a folder named Mytheme for your Web application named MyApp. This theme folder will be placed inside the MyApp\App_Themes folder and contains the skin file(s) for the theme. You can define multiple themes for your Web application. Each theme in a Web application can be defined in a separate folder inside the App_Themes folder. However, you can apply only one theme on a given page at a time. Consider a scenario wherein you want to create a skin file for providing consistent appearance to all the button controls in your Web page. For this, you want to specify the ForeColor and BackColor properties of the button controls. To set the ForeColor and BackColor properties of the button controls, you need to type the following markup in the skin file: <asp:Button runat="server" ForeColor="White" BackColor="Orange"/> The runat="server" attribute is mandatory. However, other attributes are optional and are used according to the requirement. You can create multiple skin files in a theme directory or place all the control tags in a single skin file. ASP.NET treats all the skin files in a theme directory as part of the same theme definition. Creating a Theme Working with Themes 3.8 Introducing Styles, Themes, and Master Pages NIIT Task 3.4: Creating a Theme You can apply a theme either to a particular Web page or to all the Web pages on a website. If a theme is applied to a particular Web page, the theme settings are applied only to that Web page. However, if you apply the theme to the entire website, the theme settings are applied to all the Web pages on the website. Applying a Theme to a Web Page To apply a theme to a particular Web page, you need to bind the theme at the page level. If you bind the theme at the page level, the styles and skins are only applied to that Web page and its controls. To bind a theme at the page level, you need to set the Theme attribute of the @ Page directive. For example, the following @ Page directive specifies that the theme, MyTheme, is applied to the Web page: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Theme="MyTheme" %> If you have defined settings for the control locally as well as in the theme, the settings defined in the theme override the local control settings. This strategy enables the theme to create a consistent look across all the Web pages, even if you have set the control properties locally. However, if you have used a stylesheet theme, the local page settings override the settings defined in the stylesheet theme. You can use stylesheet theme if you want the theme to be applied only to those controls whose settings have not explicitly been defined at the page level. To apply a stylesheet theme to a Web page, you need to set the StyleSheetTheme attribute of the @ Page directive as shown in the following directive: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" StyleSheetTheme="MyTheme" %> If you do not want the theme property to be applied to a particular control, you can set the EnableTheming property of that control on the Web page to false, as shown in the following markup: <asp:Button ID="Button1" runat="server" EnableTheming="false" /> A pplying a Theme NIIT Introducing Styles, Themes, and Master Pages 3.9 In the preceding markup, no theme will be applied to the button control, Button1. However, the settings defined in the theme will still be applied to other button controls, whose EnableTheming property is not set to false. Applying Themes Dynamically In addition to applying a theme at the design time, you can apply a theme dynamically. To apply a theme dynamically, you need to set the Page.Theme or Page.StyleSheetTheme property in your code. These properties must be set in the Page_PreInit event. For example, you have created a skin file, SkinFile.skin, in the MyTheme folder. To set this theme dynamically, you need to write the following code snippet: protected void Page_PreInit(object sender, EventArgs e) { Page.Theme = "MyTheme"; //name of the folder in which you //have stored the skin file. } Similarly, you can set the SkinID property of a control dynamically to attach it to a different named skin. Applying a Theme to a Website To apply the theme to all the Web pages on a website, you need to bind the theme at the website level. If you bind the theme at the website level, the styles and skins are applied to all the Web pages and controls on the website unless you override a theme for an individual Web page. To apply a theme to the entire website, you need to configure the <pages> element in the web.config file, as shown in the following markup: <configuration> <system.web> <pages theme="MyTheme"> </pages> </system.web> </configuration> Skin files standardize the look and feel of controls across all the Web pages on a website. However, there may be situations where you want multiple occurrences of a control to appear differently on the same Web page. For example, you can have many labels on your Web page. Each label can look different depending on whether they are being used for Creating Multiple Skins 3.10 Introducing Styles, Themes, and Master Pages NIIT headings or body text. ASP.NET allows you to create multiple settings for the same control by using multiple skins. When you create more than one theme for the same control, ASP.NET generates an error stating that a control can have a single default skin. This error can be avoided by using a named skin. A named skin can be created by supplying the SkinID attribute. The following markup is used to create multiple skins for a button control: <asp:Button runat="server" ForeColor="White" BackColor="Orange"/> <asp:Button runat="server" ForeColor="White" BackColor="Green" SkinID="AlternateSkin"/> In the preceding markup, the first is the default skin whereas the second with the SkinID attribute is known as the named skin. Default skins are applied automatically whereas named skins can be applied to a control by setting the SkinID attribute of the control, as shown in the following code-snippet: <asp:Button ID="Button1" runat="server" SkinID="AlternateSkin" /> In the preceding example, the named skin, AlternateSkin, is applied to the button control. Activity 3.1: Implementing Themes [...]... all Web pages on your website Master pages are used to create a consistent look and feel for your website Master pages are similar to ordinary ASP.NET pages and can contain static text, HTML elements, and server controls The file extension of master pages is master You cannot view master pages directly on a browser In order to view master pages on a browser, they must be used by other Web pages, known... handler: Page.MasterPageFile = "~/MasterPage .Master" ; NIIT Introducing Styles, Themes, and Master Pages 3.13 Creating Nested Master Pages Master pages are used to standardize the look and feel of all the Web pages on a website However, sometimes it is required that some of the Web pages on a website should follow certain standard features in addition to the features provided by the master pages In such... btnShow_Click(object sender, EventArgs e) { MyMasterPage master = (MyMasterPage)this .Master; master. ShowNavigation = true; } In the preceding code snippet, MyMasterPage is the name of the master page class and ShowNavigation is the public property of the MyMasterPage class Activity 3.2: Implementing Master Pages NIIT Introducing Styles, Themes, and Master Pages 3.15 Practice Questions 1 Which of the... known as content pages Master pages define the structure and common ingredients of the content pages Creating a Master Page The ordinary aspx page in ASP.NET contains the @ Page directive However, the master page in ASP.NET replaces the @ Page directive with a special @ Master directive, as shown in the following markup: ... controls are that portion of the master page that a content page can change A master page should contain at least one ContentPlaceHolder control NIIT Introducing Styles, Themes, and Master Pages 3.11 Connecting Master Pages and Content Pages Once you have created the master page, you need to connect it to the content pages to standardize the layout of the website To bind a master page with the content... 4 Which of the following is the extension for the nested master page file? a .asmx b .nestedmaster c .nested d .master 5 To access any custom property defined in the master pages, the content pages have to use the built-in _ property a Page .Master b Page.Contol c Page.Contols d Master. control 3.16 Introducing Styles, Themes, and Master Pages NIIT Summary In this chapter, you learned that: Styles... include the MasterPageFile attribute in the @ Page directive of the content page This attribute points to the master page to be used with the content page, as shown in the following markup: In the preceding markup, the MasterPageFile attribute binds the content page to the Master1 .master page The path for the master page... selected or all Web pages on your website A master page contains the following elements: HTML or ASP.NET elements ContentPlaceHolder controls To bind a master page with the content page, you need to include the MasterPageFile attribute in the @ Page directive of the content page Content pages can interact with the master pages programmatically NIIT Introducing Styles, Themes, and Master Pages 3.17 3.18... specify the master page filename without using ~/, ASP.NET checks a predetermined subfolder named MasterPages for the master page If you have not created the folder or the master page is not found in that folder, ASP.NET searches the root website folder for the master page In addition to the MasterPageFile attribute, the @ Page directive of the content page contains another attribute, Title The master page... nested master pages Consider an example wherein a website is using a master page for displaying the company logo in the header and a TreeView control on the left side for navigation Some of the Web pages on the website require a footer to be displayed in addition to the header and the TreeView control provided by the master page This can be implemented by using a nested master page Similar to master pages, . of master pages is .master. You cannot view master pages directly on a browser. In order to view master pages on a browser, they must be used by other Web pages, known as content pages. Master. Page.MasterPageFile = "~/MasterPage .Master& quot;; 3.14 Introducing Styles, Themes, and Master Pages NIIT Master pages are used to standardize the look and feel of all the Web pages. Working with Master Pages Creating a Master Page 3.12 Introducing Styles, Themes, and Master Pages NIIT Once you have created the master page, you need to connect it to the content pages to
Ngày đăng: 12/08/2014, 17:21
Xem thêm: Giới thiệu phong cách, Giao diện, và Master Pages ppt, Giới thiệu phong cách, Giao diện, và Master Pages ppt
