Designing with Text

From Documentation
Jump to: navigation, search

Contents

Designing with Text

Text is the primary tool for delivering your message. You can type text onto your pages, add it to pictures and shapes, and format it for maximum impact. NetObjects Fusion includes powerful formatting that allows formats to flow from one design level to another, for example from a SiteStyle to selected text. You can also create and apply text styles to keep your site design consistent.

Adding Text to a Page

To add text to a page, you can:

In each case, the text is placed in a text box. See Working with Text Boxes When you add text to a page, it's a good idea to add all your text and then go back and apply formatting.

Using the Text Tool

  1. In Page view, select the Text tool from the Standard toolbox and draw a text box on the page.

A text box and the Text Properties panel appear. Hollow selection handles indicate the text box is in text editing mode.

  1. Type or paste text into the box.

The text automatically wraps to the width of the box.

To force a line break, position the insertion point at the end of the line and press Shift+Enter.

  1. Click outside the text box to deselect it.

The text box sizes vertically to the text you enter.

Dragging and Dropping a Text File

  1. In Windows Explorer, locate the text file you want to add to the page.
  2. Drag the file onto the page.

The text appears on the page in a text box.

Pasting Text from the Clipboard

  1. Cut or copy the text from the original source, such as a word processing document.
  2. In Page view, click where you want to position the text.
  3. From the Edit menu, choose Paste or Paste Special. Select:
    • Paste to paste the contents of the Clipboard onto the current page. You might lose some of the original text formatting when you copy and paste text from the Clipboard.
    • Paste Special to retain formatting. You can select:
    • Formatted Text (RTF) to insert the contents of the Clipboard as text with font and table formatting.
  • Unformatted Text to insert the contents of the Clipboard as text with no formatting.
  • HTML Format to insert the contents of the Clipboard as HTML format.

To select the Paste Special default, click Set Paste Default and choose one of the three options.

Formatting Text

You can format selected text using the options from:

To apply many text attributes at once in a consistent manner, you can use the Styles included with NetObjects Fusion and also create and apply your own text styles. See Working with Text Styles. You can format apply formats to entire paragraphs. Automatic setting, which is a choice for many options throughout NetObjects Fusion, allows formats to flow from one design level to another. See Formatting Selected Text, Formatting Paragraphs and Understanding the Automatic Setting.

Selecting HTML or Cascading Style Sheet Text Formatting

NetObjects Fusion provides two ways to generate the code that controls the format of the text in your site HTML or cascading style sheets (CSS).

When you select HTML, NetObjects Fusion uses standard HTML tags in the code that controls text formatting. This results in consistent text display across browsers. Using this setting also ensures that you can update sites created with earlier versions of NetObjects Fusion.

Cascading style sheets provide a way for site designers to incorporate typographical elements like line spacing and letter spacing that are not supported by standard HTML in their sites. These styles are specified in .css files, which are attached to the site. When you select cascading style sheet text formatting, NetObjects Fusion creates style.css and site.css files and links them to the HTML generated for the site.

To switch the text format setting:

  1. From the Tools menu, choose Options > Current Site.
  2. On the General tab, in the Text formatting section, select HTML or Cascading Style Sheets (CSS).
  3. Click OK.

Understanding the Automatic Setting

When you select Automatic in text formatting dialogs, the format attributes of a higher or parent style pass through to the lower or child style.

The order of the cascading styles is:

  • Browser
  • SiteStyle
  • Site
  • Page
  • Selected text

The SiteStyle is the parent of the Site, which is the parent of the Page. Thus, selecting Automatic for an attribute at the Page level lets the setting for that attribute pass from the Site to the Page. If the same attribute is set to Automatic in the Site as well, then the SiteStyle setting for that attribute flows to the Site and then, unimpeded, to the Page.

For example, if you set the font color to red at the SiteStyle level and set font color to Automatic on both the Site level and the Page level, text at the page level is automatically red when you type it. The red attribute flows all the way from SiteStyle to the text.

When you change a setting at a higher level, it changes the corresponding setting at the lower level if the setting at the lower level is Automatic. So, if the setting at the Page level is Automatic, and you change the font at the Site level, the font setting changes for the Page level, too. This feature provides you with a fast, powerful way to make formatting changes throughout your site by simply making the change once at the higher levels.

Of course, there may be times when you don t want the changes from the higher levels to be inherited by the lower levels. In that case you can edit the text style so Automatic is not selected for the particular format attribute. Editing a style at any level overrides the settings from the parent level. For example, if you select text and change its color to blue, that editing overrides a setting of red text from the SiteStyle level.

You can mix choices among the formatting attributes so some have the Automatic setting and others don't. For example, you could select the font to be inherited from a higher level (so you set it to Automatic), but manually select the color.

See Working with Text Styles for more information about the flow of text styles and formats to text in your site.

Formatting Selected Text

With NetObjects Fusion you can reformat selected text using the Text Properties panel, the Text Format toolbar, or the CSS Panels to change the text font, size, color, and style, as well as the paragraph alignment and indent. You can format selected characters in text boxes or table cells. On a stacked page, you can format selected characters in formatted text fields, but in simple text fields, all characters have the same format. See Data Publishing.

  1. Double-click the text box that contains the text.

Solid selection handles appear around the text box.

  1. To select:
  • Specific characters, drag over those characters.
  • A word, double-click the word.

To select words quickly, you can set your options to automatically select the entire word. See Setting Text Options.

  • A paragraph, triple-click in the paragraph.
  • A block of text, click the first character, then Shift+Click the last character.
  • Multiple paragraphs, drag through them.
  1. Using the Text Properties panel, make sure the Format tab is selected.
  2. Select a font from the drop-down list on the Text Properties panel.
  3. Select a font size from the drop-down list on the Text Properties panel.

