Lab Exercise 5:  Working with Images

Prerequisites:

1.   Save the attach LabAssignmentExercise5and6 file on your desktop.  Unzip the files into the root site folder.

2.   Define the "LMC Brentwood Burger" site in Dreamweaver.   Point the Site to your Exercise4 folder. See step-by-step demo instructions in the Topic 2 lecture presentation (slides 5-8) in defining a Web site

A.   Requirements for the hours.html pages:

1.   Attached the hours.html pages to the external cascading style sheet - mystyle.css.  Follow the step-by-step demo instructions in the Topic 4 lecture presentation (slides 26- 28) in attaching an external CSS file to a Web page.

2.   Insert Images into a Web Page:   Follow the step-by-step demo instructions in the Topic 5 lecture presentation (slides 11- 14) to insert the images into your Web pages.

3.  Resize the Image for burger1.png.  Follow the step-by-step demo instructions to resize the image in the Topic 5 lecture presentation (slides 36- 40) to resize the images.

4.   Create a class rule in the external style sheet (mystyle.css) to float an image to the right and have padding to the left by 15px.
Then apply the class rule to the image inserted in step #2.

Follow the step-by-step demo instructions in the Topic 4 lecture presentation (slides 39 - 41) to create and apply a class rule.

Below is the Class style rule and declaration:
.image-right{
float: right
padding-left: 15px;
}

5.  Save your hours.html document.

6. Preview your Web page. Attached is the sample output hours.html page.

Note: The navigation menu will be completed in step C5.

B.   Requirements for the directions.html pages:

1.   Attached the directions.html page to the external cascading style sheet - mystyle.css.  Follow the step-by-step demo instructions in the Topic 4 lecture presentation (slides 26- 28) in attaching an external CSS file to a Web page.

2.   Insert the Images into a Web Page:   Follow the step-by-step demo instructions in the Topic 5 lecture presentation (slides 11- 14) to insert the images into your Web pages.

3.  Resize an Image for burger2.png.  Follow the step-by-step demo instructions to resize the image in the Topic 5 lecture presentation (slides 36- 40) to resize the images.

4.   Create a Class rule in the external style sheet (mystyle.css) to float an image to the left and have padding to the right by 15px.
Then apply the class rule to the burger2.png image inserted in step #2.

Follow the step-by-step demo instructions in the Topic 4 lecture presentation (slides 39 - 41) to create and apply a class rule.

Below is the Class style rule and declaration:
.image-left {
float: left
padding-right: 15px;
}

5. Create an ID rule in the external style sheet (mystyle.css) to center the mapdirections.png image
Follow the step-by-step demo instructions in the Topic 4 lecture presentation (slides 68 – 75) to create and apply an ID Rule

Below is the ID style rule and declaration:

#image-map {
width: 512px;
height: 459px;
margin-left: auto;
margin-right: auto;
}

6. Create a Class rule in the external style sheet (mystyle.css) to add borders around the mapdirections.png image
Then apply the class rule to the burger2.png image inserted in step #2.

Follow the step-by-step demo instructions in the Topic 4 lecture presentation (slides 39 - 41) to create and apply a class rule.

Below is the Class style rule and declaration:
.image-border {
border: medium solid #FF0;
}

7.  Save your directions.html document.

8. Preview your Web pages. Attached is the sample output directions.html page.

Note: The navigation menu will be completed in step C5.

C.   Requirements for the index.html page:

1.   Attached the index.html page to the external cascading style sheet - mystyle.css.  Follow the step-by-step demo instructions in the Topic 4 lecture presentation (slides 26- 28) in attaching an external CSS file to a Web page.

2.   Insert the Images into a Web Page:   Follow the step-by-step demo instructions in the Topic 5 lecture presentation (slides 11- 14) to insert the images into your Web pages.

3.  Create Rollover Images for the Navigation Menu Bar. Follow the step-by-step demo instructions in the Topic 5 lecture presentation (slides 43- 38) in creating rollover images for your navigation menu. 
NOTE:

4.  Copy the navigation table from step C3 to the hours.html and directions.html pages.   This can be done by copying and pasting the navigation table from the index html to the hours.html and directions.html pages.

5. Save your index.html document.

6. Preview your Web pages. Attached is the sample output index.html page

Submit:

1. Submit a screenshot images of the Web pages displaying in your Browser on the Canvas Exercise 5 drop box.

2. Zip up your folder and submit in the Canvas Exercise 5 drop box.