Ades Design Blog

Website Design

Note: This tutorial is done by Macromedia Dreamweaver MX.

1. I have been designing pages now for 3 years already, and it became somehow repetitive. Especially the structures of the websites. So I thought I would share this with you, I hope you will benefit from this tutorial.

Tables… Tables are very important in designing websites. Almost all the content are put inside the tables. This tutorial deals with tables. We will basically create tables, and determine what will be put in what column and row.

Let’s start the tutorial.

2. Most of the time I create a table with 1 Column and 4 rows, Cell padding I always keep to 0, since this is the most outer table it is better to keep cell padding to 0. Cell spacing we can set to 1, but that is also not recommended. I keep it to 0. Width of the table most of the time I set to 760 to 780, since we want it to be 800×600 resolution compatible.

Result:

row 1
row 2
row 3
row 4

3. Why we have 4 rows and 1 column. OK, I am going to explain that:

  • Row 1: For the Website Title image or Logo
  • Row 2: For the Horizontal Menu
  • Row 3: For the Content with Left Menu
  • Row 4: For the Copyright and Bottom menu

4. Before we rush to fill up the table with images and texts. There is one more table to create. That table we are going to create inside the row 3. This time we create a table 1 row by 2 columns as shown below.

Now set the width of the side column to 160 pixels and right side leave it blank. It should look like below. In the left side we will put a menu, and right side will be a text.

row 1
row 2
row 3
left side = 160  right side *
 row 4

5. I guess that is all about structuring pages for your new website. Now go ahead and fill it up with your design. Menus, texts, and images…

Here is the example of one of my works which exactly follows this structure. http://www.iiu.edu.my/drstadd/

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>