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...