Some Potential Templates for Redesign

Here are some free CSS Templates:

• Zenlike
• Nautica05
• Nautica2.2 Liquid
• Multiflex-2
• Naturalist
• Three Quarters
• voodoo_dolly
• andreas08
• andreas02
• reflection by snop

Final Projects

We are wrapping up the year! Since some of you work more quickly, there is a need to have some additional projects to work on. You should do at least two of the following before the end of the year:

• Prom Disc and Jewel Case cover - the senior class will be recieving a CD with the prom booklet, presentation, photos, etc. Help make it more special by designing the disc and jewel case insert. Use the same templates you used for your portfolio CD
• CLHS Web Storyboard - The CLHS home page will have a new look next year. Design a storyboard for the new page. If I like yours...I might just use it. Use the current site for navigation content. The new site will have rotating images instead of a scrolling window.
• Church Web Banners - a number of our churches are using a new hosting service for their websites. Design a generic Christian banner that could be used in a rotating Flash animation at the top of the site. Here is an example of a church site that uses this service. The dimensions of the banner are 750 x 130 px. Save as a JPEG at 72 ppi.
• Gallery Page - a number of you have not completed a gallery page for the CLHS web. The gallery is currently not on the website, but may return shortly.
• Other - If you've got an idea for a project, run it past me!

Make sure all projects are linked to the portfolio page of your class personal website. The time will go quickly!

Blogger Template Modification

With the tools available on the Web today, anyone can have an online presence. In this project we will be creating our own blogs. Rather than just using a standard template that is in use by thousands or other people, we will modify a template and make it our own.

Here are some useful links:

• Blogger - This is the hosting site we'll be using in class. It's owned by Google and is pretty easy to use. The pages aren't cluttered with lots of ads and there are lots of templates available.
• Blogger Templates - This page includes lots of blog templates.
• Class Blogs - Once you've created your blog, put a link on this page. Check out how your classmates are doing.

Flash Web Project

For this project you will be creating a Flash home page for your portfolio. Flash gives us the ability to make compact, yet amazingly visually creative sites. Remake the home page for your class site with Flash. You will make a 780 px X 438 px movie that includes animated buttons and at least one other animated element. We will then incorportate the Flash movie into an HTML page that we create with Dreamweaver. The old saying goes: Don't judge a book by its cover. However, this is what people do all the time. You want your home page to have impact. It will make or break someone's view of your work.

For inspiration, here are some samples of Flash Sites:

Living Bold
Mini USA
The Humor Study
Lost
Okay Dave

These obviously go far beyond what I'm expecting, but they might stimulate your creativity!

Digital Photography

With the advent of the digital camera, taking photos has gotten much easier. No longer do we need to wait to see what "develops". Our next project will involve learning the basics to taking good photos. For this project you will need to:

1. Find five examples of great photos (make sure each photo is a different type)
2. Take and submit the following:

• portait
• candid
• landscape (on campus)
• creative (your choice)

Here are a few links to get you started:

• Kodak - America's premiere photography corporation
• Digital Photography Tips - from Adobe, the PhotoShop people
• Adobe - Lots more great tips from Adobe
  
• Portrait Photography - article on taking portraits
• Sports Photography - tips on taking sports photos
  

Podcast Wrap-up

Our goal is to have our podcasts finished and ready for preview by the end of the week. Don't try to do too much in this first attempt!

Podcast Project

Here is what you should do today:

1. Organize yourselves into groups of three (at least one person different than the last project)
2. Select a topic for your podcast (Remember your podcast is a promotional spot for our school)
3. Begin blocking out what you would like your two-minute podcast to be like
4. Write and edit the copy for your narration
5. Select interviewees to include in the podcast
6. Select music to use in your production
7. Record narration
8. Record interviews
9. Edit into final form

Here are some resources for you to use :

Open Source Audio - over 15,000 songs available for use
Podsafe Audio - more music specifically written for podcasts
PDX Bands - more music for podcasts
Sound Effects - from the Free Sound Project
Educational Podcast Resources - even more stuff

