Subtitles of the Movie

In this movie, let's talk about tracing images. Websites are becoming quite graphical to keep users attention. Simple graphic designs can add a great effect to the layout and elements of a site. When the graphic is used as part of a website design, the graphic is typically cut up into small pieces. That's known as Slicing. Tables are then used to segment all those slices. Then you can use the table to actually type the text on top of the graphic basically. It's quite a tedious process. Expression Web makes it slightly easier by allowing us to use tracing images. Tracing images are simply the graphic that we lay out on the page in the background. Then we can add our table and start resizing. We can resize the table into the layout we want, then take the graphic back into our slicing program and slice it to the specifications we need. So let's try this. Let's click inside our blank page here and let's insert a table. Now that we have our table there, let's add our tracing image. U, Tracing Image, Configure. And then we need to browse for it. I've got a couple in your work files. Let's try this one first. I'm going to leave all the defaults, click OK and here we go. The first thing we need to do is select our table and resize that table to come around our image. I'm going to bring it down so at least the first row is below the edge of that circle and then also I'm going to bring this back for that edge. What I could do is when I take this back into my slicing program is slice it directly here at the edge of my circle and fit it directly into my table. What I can do then is either type over the top of that, add text, whatever I need to do to work with it. I can resize all of these elements to any way I want to. I can type text in there to see how it'll look. What I can do then is just lay my mouse arrow there. That gives me a little information on how wide I need that to be. So I can go take this into my slicing program and slice it up. Now, what I want to show you is I'm going to save this and preview it. Notice the slicing image is not there. That's on purpose. We're just viewing this in the background to try to get an idea of how we need to set up our table and how we need to slice that image. Let's go try another image. View, Tracing Image and Configure. Let's browse for another one. Here's one that might be a little interesting. You'll see right there how this is divided in there. What we'd have to do is again take this in there, grab this area of the image, slice it, grab this area. What you can do first, though, of course, is lay it out, resize things how you think it would be easiest to slice that image up. Or how best it would look on your design. So as you can see, there's a lot of options for tracing images and again, if I view this on the web browser, it's not going to be there. This is just for my own purpose. So if you want a graphical look to your website and you want to have these images throughout there, go ahead and try that. Grab one of those work files, put it into your document and see what a tracing image does.