Waterfall

IT Plum Web Assessment

Please complete all of the below requirements. You will have two hours to complete the assessment. Please submit the url to me via email no later than 3:30pm. You are allowed to use any resources you have compiled over the semester. The only thing you are not allowed to use are the html and css files you worked on during the practice assessment. You may use the header image created during the practice assessment. This is an individual assignment. You are not allowed to communicate with other students during the assessment

File Management

  • In your web root, create a folder for this assessment called plum-assessment-final
    • Create a sub-folder named assets and 4 sub-folders of assets named images, style, scripts, resources.
  • Define a site in Dreamweaver point to your web root. Use your UALR web space to host the project. Do not put this project in the root of your web site(Ex. http://ualr.edu/username) it should be placed in its own sub-folder called plum-assessment-final. (Ex. http://ualr.edu/username/plum-assessment-final) This will be the address you send me when you have completed the assessment.
  • Make sure that all files are in the appropriate directories with proper naming conventions before submitting this project.

HTML (Head)

  • Download the following html document and save it as index.html in the project root (right-click link – save as)
  • Open the file in Dreamweaver making sure you are working in your defined site.
  • Add your name to the title of the page
  • Add the author meta tag to the head section
  • Properly declare the language
  • Add role attributes to the structural elements where appropriate. (banner, main, navigation, contentinfo)

CSS

  • Download the following style sheet and name it screen.css. Make sure to place it in the appropriate directory (right-click link – save as)
  • Attach it to your document making sure to declare a media type of screen.

Fireworks

  • Download and place in the resources folder one of the following three images to use as a header 1 | 2 | 3. If you did the practice assessment you are welcome to use the optimized header image you created. 
  • Crop to 960px X 140px
  • Add your name to the image. Make sure that it is readable and there is good contrast between the type color and the background color.
  • Optimize and export the image to the proper location in your site. Must be less than 40kb

HTML & CSS

  • Change the H1 text to your name
  • Add the image you created above to your header section using the image replacement technique we covered in class.
  • Make sure the banner image is click-able. It should already be linked to index.html
  • Add title attributes to each of the horizontal navigation links
  • Add an additional link with title attribute to the navigation section. This link should point to your favorite web site.
  • Add a class to the first paragraph of the content area named “alert”
  • Create a class in your style sheet named “alert” and set the color of the text to something other than black.
  • Create style rules for the h2, h3, and h4 in the content area. Change the colors to match the header image you selected.
  • Add an html comment after the blockquote that says “IT Plum was here…”
  • Add the copyright symbol, the year, your name, and a functioning back to top link in the footer.
  • Align the quote citation to the right of the page and change the link color to match the color scheme.
  • Style the footer link to be visible on the dark background.

Content

  • Answer the three questions in the content area.
  • Download and insert the following image into the content area of your page. Use a CSS class to float the image to the left, place a border around the image, and add margin around the image.

Validate

  • Validate your html

Upload and send me the URL (tswallace@ualr.edu). Make sure you do not overwrite your existing site!

Good Luck!