STYLING WITH THEMES Active server pages (ASP.NET) 1 Chapter-5

Topics covered 2  Styling a web site, from styling individual elements to the use of CSS style sheets  Developing style sheets for an application in VWD  Using ASP.NET 2.0’s themes and skins to rapidly develop styled web content that conforms to a standard look and feel  Adding style to the Wrox United site using themes and skins

Styling a Site 3  Style Attributes The easiest and quickest way to change the way an element appears on a page is to add a style attribute. The style attribute can be applied to any visible element on a page. For example: This is a styled “div” tag

CSS—Cascading Style Sheets 4  Embedded Style Sheets If you are only interested in styling a single page, you can embed style information in the section of the HTML for the page. For example:.HighlightedText { font-family: ‘Trebuchet MS’; Color: Navy; }

CSS—Cascading Style Sheets 5  Separate Style Sheets When you have style definitions encapsulated within tags, it’s a really simple matter to extract that information into a separate style sheet. All you need to do is create a file with the file extension of.css, copy across all the style information from your web page, and then add a link to that style sheet as follows:

CSS—Cascading Style Sheets 6  Styling Server controls Server controls are somewhat different. Because a server control will be converted to appropriate HTML when it is rendered, the available properties will be different. For example the following label is rendered in a browser as a span element like this This is an ASP.NET label

Limitations of CSS and Server-Side Code Styles 7  When you style a static HTML web site using CSS, it works just fine, but when it comes to server-side elements, you will start to run into problems. Take, for example, a simple ASP.NET Panel control. If you drag a Panel control onto a page, add some text, and view the page in two different browsers (for example, Internet Explorer and an older or more limited browser like Links), you may see different results when you view the source of the page.

Limitations of CSS and Server-Side Code Styles 8  Here’s the example source code: This text is contained within an ASP.NET Panel control as rendered in IE6 This text is contained within an ASP.NET Panel control as rendered in Mozilla 5.0 This text is contained within an ASP.NET Panel control

Limitations of CSS and Server-Side Code Styles 9  Although ASP.NET has removed a lot of issues like this from our day-to-day programming lives, the problem still remains that what you see on the server side isn’t the same as you will see on the client side, and you can’t guarantee that an element will always be rendered in the same way on every browser.  What ASP.NET attempts to do is to provide a mechanism for specifying the appearance of an element based on its server-side control type, not on its client-side control type, so that when a control is rendered on different browsers, consistency is maintained where possible. This is achieved using themes and skins.

Themes and skins 10  Themes are used to define the look and feel of a web site, similarly to how pages are styled using CSS.  However, unlike CSS, themes can specify how server-side elements, such as a TreeView control, will appear when they are rendered on the browser.  Remember that server controls have to be converted to standard HTML and possibly JavaScript if a browser is to understand how to render them on a page.  A themed server control will have style attributes applied to each of the relevant client-side elements that are generated when the page is requested.

Themes and skins 11  A theme can be used in one of two ways.  It can be used as a Stylesheet theme, which acts in a similar way to a regular CSS style sheet.  The alternative is to use your theme as a Customization theme, which changes the order of preference for style rules that you may be used to, so that the Customization theme will specify the style to use for each element, overriding any style preferences specified in a separate style sheet, or even in the style attributes of an element.  The basic method for creating a theme is the same, whichever way you use it. Additionally, you can choose to use one theme throughout an entire site, or a different theme on each page.

Themes and skins 12  The process of creating a theme involves creating a.skin file, which defines the appearance of each element on the page, and placing this skin file within a folder, the name of which specifies the name of the theme. All themes are stored within a folder in an application directory called App_Themes.

Customization Themes—You Have Control! 13  A Customization theme has total control over the styling of elements on a page.  If you manually style elements on a page controlled by a Customization theme, those styles will only be applied if the elements to which they are added are not already styled by the theme.  To apply Customization themes open the properties for the Document then go to the theme property and select your desired theme.

Stylesheet Themes—CSS for Server Controls 14  If you’d prefer to use your themes like a style sheet, you can easily choose to do so by using the StyleSheetTheme attribute at the top of a page.  This change in attribute means that you can still give developers the freedom to add some small amounts of styling to controls using style attributes on each tag, while providing a common look and feel for a site in the theme itself.

Using Both Stylesheet Themes and Customization Themes 15  No rules in ASP.NET specify that you can only use a Stylesheet theme or a Customization theme in your pages. If you want to have two levels of styling available to your pages, some mandatory and some optional, you can use both types of theme on your site.  The following is the order of application when it comes to styling: 1.Stylesheet theme 2.CSS styles 3.Element styles 4.Customization theme

Themes and CSS Together 16  There’s a really simple way to integrate style sheets in your themes. All you need to do is add a style sheet file to the theme’s directory and slot it in right next to your skin files.  By adding a CSS style sheet to a theme folder, that style sheet is now available to all pages that use that theme.  After the theme has been applied, whether it’s a Customization theme or a Stylesheet theme, the styles in the style sheet are available both to the skin files within the theme’s folder, and within the page itself.

Applying Styling to a Site 17  Because a Web.config file is the central location for all site-wide settings, this is where you can store default theme settings for your site. The basic syntax for this is as follows:

Applying Styling to a Site 18  Here’s a slightly amended order of application for themes, including the Web.config themes: 1.Web.config Stylesheet theme 2.Page Stylesheet theme 3.CSS styles 4.Element styles 5.Web.config Customization theme 6.Page Customization theme

Styling and Layout Best Practices 19  And style is nothing without layout—the two go hand in hand. Pages need to be structured sensibly so that any user can view and understand what you’re trying to tell them.  Now that you’ve grasped the basics of styling and presenting a site, the two concepts you need to learn about now are:  Usability  Accessibility

Styling and Layout Best Practices 20 Usability  Usability is all about keeping users on your site, and giving them the best possible user experience while they browse. Users want to see prompt responses to their requests, they want to be able to find what they want, and they want to be able to understand what the site is all about.  A site that has fifteen fonts on it will appear cluttered, hard to read, and most likely look like it was put together by someone who’d never spent time reading content on a web site.

Styling and Layout Best Practices 21 Usability  The core principles of usability are as follows:  Learnability: Design the user interface so that it takes a minimum of time for a first-time visitor to understand the design and use the site.  Efficiency: Make the site efficient so that experienced users can accomplish tasks swiftly.  Memorability: A user should be able to remember how to use the system next time they come to visit.  Bugability: Squash those errors where possible, and if errors occur, make them user-friendly and recoverable.  Satisfaction: Users should like and enjoy using your site.

Styling and Layout Best Practices 22 Accessibility  Accessibility is all about making sites accessible by all users. For example, web users who are partially sighted access the web with the assistance of a screen reader, which reads the contents of a web site aloud.  At another end of the spectrum, you could also find the browsers used on different devices like Pocket PCs. Smart phones employ some great techniques for scaling images to make a site fit on a screen  For further guidelines visit:

23 Q & A ?