Frame Text

 15 min

  

To make your site as accessible as possible to everyone, you should use HTML text frames for your content. In this tutorial we look at the best ways of adding text to your website.

By the end of this tutorial you will be able to:

Let’s begin...

A new blank document opens with a single page displayed in the Site tab.

HTML frame text

There are three types of text in WebPlus—Artistic, Creative and HTML. Each type has different properties and they allow you to create great looking websites. However, any time you add effects such as bitmap fills, transparency, and filter effects to an artistic text object, the object is converted to a graphic when it is published. Similarly, in a Creative text frame, if you use an unusual font, or apply special formatting, the text will instead be rendered as a graphic. This can increase the download time of your website, and prevent the use of screen readers. To stop this from happening, all main body text content should ideally be placed inside an HTML text frame.

 Let’s start a new site so that we have a blank canvas.

To place an HTML text frame:

  1. On the Standard Objects toolbar, in the  Text Frames flyout, click the HTML Text Frame Tool.

  2. Click and drag on the page to insert the frame at a size of your choice.



    - or -

    Click once on the page to insert the frame at its default size. (You can always resize it later.)



    The HintLine toolbar tells you that this is an HTML frame.

Let’s now fill our frame with some text. To save time when designing a site, you can fill any text frame (Creative or HTML) with placeholder text. This can help you (or your client) to visualise the overall design before the actual content is added.

To create placeholder text:

  1. Click inside the text frame to create an insertion point, and then type the word ‘Welcome’. Press Return to drop to the next line.

  2. On the Insert menu, click Fill with Placeholder Text.

To select, edit and format text:

  1. Click to place an insertion point after the word ‘Welcome’ and press the Spacebar. Type ‘to ScubaSharks!’.

  2. Triple-click (or click and drag) on the first line of text to select it.

  3. On the Text context toolbar, in the styles drop-down list, select Heading 1. The heading is updated.

  4. After step 3, you might find that the text no longer fits. You may also see an  Overflow button.



    This means that there is more text in the frame than can fit at one time. However, it’s easy to resize a frame without changing the appearance of the text within. Let’s do this now.

 Top of page

To resize a frame by dragging:

  1. Move the mouser pointer over the frame’s right-center handle. The pointer will change to a double-headed arrow.

  2. Click and drag to resize the frame so that it stretches across the page, leaving some extra space for additional text.



    The actual text formatting doesn’t change, it simply re-aligns to fit within the boundaries of the frame.

Let’s add another heading to our text frame. This time, we’ll format it using the Heading 2 text style.

To format text using text styles:

  1. Click inside the text frame to create an insertion point at the end of the existing text, and then press Return to drop to the next line. Type the words ‘PADI Scuba courses’.

  2. On the Text context toolbar, in the styles drop-down list, select Heading 2.



    The style is applied to the text.

 Top of page

To select, copy and paste text:

  1. Triple-click on the paragraph in the text frame. The entire paragraph is selected.

  2. On the Standard toolbar, click Copy (or press Ctrl + C).

  3. Click next to the word ‘courses’ and press Enter to create a new line.

  4. Click Paste (or press Ctrl + V). The text is inserted.

 Don't forget to save your work!

 Top of page

Formatting Text Frames

If you want to make your text stand out from other text on your pages, why not format the text frame so that it creates an attractive container. Over the next few steps we'll apply a fill and padding to the text frame.

To change the fill color of a text frame:

  1. Click the text frame border to select the text frame (the border will turn to a solid outline).

  2. On the Swatches tab, click the Fill button and then click a color swatch to apply it. We selected Scheme Color 2.



    The fill is applied to your frame.

As you can see, the text goes right up to the edges of the frame. Now that we've added color this doesn't look as good. We can improve things dramatically by adding some internal padding to the frame.

To add internal padding:

  1. Ensure that the text frame is selected and on the Text context toolbar, click Frame Setup.

  2. In the dialog, set the all four margins to 10 pix and click OK.

    The frame is updated.

  3. (Optional) If necessary, resize the container to fit the text.

 Top of page

Text Styles

By using text styles, it makes it easy to keep the formatting of your text consistent.

We’ll illustrate this by changing the text color.

To update a text style:

  1. (Optional) Click or hover over the  handle (near the Web Objects toolbar) to display the tabs on the left.

  2. Click the Text Styles tab.

  3. Move the mouse pointer over the Normal style and click the down-arrow. (If a style is not displayed, check Show All at the bottom of the Text Styles tab.)

  4. Click Modify Normal...

  5. In the Text Style dialog:

  1. All of the body text in the frame is updated with the new color!

  2. By default, most styles are based on the Normal text style, so, by modifying Normal, the change is reflected throughout all of the Text Styles (and therefore your site). This makes it easy to quickly change the font, size and color of your entire site.

 Don't forget to save your work!

 Top of page

We couldn’t finish this tutorial without looking at the main advantage of using HTML text frames—HTML meta tags. These are used by search engines to categorize your site. If you assign a meta tag to a text style, WebPlus will automatically generate the code when the site is published.

Let’s do this now.

To apply an HTML meta tag to a style:

  1. On the Text Styles tab, move the mouse pointer over the Heading 1 style and click the down-arrow.

  2. Click Modify Heading 1...

  3. In the Text Style dialog:

We've covered many useful tips for creating, editing, and managing text with WebPlus. We hope that you’re now feeling more comfortable with the different text objects we’ve described and are ready to get started creating content for your own site! If you haven't done so already, you may want to have a look at the tutorial, Artistic text.

Things to consider when publishing text

When using text, there are a few points you might want to consider to ensure visitors to your website see exactly what you have designed without compromising on their visitor experience.

Fonts

Web pages will accurately display your design only if the fonts you have used exist on the computers of your site visitors.

Unfortunately, a user viewing your published site might not have the same font installed. In this case, an alternate font is used. You have no control over this substitution, and it may well spoil the look of your page.

To counteract this effect, you can do one of the following:

Creative text frames

Creative text frames are a cross between Artistic text and HTML frame text. They are especially useful for pull quotes and other text where special formatting is needed. However, this special functionality means that they are not compliant with web standards and cannot be searched by search engines. As such, we recommend that they are either only used for internal sites or only used for short passages and pull-quotes. For more information on creating and publishing text and text frames, see Understanding text frames in WebPlus Help.

Text with effects

When you publish your website, any text that uses a non-solid fill, a line style other than None, a filter effect, a 3D effect, transparency, or horizontal or vertical resizing will be output as an image.  See the tutorial Artistic text for more information.