Create Your First Site – Take Control of iWeb: iLife ’06 Edition

Chapter . Create Your First Site

In this section, I walk you through the basic steps for doing Web publishing in iWeb. You can follow along as I create a real site, which I’ll be posting on the Web so you can see it in action. You may also wish to follow along, creating a similar sample site, so that you can get some practice. Alternately, you can browse through the headings in this section to quickly find information about a particular topic.

Start a New Site

We’ll get started now by launching iWeb. Or, if you are already in the program, choose File > New Site.

The resulting dialog asks you to make a decision—which template to use (Figure 5).

iWeb 1.1 has 18 different templates for you to choose from. Each template has six available page types (Welcome, About Me, Photos, Movie, Blog, and Podcast).

Figure 5. 

Generally speaking, a template is a pre-canned document that you use as a starting point. It typically contains standardized text and design elements, which you then customize or expand. In iWeb, the templates help you maintain a consistent look, and consistent navigation links, throughout a site. They also help you create a great looking site in short order.

Choose a Template

Apple wants to make your Web site look like it was designed by a professional without forcing you to make the tough decisions faced by the pros. A Web designer follows certain guidelines to produce a unique look for a Web site, and you can follow similar ones when you choose a template, either to use in its default state, or as a starting point for further customization:

  • Look for templates that use fonts that add to the feel of the site. For example, Portagol, a bold, stencil-like font used in the Freestyle template, would look ridiculous and out of place on a Web site celebrating a wedding, while an elegant font like Cochin would be equally absurd on a skateboarding site (Figure 6).

    Unless you have an extremely warped sense of humor, match the look of your site with the feeling you want to convey.

    Stencil fonts, spray paint backgrounds, and bright colors don’t put across the romance of a society wedding (left), and a formal design and flowery fonts are totally out of place on a skateboarding Web site (right).

    Figure 6. 

  • Pick colors that match the mood you’re trying to achieve. Bright colors make people feel happy, while dark colors such as brown or black can be considered dark and foreboding. For example, Baby is a happy template with plenty of light blue and white, while the Black template and its default dark font colors can be used to great effect if you want a depressing or scary site.

  • Make your Web pages easy to read by using text colors and backgrounds that don’t clash, but have enough contrast to make the text stand out. Think of light green on a pink background as an example of clashing colors, while carnation on the same pink background is difficult to read because the colors are too much alike (Figure 7). If you’re not sure about how your text colors and backgrounds will work, use the default template colors.

    Don’t nauseate your readers by using clashing colors (left) or make them feel as if they’re having eye problems by making the text color too close to the background color.

    Figure 7. 

  • Don’t overuse fonts. With an almost infinite choice of typefaces, many beginning designers are tempted to use as many as they can on a single page. It’s much better to use only one or two typefaces per page and to vary the style (bold, italic, underlined) and size sparingly (Figure 8).

    Using every font you can find might have been fine on a rock concert poster in the 1960s, but it looks annoying and confusing on a Web page.

    Figure 8. 

  • Web page designs, like fashions, change over time. In the early days of Web design, background music and scrolling text were considered high fashion, to the enjoyment of some and the horror of discerning critics. Now they’re the nightmare of Web design, somewhat akin to lime green leisure suits. Keep an eye on what the most popular Web sites are doing and then use your own judgment on whether they’re forerunners of Web designs of the future or quickly dated designs we’ll all be snickering about in a few years.


