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 addition to making it easy to work with text and images, iWeb also has a full collection of shapes and objects that you can place on your pages. With a few clicks and drags, you can add rectangles, circles, stars, lines, arrows, and any number of multi-sided polygons to your pages with relative ease. But what, you may be asking, are these shapes and things for? Well, pretty much anything you want to use them for. You might want to color a rectangle in which you place some text, or you might want to draw an arrow from some text to an image to illustrate a point. It's really up to you to decide what to do with these tools. But iWeb makes it so easy to use them that I'm sure you will come up with lots of things to do.
And again, if you are an experienced web designer, you are going to see that you will be able to add things to pages that you normally can't do without writing a lot of code. Now there are two main ways you can use a shape object on your page, as an inline object or as a fixed object. An inline object is placed inline with text, meaning if you move the text block, the shape moves with it and keeps it relative position to the text. A fixed object on the other hand is its own object and you can move it independently around the page wherever you like. So let's take a look at some examples. At the bottom of the iWeb window, we have the Shapes button, and by clicking it, I can see all the types of shapes available to me. So as nothing is selected on my page, I'm going to select the arrow shape, and that places a fixed object on my page. Now the term fixed might sound like you can't move anywhere, but you can actually move a fixed object anywhere.
Fixed just means that the object won't move in relation to the other objects or text on the page. So you can see I can place this anywhere on the page that I like. And again, iWeb tries to help me out by displaying these guidelines anytime I line up with other objects on the page. I'll just place the arrow here for now. And that's where it will stay unless I move it again. Now as for the shape itself, I can resize it by dragging a corner, or I can stretch it into any proportions that I want. Now some shapes have extra controls for making specific change to that shape. For instance, on an arrow, you have this blue dot, which lets you control the width of the arrow's tail by dragging it up and down or the width of the arrowhead by dragging it left and right.
You might have already seen that you can drag the left handles to change the length of the tail, so I can drag this left handle. Oops! I got to grab it first. So I can drag the left handle to change the length of the tail. Now the middle one will just change the length of the tail but if I grab the left upper or lower handle, I can change the length of the tail as well as the height of the arrow, and dragging the middle right handle on the arrow will change the position of the head of the arrow without changing the starting point of the tail. Similarly, on rounded rectangles, let me add one. We've also got this blue dot here. And that allows you to change the roundness of the corners of the rounded rectangle. You can go all the way to a regular square or drag all the way to the right to make a circle.
We have shapes like stars, they come with a slider to determine how many points a star will have, as well as a dot for changing the angle of the arms of the star. And the polygon shape has a slider for determining how many sides the polygon has, you can go up to 11 sides. Let me pull that down here so you can see it.
And as for the rest of the shapes, you can drag their individual handles to make them bigger, smaller, or to change their proportions. And as with most shape drawing programs, holding the Shift key on your keyboard while you drag a corner allows you to keep the shape in proportion as you make it bigger or smaller. If I let go off the Shift key, you can see I can flatten the polygon or stretch it really tall, but holding the Shift key allows me to keep it proportional. And holding the Option key keeps the shape centered around its original location so you can change its size from the center out. And if you hold down the Option and the Shift key together, it will keep a proportion all from the center out.
And again, that's the way shapes usually behave in most drawing tools. Let's go and delete some of these off the page here. Now shapes can also be customized using the Graphics Inspector. So with my shape selected, I can select the Graphics Inspector, and a shape can be filled with a color or an image, and you can add a stroke to it. Let me increase the side. Change it to black, so you can see it a little bit better. So you can pick any kind of stroke you want to put around the shape as well. You can add a drop shadow like we saw earlier, and you can change its opacity.
Do keep in mind that you can use an image to fill your shape. So you can essentially make the shape into a custom frame for your photo. So let me just pick one here to show you. You can see now I have a sort of a weird looking frame for my photo. Let me undo that a couple of times. Now you may be wondering why the Endpoints menus are still unavailable here, even though I have an arrow as my shape. It's because even though this shape is in the form of an arrow, it's still a closed shape with no endpoints in the stroke around it. But if I click the Shapes button and choose one of these arrows at the top here, these top three items are actually lines, not closed shapes.
Let me just choose the double headed arrow to show you this. And now I can choose from a variety of endpoints for the line that I just created. Let me thicken this up so you can see it. So you can see we can choose different endpoints for that arrow. And I'll just delete that. Another thing you can do with shapes is to place text within them. It's going to be a little neat way to make a little banner or button on your page. All you have to do is just create a shape, and type some text in it. I'll just move that up there, I'll change the shape a little bit. Oops! That flips up the picture there.
Now if you remember from earlier, I see the icon telling me that this text will be turned into an image, which makes sense because I'm putting this text over an image inside of a shape. I'll just turn that preference off, so we don't see that. Here we go, so now I have a little balloon shape on my page. So this is something that you can do with a fixed shape object. Now there may be times when you want your shape to be inline with some text. If you have an inline shape, first place your cursor where you want the shape to be. So I'll click and place my cursor at the beginning of this paragraph of text, and then pick a shape.
I will just select the star. So there is the star and notice if I select this block of text to move it, the star moves along with it. Also notice the default behavior of the text is to align to the bottom of the star. When you have an inline object, and inline objects can be shapes but they can also be photos or movies, you might want the text to wrap to the object. To make that happen, select the object, then go to the Text Inspector, and under Wrap, check Object causes wrap.
Now you can see the text aligns itself to the top of the star and comes down. If I make the star smaller, notice that the text flows around it. I'll make it so small you can see the text actually starts appearing beneath it. And I can have the star aligned to the left or to the right. I can also decide how far away the text is going to be from the star with the extra space setting here. I can add more space or less space. But notice that it not only adjusts the space between the star and the text but also the amount of space between the star and the box containing it. So as I add more space, notice it's moving away from the top of the box.
Now unfortunately the text is always going to wrap to the box holding the shape and not to the shape itself, so there is no way to get the text to run along the edges of the star. I'm just going to delete that and go to the other shapes that I have added here. So that's a little bit on working with shapes on your web page.
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.