Working with Layouts and Layout Regions

From Documentation
Jump to: navigation, search

Working with Layouts and Layout Regions

Layouts and Layout Regions are containers for the objects you place on your pages. When you use Layouts and Layout Regions you can position content with pixel-level precision by dragging it into place in the container.

Working with Layouts

The Layout makes up the body of the page. It is surrounded on all four sides by the MasterBorder. Each Layout is attached to a single page, unlike a MasterBorder, which can be applied to any page in the site. There is no connection between Layouts on separate pages.

Each page has a default Layout named PagenameLayout. For example, when you add a page, its page name is Untitled#. Until you rename that page, the default Layout is named Untitled# Layout.

You can add multiple Layouts to a page, each with its own properties, design, and content. You might use several Layouts to prototype or publish several versions of the same page. You could also create separate Layouts for different versions of your site, such as English, French, media, and text-only. When you publish the site, NetObjects Fusion publishes each page using the currently selected Layout.

The name of the currently selected Layout appears in the Layout drop down list in the lower-left corner of Page view.

You can control various characteristics of the Layout's appearance in Page view. See Setting Up the Page Design View Display.

Creating a New Layout

  1. In Page view, display the page for which you want to create a new Layout.
  2. Select Add from the Layout drop-down list.
  3. A new, blank Layout appears. Any content on the previous Layout is stored with that Layout. Each Layout you add is named PagenameLayout#. The number is incremented for each Layout you create for the page. To change the Layout name, see Renaming a Layout.
  4. Add objects to the Layout and modify the Layout properties such as size, background, or HTML output options.

Selecting a Layout

To display a different Layout for a page:

In Page view, select a Layout from the Layout drop-down list.

Renaming a Layout

  1. In Page view, select a Layout from the Layout drop-down list.

The General tab of the Layout Properties panel appears.

  1. Enter a new name in the Layout name field.

Use letters and numbers only; Layout names cannot have spaces, hyphens, underscores, or other special characters, and they cannot begin with a number.

The name of the Layout changes and the Layout drop-down list is updated.

You can also use the Object Tree to change the name of the Layout. See Renaming an Object.

Deleting a Layout

To delete a Layout:

  1. In page view, select the Layout that you want to delete from the Layout drop-down list.

The selected Layout will display.

  1. Select Delete current from the Layout drop-down list.
  2. The selected Layout will be removed from the Layout drop-down list, and the Layout created previous to the deleted one will be displayed on the page.

Changing Layout Size

You can set Layout size by entering specific measurements on the Layout Properties panel or by dragging the Layout handles. See Setting Page Size.

To reduce the amount of white space in the Layout area:

In Page view, from the Object menu, select Size Layout to Objects.

Adding an Object to the Layout

The Layout is the default container for the page, and can contain any object. To place objects in a Layout, you can:

  • Select the appropriate tool and create an object within the Layout.
  • Paste an object into the Layout from the Clipboard.
  • Drag and drop any object that you previously placed with a tool.

Working with Layout Regions

A Layout Region is a container you use to group objects in a defined area on the page. Layout Regions are page segments that you can place, size, and control independently from the rest of the Layout.

There are five key aspects to using Layout Regions:

  • When you move a Layout Region on the page, its embedded objects move with it and maintain their positions relative to each other and the Layout Region.
  • You can send cascading action messages to the Layout Region, and it will pass the message to all objects embedded within it. See Building Dynamic Pages.
  • You can embed a Layout Region within a text box. This gives you position-based placement of the objects within the Layout Region, while the rest of the page is arranged in a text-based layout.
  • You can assign an HTML output method to a Layout Region independent of the method used for its parent Layout. See Setting the HTML Output Method for a Layout or Layout Region.
  • You can designate a Layout Region as a form and embed form objects within it. See Designing and Implementing Forms.

Layout Regions define an HTML table. If you use many Layout Regions, or nest Layout Regions, it increases the size of the page's HTML file and slows page rendering in your site visitor's browser.

If you want to add more Layout regions to a page, you can use the Multi Layout Regionstool. This component allows you to create a set of overlapped Layout Regions. See Working with Ajax Components.

The Layout Script Importing Order section helps you import new scripts, but also organizes the embedded scripts that can be client-side or server-side. For more details about the Scripts Importing Order see Working with HTML Directly.

Creating a Layout Region

  1. In Page view, select theLayout Region tool the Standard toolbox.
  2. Draw a Layout Region on the Layout.
  3. Position and size the Layout Region, just as you would position any other object.
  4. Add objects to the Layout Region.

Adding Objects to a Layout Region