The relative settings (-2 to 4) set the font size relative to the site visitor's default browser settings. You can choose the unit for specifying the font size from the drop-down list to the right of the size field.

  1. Click afont style button to assign characteristics bold, italic, and underline to the text.
  2. To assign acolor other than the SiteStyle color to the text, click the color sample and select a color from the Color Picker.
  3. To highlight text, select the highlight tool to the right of the color sample, and select a color from the Color Picker.
  4. To set left, center, right, or block alignment for the paragraph containing the selected text, click an alignment button.
  5. To indent the paragraph, click an indent button or press Tab. Using this indenting button nests the selected paragraph under unselected paragraphs. To nest the paragraph to a deeper level, continue to click the button or press Tab. Default indenting is set as part of the text's format style.

You can also assign list formats and text styles to selected text. See Creating Bulleted and Numbered Lists and Working with Text Styles.

Formatting Paragraphs

Using the options in the Paragraph Settings dialog, you can set formats for the text in a paragraph, the paragraph alignment, spacing, margins, indents, paragraph border, and paragraph background.

When you format paragraphs, type all the text first and then go back and apply the formatting. If you set formats as you enter the text, new paragraphs inherit the style of the paragraph before it.

Some options in the Paragraph Settings dialog have no effect if text formatting is set to HTML. These options are marked CSS only in the following sections. If you apply these options, you see them in Page view, but they disappear when you preview or publish the site. Be sure to test your site in all target browsers to ensure pages display as you intended.

Formatting Text in a Paragraph

  1. Highlight the text you want to format.
  2. On the Format tab of the Text Properties panel, click the Edit button.

The Paragraph Settings dialog appears

  1. In the Paragraph Settings dialog, click the Character tab.
  2. Set the text format options. If you choose Automatic, the settings for the parent style pass through to the paragraph. See Understanding the Automatic Setting.
  • Font applies the text font; the list of fonts is derived from the font map in the \NetObjects\NetObjects Fusion\NetObjects System folder.

If the specified font for the formatted text is installed on the site visitor's system. If the font is not installed, the browser checks a substitution table. If the specified substitution is not possible, the browser uses its default font. You can change the substitution table by editing the fontmap.txt file in the \NetObjects\NetObjects Fusion\NetObjects System folder.

  • Style applies a style to the text. You can select regular, italic, bold or bold italic.
  • Size sets the size of the text. You can choose the unit for specifying the font size from the drop-down list to the right of the Size field.

You can choose any size up to 22192 pt., but the actual font and size site visitors see is based on their browser default setting and therefore is unpredictable. Also, some older browsers do not support all sizes. For those reasons, it is best to use the relative settings (such as -2 to 4). Then, when site visitors increase or decrease their browser font sizes, text size also increases or decreases. But if you use an absolute font size such as points, inches, or picas, the text on your pages stays the same size even if site visitors want to see it larger or smaller.

  • Color applies color to the text. The color box shows the current text color. To change the color, click the color box and select a color from the Color Picker.
  • Letter case sets the case (upper case or lower case) of the text. Use the Capitalize option to set initial caps, which capitalizes the first letter of each word in the text. Choose None to remove a letter case format set at a higher level.
  • Small caps sets the text to appear in all small caps. If small caps is selected, it overrides the Letter case setting. Not all browsers support small caps. Choose None to remove a small caps format set at a higher level.
  • Position sets the text to be subscript or superscript. Choose Normal to remove a position format set at a higher level.
  • Decoration sets the text to the selected decorations. You can select underline, overline (CSS only), and strikethrough.
  • Edit with CSS Editor opens the CSS Editor window, where you can type or paste cascading style sheet definitions for greater site-design flexibility. The style added in the CSS Editor can be applied by selecting it in the Style drop-down list on the Text Properties panel.

Setting Paragraph Alignment, Spacing, and Margins

  1. Highlight the paragraph you want to format.
  2. On the Format tab of the Text Properties panel, click the Edit button.
  3. In theParagraph Settingsdialog, click the Paragraph tab.
  4. Set paragraph format options. If you choose Automatic, the settings for the parent style pass through to the paragraph. See Understanding the Automatic Setting.
    • Alignment sets the alignment to left, center, right, or block. Changing alignment here also changes the alignment setting on the Text Properties panel. If no button is selected, the text is aligned using the default alignment.
    • Image wrap (CSS only) sets how text can wrap around an image. You can choose left, right, or on both sides of the image. To apply wrap settings to a particular image, use the Picture Properties panel. This feature is most useful when creating text styles. See Creating a Text Style.
    • Line height (CSS only) sets the amount of space between lines of text in the selected unit of measurement.
    • Letter spacing (CSS only) sets the amount of space between characters in the text in the selected unit of measurement.
    • Space above (CSS only) and Space below (CSS only) set the amount of space above and below paragraphs in the selected units of measurement.
    • First line indent sets the tab space indent for the first line of text in the selected unit of measurement. This is the only way to indent a paragraph without using the space bar.
    • Left margin (CSS only) and Right margin (CSS only) set the margins on either side of the paragraph in the selected units of measurement.

Setting Borders and Padding (CSS only)

Borders are lines around a paragraph. Padding is the amount of space between the border lines and the text. If no border is set, padding can mimic margins around text.

Browsers can interpret your border and padding settings differently. Check the appearance of objects with borders and padding in different browsers to make sure the object appears as you intended.

  1. Highlight the paragraph you want to format.
  2. On the Format tab of the Text Properties panel, click the Edit button.
  3. In the Paragraph Settings dialog, click the Borders tab.
  4. Select border settings. If you choose Automatic, the settings for the parent style pass through to the paragraph. See Understanding the Automatic Setting .
    • Automatic applies the default border setting.
    • None prevents the parent element's border settings from being applied.
    • Border makes the other options available so you can apply individual border settings. Use:
  • Style, Width, and Color to set the border's line style, width, and color. Click the Color box to select a color from the Color Picker.
  • Active borders to specify which borders appear around the paragraph. All four segments are selected by default, which adds a complete box around the paragraph. You can click any combination of segments
  1. Select the amount of padding you want at each side of the paragraph.

