Lab Assignment: Additional Inner Pages

Lab Overview

Scenario/Summary

This Part, you will use Dreamweaver to create three additional pages for the Sunhom Solar website you are creating. Just like last Part, these pages are based on the Part 2 You Decide assignment, the site map. You will continue to develop your website, adding appropriate content related to Sunholm Solar. You will continue to use the same layout and the Save As method introduced for creating copies of your content pages.

Lab Steps

STEP 1: Preparation

Open your Part 2 You Decide Assignment, the Site Structure Chart. Last Part, you created the home page and one of the inner pages for the site (About Us was suggested). This Part, you will create three additional informational pages, leaving only the form page to be completed next Part. (Although your site plan included 10-12 pages, you will only build a total of six pages in these iLab assignments.)

Locate image files that you want to include on your website. Some images are provided for you: Download Sunholm.zip. Unzip these files to your website folder. You will need them for Step 2.

Generate a list of data that you will include on your website. This may be system components and prices, service descriptions, financing rates, and so forth. You will need this for Step 3.

Start Dreamweaver. Open the home page file from last Part's iLab by pulling down the File menu, selecting Open Recent, and then selecting index.html.

When the page opens, select Site from the dropdown menus at the top, and Locate In Site. This will open the Files panel, showing you where the page you selected is located inside its website folder.

When the Files panel opens, verify that you are working in the correct site folder.

You may then minimize the panel by clicking the dropdown arrow at the upper right corner and selecting Close Tab Group.

STEP 2: Create the First New Inner Page

Referring to your site structure chart, create a copy of the current page using File, Save As from the dropdown menu. Name this file exactly what you specified in your site structure chart files list; otherwise, the links you created last Part will not work.

Dreamweaver automatically opens the correct folder for the current site. As you save the file, remember to add the quotes surrounding your filename and extension to be sure that Dreamweaver uses the extension you specify. You will notice that the folder icon in the Save As dialog box is yellow, whereas in the Files dialog box it is green; this is normal.

Update the headings and text for the current page. Make sure there is enough text to fill the page; you should have at least two paragraphs worth of solid text.

Now let's insert an image. Place the cursor where you would like the image to go. Add an image using the Insert, Image dropdown menu. Remember that you unzipped images to use to your website folder in Step 1.

The image will be inserted into your page at the place specified. If you have accidentally selected an image located outside your website folder, Dreamweaver alerts you and asks to make a copy. Click Yes to make the copy in this case.

Remember to add in the alt attribute image for every image on your page. This helps make your website accessible to users with screen readers and other nonvisual devices. It also provides a fail-safe in case the image file is lost.

The following shows where to set the Alt attribute of the image in the Property inspector.

The image is inserted into the page. If your image is in the middle of your text, position the cursor in front of the image and hit Enter to give the image a new line. You may also resize the image if you'd like by clicking on it and using the sizing arrows as in a typical application. The dimensions can also be set in the Property Inspector.

When you have enough text and images to reasonably fill the page, you may proceed to the next step. Remember that you want a visual balance: enough content so that the page doesn't look empty but not so much that it looks crowded.

STEP 3: Create a Second New Inner Page

Using the same process you followed in Step 2, create a second new inner page. This time, we'll add a Data Table. Remember to name your file using quotes and the correct file extension. Also, make sure to follow the file naming guidelines you set up in your Part 2 You Decide Assignment.

The process will be the same as you followed in Step 2 and in last Part's iLab; only the file name will be different.

Change the heading to be appropriate for the current page. Clear away the rest of the text, and position your cursor where you would like to insert the data table. The space in which you insert the table will expand to accommodate the table.

Insert, Table from the top level menu and the dropdown that results.

Insert a table with the following properties.

1. 500 pixels wide
2. Three columns
3. 10 rows
4. Uses a top header
5. Four-pixel cell padding (this adds some space inside the cells so that the table doesn't look cramped)

Now fill in the table using the data that you had prepared in Step 1. Because you selected a top header, Dreamweaver automatically centers and bolds the text in the top row. Use these headings as descriptions of your fields. Enter at least nine rows with three fields each.

Dreamweaver will resize the table cells as you type. It also shows you the table width across the top of the table. This does not appear on your completed page.

To center the table, click the table width shown across the top of the table. Adjust the align property in the Properties Inspector at the bottom of the screen.

STEP 4: Create the Third Additional Inner Page

Using the techniques outlined in Steps 2 and 3, create a third additional inner page for your site. Again, make sure that the file name is correct against your site structure chart. You may use images or data tables, whichever is most appropriate to your site and will help Sunholm Solar fulfill its mission.

Attachment:- Attachments.rar