Chapter 6Images in Dreamweaver &

Fireworks

Mrs. Johnson

Web Design

File Formats

Images on Web pages are usually GIF or JPG because these formats are widely supportedGIF formats are best used with graphics that do not contain many colors, such as clipart or logos. They are limited to 256 colors.JPG formats supports millions of colors and is best used for photographs.

File Formats

PNG format was created in the mid-1990’s during a controversy over copyright of the GIF format.

Has some advantages over GIF & JPG and is more widely accepted than it used to be

Both GIF & JPG formats are bitmap graphics, which are based on rows & columns of tiny dots that are square in shape.

Each square is called a pixel

The number of dots per inch (dpi) is called the resolution. The larger the number of dpi, the better the quality of the graphic.

GIF format allows one color in the graphic to be chosen as the transparent color, you can’t do this with a JPG. You’d use this feature to make the background transparent, so it wouldn’t show a white edge on a colored background

GIF

Interlaced means that a low resolution version of the graphic appears first and becomes clearer in four horizontal passes as the Web page loads. This is available with GIF files

Compression is a file format feature that reduces file size, which means the file will load faster.

GIF

GIF graphics are compressed, but retain all of the original information, which is called lossless compression.

JPG

JPG graphics - the compression is lossy, which means that some data in the file is lost or removed in order to reduce the file sizeThe more compression, the smaller the file, but the lower the image qualityJPG files can be progressive, which is similar to an interlaced GIF

JPG Compression

Alternative Text

Images may not be seen by all users. This may be because of a slow modem connected, and therefore they turn the images off.By adding alternative text, it will tell the user what was suppose to appear. You can also add a “screen tip” that appears over the image to tell the user what it is.

Adding Alt. Text

1. Select the image on the Web page document

2. Type the text in the Alt box in the Property Inspector

Graphic Hyperlinks

You can make an image a hyperlink too. A graphic hyperlink does not change to blue & underlined. It will have a hand appear over it when the mouse goes across it.

Create the same way as a text hyperlink. Select the picture and then type the address or find the web address to link it to.

Change hyperlinks

Links are modified or deleted by selecting Modify/Change Link

OR Modify/Remove Link

Image Maps

An image map is a graphic that contains one or more hotspots.

A hotspot is an invisible, defined area on a graphic that is a hyperlink. Just like a graphic hyperlink, when the pointer is moved over a hotspot on an image it changes to a hand.

Image Maps

When you make image maps, it is a good idea to add the screen tip, so the user knows if he/she clicks on this picture, it will take them to this certain page.

Creating an Image Map

1. Select the picture to display the Image properties in the Property Inspector

2. You will name your hotspot in the Map box; and you will select your hotspot tool (either a rectangle, oval or polygon)

3. Once you select your shape, you will place the cursor over the image until you see the crosshairs, you can begin to draw your shape over the hotspot.

Creating an Image Map

To draw with the Polygon, you will click to create the corner points of a shape. With each click, the area between is filled in. Double-clicking will finish the hotspot.

Remember to add the alternative text after you have the hotspot finished

Add the hyperlink in the Link box

Spacer GIF

Is a transparent GIF image that consists of only 1 pixel. Transparent means that it is not visible in a browser window

It’s used to control the layout of a table by forcing table cells to a specified width

Insert the spacer.gif in a cell and change the width of the image to the minimum that the cell should be if the browser window is resized

Aligning an Image

Select the image and either select:• Left

• Center

• Right

From the Property inspector

Resizing an Image

First resize in the webpage to get exact dimensions in pixels

Then open Fireworks to edit

If you don’t resize in Fireworks, the image has not been properly resampled (changes the size of the file and adjusts the pixels in the image)

Changing image size in Dreamweaver

Click the image once

Drag the corner handle while holding the SHIFT key

The shift key allows the width & height to remain in the same ratio, preventing distortion

Quality of images decrease if you make the image larger than the original (don’t do that)

Mistakes

On the property inspector, choose RESET SIZE to return an image to its original dimensions (image must be selected)

Fireworks

Edit a resized image in Fireworks

Once a image has been resized, select COMMANDS/OPTIMIZE IMAGE IN FIREWORKS

This opens the Fireworks program

Click the FILE tab and click UPDATE to change the image to the new dimension

Save

Fireworks

Used to edit images

