SharePoint Designer provides a set of reporting tools for CSS that are pretty useful for checking the CSS implementation of a Web site and then comparing it with the Web standards for errors, prob-lems, mismatches, or usage. You can run reports on selected pages or across an entire Web site and then determine whether the CSS styles are being used efficiently. CSS Errors and CSS Usage are the two main CSS-related reports that you can run on your Web site:
n CSS Errors: Allows you to find CSS styles that exist but aren’t being used, CSS classes that are associated with elements but haven’t been defined, and mismatched cases when associating styles with elements
n CSS Usage: Allows you to determine usage of the various CSS rules and classes
To run the CSS reports, choose Tools ➪ CSS Reports to open the CSS Reports dialog box, as shown in Figure 12.19. The Errors tab allows you run reports to check for CSS errors, and the Usage tab allows you to run reports on usages of various CSS classes and rules. To run a CSS Error report across an entire Web site, follow these steps:
1. In the CSS Reports dialog box, click the All Pages radio button and then click the appro-priate check boxes for the issues you want to identify in the CSS implementation.
2. Click Check. This opens the CSS Reports task pane, as shown in Figure 12.20. You use the CSS Reports task pane to view the errors encountered in the CSS implementation on the selected Web pages.
3. After you identify the CSS issue and then qualify it as a valid problem, you can right-click on the error in the Reports task pane to navigate to the Web page and then take corrective measures to fix the issue.
FIGURE 12.19
Running CSS reports on a Web site by using SharePoint Designer
FIGURE 12.20
Using the CSS Reports task pane to find CSS errors
You can also access the CSS Reports dialog box by clicking the Play button in the CSS Reports task pane. If you run the CSS usage reports on an entire Web site, you should see an output similar to the one shown in Figure 12.21.
SharePoint Designer lists the CSS classes and rules that have been applied to the selected pages, indicates the location where the CSS style has been defined, and denotes the line number where the CSS style association exists on a Web page. You can use this report to quickly jump to the CSS style you want to modify in a CSS implementation on a large Web site.
NOTE NOTE
When you run CSS reports on SharePoint sites with the All Pages radio button selected, the report actually runs only on the selected pages. This has been designed to avoid introducing an overhead on the SharePoint site if multiple users run CSS reports simultaneously.FIGURE 12.21
Running CSS Usage reports for a Web page
Summary
CSS is one of the primary tools for Web designers to implement standardized styling across Web sites, helping to reduce redundancy and improve productivity. This chapter discussed some con-cepts about CSS to familiarize you with the CSS terminology. Then, I showed you how you can use the SharePoint Designer user interface to create and manage styles on Web pages. I took you through a number of exercises to familiarize you with the Apply Styles, Manage Styles, and CSS Properties task panes. You also learned about creating a CSS layout and using the CSS reporting features.
D
esigning Web sites entails that you consider a number of techniques to ensure uniformity and consistency in the formatting and brand-ing of the Web pages. It’s important to ascertain that users browsbrand-ing through the Web pages of a Web site feel a sense of standardization while navigating between various Web pages. You might not want to have Web pages inside a Web site presenting content in a manner that’s totally oblivi-ous of the presentation style of the entire Web site. For example, you may want to always have the navigation links and bars at the same location on the Web pages of the Web site so that when the user navigates around pages, he or she doesn’t feel confused.While CSS is a key technology that helps you maintain a consistent look and feel for your Web site, it applies mostly to styling, fonts, and formatting.
SharePoint Designer allows you to make use of a number of other technolo-gies, such as dynamic Web templates (DWTs), master pages, and page lay-outs to help you maintain a standard branding and layout across all the Web pages.
Although the implementation of the aforementioned technologies might be different, the concept behind them is similar. You mostly follow these steps to create Web site content by using these technologies:
n You create a template Web page that suits the requirements of your Web site’s design. In this template page, you define a uniform blue-print that’s implemented for the entire Web site or a set of pages inside the Web site. Usually, this is the time when you decide where to place common elements, such as branding images, navi-gation components and link bars, headers and footers, etc.