Set-Up Site Direstory

File Format

Physical Size

File Size

Export as GIF

Export as JPEG

It is very important to set up the structure of your site before you start authoring pages. Setting up the proper directory structure for your web site is crucial to avoiding problems later (such as broken links when files are moved) when you try to upload your pages to a web server. To display properly over the web, all of a site’s page files and images must be store on the web server. To make sure that all site files transfer together when you upload your site from your computer to the Web server set up the folders for pages and images before you create the site.

Set-Up Site Directory

Create a folder on your computer to hold your entire web site.

Within the root folder, create two folders for images. Call one "icon "and other "raw."

Graphics

File Format

Picking the correct image format is crucial to the optimization process. The most popular file formats for Web graphics are GIF and JPEG. Gif images are generally used for line art and images with solid colors. GIF images can contain transparent areas and can be used for animation files. The disadvantage of GIF images is that they are restricted to 256 colors. JPEG is generally used for photographic images or images with gradients and more colors. JPEG files cannot be transparent or used for animation.

All "GIF" and "JPG" graphics files should be saved in the "icon" folder.

Most graphic design programs will allow you to export in these formats, but once exported it is difficult or impossible to make corrections to your graphic. Therefore you should always save a copy of your graphics in the format of the program. These files should be placed in the "raw" folder. The file extension of Fireworks documents is .png.

Physical Size vs. File Size

Physical Size

When creating a graphic, make it the exact physical size that is needed for the web page. Even though you can change the physical size of a graphic by pulling the handles in or out from the graphic, this is not advisable. A small image that is pulled made bigger will look very jagged. This is called pixelation.

File Size

You always want your graphic to be the best quality with the smallest file size possible. Most professional graphics applications (Macromedia Fireworks or Adobe Image Ready) allow you to achieve this by following a few steps.

To export as a GIF:

• Choose a color palette from the Palette Pop-up. The best choose for optimization is Web 216. The Web 216 palette contains colors that work best on both the Macintosh and Windows platform. It is sometimes referred to as a Web-safe or browser-safe palette because it generates the best results on different platforms and different browsers.
• Check optimized to create the smallest file with the least number of colors. If you don't, all the colors of the palette will be included even if they are not used in the exported image.

To export as a JPEG:

• Use the Quality pop-up slider to determine the amount of data loss when compressing the file. The loser the number, the more compression, resulting in a smaller file but poorer-quality image.
• Choose the Smoothing amount to blur the hard edges of the image, which do not compress well in JPEG images. The higher the number, the more blurring, creating a smaller file size.
  Fireworks Instructions

Content and site design created by Carol Siwinski, Curricular Technology Specialist for Germantown Academy.

July, 2002