Three separate hyperlinked pages, with navigational directors
As of August 12, 2006, my site has 60+ html files. Many of those
are short little book review files that I used for the frames section of my site.
The main section pages -- Professional Development, Technical Services, Cataloging, Collection Development, and Programming -- all have a menubar that links the main sections to each other. These main section pages also have navigational links on the left side of the page to navigate within the section. For example see the Professional Development page.
At least 20 external links
I haven't counted the number of external links, but here are the external links from the
Professional Development,
Technical Services and
Cataloging pages.
In addition, the Print Resources and Professional Reading sections on the main section pages have clickable
buttons that link to WorldCat information.
The use of a background image on one of the three pages (if appropriate)
This page has the background image, a fixed image, to the right of the text block. It should overlap just slightly
with some of the text.
The use of a background color (other than the default gray tone) on one of the three pages
All the pages of my final project use the background color of #99b5b6 (example: Collection
Development). The background color is set using style sheets (example: cssposition.css).
I've also used background attributes in my tables to change the color of tables and individual cells (see call number specifications).
The use of more than one font color (don't go overboard on this!)
To keep things simple, I stayed with the default black for the most part. The font color for the "site index" heading on the site index page is near white (#ffffca).
I did some color changes with links. The navigational links turn from black to white; and the external links turn from blue to green when the mouse hovers (example: Professional Development).
The use of more than one font style (don's go overboard on this!)
Again, to keep things simple, I used CSS to set most fonts to either serif or sans-serif.
- The font for the "site index" heading on the site index page is Lucida Sans Unicode. I wanted it to match the font in the banner. Font was set in styleblue.css -- in the h1 attributtes.
- The font used for web site URLs in the right-side content on the main section pages is Tahoma (example: Technical Services). Font was set in cssposition.css -- in the ".url" class.
- The font for the "Back to top" links in the right-side content is set to Arial (example: Technical Services). Font was set in cssposition.css -- in the ".backtop" class.
The use of the bold, italics, underline, center, and horizontal rule elements
- Bold: one of the places I use bold is on the training assessment form. I wanted the questions to stand out from the choices, especially in the field sets, so the questions are in bold.
- Italics: I used italic attributes several places in my stylesheets. For instance, in the style_reviews.css stylesheet I set the reviewer font-style to italic, as well as the signature font-style. Go to book reviews and click on any title in the left frame to see an example appear in the right frame. I also used the < i >...</ i > tag to italicize You are the experts! on the home page.
- Underline: I used the < u >...</ u > tag to underline You are the experts! on the home page. I also used the underline attribute in my stylesheets. For example in the cssposition.css stylesheet I set the text-decoration of the class sitename to underline. You can see the result in one of the main section pages (example: Collection Development -- the web site names will be underlined, but not the web site URLs).
- Center: On the main section pages, the right-side content headings are centered. For example, on the Cataloging page the < h2 > heading Cataloging & Classification Resources is centered, as well as the < h3 > heading MARC .
- Horizontal rule: Each main section page uses < hr /> to separate each resource. For example on the book repair page of the Technical Services section, each resource -- CoOL-Conservation OnLine: Resources for Conservation Professionals, The E. Lingle Craig Preservation Laboratory Repair and Enclosure Treatment Manual, and Library Preservation at Harvard: Caring for Personal Collections -- is separated by the horizontal rule.
The use of at least one basic table
The basic table is a staff information table. There's also a link to it from the
site index page.
The use of at least one advanced table
I use advanced tables for layout on the home page and the
site index page (they use colspan and rowspan attributes).
There is also an advanced table listing call number specifications
(it uses rowspan attributes).
The use of images
Almost all of the pages have an image, even if it is only the banner at the top of the page
(hcsd_banner.gif). Among the images I've used are:
Cover art: I couldn't find a definite yes or no on whether posting cover art is covered under fair use. In favor of fair use is the fact that a school district is a non-profit organization, and posting cover art probably isn't going to negatively effect the market for the book (or the artwork itself). If a book review specifically mentions the cover art, I think that enhances the case for fair use. If this were a real school district web site, I would feel comfortable posting cover art on recently reviewed and/or acquired books. On older book reviews that were archived, I'd probably remove the cover art image, but also link to WorldCat or another web site where the cover image was available.
I'm also curious about web sites like LibraryThing or Delicious Library that allow you to catalog your personal library collection. Both sites display cover art and have a mechanism where you can add your own image files. Delicious Library even recommends Google Images as " a great place to get cover art." There's no warning about copyright. Perhaps those sites have some kind of blanket copyright agreement with publishers.
- Screen shots of web sites: I also could not find a definite yes or no about capturing a screen shot and making a thumbnail image -- whether it is fair use. A URL is a fact. Is the screen shot a URL takes you to a fact? What if it contains a trademarked or copyrighted logo? It's nice to be able to put some kind of an image with a resource.
The application of text alignment
I used the text-alignment attribute in cssposition.css to right-align
the "signature" class. The result is seen at the the bottom
of the main section pages. The text in the "signature" class is not only on the right side of the box, but the text is
right-justified.
The application of image alignment
On most of the main section pages I wanted the images to appear above the resource descriptions, so I didn't
need to apply any alignment to the images. There were a couple of places in my site where I did apply alignment to images:
- Professional reading sections: In order to get the text to appear to the right of the image, and wrap around it, I had to add the align="left" attribute to the image tag.
- Card Catalog "Home" image: The same is true of the catalog card drawer image at the bottom of most of the main section pages. In order to get the text to appear directly to the right of the image, I had or align the image left.
The use of forms
- Barcode Request Form: this was the first form I created.
- Training Assessment Form: I put the most work into this form. Putting the radio buttons into a table was an experiment, but it seems to work.
- Book Review Submission: I wasn't sure what to do with the default right-side frame, whether to post a book review there or not. I decided to make it a submission form.
The use of field sets
The field sets are in the training assessment form. One
field set uses radio buttons and the other uses checkboxes.
The use of frames
The frames page is the staff book reviews page. The book reviews were
all written by Candi Pierce Garry, one of our middle school media specialists, and the reviews are used with her permission.
The files that show up in the left-side frame are book_reviews.html and book_reviews_author.html.
There are over 30 book review files that show up in the right-side frame. Here's an example of one (if you want to see the source HTML).
At least three applications of Cascading Style Sheets
- cssposition.css: most of my pages are controlled by this style sheet.
- styleblue.css: the main page and the site index page are controlled by styleblue.css
- style_reviews.css: the book reviews pages on the frames page are controlled by style_reviews.css.
At least one JavaScript application
The JavaScript application is a form validation on the barcode request form.
If you leave the "Your Name" box empty, you should get an alert message when you click the submit button. After filling
in the "Your Name" box, the form should submit successfully.
I tried writing the script by using our text as an example, but couldn't get it to work. I think it was because I wasn't sure what I should change in the text's example to fit my form. I ended up browsing the Web for form validation JavaScript and copied some script from http://www.elated.com/tutorials/programming/javascript/form_validation/, which I then adapted using our text as a guide.
Other Comments
I added a Yahoo! search box to the site index page on August 9, 2006,
and submitted my site to be crawled. I was told it may take a couple weeks. The search box is not working so far;
perhaps it will be by the time my project is graded.