Chapter 12

• Style Types
• Style Builder
• The CSS Properties Window
• Creating a StyleSheet
• The CSS Outline Window
• The Apply Style Window
• Themes, Stylesheet Themes
• How to Create and Apply Themes
• Skin File, Named Skin
• Master Pages
• Content Pages
• Master Page with Multiple Content Regions
• Advanced Master Pages
• Style Based Layouts

Styles gives you a wide range of consistent formatting
properties that you can apply to any HTML element.

They allow you to add borders, set font details, change
colors, add margin space and padding, and so on.
Web pages can use styles in three different ways:

• Inline style
• Internal style sheet
• Internal style sheet

Visual Studio provides an indispensable style
builder that lets you create styles by picking
and choosing your style preferences in a
dedicated dialog box.

Click inside a control on a web page
choose Format ➤ New Style from the menu.
This opens the New Style dialog box In the
Selector box at the top of the window, choose
“(inline style)” to specify that you’re creating
your style directly in the HTML markup

Once you’ve created a style, you have two easy options
for modifying it in Visual Studio.

To show the CSS Properties window, open a web page
in Visual Studio and choose View ➤ CSS Properties.

The CSS Properties window provides an exhaustive list
of all the formatting properties you can use in a style.
This list is grouped into categories, and the properties in
each category are sorted alphabetically. The ones that
are currently set are displayed in bold.

To create a style sheet in Visual Studio, choose Website
➤ Add New Item from the Visual Studio menu. Then,
pick the Style Sheet template, specify a file name (like
StyleSheet.css), and click Add.

In a style sheet, you define several styles (also known
as rules). You can then use these rules to format
ordinary HTML and ASP.NET controls.

Each rule defines a collection of formatting presets that
determines how a single ingredient in your web page
should be formatted.

Visual Studio includes a CSS Outline window that shows
you an overview of the rules in your style sheet.

When you’re editing a style sheet, you can show the
CSS Outline window by choosing View ➤ Other
Windows ➤ Document Outline.

Rule names are technically known as selectors, because
they identify the parts of an HTML document that should
be selected for formatting.

To use a rule in a web page, you first need to link the
page to the appropriate style sheet. You do this by
adding a <link> element in the <head> section of your
page. The <link> element references the file with
the styles you want to use.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>...</title>
<link href="StyleSheet.css" rel="stylesheet"
type="text/css" />
</head>
<body>
...
</body>
</html>

The problem is that CSS rules are limited to a
fixed set of style attributes.

For example, the CheckBoxList control includes
properties that control how it organizes items into
rows and columns. Although these properties
affect the visual appearance of the control, they’re
outside the scope of CSS

You might want to define part of the behavior of
the control along with the formatting. For
example, you might want to standardize the
selection mode of a Calendar control or the
wrapping in a TextBox. This obviously isn’t
possible through CSS

Like CSS, themes allow you to define a set of
style details that you can apply to controls in
multiple pages. However, unlike CSS, themes
aren’t implemented by the browser. Instead,
ASP.NET processes your themes when it creates
the page.

Styles are particularly useful when you want to
apply the same formatting to web controls and
ordinary HTML elements. Themes are
indispensable when you want to configure control
properties that can’t be tailored with CSS

• To use a theme in a web application, you need to
create a folder that defines it.

• This folder needs to be placed in a folder named
App_Themes, which must be placed inside the
top-level directory for your web application.

• An application can contain definitions for multiple
themes, as long as each theme is in a separate
folder.

• Only one theme can be active on a given page at
a time

To actually make your theme accomplish anything,
you need to create at least one skin file in the
theme folder. A skin file is a text file with the .skin
extension.

A skin file is essentially a list of control tags with their
properties that you want to standardize.

<asp:ListBox runat="server" ForeColor="White"
BackColor="Orange"/>

ASP.NET also supports global themes.

These are themes you place in the folder :
c:Inetpubwwwrootaspnet_clientsystem_webv2.0.50727Themes

However, it’s recommended that you use local themes,
even if you want to create more than one website that has
the same theme.

If you have a local theme with the same name as a global
theme, the local theme takes precedence, and the global
theme is ignored.

The themes are not merged together.

