The Background-Table Combo



Get Web Design Tips and Tricks on mps-web-design.com. The Background-Table Combo topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.

Ever wondered how some websites seem to have multiple
'layers' of designs?

Although some use frames and other design techniques
to accomplish this look, I'm going to show you a simple
way to create the look without the 'headaches' of
complicated design techniques.

You'll be glad to hear that you can create a dimensional
look for your website using only two simple tools.

1. Background Images
2. Tables

Go here to view a sample web page before we begin:

http://www.webmastercourse.com/web-design-weekly/background-table-combo.htm

How to Insert a Background Image:

When you open up a blank page in Composer, html,
or any other design program, it's wise to insert
your background image first - before beginning your
design work.

This allows you to lay the foundation for the web
page from the start, and eliminates confusion as well.

A background image can be inserted the same as any
other graphic image.

In Netscape Composer, you would open a 'blank' web page,
click on 'Insert' and then 'Image'.

On your image screen, you'll see a section near the
top labeled 'Choose File'. Here you'll select the
background image from your hard drive that you would
like to use. It will probably be a '.gif' file such
as bg001.gif or bg002.gif. Whatever you named the
background image on your hard drive, you'll find it,
and insert it here.

Next, check the box where it says 'Use as Background'.
This will cause the image you have selected to become
the background for your entire web page. Click
'Apply' or 'Okay', and your page's background should now
be the image you've selected.

Where Can You Get Background Images?

The background image on my sample page was free
from http://www.free-backgrounds.com/

You can visit their website for a huge selection
of free backgrounds available that you can use
on your website.

You will save the background image to your hard
drive the same as you would any normal graphic image
or clip art. Simply hold your mouse over the
background image you would like to use, right-click
your mouse, and click on 'Save Background As'.
A screen will pop up for you to save the image
to your hard drive. You can name the image
whatever you would like with .gif being the
suffix.

Such as: mybackgroundimage.gif

Inserting Tables

Once your background image is in place, you
may begin designing with tables.

On the sample web page you viewed earlier, I
inserted one table that was 730 Pixels in width
first. I chose a color for my table that was
complimentary to the background, and then began
typing.

Next, I created a second table within the first table,
and gave it two columns or 'cells'. I resized the
column or 'cell' on the right to be only 20% of
the entire table width. This creates a sidebar
navigation section on the right. I also colored
this table white to distinguish it from the rest
of the web page.

Please remember to insert your background image
before beginning your design with tables. Some
designers place a background image, and then
begin their writing without tables. But, I
recommend using tables for the simple fact
that it helps you to organize your web pages
and keeps everything in it's rightful place
on your page when others are viewing it.

I hope you'll be able to accomplish many
new looks with these simple little tips.

Last week I was invited by the web community at the European Commission to visit them in Brussels. As you can imagine working in an organisation the size of the European Commission has some unique challenges. With over 400 websites, tens of thousands of pages and 23 languages to accommodate, it is hard to get [...]


Article Index: | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79


More Articles:


1. More bread and butter for Graphic Designers
As a graphic designer myself, I know the benefit of regular studio work, the sort of work that keeps the studio alive, not the most exciting, usually referred to, in designer's terms, as ‘bread and butter' work.In the Graphics world bread and butter work takes the form of regular, heads down, non-award winning briefs: a daily stats sheet, the club newsletter, the monthly report, stationery updates, shopping mall news papers and prices catalogues, with all the weekly bargains.These are just…

2. Building a Free or Low Cost Website
Is it impossible to build a really cheap website? Most definitely not! I am maintaining a very low cost website at the moment, in fact the site (http://www.echogecko.co.uk) cost a mere £8.00. So, even if you don’t think you can afford to make a website, if you have a bit of change in your pocket, that will be all you need.Domain NamesIf you are going to register a domain name then I suggest you shop around registrars for prices. I used 123-reg.co.uk, a UK based registrar who I found most helpful…

3. Eight Simple Steps For Enhancing Your Website
To be successful with your online business, whether you are selling your own product, services or are selling for other merchants as an affiliate, you need a Web site that focuses on that subject alone. The site must be easy to build, maintenance-free, low cost, credible, and a powerful traffic-builder and customer-converter. Having the right tools or product alone will not insure the success of your website. There are many factors to be considered when designing your site. And unfortunately, m…

4. Website Templates - Who Benefits? By Eric Lester
Are templates the shortcut of your dreams, or a complex design nightmare in the making? Find out what's really required to effectively use most website templates.Some new to the world of website hosting may find it easy to come across sites that offer the ultimate short cut to a "professional" website. Usually this shortcut will be a template. On screen the template will look great with its images, placeholder text, and unbranded graphics. The lure of the template for the novice user will be s…