Special Projects

It's fun to work on projects that will actually be used. Here are a few ideas some of you may want to help work on to help make our school website better:

• Home page redesign
• Photos for rotating gallery on home page - I want to do something similar to this.
• Dorm interactive tour
• New photos for virtual tour
• Gallery photos
• Adopt-a-page

If you're interested, let me know!

File Management Revisited/Intro to Design

Now that we've almost reached the half-way point of the first quarter, it's a good time to review file management. File management allows us to find the files we need when we need to find them. It also insures that our websites will work properly when we move them to a web server.

Today we will also begin looking at the elements of good design. Even though we are not professional designers, it is possible for us to learn some of the basic rules for design. If we follow the rules we should produce better quality work in print and electronically.

Editing Photos

Images play an important role in all types of media today. Image editing software, like Fireworks MX or PhotoShop, allow us to manipulate photos in ways only professional photo labs could have done just a few years ago.

Our first project is to edit a photo using some tools in Fireworks MX. For this project you should become familiar with:

• Changing brightness and contrast (Filters --> Adjust Color --> Brightness/Contrast)
• Using layers
• Using the following tools: pointer tool, crop tool, marquee tool, lasso tool, magic wand tool, eraser tool, and clone tool

The best way to learn the tools is a combination of instruction and experimentation. If your neighbor has done something cool ... ask how!

To see the impact a doctored photo can have, check out this site.

Portfolio Loose Ends

By the end of today you should be nearing completion on the framework for your portfolio website. I'm not concerned about the content yet, but you should think about adding some meaningful content soon.

Until then, you may want to use a layout technique known as "greeking". Greeking is simply putting place holder text to get a feel for how the actual content will look. Here's and example:

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.

Web Portfolio Construction I

Yesterday we spent a fair amount of time looking at how to use tables to assist in layout of a web page. Today you will start work on constructing your portfolio site. I will demonstrate how to use your home page as a template for the other pages of your site.

Tips for the day:

• Use 'Save as' to save copies of your home page that can quickly be modified into the other pages on your site.
• Recall that most of our users will have 800 x 600 pixel resolution or better on their monitors. The actual display area is closer to 780 x 468 pixels. This allows for space taken up by the browser on the screen. It is very important that your home page fit within this size. Other pages may be longer, but don't make your users scroll horizontally!

Structure and Storyboard

Today we will begin our portfolio site by planning the structure and beginning work on the storyboard. I'll demonstrate how to use PowerPoint to accomplish both of these tasks. Tomorrow we will start building the site, so it is important that today we gain an image of how how we want our site to appear.

Here are some useful links for today:

• Good and Bad Web Design Features - a highly respected web designer offers tips on good and bad sites.
• Color Schemer - for those of us (like me!) that have difficulty in telling what colors work well together, this sit makes things much easier.
• Top Ten Web-Design Errors - Jakob Nielsen is widely considered one of the top experts in making websites easy to use. Check this page for his current and past top ten lists on web design no-no's. Many won't apply to us, but many will.

Planning Your Portfolio Site

One of our ongoing projects this year will be constructing, modifying, and adding content to your portfolio website. This site will give you a chance to display your projects and tell the world a bit about you as well.

Today we are going to talk about planning the site. Planning is something we rebel agianst ... but it will save you lots of headaches in the future if you take the time to do it well.

The topics we'll cover today:

1. What is a digital portfolio?
2. Planning the stucture of your portfolio site
3. Storyboarding your site
4. Introduction to Dreamweaver

Finishing Up HTML Site

Today is the last day we'll be working on the HTML website in class. To see the basic requirements, click the link at the left. I won't be grading them until next week so you will have time to finish up on your own.

Remember, the real benefit of this class won't come from just meeting the minimum requirements. Use your time to learn new skills. Make your sites interesting and express yourself!

Work Day

We have covered all the basic tags we need to complete our HTML website. Today is for working towards completing your site. It should be completed by Friday, September 10.

Here is a sample web that shows how different formatting tags are used. Just look at the source.

I'll be available for help, but be sure to help each other!

Adding Images

Images make our web pages interesting. A page or plain text is just plain BORING! There are some guidelines to follow when using images on your web pages. Here are some issues we'll discuss today.

• Image size and file size - If you've ever waited minutes for a picture to download, you'll understand the importance of keeping file size down. Key point: Small in visual size is not the same as small file size. You should have a very good reason for having an image of more than 30K file size on your page.
• Use an 'images' folder - keep all images for a small to medium-sized website in an images folder inside your main web folder. This is only a convention, but it will save you lots of difficulty laer on.
• 'jpeg' and 'gif' formats - these are two different formats that compress (make file size smaller) your images. There are others, but these are the main ones. In general 'gif' images are for images with a limited number of colors (like logos or drawings) and 'jpeg' images are best used for many colored images like photos.

Web Naming Conventions

Today we should get a bare-bones HTML site up and running. One thing to emphasize today is the common practices when naming folders, files, pictures, etc. for a website. The widely accepted convention (way of doing things) is to use only lower case letters and no spaces for names in a website. If you've ever seen %20% in a URL--that's because that webmaster used a space in a filename. If a space would be helpful...use the underscore_key instead.

I can't wait to see what your creativity will produce!

HTML Web Project

To start things off today, we'll spend a few minutes talking about file management. How to keep all your electronic files orgamized so that you (and I) can find what you need.

Then we'll start constructing our first website in HTML. The cardinal rule of web design: Keep all files for a website in ONE folder.

Here are some helpful links:

• HTML Colors
• HTML Cheat Sheet