Applying CSS Classes Working With HTML Tables

Working With Templates 8-9 Designer. Variances such as the consumers browser choice, the browser window size, and what other objects a contributor has placed in the contributor data file can make the Web site appear to be organized differently. Using CSS is the more efficient method, because CSS files are a managed object and can allow for maximizing reusability. If you place a table in an asset, such as a subtemplate, then to use that same structure in other assets, you must re-create the table. If you do use tables in this way, then you must make the changes across multiple places when you want to make the changes. With CSS, you can identify the exact placement of each site asset, including elements, within the style sheet. Many prefer to use tables because they are easy to set up and create on the web page. A table offers a quick solution of structuring the relative placement. With a table, you can create a shape of cells that place data into relative placement to each other.

8.9 Applying CSS Classes

Site Studio, by default, applies font and paragraph settings directly inline to the text. Alternatively, you can apply classes from a cascading style sheet to your text and images. Using CSS classes, you can store all of your font and paragraph settings in one location and then apply those settings to your web page. This saves you time, because rather than change the font and paragraph settings for each individual heading or paragraph, you can specify a class for each one. If you must change those settings, simply update the class. To implement CSS classes, you insert a reference to your style sheet in the head of your page template. You can do this using a relative path, for example: link href=--HttpRelativeWebRoot--groupspublicdocumentsadacctstylesheet.css type=textcss rel=stylesheet Or, more typically, you put them in a fragment. Placing CSS references in a fragment does not expose the directory structure of your server. Then, apply the class names from the style sheet to your text and graphics by editing the page template in Source view or by using the Properties pane in Design view. Figure 8–6 Using the Properties Pane to Apply the Class MyNewStyle. The Site Assets pane in Designer can be very useful for adding, editing, and identifying the path to the Cascading Style Sheet in the content server. Many of the fragments that come with Site Studio contain CSS files as an asset to the fragment see Adding, Editing, and Deleting Fragment Assets on page 13-15. You can reference class names from those CSS files, too, if you like. 8-10 Oracle Fusion Middleware Users Guide for Site Studio Designer You may also want to make these classes available to contributors while working in the Contributor application. This helps you enforce consistency across the site and make site-wide style updates much easier.

8.10 Working With HTML Tables

HTML tables are often used in web page design. They can be used to structure a web page when you do not want to use cascading style sheets to do so. The treatment of HTML tables in a page template is no different from tables in other web pages. There are two principal uses for an HTML table: 1 to present data in a tabular format, and 2 to lay out text and graphics on a web page. As the designer of the site, you may find yourself using tables more frequently for the latter. Working in a table, you can control how content appears on the web page by specifying the size and location of the table, the size of each column and row, and the content that goes into each cell. You keep your site visitors from seeing the table by hiding its borders. In Site Studio, tables are especially useful for positioning contribution regions and the elements within them. To make specific edits to your table, you can modify the HTML TABLE tag directly in the Properties pane. You can also make changes in source view. Figure 8–7 Properties of the TABLE Tag in Design View In the Properties pane, you can change the background color, border width, cell padding, and several other settings. All of the attributes that would be entered into the TABLE tag are available in the Property Panel. For a complete description of the TABLE tag, visit the World Wide Web Consortium W3C Web site: http:www.w3.orgTRhtml401structtables.htmledef-TABLE .

8.11 Viewing Templates in Designer