This instructions page contain the following:

Tasks:

Gerri Gonzales, owner of Spiffy Autos, wants you to create a simple Web page for her that lists information about herself and her company. Below is a finished sample of how the Web page should appear.

Project 1 Spiffy web page

Part 1 - Preparing the Site

  1. Create a folder called spiffy ( if you haven't already) on your computer and under your cas111d folder.
  2. Create a sub-folder under spiffy called assets.
  3. Download the pictures from the Project Spiffy Data Files page and save them into your assets folder that you just created.
  4. Create and save a blank Web page as about-spiffy.html into the spiffy folder on your computer.

Part 2 - Adding Content

Your page should look like the sample (above) and should include the following features (described in Tutorials 1 and 2 of the text):

  1. Enter a page title with the text "Spiffy Autos | About Us" (no quotes)
  2. Create a heading 1 with the text "About Spiffy Autos and its Owner" (no quotes)
  3. Put a horizontal rule under the first line.
  4. Type the text, including the link list at the top, both paragraphs and the link list at the bottom. Use a break tag (after "Our motto is:") as shown within that first paragraph. The text should be free of spelling and other errors.

Instructor Note: 
Do not attempt to center or right-align any of the text or pictures at this point. You will do it at the end using CSS rules.

  1. Insert the two images in the proper places as shown above. Don't forget to add alternate texts and use plain English!
  2. Create a relative link from the word "Pictures" to your assets folder. Place "Pictures" between Company Principles" and "Contact me!"
  3. Create an absolute link to the word "Testimonial" to http://en.wikipedia.org/wiki/Testimonial
  4. Create an email link to your email address from the line "Contact me!"
  5. Create a link to the file principles.pdf from the line "Company Principles"
  6. Insert a 100x100 image placeholder with a blue background for the Company Logo that is not yet linked to an image. Don't forget to add an alternate text and use plain English!
  7. Create three named anchor links for the navigational text under the horizontal rule at the top of the page with the following relevant IDs:
    • aboutspiffy
    • aboutgerri
    • aboutlinks
  8. Put the named anchors in front of the paragraphs that begin:
    • "Founded in 2003..." (aboutspiffy)
    • "Gerri Gonzales has a degree..." (aboutgerri)
    • the link "Testimonial" (aboutlinks)

Part 3 - CSS Styling

  1. Using Page Properties, in the Properties panel - Appearance (CSS) and Links (CSS), set the following:
    • background color should be dark red as you see in the example above (you can lift the color or use #810040)
    • the font color should be white
    • the link color should be yellow
    • the visited color should be light blue

Instructor Note: 
By using Page Properties, Dreamweaver automatically creates internal (embedded) CSS Style for the HTML tags you style.

  1. Using the CSS Styles panel - All button, create the following New CSS Rules (plus sign):
    • A class selector called .rightme with Block Text-align right as the property.
    • A class selector called .centerme with Block Text-align center as the property.
  2. Apply .rightme to all paragraphs containing content that is right-aligned as shown in the picture above.
  3. Apply .centerme to all paragraphs containing content that is center-aligned.
  4. Above Gerri's photo, add a heading 2 with the text "Gerri Gonzales Profile" (no quotes)
  5. Create a tag selector for h2 with the following property/value:
    • color of cyan (#0FF), font-size of 1.5em, text-transform of uppercase, margin: 1em 0 .5em 0, text-shadow: 1px 1px 0px #000, and a font-family of Englebert, Arial, Helvetica, sans-serif

      Instructor Note:
      Englebert is a non-standard font, but can be found in Google's Web fonts online. To ensure it works with everyone's browsers, you need to embed this font in your page. Google has made it easy to do this with their fonts. You need to place this code (provided free by Google Web Fonts) in the index.html Web page just above your CSS link tag in the head tag area of your HTML:

      <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'>

      Check out Google Web Fonts to see some interesting and free font options that are not normally installed in Web browsers.

    • Your CSS should look like this:

      h2 {
      font-size: 1.5em;
      text-transform: uppercase;
      color: #0FF;
      margin-top: 1px;
      margin-right: 0px;
      margin-bottom: 0.5px;
      margin-left: 0px;
      font-family: 'Englebert', Arial, Helvetica, sans-serif;
      text-shadow: 1px 1px 0px #000;
      }

Part 4 - Save and Upload

  1. Save the file about-spiffy.html. Make sure that it's 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 both pictures and the principles.pdf 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 1 Uploaded Your Name (where Your Name is your actual name -- you'd be surprised how many get that wrong!). This assignment will worth 5 points as extra credit.

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.