Subtitles of the Movie

In the previous movie, I reviewed tools to help you zoom in and out of your documents. Let me now in this movie, review tools to help you place and align objects more precisely in the document window. You'll do this using layout guides. Layout guides are lines that you drag onto the document from the rulers, so I can drag out horizontal guides from the horizontal ruler, and vertical guides from the vertical ruler. You can replace or remove these guides by selecting them and dragging them back onto the rulers, like so. You got to move your curser right over the guide there, and then the cursor icon will change to a double-headed arrow; click and drag it off the document window onto the ruler. Now you can use these guides to help you align various elements on your page. I have a series of layers here, and they're not vertically aligned and even, so I can drag out a guide from the ruler and then align each of those objects there to that ruler. Now to help me do this, I have some tools here in the view guides area. Notice that I have Show Guides to show the guides, and also Snap to Guides, also Guide Snap to Elements. I can lock the guides as well, so I now I can't move them. I'll go ahead and turn off and turn off the Lock Guides. Now, in addition to helping you place and align objects more precisely, these guides also enable you to measure the size of page elements. For example, I can drag out two guides spaced at 100 pixels apart, one at 600, one at 700, and that will help me, perhaps, size a new layer that I want to add. Now that layer is exactly 100 pixels wide. These guides can also emulate the folds of web browsers. The folds are the visible areas, and you do that, using again, the View Guides menu. Notice that down here; well there's Clear Guides there, which is very useful for getting rid of all your guides, but what I wanted to show you is, over here are these emulations of different browser sizes. So this is 640 by 480, and here is emulating the fold on a browser that's 800 by 600, this area in here. Let's go ahead and clear those guides under View Guides. Let's clear those guides, and now let's show you 832 by 624, that's the area right there. This movie is at 800 by 600, that's why some of these lines are hard to see, but there's 832 by 624. Here's 1024 by 768. Now to see this, I'm going to need to zoom out; let's zoom out to 50%, and let's go ahead and clear those guides. Let's zoom out even further; let's zoom out to 25% here, and now let's show you the fold of a 1024 by 768 browser; that would be this area right in here. Now it's important to know where these folds will fall on your document, because the research shows that most visitors will not scroll below the top fold of their web browser. So what this means is that if this site is viewed by a visitor with a monitor resolution set to 1024 by 768, the content below the screen line cannot be seen unless they scroll down. And since they don't often scroll down, you'll want to make sure that you place content down here that is not very important, or just to leave it blank. You'll always want to leave this content out here to the right of this fold blank because you never want to require visitors to scroll left and right in order to see your page content, and this content out here will require them to do so. So that will conclude this quick review of how to set and use layout guides. To quickly summarize, you'll create the layout guides by dragging them from the rulers, you'll remove the guides by dragging them back onto the rulers or by choosing View Guides, Clear Guides, and also Show or Hide the Guides, Lock the Guides, Snap Elements to the Guides, or Snap the Guides to the Elements. You can set up a guides to show you where the folds will lie. Add monitors set to 640 by 480, 1800 by 600, 832 by 624, 1024 by 768 maximized. You can also see where the folds will lie if a user is viewing your website using Web TV.