Controlling Published Output

From Documentation
Jump to: navigation, search

Controlling Published Output

The default settings for NetObjects Fusion generate efficient HTML that faithfully reproduces your visual design on the published page. The design of your text content, however, is subject to each site visitor's browser settings. To limit these variations, NetObjects Fusion offers ways to control published output. You can:

  • Select from five different types of page containers to serve as your page layout medium: layout areas, layout regions, multi layout regions, text boxes, and tables.
  • Use one of five HTML output methods to generate your site's HTML: HTML 4.01 with Tables, HTML 4.01 HTML5, HTML5 Dynamic and XHTML.
  • Control the table formatting priority horizontal or vertical used to generate HTML5 with Tables HTML pages.
  • Select HTML or cascading style sheet (CSS) text formatting.

Approaches to Page Design

In NetObjects Fusion, a container is an object into which you can embed other objects. A container can be any size and can hold any kind and number of objects. NetObjects Fusion provides six types of containers you can use to design and lay out pages:

  • The Layout is the body of the page, surrounded on all four sides by the MasterBorder. Each page has at least one Layout, although you can create additional layouts as needed. See Working with Layouts.
  • Layout Regions are mini-layouts that you can use to subdivide the page. You can draw and place Layout Regions anywhere on the page, and place any kind and number of objects including text boxes or other Layout Regions within their borders. See Working with Layout Regions.
  • Multi Layout Regions are containers for Layout Regions offering you the possibility to navigate through multiple layouts regions using navigation controls avoiding complete refresh of your Web page.
  • Text boxes are a special class of objects because you can embed other objects within them. You can also maximize a text box so it fills the entire Layout in effect, using a single text box to lay out the entire page. See Working with Text Boxes.
  • Tables serve as containers for objects. If your page design is based on rows or columns of content as in a spreadsheet or other tabular arrangement you can lay out all or part of your page in tables. You can then lay out your content within the cells of the table. You can embed any object in a table cell. See Adding Tables.
  • MasterBorders contain objects that repeat on a set of pages. You can place anything in a MasterBorder that you can place in the Layout, including banners, pictures, and text. By placing navigation bars in a MasterBorder you can give pages with the same navigational needs the same navigational structure. See Managing MasterBorders.

The type of container you choose determines which of the following page design options you use. You can:

  • Position content with pixel-level precision by dragging objects into place. The position-based approach uses Layouts and Layout Regions as containers and preserves your position-based layout by generating pages consisting of HTML and cascading style sheet code.
  • Use a text-based approach. With text-based design you can preserve the flow of content by embedding objects in text boxes or table cells. Text-based page layout generates lean and efficient HTML code that responds effectively to variations in browser and font size.
  • Include hand-coded HTML pages in your site. You incorporate external HTML pages as part of your site by referencing them as objects on a page, or the page itself. You can also add HTML in HTML Source view. See Working with HTML Directly and Referencing and Editing External HTML.

Selecting a Layout Method

There's no "best way" to lay out your pages; your circumstances determine which method works best. The pros and cons of each method are listed here.

Using Layouts

If precise placement of content is important to you, or if you want to publish individual pages using an HTML output type that is different from the rest of the site, use the Layout area as the container for your page layout.

Layout Advantages

  • You have pixel-level control of the layout and design of your page.
  • You can drag-and-drop objects into position.
  • You can specify the HTML output type for any individual Layout.
  • Layouts support the column or row priority for page formatting, which means pages adjust more predictably to a site visitor's font and display configurations.

Layout Limitations

  • Position-based pages require more HTML code to achieve pixel-level placement of content, so your HTML files will be somewhat larger.
  • Text cannot flow around other objects unless they are embedded in a text box. To create a text wrap effect you have to create multiple text boxes to contain the other objects.
  • You cannot set the Layout to wrap to the width of your site visitor's browser. If the browser window is wider than your page, the page's background fills in; if the window is smaller than your page width, your site visitor has to scroll.