Setting Background Options (CSS only)

  1. Highlight the paragraph you want to format.
  2. On the Format tab of the Text Properties panel, click the Edit button.
  3. In the Paragraph Settings dialog, click the Background tab.
  4. Set the background format options for the paragraph. If you choose Automatic, the settings for the parent style pass through to the paragraph. See Understanding the Automatic Setting.
    • Color sets the background color behind the text. Click the Color box to select a new color from the Color Picker.
    • Image sets the background to an image. Click Browse to select an image.
    • Attachment sets the background image to either remain fixed or scroll as the text scrolls.
    • Repeat sets how the image displays behind the text. Choose None to display a single image that does not repeat. Select Both to fill the background entirely with the image. Select Horizontal or Vertical to display a row of images horizontally or vertically behind the text.
    • Image Position sets the initial position of the background image. To set the position to a specific value, select Value from the Horizontal and Vertical drop-down lists and enter a value for the position in the selected unit of measurement.

To position the image correctly in browsers, the horizontal and vertical values interact. Note that when you change the setting for the horizontal or vertical position, the other setting changes accordingly.

Using the CSS Editor

Using the CSS Editor, you can assign CSS class definitions to your site for greater design flexibility. Launched from the object or paragraph setting dialog, the CSS Editor is a blank window that allows you to type or paste your own custom definitions.

  1. Click Edit with CSS Editor from the Paragraph Settings dialog.
  2. The Object Format dialog appears.
  3. Type or paste CSS definitions in the text area.
  4. Click OK to close the Paragraph Settings dialog.

NetObjects Fusion does not verify the validity or the syntax of the CSS definitions typed in this dialog.

For assistance such as code hinting and syntax checking, use the CSS Code panel. To find out more about CSS, see CSS Basics.

Using the Text Format Toolbar

NetObjects Fusion offers the new Text Format toolbar for complex yet easy to apply text formatting options similar to those in word processing applications.

The Text Format toolbar displays the most commonly used text formatting options. You will find it more convenient to use the text formatting commands from the toolbar, if you want to have more free space on your workspace. You can close or hide the existing panels and use the Text Format toolbar for formatting selected text. The text formatting toolbar works in conjunction with the Text Properties panel and the CSS Panels.

The controls from the Text Format toolbar become active when text is selected.

You will find the following text formatting options on the Text Format toolbar:

  • Font. Font is a simple but important factor in any page. The font selection (the style of the text itself) can influence the way others view documents, either on the screen or in print. For example, Arial font looks better on screen, while Times New Roman is clearer in print. To apply a font type to text, select desired text with your cursor, and choose a font type from the font drop down menu.
  • Font Size. You may encounter times in which you need to display some text larger or smaller than other text. Selecting desired text with the cursor and choosing a font size from the drop down menu changes the size of text.
  • Bold. When applied, the text becomes bold.
  • Italics. When applied, the text becomes italicized.
  • Underline. Underlines the text.
  • Strike-through. A line is created through the text.
  • Over-line. Places a line over the text
  • Align Left. Aligns the selection to the left of the text area.
  • Center. Aligns the selection to the center of the text area.
  • Align Right. Aligns the selection to the right of the text area.
  • Justify. Aligns the selection to both the left and right margins of the text area.
  • Line wrap. Toggles white-space: nowrap. Selected by default.
  • Line Spacing. Adjust the line spacing (single-spaced, double-spaced, etc.)
  • Word Spacing. Increases or decreases the space between words.
  • Letter Spacing. Increases or decreases the space between characters.
  • Bullets. Creates an unordered, bulleted list.
  • Decrease Indent. Decreases the indentation of the current selection (to the left).
  • Increase Indent. Increases the indentation of the current selection (to the right).
  • Highlight. Highlight the current selection; default color is yellow.
  • Font Color. Changes the font color; the default/automatic color is black.
  • Subscript. Sets subscript position to text.
  • Superscript. Sets superscript position to text.
  • Case. Set the case of the text: Upper Case, Lower Case, Capitalize and SmallCaps

Formatting Text Objects within Paragraphs

A text object is a portion of text that you can treat as a single unit. For example, a link is a text object. When you create the link and format it, you apply formatting features to the entire link as a single unit. If you apply a color, it applies to the entire link, not just a few letters. Paragraphs are also text objects because you can format them as a single unit without formatting the entire text box that contains the paragraph.

Paragraphs can contain links and other text objects. When you format a paragraph containing another text object, some but not all of the new formatting is also applied to the contained object. Generally, the formatting is consistent with the type of object and the formatting available for it. For example, links do not have margins, so if you change the paragraph's left and right margins, the link is not affected. But because the font of a link can be formatted, if you format the paragraph's fonts the link's fonts are also formatted. However, if the link's font has already been defined, it will not take on the paragraph's font.

If you change the format of the contained object, it does not affect the container object. So, if you change the color of the link text, the surrounding paragraph text is not affected.

The following table shows which text attributes affect a contained object and which do not.

