Dreamweaver Lesson 4

[Completed Destinations]

  1. Start Dreamweaver.
  2. Create a new blank document and save it as destinations.htm. Save the file into the Lesson04 folder.
  3. Key in Features Destination into the Title text box.
  4. Click the View menu, point to "Tracing Image" and then "Load". The Select source dialog box opens.
  5. From the Lesson04 folder inside the "Images" folder, select table_trace.jpg. The page properity dialog box opens. Make sure Tracing Image is selected in the category list.
  6. Drag the "Image Transparency" silder to about 30%. This will lighten the image considerably. You want to see the image but not be distracted by it.
  7. In the Insert bar, use the category pop-up menu to switch to the "Layout" category. Then click the "Layout Menu" button

  8. Click the "Draw Layout Cell" button shown in the above diagram. The pointer changes to a crosshair.
  9. Place the pointer on the page then drag to draw the cell. A table is automatically drawn to contain the cell. The cell is outlined in blue to distingush it from the table, which appears in green. When you move the pointer over a cell border, the border turns red to indicate which cell you are over.
  10. Click the red border to select the cell. The cell border turns blue and handles appear, which you can drag to resize the cell. You cal also down [Ctrl] or [Command] and click within a cell to display the resize handles.
  11. Drag the border of the cell to move the cell to a new location. Move this cell to cover the plane on the left side of the page. Use the handles to resize the cell, if necessary.
  12. From the Assests panel find the graphic file of the plane graphic by dragging it to the document cell, covering the trace image.
  13. Draw six more cells to cover the Adventure Tours title, the Compass logo, and each of the four buttons across the top. To draw multiple cells without clicking the Draw Layout Cell button each time, hold down [Ctrl] or [Command] as your draw the first cell. You can then continue to draw new cells until you release the modifer key. If necessary, you can resize the cells later as you insert the graphics.

    When you draw a cell on the page, white guides appear to help you place other cells you want to align with the first cell. Use the horizontial guides to align the top of each cell.
  14. Inser the graphics adventure_tours, compass_logo, feature _button, gear, about, and trip_button in each of the other cells.
  15. Draw cells to cover the Mountain Biking, Kayaking, and Surfing images and insert biking_icon, kayaking_icon, and surfing_icon in these cells. If there is space available around the cell, you can use the arrow keys to nudge the cells to the correct position.
  16. Draw four cells for the text areas.
  17. Draw three more cells. Each cell will hold the price and the More Details graphic for that trip.
  18. In the Files panel group, click the "Files" tab. Select the student_table_project.txt file in the Lesson04 text folder. This is a text file and opens in a text-editing window.
  19. To make the text wrap within the windo, click "View Options" on the document toolbar and select "Word Wrap" from the "View Options" menu, as shown below:

  20. Select and copy the first pargraph. Return to your destinations.htm page (using the tab at the top of the Document window), place the insertion point in the top text cell, and click "Paste" The text is copied to this cell. Adjust the cell size to accomodae the text by clicking and dragging the cell border. You might also need to change the font and font size. The tracing image uses Verdana for the font and 10 pixels for the font size.
  21. Return to the text document and copy the remaining text into the other text cells you've drawn on the page. Use the Assets panel to inser the details image in each of the price cells.
  22. When you have copied and pasted all of the text from student_table_project, close the text file.
  23. Resize and move the cells to make your page look similar to this page.
  24. To hide the tracing image as you fine-tune your page, click the [View› Tracing Image› Show].