A fun way to learn the rules of good Web design is to study sites that are very poorly designed. I like to visit Vincent Flanders’s Web Pages That Suck (, a tongue-in-cheek site that critiques Web pages that have been nominated by readers for their unbelievable badness.

Other design resources include:

Learn More & Do More, near the end of this ebook, notes additional useful resources for learning Web design.

What should the current templates be used for? Here are some ideas that come to mind when I look at them, organized first by templates available in iWeb 1.0 and then by newer templates added in iWeb 1.1:

  • White: White is a modern-looking template that is easy to read and customize. White works perfectly for informational or less flashy personal Web sites. For my site, I chose the White template.

  • Black: Think of Black as the photo negative of White. Black can be edgy and trendy, yet it’s still as easy to read as White. Black works well for highlighting a new product or service by focusing attention on photo illustrations.

  • Watercolor: Watercolor’s bright pastel colors give it a light-hearted feeling, and it has plenty of spaces for fun photos of friends and family. The choice of typefaces gives Watercolor an artistic feel that would be useful for an online art gallery.

  • Travel: Travel has the feel of a scrapbook from a trip. The photo placeholders are slightly angled to give the illusion that they were pasted onto scrapbook pages. I think I know what I’m going to use to document my vacations from now on! (But check out Road Trip, too, before you decide.)

  • Baby: If you have a new baby and would rather sleep than spend hours putting together a Web site, choose Baby. Note to Apple: how about a pink version of Baby?

  • Kids Blue and Kids Pink: Once the baby has grown up a bit, use these bright, fun templates to keep everyone up to date on what your youngster is up to.

  • Modern: Use Modern to announce your latest show at the local gallery, describe a cutting-edge product, or tell your friends about your new loft. If you like clean-cut and streamlined, Modern could be a good match.

  • Night Life: Night Life is all about going to clubs, fun times with friends, and parties. It’s the personal society page for the under-30 crowd or for anyone who wants an edgy, dynamic look.

  • Freestyle: Freestyle could be nicknamed Extreme, since it’s full of the adrenaline rush feeling you get from snowboarding, BASE jumping, whitewater rafting, rock climbing and other non-sedentary sports. I love the energy of this theme—it’s almost enough to make me bolt from my Apple Wireless Keyboard and go to the nearest skateboard park.

  • Road Trip: If Jack Kerouac were writing On the Road today, he’d probably post a travel blog using the Road Trip theme. The warm leather and wood tones of the Welcome page make me think of sitting in the back of a vintage car cruising down Route 66, jotting down free verse in my journal...

  • Formal: Use the classy and clean Formal template to document a night at the prom, graduation ceremony, or wedding anniversary. Think of Formal as the Web equivalent of those nice engraved invitations you send for formal occasions.

The iWeb 1.1 update added six new templates:

  • Gazette: Do you need a template with the look of an antique journal? The muted earth tones and stylish borders of Gazette have a classic appearance.

  • Highlighter: Bright and colorful, the Highlighter template is just plain fun, although a bit bright. Whimsical frames around photos, hand-drawn highlights, and fluorescent stickies for photo annotation make it a great template for designers who “think different.”

  • Notebook: Primary school-aged children are going to love Notebook. The background looks like lined tablet writing paper and the picture borders appear as if they’ve been sketched by hand.

  • Doodle: Want a Web site that looks like it was created with a marker pen? Try Doodle. I don’t like it, but I’m sure it has appeal to some. Many of the page types seem too cluttered.

  • Cloud 9: Another whimsical design, Cloud 9 has bold pastel colors that teenage girls are going to love. It just might work for Web sites about vintage VW buses or pop groups from the Sixties.

  • Elegant: This well-named template has subtle colors; a page border; and a modern, professional look, Elegant wouldn’t be out of place in a Web site for a legal firm or country club.

Later, I describe how you can customize these templates with fonts, colors, masks, shapes, and other tools. If a template doesn’t seem perfect to you, you may be able to easily tweak it to your liking.

Note: Finding More Templates

The number of templates included with iMovie, Keynote, and Pages has grown steadily over the years, and these templates have become more impressive as Apple and third-party designers have stretched their abilities, so I’m certain that great things are in store for iWeb. Meanwhile, if you want to use a different template with iWeb, try these sites:

Choose a Page Type

Once you choose a site template, stay right in the dialog, because you still need to pick a page type. iWeb has seven page types:

  • Welcome: Most Web sites have more than one page. The Welcome page is a virtual welcome mat for your site. Use it to tell people what your Web site is about and link them to the other pages. For my example site in this ebook, I start with a Welcome page (keep reading just ahead) and then show you the unique features of each page type.

  • About Me: For personal Web sites, About Me is the page type you can use to introduce yourself to the world. The default About Me page has space for your personal attributes, links to photo albums you have published, a list of your favorite songs and Web sites, plus a spot for a big picture of your smiling face. (See Make Your About Me Page.)

  • Photos: iWeb’s integration with iPhoto stands out on the Photo page. You can use it to display your favorite photos or create a portal to a Web-based slideshow. (See Create an Online Gallery.)

  • Movie: Think of the Movie page type as an online theater for your QuickTime movies. Create your movies in iMovie HD and publish them online with iWeb. (See Create an Online Movie Theater.)

  • Blog: Your online journal, also known as a weblog or blog, exists on the Blog page. Your latest entries appear on this page and readers use navigation links to read previous entries. iWeb generates an RSS feed so readers can subscribe to your blog and have the most recent news delivered to them automatically. (See Publish a Blog.)

  • Podcast: Podcasts and vodcasts are the audio and video equivalents of blogs. The Podcast page lists the latest episodes of your podcast and creates an RSS feed that works with the iTunes Music Store podcast directory. (See Publish a Podcast.)

  • Blank: If none of the other page types are what you need, the Blank page (added in iWeb 1.1) provides a blank page with the navigation links needed to move easily to the other pages in your site. I suggest using the other page types as much as possible until you have experience with customizing iWeb pages.

You can choose to add multiple pages of any page type to your Web site. It’s not unusual to add new pages, delete pages that are no longer relevant, or create new Web sites.

After highlighting your choice of template and initial page type (if you are following this section tutorial style, select White for the template and Welcome for the page), click the Choose button to create the Web site and first page.

iWeb responds by generating the skeleton of your site and opening it in the main iWeb window). As you can see in Figure 9, I chose the White site and the Welcome page.

