How to Code Your Layout in Divide Layers

 Once we've decided where we want our layout to be on the page, we can now move on to plotting the layers for our menu and main sections. Which my next aim for the example I'm using. To do this, we're going to view the webpage (www) via the internet. Or for me, I'm viewing the example through Evrsoft 1st Page. Now that you're viewing your page, press the Print Scrn key on your keyboard. This will copy whatever's on your entire monitor, which will be our webpage.

Once you've pressed that key, open up Adobe ImageReady, then open a new document, and Edit-->Paste, which should then paste what you had copied with 'print scrn', as I've done below... (click each thumbnail image for the full view)

Now use the (rectangular) marquee tool and only outline the actual webpage that you were viewing/previewing. Do NOT outline the toolbars or whatever's not a part of the webpage. Then go to Image-->Crop so you should only have the actual webpage copy remaining. As you can see below, I took out all the toolbars and other knick-knacks from Evrsoft's interface.

We're going to still be using our marquee tool. First we'll want to set the divide layer values for our menu. Before we do that, look to the top-right of your Adobe IR window and you'll notice window with Optimize and Info. Usually by default, ImageReady has the Optimize tab showing. But that's not what we want. Instead, click on the Info tab so that'll be showing, instead. As shown below.

So just with your mouse, go to the top-left of the smaller highlighted box where you, basically, want the menu layer to begin. Notice that in that small Info window we had chosen early, we have a set of x and y coordinates. You can see what I mean below...

See that? The x-coordinate is 61, and the y-coordinate is 156. These are the values we want for our top and left in our divide layer code for the menu. The x value represents our left, and the y value represents our top.

Now that we have those values defined, place your mouse, again, over the same coordinates (61, 156). And highlight out a rectangle within the same box where we want the menu to be. Make it as big as you want the menu to be. Again, look back to that small Info window, and you'll see we have some values for W and H, as seen in the screenshot below...

Adobe IR has given us the values of W: 127 and H: 288. These will be the dimensions for our menu. W for width and H for height. Now that we know how to grab our values for our divide layer, let's quickly repeat the process for our other text box. You can see the quick screenshots below...


Let's move on the filling in all the blank spots for our coding...