Part 1: HTML

1. Begin with these files.
2. Unzip, open, and rename the folder to: yourlastname-exam3-part1
3. Open and edit the index-begin.html file. “Save as” and rename the file to: yourlastname-index.html
4. Consult this screenshot.
5. Create the HTML code to get the same results, including:
   1. necessary tags and elements including: html, head, title, and body — including closing tags
   2. appropriate headings
   3. list
   4. paragraphs
   5. links
   6. images
   7. Be sure to use title and alt attributes for links and images.
6. No cheatsheet for this part.
7. You may open and view your progress in Firefox.
8. You will be given approximately 20 minutes to complete as much as you can for this part of the exam.

Part 2: CSS

1. Begin with these files.
2. Unzip, open, and rename the folder to: yourlastname-exam3-part2
3. Open and edit these files, which are awaiting you to complete them:
   1. style.css
   2. index.html
4. Consult this screenshot.
5. Note that all background images are in the folder: images
6. Complete the CSS (and add necessary HTML) to get the desired results, including as much of the following as possible. You DO NOT need to complete the goals in this order. Choose the ones that are easiest and quickest for you, in the order that you desire!
   1. provide basic properties for the body
   2. put background images in place
   3. style links, including normal, visited, and hovered, as well as linked images
   4. place background images on PDF and external links
   5. employ the Gilder-Levin image replacement method for the site logo
   6. employ the pixy rollover method so that the site logo changes on hover
   7. arrange the content into two floated columns
   8. ensure that the footer clears as it should
7. Extra points for answering the questions in the css comments. (Aim for one-sentence answers.)
8. You may consult this CSS cheatsheet for reference.
9. You may open and view your progress in Firefox.
10. As you practice, you may consult these files included in the downloaded folder:
    1. index-complete.html
    2. style-complete.html
11. You will be given approximately 40 minutes to complete as much as you can for this part of the exam.

NOTE: Some details of the files may be altered for the exam. HOWEVER, the missing portions — the portions you need to complete — will be nearly exactly what you are asked to do here.

Contact me if you have questions.

To import a specific stylesheet for IE 7:

<!--[if IE 7]
<style type="text/css">
@import ("css/ie7.css");
</style>
-->

To import a specific stylesheet for IE 6:

<!--[if IE 6]
<style type="text/css">
@import ("css/ie6.css");
</style>
-->

To import a specific stylesheet for any version of IE less than IE 6:

<!--[if lt IE 6]
<style type="text/css">
@import ("css/ielt6.css");
</style>
-->

This design should incorporate the elements from Design 2 and the work we have done since then. Thus, the list of requirements now includes:

Basic Requirements

1. Use a fixed-width layout with two or three columns. (A fluid design is acceptable, but not required.) BE SURE TO USE A LAYOUT METHOD RECOMMENDED BY BUDD. (The two and three-column layout we have used in class follows his approach.
2. Employ professional-grade design techniques (such as pleasing gradients, flexible boxes, etc.).
3. Turn the design into a complete website with 4-7 pages.
4. Be sure that your pages include text, images, links, etc. (Links may be “dummy” links, using “#” for the href.)
5. In addition, include at least one PDF download and one link to an external website. Using CSS attribute selectors and background images, make these links indicate what they are.
6. Use the Gilder/Levin replacement (Budd page 65) method for at least one element in the page — probably the site logo.
7. Use the pixy rollover method (Budd page 79) for at least one element in the page.
8. Create main navigation that is visually appealing, with hover effects. (A horizontal nav bar, such as in the Complete version of the Exam 2 practice files, or in Budd pages 91-93.)
9. Using body id or class and contextual selectors, set the main navigation to indicate which page the user is on.
10. Ensure that one of your pages contains a contact form. This page should end with “.php” and contain a version of the functioning e-mail form, as described here.
11. Create and integrate a favicon into your site. (See the how-to here.)

Validate XHTML/CSS and Optimize for Internet Explorer

In addition to the above, you also need to:

1. Update the code at the top of your HTML and PHP pages to meet the full XHTML Strict specification. Use this code:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Untitled Document</title>
   </head>
   

2. Validate your XHTML and fix as many true errors as possible. (Use Tools / Validate HTML in the Web Developer’s Toolbar for Firefox, OR use this page at W3.org.)
3. Validate your CSS and fix as many true errors as possible. (Use Tools / Validate CSS in the Web Developer’s Toolbar for Firefox, OR use this page at W3.org.)
4. Test your site in Internet Explorer 7.
5. Create an ie7.css stylesheet, which enables you to add tweaks for IE 7. Use the IE conditional comment (Budd page 157) to import that stylesheet. That code would look like:

   <!-- [if IE 7] <style type="text/css"> @import ("ie7.css"); </style> -->

   Be sure to place this in the head of the document, AFTER your link to your main stylesheet.

6. Consult Budd pages 168 to 184 to try to identify any bugs that may be creating problems in IE 7. Fix these in your ie7.css stylesheet.

Submission

Bring your folder, named Yourlastname-Design3, containing the following files and folders:

1. index.html with your markeup
2. style.css with your stylesheet
3. images folder with your final images used in the web page
4. PSD folder with your mockup and any other design files

Submit either of the following:

1. A proposal for accomplishing a completion and perfection of a prior design. Steps must include: validate HTML and CSS, optimize for Internet Explorer 7 (which we will work together to do Thursday and Tuesday the 16th and 21st), having a fully functional form, implementing a favicon, and polishing other fine details of coding and/or design. The proposal should be submitted as a Word file, with your name, date, title: Design 3 Proposal, and a list with description of the goals you want to achieve with your perfected work.

   OR
   

2. A well-organized PSD file with the new design for your final project. (This design may be based upon a prior design we have used in class, or it may be new.)

Learn what a favicon is and the basic steps of how to do it.

Generate Your Favicon Online

A great, easy-to-use online favicon generator. Create it, download it, then upload it to your site.

Once it’s uploaded, display it by placing this link in the head of your HTML document:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Includes quick, easy examples of attribute selectors.

What is a CSS Attribute Selector? — About.com

Another basic overview of attribute selectors.

Cascading Style Sheets 2 Attribute Selectors — About.com

A list of the CSS2 attributes that work now, before CSS3 works. :)

CSS Selectors — About.com

A cool reference for all things CSS Selectors.

Cool use for CSS attribute selectors — Andy Budd

A blog note from our very own Andy Budd about attribute selectors.

CSS: A tribute to selectors — Stuff and Nonsense

A basic overview of attribute selectors.

CSS3: Attribute Selectors — Opera.com

Attribute Selectors that may or may not work on your browser, but a sign of the things to come for CSS.

1. Using a special body class and stylesheet code, configure your site so that at least one page has a layout different than the other pages (such as one column instead of two).
2. Style all of your body text links — :link, :visited, and :hover — the way that you want them to be.
3. Create a link to a PDF file. Use a CSS3 attribute selector to make that think display a PDF icon just to the right of the link. (See Budd page 75)
4. Create a link to another website. Use a CSS3 attribute selector to make that link display an external site icon just to the right of the link. (See Budd page 73-74)

For reference and to obtain the image files, consult this downloadable ZIP folder with the completed version of the files that we worked on in class on Tuesday.

So come to class Tuesday ready to get a fresh start on tackling a few new tricks!

See you there.

budd-cs1-begin.zip

From here, we will follow the steps in Budd, pages 188-216.

We will get rolling in class.

Your homework assignment for Tuesday will follow shortly.

Here is the complete version of the site, for you to compare.