Flash Project II

Our first Flash animation was very simple. Our second project will add a few elements, namely movie clip symbols, control buttons, and sound. Try to think of a simple animation where all these elements can be incorporated. Here are some useful links:

• Sound effects for Flash - find the perfect sound for background or buttons, etc.
  

Greek Text

When designing a web page, text is often an important part of the design. Designers may not know and certainly don't need to be bothered with putting together meaningful text while designing a page. Nonsense text, often called 'Greek Text' is often inserted instead. The process is called 'greeking'. Here is some Greek text which you can copy and paste into your designs:

Lorum ipsum dolor sit ament, con; venami quis nostrud laboris nisi ut nostrdt ut aliquip exd srtd ae dertsd. In redrids ftrh de venami sil de thws sdes fedq diy amin. Classic Plan, dolor sitm nitjh; dfer trdsdf nodstrdf thikl in quis. Lorum ipsum dolor sit ament, con; venami quis nostrud laboris nisi ut nostrdt ut aliquip.

Exd srtd ae dertsd. In redrids ftrh de venami sil de thws sdes fedq diy amin. Loruim ipsum dolor sitm nitjh; dfer trdsdf nodstrdf thikl in quis. Lorum ipsum dolor sit ament, con; venami quis nostrud laboris nisi ut nostrdt ut aliquip exd srtd ae dertsd. In redrids ftrh de venami sil de thws sdes fedq diy amin. Sitm nitjh; dfer trdsdfnodstrdf thikl in quis. Lorum ipsum dolor sit ament, con; venami quis nostrud laboris nisi ut nostrdt ut aliquip exd srtd ae dertsd. In redrids ftrh de venami sil de thws sdes fedq diy amin. Loruim ipsum dolor sitm nitjh; dfer trdsdf nodstrdf thikl in quis.

Lorum ipsum dolor sit ament con.

Lorum ipsum dolor sit ament.

Olor sit ament, con; venami quis.

I quis nostrud laboris nisi ut.

Ipsum dolor sit dsdfed ament.

I quis nostrud laboris nisi ut.

Nisi ut nostrdt ut aliquip.

Ut aliquip exd srtd ae dertsd.

Lorum ipsum dolor sit ament, con; venami quis nostrud laboris nisi ut nostrdt ut aliquip exd srtd ae dertsd. In redrids ftrh de venami sil de thws sdes fedq diy amin. Loruim ipsum dolor sitm nitjh; dfer trdsdf nodstrdf thikl in quis. Lorum ipsum dolor sit ament, con; venami quis nostrud laboris nisi ut nostrdt ut aliquip. Dolor sitm nitjh; dfer trdsdf nodstrdf thikl in quis. Lorum ipsum dolo.

Web Storyboard Project

Before going into actual production of a web site, it's wise to prepare one or more mock-ups or storyboards to show the client what a potential web site might look like. It will give them the opportunity to comment on color scheme and overall design before the site is actually produced. Remember, it's easy to make changes in design before you start. It's really tough after you start.

Use Fireworks to make your storyboard. Create a new image file that is 1024 x 768 pixels with a resolution of 72 ppi. Add a layer with the outline of a 780 x 438 px rectangle in the upper left portion of your image. This is the primary area of interest in your website. Many people still use monitors with 800 x 600 px screen size. The area inside the rectangle will be the visible portion of that appears on the screen. All content on the home page should fit within this rectangle. On other pages, users can be required to scroll down, but scrolling to the right is a no-no. Don't include content on any pages further than 780 px from the left margin.

Make use of layers in your storyboard to allow for quick and easy changes. The color scheme is one of the most important factors in a web site. Here are some sites with tools to make things a bit easier for those of us who are chromatically challenged.

• Color Match - Look through some suggested themes or build your own
  
• Color Schemer - Input a pricipal color and see what others will work well together
  
• Web Color Schemes - a collection of color schemes that work well together