Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Anyone looking for a fast and easy way to build a great web site can use iWeb to bring together and post photos and videos that were created using other iLife '09 applications. Instructor Garrick Chow demonstrates the basic functions and the new features of this application in iWeb '09 Essential Training. Garrick shows how to create and publish everything from basic web pages containing text and images to more involved pages with video. He also demonstrates how to create blogs and podcast pages. Exercise file accompany the course.
In this section of movies we're going to take a look at working with media like photos and videos. In the previous chapter we looked at the basics of working with images. But now I would like to look specifically at topics like creating a photo gallery page, importing photos from iPhoto and adjusting images directly in iWeb. So let's start by taking a look at how to create a photo page. A Photo page is simply a page designed to display a photo gallery or a photo slide show. A photo page is a great way to share a large or even a small collection of photos on the web and you can do so quite easily by simply using one of the Photo Page Templates in iWeb. So let's create a photo page.
I am going to click the Add Page button, to add a new page to my site and now I can see my collection of page templates again. Now there is only one type of photo page per template theme. But remember there is no absolutely hard and fast rule that you have to stick with one theme for all of your pages. It certainly helps to maintain a sense of design consistency throughout your site if you do, but if you don't like a particular template, browse through the other ones to find one that better suits your visions for your photo page or whatever type of page you're working on for that matter. But for this example, since I'm already using the Fine Line theme I'm going to stick with that and I'll select the Photos page and click Choose.
And just like previously, I'm now presented with a page containing text and image placeholders that I can swap out for my own. Also notice Photos has been added to my Navigation Bar and you can see the page here in my sidebar. Now some of the placeholders on this page work just like they did before in the previous two pages we worked with. So if I wanted to select the title here My Photos and change that to something else, I just need to type and I could select this text here and maybe I'll make this, Have camera, will travel, and I can select this text.
So yeah those items work just like before but on the Photo page you have an area of placeholders that work a little differently than normal placeholders. Notice when I click on any of these three images, all three get selected. I also get this new Photo Grid control panel where I can determine how many columns of photo thumbnails I want. So I can select one column or up to six columns. Kind of like three. I can use the Spacing slider to determine how close the thumbnails should be together or how far away from each other they should be. And you can see that's actually just resizing the thumbnails. You can choose how many Photos you want to have per page and you can actually add up to 300 photos per page. Although, I think that's a little much myself and a page like that will take forever to load and it would be hard to navigate through that many photos on a single page in my opinion.
Caption Lines is for choosing how many lines of text you will have for captions below your thumbnails. I think see we have some placeholder captions here as well. And to the left of this control panel we have our Album Style menu and you can select from a wide variety of Frame styles for the images. And I'll just choose this one here in the upper right hand corner. I am going to leave everything else the way it is right now. Now that doesn't mean that I have to have 102 photos on my page or whatever this number happens to read on your screen. That just limits me to that particular number. So let's have some of our own images. Now notice that I can't select any of these individual thumbnails, they are just here as placeholders for the gallery I'm going to create.
Let me go to the iWeb Photos Folder on my desktop, just pull this down a little bit and I'm going to drag in some photos. I'm going to use the photos in the Taiwan folder, let's go ahead and open that up. Let's look at those and I'll grab pagoda. I'm just going to drag that in. So notice as soon as I do that those other three placeholders have disappeared. Now I only see the thumbnail for the image I dragged in. Its name appears below it but I can easily change that to a different caption just by clicking it.
And I can continue dragging in pictures. I can drag them in one at a time like this or I can select several images and drag them in at once. Let's open those photos again. I'll grab these Chicago photos. Drag them in. And there they are and as you drag photos in, iWeb moves the other photos around so you can place your pictures anywhere you want. So if I wanted to reorder these I simply just need to drag them around.
So that's all there is to adding photos to a Photo Page template. Now let's talk a little bit about what happens when you publish a photo page. Photo pages are very, very cool. They go far beyond basic web page design where you just put up a bunch of photos for people to see. What we have just built here is actually a very sophisticated web based photo viewer. For this page there will be two ways, visitors can be your photos. But you will be able to click on individual thumbnails or they will be able to click the Play Slideshow button to view an interactive slide show that advances each picture after few seconds and also allows the visitor to manually control the picture playback. Now I could continue to sit here and describe this to you or we can publish this photo page and you can actually see what it's doing.
So I'm going to click Publish Site, or iWeb continue publishing in the background, which will only take a couple seconds. All right let's click Visit Site Now and see what we have got. I'll click my Photos link to go to the photos page. And here is the page just as it looked in iWeb. And I can click a thumbnail to view the photo. Nice thing about this is I can also navigate by either clicking Next or Previous and I can also see the thumbnails of the other images in this gallery along the top. So I can click on them to jump ahead.
Visitors to your site can turn that option on and off by using these buttons at the top. The one icon looks like a photo with thumbnails above it. The other one looks like just the photo itself. And there is also the Play Slideshow button, which I'll click and this is very cool. I see each picture one at a time and then it's automatically advanced to the next photo after about four or five seconds. If I want to linger on a particular photo all I have to do is move my mouse to the area below the photo to get the controller to appear, so I can pause the Playback or click the arrows to go forward or backwards in the slideshow.
Now it's the cool cross dissolve transition between pictures. If I move my mouse above the photo I get a display of thumbnail so I can jump right to a particular picture. And you can't imagine how much work it would take to get a slideshow like this going in other web design programs. But all we needed to do here was drag pictures into iWeb. Go ahead and close that and all these ways of viewing the pictures, whether it's using the thumbnails or viewing a slideshow, they all work regardless of whether you're publishing to a MobileMe account or not. So it's nice to know you won't have to give up this functionality if you choose the Publish your site to a service other then MobileMe.
So that's how the Photo Gallery page works in iWeb '09. Next we'll take a look at how to import photos directly from iPhoto.
There are currently no FAQs about iWeb '09 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.