Even if you're satisfied with the default font, text size and colours ("colors" in American English) used in the NetObjects Fusion SiteStyle that you are currently using, chances are that there will be occasions where you will need to change those in order to highlight certain blocks of text on your website, or just to do something different. This chapter shows you how you can do that.
If you have only arrived at this page from outside thesitewizard.com, please note that this is the 3rd chapter of the NetObjects Fusion 11 Tutorial series. I strongly recommend that, if you're new to creating websites, you should start by reading How to Make / Create Your Own Website: The Beginner's A-Z Guide before proceeding to chapter 1 of the NetObjects Fusion 11 tutorial.
By the end of this chapter, you will be able to change the font, text size and colours of the text (both foreground and background colours) contained in any text block on your web page. You will also learn how to do this for the text displayed on your banner (site logo) and the navigation menu buttons.
If you want to put certain words (or even complete sentences or paragraphs) in bold or italics, or you want to underline them, simply select the text first. To select the text, doubleclick the block containing the words you want to modify. Once you see your blinking text cursor in the block, just drag your mouse over the relevant words so that they are highlighted.
(For those who have forgotten what "dragging a mouse" means, it means to click your mouse when the pointer is at the beginning of the word you want highlighted, and then continuing to hold that mouse button down while moving the mouse pointer.)
Now look at the toolbar somewhere near the top of the NetObjects Fusion window. If you want the words in bold, click the button (or icon) that says "". If you want the words in italics, click the button that says "". To underline the words, click the "" button.
To change the colour of the text contained in a text block, select the text as before. (See the above section if you've forgotten how to select text.)
On the same toolbar as the bold, italics and underline buttons that you used in the section above, you should be able to spot two buttons side-by-side with the text "ab" and "A" (see picture below).
The "ab" button allows you to set the text background colour while the underlined "A" button lets you set the text foreground colour. Clicking either of these buttons will pop up a little colour selector window from which you can click the colour you want.
To increase or decrease the size of the text in a text block, first select the text. (See the section above if you don't know how to select text.)
Look at the left side of the toolbar that you used above to set the bold, italics, and text colours. You should be able to see a drop down field that says something like "13px". See the picture below if you're not sure what I mean. The exact number you see in the box may be different depending on which SiteStyle you chose in chapter 1, but it should probably be some number followed by "px" (the unit of measure — "px" stands for pixels). Click the down arrow for that box to reveal a list of sizes that you can use. Alternatively, you can also replace the number in that box with a number of your choosing, then hit the ENTER key.
(Note: you may also not see a "px" but see some other unit of measure, like "pt" or "%" or "em". The default number displayed and the unit of measure used probably depends on the SiteStyle you are currently using.)
To change the font for the text that you have selected, click the arrow next to the drop down box to the left of the text size field you used above (see picture below). The box may currently be empty or it may contain the name of the current font being used on the text you selected. (It doesn't matter. You're about to change it anyway.)
A list of fonts will be displayed. Click the font you want to use.
Important: before you rush to change the font to some snazzy new font you've installed on your computer, please read Which Font Should I Use for My Web Page? Tips on Choosing Fonts for Your Website. Otherwise you will find that your website only appears in your special font when you view it from your own computer. Everyone else who visits your website will see it in some ugly default font.
As you may have noticed, you cannot change the font used for the text in the banner (your site logo) and the buttons of your navigation menu the same way. (At present, you only have one button in your navigation menu, with the text "Home" on it.)
To change these, click the "Style" button in the big toolbar near the top of NetObjects Fusion 11.
To change the font used in the banner, click the words "Banner text" in the "Banner" section. The rightmost column, labelled "Default Properties" should change. Near the top is a field called "Face" with a drop down box containing a list of fonts that you can use for your banner. Click the down arrow for the box and select the font you want to use.
To change the font used for the navigation menu button, click the appropriate button in the "Navigation" section. In the terminology used by NetObjects Fusion 11, "Regular" refers to the default appearance of the button when a visitor first sees your web page. "Regular Rollover" is the appearance of the button when the mouse is over the button. "Higlighted" is the appearance of the button when your visitor has visited the page before, and "Highlighted Rollover" is how the button appears when the mouse hovers over a "Highlighted" button. The "Primary" row refers to the appearance of the main menu buttons (the ones you see on your web page), while "Secondary" refers to the appearance of the buttons in submenus. You currently don't have any submenus, so you can ignore the "Secondary" row.
Once you click the button you want to configure, the rightmost column will change to show you the "Button Properties" for that button, where you can change the font as you did for the Banner text. That is, simply click the drop down arrow for the "Face" field and select the font you want to use.
When you've finished making your changes, publish your web page and test it in a real web browser as before.
In the next chapter, you will learn how to create additional pages for your website, including a Site Map page and, optionally, an About Us page. You will also learn how to link to those pages, and to other sites on the Internet.
Copyright © 2011-2014 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 Create / Make Your Own Website: The Beginner's A-Z Guide » List of All NetObjects Fusion 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 Change the Font, Text Size, and Colours of Your Web Page with NetObjects Fusion 11
