Create a second page

In this lesson, you'll create a second page for your site; later, you'll create links between the pages.

There are several possible ways to create a second page. In this lesson, you'll create a second page by making a copy of the first one, so that the second page will have the same layout as the first.

Note: If you want to create a layout for the second page from scratch instead, you can use the predesigned page layouts that come with Dreamweaver, or you can use the Dreamweaver layer-drawing or table-editing tools. However, none of those options are covered in this lesson. For information about those approaches, see Using Dreamweaver Help.

In a more complex site, the best way to make sure all your pages have the same layout is to use a template. For information about layers, div tags, CSS layout, table editing, Layout mode, frames, and templates, see Using Dreamweaver Help.

The second page to create in the Trio Motors site is the news page. You'll create the news page by making a copy of the main (index.html) page, removing content that shouldn't appear on the news page, and then adding new content.

For more information on how to add and format text, see Add styled text.

To create a copy of your first page (index.html):

  1. In the Files panel, select the index.html file.
  2. From the Files panel's Options menu, select Edit > Duplicate.

    A copy of the file appears.

    Tip: If the copy doesn't appear immediately, click the Refresh button in the Files panel to make it appear.

  3. Select the new duplicated file. Pause for a moment, then click it again to make the filename editable (this is the same technique used in Windows Explorer and in the Finder).
  4. Give the new file a new name, such as news.html.

To remove unnecessary material from the new page:

  1. Open the new news.html page by double-clicking it in the Files panel.

    Look at the Document window's title bar to be sure that you're looking at the news.html file. The title bar should say "Trio Motors Home Page" and then a folder name and a filename; the filename should be news.html (or whatever you named it in the previous procedure).

  2. In the news.html page, select the car image in the main text column, and press Backspace (Windows) or Delete (Macintosh).

    The image is deleted.

  3. Triple-click the heading text in the main text column (the "Watch the ZX2002 Launch Webcast" heading) to select it. Then type a new heading, such as News.
  4. In the Files panel, locate the newsItem.txt file in your Assets folder. Double-click the file's icon to open it in Dreamweaver.

    This file contains content to be added to the main column of the news page.

  5. In the newsItem.txt Document window, select Edit > Select All to select everything in the file.
  6. Press Control+C (Windows) or Command+C (Macintosh) to copy the text.
  7. Close the newsItem.txt Document window.
  8. Switch back to the news.html Document window. Triple-click the body text in the main column on the left.
  9. Press Control+V (Windows) or Command+V (Macintosh) to paste the new text.
  10. Click before the word "Example" (in Design view), and press Enter (Windows) or Return (Macintosh) to turn the example into a separate paragraph.
  11. Click before the phrase "Home Page" (in Design view), and press Enter (Windows) or Return (Macintosh) to turn that phrase into a separate paragraph.
  12. Save your page.

 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/dreamweaver/mx2004/getting_started_en/gs_06_c3.htm