iWeb Basics

Website: http://etc.usf.edu/te/

iWeb is the web design application introduced by Apple in iLife 06. iWeb
allows you to see exactly what your website will look like as you work on it.
You do not need to know any HMTL or programming to create a website
with photo galleries, blogs, podcasts, and movie pages. iWeb includes sev-
eral professionally-designed templates that make it easy to get started with
web design. iWeb also works well with the other programs in the iLife
suite. You can drag and drop content from iTunes, iMovie, and iPhoto to
add it to your website.

Site Management its name to select it and type in the

The Site Organizer allows you to man- name you want to use.
age the web pages that make up an
iWeb site.

To create a new website in iWeb:

1. Launch iWeb by clicking on its icon
in the Dock or in the Applications
folder. To add a page to the new site:
2. In the .Mac information screen, 1. Click the Add (+) button at the bot-
click on Sign In if you already have tom of the Site Organizer to open
a .Mac account, or on Close if you the Template Chooser and select a
don't have an iWeb account. page type for the new page.
3. Check the box next to "Don't show 2. Click on Choose to add the page to
this message again" if you want to the site.
keep this window from being dis- 3. Repeat steps 1 and 2 to add pages
played each time iWeb opens. as needed.
4. When the Template Chooser 4. To rename a page, double-click on
opens, select a template from the its name in the Site Organizer and
list on the left, then choose a page type in the name you want to use
type for the first page in the site by for it.
clicking on one of the thumbnails on 5. To delete a page, click on its icon in
the right. If the Template Chooser the Site Organizer, then choose
does not come up automatically Edit > Delete Page. You must have
when you open iWeb, choose File > at least one page in an iWeb site. If
New Site. you delete the last remaining page
5. Click on Choose to create a new of an iWeb site, the Template
site with the selected template. Chooser will open so you can cre-
6. Choose File > Save to save your ate a new page.
site. 6. The first page listed in a site is the
7. The new site will be listed in the start page for that site. To change
Site Organizer (the column on the the order of pages, drag and drop
left) with the default site name. the pages in that site until they are
To rename the site, double-click on

Created by Luis Perez

Last Updated: 3/31/08
 in the desired order in the Site Or- • To change the font and style, click on
ganizer. the Fonts button in the toolbar and
select a font family, font typeface,
You can create multiple sites in iWeb. and size using the different columns.
To create additional sites, choose File The buttons at the top of this window
> New Site and repeat the steps in this will allow you to add underlining, a
section. To delete a site, select it in the shadow, or other styling to your text.
Site Organizer and choose Edit > De- • To add a list, place the cursor in the
lete Site. line where you want to start your list,
open the Text Inspector and select a
Navigation list type using the drop-down menu in
iWeb automatically creates a naviga- the List pane. A new list item is cre-
tion bar which appears at the top of ated each time you press Return. To
each page in a site. The navigation create a line break without creating a
bar automatically updates as you add new list item hold down the Shift key
and remove pages. on your keyboard as you press Re-
turn.
To hide the navigation bar and create
your own navigation links: To add your own text boxes, click on
1. Open the Inspector and select the the Text button in the toolbar then
Site Inspector. modify the text box as follows:
2. Uncheck the box next to “Display • To move a text box, click on it to se-
navigation menu.” lect it and move it to another location.
3. If you only want to remove a single • To resize the text box, drag on one of
page from the navigation bar, select the handles that appear when you
the page in the Site Organizer and click on it.
uncheck the box next to “Include
page in navigation menu.” Links
To add a hyperlink:
Working with Text 1. Select the text or object you want to
iWeb templates include placeholder turn into a hyperlink.
text to show you exactly how your text 2. Open the Hyperlink inspector.
will be formatted. To replace the 3. Check the box next to "Enable as a
placeholder text, double-click to select hyperlink."
it and begin typing your own text. 4. Using the drop-down menu, select
one of the link types:
There are several ways to format text • One of My Pages: use this option
in iWeb: to link to another page in your
• To change the spacing and align- site. Use the Page drop-down
ment, open the Inspector and select menu to select the name of the
the Text Inspector. Use the sliders to page.
change the character, line, and para- • An External Page: select this op-
graph spacing. Click on the buttons tion to link to a page on the Web.
at the top to change the alignment, or Enter the web address of the
click on the color well to change the page in the URL field.
text color.