Fireworks documents are PNG files, which can be exported in the file format of your choice (JPG, GIF)

File/New

Canvas is the rectangular area in which image will be created

Width/height usually in pixels

Resolution should be 72 pixels/inch

GIF support transparent backgrounds, JPG’s

do not

Tools Panel

Select section – to select the image

Bitmap section – to adjust/change image

Vector section – tools used to draw vector images (vector graphic is composed of lines connected by points)

SAVING

To save, Fireworks automatically will only save as a PNG file, to change to a JPG or GIF:File/Export PreviewChoose your format and click Export

Drawing objects in Fireworks

Select the tool from the Vector sectionDrag the toolTo change colors, stroke color (line color) or the tip size (thickness) use the Property InspectorPolygons – in the shape it can be either polygon or star – number or sides and degrees of Angle can be decided

Resizing objects

Use the W (width) and H (height) boxes in the Property Inspector ORRectangle is resized by selecting the pointer tool ( ) and dragging a corner handle of the rectangle. Holding the shift key will keep the W & H the sameSelect the scale tool and click an object in the canvas to display handles, drag a corner to resize the shape in proportion; drag a size handle distorts the shape

Add Text

Click the Text Tool (A) from tools panel

Click on canvas and type

Formatting features

text

When dragging a corner handle the text block is changed to a fixed width block, which means it will no longer change size as more text is typed

Aligning objects

Objects can be aligned with respect to each other by first selecting the objects and then selecting commands in the MODIFY menu

To select multiple files, use the Pointer tool (black arrow) and draw a rectangle around the objects

Example) Modify/Align/Center Vertical

Modifying the canvas

Modify/Canvas/Trim Canvas will reduce the canvas to exactly fit the objects

Modify/Canvas/Fit Canvas increases the size of the canvas enough to fit all the objects

Optimizing & Exporting

Before exporting objects to GIF or JPG, you need to optimize the objectOptimizing means to choose a graphic file format that has as much compression as possible while maintaining good image quality, this also helps to create the smallest possible file for faster loadingUse the File/Export Wizard

Creating a button symbol

Button is an element that indicates to the user that it is a graphic hyperlink

First create the rectangle or objects that make up a button

Select all objects and select MODIFY/SYMBOL/CONVERT TO SYMBOL and choose Button

Buttons

When a symbol is created, the objects on the canvas are changed into an instance of the symbol, which is a copy of the button symbol

Slicing – is the way fireworks divides an image so that interactivity can be assigned

Cloning

Nav bars have more than one button

Drag the buttons from the library OR select the object and click EDIT/CLONE

Button Editor Window

After a button has been selected, you can change the text, add a link and add a Alternate message (ALT)

Button symbol rollover behavior

Behavior is how a symbol interacts with the user

Rollover – default behavior for a button, which allows each state of a button symbol to display a different image

4 states:1. Up state – normal state,

button is in this state when pointer is not over it

2. Over state – pointer moved over button

3. Down state – button is clicked

4. Over while down state – pointer moved over a button that is in the down state

Exporting HTML & Images

Exporting fireworks documents with symbol instances generates many files, including a set of image files for rollovers and an HTML file that arranges the objects in the Fireworks documents in a table

Example) fireworks document with a button symbol and three clones generates an HTML document and up to 12 image files, one image file for each state of each button instance

Use export wizards to optimize and automatically generate all the files associaited with a fireworks document

FILE/EXPORT WIZARD

A fireworks document exported as HTML and Images to a Dreamweaver site is used by:

1. Open the HTML document that was exported from Fireworks

2. Select <body> in the tag selector to select everything in the document

3. Edit/Copy4. Open a web page and place the cursor where you

want the document5. Edit/Paste

Edit picture made in Fireworks from Dreamweaver, click the EDIT button on the Property Inspector

The PNG file that was created is opened, after edits are made and the PNG is saved, selecing DONE will close the file and automatically changed in Dreamweaver

Changing Behaviors in Dreamweaver

DESIGN PANEL – select the behaviors tab

Double-click any behavior listed

You can change the image, link, down image, over image, etc

Cropping images

Cropping means to remove parts of an imageSelect the crop toolDrag it over the image that you want to keepDouble-click the selected area to crop the image

Cropped image example

Edit other images

Select image

Choose EDIT from the property inspector