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.
As you are going to quickly realize in this movie, replacing placeholder images in iWeb with your own images is not that much different than replacing placeholder text with your own text. Now when you add images to web pages in other web design programs, you have to be concerned about the format of the images. For the most part, the two common image types for the web are JPEG and GIF. GIFs are generally used for flat colored images with no graduation between the colors, while JPEG is commonly used for photographs. You may have also heard of the P-N-G format or PNG format, which is growing in popularity and sort of incorporates the best qualities of the GIF and JPEG formats. But in iWeb, you don't really need to worry about image formats at all.
iWeb can accept just about any type of image format you drag into it and it will automatically convert the image into a web-ready format. By default, iWeb automatically reduces the size of large images, so they don't take up a lot of space on your server and don't take forever to download on to your visitor's computer. You just need to make sure that you have the correct Preferences checked to do so. So go to iWeb > Preferences, and make sure Optimize images on import is checked. This doesn't give you any control over how it reduces the image size but I wouldn't suggest turning this option off unless you know how to optimize web-ready images in another program like Adobe Photoshop, for instance. Another advantage of working with images in iWeb is that you don't need to keep track of an images folder like you do in other web-design programs.
When you add an image to a web page, you are essentially creating a reference to that image in the web page with code that tells the browser in which folder to find the images specified, and if you were to move or delete that folder, the image on your page would go missing. But iWeb automatically imports any image you add intro your site folder, and you never have to worry about managing an images folder. When you are ready to publish, iWeb takes care of everything and makes sure all your images are in the right place. Okay, so how do we replace one of these placeholder images? Let's start here on the Melbourne page. For this exercise, I have copied the folder called iWeb photos to my Desktop, and if you don't have the exercise files, you will just need some of your own pictures to try this out.
Later on, I'm going to be showing you how iWeb integrates with iPhoto and how you can add pictures from iPhoto directly into iWeb, but for now, I'm just going to show you how you can add an image from anywhere on your hard-drive into your page. So I want to replace this big placeholder image with one of my own. I'll open up my iWeb photos folder and find the picture I want, and in this case I'm going to go into the Melbourne folder, and I know the photo I want in this case is called train station. So I'm going to drag that over the selected placeholder. Now I'm going to make sure that I see this blue outline around the placeholder image; that tells me that I'm going to replace the image. If I drag the picture around, you will see that different areas on the page highlight.
If I drag down towards the bottom of the page, an outline appears around the entire page, so when I release my mouse, that image gets added to the page and it doesn't replace anything in the process. Let me undo that. So now I'm going to drag that image over the image placeholder. And there it is. Now depending on the dimensions of your image, there will be times when it doesn't match the exact dimensions of the placeholder, and this will probably happen more often than not because many of the placeholders have dimensions different than standard photos you shoot on your camera.
Once you insert an image into a placeholder, you can resize the image or reposition it to suit your taste. Now if I try to drag this image around right now, the entire image moves. Let me undo that. But if I double-click the image, now I see the entire image including the parts at the right and the left that are hidden by the frame. So you can see them kind of ghosted to the left and to the right. Now I can drag the image around and position it as I like. Notice that iWeb automatically lets you know when your image is centered in the frame or aligned with other objects on your page. You can also use the slider that makes it easy to resize the image.
Now you could also drag the handles to resize the image, but I find the slider much easier to use and maybe I'll just drag this down so we can see a little bit more of the sky, kind of like that right there. Once you have done adjusting the image, you can click outside of it and that shows you the cropped or masked version again. A little later, we'll talk about how to adjust the properties of the frame or mask as it's called around the image. So that's how you add images to your iWeb pages. You can either drag them over existing placeholders or just drag them on to the page to add new images.
I'm going to go ahead and replace the other placeholders on this page with some of my own photos from Melbourne. I will grab skyline for this one, drag this to the left so that we can see what's going on, and maybe the next one, I'll grab lamp. That's kind of a tall photo, so I'll just grab lamp for that. It probably needs to be resized. I'll double-click on that and let's just reposition that and maybe make it a little bigger like that and let's grab tram. Make that a little bit bigger as well, and the last image here we'll use is bird.
Once again, I'll double-click, make it a little bit bigger, reposition it, maybe a little smaller. Here we go. I like that. While we are at, let's go and replace the images on the Welcome page. So let's switch over to the Welcome page and again, we have got a bunch of image placeholders here and I have got a bunch of other images in my iWeb photos. Let's go ahead and get rid of the sidebar there, so we can see this little bit better.
I'm just going to pop all these open here, and maybe for the large placeholder image, I'm going to grab grand_canyon01 and we'll just work our way down the other side here. I will grab opera_house. Pagoda. It needs to be repositioned a bit, so I'll double-click and make it a little bigger. Go grab the Chicago buildings and from the Taiwan photo, I'll grab grand_ hotel and maybe make that a little bit bigger. So it's a lot easier to replace placeholder images.
One last thing about adding images to your pages, in case you didn't notice this in the Inspector Palette earlier, let me open up the Inspector Palette, is that you can also add images as the background of text boxes or to the entire page itself. So for example, if I click anywhere on this page and then select the Page Inspector, and go to Layout, I can choose Fills for both the page background and the browser background, and for both of those I can actually choose images. You can even select text blocks, and under the Graphic Inspector, you can choose images to fill those as well. This is entirely up to you and your sense of design style, but one thing I'll say is that if you are going to play around with background images behind text, make sure there's enough contrast between your text and your background color or image so that you can still read the text on top.
So for example, with this text-block selected, if I chose to fill that with an image and I want to choose, say my other grand_canyon photo here. It will look something like this. Now I can choose how it's going to fit that particular box but still, it's not that easy to read the text over that image. Now we do have options as far as maybe choosing a Tinted Image Fill, which will fade it back a little bit. So it's something you are going to have play around with if you are going to have an image behind text. I'm just going to choose None again. Okay, so that's adding images to your web page. Again, I'm going to get further into working with iPhoto pictures and photos in general, including how to edit them directly in iWeb in the chapter on adding photos and movies. But next, I want to show you some other cool things you can do with your images.
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.