Created by Luis Perez

Last Updated: 3/31/08
 • E-Mail Message: use this option The Metrics Inspector also has options
to create a contact link. Enter a that apply to images:
recipient address and a subject in • Use the flip buttons to flip the image
the corresponding fields. vertically or horizontally.
• Use the Angle wheel to rotate the im-
Images age.
iWeb templates also include place-
holder images. There are several The Adjust Image window allows you
ways to add images to an iWeb site: to adjust the colors and lighting in your
• Drag and drop an image from a images without having to open iPhoto:
Finder window until it is over the 1. Select the image you want to edit
placeholder image. . and click on the Adjust button in the
• Select a placeholder image and then toolbar to open the Adjust Image
choose Insert > Choose to navigate window.
to the location where the image is 2. Use the sliders to change the over-
stored on your hard drive. Select the all brightness and contrast, or fix
image and click on Choose to re- the colors in your image.
place the placeholder image. 3. The histogram at the bottom of the
• Click on the Media button in the tool- window displays tonal information
bar, then click on the Photos pane for your image. Use the Exposure
and choose an image from your slider to change the mid-tones in
iPhoto library or from one of your your image. To work with the
iPhoto albums. Drag the image into shadows or highlights individually,
the canvas until it is over a place- use the markers below the histo-
holder image. gram. Drag in from the left to in-
crease the shadows (and make the
Once you have added an image to a image darker), or from the right to
page, you can drag it to a different lo- bring out the highlights (and make
cation or use the handles that appear the image brighter).
around it to resize it. 4. To perform an automatic adjust-
ment, click on the Auto Levels but-
The Graphics Inspector can be used to ton. If you’re not happy with the
further customize the appearance of an results, click on Reset Image to
image: start over.
• Check the box next to Shadow to add
a drop shadow. Use the controls to When you add an image to a page it
change the angle, offset, and other can be added inline or fixed on the
options for the drop shadow. page. Inline images move along with
• Check the box next to Reflection to the text as you type, and they can
create a reflection effect. Use the have text wrap around them. Fixed
slider to change the opacity of the objects can be dragged to any location
reflection. on the page and they do not affect the
• Use the opacity slider to increase the flow of the text. To wrap text around
level of transparency in the image. an image:
1. Select an inline image in the can-
vas.

Created by Luis Perez

Last Updated: 3/31/08
2. Open the Wrap pane of the Text and Metrics Inspectors. You can
Inspector. change the fill and stroke colors, or
3. Check the box next to “Object add a drop shadow.
causes wrap”.
4. Click on one of the buttons to have Photo Pages
the text wrap around the right or left One of the page types included in
side of the image. iWeb allows you to quickly build a
5. To add white space between the photo gallery.
image and the text, enter a value in
the Extra Space field. To create a Photos page in iWeb:
1. Click on the Add (+) button to add a
iWeb allows you to mask or hide parts new page to the site.
of an image. To mask an image: 2. When the Template Chooser
1. Select the image in the canvas and opens, select the Photos page type.
click on the Mask button in the tool- 3. Click on Choose to add the page to
bar. the current site. The new page in-
2. The grayed out area is the part that cludes a grid with placeholder pho-
will be hidden. To change the size tos.
of the masked area move the 4. Click on the Media button in the
bounding box and drag on the han- toolbar to open the Media Browser,
dles. then select the Photos pane.
3. Press Return on your keyboard to 5. Drag an image from the Media
set the mask. If you want to re- Browser until it is over one of the
move the mask, select the image placeholder photos. The first photo
and click on the Unmask button in added replaces all the placeholder
the toolbar. photos in the grid.
6. Continue dragging photos from the
Images can be layered in iWeb by Media Browser to add them to the
placing them on top of each other. The grid. The existing photos move to
layer order can be controlled using the create space for the photos you are
Forward and Backward buttons in the adding.
toolbar. 7. To add multiple photos, drag an al-
bum from iPhoto into the grid. The
first 99 photos in the album are
Shapes added to the photos page.
Shapes can be used in iWeb to create 8. To rearrange the order of photos in
rounded text boxes and callouts. To the grid, drag and drop until the
add a shape, click on the Shapes but- photos are in the desired order.
ton in the toolbar and select the shape 9. To edit the caption text below an
type you wan to add. To add text to a image (by default the file name is
shape, double-click inside of it and be- used), double-click on it to select it
gin typing. and begin typing.

