Now that you have learned how to publish a web page using Serif WebPlus X2, and embellished your site with pictures, we will proceed to polish the appearance of the text on your web page. There are a couple of caveats in dealing with text with WebPlus X2, and I will show you how to avoid those potential problems.
For those who have just arrived at this site, please note that this is the third chapter of the Serif WebPlus X2 tutorial series. Unless you are already an experienced WebPlus X2 user, you may want to start at the first chapter. If you don't know anything about creating a website, it may also be a good idea to read The Beginner's A-Z Guide to Starting/Creating Your Own Website.
By the end of this chapter, you will have learned how to change the appearance of the text on your page, such as to switch the fonts, adjust the size of your words, change its colour (or "color" in US English), and create bold, italicized or underlined text. You will also learn how to increase the size of the page to adjust to situations where your content is longer than the default page size given by WebPlus X2. Along the way, you will learn a bit about website usability.
Many people have a lot of fancy fonts on their computer system, either because these fonts were bundled with some software they bought, or because they went to a Free Fonts website to get them.
While WebPlus X2 provides an easy way for you to use any font you want on your web page, you may be distressed to know that in most cases, you shouldn't use anything other than the standard fonts that you see everywhere, on everyone's website. That is to say, you should stick to the dull and boring fonts like Arial, Verdana, Times New Roman, Courier New, and a few others.
The problem with using unique and unusual fonts lie with the limitations of web pages at the current time. When you change a font on a web page, the font is not actually embedded into your web page. Instead, a hidden instruction in the web page is inserted by WebPlus X2 to tell the web browser what font it should use to display your content. Your web page looks fine on your own computer, because your own browser is able to locate that font on your system and use it to display your page. But if you look at that same page on another computer, you may find that the page is shown using some other font, most likely Times New Roman, because the browser couldn't find the font you specified.
More details about this can be found in the article Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website, along with answers to some questions that webmasters often ask about using rare fonts.
How are you to know which fonts are safe to use? Don't worry. WebPlus X2's font-changing interface, by default, if you use the method described below, restricts you to using what it calls "Websafe" fonts. These are fonts found on all Windows computers, and possibly also on Macintosh computers. Since these 2 types of systems combined probably account for a huge percent of Internet users, using fonts from only this set will probably allow your site to be viewed using the same fonts you designed it with.
To change the font, modify its size, or give your text another colour, first select the words you want to style. To do this, click your mouse at the start of the word or sentence that you want to style, and drag the mouse to the last character that needs to be modified. As you do this, WebPlus highlights the text that you have selected.
With the text selected, click "Text | Character..." from the menu. If you will remember from previous chapters, this means to click "Text" on the main menu bar, followed by the "Character..." item on the menu that appears.
A dialog box, entitled "Text Style" will appear.
To change the font, click the drop down box beside "Font". Notice that there aren't many fonts in the list. This is because, by default (unless you've changed something before), WebPlus X2 only shows you the "web safe" fonts. If you really insist on using fonts that are only on your machine and not on others, click the drop down box beside the font box and select "All fonts". That will cause the Font box to list all the fonts you currently have on your machine. But remember my warning above if you do this.
(To return the font box to only showing the fonts that are installed on most computers on the Internet, select the "Websafe" option from the drop down box again.)
It is also possible to change the size of the text from the same dialog box. To do this, click the drop down box beside the word "Size". The default shows "12 pt". Note that if the size you want isn't available as an option in the box, you can also type it into the field yourself. You don't have to add the "pt" part when you type your number. For example, if you type "16" and hit ENTER, the web editor automatically changes your "16" into "16 pt".
The same dialog box also allows you to change the colour of your words. The colour selector in the "Text colour" field determines the foreground colour of your words. The selector in the "Highlight colour" field lets you change the colour of the background behind your words.
Although you can put a tick in the "Underline" box to underline your text, you can also do so by selecting the words you want to underline, and then clicking the "U" button in the toolbar near the top of the WebPlus X2 window. Similarly, "B" button on that same toolbar lets you put those words in bold, while the "I" (the italicized capital "i") button places your selected text in italics. This part of WebPlus works pretty much like any ordinary wordprocessor that you've encountered before.
Another way to change the style of your text is to use one of WebPlus' predefined styles. Look for the drop-down box near to the top-left of your WebPlus X2 window that says "Normal". (It should be next to the "Verdana" drop down box.) Click the down arrow to reveal a list of predefined styles, and choose the one you want. For example, if you were to select some text and choose "Heading 1" from that box, your words will be enlarged, centred on the page and placed in bold. There are a number of other predefined styles in the list, and I leave it to you to experiment with it to see their effects.
WebPlus X2 allows you do fancy things with the text on your page. For example, instead of having your words appear on a straight line, the way the words on all the pages on thesitewizard.com do, you can have them curve up and down on the page, or appear as a wavy line.
Before you rush out to do this, however, be aware that when you make the text on your page do such fancy tricks, the text is actually converted behind the scenes to a picture on your page. You can resize that picture and move it anywhere on your page in the usual way.
For those worried that the picture cannot be read by a search engine or by blind people using screen readers, WebPlus X2 inserts a textual copy of your words in something known as an "alt" tag. Loosely speaking, this is an invisible tag attached to pictures to help those who cannot see pictures know what is contained in it. So don't worry. Using the Path text tool in WebPlus does not make your page any less search engine friendly or accessible to the disabled.
It does however increases the load time of your web page, that is, the time it takes for your web page to load on your visitor's machine, since graphics files tend to be bigger than the equivalent unadorned text on your page.
To make curvy text, first create a block with the "Artistic Text Tool" (see chapter 1 if you've forgotten how to do this). Note that it needs to be an Artistic Text Tool block, and not the normal text block that you use to hold huge paragraphs of your text. Type the text that you want to modify into that block.
Select the text in the box.
At the top of the WebPlus X2 window, you should be able to see two rows of icons underneath the menu. Hover your mouse over the last icon on the second row. The tooltip that appears should say "Path Text". If it doesn't, move your mouse over every icon one by one until you find one that says those words.
Click the small down arrow that is part of the icon. A pictorial flyout menu will appear, giving you various shapes that you can choose in order to style your text. Select the shape you want.
Your text should now appear in the shape you chose earlier. The box can be resized and moved to anywhere on your page that you wish.
If you have many paragraphs of text, you may find that they exceed the length of the text box that you've placed on your web page. Leaving the box as is and publishing your web page will result in part of your content being cut off. That is, the text that overflows the boundaries of the box will appear to be unceremoniously snipped off.
There are at least 2 ways of fixing that: one that results in poor web usability and the other the better method. Each of these is discussed at length below.
Let's deal with the less usable way first. Remember: it's better not to use this method.
To use this method, put your cursor somewhere in the box with the textual content. Right click the mouse (that is, click the right mouse button) to bring up a menu. Click the "Text Format | Overflowing text | Fixed scroll bar" (or "Auto scroll bar" — it doesn't matter which).
This will create a web page that looks something like the picture below.
Those who have encountered such sites before will probably know what's wrong with it. The web page itself has a text box with a scroll bar. To read the rest of the content of the text box, you will have to first scroll down using the web browser's scroll bars, so that you can see the rest of the text box. Unfortunately, not all the text is visible in that box, so you have to scroll down using the scroll bar on the text box. While this is not something that is life-threatening or anything like that, it is very irritating for the user, and reduces the usability of your website. The visitor cannot even use his/her keyboard to read more of the page. The Page Down key on the keyboard will only scroll down either the main web browser itself or the text box. All in all, it adds to the user's frustration with the site.
(Note: as a webmaster creating the web page, you are unlikely to feel frustrated with the page, since as the creator of the site, you're too closely invested in the site to view it impartially. This is normal. That's why it's good to get third party feedback, preferably someone who will be honest with you.)
Usability aside, the scroll bar method also produces highly non-standard HTML code, using web browser proprietary methods to achieve its effects. To be sure, WebPlus X2 tends to produce a lot of invalid HTML code anyway, but this method creates even worse code than you need to tolerate. As a result, I recommend that you avoid using this method to solve the problem of your content overflowing your web page.
Incidentally, if you have tried my above example on your text box, and now want to remove the scroll bar and restore your box back to its original glory, right click your text box again and select "Text Format | Overflowing text | Hidden" to return it back to its default setting.
If you think about it, the fixed page length imposed by WebPlus X2 is an arbitrary length restriction. The restriction is there because WebPlus tries to mimic a desktop publishing program, used by people to print books, magazines and newsletters with fixed paper sizes.
But your web browser is not limited to displaying pages that are at maximum 1,000 pixels high. Nor do you have to worry about things like a standard paper size, since you're designing for the computer monitor and not for the printed page. Since the fixed page height is the only reason why you couldn't increase the height of your text box to accomodate all your content, why not simply increase the page height till all your content can fit into the page?
To change the height of the page, look at the right side of your WebPlus X2 window. Notice that in the lower half of the right panel, there is a button labelled "Home". Right click this button to produce a menu. Click the "Page Properties..." item from this menu.
In the dialog box that appears, click the "Page" tab at the top of the dialog box to select it. Somewhere near the lower middle of box is a line that says "Height". By default, this number is set to "1,000 pix", meaning 1,000 pixels. Change the number in this box to a bigger number. (You can click the existing number and replace it directly by typing into the box; there's no need to use the up and down arrow keys to select a number, otherwise if you're increasing the size by a few hundred pixels, you'll spend all day clicking the arrow.)
It's not possible for me to tell you what number to change it to, since I don't know how long your content is, but you can always type some arbitrary number, larger than the current one, into the box to start with. If you later find that the number is still too small, you can always return to this dialog box to increase the page height. (That is, you can change this number as many times as you want, so don't be afraid to enter some random larger number to start with and adjust the number later.) Once you've entered your number, click the "OK" button.
When you do so, you'll notice that your page is now longer than it was before. WebPlus X2 also resized its depiction of your page so that it can show you the entire page on your monitor. If you find that it now makes your page too small, you can always increase the magnification of the display by clicking the "View | Zoom" menu and selecting some other appropriate magnification. Note that this only changes how you see the page in WebPlus X2. It does not affect your font size in your real web page or anything.
Now that you've made the page longer, you can proceed to resize your text box as well. Just click the text box to select it, and drag the centre bottom square handle (dot) downwards to increase the height. As you do so, you will notice that the text that was previously hidden from view is now displayed.
Once again, when you've finished making your modifications, save your page, publish it and test it in a real browser.
In the next chapter, you will add a navigation menu bar to your website. Your navigation menu can be a vertical one, like the one you see in the left column of thesitewizard.com, or a horizontal one, that is, one that spans the top or bottom of your web page.
Copyright © 2009-2019 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Make / Create Your Own Website: The Beginner's A-Z Guide » List of All Serif WebPlus Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Manage and Style Your Text Content in Serif WebPlus X2
