Downloaded 13 times
More Related Content
More from application developer
Chapter 12
- 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. Styles gives youa 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
- 3. Visual Studio providesan 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
- 5. Once you’ve createda 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.
- 6. To create astyle 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.
- 7. Visual Studio includesa 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.
- 8. To use arule 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>
- 9. The problem isthat 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
- 10. Like CSS, themesallow 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
- 11. • To usea 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
- 13. To actually makeyour 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"/>
- 14. ASP.NET also supportsglobal 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.
- 15. To create themefor 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" %>
- 16. When you applya 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" %>
- 17. 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>
- 18. You might haveseveral 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" />
- 19. If you wanta 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.
- 20. Master pages aresimilar 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.
- 21. To create amaster 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.
- 22. For the mostpart, 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>.