Like a Layout, a Layout Region can contain any object: text, pictures, media, or even other Layout Regions. To add objects to a Layout Region:

  • Select the appropriate tool and create an object within the Layout Region.
  • Drag objects into the Layout Region from elsewhere on the page.
  • To make the Layout Region expand as needed to contain the object, drag the object into the Layout Region.
  • When the Layout Region border changes to a thick blue outline, the object is contained in the Layout Region.
  • To drag an object over a Layout Region without embedding it, hold down Alt as you drag the object.

Displaying the Layout Region Grid

To make it easier to place objects precisely in the Layout Region, you can use a local alignment grid that is independent from the grid displayed within the Layout.

To display and modify the Layout Region grid:

  1. In Page view, select the Layout Region.

The General tab of the Layout Region Properties panel appears.

  1. Select Grid if necessary.
  2. Enter values for the width and height of the local grid. The Layout Region grid always displays in pixels.

Converting a Layout Region to a Table

To see underlying table structure, you can convert a Layout Region into a table. NetObjects Fusion constructs a table and places objects in the same position they occupied in the Layout Region.

  1. Right-click the Layout Region and choose Convert Layout Region to Table from the shortcut menu.

The Convert Region to Table dialog appears.

  1. Choose how you want NetObjects Fusion to process empty cells. Select:
  • Leave as individual cells to skip empty cells.
  • Span in rows to merge cells in row order.
  • Span in columns to merge cells in column order.

Setting the HTML Output Method for a Layout or Layout Region

You can select the HTML output method that determines the type of HTML code NetObjects Fusion produces for the current Layout or Layout Region. This HTML method is independent of the method used to publish the parent container. For example, if a Layout Region is placed in a Layout area, you can set the region to a different HTML output method than the one used for the Layout area. When you publish, the Layout area is published using its setting and the Layout Region is published using its setting.

  1. In Page view, click the Layout or Layout Region.

The General tab of the Properties panel appears.

  1. In the HTML output section of the General tab, select the HTML output method you want from the drop-down list.
  • Site Setting generates the Layout using the output method specified for the entire site. To change this setting, from the Tools menu, choose Site Settings and change the Browser compatibility setting.
  • Parent Setting generates the Layout Region using the output method specified for the object that contains it. For example, if a Layout is set to HTML 4.01 with Tables, that is the parent setting for a Layout Region contained in that Layout.
  • HTML5 uses CSS to generate less code and achieve a cleaner separation of content and styling by absorbing the benefits of HTML 4.01 and XHTML. This method of generation requires a modern browser.
  • HTML5 Dynamic uses XHTML, JavaScript, and CSS with the syntax of HTML5 to generate a clean separation of content and styling.
  • HTML 4.01 with Tables uses nested HTML tables to achieve the highest level of layout accuracy across browsers. If you select this option, you can set the table formatting preference. See Publishing with HTML 4.01 with Tables.
  • HTML 4.01 uses cascading style sheet positioning and layers to optimize your site. See Publishing with HTML 4.01.
  • XHTML 1.0 uses XHTML, JavaScript, and CSS to generate less code and achieve a cleaner separation of content and styling.

The method you select for the Layout affects the entire page, including the MasterBorder and frames you assign to that MasterBorder.

Setting Layout and Layout Region Background Properties

You can control the appearance of each Layout and Layout Region by setting background properties. You can assign a background color and place an image in the background of a Layout or Layout Region. You can attach a background sound to a Layout that plays when a visitor views the page.

  1. In Page view, select the Layout or Layout Region.

The General tab of the Properties panel appears.

  1. Select the Background tab.
  2. In the Color field, select:
  • Automatic to set the background to the background color specified by the Layout's current SiteStyle or the Layout Region's parent object.
  • Transparent to eliminate the background color of a Layout. This option is not available for a Layout Region.
  • Color to select a background color from the Color Picker. The selected color appears in the box to the right of the Color field. To change the color, click the box and select a new color from the Color Picker.
  1. In the Image field, select:
  • Automatic to set the background to the image specified by the Layout's current SiteStyle or the Layout Region's parent object.
  • None to eliminate the background image of a Layout. This option is not available for a Layout Region.
  • Browse to select an image from the Open dialog. See Choosing an Image Format. If the picture is smaller than the Layout or Layout Region, the browser tiles the image. To change the image, click the Browse button to the right of the field.
  1. To assign a sound to a Layout that plays when a site visitor views the page:
  • Select Sound.

The Background Sound dialog appears.

In the Background Sound dialog, click Browse, and select a sound file from your hard disk or LAN.

You can use sound files in .au, .aiff, .midi, .ram, or .wav formats.

  • To repeat the sound while the page is open, select Continuous Loop.
  • Click OK.

The selected sound plays when you preview the page.

Site visitors must have a sound board, speakers or headphones, and a browser that supports background sounds installed on their computers to hear background sound. To preview and test sounds, your system must also be appropriately configured. Some sound formats also require support from the Web server. See Inserting a Sound File.