| # |
Name |
Location |
Date |
Picture |
Grade |
| 1 |
Mark |
Brooklyn |
07/11/11 |
None |
10 |
| 2 |
Rick |
Newark |
05/23/11 |
None |
7 |
| 3 |
Evelin |
Secaucus |
04/12/11 |
None |
10 |
|
In this tutorial, I will teach you how to create the effect above.
Step1: Setting up workspace.
Open Dreamweaver, and create the table shown below.

Populate the table with some data, as shown below.

Create the Style shown above the </head> tag

Click on CSS Styles icon in dreamweaver. Right click and create a new style. I named it tc. Select Background from the category and add the color shown below.

Click ok when you are finish. Change to Code view and we will modify some code. Depending on the amount of rows you created you should see something similar as shown below.

Modify the code to what i have below.

Now test your page. You should have the effect below.
| # |
Name |
Quantity |
Picture |
Buy Now |
Value |
| 1 |
Mark |
3 |
None |
Buy |
$12.00 |
| 2 |
Bob |
6 |
None |
Buy |
$40.00 |
| 3 |
Evon |
8 |
None |
Buy |
$24.00 |
Repeate the same steps for the other rows and you are finish.
Finished: Hope it was what you expected, any questions feel free to ask through email or the forums.
This Tutorial was Created By Mark
© 2011 pixeldigest.com. All Rights Reserved. |