CSCI 475 & 675
Read this handout carefully – students in prior semesters have failed to read the assignments carefully and have been penalized because they did not hand in the appropriate deliverables.
All coding assignments must be posted on the server for grading, not submitted on disc or flash drive. Getting your account on the server working correctly and FTPing to it can be tricky, so you should test FTPing to your account in the second week of class (your webspace won’t yet work in the first week), as specified on the syllabus, well before the assignment is due so that we can work out any problems. (You will not be given an extension on Assignment 1 if you don’t have the FTP process working by the due date.) Refer to the “How to FTP to Your Class Directory” handout on the class website. If you are having problems FTPing to your server space, please follow all the directions again, very carefully – a single tiny mistake in setting up your webspace will break the entire webspace. Refer to the “Troubleshooting” section at the end of the FTP handout on my website if you have problems.
Web Site Analysis (WSA) 1-4 (25 points each, 100 points total)
What to turn in: Turn in a printed copy in class and also email a copy of your file to both our TA and me as backup. WSAs do not need to be posted to your webspace – we will be grading the printed copy.
Evaluate the following websites (one website for each of the four assignments on the schedule at the end of the syllabus) using the WSA evaluation form available on the class web site. Enter a grade in the center collumn for each item row, as well as comments on the right explaining why you think the item is handled well or poorly. Delete the questions/suggestions in the comments area – they are just there as hints about what you should think about, and you do not necessarily need to answer each one of them. The following websites for your evaluations:
WSA #1: Crate and Barrel http://www.crateandbarrel.com
WSA #2: NIU’s Undergraduate Admissions http://www.niu.edu/admissions/index.shtml
WSA #3: Jaguar http://www.jaguarusa.com/
WSA #4: Nat’s on Maple restaurant http://natsonmaple.com/
Much of this evaluation is subjective, so we won’t be evaluating your opinions as long as it seems that you put some serious thought into the evaluation. The point of these assignments is to make you think about web design issues by looking at both good and bad sites. You should try to think like someone who came to the site for a purpose – was that purpose easy to accomplish? For instance, someone going to a chain restaurant site would probably want to locate a restaurant and check out the menu.
Website design is a lot like interior decorating. I'm sure that many of you have seen TV shows and magazine articles that focus on the style of decoration, such as traditional, contemporary, Victorian, etc. The narrators go into detail about the colors, textures, and choice of furniture, window treatments, and accessories. They talk about the way the furniture is arranged to allow a good flow through the room for entertainment or to form an intimate setting for conversation. In general, they try to explain how each item in the room, large or small, contributes to the style or mood the designer wanted to achieve. The purpose of these shows or articles is to help people learn how to decorate their own homes.
You need to approach your WSAs the same way. Who is the audience the site is trying to engage (try to be very specific here)? Exactly how does the site achieve the desired ambiance? What subtle details did the designers include to distinguish themselves from their competitors? The site must have a certain amount of content; how did they choose to organize it in each page and throughout the site? Organizing the information in a website is like writing a term paper; you need an introduction followed by a well-outlined body that develops the ideas in the introduction clearly and completely. We all know this is hard to do well.
HTML Assignment (50 points)
What to turn in: Post your webpage and any image files on your class webspace. Turn in a hand-written cover sheet (with your name and URL) and a printout of the page (you don’t need to print the underlying HTML code). Also email your HTML file to both our TA and me, from your ZID email account. Save your code for this assignment; you will use it again as the base for the CSS assignment.
You may not use an IDE like Dreamweaver or SeaMonkey to create this assignment; you must do it manually in a plain text editor. You may not use HTML code taken directly from my PowerPoints; that is, you must code it yourself. For instance, if you picked up the image map code from my PowerPoints and dropped it into your HTML assignment, you would not get credit for that part of the assignment. You may use HTML attributes (including deprecated attributes) or local CSS (embedded in the HTML, not in the head or in an external file) as you please for this assignment. If you choose to use CSS, though, be aware that you will still be responsible for knowing the equivalent HTML attributes on exams.
Create an HTML web page with at least the following features:
Keywords & description meta tags, title
Page formatting, including a background color and picture, a non-default text color, and non-default text and link colors.
A horizontal rule.
At least three levels of headers.
Text formatting, including specifying a non-default font as well as centered, bold, italics, subscript, superscript, and strikeout.
A five-level bulleted list and a two-level numbered list.
At least two external links, with one as a text link and one as an image link.
Three internal “bookmark” links – that is, links to further down on the current page.
A relative link to an image in a different directory than the directory in which your current HTML page resides.
An image with a non-standard-width border. The image should appear off to the right side of the page, with text wrapping around it.
An image map with at least two links.
A table that includes at least four rows, two cells in each row, two colspan attributes, and one rowspan attribute. Put a background color on the entire table, a different background color on one cell, and a background image on another cell in the table.
A form that includes a text input field, drop-down list box with at least five entries and two optgroups, a checkbox group (at least four items), a radio button group (at least four items), a password-type field, a multiple-line textarea, and submit and reset buttons. The action on the form should be to email yourself.
I don’t give a hoot whether or not the page content makes any sense or looks good. The only purpose for this assignment is to force you to create HTML manually before we move on to creating it in easier (and more fun) ways.
Save your code for this assignment; you will use it again for the CSS assignment.
CSS Assignment (50 points)
What to turn in: Post your webpage and CSS files on your class webspace. Turn in a hand-written cover sheet (with your name and URL) and a printout of the page (you don’t need to print the underlying HTML code). Also email your HTML and CSS files to both our TA and me, from your ZID email account. You must use a text editor for this assignment, not Dreamweaver or any other IDE.
Create an external style sheet for the web page that you created for the HTML Assignment by removing all possible formatting from the page itself and putting that formatting in an external CSS file. That means removing almost all formatting attributes from your HTML and moving any local CSS that you might have used to the external CSS file. Hand code your CSS; you may not use Dreamweaver to create the styles automatically for you for this assignment. Additionally, Dreamweaver creates generic names as well as redundant styles, whereas a good programmer can do a much better job of both naming and organizing styles for efficiency and maintainability. (However, you are welcome to use Dreamweaver CS5 or more recent to create styles for your personal and group websites later in the semester, as long as you go to the trouble of giving the styles descriptive names and rooting out redundant and overlapping styles. Versions of Dreamweaver prior to CS5 are not conducive to helping you write well-formed CSS.)
Add in any other elements and create the CSS styles you need in order to satisfy the following requirements:
Examples of the following table and box properties: border-color, border-width, margin, and padding.
Dynamic positioning with at least one example each of absolute and relative positioning. Make sure the positioning is obvious to those of us doing the grading, and label it as such. For instance, put an absolute-positioned
at the end of the HTML code but have the
actually display at the very beginning of the page, perhaps even over the top of other elements. Common “gotcha”: to get absolute positioning to render properly, you must place the absolutely positioned
within a “dummy” relatively positioned
Examples of a:hover, a:visited, and a:active.
Create the equivalent of a 2 column x 4 row table using 8
s placed in a 2 x 4 grid. Place different borders and backgrounds on each
but align them side-by-side so that they look like they are just six cells of the same table
, even though they have different formatting. You may use absolute positioning, relative positioning, or “float” to make this work.
Three visible CSS stylings on form elements, such as a dashed line border on a