iWeb Basics : http://etc.usf.edu/te/

iWeb is the 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, , , and movie . 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 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: 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 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 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