Using Layout Region

Like Layouts, Layout Regions offer pixel-level placement and a choice of HTML output methods, but you can embed them in text boxes. So, if you need precise placement or specific output for some content, but want to generate leaner pages, you can use text boxes as your main layout container and embed Layout Regions for selected content.

Layout Region Advantages

  • You have pixel-level control of the layout and design of content within the Layout Region.
  • You can embed the Layout Region within a text box, which combines the benefits of both containers.
  • You can specify the HTML output type for any individual Layout Region.
  • Layout Regions support the column or row priority for page formatting so selected sections of your page can adjust more predictably to site visitor's font and display configuration.

Layout Region Limitations

  • HTML page files are significantly larger and download more slowly.
  • Text cannot flow around other objects unless they are embedded in a text box. To create a text wrap effect, you have to create multiple text boxes within the Layout Region.
  • You cannot maximize a Layout Region to the full Layout size, or set the Layout Region to wrap to the width of your site visitor's browser.

Using Multi Layout Regions

Like Layouts, Layout Regions offer pixel-level placement and a choice of HTML output methods, but you can embed them in text boxes. So, if you need precise placement or specific output for some content, but want to generate leaner pages, you can use text boxes as your main layout container and embed Layout Regions for selected content.

Multi Layout Region Advantages

  • You have pixel-level control of the layout and design of content within the Layout Region.
  • You can embed the Layout Region within a text box, which combines the benefits of both containers.
  • You can specify the HTML output type for any individual Layout Region.
  • Layout Regions support the column or row priority for page formatting so selected sections of your page can adjust more predictably to site visitor's font and display configuration.

Multi Layout Region Limitations

  • HTML page files are significantly larger and download more slowly.
  • Text cannot flow around other objects unless they are embedded in a text box. To create a text wrap effect, you have to create multiple text boxes within the Layout Region.
  • You cannot maximize a Layout Region to the full Layout size, or set the Layout Region to wrap to the width of your site visitor's browser.

Using Text Boxes

If efficient, lean HTML pages are more critical to site visitors than precise placement of content, use a text box for page layout.

Text Box Advantages

  • NetObjects Fusion generates extremely efficient HTML code for your site. HTML files are smaller, which means they load faster.
  • Text within the text box can be set to flow around other embedded objects, so you don t have to create multiple text boxes to achieve a text-wrap effect.
  • You can set the text box to expand itself to the size of the browser window. When your site visitor views the page, it rewraps to fit within the browser window.
  • You can use any HTML output method.

Text Box Limitations

  • You give up pixel-level control of the layout and design of your page, and use alignment choices to control the placement of objects, which means the way they appear in a browser can be somewhat unpredictable.

Using Tables

If your page design or page content is tabular, you can use a NetObjects Fusion table to control the layout of the entire page.

Table Advantages

  • Each cell within a table functions like a text box, with all the attributes and controls of a text box outside the table.
  • You can embed objects within cells, arrange them using each object's alignment properties, and wrap text around objects.
  • You can use a percent width layout so the basic layout design adjusts to changes in browser window width, font sizes, or screen resolution.

Table Limitations

  • You give up pixel-level control of the layout and design of your page, and use alignment choices to control the placement of objects.
  • Browsers interpret tables differently, so be sure to view the table in all versions of the target browsers.

Selecting an HTML Output Method

The wide range of browser versions and capabilities makes it difficult to know exactly what kind of HTML tags and functions will display effectively to site visitors. Advances in HTML coding and browser abilities have also made it possible to create pages using less code and more efficient downloads if your site visitor's browser can support it. To address these concerns and take advantage of these improvements, you can choose from three types of HTML output when publishing your site.

  • HTML 4.01 with Tables uses Nested Table tagging and other features of the HTML specification. This is the default output method because it produces the most predictable and consistent results on screen, regardless of the type, version,or configuration of the site visitor's system or browser fonts. See Optimizing HTML 4.01 with Tables Output.

