Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Building Your Grid
Now it's time to draw a few straight lines. As with page design in any medium, you need to start with a grid to keep things lined up and easy on the eyes of your viewers. Also, the repetition of this underlying pattern is a subtle hint to your reader about what to expect and where to look for information on subsequent pages.
So to ensure that the pages of your site are all built on the same model, start by inserting a few tables. While the lines of the tables won't be visible on your web pages, they'll underlie the text and graphics and give definition and shape to the web pages. The plan is to build a sample design that you can use as a template—one with the familiar banner at the top, left navigation bar, and band at the bottom, sometimes used for legal warnings or navigation options.
We'll be nesting some tables inside of others, but the outside table will look something like Figure 1.
)
Figure 1 Base design grid.
To build this table, follow these steps:
- Choose File, New.
- Select Web Page from the options in the right taskbar.
- Choose Table, Insert, Table.
- Indicate 3 rows, 1 column, and click OK.
- In the table, highlight the center row, right-click, and select Split Cells.
These lines loosely mark out spaces for the top banner, the left nav bar, and a place for that legal mumbo-jumbo stating that the brilliant text and graphics on your site belong to you and that only scofflaws grab things and use them without permission.
Now that you have the outer shell, let's put in a small table to hold the navigation menu. It will consist of a table with a single column and six rows, like the table inserted in Figure 2.
)
Figure 2 Nested table added for menu bar.
Follow these steps to build and format this smaller table:
- Put the cursor in the center-left cell.
- Choose Table, Table Properties, Cell.
- Select the Preferred Width check box and set the width at 1.7 inches.
- Choose Table, Insert, Table to nest one table inside another.
- Set it at 1 column and six rows and click OK.
- Choose Table, Table Properties, Column.
- Select the Preferred Width check box and set the width at 1.6 inches.
- Save your file.
Using the same process, insert a table in the center-right cell. Make this table one column and two rows. Then highlight, right-click, and split the topmost row into two cells as shown in Figure 3, so we can put a graphic in the right one and text in the left.
)
Figure 3 Grid showing cell sizes and purposes.
To ensure that the table will adjust to different browsers, you need to leave at least one table width to float. Word tends to let tables do that anyway, but I like to nail down the left navigation bar to a specific size—as we've already done. In this case, I think it's also a good idea to fix the width of the upper-left cell in this newest table—the one where we'll be typing text. If we fix it at 3.5 inches, every page with a graphic will set the left edge of the cell in exactly the same spot.