Graphics & design software

Take Control of iWeb

Editor’s Note: The following article is an excerpt from the just-published Take Control of iWeb: iLife ’08 Edition, a $10 electronic book available for download from TidBits Publishing. The 133-page ebook helps readers create professional-looking Web sites with iWeb, using all of iWeb’s page types and including special elements such as iPhoto albums, YouTube videos, Google maps, Google AdSense ads, and forms that feed into Google Docs.

Even if you include fancy graphics or podcasts on your Web site, the text is the heart of your site and is worthy of your attention. In this excerpt from Take Control of iWeb: iLife ’08 Edition, I cover a grab bag of techniques that all relate to working with text: improving its look, avoiding issues with high-ASCII characters, and creating hyperlinks.

Make text sparkle

iWeb’s professionally developed templates are nice, but you may want to customize the look of your text, perhaps in order to make your page stand out more. Although I don’t want to overdo it, I’d like to add pizzazz to my example pages by modifying text colors and styles, and applying effects such as opacity and rotation.

Fonts

If you have a special headline that needs to stand out, consider using a different font. Elsewhere in this ebook, I warn about using 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 “About this site” on the site I built in conjunction with this book to make it look friendlier and stand out a bit. I selected the text by double-clicking it, and then clicked the Fonts button on the toolbar. Playing with the Font panel for a while, I found a font (Bernard MT Condensed) that gave me the look I wanted.

Size

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.

Color

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 changing some titles and headlines to the same burnt sienna color found elsewhere in the theme.

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

Styles

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 outline. 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 on the toolbar. The buttons at the top of the Font panel are powerful tools. With them, you can double underline, strikethrough, or double strikethrough 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.

The Text Inspector provides another location to change the color of text in addition to its alignment and spacing controls. Typographers reading my book 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.

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.

Alignment & spacing

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.

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 left aligned, center aligned, or right aligned. Text can also be justified, which means that it is neatly aligned with both the left and right borders. I like the smooth, professional look of justified text, since it aligns both sides of the paragraph and leaves no ragged edges.

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

  • Character spacing: Known in the typographical world as kerning, character spacing defines how far apart individual characters are. Drag the Character slider in the Text Inspector to adjust this distance. I tend to keep this setting at the default 0 percent, although I occasionally increase the percentage to force text to fill a line.
  • Line spacing: This type of formatting is also called leading (pronounced “ledding”) after the pieces of lead that traditional typesetters place between lines of physical type to adjust the space between lines. To adjust your line spacing, click in a paragraph that you want to adjust; then drag the Line slider in the Text Inspector (the space between lines increases as you slide it right).
  • Space before/after paragraph: Use the Before Paragraph Spacing and After Paragraph Spacing sliders to define how much space will appear before and after paragraphs. This tool is useful for long Web pages containing a lot of text arranged in paragraphs.
  • Margin: Finally, you can inset the margin using the Inset Margin slider. Inset refers to the number of points of space between the edges of the text box and the characters.

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.

Background fill

Background fill is color or an image that fills the space behind text. Background fills, when done right, make the text stand out and 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. Let’s look at the types of fills provided by the Fill pop-up menu in the Graphic Inspector:

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

Color fill: As you might guess, this fills the background of a text object with color. To change the color, click the color well to bring up the Colors panel. If you pick a solid color, the well takes on a solid color. If you change the opacity of your color to make it slightly transparent (look for an Opacity slider in the Colors panel), the color well has two tones, like the image to the right.

Gradient fill: A gradient fill creates a smooth transition between two colors and places it behind your text. Choosing Gradient Fill from the Fill pop-up menu, adds two new color wells to the Fill area of the Graphic Inspector, one for the color at the beginning of the color gradient and one for the color at the end.

Applying a gradient fill to the background of a text box.

In the figure to the right, both colors have some transparency (hence the semaphore-looking rectangles). You can switch which color will be at the top or left of the gradient by clicking the double-ended arrow next to the color wells. Or, you can fiddle with the Angle dial to determine the direction of the gradient, or click one of the two small arrows to quickly set a vertical or horizontal gradient.

The multifaceted Fill area of the Graphic Inspector changes again when you choose an Image Fill.

Image fill: This fill puts a picture behind the text. I suggest using it sparingly. An image fill works well in a button where a picture serves as a background and large, bold text labels the button. After you choose Image Fill from the pop-up menu, the Fill area of the Graphic Inspector changes slightly: The second pop-up menu lets you set how the image behaves as a background fill, and the Choose button lets you select the image.

Using a brown tint on a black and white photograph makes a fine faux sepia-tint picture.

Tinted image fill: Similar to an image fill, a tinted image fill adds a color well so you can choose the tint color and opacity. For example, you can use a black-and-white photograph and a brown tint to create a mock sepia-tint picture.

Text rotation

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:

  1. Select the text object by clicking it. Handles appear around the edge.
  2. Hold down the Command key and move your pointer over a handle. The pointer takes on a double-ended arrow badge to indicate that you can rotate the text.
  3. Continue holding down Command as you drag the handle to rotate the text. A help tip will float nearby, displaying the angle of the text box in degrees.

You can apply other text effects to rotated text for extra impact. The screenshots below show how I used rotated text and a shadow to label my video podcast page.

Note: When is text not text? When it’s a graphic! Whenever you use rotation, shadowing, layering, or any font that isn’t a standard Web font, your text object is converted to a portable network graphics (.png) file. You can still change it in iWeb, but when the page is published to the Web, the text becomes an image.

Layering

You have another layout tool at your fingertips with iWeb: layering. The image below shows a side-by-side example of layering in action.

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.

Text and graphics can be moved in virtual 3-D 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.

The screenshot below shows an interesting effect that I created for my Podcast page. To make it, I started with the large Podcast 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 and the transparency slightly less, and then I layered the copy in front of the previous text. I repeated this four times.

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

Note: Most current Apple software is Unicode-savvy, meaning that it accepts text in any of the dozens of languages supported by Mac OS X. iWeb is a perfect example of this. It encodes Web pages in such a way that most modern browsers display non-English and non-Latin text properly.

Keyboard input of right-to-left text in languages like Arabic or Hebrew is difficult for practical use in iWeb, although you may get satisfactory results if you copy text from another application and paste it into iWeb.

[Steve Sande is president of Raven Solutions, LLC and operates the Podbus.com podcast hosting service. He also teaches the arcane art of writing software requirements at The Center for Requirements Excellence. His latest book is Take Control of iWeb: iLife ‘08 Edition (TidBits Publishing Inc., 2008).]

Subscribe to the Apple @ Work Newsletter

Comments