Page Design Basics


If you aren't a tailor, it's better to buy off the rack than to try to make your own suit. And if you aren't a Web designer, it's a good idea to stick with the built-in page styles that each iWeb template provides.

But the temptation to tinker may beckon. Maybe a certain page style requires a few more graphics to meet your needs, and maybe one of those graphics could use some work. Maybe you'd like to use a different type font, or adjust the line spacing of some text. Maybe a page needs another block of text, or a different background color.

You can perform many design tweaks directly on the webpage canvas. Click and drag blocks of text or graphics to move them around. Resize an item by selecting it and then dragging one of its selection handles.

For other design tasks, you'll turn to iWeb's Inspector. Its numerous controls allow you specify paragraph formatting, add and remove page backgrounds, create special graphics effects, and more.

For still other tasks, you'll use menu commands and the tools at the bottom of the iWeb window. Add additional text boxes to a page. Add shapes, such as lines and boxes. Control how objects overlap, specify colors and fonts, modify images, and more.

Here's a tour of your design studio.

Moving an Object

To move an object (for example, a text box or a graphic), click and drag it to the desired location.

Notes and Tips

Go straight. If you press the Shift key while dragging, iWeb constrains the item's movement to horizontal, vertical, or a 45-degree angle.

Keyboard control. To nudge an item in one-pixel increments, select the item and then press one of the arrow keys on your keyboard. To nudge in 10-pixel increments, press Shift along with an arrow key.

Have another. To duplicate an item, press the Option key while dragging the item.

Resizing an Object

To resize an object, select it and drag one of its selection handles. If you resize a text box, its text reflows to fit the new size.

Tip

To avoid changing the proportions of a text box or shape when resizing it, press the Shift key while dragging.


Anatomy of a Page

Each page style in an iWeb template has four regions. Each region serves its own purpose, and by changing the dimensions of the regions, you can change the appearance and dimensions of a Web page.

To see each of the four regions, choose Show Layout from the View menu (Shift- -L). iWeb displays faint gray lines between each region.

Some page styles use some regions, but not others. For example, the page styles in the Travel template lack header regions. You can add those regions, however, by using the Page Inspector as described at right.

Introducing the Inspector

The Inspector is the gateway to many design and formatting tasks in iWeb. This small floating window is actually seven control panels in one; you display the inspector you need by clicking a button at the top of the Inspector window.

To display the Inspector, click the button near the lower-right corner of the iWeb window, or choose Show Inspector from the View menu (Option- -I).

Changing Pages: The Page Inspector

One design change you may want to make is to change the dimensions of a page: to make it longer, for example, so it can hold more content.

iWeb's page styles tend to have short pages that your site's visitors can scroll through with just a click or two. That's convenient, but maybe you have more content than will fit within a page's confines. As long as your design is uncluttered (and your content interesting), there's nothing wrong with having a longer Web page.

To change a page's dimensions, use the Page Inspector. Display the Inspector, then click to display the Page Inspector.

The Page Size values determine the dimensions of a page and each of its regions.



The Macintosh iLife '06
The Macintosh iLife 06
ISBN: 0321426541
EAN: 2147483647
Year: 2004
Pages: 229
Authors: Jim Heid

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net