Start learning with our library of video tutorials taught by experts. Get started

iWeb '09 Essential Training

Creating and examining a photo page


From:

iWeb '09 Essential Training

with Garrick Chow

Video: Creating and examining a photo page

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
iWeb '09 Essential Training
3h 30m Beginner May 13, 2009

Viewers: in countries Watching now:

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.

Topics include:
  • Manipulating and adjusting images directly in iWeb '09
  • Using built-in widgets to add interactivity
  • Importing movies from iMovie
  • Creating photo pages from iPhoto
  • Managing multiple sites
  • Using MobileMe with iWeb '09
  • Blogging and podcasting
  • Publishing a site via FTP
Subject:
Web
Software:
iWeb
Author:
Garrick Chow

Creating and examining a photo page

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.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed iWeb '09 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

iWeb '09 Essential Training will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked

Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.