If you select HTML 4.01 with Tables, be sure your pages do not have overlapping objects, or your published results will not be what you expect. See Editing Objects and Assets for information.

  • HTML 4.01 uses cascading style sheet positioned layers to achieve the highest level of accuracy. This option is suggested when using actions and is required for overlapping objects.
  • XHTML 1.0 uses XHTML, JavaScript, and CSS to generate less code and achieve a cleaner separation of content and styling. This method of generation requires a modern browser.
  • HTML5
  • HTML5 Dynamic
  • On the General tab of the Current Site Options dialog, you designate which type of HTML output is generated. This setting determines the site setting for HTML output. You can override this setting for individual Layouts and Layout Regions, so NetObjects Fusion generates the HTML using a different method. See Setting the HTML Output Method for a Layout or Layout Region for information.

Setting the Site's HTML Output Method

To set the publishing method for your site:

  1. From the Tools menu, choose Options > Current Site.
  2. Use the Site Generation HTML drop down to select an Output Method

Publishing with HTML 4.01 with Tables

When you choose HTML 4.01 with Tables, NetObjects Fusion uses complex hidden tables to achieve the highest level of layout accuracy across browsers. To see the table borders in your browser, hold down Shift when you click Preview Site or Publish Site.

Using HTML 4.01 with Tables:

  • You get relative placement of your content as you designed it in Page view, with relative spacing preserved regardless of the site visitor's display configuration.
  • You can prioritize the vertical relationship between objects so site visitors are more likely to see the pages as you designed them, regardless of their local browser, font, and display configurations.

Optimizing HTML 4.01 with Tables Output

If you set a Layout or Layout Region to HTML 4.01 with Tables output, you can control the text flow for each container by choosing the table formatting priority columns or rows that NetObjects Fusion uses to generate the page HTML. This helps to preserve your design if a browser's font settings change the size of your text.

For example, a Columns or vertical priority keeps text together in a vertical orientation when text size changes rearrange the page.

A Rows or horizontal priority keeps text together in a horizontal orientation when text size changes rearrange the page.

You can make pages more efficient and predictable by optimizing placement of objects within the site's underlying table structure. As a general rule, it's best to align objects to each other and to place text boxes in their own cells within the underlying table structure so they can resize as necessary in response to browser font changes.

To help determine the best alignment, you can preview the underlying table row and column structure to see if NetObjects Fusion can divide your Layout into cells efficiently or if you need to rearrange some objects.

  1. In Page view, select the Layout or Layout Region you want to preview.

The General tab of the appropriate Properties panel appears.

  1. Select Columns or Rows in the HTML output section.
  2. Click and hold theShow button.

NetObjects Fusion hides grid lines, guide lines, and object borders in the Layout and displays solid gray lines to show how the Layout is divided into rows and columns.

  1. Identify underlying table cells that contain multiple text boxes or other objects.
  2. Release the Show button.
  3. If row and column dividers do not separate objects the way you think they should, those objects might not be aligned with pixel-level accuracy. To correct this, Shift+Click all the objects you want to align.

The Multi-Object Properties panel appears.

  1. Click the alignment setting appropriate for the selected objects.
  2. Repeat steps 3 through 7 as needed.
  3. Preview the site or page.
  4. To test the results, reset your browser display fonts to a significantly larger size and preview the site again.

You can see a page's table structure in the browser by holding down Shift when you click the Preview Site button.

Optimizing AutoFrames

If you are using HTML 4.01 with Tables, you can control realignment of AutoFrame content by selecting, for each frame, the table alignment setting that best preserves your design. When you use the Show button to preview the Layout's table structure, the preview includes the table structure that NetObjects Fusion expects to use in AutoFrames.

Locking or Maximizing a Text Box

If all the objects on a page are embedded in a text box, you can apply three text box properties to reduce the impact of variations in browser configurations: locking the minimum size of a text box, sizing the text box to fill the Layout, and wrapping the text box contents to the browser width. See Working with Text Boxes for information about these options.