To create theme for your project, select Website ➤ Add New Item, and
choose Skin File. Visual Studio will warn you that skin files need to be
placed in a subfolder of the App_Themes folder. If you choose Yes, Visual
Studio will create a folder with the same name as your skin file.

Copy and paste control tags from other web pages.
<asp:ListBox runat="server" ForeColor="White“ BackColor="Orange"/>
<asp:TextBox runat="server" ForeColor="White" BackColor="Orange"/>
<asp:Button runat="server" ForeColor="White" BackColor="Orange"/>

To apply the theme in a web page, you need to set the Theme attribute of
the Page directive to the folder name for your theme. (ASP.NET will
automatically scan all the skin files in that theme.)

<%@ Page Language="C#" AutoEventWireup="true" ...
Theme="FunkyTheme" %>

When you apply a theme to a page, ASP.NET considers each
control on your web page and checks your skin files to see
whether they define any properties for that control. If ASP.NET
finds a matching tag in the skin file, the information from the
skin file overrides the current properties of the control.

However, in some cases you might want to change this
behavior so that your controls can fine-tune a theme by
specifically overriding certain control details.

To make this change, just use the StyleSheetTheme attribute
instead of the Theme attribute in the Page directive.

<%@ Page Language="C#" AutoEventWireup="true" ...
StyleSheetTheme="FunkyTheme" %>

By configuring the <pages> element in the web.config
file for your application, as shown here:

<configuration>
<system.web>
<pages theme="FunkyTheme">
//or <pages styleSheetTheme= "FunkyTheme">
...
</pages>
</system.web>
</configuration>

You might have several types of text boxes that are
distinguished based on where they’re used or what type of
data they contain i.e. you may want to create more than one
theme for the same control.

To get around this problem, you need to create a named skin
by supplying a SkinID attribute.

<asp:Button runat="server" ForeColor="White“ BackColor=
"DarkOrange“ Font-Bold="True" SkinID="Dramatic"/>

To use a named skin, you need to set the SkinID of the
control on your web page to match

<asp:Button ID="Button1" runat="server" ...
SkinID="Dramatic" />

If you want a navigation bar on every web page not only do
you need to copy the same user interface markup to each
page, you also need to make sure it ends up in the same
place.

And even if you copy your markup on all pages, you’re still
left with an extremely brittle design. If you decide to update
your navigation bar or change its position later, you’ll need
to modify every web page to apply the same change.

A better choice is to use ASP.NET’s master pages feature,
which allows you to define page templates and reuse them
across your website.

Master pages are similar to ordinary ASP.NET pages. Like
ordinary pages, master pages are text files that can contain
HTML, web controls, and code.

However, master pages have a different file extension
(.master instead of .aspx), and they can’t be viewed directly
by a browser. Instead, master pages must be used by other
pages, which are known as content pages.

Essentially, the master page defines the page structure and
the common ingredients. The content pages adopt this
structure and just fill it with the appropriate content.

To create a master page in Visual Studio, select Website ➤
Add New Item from the menu.

Select Master Page, and click Add. This creates a blank page
that includes two ContentPlaceHolder controls. One is
defined in the <head> section. The second, more important
ContentPlaceHolder is defined in the <body> section, and
represents the displayed content of the page.

The ContentPlaceHolder is the portion of the Master page
that a content page can change.

For the most part, HTML uses a flow-based layout. That means as
more content is added, the page is reorganized and other content is
bumped out of the way. This layout can make it difficult to get the
result you want with master pages.

Although you can’t avoid this problem completely, there are two
options to help you control the layout of a web page:

HTML tables: Using an HTML table in your master page, you can
break a portion of your page into columns and rows. You can then
add a ContentPlaceHolder in a single cell, ensuring that the other
content is aligned more or less the way you want.

CSS positioning: Using CSS styles, you can divide your content into
columns or regions, each of which is held in a separate <div>
element. You then place a single ContentPlaceHolder in each <div>.

Chapter 12

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (16)

En vedette

En vedette (20)

Similaire à Chapter 12

Similaire à Chapter 12 (20)

Plus de application developer

Plus de application developer (20)

Dernier

Dernier (20)

Chapter 12