This instructions page contain the following:

Tasks:

Gerri Gonzales, owner of Spiffy Autos, is happy with your first page and wants you to create a nice home page for Spiffy Automobiles, Inc. Below is a finished sample of how the Web page should appear.

Project 2 - Spiffy Web page

Part 1 - Preparing the Site

  1. Complete Project 1. Project 1 must be in satisfactory condition (80% or better on your score) to begin Project 2.
  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 an assets subfolder with all the necessary files (pictures and a pdf document) included. If you don't, you can download the pictures from the Project Spiffy Data Files page and save them into your assets folder.
  3. Create and save a blank Web page as index.html into the spiffy folder on your computer.
  4. Enter a page title with the text "Spiffy Automobiles, Inc." (no quotes).

Your page should look like the sample above and should include the following features. Below is the sitemap of Spiffy project:

Spiffy project sitemap - index_about_prices_project pages

Part 2 - Structure

You'll be creating a div structure in Code view based on this wireframe layout (below). Note that all the divs are nested inside the container div called "centerwrap".

Project 2 Spiffy Home Wireframe

Spiffy Index page wireframe layout

  1. Type in a container div called "centerwrap". In the code, the opening tag would look like this:  <div id="centerwrap">
  2. Inside div#centerwrap, place (i.e., nest) the following divs (these are their IDs):
    • banner
    • nav
    • leftcol
    • rightcol
    • footer

Instructor Note: 
IMPORTANT! When described in the HTML, the shorthand for divs with IDs is a div followed by a # sign then their ID name, for example: div#centerwrap. That # sign comes from the CSS ID selector, but remember, the HTML code does not include a # sign. Here's a quick reference for how these are used:

When used in the HTML: <div id="centerwrap">
When used in the CSS: #centerwrap
Shorthand notation to it in the HTML: div#centerwrap

Also, note in Design view on the status bar, reference to divs with IDs also use this shorthand notation.

  1. Inside div#leftcol, place the following divs (these are their IDs):
    • header
    • info
    • infolist
  2. Inside div#rightcol, place the following div (this is the ID):
    • otherlist
  3. In Code view, the complete structure would look like this:
    Project 2 - Part 2 Structure

Part 3 - Content

You'll now be adding content (text and images) as described below. You will be switching back-and-forth from Code view and Design view, and doing a lot of copy (Ctrl-c or Cmd-c) and paste (Ctrl-v or Cmd-v) text. When you are finished with the following steps, it should look like this in Design View:

Project 2 - Part 3 Content

  1. Add the two pictures from the assets folder, spif_ban01.jpg and spif_ban02.jpg side-by-side in div#banner.
  2. Create a navigational bar using an unordered list in div#nav with the following links in this order:
    • About Spiffy
    • Spiffy Prices
    • Spiffy Projects
  3. Add the text to the divs as shown in the figure above:
    • In div#header, use heading 1 for the text "You have arrived at SpiffyAutos.Com" (no quotes).
    • In div#info, use paragraph for the text "Services we provide:" (no quotes).
    • In div#infolist, use a bulleted list with these texts:
      • Hybrid conversions of classic and antique cars
      • Conversion kits
      • Pluggable hybrid conversions for current hybrid cars
      • Replacement batteries
      • Guarantee and warranties on maintenance
    • In div#otherlist, use paragraph for the text "Useful hybrid car resources:" (no quotes).
    • In div#footer, use paragraph for the text "Spiffy Autos © 20xx" (no quotes and replace xx with the current year)
    • Insert a break tag <br /> (Shift-enter in Dreamweaver), then enter the text "Designed by Your Name" (no quotes and replace Your Name with your actual name).
  4. In div#otherlist, add absolute links as follows using the unordered list:
    • CalCars -- http://www.calcars.org/vehicles.html
    • HowStuffWorks -- http://auto.howstuffworks.com/hybrid-car.htm
    • Wikipedia -- http://en.wikipedia.org/wiki/Hybrid_cars
  5. In div#nav, add a relative link from "About Spiffy" to the about-spiffy.html page.
  6. In div#nav, add null links to "Spiffy Projects" and "Spiffy Prices" (a null link is when you type only a # in the link field).
  7. Check the Design view. When you click on any of the content, everything should be nested in div#centerwrap in the body of the document.
  8. Save index.html and close it.