iWeb creates a new site for me to work in, and shows my first page in the Canvas, along with the Site Organizer at the left and the toolbar below. My next step will be to change the name from Site (as shown in the Site Organizer) to a more descriptive title.

Figure 9. 

The window has three main areas:

  • Site Organizer: Situated at the left, the Site Organizer helps you switch to different pages in your site and name your pages. In Figure 9 (above), I have two sites listed, one called izyz and the other named Site. (Don’t worry much about the izyz site, it’s another site I’m working on and of little relevance to this example.)

    Notice the different colors in the Site Organizer? A blue icon (like the izyz icon) indicates that the site has been published to .Mac, but a red icon (like the Site icon) means that the site is unpublished. Making a change to a page, even adding or deleting a single character, turns the icon red. The next time you publish the site to .Mac, the icon turns blue again. If you Publish to Folder, the icon remains red as this function only works when you are publishing to .Mac.

  • Canvas: Taking up most of the window, the Canvas is where you create and arrange your content.

  • Toolbar: The toolbar sits at the bottom of the window. Click buttons on the toolbar for easy access to some iWeb commands, and see Table 1 for a handy reference to the menu commands and keyboard shortcuts that map to the toolbar buttons.

Name Your Site

Notice, by looking in the Site Organizer, that iWeb has named your site, Site. If you publish your site on .Mac, this name will appear in the URL of the published Web site like this:

So, if your .Mac username is SteveS and your site is named Site, the URL will be:

Apple altered this naming convention slightly with the release of iWeb 1.0.1. Pointing your browser at:

has the same effect as typing the longer URL.

Note: What’s a URL?

A URL (Uniform Resource Location) is a sequence of characters that gives the exact scheme and path to a Web page or other Internet resource. (The scheme relates to the type of Internet service being used, such as Web, FTP, or email.) URL can be pronounced as “U–R–L” or (less commonly) “Earl.”

In the case of a Web URL, the URL appears as a sequence of characters in the address bar at the top of the browser, and the scheme is http.

