Final Project:  Designing a Web Site with CSS

Prerequisites:

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

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

Requirements

1.   Create a blank template.  From the Main Menu, select File and select New.   Select New Documents and then HTML template.   Click on Create button

2.   In the Properties Inspector, enter the title for the template page "LMC Brentwood Burger".  See the step-by-step demo instructions in the Topic 2 lecture presentation (slides 14- 15) in adding a title to the web page.

3.   Save the blank template as "template.html".   Select File and then Save As Template

4.   Attach/ link the template page to the external CSS (mystyle.css).  See 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.

5.  Create the "outsidecontainer" AP DIV tag in the template.  See the step-by-step demo instructions in the Topic 11 lecture presentation (slides 15- 17) in creating a AP DIV container

a.  Create a DIV tag container which will "house" the parentcontainer, banner, navigation and content AP DIV layers.  

b.  Assign the ID rule "outsidecontainer" defined in the mystyle.csss

6.  Create the "parentcontainer" AP DIV in the template.  See the step-by-step demo instructions in the Topic 11 lecture presentation (slides 19- 21) in creating a parent AP DIV container

a.   Inside the DIV tag "outsidecontainer", insert a nested AP Div.

b.   Assign the ID rule "parentcontainer" defined in the mystyle.csss.

7.  Create the "content" AP DIV in the template.  See the step-by-step demo instructions in the Topic 11 lecture presentation (slides 19- 21) in creating a parent AP DIV container

a. Inside the AP DIV "parentcontainer", insert a nested AP Div. 

b.   Assign the ID rule " content" defined in the mystyle.csss.

c. Insert an editable region for the "content" AP Div.   Name the region as "content".  See 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.

8.  Create the "navigation" AP Div in the template.  See the step-by-step demo instructions in the chapter 13 lecture presentation (slides 53- 59) in creating a nested (child) AP Div container

a. Inside the AP DIV "parentcontainer", insert a nested AP Div.  

b.   Assign the ID rule " navigation" defined in the mystyle.csss.

c.  Insert the navigation library item into the "navigation" AP Div container.  See the demo instructions in the Topic 10 lecture presentation (slides 34- 36) in updating the library item.

9.  Create the "banner" AP Div in the template.  See the step-by-step demo instructions in the chapter 13 lecture presentation (slides 53- 59) in creating a nested (child) AP Div container

a. Inside the AP Div "parentcontainer",  insert a nested AP Div.  

b.   Assign the ID rule " banner" defined in the mystyle.csss.

c.  Insert the RevisedCompanyLogo.png image into the "banner" AP DIV container.  See the step-by-step demo instructions in the Topic 6 lecture presentation (slides 9-19) in inserting an image.

10.  Save the template as "template"

11.  Create the following Web pages from the template page.  See the step-by-step demo instructions in the Topic 10 lecture demo presentation (slides 19-24) in the creating the Web pages from a template and adding the content in the template's editable region.

a. Use the template to create the index.html.  Copy the menu content from the textcontent.html into the "content" container editable region.

b. Use the template to create the menu.html.  Copy the menu content from the textcontent.html into the "content" container editable region.

c. Use the template to create the hours.html.  Copy the hours content from the textcontent.html into the "content" container editable region.

d. Use the template to create the directions.html.   Copy the directions content from the textcontent.html into the "content" container editable region.

e. Use the template to create the feedback.html.  Copy the feedback content from the textcontent.html into the "content" container editable region.

f. Use the template to create the contact.html.  Copy the contact content from the textcontent.html into the "content" container editable region.

g. Use the template to create the promo.html.   See the step-by-step demo instructions in the chapter 13 lecture demo presentation (slides 46- 52) in creating a Complex Design with AP Div.   See the attached sample promo web page.

12.  Save all your web pages.

13.  Modify the "navigation" library item.   Insert the links for all the navigation menu buttons to there corresponding Web pages.   Save and update all the pages.   See the step-by-step demo instructions in the Topic 10 lecture presentation (slides 34- 36) in editing a library item.

14.  Review your Web pages in your Browser.   Test the navigation menu and links.   See the attached sample output of the Web pages – index.html and promo.html

Submit:

1. Submit a screenshot image of the index page displaying in your Browser on the Canvas Final Project drop box.

2. Zip up your folder and submit in the Canvas Final Project drop box.