JCarousel & Shadowbox.js

Our final in class example makes use of two open source Javascript libraries, JCarousel and Shadowbox.js.

These Javascript libraries work in much the same way. You download a chunk of code, which handles most of the heavy lifting, and then you follow a few steps to integrate the code with your site and customize to your liking.

The first library, JCarousel, helps you add a dynamic image carousel to your webpage and can be found here: http://sorgalla.com/jcarousel/

The second library, Shadowbox.js, allows you to add an overlay for images onto your website. You have probably seen similiar functionality on other websites before. You can find the source for Shadowbox.js here: http://www.shadowbox-js.com/

I will walk you through the basic properties of both of these libraries but please be sure to take the time to read the documentation and view the demos on each site if you are interested in using these in your project. Remember firebug is your friend and using it as a tool to dissect CSS for both examples, but especially JCarousel, can be extremely helpful.

 

@font-face

Remember how I said HTML only supports basic web-fonts? Well with advances in CSS that limitation is becoming a thing of the past. Using the tool provided below you can generate your own fonts for the web.

http://www.fontsquirrel.com/fontface/generator

Here a site I have used this functionality on recently.
http://www.getsidecar.com/

HTML 5 Video

Hi Class,

I’ve attached an example showing how to add video using the new video tag included with HTML5. Due to the size of the videos, I have decided to upload this file to the web rather than using email so you will have to click the link below to download the file.

https://www.yousendit.com/download/cEd0ZGl0NEhvQUt4dnc9PQ

The code for this example was taken from:
http://camendesign.com/code/video_for_everybody

Scheduling update

Due to a copy and paste error on my part the class schedule is listed as Monday for the final two weeks. This is incorrect; the last two classes will be at the normal schedule of Thursday 7pm.

Alpha Transparency with PNGs

http://www.artzstudio.com/2008/07/png-alpha-transparency-no-clear-winner/

Final Project Guidelines

Here are the guidelines for the final project, which we will discuss in class.

I will have my midterm evaluations to you in the next few days.

Final Project Requirements

CSS and Inheritance

Hi class,
Here is a great PDF on CSS and Inheritance. Please read this at some point over the next week when you have a moment and feel free to ask me any questions you may have.
CSS and Inheritance

Week 7 Slides

Slides for Week 7 (November 18th)

Additional Resources

960 general
http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/
http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/
http://divitodesign.com/css/960-css-framework-learn-basics/

Navigation & Buttons
http://www.mattvarone.com/web-design/css-text-based-navigation-bar-with-images/
http://css.maxdesign.com.au/listamatic/index.htm
http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors/

CSS Positions
http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS Floats
http://css-tricks.com/all-about-floats/
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://css.maxdesign.com.au/floatutorial/index.htm

CSS Backgrounds
http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/
http://css-tricks.com/perfect-full-page-background-image/

CSS Fonts
http://www.typetester.org/
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

CSS Box Model
http://css-tricks.com/the-css-box-model/

Templates in Dreamweaver

Hi Class,

Below I’ve attached two guides on templating with Dreamweaver. The idea of a template in Dreamweaver is to create a static layout file with editable regions to unify design across multiple pages. The advantage here is that you can make changes to your template file and it will be reflected across multiple pages. The disadvantage is that this feature is exclusive to dreamweaver and may hinder your learning experience with HTML.

The choice to use a template is yours. If you have any questions on templates or would like help setting up a template with your project send me an email and I will be glad to help.

http://www.adobe.com/devnet/dreamweaver/articles/dw_templates.html
http://www.entheosweb.com/website_design/dreamweaver_template.asp