Building Your First Page
This chapter is from the book
This chapter is from the book
This chapter is from the book
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:
- Close any open document windows.
The Start Page appears (
Figure 3.1
). Each of the items in the Start Page is a link.
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.
- In the Create New section, click HTML.
Dreamweaver creates the new blank HTML page (
Figure 3.2
).
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:
- Choose File > New, or press Ctrl-N (Cmd-N).
The New Document dialog appears (
Figure 3.3
), set to the General tab.
Figure 3.3 You'll probably create most of your new pages from the New Document dialog.
- 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.
- 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.
- (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
).
Figure 3.4 You can choose from the available DTDs in the New Document dialog.
- Click Create. Dreamweaver creates the new document and displays it in a new window.
)
)
TIPs
- If you want to change any of the defaults for a new document, click the Preferences button in the New Document dialog. In the resulting dialog (
Figure 3.5
), you can change the default document type for the New Document dialog; the extension used for that document; the default DTD; and the default character encoding. You can also choose whether or not you want the New Document dialog to appear when you press Ctrl-N (Cmd-N), or if you just want Dreamweaver to create a new default document.
Figure 3.5 Change the defaults for new pages in the New Document category of Dreamweaver's Preferences dialog.
- We'll cover the Templates tab of the New Document dialog in Chapter 13.
)