Topic 10:  Creating and Using Templates

1.   Save the attach AssignmentExercise10.zip folder on your desktop.  Unzip the files into the root site folder.

2.   Define the "LMC Brentwood Burger" site in Dreamweaver.   See the step-by-step demo instructions in the Topic 2 lecture presentation (slide 5-8) in defining the Web site root folder in Dreamweaver.

Requirements

1.    Attach and link the skeleton.html to the external cascading style sheet (mystyle.css).  The skeleton.html will be use to create the template for the Web site.  See the step-by-step demo instructions in the Topic 10 lecture presentation (slides 66-69) in attaching and link a CSS file to your Web page.

2.    Create a Template:   Follow the step-by-step demo instructions in the Topic 10  lecture demo presentation (slides 12- 15) in creating the template page from the "skeleton.html" document.  The template will contain the company banner, navigation menu and an editable region for the page content.  Add the title “LMC Brentwood Burger” to the template page. Save the template as frontpage.dwt.

3.  Set an Editable Region in a Template:   Follow the step-by-step demo instructions in the Topic 10 lecture demo presentation (slides 19- 24) in setting up an editable region in the template for the content area.

4.  Create a Page from a Template:   Follow the step-by-step demo instructions in the Topic 10  lecture demo presentation (slides 29-37) in creating all the Web pages for the site:

a.   Use the template to create the index.html page:  See slide 32

b.   Use the template to create the menu.html page:  See slide 33

c.   Use the template to create the hours.html page:  See slide 34 

d.   Use the template to create the directions.html page:  See slide 35 

e.    Use the template to create the feedback.html page. See slide 36 

f.   Use the template to create the contact.html page.  See slides 37- 38.   See attached web page output for the contact.html

5.  Edit a Template and Update Your Web Site:   Follow the step-by-step demo instructions in the Topic 10  lecture demo presentation (slides 41- 45) in editing the template by changing the company logo image.

6.  Edit the "navigation" library item by inserting the link for the navigation buttons.  See the demo instructions in the Topic 10 lecture presentation (slides 34- 36) in updating the library item.

7. Save all your web pages.

8.  Review your Web paged in your Browser.   Test the navigation menu and links.   See the attached sample output of the Web pages- index.html, menu.html, hours.html, directions.html, feedback.html and contact.html

Submit:

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

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