Every Web site begins with a single page. The front page — or home page — of your site is a good place to start. Dreamweaver makes it easy: When the program opens, it automatically creates a new page. To create another page, simply choose File --> New.
 | Creating a new page to start a Web site may seem obvious, but consider this: You may want to create a bunch of new pages before you get too far in your development, and you may even want to start organizing the new pages in subdirectories before you have anything on them. This process enables you to organize your pages before you start setting links. After all, you can't set a link to a page that doesn't exist. So, if you plan to have five links on your front page to other pages in your site, go ahead and create those other pages, even if you don't put anything on them yet. |
If you're ready to plunge right in, click to insert your cursor at the top of the blank page and type a little text. Type anything you like; you just need something that you can format. If you have text in a word processor or another program, you can copy and paste that text from the other program into your Dreamweaver page. After you enter the text on your page, dive into the following sections, where you can figure out how to play around with formatting your text.
Creating a headline
Suppose that you want to center a line of headline text and apply a heading tag to make it large and bold. To create a headline, follow these steps:
1. Highlight the text you want to format.
2. Choose Text --> Format --> Heading 1.
Heading 1 is the largest option, Heading 2 is the next largest, and your choices go all the way down to Heading 6, the smallest heading size.
3. With the text still selected, choose Text --> Alignment --> Center.
The text automatically centers.
Alternatively, you can use the Property Inspector to apply the same formatting you applied using the drop-down menus from the menu bar. Choose Window Properties to open the Property Inspector.
Indenting text
Type a little more text after your headline text. A single sentence is enough. To indent that text, follow these steps:
1. Highlight the text you want to indent.
2. Choose Text --> Indent.
The text automatically indents.
 | If you want to continue adding text and you don't want it to be indented, choose Text --> Format --> None to transition back to plain text mode without the indent. |
If you just want to indent a line or two, the Indent option in the Text menu is ideal. If, however, you want to create the effect of a narrower column of text on a page, an HTML table is a better option.
Adding images
Adding an image to your Web page is simple with Dreamweaver. The challenge is to create a good-looking image that loads quickly in your viewer's browser. You can use any image on your Web site, as long as it's in GIF or JPEG format.
 | You need to do two important things before inserting an image on a Web page. First, save your HTML page in your Web site's folder on your hard drive. This step is important because Dreamweaver can't properly set the path to your image until it can identify the relative locations of the HTML page and the image. Until you save the page, Dreamweaver doesn't know what folder the page will be in. |
For this same reason, you need to make sure that the image file is where you want to store it on your Web site. Many designers create a folder called Images so that they can keep all their image files in one place. If you are working on a very large site, you may want an Images folder within each of the main folders of the site.
 | An important thing to remember is that if you move the page or image to another folder after you place the image on your page, you break the link between the page and the image, and an ugly broken GIF icon appears when your page is viewed in a browser. If for some reason you do end up breaking an image link, simply delete the broken image icon that appears in its place and insert the image again by following these steps for linking an image to your Web page: |
1. Click the Image icon in the Objects panel.
The Image dialog box opens. (If the Objects panel isn't visible, choose View --> Objects to display the Objects panel in the Dreamweaver work area.)
2. Click the Select button.
A dialog box opens, displaying files and folders on your hard drive.
3. Navigate to the folder that has the image you want to insert.
4. Double-click to select the image you want.
The image automatically appears on your Web page.
If you haven't already saved your page, a warning box appears to tell you that Dreamweaver cannot properly set the link to the image until you save the page. You see this message because Dreamweaver needs to know the location of the HTML page relative to the image to create the link. If you see this box, cancel the step, save your page by choosing File --> Save, and then repeat the preceding steps.
5. Click the image on your Web page to display the image options in the Property Inspector.
Use the Image Property Inspector to specify image attributes, such as alignment, horizontal and vertical spacing, and alternative text.
The Image Property Inspector dialog box enables you to specify many attributes for images that you use in your Web site.
|