BOOTLOG 006 11/10/05



Having dealt with the basic dos and don’ts of web page design it’s time to get down to the nitty-gritty. If you have elected to use a standard off the shelf template most of the work has already been done for you and all you have to do is fill in the blanks or change text and images from the supplied defaults.


It’s quick and easy and with the available font and colour customisations it’s possible to produce something quite distinctive -- bearing in mind what I said in part 5 about not overdoing it -- however, unless you make changes to the actual layout it will still look like a lot of other sites. The solution is to change the template by moving things around or deleting them, and adding your own personal touches.


In order to do that it helps to know a little about the mechanics of web page construction. It can get very involved but for newcomers and the sake of simplicity it all boils down to Frames and Tables. In fact I would avoid Frames because they can be tricky customers, so we’ll focus our attention on tables, which are the basic building blocks of many web sites (including this one). They are quick and easy to use, very flexible and unlikely to cause problems when displayed on different browsers and platforms.


If you are familiar with the table feature in Word then you will find web page tables very easy to use. Essentially a table is one or more linked boxes into which you can put text, pictures, graphics or anything else you want to appear on your web page.  Tables give a web page a structure or framework and make it easier to develop a theme or template that can be used across all of the pages in a web site. If you are concerned that tables will impose a rigid box like structure on a web page there’s no need to worry. The table borders and outlines can be made invisible so they do not show up but they continue to anchor the page elements, so they appear exactly where you want them to be, and stay there.


If you have never used a table before and you have Word on your PC them it’s worth spending a few minutes playing around with one, to get a feel of how it works and what they can do.


In Word go to New on the File menu select the General Tab and click Web Page. A blank page with a flashing cursor appears, move the mouse pointer to the Table icon (a little over halfway along the Standard toolbar -- it looks like a little table) and a grid will be displayed. Notice if you click, hold and drag the bottom right hand square you can expand and reduce the size of the grid, however, for now just create a simple table comprising three vertical columns and two horizontal rows (2 x 3 Table) by highlighting the appropriate number of squares (i.e. 3 across by 2 down) and a table appears on the page with a flashing cursor in the top left hand box or ‘cell’.


If you now tap away on the keyboard you will find the cell expands to accommodate the text, both horizontally and vertically (if you hit the Return key). Note that all of the usual word processing options are available so you can specify the font, size, style and colour of the characters you’ve entered.


When you have keyed in a few lines in the first cell highlight the block of text, click, hold and drag it into another cell and the cell will change size to accommodate the pasted text. Now hold down the Ctrl key and do it again and this time you’ll see you can copy blocks of text into other cells -- handy for creating templates. Here’s something else to try; move the mouse pointer so that it is over the border or column or row separator lines. The pointer changes to a pair of parallel bars and you’ll find you can click and drag the lines to change the shape of the table or the cells it contains. Here’s another trick worth remembering. Highlight two adjacent cells -- it doesn’t matter if they’re side by side or on top of one another -- then go to the Table menu and select Merge Cells. The two highlighted cells now become one. You can also Split a highlighted cell on the same menu with the option to divide a cell vertically or horizontally.


Once you have got the hang of creating, sizing, merging and splitting cells you can try your hand at positioning text and images within a cell so that it looks presentable. Options vary but normally you can highlight the text block or graphic and use the centre or align tools to move the item around. Alternatively you can use paragraph formatting controls to put spaces before or in front of the element you are positioning, to move it away from the table outlines. Better still; make the borders of the table invisible, so the text or graphic appears to float on the page (but remain within the confines of it’s now invisible cell). Table borders can be ‘hidden’ or disguised by making the lines the same colour as the background.


The last table tip concerns background colours and shading and in Word and most web authoring programs this is accomplished by highlighting the cells or tables you want to change then right click into the highlighted cell(s) the context menu that appears will usually have a Properties or Borders’s & Shading option that lets you apply colour, texture or background images to the chosen cells or table.


Tables can free you from the constraints of a template and allow you to radically alter the design and appearance of a web page to suit your needs and once you’ve got used to how they work you might want to use them to create your own web pages from scratch.  



Part 7 -- Hyperlinks

1 2 3 4 5 6 7 8

Search PCTopTips 



Boot Camp Index















Top Tips Index

Windows XP

Windows Vista

Internet & Email

Microsoft Word

Folders & Files

Desktop Mouse & Keyboard

Crash Bang Wallop!

Privacy & Security

Imaging Scanning & Printing

Power, Safety & Comfort

Tools & Utilities

Sound Advice

Display & screen

Fun & Games

Windows 95/98/SE/ME






 Copyright 2006-2009 PCTOPTIPS UK.

All information on this web site is provided as-is without warranty of any kind. Neither PCTOPTIPS nor its employees nor contributors are responsible for any loss, injury, or damage, direct or consequential, resulting from your choosing to use any of the information contained herein.