Web Page Design & Intro to Web Page Development

Adding tables

Adding tables is similar to any modern word processing application. Choose Insert-Table and you will see a dialog box asking for initial table parameters. Once you designate the number of columns and rows, you will need to decide the width of your table.

The width can be described either in Pixels or Percent. Pixels refer to the number of "dots" across the computer screen. Most 15 inch monitors are set to a resolution of 800 by 600 pixels. If you would like your table to stretch all the way across the screen of a 15 inch monitor, select 800 pixels. However, if someone with a smaller and older monitor, that has a resolution of 640 by 480 pixels, views your table, they will need to scroll to the right to view the rightmost part of your table. Another option is to simply select the percent and set the table width to 100. The downside to this approach is that the width of your table will change depending upon the size of the monitor. The safest bet is to choose pixels and limit the width of your table to 600 pixels. The border option lets you select the size of the boundary around each cell in the table. If you don't want the boundary visible to the user, set it to zero.

Modifying tables

You can adjust the column widths and row heights by moving your pointer over the column or row border. When your pointer changes to a double arrow (see image below), hold the mouse button and drag the column/row in the desired direction.

You can also make changes to the table in the property inspector. What is changed depends upon what is selected. To select the entire table, right-click (opposite-click or ctrl-click on the Mac) anywhere inside the table and select Table-Select Table.

Once you have the desired area selected, you can make any changes to that area via the property inspector.

Page Layout

Adding layers

Layers are containers for elements of your Web pages. These provide a nice tool for manipulating the location of objects on your page. Unfortunately, layers are not supported by the older versions of major Web browsers (older than 4.0 - which is actually pretty old in Web years). As of the summer of 2001, about 2 percent of the browsers in use were pre 4.0. Add layers by selecting Insert-Layer. Once you've added the layer you can place anything you would like in the container. The format I normally use with layers is to have a banner, menu and content layer. In the example below, I have a banner layer that contains the Desktop Publishing logo, a navigation layer on the left and a contents layer to the right.

Changing the layout of your page

Adjusting the layout of Web pages can often become a trying task. Since HTML was not designed with page layout issues in mind (it was designed to connect documents and provide some rudimentary formatting control) it can be difficult to achieve the look you are after. Part of the frustration with layout has to do with the fact that you can't dictate what size or kind or screen people will be seeing your page on. Another way to set up the layout of your web page is to use frames. Frames are smaller web pages that you can create within your webpage to give the page a consist format. To create frames, go to Windows and select the object menu. Change the drop down menu on the object menu from common to frames. Then select Insert top and nested left frame. With this layout, room is created for a menu bar on the left, a title bar on the top, and content in the middle. This layout also adds consistency to your site, making it easier for visitors to navigate.

Keep in mind that with frames, you must save each frame individually since it is its own web page. To do this, go to File, Save Frameset As, and give the frame a name. It is helpful to name the left frame "menu" and the top frame "title" so that it's easier to distinguish them. Once you have the menu and title frames individually, you can then go to File, Save All Frames. This is where you would give the entire file its name, such as "Index."

Previous    |    Next