Creating Web-Pages in Dreamweaver using Tables for Layout
One of the most common uses of tables on web-pages is not to display tabulated data, as one might expect. Rather, tables are mainly used to create the layout of a web-page and keep all of the different parts of it in place. Below is an image of the type of page we are going to be creating using tables for the layout. Click on it to view the actual web-page
In the above web-page, the gray area is actually the background of the page. The three-colored box is the table, and each of the boxes it contains (the blue at the top, the red on the left and the white on the lower right) is a table cell. By breaking the page up into different cells, we can separate different pieces of data on it. For example, the logo has been placed in the top cell, navigation links can be placed in the left cell, and the content of the page can be in the lower right cell. Writing the code for even a simple table layout such as this can get very complicated very quickly. Thankfully, Macromedia Dreamweaver has tools to automate most of the process.
Step 1: Open Dreamweaver
In Windows, click Start:Programs:Macromedia Dreamweaver:Dreamweaver. On Macintosh you can find the file in /Applications/Macromedia Studio 8/Dreamweaver.app. In either case, the icon for the file looks as such:
Step 2: Create A Blank HTML File
When you open Dreamweaver, you will be given a start page that looks like the one below. Click the link at the top of the middle column to create a new HTML page. HTML, which stands for Hyper-Text Markup Language, is the coding system used to design web-pages
A new blank page will open:
Step 3: Selecting Layout Table Mode
To start out with, the toolbar at the top of the screen is set to show the most common tools and will look as such:
Click the drop-down box where it says "Common" and select "Layout" to make the toolbar display the Layout tools:
Once the toolbar is showing the layout tools, you have three options for Table Mode - Standard, Expanded and Layout. Choose Layout which is the third button in the group of three:
Step 4: Draw A Layout Table
Select the "Draw Layout Table" tool which is the green icon just to the right of the "Layout" button you just clicked. It looks like the following:
With that tool selected, when you place your mouse cursor onto your web-page, it will become a "+" sign. Click and drag the "+" to create a box on your blank web-page:
Now is a good time to become accustomed with the property inspector at the bottom of the screen to set the width and height of the table. Click anywhere inside the table you just drew and look at the toolbar at the bottom of the page. This is a toolbar that changes depending on what you have selected. In other words, if you have text selected, you will have text formatting tools, whereas if you have a table selected, you will be able to adjust the table's options. When you have a table selected, it should look as such:
Adjust the height and width of the table to 800 and 800. This is generally a good size that allows you to fill in a reasonable amount of data without being too big for most people's computer screens.
Step 5: Center the Table
As you can, see the table is currently on the left hand side of the page. To center it, right click (control click on a Mac) anywhere inside the table and choose "Align:Center" from the menu:
Step 6: Draw Cells In The Table
Now that we have a table, we need to add table cells to it. We are going to add three:
- One across the top for the banner or logo
- One down the left for the navigation links
- One large one on the lower right for the content of the page
Select the "Layout Table Cell" tool from the tool bar. It is the blue cell next to the green "Layout Table" tool:
Now, click and drag inside the table from the upper left hand corner and draw the top banner cell in the same way that you drew the layout table:
Then, select the Cell Tool again and draw a cell on the left for the navigation section, and one on the lower right for the content area. After you are done, your originally gray table should appear all white with three cells drawn in it:
Step 7: Add Color To The Cells
To add color to a cell, you will need to select it. To do so, move your cursor slowly over the edge of it, until the edge of the cell turns red, as below:
When the outline of the cell you want to select is red, click it and you will have selected it. You will know it is selected as the outline will become bold blue and there will be small blocks on the corners and along the sides:
Now that the cell is selected, look down to the Property Inspector toolbar at the bottom of the window and click the little gray box to the right of where is says "Bg." A color palette will appear. This is where you select the background color:
I am going to choose a dark blue for the top cell, a red for the navigation cell and plain white for the content cell. Repeat the above process to add these colors to each of the cell.
NB: Even though the content cell is already white, it is important that you explicitly select it and set its color to white. This is because at the moment it is inheriting the white color from the background of the entire page. However, in a second we are going to change the background color of the page itself, and if you don't set the content cell's color to white, its color will change with the background of the page.
Your page should now look something like this:
Step 8: Change Page Background Color
At the moment it is difficult to tell the difference between the table and the page's background because both have parts that are white. We are going to change the background color of the page, so that the table looks distinct from it. In order to change the body color, we need to select the body of the page. In the bottom row of the web-page window, just above the property inspector toolbar you will see the tag selector. If you have your cursor inside one of the cells you will probably see the following listed:
This is the hierarchy of the HTML tags for the point in the page where you are. You are currently inside a table cell <td> which is inside a table row <tr> which is inside a table <table> which is in the body of the page <body>. To select the body of the page, click the <body> tag:
The Property Inspector toolbar will now show the options that can be applied to the page. Click the "Page Properties..." button:
This will bring up the Page Properties window:
In the window, click the box next to "Background Color" and select a new color for the background of the page. I am going to use a medium gray. When you are satisfied, click "OK." Your page should now look something like this (with the colors you chose:)
Congratulations, you have now completed setting the layout of your page. From here on you can use simple editing methods such as typing and inserting images to add the content to each of the sections of the page. As a final step and to show how easy further editing is, we will insert an image into the banner cell.
Step 9: Adding a Banner Image
Firstly, create the image that you would like as your banner. To do this, you can follow our Adobe Photoshop Banner Tutorial. I am simply going to use a Penn logo that I downloaded from the Penn web-site.
Firstly, save the banner image in the same folder where you have saved your web-page. Next, click in the banner cell at the top of your page to place your cursor there. now, click Insert:Image from the menu at the top of the screen:
This will allow you to browse your computer to locate the banner image you want. Once you have found it, click it to select it and then click the "Insert" button. Below, I have inserted the Penn logo:
As you can see, the logo has been placed at the top left of the cell. We would like it to be centered vertically and horizontally. To center it vertically, first select the banner cell as described in step 7 by placing the mouse over the edge of the cell so that it turns red, and then clicking. Now, in the property inspector toolbar you can adjust the settings for this cell. We are going to set it so that everything in this cell is centered vertically and horizontally. To do this, set the "Horz" drop-down menu to "Center" and the "Vert" menu to Middle:
The image will now be perfectly centered:
In this tutorial we discussed creating the basic layout and color scheme for a single web page. However, a web-site is invariably made up of many pages and it is often a chore to keep the look and feel of pages synchronized throughout a site. Our other Dreamweaver tutorial, on creating templates and managing sites, will show how to use this layout as a template (or stamp) that can be used to create pages with the exact same look and feel. What is incredibly time-saving about this system is that changes to the single template will automatically be made to all pages that were created from that template, meaning you only have to change one file in order to adjust every page in your site.
- Four Level Layout View Tutorial: http://www.fourlevel.com/dreamweaver/layoutview/
- Creating And Designing Pages: Design Page Layout: http://www.adobe.com/support/dreamweaver/layout.html
- Flexible Page Layout Using Tables: http://www.dwfaq.com/Tutorials/Tables/flexible_tables.asp