Working with Text Boxes

From Documentation
Jump to: navigation, search

Working with Text Boxes

A text box is a container for text as well as other kinds of objects, including pictures, sound objects, and tables. When you use a text box as a container, you do not have pixel-level control over embedded objects. For example, you do not insert a picture in a text box and drag it into position. Instead, you embed the object at a selected point in the text and adjust its placement using alignment, positioning, and text-wrapping choices. When NetObjects Fusion publishes pages that use a text box as the main Layout container, they have extremely lean HTML code and load relatively quickly in the site visitor's browser.

Adding a Text Box

  1. Select the Text tool from the Standard toolbox.
  2. Drag a box in the location where you want to place the text box.

The text box appears with solid selection handles indicating you can enter and format text. See Designing with Text.

Selecting a Text Box

  • To add or edit text within a text box, double-click in the text box. The text box selection handles are solid, and the Text Properties panel includes a Format tab in addition to the Text Box and Actions tabs.
  • To work with a text box as a container, click the text box. The selection handles are hollow, and the Text Properties panel displays only Text Box and Actions tabs.

To add and format text, see Designing with Text.

Embedding Objects in a Text Box

When you embed an object in a text box, a wide blue border appears around the box and the insertion point appears as a vertical bar.

The insertion point indicates where the object's HTML tags are inserted when NetObjects Fusion generates the HTML.

NetObjects Fusion positions pictures at the insertion point. Text, tables, sound, video, and other objects are placed with the top edge lined up with the top edge of the text line containing the insertion point. You use the object's alignment options to arrange the object within the text box. An insertion marker indicates the object's insertion point.

To move an embedded object, drag it. To place an embedded object on the top line of the text box, drag it until its insertion marker is positioned before the first text character.

You can create a new object in a text box or insert an existing object.

Dragging and Dropping an Existing Object

  1. In Page view, select the Text tool from the Standard toolbox and draw a text box.
  2. Add text. See Designing with Text.
  3. Select an object elsewhere on the page and drag it into the text box.

The thick blue text box boundary indicates the object will be embedded.

  1. Position the insertion point at the place in the text where you want to insert the object and drop the object.
  2. Position the object within the text box. See Wrapping Text around Objects.

Creating a New Embedded Object

  1. In Page view, select theText tool from the Standard toolbox and draw a text box.
  2. Add text. See Designing with Text.
  3. Select the appropriate tool to create the new object.

Note: To embed a text box within a text box, you must create it outside the text box and drag it into place.

  1. Position the mouse pointer in the text and draw a box for the new object.

If appropriate, the Open file dialog for that type of object appears. Select the object you want to embed and click OK.

  1. Position the object within the text box. See Wrapping Text around Objects.

Wrapping Text around Objects

Once you embed an object in a text box, you can wrap text around it.

  1. In Page view, select the object embedded in the text box.

The object's Properties panel appears.

  1. Click the Align tab.
  2. Set the alignment options.

Depending on the type of object you selected, NetObjects Fusion displays some combination of the following alignment options:

  • Vertical alignment of the object to the top, middle, or bottom of the text line.
  • Horizontal alignment of the object to the left, center, or right of the text box, without text wrapping.
  • Horizontal alignment of the object to the text box, with text wrapping. If you select Left wrap, the text wraps around the right side of the object; if you select Right wrap, the text wraps around the left side of the object. To embed the object at the top left of the text box, move the pointer to the beginning of the text.
  • In the Space around object section, specify the amount of vertical and horizontal space you want to leave between the image and the text.

The text wraps around the object according to your specifications.

Sizing a Text Box

When you create or select a text box, you can control its width, the minimum height, and the scaling of the text box to the full width of the Layout area or the browser window.

  1. In Page view, select a text box or add a new text box.

The Text Properties panel appears.

  1. Click the Text Box tab if necessary.
  2. To set the width of the text box, select it and drag the handles to size the text box as needed. The text box retains the width you set unless you size it to the Layout area as described in step 5.
  3. To set aminimum height for the text box, select Lock height and drag the text box handles to the minimum height you want.

If Lock height is not selected, NetObjects Fusion automatically adjusts the height of a text box to fit the text and objects it contains. Selecting Lock height prevents the text box from getting smaller in the site visitor's browser.

  1. To use a text box as the main Layout container on the page, select Size Layout to Text. This results in extremely lean HTML code.

Before you do this, embed all objects in the Layout area in the text box or place them in the MasterBorder. Objects left in the Layout area outside the text box will be overlapped by the text box when you size it to the Layout. Unless you want this overlap and use HTML 4.01 or HTML5 Dynamic HTML output to support it you must embed, move, or remove the objects.

Creating Pages that Resize to the Browser Window

You can configure NetObjects Fusion so the text box is maximized in the site visitor's browser window. When you use this option, NetObjects Fusion generates the page's HTML without using tables.

  1. In Page view, click the MasterBorder.

The MasterBorder Properties panel appears.

  1. Select the ZeroMargins MasterBorder from the MasterBorder name drop-down list or use any combination of AutoFrames and non-framed MasterBorders with margins set to zero.
  2. Select an existing text box or create a new one and embed all objects in the Layout area in the text box.
  3. On the Text Box tab of the Text Properties panel, select Size Layout to Text and then Contents wrap to browser width.

When you publish this page, the contents of the text box adjust to the size of the browser window.

Setting Text Box Background

You can use colors and pictures as text box backgrounds. If you choose a .gif with a transparent color, the text box background color will show through.

  1. In Page view, select the text box and click the Text Box tab on the Text Properties panel.
  2. In the Color field, select:
  • Automatic to set the background to the color specified in the Text Object style in Style view.
  • Transparent to set the background to the background color specified by the parent object of the text box. For example, if a small text box is embedded in a larger text box with a red background, the small text box will also have a red background if Transparent is selected.
  • 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 in the Text Object style in Style view.
  • None to eliminate the background image.
  • Browse to select an image from the Open dialog. See Choosing an Image Format. If the picture is smaller than the text box, the browser tiles the image. To change the image, click the Browse button to the right of the field.

Preserving Your Design Intentions

When you place a text box on a page, the text is shown in the default display font. You format the text and position the text box relative to other objects on the page.

When you preview or publish the page and view it in your browser, the size of the text box and its alignment with the objects around it are controlled by the font settings in the browser. If your NetObjects Fusion default browser font is 10-point Times Roman, and your browser default font is set to 14-point Arial, you see an immediate difference in the arrangement and spacing of objects, because text boxes expand to accommodate the new font size.

This font variation is not caused by NetObjects Fusion; it is a consequence of site visitors controlling their browser environment. You can avoid potential problems by viewing the page in a variety of browsers using different font sizes and then adjusting your design to accommodate these changes. See Controlling Published Output and Working with Layouts and Layout Regions for more information about browsers.