Publishing with HTML 4.01

HTML 4.01 uses cascading style sheet positioning, layers, or both to achieve a high level of layout accuracy. See Setting the Site's HTML Output Method.

When you choose HTML 4.01, NetObjects Fusion expresses the location of content in terms of absolute positioning. For example, instead of using HTML workarounds such as empty table rows and transparent .gifs to position a line of text below the top of the page, the absolute positioning supported by HTML 4.01 defines placement of the text box a specific distance from the top left corner of the page in a simple statement of x,y coordinates.

When you select HTML 4.01:

  • NetObjects Fusion generates HTML code that produces the same results across major browsers.
  • Pages are typically more compact and download faster than table-based HTML pages.
  • You can overlap objects in Layouts or Layout Regions. See Layering Objects.
  • You get consistent results with pages containing actions. See Building Dynamic Pages.
  • There is some risk for text-rich pages. If a HTML 4.01 page is viewed in a browser with large font settings, the text boxes expand without regard for other objects on the page, which can result in unplanned overlapping of objects.

Publishing with HTML5

HTML5 uses cascading style sheet positioning, layers, or both to achieve a high level of layout accuracy. See Setting the Site's HTML Output Method.

When you choose HTML5, NetObjects Fusion expresses the location of content in terms of absolute positioning. For example, instead of using HTML workarounds such as empty table rows and transparent .gifs to position a line of text below the top of the page, the absolute positioning supported by HTML5 defines placement of the text box a specific distance from the top left corner of the page in a simple statement of x,y coordinates.

When you select HTML5:

  • NetObjects Fusion generates HTML code that produces the same results across major browsers.
  • Pages are typically more compact and download faster than table-based HTML pages.
  • You can overlap objects in Layouts or Layout Regions. See Layering Objects.
  • You get consistent results with pages containing actions. See Building Dynamic Pages.
  • There is some risk for text-rich pages. If a HTML5 page is viewed in a browser with large font settings, the text boxes expand without regard for other objects on the page, which can result in unplanned overlapping of objects.

Publishing with HTML5 Dynamic

When you choose HTML5 Dynamic, NetObjects Fusion uses relative placement of your content as you designed it in Page view, with relative spacing preserved regardless of the site visitor's display configuration. You can prioritize the vertical relationship between objects so site visitors are more likely to see the pages as you designed them, regardless of their local browser, font, and display configurations.

Design Priorities and Method Choices

Use this table to determine which combination of layout methods and HTML output methods best supports your site design priorities.

If your priority is... Suggested container object Suggested HTML output method
Lean HTML and fast browser loading Text box or Layout-sized table HTML5
Precise placement control for objects Layout and/or Layout Region(s) HTML5
Maximizing usability for site visitors
with browsers earlier than version 4.0
Text box sized to Layout HTML5
Absolute control over minimum text
box height
Text box with size locked HTML5
Precise placement control for selected content, but lean HTML otherwise Text box for page with embedded
Layout Region for selected content
HTML5
Wrapping text around images and
other objects
Text box and/or table HTML5
Overlapping selected objects Overlapped objects in Layout Region embedded in a text box HTML5 for site; HTML5 Dynamic for Layout Region containing overlapped objects
Wrapping page to varying browser
widths
Text box sized to Layout with content wrapped to browser HTML5
Drag-and-drop placement of objects
while designing the page
Layout and/or Layout Region HTML5
Horizontal or row-based content
flow such as spreadsheets or other
tabular data
Table HTML5
Delivering objects with actions
or other DHTML effects only to
advanced browsers
Layout HTML5 Dynamic
Delivering objects with actions
or other DHTML effects to greatest
number of browser versions
Objects with actions in Layout Region embedded in a text box HTML5
Using cascading actions Embedded Layout Regions containing objects with actions, grouped for cascading messages HTML5
HTML5 Dynamic