5 pages:

• ✔ Home
  • ✔ Use content from home.txt
  • ✔ Choose from photos 01-08 (you can use a single photo or several photos). Feel free to resize the photos or add borders.
• ✔ Who We Are
  • ✔ Use content from whoweare.txt.
  • ✔ Use icons_green.gif or icons_orange.gif.
• ✔ Burritos
  • ✔ No text content for this page—just a graphic.
  • ✔ Use enjoyburritos.gif.
• ✔ Menu
  • ✔ Use content from menu.txt.
  • ✔ No graphics are necessary here. Insert an HTML table to display the menu items, descriptions, and prices. Use nice text and background colors to make it attractive.
• ✔ Our Location
  • ✔ Use content from location.text.
  • ✔ Use location_green.gif or location_orange.gif.

Requirements

• ✔ Each of the five pages must include the CBC logo and address (the address could display in the top banner or footer, or both).
• . Page layout must be done using CSS positioning and an external .css file.
• ✔ Text must be formatted using CSS and proper markup (h1 tags for page headers, p tags for paragraphs, and so on).
• ✔ You must use list-based navigation.
• ✔ The CBC menu must be formatted with a table.

Planning the Site Layout

• ✔ 1 Review the content in the cbc folder. Sketch out a layout and page design. Consider whether you will need 1, 2, or 3 columns.
• ✔ 2 Decide whether the layout will be fixed or liquid.
• ✔ 3 Decide whether the list-based navigation will be vertical or horizontal.
• ✔ 4 Study the menu data in the menu.txt file. Plan how many rows and columns will be needed to display the data, and whether the table header cells will be positioned along the top row or the left column. You may decide to use multiple tables if necessary.
• ✔ 5 Dreamweaver CS5 users: Go to File > New and choose a CSS layout similar to your wireframe. Choose "Create New File" for the Layout CSS. Save to your cbc folder as "styles.css". When the new HTML file opens up, save it to your cbc folder as "index.html".

Extending the Design

• ✔ 1 Make adjustments to the CSS layout as necessary. Recall that you can modify many of the existing CSS properties directly from the CSS Styles panel (adjusting column widths, and so on), or edit the rule to open the CSS Rule Definition dialog for the full set of options. If you need to add a new div, go to Insert > Layout Objects > Div Tag.
• ✔ 2 Add background images and colors to the body tag.
• ✔ 3 Format the list-based navigation. The two and three column layouts are pre-equipped with a side nav list. Edit the list properties to match your CBC design (just like we modified the side nav list in the Lecture 3 Moody Buddha project).
  • ✔ If you are using a one column layout, you'll need to insert your own nav list (same process as the Exercise 2 coffeeco project). Choose a list style from the listamatic folder. Open the list HTML file and switch to Code View. Copy and paste the unordered list into your cbc index.html file. Then, open the list CSS file. Copy and paste the list styles into your cbc external style sheet file. Modify the list styles to suit your design.
• ✔ 4 Add text to the content area. Needless to say, you'll start by deleting the placeholder text. Use Edit > Select All to make sure you clear the div of all its contents. Then just paste, type, or insert any content that you like. Create CSS styles for the text formatting. Redefine the h1 tag for the page headers, the p tag for paragraphs, and so on.
• ✔ 5 Insert the graphics. Apply the .fltlft or .fltlrt styles to align images left or right.
  • ✔ Something to watch out for—if you insert an image that is wider than the div, you might experience "float drop" where the div drops down below the other divs. Resize the images as necessary to fit your the width of the div.
• ✔ 6 If you need to center an image inside a div, here's how.
• ✔ 7 Test in a browser to make sure the layout is displaying correctly. When you are happy with the home page layout, you are ready to build the second-level pages.
• ✔ 8 Use the home page as a springboard to create the other pages. Go to File > Save As. Name the new page whoweare.html. Replace the page content and save. Repeat for the other pages.
  • home >> index.html
  • ✔ whoweare >> whoweare.html
  • ✔ burritos >> burritos.html
  • ✔ menu >> menu.html
  • ✔ our location >> ourlocation.html
• ✔ 9. When you get to the menu.html, go to Insert > Table to insert a table into the content div. Use CSS to format the table borders, background colors, and padding.

Post to Your Web Server

• ✔ When your page is finished, open your index.html file and add a link to Exercise Four.
• ✔ Publish your project using Dreamweaver's FTP feature. Click the Connect icon at the top of the Files panel to connect to your Web host. Select the cbc folder and click the Put Files icon.
• ✔ When Dreamweaver asks if you want to include dependent files, click Yes.

Summary

• When your site is finished, briefly answer the following questions:
  • 1. Did you use a liquid or fixed layout? Why?
  • 2. Did using tables improve the legibility of the menu data?
  • 3. Did you come across any problems as you worked with CSS layouts? If so, how did you solve or work around them?