• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Preparing a New Site > Reconstructing the Original Interface Design

Reconstructing the Original Interface Design

In this task, you'll continue reconstructing the original page design in Dreamweaver. As you remember, you had to simplify the design in the previous lesson before exporting to ensure that the page design would be as simple and low-bandwidth as possible. In Dreamweaver, you can use various tools and methods to bring back these missing design elements.

Position the insertion point in the top left corner of the Special content area where special promotion content will be inserted. Select Modify > Table > Insert Rows or Columns.

The original design had a bit of white space between the gray bar under the navigation bar and the gray lines that surround the main content cells. The gray lines around the cells don't yet exist, but you can see that if the cells had borders, they would bump up against the gray line under the navigation bar. What's needed is a bit more space between the content area and the gray bar below the navigation system.

To solve this problem, you can create an empty table row right above the content area. This table will create the space specified in the original design.

In the Insert Rows or Columns dialog, select the Rows option and chose 1 in the Number of rows drop-down menu. Select the Above the Selection option and click OK.

This steps created some desired space.

In the newly created row, drag to select both cells and choose Modify > Table > Merge Cells.

Since you just need one empty cell for extra space, you can merge two cells into one.

Repeat Steps 1 through 3 to create two more rows below the main content area for footer information.

With extra space below and above the content area, the page should look like the screenshot below.

In the higher of the two new rows you created in Step 4, type ABOUT US | PRODUCTS | RECIPES | NUTRITION | ORGANIC | EVENTS.

You created a text-based navigation aid at the bottom of the original design, so that visitors to the Jade Valley Web site do not have to scroll to the top of the page to access the navigation bar to visit a different page. This was part of the design eliminated from the Fireworks design, and you eliminated it because it will download much faster as plain text than it would as graphic images of text.

Don't worry about formatting the text just yet, including its alignment (it should eventually be center-aligned). In Lesson 5, you will use a style sheet to format all the text on the Jade Valley Web site.

Click anywhere inside the last row in the table.

This row is currently empty, but you are going to add some copyright information and also use a light gray background shading, as specified in the original design.

By clicking inside the last row, you cause the lower half of the Property inspector to display some table cell-relating settings.

In the Property inspector, type #CCCCCC, which is a light gray, in the Background color field.

Once the table row is created, you can always use the Property inspector to format the new row. Numbers of columns, rows, table width and height, cell padding, cell spacing, alignment, border thickness, color, and background color, etc., can all be adjusted in the Property inspector.

With the cursor still inside the table cell, type Copyright 1999-2005 Jade Valley. All Rights Reserved.

Again, don't worry about the formatting, because you'll take care of it using CSS in the next lesson.

You're almost finished working with the HTML in this page, but you have a lot of work to do yet to format it using CSS. However, one significant aspect of the page is still incomplete: The navigation bar buttons don't do anything when clicked. You need to add hyperlinks to the buttons.

Click the ABOUT US navigation button. In the Link field of the Property inspector, type about.html.

Dreamweaver will add a hyperlink to the graphic, pointing to about.html, which does not yet exist.


You can also enter link information in Fireworks, when you click a button symbol instance on the canvas.

Repeat Step 9 and associate each navigation button with a page in the eventual site: link PRODUCTS to products.html; RECIPES to recipes.html; NUTRITION to nutrition.html; ORGANIC to organic.html; and EVENTS to events.html.

If those pages actually existed, the navigation bar would be fully functional. If you tested the page now, without the pages existing, you'd get a The Page Cannot Be Displayed (or similar) error.

Save the page and press F12 to preview the page in a browser.

The design should look as in the following screenshot.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint