Beginning ASP.NET 2
.0.pdf
Styling with Themes
you used the Web.config file in Chapter 4 when you specified site access permissions for different user accounts. 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:
<?xml version=”1.0”?> <configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<pages theme=”myTheme” styleSheetTheme=”myOtherTheme” />
You can specify both a Stylesheet theme and a Customization theme in the Web.config file. If a theme is specified in the Web.config file and no theme is specified in a page, the theme in the Web.config will be applied. Additionally, if your Web.config specifies a Customization theme for a site and you specify a Stylesheet theme for your page, the Customization theme from the Web.config will be applied. Here’s a slightly amended order of application for themes, including the Web.config themes:
1.
2.
3.
4.
5.
6.
Web.config Stylesheet theme
Page Stylesheet theme
CSS styles
Element styles
Web.config Customization theme
Page Customization theme
If you want to completely control the appearance of an entire site, use a
Customization theme in the Web.config file.
In the next Try It Out, you quickly specify a site-wide theme for the pages in the small application you’ve been building in this chapter so far.
Try It Out |
Applying Themes to a Site |
1.Right-click the Chapter05 folder and select Add New Item. In the dialog, create a new Web configuration file (Web.config) and click OK.
2.Add the following line of code (highlighted in bold) to the Web.config file and save the file:
<?xml version=”1.0”?> <!--
Note: As an alternative to hand editing this file you can use the web admin tool to configure settings for your application. Use the Website->Asp.Net Configuration option in Visual Studio.
A full list of settings and comments can be found in machine.config.comments usually located in \Windows\Microsoft.Net\Framework\v2.x\Config
--> <configuration>
169
Chapter 5
<appSettings/>
<connectionStrings/>
<system.web>
<pages theme=”red” styleSheetTheme=”blue” />
3.Remove all Theme and StyleSheetTheme attributes from all of the pages used in this chapter and run the application. All of the pages in the site will now be rendered in the red theme, but note in Figure 5-27 the result in the ThemeDefault page.
Figure 5-27
How It Works
The resulting output in the ThemeDefault.aspx page seems to be a bit of a mixture of two different themes, yet you specified that all pages in a site should use the red Customization theme. However, in the previous example, you added a CSS file and some additional style information to the blue theme, and because the blue theme is set as a Stylesheet theme for the site, and because there are no equivalents for these styles in the red theme, these styles are picked up from the blue theme and applied to the body text and the “Unstyled label” label control:
The first line of HTML code is part of the body of the page:
Default page!<br />
So this is styled using the blue theme’s body style from the BlueStyleSheet.css file:
body
{
font-family:Arial;
}
170
Styling with Themes
The next item in the code for this page is the “Styled label” control, which has a SkinID of textLabel:
<asp:Label ID=”Label1” SkinID=”textLabel” runat=”server” Text=”Styled label” Font-Bold=”True”></asp:Label>
Because this SkinID exists in both themes, the red theme is applied, because this theme is set to be the Customization theme in the Web.config file:
<asp:Label SkinId=”textLabel” runat=”server” Font-Names=”Garamond” Font-Size=”11pt” ForeColor=”DarkRed” />
Here’s the line of code in the Web.config again:
<pages theme=”red” styleSheetTheme=”blue” />
Remember that the theme attribute represents the Customization theme. However, the specified Customization theme in this case, the red theme, has no SkinID for a “bigLabel”, so the blue theme is used instead:
<asp:Label ID=”Label2” SkinID=”bigLabel” runat=”server” Text=”Unstyled label”></asp:Label>
So the last item on the page is styled according to the blue theme:
<asp:Label SkinId=”bigLabel” runat=”server” CssClass=”bigtext”></asp:Label>
One last thing to note — the Label control is still part of the body of the page, and because no additional font information has been specified for the control, it also inherits the CSS style for the body of the page from the blue theme.
The final example to look at in this chapter is that of the themes used in the Wrox United application. The following section takes a quick look at the themes and styling in the application.
Themes in Wrox United
The themes defined for the Wrox United site control the appearance of the team’s site. Two themes are available for the site: a red theme and a blue theme. The normal, everyday theme is the red theme, and it reflects the team’s home outfit in blocks of bold red and yellow. The other theme available to contrast with the red theme is the blue theme, which is designed mainly to show up the differences between two different themes being applied to a site. Figure 5-28 shows the site in its traditional Wrox Red colors.
171
Chapter 5
The way that themes are applied in Wrox United is slightly different from the techniques that you’ve looked at in this chapter, because it relates to user preferences. As you saw in Chapter 4, you can add user accounts to a web site to enable users to log in to a site. Once a user has logged on to the Wrox United site, there is some code that enables that user to store personal information (the user’s name, address, and so on), and to store personal preferences, such as the theme to apply to the site when the user logs on.
The code that handles the theme switching is explained in detail in Chapter 11, because it involves an understanding of several techniques that you’ve not yet met this far in the book. However, in the following Try It Out, you can see how the themes are applied to the Wrox United site, and it steps through the most interesting bits in the theme definitions for the Wrox United site.
Figure 5-28
172
Styling with Themes
Try It Out |
Using Themes in Wrox United |
1.Open up your local copy of the Wrox United application — this should be stored within your
C:\BegASPNET2\WroxUnited folder.
2.Press Ctrl+F5 to run the site and you’ll be taken to the main front page in its default
color scheme. In the login box near the bottom of the left-hand column, log in as the user Lou, password lou@123. In the box that appears below the login box, you need to click the Modify Account link, as highlighted by the hand-style cursor in Figure 5-29.
Figure 5-29
173
Chapter 5
3.In the screen that appears (see Figure 5-30), select the Wrox Blue theme from the Theme drop-down list and click Save Changes.
Figure 5-30
4.Click the Home link at the top of the menu at the side of the page to go back to the front page of the site and you’ll now see the site rendered with the blue theme, as shown in Figure 5-31.
You might not be able to see the difference that clearly in a printed book, but because it’s quite easy to try out for yourself, give it a go and see the changes for yourself!
174
Styling with Themes
Figure 5-31
How It Works
This example has demonstrated the theme-switching capability of the Wrox United site, which is something you’ll look at in a lot more detail in Chapter 11, but the important part of the exercise to concentrate on here is the styling of the site itself.
Many styles are in use on this site, so look at the Wrox Red theme first of all and see how the styling is applied to the elements on the page using this theme.
The Wrox United red skin (the WroxRed.skin file within the WroxRed Theme folder) is included with the rest of the code for the site (available at www.wrox.com). The following listing shows some of the styles defined in this skin file:
175
Chapter 5
<asp:Label runat=”server” ForeColor=”#000000” BackColor=”transparent”></asp:Label>
<asp:TextBox runat=”server” ForeColor=”#000000” BorderWidth=”1px” BorderStyle=”Solid” BorderColor=”#ff0000” BackColor=”Transparent”></asp:TextBox>
<asp:Button runat=”server” BorderStyle=”Solid” BorderColor=”#ff0000” BorderWidth=”1pt” ForeColor=”#000000” BackColor=”#ffe5e5”></asp:Button>
<asp:HyperLink runat=”server” Font-Underline=”True” BorderStyle=”None”> </asp:HyperLink>
Notice that there are specific style definitions for Label, TextBox, Button, HyperLink, and Calendar controls, which means that every instance of a control of each of those types will be styled as defined in this skin file.
Here’s the TextBox definition:
<asp:TextBox runat=”server” ForeColor=”#000000” BorderWidth=”1px” BorderStyle=”Solid” BorderColor=”#ff0000” BackColor=”Transparent”></asp:TextBox>
The TextBox has been styled so that it has a thin solid red border around it. Note that the value s pecified for the BorderColor attribute doesn’t actually say red in English, but instead it uses the hexadecimal representation of a pure, bright red color.
The hash symbol (#) indicates that the color to be applied is provided as a hexadecimal value. The next two characters control how much red to add to the control, from 00 to FF. The next two characters control the level of green to apply, and the last two control the level of blue. The hexadecimal value 000000 represents a pure black (none of each color), whereas the value FFFFFF renders as white (all of every color).
The hexadecimal counting system (sometimes known as Base 16) means that the hex value FF corresponds to the decimal value of 256. With 256 different values for each component, that enables you to choose from one of 16 million possible color values!
The Wrox Red theme also has an associated CSS style sheet, WroxRed.css, which is also available in the code for download. The following is an extract from this file:
html, body { margin: 0;
padding:0 5px 0 5px; background-color: #f00; color: #000;
}
title {
color: #f66;
}
#nav {
background-color: #f00; width: 20px;
float: left; margin-left: -1px;
176
Styling with Themes
padding: 10px;
}
#content {
padding: 10px; margin-left: 230px; width: 100%;
}
The styles in use in this theme define some simple color and positioning for some of the elements used on the site. The #nav definition and the #content definition are used to match all elements on a page with an ID set to nav or content respectively, rather than specifying the class attribute, or specifying a specific element type to style.
Styling and Layout Best Practices
The concepts discussed in this chapter can be used for both good and evil. You can have as many style definitions in your site as you like, but if you have little or no sense of style, you could make a big mess of things. 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 and accessibility.
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.
The goal of every web development team is to make a site as usable as possible, which means developers working together with designers to provide an attractive and intuitive user interface, which is where you can start to employ the techniques discussed in this chapter. 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.
177
Chapter 5
Usability is an art that has been written about by many people, but the main site you should refer to when it comes to usability guidelines is www.useit.com/, which is the web site owned by Jakob Nielsen. I recommend that all developers spend some time looking in to this area and gain some key insights into making your sites really effective.
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. Alternatively, these users could have their screens set to a much lower resolution, where most sites would be unable to fit on the screen. At another end of the spectrum, you could also find mobile users connecting to the Web using a Pocket PC device that’s only capable of displaying 320×240 pixels of information at one time. The browsers used on different devices like Pocket PCs employ some great techniques for scaling images to make a site fit on a screen. You could also find yourself having to cater to users who have very limited-functionality browsers; perhaps browsers that don’t allow the use of JavaScript for client-side code, or that don’t display images on a page to save on bandwidth. If an image were missing from a page, it would be nice to know what the image was supposed to represent to give it some context in the absence of the image itself.
At the core of accessibility are some facts that will help you to make your sites as accessible as possible. For example, if you have a screen reader reading out your source code, you should always include an HTML alt attribute on your images, so that the screen reader can describe what the image represents. You should always provide code that can render your site on browsers that don’t support HTML frames using the <noframes> element, and you should avoid, where possible, using many levels of nested HTML tables to lay out a site, because a screen reader will read out the contents of every cell and row.
Many different guidelines are available for making a site accessible, and the best place to start reading is the following site: www.w3.org/WAI/.
This site is the home page for the Web Accessibility Initiative and is packed full of useful and important advice.
Despite the existence of myriad resources, the vast majority of developers in the world have never given a second thought to making a site truly accessible. Many more have thought about it and made some changes to their site in an attempt to make it more accessible, but building truly accessible sites is actually quite difficult.
Take for example the Wrox United web site. This book has concentrated on teaching you how to build ASP.NET web sites. The main focus of our efforts was in teaching what is possible, the techniques you can use, and how you can get results quickly. To make this site truly accessible would take a fair bit more time, and perhaps that would be the topic for another book.
We strongly recommend learning more about building accessible web sites for any public site you develop, because it’s actually illegal (though not often enforced) to only provide an inaccessible web site, as described in Section 508 (see www.section508.gov) in the U.S., and the Disability Rights Commission’s (DRC) Disability Discrimination Act (DDA) Code of Practice (www.opsi.gov.uk/acts/
178