Frame Text

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.

• Create HTML text frames.

• Insert placeholder text.

• Select, edit and format text.

• Format text frames.

• Apply and edit Text Styles.

• Define HTML meta tags.

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.

• You’ll see from the illustration above that the text colour looks different from our original design. This is because the document had a different colour scheme. When we applied the gradient fill, we used scheme colours. This means that the text will always use the current colour scheme. See the tutorial Colour Schemes or WebPlus Help for more information.

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-centre 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.

• When you resize an HTML or Creative text frame, you are only resizing the text container. The formatting of the text will not change. However, resizing an Artistic text object once it is placed on the page will change the formatting of the text itself. Artistic text that is stretched or squashed will always be output as a graphic. See the tutorial Artistic text for more information.
  

 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.
   
   

 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 colour 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 colour swatch to apply it. We selected Scheme Colour 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 colour 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 colour.

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:

• In the left pane, in the Character category, click the Font sub-category.

• Click to expand the Text colour drop-down list and then click the Scheme Colour 11 swatch.
  
  

• Click OK.

6. All of the body text in the frame is updated with the new colour!
   
   

7. 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 colour of your entire site.

 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:

• In the left pane, in the Paragraph category, click the HTML sub-category.

• Select the appropriate HTML tag (in this case H1 is already selected).
  
  

• Click OK.
  
  The H1 tag will be applied whenever the Heading 1 style is used within an HTML text frame.

• The Text Styles tab contains preset Heading styles which translate to HTML tags H1 to H6. You can format the text style to suit your site design whilst keeping those important tags. For more information on modifying text styles see WebPlus Help.

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:

• Use Websafe fonts.
  
  In WebPlus, Websafe fonts are listed by default in the left Fonts tab, and are denoted with a check mark in the context toolbar’s Fonts drop-down list.
  
  
  
  Websafe fonts will display on a visitor's computer as you see them when previewing your site.

• Convert text objects that use 'non-websafe' fonts into graphics before you publish to the web.
  
  To do this, right-click the object and select Convert to Picture....
  
  
  
  Once converted to a picture, you may wish to consider adding ALT and TITLE tags to ensure that screen readers can still ‘read’ the text. (See the Pictures tutorial and WebPlus Help for information.)

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.