This instructions page contain the following:

Tasks:

Gerri Gonzales, owner of Spiffy Autos, wants you to complete her website by constructing two more pages: one for her list of services and prices, and the other to show before and after pictures of the work Spiffy has done on cars. Below are the finished samples of how the two new Web pages should appear.

Project 3 - Spiffy Prices page

Project 3 - Spiffy Projects page

Part 1 - Preparing the Site

  1. Complete Project 2. Project 2 must be in satisfactory condition (80% or better on your score) to begin Project 3.
  2. Make sure that you have a folder called spiffy on your computer and under your cas111d folder on the SWS. The spiffy folder should contain: index.html (from Project 2) and about-spiffy.html (from Project 1).
    The spiffy folder should contain an assets subfolder with all the necessary files-- pictures, a pdf document, and spiffy.css (from Project 2) included. If you don't, you can download the pictures from the Project Spiffy Data Files page and save them into your assets folder.

When you are finished with this assignment, your page should look like the sample above. Be sure to do these steps in order. Note that the recoloring of the site comes at the end of these steps.

Part 2 - Content (spiffy prices)

  1. Duplicate index.html and rename the copy to spiffy-prices.html. Note that you need to save the file and can't have the file open when you do this process.
  2. Open spiffy-prices.html.
  3. Change the page title to "Spiffy Autos | Prices and Services List" (no quotes).
  4. In the Code view, delete div#rightcol along with div#otherlist and all their content in the spiffy-prices.html (Do not delete their ID Selectors in the CSS Styles panel or spiffy.css!).
  5. In the Code view, rename div#leftcol to div#onecol in the spiffy-prices.html (again, don't change anything in the CSS!).
  6. Overwrite the current text in the h1 with the following text: "Spiffy Autos List of Services" (no quotes).
  7. Delete the content only in div#info and div#infolist -- be sure not to remove the divs, just the text and text containing tags (p, ul, li) inside them.
  8. Save spiffy-prices.html and make sure it's inside the spiffy folder.
  9. Now it's time to add the table and its content to this page.
    In the Code view, click inside div#infolist.
  10. Insert a table (Insert --> Table) into div#infolist with 5 rows and 3 columns, width 90 percent, 0 border width, 0 cell padding, 0 cellspacing, and no headers.

    Instructor Note:
    You can set a pixel width here, but percentage width is better to control the width of the table. Also, 90% will allow it to fit in the div with a little extra space on each side, so it isn't crowding the edges.


    Project 3 - Spiffy Prices table
  11. Begin in row 2, type the following text in Column 1. One row for each bullet (but don't include the bullets):
    • Hybrid conversion of combustion engine
    • Pluggable hybrid conversion of current hybrid car
    • Replacement lithium ion battery
    • Extended warranty
  12. Begin in row 1, type the following text in Column 2. One row for each bullet (but don't include the bullets):
    • Time
    • 4 weeks
    • 2 weeks
    • same day installed
    • N/A
  13. Begin in row 1, type the following text in Column 3. One row for each bullet (but don't include the bullets):
    • Estimated Cost
    • $14,780
    • $9,980
    • $1,990
    • $3,990 for 4 years
  14. If neccessary, adjust the width of the table columns so it looks aimilar to the example above.
  15. Save spiffy-prices.html.

    Instructor Note:
    Note: it is a good habit to save your file often.

  16. Update the navigational bar with the following links in this order:
    • Home
    • About Spiffy
    • Spiffy Projects
  17. Using the CSS Styles panel - All button, create the following New CSS Rules (plus sign):
    • A tag selector table (background color #945DEC and a margin-left of 20px).
    • A tag selector td (text-align: center and font-style: normal). Setting the font-style to normal will remove the italics from all the text in the table.
  18. Apply the class selector .headmod which was created in Project 2, to the tds (cells) with the words Time and Estimated Cost in Row 1, Column 2 and 3.
  19. Duplicate .headmod in the CSS Styles panel and rename the duplicate class selector .leftmod
  20. In the CSS Styles panel, delete the properties of font-size and font-style in #infolist .leftmod
  21. Edit .leftmod and add text-align: left.
  22. Apply the .leftmod class to all the Column 1 td's.
  23. Save all your files (File --> Save All) and close spiffy-prices.html.

Part 3 - Content (spiffy projects)

  1. Duplicate spiffy-prices.html and rename the copy to spiffy-projects.html. Note that you need to save the file and can't have the file open when you do this process.
  2. Open spiffy-projects.html.
  3. Change the page title to "Spiffy Autos | Past Projects" (no quotes).
  4. Update the navigational bar with the following links in this order:
    • Home
    • About Spiffy
    • Spiffy Prices
  5. Overwrite the current text in the h1 in div#header with the following text: "Spiffy's Past Success Stories!" (no quotes)
  6. In the Code view, inside div#infolist, delete the entire table including all its content.
  7. In div#info, create an h2 with the text "Move the mouse over the old to see the new!" (no quotes).
  8. Notice that we already have a style for h2 which we did in Project 1. We would like to create a different style of h2 for this page using a compound selector, to selectively target and apply the rules to it.
    Using the CSS Styles panel - All button, create New CSS Rules (plus sign) below h2 for:
    • A compound selector #info h2 (font-weight normal, font-size large, font-type Times New Roman, color #FFF, text-align center, and margin-bottom 10px).
  9. In div#infolist, create the following divs -- they should not be nested inside each other! -- and then create ID selectors in the CSS Styles panel for them with the properties below (with all values in px):
    Name (ID) width height margin float
    oldnewtext 150 105 0 0 0 280  
    oldnewcar 300 175 25 0 25 45 left
    oldnewengine 250 175 25 0 0 35 left
  10. In the Code view, insert the images from the assets folder into the divs you created above:
    • old.jpg goes into div#oldnewtext, with alt text "Old becomes new!" (no quotes).
    • oldcar.jpg goes into div#oldnewcar, with alt text "Old car becomes new!" (no quotes).
    • oldengine.jpg goes into div#oldnewengine, with alt text "Old engine becomes new!" (no quotes).
  11. You will be creating a disjointed rollover situation: when you move the mouse over the Old image, all three should rollover. By themselves, when you hover over them directly, the lower images should not change.
  12. Give all three images IDs (you can do this in the Code view or in Design view, in the lower-left of the Properties panel):
    • old.jpg should be id="oldtext"
    • oldcar.jpg should be id="oldcar"
    • oldengine.jpg should be id="oldengine"
  13. To create the disjointed rollover:
    • In Design view, click on the oldtext image
    • Open up the Tag Inspector panel (Window --> Tag Inspector)
    • Click on the Behaviors button
    • Add the Swap Image behavior by clicking the plus sign and choosing it from the pull-down menu -- a dialog box will appear and you'll see the images inserted on the page
      Project 3 - Spiffy Project Swap Image dialog box
    • Click on image "oldtext" and Set Source to: new.jpg
    • Click on image "oldcar" and Set Source to: newcar.jpg
    • Click on image "oldengine" and Set Source to: newengine.jpg
    • Be sure to leave the Restore and Preload options checked on all.
  14. Save all your files (File --> Save All) and close it.

Instructor Note:
Images should be given ID's (ID attributes like id="oldtext") so you can target them with JavaScript. You can also target any div with JavaScript, and you should already be in the habit of giving all your divs ID's at this point anyway.

Part 4 - Correcting navbar and About Spiffy page

In this part, you will update the About Spiffy page to make it look like the others. You will also correct and standardize the navbar throughout the site to make the navigation to the sites more consistent.

  1. Link all pages (index.html, about-spiffy.html, spiffy-prices.html, and spiffy-projects.html) to spiffy.css file if they aren't already.
  2. Open about-spiffy.html.
  3. In the Code view, delete the image placeholder for the company logo. Save about-spiffy.html.
  4. Open index.html.
  5. At this point, the navbar looks non-standard because it only shows three of any four of the pages of the site. This lowers its usability with general users of the site because it appears as though the buttons change position as you navigate through the pages.
    In the Code view, add the fourth page button, so you would have the following list items in this order:
    • Home
    • About Spiffy
    • Spiffy Prices
    • Spiffy Projects
  6. Update the links on all the list items so they go to their correct pages:
    • Home goes to index.html
    • About Spiffy goes to about-spiffy.html
    • Spiffy Prices goes to spiffy-prices.html
    • Spiffy Projects goes to spiffy-projects.html
  7. Save index.html.
  8. In the Code view of index.html, select and copy the code beginning with the opening of div#centerwrap through the close of div#nav.
  9. In the Code view of about-spiffy.html, paste the code earlier and put them after the opening of the <body> tag and before the opening of the <h1> tag.
    You have now included the banner and the navbar onto the about-spiffy.html page.
  10. In the Code view of about-spiffy.html, close div#centerwrap with a closing </div> tag and put it just before the closing of </body> tag at the bottom of the HTML.
  11. Save about-spiffy.html and close it.
  12. Open spiffy-prices.html and spiffy projects.html.
  13. In the Code view of index.html, select and copy div#nav from its opening to closing tags. You should only copy the div#nav code and no other tags.
  14. In the Code view of spiffy-prices.html, paste it over the div#nav code. Paste over the div#nav code as well for spiffy-projects.html.
    Now all the pages should have the four button navbar.
  15. Save both spiffy-prices.html and spiffy-projects.html.
  16. On each Spiffy page, one after another, change the navbar link of the page to itself to a null link.
    In other words, on the index.html page, the link to Home is linking back to itself, so this one will be a null link. So your code should look like this: <li><a href="#">Home</a></li>.
    On the about-spiffy.html, make the About Spiffy link null, etc.

Instructor Note:
It's best to make a link null that's linking to its own page.

For example, if the About Spiffy page link is linking back to itself, when someone clicks on it, the page will reload. Because it reloads, the user might think they've gone to a new page, even though they see the same content they just saw. This is both confusing to users, but also slow for them too since the same page is reloading.

Additionally, someone clicking a link that links back to a page from itself may cause an additional "hit" registered on the page that may throw off the analytics (the data you record about user traffic on your website). There is no advantage in terms of search engine optimization (SEO), but it may actually render the analytics data unreliable.

  1. Save all the pages (File --> Save All) one at a time.

Part 5 - finishing touches to the css on the entire website

In this part, you'll alter the color of the buttons so it's more obvious what page the user is on. You will also update the color on the entire site using Find and Replace in the CSS.

  1. Using the CSS Styles panel - All button, create New CSS Rules (plus sign) for:
    • A compound selector #centerwrap #nav #navlist .current (background color: #E8C1FF).
  2. Apply .current to each of the a tags of the menu items that represent the page they are on. In other words, on index.html, since its menu item is Home, apply that .current class to the Home a tag. This will give it a different color than the other buttons so it can be distinguished from them and so the user knows that's the page they are currently on.
    So your code should look like this: <li><a href="#" class="current">Home</a></li>.
  3. Check to make sure all relative links on all the pages link to each other or have appropriate null links.
  4. In the CSS Styles panel, make the following additions or modifications to the background color:
    • Tag selector body (background-color: #000044).
    • ID selector #nav (background-color: #C0C0C0).
    • ID selector #footer (background-color: #C0C0C0).
  5. Save all files and close them. Make sure they are inside the spiffy folder.
  6. Open only the spiffy.css file and make the following replacements to colors by using Find & Replace (Edit --> Find and Replace...)
    Project 3 - Find and Replace window
    • Old color: #E6C2FF, new color: #003366 (there should be 3)
    • Old color: #945DEC, new color: #000044 (there should be 7)
    • Old color: #032BBE, new color: #000044 (there should be 2)
    • Old color: #E8C1FF, new color: #6699CC (there should be 2)
    • Old color: #00F, new color: #FFF (there should be 4)
  7. Replace out the old banner logo image for spiffy-new-logo.jpg from your assets folder (download this from the Course Files if you haven't already).
  8. Save spiffy.css file. Make sure that it is inside the assets folder.
  9. Upload the entire spiffy folder to your username folder on the SWS using the Site Definition we created in class.
    The spiffy folder should have 4 files: index.html, about-spiffy.html, spiffy-prices.html, and spiffy-projects.html. The spiffy folder should also contain a sub-folder called assets that will contain pictures, the principles.pdf, and spiffy.css file. Always remember to avoid, file management chaos.
  10. Using a browser like IE or Firefox or Chrome, check the your SWS folder and make sure the upload was correct and the file is displaying properly.
  11. Mail your instructor using D2L email with a subject like CAS 111d Project 3 Uploaded Your Name (where Your Name is your actual name -- you'd be surprised how many get that wrong!)

Instructor Note:
As you should be in the habit of doing, be sure to use a browser (or more than one browser) to check your Web pages (or document) on the SWS to ensure everything works properly.