Featured Destinations

***All Graphic can be found on the shared drive.  Create a folder in your document called “Featured Destinations”.  Copy all the files from the shared Drive into that folder.

Using Tracing Images

It’s possible you will be given a page design that someone else has designed in a graphics program such as Macromedia FreeHand, Adobe Photoshop, or QuarkXPress. If you can convert the page to a JPEG, GIF, or PNG graphic, you can import that image into Dreamweaver and use it as a guide (a tracing image) to re-create the HTML page. The tracing image is visible only inside Dreamweaver. It is not embedded in the HTML code and will not be displayed in the browser. While you’re using a tracing image, the background color or background image of your page will be hidden, but it appears in the browser.

Up to this point, you’ve had little control over the design of your pages. You’ve wrapped text around a graphic and indented the text on the page, but these options are very limited and don’t always provide the desired effect. Tables can give you more control.

Tables in HTML are very similar to tables in a spreadsheet. Tables in HTML were actually meant to be a means of presenting information in a very organized manner; they contain rows and columns where you can place data. But in HTML, tables also provide the way to design your pages with some control over placement of text and graphics. You can use the cells of a table to put graphics in a location other than just the next place vertically on the page, or you can use a cell to create a sidebar for your text.

In the next exercise, you will build a Web page based on the tracing image you just imported. The graphics you need for this exercise are located in the graphics file you downloaded earlier. If you defined your site, you should see these graphics in the files panel located at the right of the document window:

File Panel

You do not have to exactly match the template—just use it as a guide to help you place the text and images.


Layout Mode

Draw Layout Cell

Draw six more cells to cover the Adventure Tours title, the Compass logo, and the four buttons across the top. To draw multiple cells without clicking Draw Layout Cell more than once, hold down Control (Windows) or Command (Macintosh) as you draw the first cell. You can then continue to draw new cells until you release the modifier key. When you draw a cell on the page, white guides appear to help you place other cells that you want to align with the first cell. Use the horizontal guides to align the top of each cell. The cells should resemble the outline in red below:

Table Outline

As you design your pages in Layout view, you will want to move or resize cells or add new cells to add more content. You can also add a background color to each cell or to the table. A layout cell cannot overlap other cells and cannot be moved outside the layout table.