Shapes behave like images in iWeb.

As with images, you can edit a shape
by selecting options in the Graphics

Created by Luis Perez

Last Updated: 3/31/08
To create a Photos page from iPhoto, 6. To edit the text in a blog entry, click
select an album and choose Share > on its title in the Title List to display
Send to iWeb > Photo Page. its page. You can then edit it as
you would any page in iWeb.
Blogs 7. To delete a blog entry, click on the
A blog is an online journal. To create a Delete Entry button in the Title List.
new blog in iWeb:
1. Click on the Add (+) button to add a To change the options for a blog:
new page to the site. 1. Select the Blog icon in the Site Or-
2. Select the Blog page type in the ganizer.
Template Chooser. 2. Click on the Inspector button in the
3. Click on Choose to add the page to toolbar and select the RSS Inspec-
the current site. Three icons are tor.
created in the Site Organizer: 3. Enter the number of entries in the
• Blog: This is the page your web- excerpts field. Use the slider to de-
site visitors see. It contains ex- termine the length of each entry.
cerpts of the five most recent en- 4. Check the box next to “Allow com-
tries in the blog. You can edit the ments” if you want your website
title and description for the blog visitors to be able to comment on
by replacing the placeholder text your blog entries. Your site must be
in this page. hosted on a .Mac account for com-
• Entries: This is where you create ments to work.
and manage your blog entries.
Your website visitors don’t see When you create a blog, iWeb auto-
this page. matically adds a Subscribe link with the
• Archive: This page includes all RSS icon on the main page of the
blog entries, including those that blog.
don’t appear on the main page.
The blog templates include a link
to the archive on the main page. Your website visitors can click on this
link to subscribe to your blog using an
RSS reader or a website that supports
RSS subscriptions (such as Bloglines
or Google Reader).
4. To add a new entry, select the En-
tries icon in the Site Organizer and Podcasts
click on the Add Entry button in the iWeb includes two kinds of blog tem-
Title List. iWeb will automatically plates: Blog and Podcast. You can
add the date to each new entry. create podcasts using either template,
5. To change the title of a new entry: but if your blog will contain mainly pod-
• double-click the placeholder title casts you should use the Podcast tem-
text on the page and type in the plate.
title you want to use, or
• double-click the title in the Title There are two ways to create a pod-
List and type the title you want for cast using iWeb:
your new blog entry.

Created by Luis Perez

Last Updated: 3/31/08
• start off in iWeb and use the Media 3. Select a page type (Blog or Pod-
Browser to find media files on your cast) using the Template Chooser.
computer, or If you have more than one blog, a
• start off in Garageband or iMovie and dialog box appears before the
send a podcast to iWeb. Template Chooser opens to let you
choose the blog you want to use.
To create a podcast in iWeb:
1. Click on the Add (+) button to cre- Each time you create a podcast, iWeb
ate a new page. automatically adds a Subscribe to pod-
2. Select the Podcast page type in the cast link to the main page of the blog.
Template Chooser and click on
Choose.
3. Select the Entries icon in the Site
Organizer. Your website visitors can use this link
4. Click on the Add Entry button in the to subscribe to your podcast using
Title List. iTunes or any program that supports
5. Edit the new entry as you would podcasts.
when adding a new blog entry.
6. Drag a media file from the Media You can use iWeb to submit a podcast
Browser or from a Finder window to the iTunes Store. To submit a pod-
until it is over one of the placehold- cast:
ers. 1. Select the main page of the pod-
7. Repeat step 6 to add more entries cast (click on Blog or Podcast in the
to the podcast. Each entry will be a Site Organizer, depending on which
new podcast episode. template you selected when you
added the blog to the site.)
To create a podcast from Garageband: 2. Open the Inspector and select the
1. Create the podcast in Garageband. RSS Inspector. Click on the Pod-
2. Choose Share > Send Podcast to cast pane.
iWeb. 3. Enter the descriptive information for
3. The Template Chooser opens with your podcast series and podcast
the Podcast page type already se- episode.
lected. Click on Choose to create 4. Check the boxes next to “Allow
the podcast. Podcast in iTunes Music Store.”
5. Choose File > Submit Podcast to
If you have more than one blog, a dia- iTunes.
log box appears before the Template 6. Enter the additional information in
Chooser opens to let you choose the the dialog box, such as the cate-
blog you want to use. gory, language, and parental advi-
sory rating.
To create a video podcast from iMovie: 7. Click on Publish and Submit.
1. Create a movie in iMovie and 8. Follow the instructions in the iTunes
choose Share > iWeb. window to complete the submission
2. Choose “Share for video podcast” process.
and click on Share.

