Newsletter Project

Many organizations publish newsletters. Getting people to read them is the challenge! An attractive layout that makes it easy to skim the page for relevant information will help. Pay attention to how you use design elements to create an eye-catching newsletter. Check the project page for details!

There are many professionally created templates on the Internet. Here are some from Microsoft Office.

Tabs Project

Certain computer skills separate "the men from the boys." The ability to use tabs properly in a word processing program is one of those skills. For this project, you will need to create a document in MS Word that makes use of a variety of tabs. Check out the project page for specific details.

Photo Editing with Fireworks

Editing and touching up photos used to be reserved for photo labs and artists. Today with image editing software, anyone can do it! Today we'll begin working on learning how to use Fireworks to touch-up and edit our photos.

Trick Out Your Website

Our focus the next couple of days will be on design. Believe it or not there are rules about will make your site look professional. The four basic principles we will be following are:

• Contrast
• Alignment
• Repetition
• Proximity

Here are some links to help you!

Good and Bad Web Design

Design Principles

Color Schemes

Top 10 Web Design Errors

Introduction to Dreamweaver

Some web designers code all of their websites in HTML. While it can be done, it makes it difficult to be creative. Dreamweaver by Macromedia is recognized by many as the top WYSIWYG (what you see is what you get) web development package on the market. Dreamweaver lets you concentrate on the look of your website, while the code is written for you in the background. Cool!

Today, we will learn how to set up a simple website in Dreamweaver. I will refer to this site as your 'Portfolio Site'. This site will be the place where I will go to check out all of your projects. It's a place where you can show off all your hard work in Computer Applications class.

Work Day!

Today will be a day to flesh out and polish your html website. Check the link at the left to see specifics about what you should include. Remember that a website is never really done. Feel free to come back and spruce it up from time to time!

External Links and Anchor Links

Including links to pages outside your website is what puts the 'web' in the World Wide Web. It connects your site with other pages you find interesting. The code is similar to what we learned earlier for hyperlinks between pages, with a few modifications. Here is the code for an external link:

<a href="http://www.linked_page.com" target="_blank">Link Name</a>

The target="_blank" portion tells the browser to open this page in a new window. This is a good practice when sending someone away from your site.

Sometimes you may want to link to a particular position on a page. This requires an anchor link. The first step is to mark the location on the page to which you would like to link. Insert the following code in the appropriate position on your page:

<a name="top">

I used the name 'top', but any name will work. Try to use something that will make sense.

<a href="#top">Link Name</a>

Notice that you need to include the '#' symbol in the link code to indicate that it is an anchor link.

Anchor links are optional in your html website, but if you've got time, give it a shot!

Inserting Images

Images are key to interesting websites. We are visual creatures and photos and graphics add a lot to a page. There are three basic types of images used on web pages:

• JPEG - files with the suffix '.jpg' This type of file is used most commonly for photos or graphics with gradients.
• GIF - files with the suffix '.gif' This type of file is used for "cartoon-like" graphics–those with 256 colors or less. GIF files can also have transparency.
• PNG - files with the suffix '.png' This type of file can cover all types of images. Supported by all current browsers, but still not in wide use.

Store all images in a special folder (usually named 'images' or 'img') inside the folder that holds your web pages. The code for placing images looks like this:

<img src="image_file.jpg">

If you put your file in the images folder (of course you did!), your code would look like this:

<img src="images/image_file.jpg">

We will learn to control the size of our images a bit later. Have fun!