I recommend that you change the name to something short and descriptive, so that you end up with a better URL. Here are some important naming tips:

  • Typability: Keep the name fairly short so visitors don’t have to type in a long address. For example, instead of Steve and Barb Sande’s July, 2006 Vacation to Seattle for the SABR Convention and an Alaska Cruise, I’d use Vacation 07-2006 or, even better, July-06-Trip. Descriptive information that doesn’t fit in the title can go on the site’s pages.

  • Spaces: Avoid using spaces in your Web site name. Not only can people inadvertently add a second space between words when they type a site’s URL, but a space is also replaced with the characters %20 when the URL appears in a Web browser. For example, if I had named my example Web site House of Steve, the URL would be of Steve/, and it would appear in the address field of a Web browser as the utterly ugly

    If you want to use multiple words in a Web site name, use dashes to separate the words.

  • Unusual characters: To avoid a name with strange numbers in it, don’t use any of the following characters:






    pound/number sign




    dollar sign


    question mark




    equal sign


    \slash, forward or backward

    [ ]

    bracket, left or right


    exclamation point





    hash mark


    Unless you are using an international version of iWeb, you should also avoid non-Roman characters (Cyrillic, Japanese, Chinese, and so on) in your names, since they will be converted to numbers in your Web address when you publish the site.

  • Limitations: Another good reason to keep your name short is that some older servers, particularly those using outdated versions of the Windows operating system, may not be able to handle a long directory name. For instance, the maximum path length for Windows 95 and later versions of Windows is 76 characters, so if the path to your Web server directory is convoluted, you are limited to a short directory name.

Here’s how to change the name from Site to something else:

  1. In the Site Organizer, double-click the default site name Site to open the edit field for the name.

  2. Enter the new name and press Return. For example, I named my example Web site TCoiWeb, short for Take Control of iWeb.

Name Your New Page

Now, turn your attention to the name of the first page in your site. This is important in iWeb, since the name of your pages will be used in the navigation links at the top of each page, and appear in the title bar of visitors’ Web browsers.

For my example site, I want to call the first page Home. To change the page name:

  1. In the Site Organizer, double-click the default page, named Welcome, to open its edit field.

  2. Decide what you want to name the page. Since the page name will be used in the navigation links at the top of the page, it’s smart to keep the name short. I recommend ten characters or less, including spaces. You can make the name mixed-case (Home), lowercase (home), or uppercase (HOME), but you should be consistent with your casing in all your page names. Casing does make a difference when a user types your URL, so you may wish to play it safe by staying with all lowercase letters.

  3. Enter the new page name and press Return. I’m typing Home for the name in Figure 10.

    In this screenshot, I am changing the name of the Welcome page to Home. As soon I press the Return key, the navigation link at the top of the page in the Canvas changes from Welcome to Home.

    Figure 10. 

Edit the Headline

In Figure 9 (earlier), the headline is the gray text near the top that says “Welcome to My Site.” You can change this text placeholder to whatever you want to say to your guests.


Do you need help figuring out how to use an item on an iWeb template page? Put your pointer over any item and a small yellow help tip (called a Help tag in iWeb) appears with a description of how to use that page design element.

To edit the headline:

  1. Double-click the words Welcome to My Site to highlight them for editing.

  2. Type the new headline. For this example, I’ve changed the name to Steve’s Take Control of iWeb Site.

  3. Click anywhere else on the page to deselect the title.

Change the Picture

As much as I’d like to look like one of the 20-somethings in the photo placeholder on my Welcome page, I haven’t been that skinny or had that much hair for a while. I’ll replace the happy beach bunnies with a picture that’s more applicable to an ebook about iWeb, just as you’ll likely want to replace the photo with a picture of your own choosing.

You can drag a photo in from the Desktop, but this is where iWeb’s integration with other applications in iLife ’06 works nicely. To find a photo in iPhoto and insert it, follow these steps:

  1. Click the Media button on the toolbar.

    The Media Browser appears (Figure 11).

    The Media Browser—from this single dialog you can choose music and playlists from the Audio tab, pictures from the Photos tab, and Movies you’ve created from the Movies tab.

    The Media Browser is now a common sight in many iLife and iWork applications.

    Figure 11. 

    No photos?

    If you’ve just installed iLife for the first time and you don’t have any pictures in iPhoto, the Media Browser will be empty.

  2. Click the Photos button.

    The entire Source list from your copy of iPhoto appears, with the Library item selected so that its photos show below the list. You can click any item in the Source list to view its photos.

  3. Browse through the pictures until you find the one you’d like to use. For the example Web site, I found a photo of an Apple Wireless Keyboard that looked perfect. Don’t be concerned if your photo is in a portrait (vertical) orientation but the photo placeholder is landscape (horizontal). iWeb will automatically mask the image. By mask, I mean that iWeb will hide part of the picture so it fits into the placeholder. (But, if you worry that your photo will take a long time to load, see Accelerate Picture Downloads.)

  4. Drag the photo from the Media Browser to the iWeb page and drop it on the placeholder. Your picture is pasted into the placeholder.

  5. If the photo appears upside down or reversed, you can correct that problem by clicking the photo to select it, then choosing Arrange > Flip Vertically or Arrange > Flip Horizontally. You can also rotate any photo by holding down the Command key while dragging one of the eight handles that appear around the edges of the photo.

  6. If the picture doesn’t look right where it has been placed, you can drag it to a different location. On occasion, thin, blue alignment guides appear when you drag a picture. You can use these lines as a visual aid to help you center and align page elements for a more professional look (iWeb’s preferences allow you to set whether alignment guides show at an object’s center or edges).