Text attribute Affects contained object Does not affect contained object
Font x
Style x
Size x
Color x
Position X
Case x
Decoration x
Small caps x
Alignment x
Image wrap x
Line height x
Letter spacing x
Word spacing x
Space above x (relative size corresponds to parent element's width)
Space below x (relative size corresponds to parent element's width)
First line indent x
Left margin x
Right margin x
List style x
List indent x
All border and background attributes x

Working with Text Styles

A text style is a predefined set of formats for the characters, paragraphs, lists, borders, and backgrounds of text. Text styles provide a convenient way to specify, replicate, and update paragraph formatting for a text selection.

You can create text styles or modify the text styles included with NetObjects Fusion . You can also create custom styles to use in conjunction with the styles on the Styles list.

Applying a Text Style to a Paragraph

  1. In Page view, position the insertion point in the paragraph to which you want to apply a text style.
  2. In the Paragraph section of the Text Properties panel, select a text style by clicking the Text Style icon.

For example, if the original text is the Normal(P) style, and you select the Heading1 (H1) style for the text, the entire paragraph changes to the H1 style.

Applying a Style to a Text Span

A span is a selection of text that you format as a unit. You can assign a custom style or other formats to the characters included in a span to differentiate that text from the rest of the paragraph. For example, if you want your company's name to always appear in bold italic, you can create a custom style specifying those attributes. Then you select each instance of the company name as a span and apply the custom style.

You can achieve the same result by selecting the text and manually formatting it from the Properties panel, but when you use a span you can apply a custom style quickly and then change it globally if necessary.

To create a span:

  1. In Page view, select the text you want to format.
  2. Click the Span tool on the Standard toolbox.

The New Span dialog appears.

  1. Select a custom style from the drop-down list, or click the Format button and apply formatting to the selected text.
  2. Click OK.

To remove a span, position the insertion point in the span, click the Span tab on the Text Properties panel, and click Remove Span.

Using Custom Styles

You can create custom styles to augment HTML tag styles. HTML tag styles, such as Heading 1 <H1> or Normal (P), are fundamental design characteristics of HTML. You can see examples of tag styles on the Text tab in Style view. Custom style elements are combined with HTML tag styles to produce a wide range of formats that you can apply to different pages or the entire site. See Creating a Text Style to create a custom style.

For example, suppose the original H1 head is bold and large. You want to create a series of custom H1 styles. On one set of pages you want the H1 heads to look like a shout, so you create a custom style to set the text to all capitals and italic and you call this custom style Shout. On the other pages you might want the H1 heads to look like a whisper, so you create a custom style that sets the text to be lower case and condensed. Since you don t want the text to inherit the bold and large size from the original H1 setting, you do not select Automatic. You name this custom style Shhh.

When you apply the custom style to the text with the original H1 head, the only text attributes affected are those specified in the custom style. So, if the original H1 head is bold and large, the result of applying the custom style Shout to selected text looks like this:

THE H1 HEADS WOULD LOOK LIKE THIS

The text is bold and large (from the original <H1> head) and also all capitals and italic (from the custom style). The bold and large attributes pass through to the <H1> Shout style because the custom style did not affect those attributes.

Applying the Shhh custom style, however, looks like this:

The H1 heads would look like this

In this case, the <H1> text in the Shhh style does not include the bold and large font size because you changed those attributes instead of using the Automatic settings. If the settings for bold and large remained Automatic, the Shhh style would include the bold and large font. When you apply custom styles, the name of the custom style is appended to the original HTML tag style with a period to differentiate the original HTML tag style from the new custom style. So, the two <H1> custom styles become <H1.Shout> and <H1.Shhh>. When NetObjects Fusion generates the HTML, the styles are represented as <H1 class="Shout"> and <H1 class="Shhh">.

Setting a Style's Scope

When creating styles, you can limit the range of a style's effects by setting the scope of the style. The scope of a style determines where the style's effects are available and applied. The scope options are:

  • SiteStyle. The style is available whenever the SiteStyle is applied.
  • Site. The style is available throughout the current site.
  • Page. The style is available only on a specific page of the current site.

You set the scope of a style when you create it.

Creating a Text Style

  1. In Page view, from the Text menu, choose Manage Styles.

The Manage Styles dialog appears.

The pane on the left lists the currently defined styles.

The list of styles can include styles that are specific to the current page, the entire site, or part of a specific SiteStyle.

You can also create custom styles for the navigation bar, a text object, lists, and so on, for the styles listed in the pane on the left.

  1. To create a new style, click New or Duplicate.

The New Text Style dialog appears.

The Duplicate Text Style dialog box is similar. Duplicating a style is a quick way to give it a different scope. For example, you can duplicate the H1 style to the H2, H3, and H4 headings and then edit them individually.

  1. In the Style type section, select:
  • Redefine HTML tag and choose a tag to edit from the drop-down list.
  • Create custom style and type a name for the style in the field.

A period is added to the custom style's name, such as .customstylename. In the generated code, custom style is then referred to as class=customstylename.

  1. Select a style scope for the new style.
  • Page specific. If you select this option the new style is only available for the current page. If you are redefining an existing tag, the original definition is still in force for the rest of the site. If you create a new style, it is not available on any other page of the site.
  • Site wide. If you select this option the new style is available throughout the current site. If you are redefining an existing tag, all instances of this tag change throughout the site. For example, if you change the H1 font color to red and select Site wide, all text in the site with that style applied becomes red.
  1. Click OK.

The Text Format dialog appears. You can now set the attributes for each feature of the style. See Formatting Paragraphs and Formatting a List for details.

Creating a Custom Text Attribute (CSS only)

When you create a text style, the Text Style dialog includes a Custom tab where you can define custom text attributes. You should only create custom text attributes if you know HTML and cascading style sheet coding and understand the implications of cascading style sheet features.

For example, if you enter the name cursor and the value wait, the pointer in Microsoft Internet Explorer can appear as an hourglass. If you assign this new custom style to the Text Object, the pointer displays as an hourglass when it is over a text object on your site's pages. Similarly, you can use custom attributes to take advantage of cascading style sheet attributes not supported directly, such as the pointer.

To create a custom attribute:

  1. Follow the steps in Creating a Text Style to create a new text style.
  2. In the Text Format dialog, click the Custom tab.
  3. Click the New button.
  4. Enter the style name for the new attribute and then enter its value.

To edit an existing custom attribute, select it in the list on the Custom tab. Its name and values appear in the Attribute properties boxes on the Custom tab. Make your changes in those boxes.

  1. Click OK.

Custom attributes do not display in Page view but do appear in the browser if it supports cascading style sheet features.

Modifying a Text Style

  1. In Page view, from the Text menu, choose Edit Text Styles.

The Text Styles dialog appears.

  1. Select a text style by clicking the Text Style icon, then click Edit.

The Text Format dialog appears.

  1. To change the style, see Formatting Text.
  2. When you finish, click OK in the Text Format dialog.
  3. In the Text Styles dialog, click Close.

NetObjects Fusion updates any paragraph to which you applied the style.

Deleting a Text Style

  1. In Page view, from the Text menu, choose Edit Text Styles.

The Text Styles dialog appears.

  1. Select the style you want to delete, then click Delete.

You cannot delete a style defined with multiple scopes. You must delete each one separately.

  1. Click OK to confirm deletion and click Close.

Creating Bulleted and Numbered Lists

To create a simple numbered or bulleted list:

  1. In Page view, select the text you want to format as a numbered or bulleted list.
  2. Click a list type button on the Text Properties panel to select a numbered list or a bulleted list.

When you click a list type button, NetObjects Fusion applies the default Ordered or Unordered List style. To change the style, see Formatting a List.

  1. To add an item to the list, press Enter at the end of a line. Press Shift+Enter to start a new line under the same bulleted item.

To remove the list style from the selected list level, click the List tab on the Properties panel and click Remove List.

To create a multi-level numbered or bulleted list:

  1. In Page view, select the text you want to include in the list. Make sure each item in the list is a separate paragraph.
  2. Click a list type button on the Text Properties panel.
  3. Select the paragraph or paragraphs you want to make subordinate and click the right indent button or press Tab.

Each click of the indent button moves the selected paragraphs over one level in the list and adds the appropriate bullet or list character for that level.

Formatting a List

  1. In Page view, select any text in a numbered or bulleted list.
  2. Click the List tab on the Text Properties panel.
  3. Click the Format button.

The List Settings dialog appears.

  1. Set the List style. If you choose Automatic, the settings for the parent style pass through to the list. See Understanding the Automatic Setting .
  • Bullet. Select a bullet character or type of numbering from the drop-down list.
  • Bullet Image (CSS only). To use a graphic as the bullet character, click Browse and select the image you want.
  1. Set the Line indent (CSS only).
  • Automatic applies the indenting of the object that contains the list whenever the list text wraps to a second line. The amount of the indent is preset. See Understanding the Automatic Setting.
  • All lines indents all lines in each listed item to the same position.
  • First line only indents the first line of each item in the list, but not the other lines.
  1. Click OK.

Setting the List Start Value

If you select a numbered list and want it to start with a value other than 1 or A, you can define a new start value. To set a new start value:

  1. In Page view, select any level in the numbered list. New start values only apply to numbered lists, not bulleted lists.
  2. Click the List tab on the Text Properties panel.
  3. In the Start Value box, enter a new start value, or click the up and down arrows to set the new value.

All entries at that level of the numbered list now conform to the new start value. For example, if you change the start value to 3, the first entry at that level is labeled 3, and the next entry is labeled 4.

Setting the List Bullet or Numbering Type

You can choose a type of numbering or bullet character for each level of a list. To set a new bullet or numbering type:

  1. In Page view, select any level in the list.
  2. Click the List tab on the Text Properties panel.
  3. From the Bullet type drop-down list, select the type of bullet character or numbering you want for that level of the list.

The text styles associated with lists are List, Ordered <OL>, List, Bulleted <UL>, and List Item <LI>. Selecting the type of bullet character or numbering automatically selects the proper text style from the ordered or bulleted list. Changing the <LI> style affects both types of lists.

Lists are formatted with bullets based on the List Item <LI> style; however, you can also format lists using other styles, such as Normal<P>. In that case, the list will not have a bullet character associated with it. Conversely, if you type a series of paragraphs and want to make them a list, you can apply the List Item <LI> style to the paragraphs.

Inserting Symbols

You can insert special symbols, such as an em dash or copyright symbol into text.

  1. In Page view, double-click the text box containing the text where you want to insert the symbol.
  2. Click the location in the text where you want to insert the symbol.
  3. From the Text menu, select Insert Symbol.
  4. In the Insert Symbol dialog, select a symbol and click Insert.

The symbol appears in the text. You cannot edit the list of symbols.

Adding Text to a Shape or Picture

When you add text to a shape or picture, the text becomes part of a new image file when you publish the page. Because the text is part of the image, the site visitor's browser displays the correct font, even if the font is not installed in the visitor's browser.

You can select the Anti-Alias option to smooth fonts and remove the jagged edges from a text selection. Turning off this option produces a hard-edged transition between pixels, and therefore, the appearance of jagged edges is heightened.

To add text to a shape or picture:

  1. In Page view, select the shape or picture to which you want to add text.
    The corresponding properties panel appears. If you are working with a picture, click the Text on Image tab.
  2. Type the text you want to add. Press Enter to start a new line.
    If you do not insert line breaks, the text does not wrap and may not be seen if it is wider than the element.
  3. In the Font area:
    • Select a font, style, and size.
    • Click the Color box and select a color in the Color Picker.
    • Select a Matte color when using a transparent picture. A matte color is used to help blend the text with a background.
  4. In the Position/Text area:
    • Select Horizontal position and Vertical position for the text.

The Horizontal position and Vertical position settings position the text within the object frame.

  1. Type in the offset field to position the text from the margins by pixels. You cannot offset text that is positioned in the middle of an image.
  2. Select Alignment position for the text.
  • The alignment left-aligns, centers, or right-aligns two or more lines of text. It has no effect on single lines of text.
  1. Type in the Rotate field to change the text orientation by degrees.

To specify multiple lines of text in a SiteStyle banner or button, use the Custom Names dialog as described in Using Custom Button and Banner Names and File Extensions.

  1. Preview the image in Page view.

Drawing Shapes and Lines

Shapes and lines are essential building blocks for your page designs. You can draw rectangles, rounded rectangles, ellipses, and polygons, as well as HTML horizontal rules, lines, or SiteStyle lines, and set shape and line properties.

Drawing Shapes

To draw an ellipse, rectangle, rounded rectangle, or polygon:

  1. In Page view, select the Draw tool on the Standard toolbox and choose the shape you want to add from the flyout.
  2. Draw the shape on the page.
    • To draw a rectangle, ellipse, or rounded rectangle, click and draw the shape.
    • To draw a polygon, click to set the start point, click to set all-but-the-last points, and double-click the last point.

The Properties panel for the shape you created appears.

  1. Type an alt tag in the Alt Tag field.

See [Adding and Modifying Alt Tags].

  1. In the Line width box, set the shape outline thickness.

To make the border invisible, set it to zero.

  1. In the Color section of the Properties panel, click the Fill Color button. In the Color Picker, select the color you want to assign to the shape fill and click OK.
  2. Click the Line Color button. In the Color Picker, select the color you want to assign to the shape border and click OK.
  3. To adjust the shape, drag its handles.
  • To change the shape proportionally, drag a corner handle while holding down Ctrl.
  • To vary the curve of arounded rectangle, select it, place the pointer over the inside corner handle until it changes to a four-headed arrow, then drag toward the inside or outside of the shape.
  • To edit the lines of apolygon, select it, place the pointer over any handle until you see the four-headed arrow, then drag the handle to adjust the shape.
  1. To add text to a shape, see Adding Text to a Shape or Picture.

When you publish a page with shapes, NetObjects Fusion generates each shape as a .gif file. If the page contains more than one shape of the same type, NetObjects Fusion adds a number to the shape's file name. For example, the first rounded rectangle you draw is named a_Rounded_Rectangle.gif, the second one is named a_Rounded_Rectangle1.gif, the third a_Rounded_Rectangle2.gif, and so on.

Adding HTML Horizontal Rules

HTML rules are always horizontal. They can display with or without beveled edges in a browser. When you embed an HTML rule in a text box, you can set its length as a percentage of the text box width.

To draw an HTML horizontal rule:

  1. In Page view, select the Line tool on the Standard toolbox and choose the HR Rule tool from the flyout.
  2. Draw the horizontal rule on the page.

The HR Rule Properties panel appears.

  1. In the Thickness box, set the thickness of the rule.

The standard width is 2 pixels.

  1. Select Shaded to create a bevel effect.

The standard HR rule is shaded.

  1. If the HR rule is embedded in a text box, you can specify its length as a percentage of the text box.

Adding a SiteStyle Line

You can use SiteStyle lines to divide a page into sections. A SiteStyle line is part of the current SiteStyle. See Using SiteStyles.

  1. In Page view, select the Line tool on the Standard toolbox and choose the SiteStyle Line tool from the flyout.
  2. Click where you want to position the left end of the line.

The SiteStyle Line Properties panel appears.

  1. To select a different image for the line, click Custom Image and choose an image in the Picture File Open dialog.
  2. To use a line from a different SiteStyle, click Other and select a SiteStyle from the drop-down list.

If you change SiteStyles, NetObjects Fusion updates the line. A SiteStyle line is a .gif file.

You can change the size of the SiteStyle by dragging a handle. However, if you assign a new SiteStyle, the line returns to its default size.

Drawing Lines and Arrows

  1. In Page view, select the Line tool from the Draw tool flyout on the Standard toolbox.
  2. Drag from one point to another to set the position, length, and orientation of the line.

The point where you start dragging is the head of the line. The point where you finish is the tail of the line, regardless of the direction you drag. To constrain the line to vertical or horizontal, hold down the Shift key while dragging.

The Line Properties panel appears.

  1. Type an alt tag in the Alt Tag field.

See [Adding and Modifying Alt Tags].

  1. In the Line width box, set the width of the line in pixels.
  2. In the Color section, click the Color button for the line, head, and tail, choose a color in the Color Picker, and click OK. To set all three items to the line color, select All parts use one color.
  3. In the Style section, select styles for the head and tail from the drop-down lists.

If you want the head and tail to share the same style, select the style for the head, then select Head/Tail same style.

Select Outline to assign the line color to the head and tail outlines, regardless of their fill colors.

When you publish a page with drawn lines, NetObjects Fusion generates each one as a .gif file. On your page, each line occupies the rectangular area defined by the beginning and ending points of the line. If the page contains more than one shape of the same type, NetObjects Fusion adds a number to the shape's file name. For example, the first line you draw is named a_ArrowLine.gif, the second one is named a_ArrowLine1.gif, the third a_ArrowLine2.gif, and so on.

Creating and Editing Fields

Fields contain variable text that is subject to change, such as the date and time the site was created or last modified, the site name and author, and so on. NetObjects Fusion includes several fields you can use and you can define your own.

Inserting an Existing Field

  1. In Page view, double-click the text box and position the insertion point where you want to insert the field.
  2. From the Text menu, choose Insert Field.

The Insert Field dialog appears.

  1. Select the type of field you want to insert from the Type drop-down list.

If you select Date & Time, click Date & Time Format, select a format from the list in the Date & Time Format dialog, and click OK.

Once you publish the site, the date on the final HTML page does not change automatically. It only changes if you modify the site in NetObjects Fusion and publish again. This is true of all variables.

If you select Site & General and choose Author, you must type the author's name on the META tags tab of the Page Properties panel.

  1. Select the specific field to insert from the Field list.
  2. Click OK in the Insert Field dialog.

Creating a User-Defined Variable

A user-defined variable is text or a phrase that is subject to change. For example, if you need to refer to quarterly sales figures, you can create a user-defined variable and insert the number as a field. As the figure changes each quarter, you can edit the field, and NetObjects Fusion automatically updates the name wherever it appears in your site. You can only create plain text variables. You cannot reference internal NetObjects Fusion fields, such as page names, asset names, or object properties.

  1. In Page view, double-click the text box where you want to insert a user-defined variable.
  2. From the Text menu, choose Insert Field.

The Insert Field dialog appears.

  1. Select User-Defined Variable from the Type drop-down list.
  2. Click New.

The New Variable dialog appears.

  1. Type a name and value for the field and click OK.

The field appears highlighted in the Field list of the Insert Field dialog.

  1. Click OK.

Using the CSS Panels

One of the major benefits of NetObjects Fusion is the options for formatting Web content. Whether you are a small business owner creating your Web presence and prefer using the Text Format Toolbar, or an experienced Web designer who prefers working with CSS, you will find NetObjects Fusion has just what you need, no matter what your skill level may be.

The CSS panels from Page View allow you to view and modify inline CSS properties of the currently selected object.

The three CSS panels within NetObjects Fusion allow you to edit CSS properties in three different modes, each involving an increased level of expertise to allow you learn and grow. The three CSS panels from within NetObjects Fusion are:

The CSS panels become active only when an object is selected in Page View.

The CSS panels are by default grouped together. However, you can detach panels from the group if you prefer working with each individually. The CSS panels may be docked at one side of the workspace as a group or separate. To find out more on how to dock or float the CSS Panels within the workspace, see Working with Panels.

You can also resize the panels to your preference by dragging their borders.

To open any of the CSS panels: In Page View, from the View menu, select More Panels. The list of available panels will appear.

Select the CSS panel you want to be visible.

You can also show and hide the CSS Panels by clicking on the CSS button on the Panel Launcher in Page View. See Setting Up the Page Design View Display.

Formatting Text Using the CSS Panels

By default, NetObjects Fusion uses Cascading Style Sheets (CSS) to format text. The styles that are applied by using either the Text Properties panel or the Text Format toolbar create inline CSS rules embedded in the text object's HTML definition. Using CSS, offers the ability to make updates to objects at the page or site level with a simple change of the assigned property, creating a ripple effect of updates to those objects containing the assigned property.

A new way of formatting text in NetObjects Fusion is by using any of the three CSS panels: CSS Common, CSS Style Sheet, and CSS Code.

Formatting Text Using the CSS Common Panel

NetObjects Fusion introduces the CSS Common panel, which is a user-friendly and easy to work with for editing properties of the selected object in Page View. It is a visual environment in which you can set CSS properties for the currently selected item by using common controls like buttons, drop-down lists, and color panels.

The CSS Common panel contains seven main button selections related to the following CSS properties: Character, Paragraph, List, Background, Margins, Borders, and Padding. To display each section, click its corresponding button.

To better clarify working with the CSS Common panels, consider a text object in Page View.

To format the properties of a selected object in Page View using the CSS Common panel: Add a object on the page. In this case, select a text object. Use the properties in the CSS Common panel's sections to edit the properties of the selected object.

In the Character section, you can edit the following text-related properties:

  • Font. Sets the font family.
  • Size. Sets the size of the font.
  • Color. Sets the color of the font.
  • Font Weight. Sets the weight of the font: normal or bold.
  • Font Style. Sets the style of the font: normal or italic.
  • Font Underline: Adds underline decoration to text.
  • Overline Decoration. Adds overline decoration to text.
  • Strike-through Decoration. Adds strike-through decoration to text.
  • Superscript. Sets superscript position to text.
  • Subscript. Sets subscript position to text.
  • No-wrap. Sets the white-space property for the current selected text.
  • Case. Set the case of the text: Upper Case, Lower Case, Capitalize, and SmallCaps.

The Paragraph section contains controls for editing paragraph properties:

  • Alignment. Aligns the text in an element: left, right, center, or justify. Only one option may be active at a time.
  • Indent. Indents the first line of text in an element.
  • Line Height. Sets the height of the line. Select the value from the drop-down list, after first setting the unit.
  • Word Spacing. Increase or decrease the space between words.
  • Letter Spacing. Increase or decrease the space between characters.

The List Panel contains buttons for editing list properties:

  • Bullet. Set a bullet type from the drop-down list, or set an image to be used as bullet in the list.
  • Indent wrapped lines. Check this option to indent wrapped lines.

The Background section defines the background properties of an object. It contains controls for editing background properties:

  • Background image. Sets an image as the background.
  • Background color. Applies a background color to an object.
  • Fix background position. Sets whether a background image is fixed or scrolls with the page.
  • Repeat. Sets if and how a background image will be repeated: horizontal or vertical.
  • Position. Sets the starting position of a background image.

The Padding section contains controls for editing padding properties. The CSS padding properties define the space between the element border and the element content. The left, right, top, and bottom padding can be changed independently using separate properties.

  • Uniform padding. Sets uniform padding values.

When this option is checked, the controls for the top padding are enabled and the values for the top padding will be applied to the left, right, and bottom padding, also.

  • Top. Sets the top padding of an element.
  • Right. Sets the right padding of an element.
  • Bottom. Sets the bottom padding of an element.
  • Left. Sets the left padding of an element.

The Borders section contains controls for editing border properties. The CSS border properties allow you to specify the style, width and color of an element's border. Using the CSS border properties, you can create borders having color, width, and style effects that can be applied to any element.

There are four buttons for controlling the four borders:

  • Top. Sets the properties for the top border.
  • Left. Sets the properties for the left border.
  • Right. Sets the properties for the right border.
  • Bottom. Sets the properties for the bottom border.

When a border is enabled, related controls for style, width, and color are enabled as well:

  • Style. Sets the style for the selected border.

To do that, select a style from the drop-down list. The available styles are: Automatic, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, and Outset.

  • Width. Sets the width of the selected border.

To do that, select a value from the drop-down list, after you have selected the unit first.

  • Color. Sets the color for the selected border.

To do that, select a color from the Color panel that appears on clicking the arrow button.

The Margins section defines the space around elements. It contains controls for editing margins properties.

  • Uniform margins. Sets uniform margins. When this option is checked, the controls for top margin are enabled, and values for the top will also be applied to the left, right, and bottom margins.
  • Top. Sets the top margin of an element.
  • Right. Sets the right margin of an element.
  • Bottom. Sets the bottom margin of an element.
  • Left. Sets the left margin of an element.

Working Directly with CSS Properties

The CSS – Property Sheet panel is a CSS editing panel, containing a property grid with CSS properties and values.

The CSS – Property Sheet contains additional CSS properties to the most commonly used properties found on the CSS Common panel.

To assign a value to an element, choose a CSS property from the Properties column on the left, and set the value for that property on the Values column on the right.

The CSS – Property Sheet panel contains three options to help organize and work with the properties you need, when you need them. Select from the following options:

  • Categorized, where the grid contains a categorized list of all the CSS properties available.
  • Alphabetic, which contains a list of all the available properties in alphabetical order.
  • Only-defined, which displays the CSS properties that have already been assigned to an object or element in your project.

Categorized CSS – Property Sheet

The Categorized section on the CSS Property Sheet displays the list of CSS categories ordered alphabetically. Each category contain properties on the left and values on the right.

To set new values to properties:

  1. Expand a category on the left by clicking the corresponding + sign.
  2. On the Properties column, select a property from the expanded category. When applying a value to a property, you will have the option to type the value or select a value from the options in the drop-down list, if available.
  3. Type or select the corresponding value if a drop-down list available.

To remove CSS values:

  1. Select the CSS property on the left column.
  2. Delete the corresponding value from the right column.
  3. Press Enter.

Alphabetized CSS – Property Sheet

The Alphabetic section displays all CSS properties arranged alphabetically. You can perform the same actions of setting new values to CSS properties, as in the Categorized section. For example, to set the Font Style, select font-style on the Properties column and select a value from the drop-down list on the Values column.

Only Defined CSS – Property Sheet

The Only Defined section filters and displays only the CSS properties that contain values for elements you have already defined. In this section, you will also have the opportunity to add additional CSS properties. You will find all the available CSS Properties in the Add Property drop-down box. To set a new value to a CSS property from the list:

  1. Select the CSS Property from the Add Property drop down box. The property name will appear on the Properties column.
  2. Select or type the new value in the right column.

Using the CSS - Code Editor Panel

The CSS – Code Editor Panel is a CSS code editor that allows direct editing of the CSS rules currently applied to an object.

The CSS – Code Editor Panel may be resized to display the entire CSS syntax.

The CSS – Code Editor Panel's toolbar contains two buttons:

  • Line Numbers, which displays line numbers for each line of code.
  • Save, which will save the current content of the CSS Code Editor Panel.

To display line numbers for each line of code, click the Line Numbers button. Line numbers will then be visible.

The CSS – Code Editor Panel includes a context menu that appears on right-click inside the content of this panel.

The context menu offers the same functional and configuration options as the context menu from the CSS - Code View. See Using the CSS Code Context Menu.

Checking Spelling

You can check the spelling of English language words in NetObjects Fusion. You can add words to a personal dictionary so they will no longer be flagged as misspelled. Your personal dictionary is a simple text file, so you can use any text editor to add or delete words. You can check spelling throughout an entire site, on selected pages, or on a single page.

If Smart Spell Check is turned on, once NetObjects Fusion checks spelling in a text block, it does not check the same text again unless you modify the text or turn off smart spell check. See Setting Text Options.

  1. Go to Site view or Page view.
  2. From the Tools menu, choose Spell Check.
  3. Select:
    • Entire Site to check spelling for text on all pages in the site.
    • Current Page to check the spelling of text only on the page displayed in Page view.

If NetObjects Fusion does not recognize the word, it displays the word in the Not in Dictionary field of the Spelling dialog.

Email addresses and URLs are not checked.

  1. Click:
    • Options to choose a language, and to choose a location for your personal dictionary.
    • Ignore to skip this instance of the word.
    • Ignore All to skip all instances on this page.
    • Change to replace this instance with the word in the Change to field.
    • Change All to replace all instances on this page with the word in the Change to field.
    • Add to put the word in your personal dictionary.
    • Suggest to see alternate spellings for the word. Double-click a suggestion to use it.
    • Cancel to cancel the spelling check.

Finding Text

  1. Go to Site view or Page view.
  2. From the Edit menu, choose Find.

The Find and Replace dialog appears.

  1. In the Find in field, select a scope for the search.

The options vary depending on the current view and the selected object.

  • Entire site to search all text in the site.
  • Selected pages to search text on the pages selected in Site view.
  • Current page to search text on the page currently displayed in Page view.
  1. In the Find what field, type the word, letters, or phrase you want to find.
  2. Select options to narrow the search.
  3. Click Find Next.

NetObjects Fusion searches for the text.

Replacing Text

  1. Go to Site view or Page view.
  2. From the Edit menu, choose Replace.

The Find and Replace dialog appears.

  1. In the Find in field, select a scope for the search.

The options vary depending on the current view and the selected object.

  • Entire site to search all text in the site.
  • Selected pages to search text on the pages selected in Site view.
  • Current page to search text on the page currently displayed in Page view.
  1. In the Find what field, type the word, letters, or phrase you want to replace.
  2. In the Replace with field, type the replacement text.
  3. Select options to narrow the search.
  4. Click Find Next.
  5. Click Replace to replace the found text, or click Replace All to replace all instances of the text on the page with the replacement text.

Counting Words, Lines, Paragraphs, and Characters

To get a count for the current page, in Page view, choose Word Count from the Tools menu. If the text box includes embedded objects, the line count is incremented for each embedded object.