Created by Luis Perez

Last Updated: 3/31/08
Movie Pages To add an Email Me button:
iWeb has a special template for movies 1. Place the cursor where you want to
that are not included in a podcast. To insert the Email Me button.
add a Movie page to an iWeb site: 2. Choose Insert > Button > Email Me.
1. Click on the Add (+) button, select
the Movie page type in the Tem-
plate Chooser, and click on
Choose. If you publish your site using a .Mac
2. Drag a movie file from a Finder account, your .Mac email address is
window or the Media Browser until used. If you use a different account,
it is over the placeholder in the the address in your card in Address
movie page. Book is used instead.
3. To add a description, double-click
on the placeholder text below the A hit counter is included with most
movie and type your own text. iWeb templates to let you know how
many people visit your site.
To create a Movie page from iMovie:
1. Create a movie in iMovie and To add a hit counter (only works if the
choose Share > iWeb. site is published using .Mac):
2. Choose “Share for web” and click 1. Go to page where you want to in-
on Share. sert the hit counter.
3. Click on Choose when the Tem- 2. Choose Insert > Button > Hit
plate Chooser opens up with the Counter.
Movie page type already high- 3. Drag the button to the location on
lighted. the page where you want it to ap-
pear once the site is published.
Special Elements You can’t resize the counter or
iWeb allows you to add several special modify it.
elements to a website.
Publishing
To add a Date and Time Field: Once you’re finished creating your
1. Insert a Text box by clicking on iWeb sites, you need to publish them
the Text button in the toolbar. to a web host so that other people can
2. Click inside the Text box and access them online.
choose Insert > Date & Time.
3. Select a format in the Date and To publish a site using a .Mac account:
Time dialog box. 1. Choose File > Publish to .Mac. The
4. Check “Automatically update the icons for the site and its pages will
date and time” if you want the change from red to blue in the Site
date and time to be updated Organizer once they’re published.
each time you open iWeb. 2. To view the published site using a
5. Click on Insert. web browser, click on the Visit but-
ton below the Site Organizer or
choose File > Visit Published Site.

Created by Luis Perez

Last Updated: 3/31/08
3. If you need to email the address to To back up your iWeb sites:
other people, the format is: 1. Click on the icon for your hard drive
http://web.mac.com/yourusername. (Macintosh HD).
2. Go to Users > Your User Name >
If you have more than one site, the Library > Application Support >
format will be: iWeb and copy the Domain file.
http://web.mac.com/yourusername/i
Web/sitename. To restore iWeb sites from a backup,
copy the Domain file from the backup
Some of the features available in iWeb location to Users > Your User Name >
will only work when a site is published Library > Application > Support > iWeb.
using a .Mac account. One of these
features is password protection.

To use a password on a .Mac site:

1. Select the site in the Site Organizer.
2. Open the Inspector and select the
Site Inspector.
3. Click on the Password pane and
check the box next to “Make my
published site private.”
4. Enter the user name and password
visitors to your site will need to en-
ter before they can view the site.

To publish your site to a web host other

than .Mac:
1. Choose File > Publish to a Folder.
2. Choose a location to save your
site’s files.
3. Enter the URL for the site. This ad-
dress is used to create the RSS
feeds for blogs and podcasts in the
site.
4. Click on Choose to save your site
to a folder on your computer.

Once you’ve saved the site to a folder,

you can use an FTP program to upload
the files to your web host.

Backing Up
You can back up iWeb sites (and trans-
fer them between computers).

Created by Luis Perez

Last Updated: 3/31/08