My Web page is starting to look much better (Figure 12, next page)

Changing the headline text and adding a new picture gives this page an entirely different look.

Figure 12. 

Notice the reflection of the picture that I added? That’s a feature of iWeb that adds a professional look to your pages without adding a lot of work. The reflection gradually fades into the background color of your page, acting as a smooth transition between the photo and the text. Learn more about reflections, and about other aspects of applying effects to photos in The Fine Points of Formatting Photos.

Note: Alternate Text for Web Graphics

iWeb cannot currently add an alt attribute to an image. An alt attribute is typically coded into the HTML to tell Web browsers what text to display in place of an image while the image is loading or if the image does not load.

An alt attribute is a necessity for assistive technology like text readers for sight-impaired visitors to your site and useful for text-only mobile browsers. It is considered good Web etiquette to include an alt attribute, and I hope that a future version of iWeb will include this capability.

Edit the Body Text

The final step in customizing the default Welcome page is changing the body text. Just as you customized the headline and photo placeholders, you customize the body text placeholder with your prose.

To change the default body text:

  1. Select the heading by double-clicking it.

  2. Type a new heading. (I changed the dummy text to “Howdy!”).

  3. To edit the longer lump of text, click once on it.

  4. Start typing your body text. It will replace the dummy text.

You may wish to change the font, size, or style of the text that you entered, and you may wish to make a link. I cover those topics in Work with Text, later. For now, let’s take a look at the updated home page (Figure 13) before we move on to adding a few special elements.

The page is ready to publish. Its icon in the Site Organizer is red because the page hasn’t been published.

Figure 13. 

Note: What Is Lorem Ipsum?

New pages in iWeb have text placeholders filled with dummy text, usually beginning with “Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.”

Printers and typesetters have used this as dummy text since the 1500s. For a long time, page designers have understood that someone looking at a layout will be distracted by the readable content on the page. Instead of filling the page with something readable, they’ve used “lorem ipsum” instead. Lorem Ipsum looks like real text, rather than text that has been typed in, copied, and then pasted a number of times.

The text comes from sections 1.10.32 and 1.10.33 of de Finibus Bonorum et Malorum (The Extremes of Good and Evil) written in 45 BC by Marcus Tullius Cicero. You can read the Wikipedia translation at

Add Special Elements

iWeb includes three special elements that add functionality and fun to your Web pages.

The first element, the Made on a Mac button, helps you show your pride owning a Mac and links readers to the .Mac Web site, where they can get more info about .Mac, the Macintosh, and other Apple products and services. By default, all iWeb pages come equipped with a Made on a Mac button. You can delete it from a page by clicking it to select it and pressing Delete. To add the button to a page, choose Insert > Button > Made on a Mac.

Do you want to know how many people are visiting your Web pages? The Counter element adds a small odometer-like counter that increments every time someone visits the Web page. The counter works only if you publish your Web site on .Mac. If you want to include a Counter on your Web page, choose Insert > Button > Counter.

Are you a .Mac subscriber? If you are, you have a .Mac email address, and adding an Email Me button to your Web page automatically creates a link that people can use to send you email. I don’t recommend using this, since spammers can gather your email address from your Web page, but if you’re only letting friends and relatives know about your Web site it probably won’t be a problem. Add an Email Me button by choosing Insert > Button > Email Me.

Change the Page Size & Background Color