[Completed Rafting Tours]

  1. In the files panel open the rafting_tours.htm file in the Lesson04 folder. Make sure you are in Layout mode. This page has some text and graphics in the cells.
  2. Click the rafting image cell border to select the cell. Blue handles appear around the cell.
  3. Drag the cell to a new location or use the arrow keys to move it. Move the cell veritcally within the table. Remember, the arrow keys move the cell 1 pixel at a time. Hold down the shift key to move the cell 5 pixels at a time.
  4. Draw a new cell below the rafting image for a caption. Make it as wide as the image. Key Rafting the Rockies in the cell. Format the text as "Heading 4".
  5. Select the cell in which you added the caption.
  6. Clikc the "Bg color" picker in the Property Inspector and use the eyedropper to select the yellow color in the raft.
  7. Select the caption cell and the choose "Center" from the Horz list menu on the Property inspector. This centers the text horizontally in the cell.
  8. Change the Vert setting to "Middle". This centers the text vertically in the cell.
  9. Select the main text cell.
  10. Click "Autostretch" on the Property inspector or click the number "235" at the bottom of the column to open the column header menu choose "Make Column Autostretch".

[Completed Biking Table]

  1. Open a new document and save it as biking_table in your Lesson04 folder. Title the page Montana Mountain Biking.
  2. On the Insert bar, make sure the "Layout" category is selcted. Click the "Standard Mode" button.
  3. Open the mt_biking,txt file from the Lesson04/text folder. Make sure the Word Wrap feature is on.
  4. Copy the Mountana Mountan Biking header and paster it at the top of your page. Change the header the "Heading 3" style.
  5. Copy the paragraph from mt_biking.txt and close the text file. In the document press Enter after the header, then paste the paragraph into your page.
  6. Place the insertion point after the body of the text. Press Enter to create a new paragraph.
  7. Click the "Insert" menu and then click "Table".
  8. Make the following changes in the Table dialog box as shown in this figure:

  9. Key Ride Name in the first cell of the first row; then press "Tab" to move to the next cell. Key Type press "Tab" again, key Location press "Tab" and key Rating.
  10. Click to the right of the table and then press Enter. The insertion point is a new paragraph.
  11. Click in the [Insert][Table Objects][Import Tabular Data]
  12. Click "Browse" and navigate to bikingtable.txt to Leeson04/text folder.
  13. In the Import Tabular Data dialog box, set the delimiter to "Tab", click the "Set" option under Table Width, enter 500 in the text box, click the arrow on the Percent box, select "Pixels", make sure "(No Formatting)" is selected in the Format Top Row box, and that "1" is in the border box.
  14. Click OK. The data is imported and a table is built for you with the settings you chose.
  15. Select all the cells in the second table by dragging across the cells. Start in the upper-left cell and drag to the lower-right cell. The selected cells are displayed with a black border. To be cut or copied, the selcted cells must form a rectangle.
  16. Click [Edit][Copy].
  17. Click in the first cell of the second row of the top table. This where the copied cells will be pasted.
  18. Click [Edit][Paste].
  19. Select one or more cells in the second table, but not an entire row or column.
  20. Click [Edit][Clear]. This removes cell conten but leaves the cell intact.
  21. Drag across all the cells in a row of the second table to select the row.
  22. Press "Delete", The row and all its contents are deleted.
  23. With the second table selected, press Delete to remove the second table.
  24. Selec the "Location" column in the table.
  25. Click the arrow in the Horz vox in the Property inspector and set the horizontal alignmnet to "Center".
  26. Select the "Rating" column and change the horizontal alignment to "Right".
  27. Select the top row of cells by positioning the pointer at the left margin of the row and clciking when the pointer changes to a selection arrow.
  28. On the Property inspector, click the "Bg" color box to open the color picker.
  29. Select a light gray color. The background color of the first row of cells changes accordingly.
  30. Click [View][Table Mode] and make sure "Standard Mode" is selected. Select the table, click [Commands][Sort Table].

  31. Make sure the following options are set in the Sort Table dialog box.
    1. Sort by: Select "Column 1"
    2. Order: Select "Alphabetically". Choose "Ascending".
    3. Then By: Leave blank.
    4. Sort Includes First Row: Leave unchecked
    5. Sort Header Rows: Leave unchecked
    6. Sort Footer Rows: Leave unchecked
    7. "Keep all row colors the smae after the sort has been completed" unchecked.
  32. Click OK.