Source View Design View

Getting Started With Designer 5-9 definition assets open in form view. Most other assets for example, contributor data files and CSS files open in source view. Native documents open in their associated third-party application.

5.6.3 Source View

Source view displays the code that is in the content file associated with a site asset: HTML, XML, JavaScript, Idoc Script, Site Studio tags, and so on. Figure 5–10 Source View Page Template 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. Source view offers complete control over the site template. If you do not like the way things look in design view, you can always switch to source view to control the exact behavior of the web page. In fact, you may find yourself starting off in design view see Design View on page 5-10 to create the page and then switching to source view to customize the appearance and behavior of the page. Most of the sections in this guide assume you are working in design view. Source view instructions are included where appropriate. You can edit the text in source view using common editing keystrokes for example, Ctrl+C and Ctrl+V to copy and paste, the application toolbars see Toolbars on 5-10 Oracle Fusion Middleware Users Guide for Site Studio Designer page 5-21, and right-click menus see Right-Click Menus on page 5-12. You can, for example, add site assets, images, tables, and line breaks as you work in source view.

5.6.4 Design View

Design view displays all objects as they are arranged on a site template, both static for example, a fixed banner graphic and dynamic for example, placeholders and fragments. Depending on how the template was set up and what positioning methods are used, this view may approximate what the page layout is 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. This content can only be seen on the Preview tab see Preview on page 5-11. Figure 5–11 Design View Page Template When you open a site template page template, region template, or subtemplate in Designer, it opens in the workspace in design mode, where you can edit the template as needed. The workspace then functions as an editor that offers many common editing features. 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. You can, for example, add site assets, images, tables, and line breaks as you work in design view. To select an object, simply click it, so it displays selection handles Figure 5–12 . Figure 5–12 Selected Object in Design View Getting Started With Designer 5-11 For edits that cannot be performed using this interface, you can use the properties pane see Properties Pane on page 5-4. The properties pane enables you to fine-tune specific areas of a site template, like background color, page margins, and table width. If you cannot make a specific edit here, you can always edit the actual code in source view see Source View on page 5-9. To help you identify where site assets for example, placeholders and fragments are located on a site template, Designer inserts asset tags with their names. You can modify this text for fragments in the Fragment Editor as discussed in Adding, Editing, and Deleting Fragment Snippets on page 13-14. Designer can also highlight the location of HTML tags in design view. To turn this feature on, click the ShowHide HTML Tags icon Figure 5–13 in the formatting toolbar. You can click the down arrow next to the icon to show or hide specific HTML tags. Figure 5–13 ShowHide HTML Tags

5.6.5 Preview