Part 4 - CSS Styling

  1. Open about-spiffy.html from Project 1.
  2. Export the internal Cascading Style Sheet (Move CSS Rules...) of about-spiffy.html to an external file with the name spiffy.css. Save it in the spiffy/assets folder.
  3. Delete the left-over internal (embedded) style tag in the Code view or delete <style> in the CSS Styles panel.
  4. Save both files about-spiffy.html and spiffy.css (File --> Save All). Close about-spiffy.html.

    Instructor Note:
    Do not use a shortcut Ctrl-s to save your files. Even though both about-spiffy.html and spiffy.css may look like they're together, but they are actually two separate files that you have to save individually. If you click on File --> Save All, Dreamweaver will save both files automatically.

    Step #2 where you save your CSS to spiffy.css will not actually save the file until you click to save spiffy.css file itself. 

  5. Open index.html (if it's not already open).
  6. Link the spiffy.css file to index.html using the Attach Style Sheet button (looks like a chain link button) in the CSS Styles panel, All button.
  7. Using the CSS Styles panel - All button, create the following New CSS Rules (plus sign) to spiffy.css:
    • A tag selector h1 (Arial family, x-large, bold, left-aligned).
    • An ID selector #centerwrap (Position of relative, width 700px, left and right margins of auto, background color #E6C2FF).
    • An ID selector #leftcol (width 350px, float left).
    • An ID selector #rightcol (width 350px, float right).
    • An ID selector #header (Left padding (only) of 20px, height of 100px, background color of #945DEC).
    • An ID selector #info (Dark blue font color (#00F), medium, bolder, Arial family).
    • An ID selector #infolist (Dark blue font color (#00F), italics font, Arial family, small).
    • An ID selector #otherlist (Background color #945DEC, with reasonable top and left margin -- notice how it appears in the picture).
    • An ID selector #footer (clear both, text align center).
  8. Using the CSS Styles panel - All button, create New CSS Rules (plus sign) above #leftcol for:
    • An ID selector #nav (Arial family, x-small, bold, background color of #945DEC and block text align of center, height of 50px).
  9. Add the id="navlist" to the ul tag of div#nav. You can either do this in Code view or with Quick Tag Edit...
  10. Copy the text below into the bottom of spiffy.css (under the #nav ID selector). This CSS styles the navigation bar section of the table so that it appears to have buttons that change when you hover the mouse cursor over them in a browser.

    #navlist
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }

    #navlist li
    {
    display: inline;
    list-style-type: none;
    }

    #navlist a
    {
    padding: 3px 10px;
    }

    #navlist a:link, #navlist a:visited
    {
    color: #FFFFFF;
    background-color: #032BBE;
    text-decoration: none;
    }

    #navlist a:hover
    {
    color: #fff;
    background-color: #E8C1FF;
    text-decoration: none;
    }

  11. To move the navbar down toward the center of div#nav, give #nav a top padding of 10px, but reduce the overall height to 40px so it stays at a total height of 50px.
  12. Add borders of solid, 1 pixel, color #945DEC to the following:
    • the left and right side of #leftcol
    • the right side of #rightcol
    • all sides of #footer
  13. Notice that after adding borders, div#rightcol doesn't sit side-by-side with div#leftcol. This is because borders add to the total width. Since you added 3px of total border width to the left and right columns, you need to subtract that amount from one or both of those divs. Reduce #leftcol to a width of 347px.
  14. Add a class selector called .headmod and style the class with a dark blue font, bolder, italics, Arial family, x-small and background color the same as on #centerwrap (#E6C2FF). This class selector will be used in Project 3.
  15. Add a class selector called .copyright and style the class with size small, italics, text-align center, and color of #032BBE. Apply copyright to the paragraph in div#footer.
  16. To fix the way the divs are spaced together, modify padding as follows:
    • Add to #header, top padding of 5px, then subtract 5px from the height so it stays at a total of 100px
    • Add to #info, left padding of 20px, top padding of 15px
    • Add to #infolist, top padding of 5px, bottom padding of 10px
    • Add to #otherlist, top, bottom and left padding of 10px
    • Add to #footer, top and bottom padding of 10px
  17. Save all your files. Make sure you go to File --> Save All to save both your index.html and spiffy.css files.

Part 5 - Save and Upload

  1. Save both files index.html and about-spiffy.html. Make sure that they are inside the spiffy folder.
  2. Upload the entire spiffy folder to your username folder on the SWS using the Site Definition we created in class. 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.
  3. 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.
  4. Mail your instructor using D2L email with a subject like CAS 111d Project 2 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.