Depending on the look of your page, you might want to change its size and background color. For example, if a Web browser is open to full-screen size, a white background on a white page can look strange, as the text is overwhelmed by the wide-open spaces.

Here’s how to solve this problem:

  1. Click the Inspector button, and then click the Page Inspector button ().

  2. Adjust the page size.

  3. Click the Page Background and Browser Background color wells to adjust those colors. Use the Browser Background color to create a frame for your page content.

Note that iWeb doesn’t apply these changes globally, so you have to make them for every page. That can create a lot of work if you want to have a consistent look on each page and don’t want to use the default browser background color.

Make Your About Me Page

Now that you know how to choose a template, and you know the basics of how to personalize elements of a page, it’s time to create the About Me page. Let’s get started:

  1. Add the About Me page: Choose File > New Page (Command-N) or click the button below the Site Organizer. Select the About Me page type for the template you’re using, then click Choose.

    The About Me page, with its placeholders, appears (Figure 14, next page).

    Everything I’ve ever wanted to know about Kevin Smith, and more! It’s time for me to fill in the details of my life. Sorry, Kevin.

    Figure 14. 

  2. Customize the headline, photo, and body text: You already know how to change these elements (see Edit the Headline, Change the Picture, and Edit the Body Text if not), so I won’t repeat myself.

  3. Edit the list of personal data and favorites:

    1. To change an item’s label, highlight the label by clicking it once, and then type your new text. (I wanted to replace Favorite Quote with Favorite Gizmo, so I highlighted Favorite Quote, and then typed Favorite Gizmo.)

    2. To edit an item’s text, select the text and type over it (Kevin Smith likes orange, but my favorite color is green. I double-clicked Orange and typed Green).

    3. To remove an item, select it and press Delete.


      In some iWeb templates, you can quickly select an item by triple-clicking it.

    4. To add a new item, select an existing item, copy it by choosing Edit > Copy (Command-C), place your pointer at the location where you want the new item, and then paste the item by choosing Edit > Paste (Command-V). Then, customize the new item. I added my favorite beer to the list.

    5. To turn an item into a link, see Create Web Hyperlinks.

    6. For info about including a photo, see Change the Picture.

  4. Customize the “My photo albums” list: You won’t find this list in some templates, but most templates have it. The list is meant to link to your iWeb Photo pages (see Create an Online Gallery). To customize the list:

    1. Click the Media button to open the Media Browser. Then, drag a picture from the Media Browser and drop it on the small placeholder picture in the template. This creates a “thumbnail” image that gives readers a taste of what to expect in the album.

    2. Select the image you just added, and open the Link Inspector. Check the “Enable Link” box, choose One of My Pages from the Link To menu, and pick the correct page from the Page pop-up menu.

    3. Click the placeholder album title to select it, and then type the new title. Link the title to the album page as well—select the text and then use Link Inspector as you did for the photo placeholder.

    4. Each entry usually has a subtitle containing the year or date of the event chronicled in your album. You can change this information by clicking the subtitle to select it, then typing the new year or date.

  5. Customize the “My favorite songs” list: You can simply type the names of your favorite songs, or you can get fancy by creating links to songs in the iTunes Music Store so that visitors to your site can click over to the store and listen to a short sample of each song, and then purchase the music if they like it. It’s easy to do:

    1. Delete the name of the first placeholder song. (In some templates, these songs are numbered—if you delete carefully, the number 1 will remain. If not, press Return to start a new line in the list).

    2. In the iTunes Music Store, search for a song you’d like to list as a favorite.

    3. Drag the song from the iTunes Music Store to the right spot in the list. After you drop it, iWeb will add a link to the song’s listing in the iTunes Music Store (Figure 15). You may have to change the link’s font size (see Make Text Sparkle) or move the link slightly to make it look good.

      My favorite songs are all by Steely Dan. Click one of those song titles and you can hear or purchase it in the iTunes Music Store.

      Figure 15. 

    4. Add more songs to the list—to get a new list entry, place your pointer at the end of an existing entry and press Return.


Want an even easier way to add your favorite songs to your Web page? Simply drop an iTunes playlist on your Web page where you want the list of favorites. Although iWeb won’t number the songs like you see in Figure 15, it will add links and formatting.