Chapter 6 Images in Dreamweaver & Fireworks Mrs. Johnson Web Design

File Formats Images on Web pages are usually GIF or JPG because these formats are widely supported GIF 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 size The more compression, the smaller the file, but the lower the image quality JPG 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 Preview Choose your format and click Export

Drawing objects in Fireworks Select the tool from the Vector section Drag the tool To change colors, stroke color (line color) or the tip size (thickness) use the Property Inspector Polygons – 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 OR Rectangle 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 same Select 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 object Optimizing 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 loading Use 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 in the tag selector to select everything in the document 3.Edit/Copy 4.Open a web page and place the cursor where you want the document 5.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 image Select the crop tool Drag it over the image that you want to keep Double-click the selected area to crop the image

Cropped image example

Edit other images Select image Choose EDIT from the property inspector