Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Building Your First Page in Macromedia Dreamweaver 8

  • Print
  • + Share This
  • 💬 Discuss
After you've set up your local site, you can begin filling the site with pages. To do that, you'll need to create a page, give it a title, add some content to the page, and save it. To check your work, you should view the page in one or more Web browsers before you upload it to your Web server. Luckily, Dreamweaver makes it easy to view your work in different browsers. This chapter will help you get started building your website in Dreamweaver.

After you've set up your local site, you can begin filling the site with pages. To do that, you'll need to create a page, give it a title, add some content to the page, and save it. To check your work, you should view the page in one or more Web browsers before you upload it to your Web server. Luckily, Dreamweaver makes it easy to view your work in different browsers.

If you need a little inspiration, Dreamweaver offers a variety of sample pages that you can use as a jumping-off point for your own creative efforts. You can also choose from a variety of page designs created entirely with CSS.

In this chapter, we'll also briefly discuss how you add text, links, and images to your pages, although we go into those subjects in much greater detail in Chapters 4, 7, and 8, respectively.

Creating a New Page

The first HTML page that you create in a new site should be the index page, which is the page that a Web browser loads automatically when a visitor goes to the site. Depending on how you are naming pages on your site, the index page could have a variety of names, but it is most often named index.html. After you create the index page, you will want to create other pages for the site.

As you'll see is often the case with Dreamweaver, there is more than one way to do the task at hand. You can create a new page using the Start Page, or you can use the New Document dialog.

Using the Start Page

The Start Page is the fastest way to create a new HTML page. It appears when you have closed all other document windows.

To create a new page from the Start Page:

  1. Close any open document windows. The Start Page appears ( Figure 3.1 ). Each of the items in the Start Page is a link.
    03fig01.jpg

    Figure 3.1 Click the links in the Start Page to open a recent item, create a new item, or create a new item from Dreamweaver's sample pages.

  2. In the Create New section, click HTML. Dreamweaver creates the new blank HTML page ( Figure 3.2 ).
    03fig02.jpg

    Figure 3.2 A brand-new page in Dreamweaver, showing the Design view.

Using the New Document dialog

The New Document dialog gives you a bit more flexibility than the Start Page when creating new documents. Like the Start Page, you can create several different types of new documents, plus it allows you to choose the doctype of the new document.

To create a new page from the New Document dialog:

  1. Choose File > New, or press Ctrl-N (Cmd-N). The New Document dialog appears ( Figure 3.3 ), set to the General tab.
    03fig03.jpg

    Figure 3.3 You'll probably create most of your new pages from the New Document dialog.

  2. Click to choose one of the items in the Category column. The second column changes to show the available items for the category you selected. The name of this column also changes to match the name of the category.
  3. Click the item you want in the second column. If Dreamweaver has a preview image of the item you selected available, it will appear in the Preview pane (previews are mostly available for sample pages and templates), with its description below the preview area.
  4. (Optional) Some of the kinds of documents you can create in this dialog allow you to declare their doctype, and for those the Document Type (DTD) pop-up menu will be available. Most of the time the default choice will be fine, but if you want to you can change the doctype from the pop-up menu ( Figure 3.4 ).
    03fig04.jpg

    Figure 3.4 You can choose from the available DTDs in the New Document dialog.

  5. Click Create. Dreamweaver creates the new document and displays it in a new window.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus