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.
With the ability that iWeb gives you to overlap text, images, and shapes on top of each other, there will naturally be times when you want to change the order in which certain items are stacked. For example, let's say I want to add a smaller picture of the Grand Canyon on top of the large image that's already here on the Welcome page. Let me go to my iWeb Photos folder and I'm going to select grand_canyon02 and drag that to my page. Now make sure not to drag it on top of the main image just yet, otherwise iWeb thinks I want to replace the current image. Let me undo that. So I'm just going to drag it to an empty portion of my page first.
And there it is on my page. So notice that this image sits on top of the large image. If I drag it on the page, also notice that it covers the text and other images that were already on the page. In terms of stacking order, my new image is on top of the stack. Basically, each new item you add to your page becomes the king of the hill or the top of the stack. But it's a simple matter to change the stacking order if you need to. For example, I'll just place image over the text-blocks here. And now I'll right-click the image and choose Send Backward. Now it doesn't look like anything has happened but the image has moved one level down in the stacking order. If I drag it around a bit, I'll find the object that it's currently under. And there it is. It's actually under the title there, My Travels.
So the stacking order applies to every object on the page. Therefore, you might have to select Send Backward a few times to get your object at the desired level in the stacking order. Or if you want it on the very bottom of the stacking order, choose Send to Back and now it's underneath every other object on my page. So with this image currently on the very bottom of my stack, a problem you might run into is accidentally completely hiding your object behind a larger object on the page. For example, let me make this a little bit smaller. So if I drag this image under the large image here and release, my smaller one is now just stuck under the big one and there is no way for me to click it to bring it back forward.
The only thing I can do is select the large one at this point and maybe move that out of the way. But maybe I have that large image exactly where I want it to be, so I don't want to move it out of the way just to get to the smaller image behind it. But an easy fix for this is to just right-click the larger image and choose Send to Back which instantly sends that object to the very bottom of the stacking order and now I can grab my smaller image again. Now bear in mind, you also have the ability to choose Bring Forward or Bring to Front which of course moves objects up in the stacking order or all the way to the top respectively.
If you have worked with web design programs before, you may never have worked with stacking objects, unless you are heavy into CSS layouts. But unlike working with CSS, iWeb makes it really easy to place objects anywhere you want or in any stacking order that you require. And now that we have some overlapping images, I can show the effect of the Opacity slider that we talked about earlier. Let me open the Inspector again. Go to the Graphics Inspector. With our image selected, we can reduce the Opacity. And you notice that we can now see through that image. So that's when the Opacity slider might come into play when you have images stacked on top of each other.
Now as far as placing objects anywhere you want, we have already seen that iWeb tries to anticipate where you want to place your objects by highlighting the areas into which you drag your objects. So if I take this picture and drag it down, we have got these blue lines and you can see now it's aligned with the center of that picture of the buildings. If I continue dragging down, it looks like it's now aligned to the bottom of that text box. You could see here now I have it aligned with the middle of the large picture, and so on. So we have seen these guidelines before. Now also be aware that each iWeb page has a header and a footer section. If I drag this object down, you can see this box highlight, see right there.
This box highlighting at the bottom of the page is the footer section. Currently, the Made on a Mac button is in the footer. Now if I place image just outside that box, maybe right here and then make this text box a little bit taller, notice the footer section moves down but my image stays where it is. I'll make this smaller again. But if I move this image into the footer section, even though you can't see the whole thing, it is in the footer section. And now if I make this text box bigger, notice the image moves along with the rest of the footer section.
And the same thing goes for the header section. If I drag all the way to the top, we have got a box that highlights at the top and if I drag my image in there, and then move the header section, or resize, you can see the image stays in the same place. Or if I move the image down here and then increase the header, you can see the image moves along with the rest of the page. Now if you are having trouble figuring out where the boundaries of different sections of your page lie, you can choose View > Show Layout, and iWeb will display these gray lines representing the borders of the page areas as well as the borders of the objects on your page. I generally like to keep those off unless I'm having trouble placing objects into a certain area.
So that's a little bit about stacking and arranging objects on your page, and what I have shown you here applies to pretty much every object, be it a text block, image, or shape. I'm going to go ahead and delete that image as I don't really need it anymore. And we'll move on to the next movie.
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.