A ARTE DE GUACIRA SAMPAIO ROCHA 2008

"Joining" tables with Image and Sound

 

 
 
 

 

This intends to be a 'step by step' on how to use a so simple resource as creating tables, to obtain an interesting result, that looks like an 'image', with the sound and color of your choice, just like the one that is presented above. This table was idealized by a very dear virtual friend of mine, Ana Rolim - the image (GIF) is from my own creation and the sound (wav) was edited and prepared by myself.

Follow the steps:

1
The table above was made with a 40px border, one column and one row. The borders colors were defined straightly in the code (click "View/Code" in your browser's menu bar to visualize it )

2
Now you have to nest
three other tables in this one (one inside the other), with the same border volume than the first one you made: 40px (see the code). To make easier your work, take a look on the settings of the tables above:
-first table: " WIDTH: 40 percent (this width can change and be adapted to the result you want to have, being bigger or smaller than this); border: 40 pixels; centralized"
-second table (and the other two) : "WIDTH: 100 percent (to perfectly nest the tables); border: 40 pixels; centralized"

3
Insert an image of your choice in the center of the last table, and insert a background sound for the web page, if you want to.
Take care to set the same background (or even no background color or image at all) for the tables cells and the web page you are working on, if you want to have a similar effect than ours. Alternate the borders colors to dark and light ones (see illustration above)

4
A simple and alternative option to produces this work, is simply "View code " of this document itself, "Copy" its tables code, as it is presented to you, "Paste" in a HTML software editor (or even in the tab "Origin" of your Outlook Express 5x, if you want to send it inside a message), and then "Edit" the code, making all changing you want to, like borders widths, colors and, obviously, sounds and images.

Have fun!

Guacira Sampaio Rocha
rights reserved

back to tutorials


home
Página 2
links
imagens digitais
guest book

premios
A ARTE DE GUACIRA SAMPAIO ROCHA 2008