09 ASP - NET Chapter 03 PDF

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.
Objectives
In this chapter, you will learn to:
Work with styles
Work with themes
Work with master pages
Chapter 3
Introducing Styles,
Themes, and Master
Pages
Working with Styles

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
Using Inline Styles

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.
Using an Embedded Style Sheet

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.
NIIT
Introducing Styles, Themes, and Master Pages 3.3
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.
Using an External (Linked) Style Sheet

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;
}
3.4 Introducing Styles, Themes, and Master Pages
NIIT
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.
Note
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
NIIT
Task 3.3: Creating a Style Sheet
NIIT
Working with Themes

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.
Creating a Theme
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.
NIIT
Task 3.4: Creating a Theme
Applying 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" />
NIIT
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>
Creating Multiple Skins

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
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
NIIT
Working with Master Pages

A website contains multiple Web pages connected to each other. There are certain
components that need to be present across all the Web pages on the website. For example,
there could be a company logo and a navigation bar that need to appear on each page of
the website. The placement and appearance of this logo and navigation bar should remain
consistent across all the pages. Therefore, you need to copy the logo and navigation bar
on each page individually. You also need to make sure that the logo and the navigation
bar are placed at the same position on all the pages to maintain a consistent look and feel.
Moreover, any changes in the logo or navigation bar at a later stage will require you to
make changes on each page of the website. This is a complex and time-consuming
process of creating Web pages. This process can be simplified and made quicker by using
master pages.
ASP.NET provides you with the master pages feature. This feature enables you to create a
page layout that you can use with selected or 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 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:
<%@ Master Language="C#" CodeFile="MyMaster.master.cs"
Inherits="MasterPage" %>
In addition to the @ Master directive, the master page contains the following elements:
HTML or ASP.NET elements: You can use any HTML or ASP.NET element in
your master page. For example, you can use an HTML table to define the layout,
static text to display the copyright information, an <img> element to display the
company logo, and ASP.NET server controls to create navigation for your website
on the master page.
ContentPlaceHolder controls: ContentPlaceHolder 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
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 page, you
need to 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:
<%@ Page Language="C#" MasterPageFile="~/Master1.master"
Title="Content Page"%>
In the preceding markup, the MasterPageFile attribute binds the content page to the
Master1.master page. The path for the master page starts with ~/. It specifies the root
website folder. If you directly 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 file contains the <Title> tag within
the <Head> tag. If a title is specified in the master page, it will also be displayed in the
content page because the content page cannot modify the contents of the master page.
However, the title specified in the master page can be overridden in the content page by
the using the Title attribute.
The source code of the content page is different from that of a normal page. This is due to
the fact that the content page cannot define anything that is already defined in the master
page such as the <head> section, the root <html> element, and the <body> element. It can
only supply a Content tag that corresponds to the ContentPlaceHolder in the master
page. The Content tag is the place where you can insert the content for the content page.
NIIT
The following figure shows how the place holder content for the master page is supplied
by the content page.
Content Page Supplying the Placeholder Content to the Master Page
In the preceding figure, the content page is supplying the content for the content
placeholders in the master file. The content placeholders in the content page must have
the same ID as that of the content placeholders in the master page.
Note
You can also connect a content page to a master page at run time. For this, you need to
write the following code within the Page_PreInit event handler:
Page.MasterPageFile = "~/MasterPage.Master";
NIIT
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
situations, you can implement the 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, the extension of the nested master page file is .master. Like any
content page, a nested master page contains the <Content> controls that are mapped to
the <ContentPlaceHolder> controls on a master page. In addition, a nested master page
contains content placeholders of its own to display the content supplied by its own content
pages.
Interacting with a Master Page Programmatically

