Web Page Template Issues

Four issues we need to consider when we develop our templates for the demonstration site are deciding where to separate the code for the server side includes, the use of related comments, the width of the page, and how to get rid of the gaps between table cells when we want  them to be a continuous color across cells.

Where to separate the code for server side includes:

Even though any web page code can be placed in the server side includes, determining where to separate the code for the server side includes is important because it directly relates to page maintenance. For example, keeping table cell tags in the basic html document may make it easier to see where page content code belongs because we can't see the code in the SSI when we look at the html page code. Also, breaking the code into logical blocks such as for headers, menus, and footers usually facilitates maintenance.

Comments:

Using comments to clearly identify where server side include code begins and ends is very important as is providing the names if the SSI files. It is also many times important to provide instructions about the use of the includes, such as to not modify them or when they are to be used.

The width:

Our specifications state that the pages are to be developed for a 600 X 800 pixel window. We only need to be concerned about the width because vertical scrolling is expected. So, in that 800 pixel width we need to fit the body content, the menu, and the scroll bar. The scroll bar will take up at least 40 pixels. We therefore need to determine how wide we want the vertical menu to be which leaves us with the width of the body cell. We will then use styles to set those sizes.

(Take a look at my style code to see how I centered the image)

table size diagram

Dealing with the spaces between cells:

When the table is used to display colored cells many browsers will show a space between the cells. Styles can sometimes be used to get rid of those spaces, but cannot be depended on. A more reliable way is to use the cellspacing attribute in the table tag as seen below.

<table cellspacing="0">