You can build pages in WebBuild Express that are as large and complex as you need. Because you can only see the portion of the page that is within the Design Environment on your monitor, sometimes it seems difficult to visualize the page as a whole or to move to parts of the page that are not currently visible. This topic discusses a number of ways that you can move around on a large page.
In general you should be careful about the size of pages on your site. If the page is so large that it does not fit within a visitor's browser, the visitor will have to scroll horizontally and/or vertically to see the entire page content. Many large commercial Web sites like CNN.com and NYTimes.com limit the width of their pages so that they will fit within a browser on a 800 X 600 pixel monitor.
Whenever you select a cell in WebBuild Express, you will see its dimensions and coordinates in the "Status Bar" at the bottom of the Design Environment:
In this example, the cell is 489 pixels wide and 306 pixels high and its upper left corner is located 270 pixels from the left margin of the page (X coordinate) and 209 from the page top (Y coordinate).
If you move or resize a cell, you'll see the affected dimensions or coordinates displayed dynamically as you drag the cell or its borders across the page:
Moving a cell:
Resizing a cell:
In the following example, there are four cells on the page:
The user clicks on the border of the upper right cell and begins dragging it to the right. (Notice how the horizontal scroll bar near the bottom of the Design Environment opens up to indicate the relative page width).
The user continues to drag the cell to the right:
Now the two cells at the left of the page are no longer visible and the cell originally at the bottom right of the page is now at the left of the screen. Notice as well that the X and Y dimensions of the cell we are dragging have changed, and the cell, which was originally 516 pixels from the page's left border is now 1147 pixels in its X dimension.
In a similar manner, we can drag the lower right cell down and to the right:
In the above screen image, it has been dragged down somewhat and to the right so that it is nearly underneath the top left cell. Now, the user drags it down the page, and the top right cell is no longer visible:
The WebBuild Express page is determined by the objects that are on it. The page in this example, which originally fit largely within the screen, is now several times larger by virute of the fact that the user moved objects outside the page's original dimensions.
You can move around a large page like this by using the scroll bars. If we click on the empty part of the scroll bar as shown above, the view of the page will move one screen-width to the left. (Notice that the lower left cell has been moved down the page to the same Y-coordinate as the lower right cell):
Using Multiple Selections
You can expand a page's dimensions by changing the properties of cells in a multiple selection.
In the following example, there is a cell on the left (which will later be used for a menu) and a narrow cell on the right to provide an accent and demark the page's right border:
If we select both cells (see "Selecting and Editing Multiple Cells") by clicking one one and then holding the control key and clicking on the other, we can edit the properties of the selected cells (by clicking "Cells" and then "Edit" on the "Edit" menu:
Notice that some of the properties are shown as blanks, indicating that the cells have different left coodinates and widths. We'll change the cells' height from 150 pixels to 1250 pixels and click on the "OK" button::
The cells on the left and right of the page now have a vertical dimension of 1250 pixels, and the page has been expanded to accommodate the changes. You would need to scroll down the page a considerable distance to get to the bottom.
|
|
