Design View Source View

Working With Templates 8-11 ■ Source View on page 8-12 ■ Preview on page 8-13

8.11.1 Design View

When you open a template page template, region template, or subtemplate in Designer, it opens in the workspace in design view, where you can edit the template as needed. The workspace then functions as an editor that offers many common editing features. Design view displays all objects as they are arranged on the template. In design view you will see the positioning of both static content for example, a fixed banner graphic and dynamic content for example, placeholders and fragments. Depending on how the template was set up and what positioning methods are used for instance, using tables or CSS to align assets, this view may approximate the page layout when viewed in a web browser. You see text, images, colors, hyperlinks, and tables as they appear on the actual Web site, but dynamic content from fragments and scripts is represented as tags rather than the actual content. This is because most fragments and scripts require server-side scripting and dynamically rendered content. Figure 8–8 Design View You can edit the text and objects using common editing keystrokes for example, Ctrl+C and Ctrl+V to copy and paste, the application toolbars see Toolbars on page 5-21, and right-click menus see Right-Click Menus on page 5-12. To select an object, simply click it, so it displays selection handles Figure 8–9 . Figure 8–9 Selected Object in Design View 8-12 Oracle Fusion Middleware Users Guide for Site Studio Designer For edits that cannot be performed using design view, you can use the properties pane see Properties Pane on page 5-4. If you cannot make a specific edit here, you can always edit the actual code in source view. Designer can also highlight the location of HTML tags in design view. To turn this feature on, click the ShowHide HTML Tags icon Figure 8–10 in the formatting toolbar. You can click the down arrow next to the icon to show or hide specific HTML tags. Figure 8–10 ShowHide HTML Tags

8.11.2 Source View

Source view displays the code that is in the template: HTML, XML, JavaScript, Idoc Script, Site Studio tags, and so on. Figure 8–11 Source View The information in source view is displayed as color-coded text: ■ Black is used for XML code, HTML tag attributes, and text that appears on the web page. ■ Purple is used for HTML tags. ■ Blue is used for HTML tag attribute values. ■ Green is used for Idoc Script, HTML comments, and code inserted by Site Studio. You can change many of these settings, including the typeface, indentation levels, and line wrapping. See Formatting the Code in Source View on page 6-9 for more information. Working With Templates 8-13 Source view offers complete control over the site template. This can be especially true if you are implementing several custom assets. In fact, you may find yourself starting off in design view to create the page and then switching to source view to customize the appearance and behavior of the page.

8.11.3 Preview