If you have a special headline that needs to stand out, consider using a different font. Yes, I know I told you earlier not to use too many different fonts, and that basic rule still applies. However, judicious use of a special font can definitely change the way your Web page looks. As an example, I decided to change the title text “Howdy!” to make it look friendlier and stand out a bit. I selected the text by double-clicking it, and then clicked the Fonts button in the toolbar. Playing with the Font panel for a while, I found a font (Bertram) that gave me the happy feeling I was looking for.

Size matters when it comes to text on Web pages. Headlines and titles should be larger than body text. To change text size without using the Font panel, select the text and press Command-Minus to make the text smaller or Command-Plus to make the text larger. There’s also a slider in the Font panel you can use to resize text on the fly.

Adding color is an easy and usually unobtrusive way to customize the text on your Web site. I recommend using a consistent color theme throughout your site—choose colors that go well together and that make the text easy to read. On my site, I added a dash of color by making most titles and headlines the same color as the browser background—a blue-gray color.

In some circumstances, you can’t change the color of text. For example, links are underlined and remain their original color. And, the text on blog, podcast summary, or entry pages cannot be changed in iWeb. To change the style or color of this text, you must modify an existing iWeb template. See Learn More & Do More for links to several Web sites that provide information on how you can modify iWeb templates and install third-party templates.

To change the color of text, select it and then bring up the Colors panel by clicking the Colors button in the toolbar. You can choose a color in several different ways, and then adjust the brightness and opacity of the color as well.

You have a number of text styles at your disposal as well. When I refer to styles, I’m talking about the usual things you do with text from the Format menu—bold, italicize, underline, or . iWeb allows you to go beyond those simple styles with additional functions in the Font panel.

To bring up the Font panel, click the Fonts button in the toolbar. The buttons at the top of the Font panel (Figure 19) are powerful tools. With them, you can double underline, strikethrough, or text. These styles can’t be coded for in HTML, so iWeb overlays the text with a transparent graphic to create special underline and strikethrough effects.

Use the toolbar at the top of the Font panel to apply different types of (from left to right) underlines, strikethroughs, colors, backgrounds, and shadows.

Figure 19. 

You can also apply a shadow to selected text by clicking the Shadow button. The three sliders to the right of the shadow button control the opacity, blur, and offset of the shadow, while the dial controls the direction of the shadow. Take a minute to play with these controls in order to gain mastery of them; I suggest working on text that is at least 24 points so that you can see the effects more easily.

The alignment and spacing of text can make a remarkable difference in the way that your Web page looks. You control both types of formatting in the Text Inspector (Figure 20).

The Text Inspector provides another location to change the color of text in addition to its alignment and spacing controls.

Typographers reading this ebook will be pleased to know that iWeb provides tools for leading and kerning. If you’re not a typographer, you may be interested to know that leading is the space between lines of text and kerning is the space between characters.

Figure 20. 

When I talk about alignment, I’m referring to how the text lines up with the borders of the text box that surrounds it. Text can be:

Text can also be justified, which means that it is neatly aligned with both the left and right borders, similar to the way that this paragraph has been formatted. In contrast to the “ragged right” margins in the rest of this ebook (set that way to enhance legibility), this paragraph has a smooth right margin. Notice how some spaces between the words in this paragraph are wider than others—the computer does the spacing automatically in order to make the text justify.

I like the smooth, professional look of justified text, since it aligns both sides of the text and leaves no ragged edges. For an example of the use of justified text in iWeb, see Figure 21.

The example site Home page has justified text. Ragged text is easier to read as it keeps character spacing equal throughout your site, while justified text gives a smoother look to page designs.

Figure 21. 

Spacing of text can make a difference in the look of your pages too:

Background fill is color or an image that fills the space behind text. Background fills, when done right, make the text stand out and work well to draw a reader’s attention to important information. Background fills in iWeb pertain to a specific text object. In other words, you can’t highlight a few words and apply a background fill to them—if you want to do that, you must break those words out into a separate text object.

To apply a background fill, select the text block, click the Inspector button, and click the button () to view the Graphic Inspector (Figure 22).

The Fill pop-up menu is a gateway to all sorts of fun fill effects. The color well, located beneath the menu acts as a button you can click to access the Color panel.

Figure 22. 

Let’s look at the types of fills provided by the Fill pop-up menu in the Graphic Inspector:

Using a brown tint on a black and white photograph makes a fine faux sepia-tint picture. (This is a picture of my late grandfather Peder Sande and me, by the way).

Figure 25. 

Your text needn’t be horizontal. Using Text Rotation, you can place your text at any angle—even upside down! Although I don’t suggest topsy-turvy text for most Web sites, putting your titles or headlines at a slight angle can add drama to an otherwise dull page.

To rotate a block of text:

You can apply other text effects to rotated text for extra impact. Figure 26 shows how I used rotated text and a shadow to label my video podcast page.

In the left image, I’ve dragged a text box with a color fill over a piece of rotated and shadowed text. Using the Forward and Back buttons on the toolbar, I can either move the text box back or move the rotated text forward.

Figure 26. 

You have another layout tool at your fingertips with iWeb: layering. Text and graphics can be moved in virtual 3D with some items being higher or lower with respect to the bottom layer. Think of your Web page as a layer cake. The bottom layer can be a picture, while the top layer can be text or another image. The top layer can be opaque, in which case it blocks part of the view of the bottom layer, or it can be transparent and allow an uninterrupted view of the layer below. Figure 26 shows a side-by-side example of layering in action.

After you select a text or graphics object in iWeb, you can use the Forward or Backward button () on the toolbar to move that object higher or lower in the virtual layer cake.

Figure 27 shows an interesting effect that I created for my Podcast page. To make it, I started with the large Listen in back, which was in its own text object. I made it slightly transparent using the opacity slider on the Colors panel. The next step was to copy and paste the text object, and in the copy I made the font size slightly smaller, made it slightly less transparent, layered it in front of the previous text. I repeated this three times until I was happy with the headline.

Creating this dynamic headline for my Podcast page didn’t take a special graphics tool like Photoshop. I did it with layers in iWeb.

Figure 27.