Create a neat looking webpage fast :)
Before we start on designing the page, first create a 1 pixel height 1 pixel width transparent gif and name this spacer gif. If you dont know how to create it, right click here and choose save as option , create a new folder named images and save into it.
I am using dreamweaver 4 for creating this page. You can easily do the same things on frontpage or whatever editor you are using. Open a new page , change background color to #CCCCCC from page properties (modify > page properties) and on the body tag insert this topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"
Example <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#CCCCCC" text="#000000">
Create a table with 1 coloumn and 8 rowes, %100 percent , cell padding 0, cell spacing 0 , and 0 border.
Click on the first cell and set the height of the cell to 80 and change the background color to # 9CA0B5 or any color you seem fitting.We will call this cell Header Cell . On second cell place the spacer.gif image set the height to 1 and choose #333333 . On third cell set height to 20 and change the background color to #CCCCCC . We will call this cell Menu Cell . On fourth cell place the spacer gif, set the height 1 and change the background color to #333333 .
Set the height of the fifth cell to 300 and change the background color to #F3F3F3 . We will call this Main Cell . On sixth cell, place spacer gif, set height to 1 and set background color #333333 . On seventh cell set height to 15, change background color to #999999. We will call this Footer Cell.
Right click and choose save target
Now we general outline of the page. Click on the Menu Cell and place a table with 11 coloumn. Set width of this first cell 30 so menu wont snap to border. On second cell I placed a square box as a bullet. Third cell I typed Home that will be turned into a link for front page.Font size 2 , font name Verdana . Next cell I repeated the steps for the 2nd and 3rd cell. I placed the box and typed a word that will be converted into a link. After finishing this, click on the cell of each box image and set the horizantal alignment center . I didnt set any width for any cell but feel free to play with the table.
On the Main Cell create a table with 1 row and 3 coloumns, width 700, height 300, cell padding and cell spacing 0.Set the width of the first cell 500. Click on the second cell place the spacer gif , set background to #333333 and set width 1. Now we have an horizantal line
Choose the 3rd cell , set the vertical alignment top. Hit shift+enter, this will insert a <br> tag which means a new line. now insert a table, 1 row 1 coloumn, width 150 and background color #333333 cell padding 0 , cell spacing 1 . Insert another table into this table, width %100 , bg color #EBEBEB , 3 rows 1 coloumn cell padding and spacing 0. Click in top cell and set background color to #666666. I added a sample text, font size 2 , font name Verdana . click on middle cell , place the spacer.gif and set height 1. Click in bottom cell and place another table , 1 row 1 coloumn width %100, cell padding 0 , cell spacing 2. This will prevent text from snapping to border. Sample text is placed with font size 1 , font name Arial
Copy the whole table, hit shift+enter for a new line below the table and paste the table. Again hit shift+enter and paste the table. You should have 3 tables. We will modify them later.
Download the image (right click ans save target)
Now lets go to left cell on the Main Cell and create a table inside this cell 1 row 2 coloumns, witdh %100, cell padding and spacing 0. Click the first cell of this table, set width to 207 (based on the image width I am going to use) and in this cell create another table with 2 rows and 1 coloumn, width %100 and height 300. Choose the bottom cell,set vertical alignment bottom , set height 244 (based on the image height I am going to use) and place your image. (or mine :D) On the cell above image , you can place a title text.
Now you can place your text on the right cell of this table. Now lets click on the Home text add a link to this text. This would be the same file name with the page you are working on. Similarly add links to other menu text as well. There should be a color change and underline on the text. Go to page properties . Change the link and visitied link color to #FFFFFF and active link color to #333333. Lets add a css code to our html source. In the source, after the end of </title> tag at the beggining of the source add:
| <style>
A:link {text-decoration: none;} A:visited {text-decoration: none;} A:hover {text-decoration: underline;} </style> |
Well I add a logo on header cell, and made minor changes on the site and first page of our website is ready to go :)
We will be making it more beautiful with the soon coming tutorial. (if I missed any parts please let me know, I didnt verify this tutorial yet.)
More HTML and CSS: 
