 |
Intro Browser The Page Tags Elements Tables Layout Perfection  
|
|
Now we come to the place where we will use our skill to push HTML where it was never intended to go -- into fine layout control. There are expensive software programs that can do it, but you can do it too, with Notepad, SimpleText, or a WebTV. All you need are two of the concepts on which we've meditated: tables, and image height and width attributes.
Tables are the first key to control because they allow the screen to be divided into discrete sections, and because they can be set (or pushed) to specific heights and widths. They can also be nested inside one another. This allows you to make a large division of the screen into major areas (cells), and then to place a table inside one (or more) of the cells, in whose cells you will place images or text.
The Net4TV main screen is a good example of this (if you've forgotten what it looks like, click on the logo in the sidebar). There are two columns of "channel icons" along the left side, but the critical placement is the animated GIF that plays on the TV screen.
To see the structure of the Net4TV main screen, with the images removed and the table borders turned on, CLICK HERE! (Don't worry, there's a link to get back.) Note that the width of the borders changes the alignment by a few pixels.
To get all of these elements in the right place, we first make a "page" table the size of the WebTV screen* by using width=544 height=420 attributes in the <TABLE> tag. This gives us a frame in which to build, and also makes sure that if computer users have a larger or smaller screen size, our images will still line up correctly on top of the background.
The page table has one row with two data cells running the full height of the screen. In the left cell is another table called the "channels" table. In its data cells are the icons for the various main sections in Net4TV. The table is set to 180 wide to keep the columns of channel icons together and close to the left edge.
The right hand cell of the page table has a table inside it called the "main" table. Here, the trick is to line up the animated GIF over the TV screen in the background and to keep it from moving off the screen if computer users re-size their browser window. The main table has four rows of two data cells each. The height of the rows is used for vertical positioning, and the width of the left cell determines the horizontal positioning.
WebTV has a very useful set of table attributes, ABSHEIGHT and ABSWIDTH, which determine the absolute size of a table or its cells. The cells will maintain their ABS size with or without data inside, and any data that is too large will simply be truncated. These WebTV-only tags are ignored, however, by the computer browsers. Tables set to a particular size with WIDTH and HEIGHT attributes will grow to accomodate larger content, and despite size tags, a row or column with nothing in it will sometimes "collapse" -- not hold the size that you set it.
So to keep this from happening, we use the characteristic we discussed in the "Elements" meditation -- the ability to resize a graphic by changing its HEIGHT and WIDTH attributes.
 We use a transparent ("blank") GIF with a size of 1x1 pixel. That same GIF is being used to indent the start of this paragraph by 35 pixels: we just place the image command at the beginning of the paragraph and set its height to 0 and width to 35, then start the text. Although you can indent with non-breaking spaces, the one-dimension image is the only way to get an exact pixel size no matter what the text size is.
The one-dimension GIF is used in our Net4TV screen to "push" the cells to the height and width that we want. It can also push an image or text over by a few pixels within a cell for fine placement control. You can use the same image many places in a single page, with different dimensions set for each instance.
Don't have a transparent GIF handy? Not to worry -- this "one dimension" trick works with ANY image. There are not three but six "Zen" images here -- the three that you can see, and just before them (to their left), three with their heights set to zero that are being used to push the ones you see over in 50 pixel increments. You can also use an ALIGN=RIGHT attribute in the image commands and 0-height images to push content from the right.
You can think of tables as a "scaffolding" that you can use to give a framework to your page, and the one-dimensional image as a set of "props" than can be used to push elements around with fine control. With these two very simple tools, you can create some amazing web page layouts.
Dudette |