Chapter 12


Published on

Styles, Themes & Master Pages

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Chapter 12

  1. 1. • 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
  2. 2. Styles gives you a wide range of consistent formattingproperties that you can apply to any HTML element.They allow you to add borders, set font details, changecolors, 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
  3. 3. Visual Studio provides an indispensable stylebuilder that lets you create styles by pickingand choosing your style preferences in adedicated dialog box.Click inside a control on a web pagechoose Format ➤ New Style from the menu.This opens the New Style dialog box In theSelector box at the top of the window, choose“(inline style)” to specify that you’re creatingyour style directly in the HTML markup
  4. 4. Once you’ve created a style, you have two easy optionsfor modifying it in Visual Studio.To show the CSS Properties window, open a web pagein Visual Studio and choose View ➤ CSS Properties.The CSS Properties window provides an exhaustive listof all the formatting properties you can use in a style.This list is grouped into categories, and the properties ineach category are sorted alphabetically. The ones thatare currently set are displayed in bold.
  5. 5. 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 (likeStyleSheet.css), and click Add.In a style sheet, you define several styles (also knownas rules). You can then use these rules to formatordinary HTML and ASP.NET controls.Each rule defines a collection of formatting presets thatdetermines how a single ingredient in your web pageshould be formatted.
  6. 6. Visual Studio includes a CSS Outline window that showsyou an overview of the rules in your style sheet.When you’re editing a style sheet, you can show theCSS Outline window by choosing View ➤ OtherWindows ➤ Document Outline.Rule names are technically known as selectors, becausethey identify the parts of an HTML document that shouldbe selected for formatting.
  7. 7. To use a rule in a web page, you first need to link thepage to the appropriate style sheet. You do this byadding a <link> element in the <head> section of yourpage. The <link> element references the file withthe styles you want to use.<html xmlns=""><head runat="server"><title>...</title><link href="StyleSheet.css" rel="stylesheet"type="text/css" /></head><body>...</body></html>
  8. 8. The problem is that CSS rules are limited to afixed set of style attributes.For example, the CheckBoxList control includesproperties that control how it organizes items intorows and columns. Although these propertiesaffect the visual appearance of the control, they’reoutside the scope of CSSYou might want to define part of the behavior ofthe control along with the formatting. Forexample, you might want to standardize theselection mode of a Calendar control or thewrapping in a TextBox. This obviously isn’tpossible through CSS
  9. 9. Like CSS, themes allow you to define a set ofstyle details that you can apply to controls inmultiple pages. However, unlike CSS, themesaren’t implemented by the browser. Instead,ASP.NET processes your themes when it createsthe page.Styles are particularly useful when you want toapply the same formatting to web controls andordinary HTML elements. Themes areindispensable when you want to configure controlproperties that can’t be tailored with CSS
  10. 10. • 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
  11. 11. To actually make your theme accomplish anything,you need to create at least one skin file in thetheme folder. A skin file is a text file with the .skinextension.A skin file is essentially a list of control tags with theirproperties that you want to standardize.<asp:ListBox runat="server" ForeColor="White"BackColor="Orange"/>
  12. 12. ASP.NET also supports global themes.These are themes you place in the folder :c:Inetpubwwwrootaspnet_clientsystem_webv2.0.50727ThemesHowever, it’s recommended that you use local themes,even if you want to create more than one website that hasthe same theme.If you have a local theme with the same name as a globaltheme, the local theme takes precedence, and the globaltheme is ignored.The themes are not merged together.
  13. 13. To create theme for your project, select Website ➤ Add New Item, andchoose Skin File. Visual Studio will warn you that skin files need to beplaced in a subfolder of the App_Themes folder. If you choose Yes, VisualStudio 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 ofthe Page directive to the folder name for your theme. (ASP.NET willautomatically scan all the skin files in that theme.)<%@ Page Language="C#" AutoEventWireup="true" ...Theme="FunkyTheme" %>
  14. 14. When you apply a theme to a page, ASP.NET considers eachcontrol on your web page and checks your skin files to seewhether they define any properties for that control. If ASP.NETfinds a matching tag in the skin file, the information from theskin file overrides the current properties of the control.However, in some cases you might want to change thisbehavior so that your controls can fine-tune a theme byspecifically overriding certain control details.To make this change, just use the StyleSheetTheme attributeinstead of the Theme attribute in the Page directive.<%@ Page Language="C#" AutoEventWireup="true" ...StyleSheetTheme="FunkyTheme" %>
  15. 15. By configuring the <pages> element in the web.configfile for your application, as shown here:<configuration><system.web><pages theme="FunkyTheme">//or <pages styleSheetTheme= "FunkyTheme">...</pages></system.web></configuration>
  16. 16. You might have several types of text boxes that aredistinguished based on where they’re used or what type ofdata they contain i.e. you may want to create more than onetheme for the same control.To get around this problem, you need to create a named skinby 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 thecontrol on your web page to match<asp:Button ID="Button1" runat="server" ...SkinID="Dramatic" />
  17. 17. If you want a navigation bar on every web page not only doyou need to copy the same user interface markup to eachpage, you also need to make sure it ends up in the sameplace.And even if you copy your markup on all pages, you’re stillleft with an extremely brittle design. If you decide to updateyour navigation bar or change its position later, you’ll needto 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 themacross your website.
  18. 18. Master pages are similar to ordinary ASP.NET pages. Likeordinary pages, master pages are text files that can containHTML, web controls, and code.However, master pages have a different file extension(.master instead of .aspx), and they can’t be viewed directlyby a browser. Instead, master pages must be used by otherpages, which are known as content pages.Essentially, the master page defines the page structure andthe common ingredients. The content pages adopt thisstructure and just fill it with the appropriate content.
  19. 19. 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 pagethat includes two ContentPlaceHolder controls. One isdefined in the <head> section. The second, more importantContentPlaceHolder is defined in the <body> section, andrepresents the displayed content of the page.The ContentPlaceHolder is the portion of the Master pagethat a content page can change.
  20. 20. For the most part, HTML uses a flow-based layout. That means asmore content is added, the page is reorganized and other content isbumped out of the way. This layout can make it difficult to get theresult you want with master pages.Although you can’t avoid this problem completely, there are twooptions to help you control the layout of a web page:HTML tables: Using an HTML table in your master page, you canbreak a portion of your page into columns and rows. You can thenadd a ContentPlaceHolder in a single cell, ensuring that the othercontent is aligned more or less the way you want.CSS positioning: Using CSS styles, you can divide your content intocolumns or regions, each of which is held in a separate <div>element. You then place a single ContentPlaceHolder in each <div>.