Town Website Project

Town Website Project - Home Page

Start Dreamweaver 8.
From the menu bar at the top of the screen, select Site > New Site. The Site Definition dialog box opens. Make sure the Advanced tab is active.
In the Advanced Category list, make sure Local Info is selected.
In the Site name text box, type Half Moon Bay.
Beside the Local root folder text box, click the Folder icon. Navigate to the location on the hard drive where you stored your root folder.
Click OK to define your local site.

Building the Home Page

There are many considerations when designing web pages. In this project, you focus on just the basic
design elements needed to build this website. One basic element is the background color of the pages.
Adding color to the background can add interest and help maintain the consistency and identity of a
site. Select the background color with care, however, so the combination of background and text color
makes your text easy to read.

To create a new document for the home page:

Start Dreamweaver 8.
Select File > New from the menu bar. In the New Document dialog box, select Basic Page and HTML, and click Create.
Select File > Save from the menu bar. The Save As dialog box opens. It displays the folders in the site root folder. You should save the file in the root folder.
Type index in the File name box. Dreamweaver will automatically assign the extension of .html to your page. When you use the file name index, Dreamweaver automatically specifies that page as the home page. Then you don’t have to go through a separate step to specify the home page.
Click Save. The filename now appears on the tab of the Document window.

To set a page title for your document:

In the Title text box (located in the Document tool bar), type Half Moon Bay Home Page.
Press Enter (Windows) or Return (Macintosh). When your page is opened in a web browser, this title will appear on the title bar of the browser window. It is also the title used when the page is added to a browser’s Favorites (Microsoft Internet Explorer) or Bookmarks (Netscape Navigator) list.

To change the background color:

From the menu bar, select Modify > Page Properties to open the Page Properties dialog box.
From the Category list, select Appearance.
Experiment with the background color. Click the Background color box to open the color picker. The pointer changes to an eyedropper.
Click a color with the eyedropper. As you select a color, click Apply to preview how your selection will appear on the page. The sample project uses the default background color (white). Feel free to choose another color.
When you are satisfied with the background color, click OK to close the Page Properties dialog box.

To insert a table:

Many web pages use tables to control the location of text, images, and media on the page. The home page for the Half Moon Bay site illustrated in this project uses a table with two rows and two columns to hold text and images. Later in the project you will build a separate table to hold the navigation buttons.

To insert a table:

Place the insertion point at the top of the Dreamweaver document.
On the Common Insert bar , click the Table button . The Table dialog box opens.
Enter the following settings: - Rows: 2 - Columns: 2 - Table width: 97% - Border thickness: 0 pixels (Leave the other text boxes in the dialog box blank.)

Table Format

Click OK. The table appears in the document.
Move the pointer to the left edge of the top row. Click when the pointer appears as an arrow pointing to the right. The entire top row is selected.

In the Property inspector, click the Merge Cells button.

Merge Cells

The two cells in the top row are merged into a single cell.

To insert text and hyperlinks:

Position the insertion point in the top cell.
Type Half Moon Bay.
Select the text and change its formatting attributes by using the Property inspector.
Experiment by clicking the format, size, text color button, font style, and alignment boxes. Note: If the Property inspector isn’t open, select Window > Properties from the menu bar. The sample Half Moon Bay home page title has the following settings:
- Format: Heading 1
- Size: None
- Color: Dark red
- Font: Verdana, Arial, Helvetica, sans-serif
- Alignment: Left-aligned.

Using the Property inspector, change the text style, size, color, and alignment as you prefer. Also think about whether you would like to use bold or italics.