Unit Thirteen

Learning About Templates

From Now Till the End:

The Final Project will be done in three sections. Each is worth 20 points. This week we will take the first steps in building the Final Project.

The idea is to work on the Final Project over a period of 2 full weeks. If you try to do it all in a day or two, you will not like the final website results—or your grade.

Note: You should approach this website project as if you were going to present it to a prospective employer. Keep the content G or PG rated. You should be able to show it in mixed company without any warnings or disclaimers.

Reading Assignment:

The reading assignment is found on the web. There are two parts.

First is a page that gives you some background on how templates work and how they are licensed by the author. (These templates are for free, but you must give credit to the author.)

Next is a series of pages that show 253 various free templates that you can use.

If you look at the source code for http://www.craftwebproject.com you will see that it is based upon a template from this site.

There are many template sites around on the web. Look out! They are not all free, and they are not all good. Many of them take shortcuts that make a site look unprofessional. Freecsstemplates.org is not like that. All of their templates validate in the W3C Validator at the XHTML-stict level.

Even better, the templates on this site have the menu systems pre-built for you! This is a major time saver. All you have to do is change the code in the unordered list that is the basis of the menu.

The templates don't have all the code for the menu list filled in; you will have to do that part. It isn't hard, but if you have never done anything like this and you want to see it done properly, take a look at the source code and the css style sheet that I have used online for http://www.craftwebproject.com

Whenever you see href="#" That means that the "#" is a placeholder and you need to put the actual address in that spot. (By the way the "#" is called and octothorpe.)

Notice that on my pages I added an id called "menu-here" in the list items. That id ties to the style sheet to show the actual page you are on by making the menu button a little darker than the unselected buttons. This menu code gets changed from page to page in the menu list so that it works for the page it is on.

There are two easy ways to see my code. Use the Firefox Web Developer plug in written by Chris Pederick, or use the W3C validator. There is an option on the results page that says "show source." Click that and then revalidate the page using the Revalidate button on the right side of the page. For css the source code shows up automatically in the W3C Validator.

Words to the Wise:

1. It is not a good idea to use a public or creative commons template to build a website that you are going to show to a prospective client as your work. After all they are hiring you, not some guy on the Internet. If they know anything they will look at the source code.
2. Don't remove the required references in the source code to the creative commons template that are required by the author of the template. You may very well be found out; and, even you you get away with it, it is wrong to steal.
3. Start out with creative common templates until you get a good feel for css based web layout. After a while you will be able to write your own templates and include your original ideas in it. Then you can use your own template for pages that you make in the future. Most web designers have half a dozen templates they use for most of their work—at least as a starting point. It just doesn't make sense to do the same work over and over.

Discussion and Quiz:

None this week.

Assignment:

Pick a template that you like from Freecsstemplates.org and set up the Home Page for your Final Project. The Home Page must meet these criteria:

1. The page must validate in the W3C HTML Validator as XHTML 1.0 Strict. It must display the XHTML 1.0 placard or a styled hotlink at the bottom of the page. The placard or hotlink must hotlink to W3C and check the page automatically. This criteria is mandatory to earn any points.
2. The Style Sheet for the page must validate in the W3C CSS Validator as valid CSS 2.1. This criteria is mandatory to earn any points.
3. The page must have a valid XHTML 1.0 Strict Doctype.
4. The page must use folders (i.e., directories). At least one to hold the css styles, and another to hold images. (This will also demonstrate you know how to use paths.)
5. Eventually, the website must provide a way to navigate smoothly between all the pages using some sort of menu system. Therefore, this page must have the menu system in place with the names of the other pages displayed in the menu system. This can be done the same way the template does it. No java-script should be used to make the menu work. It must be entirely based upon XHTML and CSS.
6. This page must refer to an external style sheet and must use that sheet for all styles applied to the page (except very minimal and infrequent use of <em> and <strong> around words that you want to emphasize or strongly emphasize). Even for this first page, do not place styles in the <style> element inside the <head> element. Use an external style sheet instead.
7. The Home Page must contain <img> elements, and use the appropriate src, width, height, and alt attributes.
8. The Home Page must use the following elements at least one time: <h1>, <h2>, <p>, <q>, <ul>, <ol>, and <li>.
9. Use class and id attributes correctly. (5pts)
10. Use padding, borders, and margins correctly. (5pts)
11. Demonstrate some variety of 2 or 3 column layout. (Almost any template at Freecsstemplates.org will meet this requirement.

Post the webpage and the attached stylesheet that you made above to your Internet site and tell me the exact address in the comments section of the assignment tool in WebCT for Unit 13.

Alternative Assignment:

If you want to start from scratch and make your own design, totally on your own, that is fine with me. Just make sure your page meets all the requirements listed above in items A. through K.

 

 

...Bill