There are situations wherein you may want to change the layout of the master page
through a particular content page. One such situation is when you want to hide the
navigation controls, which are implemented in the master page to have more space to see
the page content in a particular content page.
You cannot implement this functionality in the master page because then the navigation
controls will not be visible in any of the content pages. Similarly, you cannot implement it
by using the content page because it involves modifying a fixed portion of the master
page, which cannot be done through the content page.
One way to implement this is by adding a public property to the master page class. This
property, when set to false, automatically hides the navigation controls. Such a property
can be added to the master page class by writing the following code snippet:
public partial class MyMasterPage : System.Web.UI.MasterPage
{
public bool ShowNavigation
{
get
{
return TreeView1.Visible;
}
set
{
TreeView1.Visible = value;
NIIT
The scope of the preceding property is declared as public so that it can be accessed by
other classes. This property cannot be directly accessed by the content pages. To access
this property, the content pages have to use the built-in Page.Master property. However,
you cannot access the ShowNavigation property directly by using the
Page.Master.ShowNavigation statement. This is because the Page.Master property
does not have any information about the custom properties that have been added in
derived master page class. To access such custom properties from the content page, you
need to cast the Page.Master object to the appropriate type, as shown in the following
code snippet:
protected void btnHide_Click(object sender, EventArgs e)
{
MyMasterPage master = (MyMasterPage)this.Master;
master.ShowNavigation = false;
}
protected void 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
Practice Questions
1.
Which of the following tags is used to apply the styles given in an external style
sheet to a Web page?
a.
b.
c.
d.
<head>
<link>
<style>
<page>
2.
The <link> tag should always be defined within the _________ element of the
HTML document.
a. <body>
b. <p>
c. <head>
d. <title>
3.
If you do not want the theme property to be applied to a particular control, you can
set the __________ property of that control on the Web page to false.
a. EnableTheming
b. Theme
c. StyleSheetTheme
d. PageTheme
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
NIIT
Summary
In this chapter, you learned that:
Styles are used to define a set of formatting options that can be reused on a single or
multiple Web pages.
Styles can be defined in any of the following ways:

z
Using inline styles
z
Using an embedded style sheet
z
Using an external (linked) style sheet
Inline styles are style definitions that are applied to the style property of a particular
HTML element.
An embedded style sheet is a group of styles that are defined by using the <style>
tag.
The style definitions in an external style sheet are stored in a separate file having the
.css extension.
ASP.NET themes are a collection of properties that enable you to define the
appearance of Web pages and controls on your website.
You can apply a theme either to a particular Web page or to all the Web pages on a
website.
To bind a theme at the page level, you need to set the Theme attribute of the @ Page
directive.
To apply a theme to the entire website, you need to configure the <pages> element in
the web.config file.
You can create more than one theme for the same control.
Master pages enable you to create a page layout that you can use with selected or all
Web pages on your website.
A master page contains the following elements:

z
HTML or ASP.NET elements
z
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
NIIT

09 ASP - NET Chapter 03 PDF

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

09 ASP - NET Chapter 03 PDF

Caricato da

Copyright:

Formati disponibili

You can create a website by creating several Web pages

connected to each other. However, a professional website

Working with Styles

Using inline styles

Using an embedded style sheet

Using an external (linked) style sheet

Using Inline Styles

Using an Embedded Style Sheet

Introducing Styles, Themes, and Master Pages 3.3

Using an External (Linked) Style Sheet

3.4 Introducing Styles, Themes, and Master Pages

Task 3.1: Creating Styles by Using Style Builder

Task 3.2: Modifying a Style Rule by Using the CSS Properties

Introducing Styles, Themes, and Master Pages 3.5

Task 3.3: Creating a Style Sheet

3.6 Introducing Styles, Themes, and Master Pages

Working with Themes

Introducing Styles, Themes, and Master Pages 3.7

Task 3.4: Creating a Theme

Applying a Theme to a Web Page

3.8 Introducing Styles, Themes, and Master Pages

Applying a Theme to a Website

Creating Multiple Skins

Introducing Styles, Themes, and Master Pages 3.9

3.10 Introducing Styles, Themes, and Master Pages

Working with Master Pages

Creating a Master Page

ContentPlaceHolder controls: ContentPlaceHolder controls are that portion of the

Introducing Styles, Themes, and Master Pages 3.11

Connecting Master Pages and Content Pages

3.12 Introducing Styles, Themes, and Master Pages

Content Page Supplying the Placeholder Content to the Master Page

Introducing Styles, Themes, and Master Pages 3.13

Creating Nested Master Pages

Interacting with a Master Page Programmatically

Introducing Styles, Themes, and Master Pages 3.15

3.16 Introducing Styles, Themes, and Master Pages

Styles can be defined in any of the following ways:

A master page contains the following elements:

Content pages can interact with the master pages programmatically.

Introducing Styles, Themes, and Master Pages 3.17

3.18 Introducing Styles, Themes, and Master Pages

Potrebbero piacerti anche