Added Student Website links

I have added Olivia's web site to the links on the right -->
Also the site she created for her mother. I will add other links as I get them, so email me or make a comment on the blog.
I had a great week meeting you all and helping you out on your websites. Fantastic work and great ideas. Thanks!

Embedding Quicktime Movies

As with audio files, you can create a direct link to a .mov file form your web page and depending upon how the user has their browser set up, the movie can be downloaded to their computer or played in a new web page. A better way to provide video on your page is to use the embed tag to embed it into your page. You can also include controls for play, rewind, volume etc.


The link below has complete instructions and a break down of the code and parameters for inserting Quicktime Movies into your page using Dreamweaver.
Embedding Movies - Tutorial

Adding a Music Player to Your Web Page

There are several ways you can add music to your website. One of the most basic ways is to simply add a link to the music file (using the anchor tag) and the file (.wav / .mp3) will play when clicked depending upon how the end user has their browser configured for that file type.

A more sophisticated way is to embed a player to the page with controls that allow the user to play and stop and control the volume of the audio. Many of the players will also give you instructions on how you can customize the look of the player.

You can do a Google search for player choices. Here are a couple of different links to get you started.

Mini Flash mp3 Player
XSPF Web Music Player (Flash)
Wimpy Player
Yahoo Music Player

Rollovers and Image Swaps and Layers & Divs

There are several behaviours in Dreamweaver that you can use to create navigation rollovers and to swap out images.

EXAMPLES
Navigation Rollovers
Image Swap/Rollover
Show-Hide Elements (Divs)

Processing Images for the Web and Inserting into Web page

File Formats For Web Pages
Gifs and jpgs are the most common file type used in web design. They each have different characteristics and are best used for specific types of graphics. The most basic rule of thumb is that jpgs contain thousands of colours and are best used for photographs or other images with many colours or gradients. Gifs are best used for images that contain flat areas of the same colours, or graphics that contain few colours, such as line art, logos, text etc. Gifs can also be animated or transparent.

Using Photoshop to Save Image Files
I use the Save For Web feature in Photoshop to process and optimize web images. Here is a step-by-step tutorial that explains the process in detail.

Inserting the Image into Your Web Page
To insert images to your web site select Insert -> Image. From the dialogue window click on browse to choose an image from your computer and insert it into the page. In the images Property Panel you can then set the various properties or attributes for the specific image. (border, vspace, hspace, alt text).

LINKS:
Using Save For Web (Photoshop)

Tables and Columns and Rows and Cells

The majority of you will want to use tables to position the elements of your web page into your desired layout. At first, tables seem to be a convoluted and non-intuitive way to work, especially if you are coming from a world of print design, but if you layout your idea on paper, and follow some basic rules, it isn't too difficult.

Dreamweaver allows you to insert a table on your page, you can specify the number of rows and columns, the width of the entire table, the width of individual cells (TD's) and the height of the rows.

LINKS:
Basic Tables
Table Tips

Welcome to the class!!! Monday AM

This morning you will be working on your ideas for your site. Once you define your site's purpose, you should consider the following things:

• Colors
• Layout
• Logos / Graphics
• Images
• Navigation

We will be building the sites using Dreamweaver. Before you begin your first page think about how you want your pages to behave in the browser window. For example: width of the page content, horizontal or vertical navigation, are there common graphics on each page, is there a footer on each page.

Take a look at this page about designing for different window sizes, look at the examples and make a note about what will work best for your web site.