Steps for Completing your Project Web Site

Reconstruct your Layout in Dreamweaver

NOTE: This section is quite long. I recommend taking your time and reading through all of the steps very carefully.

After you have exported all of the graphics in your layout from Fireworks (step 7) then you are ready to reassemble these graphics in Dreamweaver.

1. Open Dreamweaver and define your local root folder.

You should see all of the graphics you exported in the images folder of the Site Window.

At this point you will not have any HTML files in your site yet. You should not have any Photoshop files in your images folder.

2. Now you are ready to create a template HTML page in Dreamweaver. Go to File-->New Window to make a new HTML page.

3. Before you do anything with this page, you must save it. Go to File-->Save As (NOT Save As Template) and save this blank file as template.htm in your local root folder (we have called this folder "project" in class.)

4. Now you are ready to make a table to hold your layout together. This table is specific to YOUR layout, so it may be different than described here. This example is for the Eldertek page.

RECREATE YOUR LAYOUT WITH TABLES

1. First you want to get the dimensions of your page.

In this example, the whole layout is 633 pixels wide (you can find out your dimensions by opening your layout in photoshop and then Image-->Image Size.) This will give you the width of your canvas. This number should not be more than 800 pixels wide.

2. In this example, the navigation is down the side of the page. We want to figure out how many pixels wide this navigation bar is. Since all of the navigation buttons will have the same width, we can get the dimensions by pretending to insert an image.

Click the insert image icon in the Object palette or go to Insert-->Image and click on one of the images in your navigation bar. To the right, in the Image Preview area, we can see the dimensions are 116x24.

All of the navigation images are 116 pixels wide.

(Since you don't actually want to insert an image yet, click cancel here.)

3. Now we know that the whole table should be 633 pixels wide, and the navigation images are 116 pixels wide. That means that the rest of the page is 517 pixels, because 116+517=633

4. Now go back to your blank page in Dreamweaver (that should be saved as template.htm) to insert your first table.

START BY THINKING ABOUT ROWS FIRST.

We want to divide this layout into 2 rows, one row for the heading, and one row for the navigation and content.

Insert a table by clicking the insert table icon in the Object palette or by going to Insert-->Table

Here we will start with 1 column, 2 rows. For the Width enter the width of your cavas. Enter zero for border, cell padding, and cell spacing.

5. Click inside the first row of the table and insert your header image.

6. Now we'll work on the second row. In the second row, we will insert another table to seperate the navigation from the copy.

Click inside the second row and then insert another table by clicking the Insert Table icon in the Objects palette or by going to Insert-->Table.

This time we want 1 ROW and 2 COLUMNS. Keep the width the same as your first table, and make sure you have entered zero for border, cell padding, and cell spacing.

7. Now we want to put the navigation buttons in a table. We will put this table in the first column of the second row.

Click inside the first column of the second row and insert another table. This table will hold the navigation buttons in place. We already know that the navigation bar is 116 pixels wide. This table will hold 7 buttons, so we want 7 rows, one for each navigation button. Since this is only for the navigation, we only want 1 column.

Now our page looks like this:

8. Drag the center dividing column over to the edge of the navigation, so it is no longer in the dead center of the table.

9. Now insert a table in the second column of the second row for the copy that will be added.

Since this table is only for the copy, we just want 1 row and 1 column. The width of the table should be 517 pixels. But this time, we want to add some cell padding and cell spacing to the table to give the copy some padding for a margin.

Now our page looks like this:

10. Now it's time to go into the code and adjust the table code by hand. Dreamweaver will NEVER get the table exactly right without your help.

Right-click on the navigation table (the one with 7 rows) and choose Table-->Select Table from the popup menu. You will know that the table is selected because it will have a black line around it.

With the table selected, view the source of the HTML file. Either click Code Inspector from the Launcher panel or click View-->Code.

We want to adjust the width of the <td> tag so it is the same as the table inside of it. Here we can see that the width is 119 and the table is 116.

In this example, we want both numbers to be 116, the width of the navigation table. Change the number of the code right above the part which is highllited in black. (If no part of your code is highlited in black, it is because you didn't select the table before viewing the source.)

Now we want to do the same thing for the 517-pixel table in the second column.

Select that table by clicking in the table, and then right-click and choose Table-->Select Table.

With that table selected, view the code again (View-->Code)

Again, we have to adjust the code, because the table data widht is 514 and the table inside of it is 517. Change the <td width> to match the width of the table. In this case, it's 517.

ALIGN EACH OF YOUR TABLES TO THE TOP

Align both the navigation table and the content table to the top. You can either do this while you're in the code:

Add the attribute valign="top" to the td tag that holds the table.

<td width="517" valign="top">

Or, you can do it visually:

First select the table of the main content by clicking inside the table. Then right-click and choose Table-->Select Table.

With your table selected, click the left arrow key on your keyboard to move the cursor just to the right of the table (now the cursor should be blinking to the left of the table, and the table should no longer be selected.) With your cursor in this position, go to the property inspector and pull down the Vert menu and select Top

Now the layout looks like this:

Do the same thing for the other table:

You should align both the content table and the navigation table to the top. After you have aligned the content table to the top, do the same thing for the navigation table. Select the table, then click the left arrow key on the keyboard again to move your cursor off the table, and then choose Top in the property inspector.

This is the hardest part of designing your site. Take your time to get it right, and you'll only have to do it once.

Previous Step                  Next Step