Town Website Project - Home Page

***All Graphic can be found on the shared drive. Create a folder in your document called “Half Moon Bay”. Copy all the files from the shared Drive into that folder.

• Start Dreamweaver.
• 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.)

• 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.

• 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.

• Position the insertion point in the lower left cell.
• Add a paragraph break by pressing Enter (Windows) or Return (Macintosh). Then type a sentence directing users to a useful website, such as Go to the City of Half Moon Bay website.
• Select the words “City of Half Moon Bay.”
• On the Property inspector, in the Link text box, type your link, such as http://www.half-moon-bay.ca.us/, and press Enter (Windows) or Return (Macintosh). The hyperlink appears as underlined text on your web page. Any time you select text and add a URL in the Link text box, a hyperlink is created. Hyperlinks appear as underlined text on your web page.

• Add another paragraph break at the end of the line and type another website reference, such as Go to the Pahokee Middle Senior High School's website.
• Select “Pahokee Middle Senior High School's website” and type http://www.palmbeach.k12.fl.us/PahokeeMiddleSrHigh in the Link text box.

To insert images:

• Position the insertion point on the first line of the lower left cell (above Go to the City of Half Moon Bay website).
• On the Common Insert bar, click the arrow beside the Images button and select Image. The Select Image Source dialog box opens. This dialog box displays any folders and files stored in the site root folder. Your image files you downloaded should appear in the folder.

• Select your home page image, the hmb-coast.jpg, and click OK (Windows) or Open (Macintosh). Your Look in box should be the name of your folder, not images unless you make a separate folder to place your images in.

• The Image Tag Accessibility Attributes dialog box opens. In the Alternate text box, type a description of the image, such as Photograph of the Pacific coastline off Half Moon Bay. Good web designers add alternate text to every image on site pages.

• Click OK to close the Image Tag Accessibility Attributes dialog box. Your page should resemble the graphic below:

• Position the insertion point to the right of the image and add a line break by pressing Shift+Enter (Windows) or Shift+Return (Macintosh). Note: A line break puts the insertion point at the left margin, just as a paragraph break does. However, a line break does not create a new paragraph, so there is less space above the new line of text.
• Under the image, type a caption such as The Pacific coastline looking north from Half Moon Bay. 7. Select the caption text and format it as you wish by using the Property inspector.

To insert an e-mail link:

• You can insert an e-mail link to an important office such as your town or neighborhood council. Position the insertion point at the end of Go to the Pahokee Middle Senior High School's website and add a paragraph break by pressing Enter (Windows) or Return (Macintosh). The insertion point should now be on the line below Go to the Pahokee Middle Senior High School website.
• On the Common Insert bar, click the Email Link button (envelope icon) .
• The Email Link dialog box opens.In the Text text box, type a direction, such as Send e-mail to the Half Moon Bay City Council. In the E-Mail text box, type the address, such as someone@halfmoonbaycouncil.ca.us.

• Click OK. Your page should look something like the following figure.

Add body text:

• Position the insertion point in the lower right cell of the table.
• In the Table property inspector, select Top in the Vertical Alignment pop-up menu. This aligns the cell’s contents to the top of the cell.

• Enter the following information about Half Moon Bay. Add a paragraph break at the end of each item. To group the lines with school names, add a line break instead of a paragraph break. The text to type is shown below:

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.

To preview the home page:

• From the menu bar, select File > Save.
• From the menu bar, select File > Preview in Browser and then select the browser: