Inserting Images

 < Day Day Up > 



Images are an important, though not required, part of your site. They set a mood and provide clarity to your content. The basic Web image file formats are GIF and JPEG, although other file formats are viewable in newer browsers. It is safest to stick with GIF and JPEG. You may add images to your page via the Insert bar's Common toolset, the Insert ® Image menu option, or by using the Assets panel.

 Fireworks MX   See Chapter 23 for more information about Web image file formats.

Use the Property inspector to modify an image's attributes. Add Alt Text to your images to provide additional information and to aid accessibility.

Tip 

If you accidentally distort an image by clicking it or dragging one of its handles (the small black dots that display when an image is selected) don't worry. The W (Width) and H (Height) fields display the current image size. If the value bold, the image has been distorted. Click W or V once to restore the value.

The Assets panel

Images are site assets. The Assets panel provides access to all the site's images without opening folders. Since folders are a great way to organize your site, the Assets panel can save you lots of time looking for a specific image — it displays images in alphabetical order, without listing the folder structure. Dreamweaver tracks any image inserted and adds the correct path structure.

The Assets panel is located in the Files group. Click the Assets tab to activate the panel and click (if necessary) the Images icon (Figure 33-2) to view all image assets. To insert an image into your page, place your cursor where you want the image, and select the correct image from the Assets panel. Right-click (Control-click) and choose Insert or use the Insert button at the bottom of the panel.


Figure 33-2: Right-click (Control-click) to insert an image.

 Fireworks MX   Double-clicking an image in the Assets panel opens Fireworks MX. This is good, if you want to edit the image; but it can be annoying if you accidentally double-click when you really wanted to insert.

Adding images to the mission statement page

 Habitat Alert site   Before doing this exercise copy the Habitat Alert folder (in the chapter33_exercise folder) onto your hard drive. Then define the folder as a new Dreamweaver site (refer to the "Defining a Site" section in Chapter 32).

Hint: If you already have another Habitat Alert site defined, then choose the Edit Site option in the Site panel of the Site Definition drop-down menu and change the path to the Local Root folder.

To add images to the mission statement page of the Habitat Alert defined site, follow these steps:

  1. Open  mission_statement.htm from the Find folder if you've closed it. Place your cursor into the page just before the text content; then open the Assets panel to Image assets.

  2. Select  logo_white_top.jpg, right-click (Control+click) and Insert (or click the Insert button in the Assets panel). Press your right arrow key to deselect the image and move to the right of it.

  3. Locate and insert  nav_map.gif.

  4. Press the right arrow key to deselect the image then press the Enter/Return key two times to add two paragraph spaces.

    Tip 

    Press Shift+Enter/Return to add a single space or line break. To view line breaks in Design view, edit the Invisible Elements category of your Preferences. Check the Line Breaks box and click OK to close the dialog box. Then, in Design view, access the Document bar's View Options ® Visual Aids ® Invisible Elements. This forces Macromedia Dreamweaver MX to use an icon to represent the line break. Don't worry that it disturbs the layout, as that is only temporary and will not occur in a browser.

  5. Insert  mission_statement.gif.

  6. Save the page and preview it. Keep it open for later. Figure 33-3 shows the results so far in Internet Explorer.

    click to expand
    Figure 33-3: Images added to the mission statement page

Editing images with Fireworks MX

Use the integration between Macromedia Dreamweaver and Macromedia Fireworks to edit an image.

Before doing this exercise copy the Habitat Alert folder (in the chapter33_exercise folder) onto your hard drive. Then define the folder as a new Dreamweaver site (refer to the "Defining a Site" section in Chapter 32).

Hint: If you already have another Habitat Alert site defined, then choose the Edit Site option in the Site panel of the Site Definition drop-down menu and change the path to the Local Root folder.

You can easily perform simple edits to the width or height of an image with the current Web file with the following steps:

  1.  Habitat Alert site   Open the  mission_statement.htm if you closed it.

  2. Select the m_s.gif image. This image is a bit large; so make it smaller.

  3. Click the Edit button in the Property inspector to launch Fireworks MX, which asks whether you want to open the source image or edit the current Web file, click No.

  4. In Fireworks, click Modify ® Canvas ® Image Size.

  5. Type 166 into the top width field. The height changes automatically because the Constrain Proportions option is checked.

  6. Click OK.

  7. Click Done.

  8. Return to Dreamweaver and click the Reset button in the Property inspector to reset the size of the image.

  9. To optimize the image — edit its palette, format, or transparency — select the image in Dreamweaver; then choose Commands ® Optimize Image in Fireworks. This places you in the Fireworks Export Preview window in (Figure 33-4). You can close the window without making any changes.

    click to expand
    Figure 33-4: Dreamweaver to Fireworks, at your command

 Fireworks MX   See Chapter 23 to learn more about editing and optimizing images.

Editing the background image

 Habitat Alert site   Before doing this exercise copy the Habitat Alert folder (in the chapter33_exercise folder) onto your hard drive. Then define the folder as a new Dreamweaver site (refer to the "Defining a Site" section in Chapter 32).

Hint: If you already have another Habitat Alert site defined, then choose the Edit Site option in the Site panel of the Site Definition drop-down menu and change the path to the Local Root folder.

The background image,  vert_stripe.gif, repeats along the right edge of the page if the browser window is expanded because the image's width is only 700px. To avoid this, add extra space to the right edge of the image in Fireworks. Because you cannot select and edit from the Property inspector, follow these steps:

  1. Choose File ® New and create a new Basic Page.

  2. Insert  vert_stripe.gif into the page.

  3. Select the image and click the Edit button. Use the current file, if asked (click No).

  4. In Macromedia Fireworks MX, choose Modify ® Canvas ® Canvas Size.

  5. Click the top, left anchor button (Figure 33-5) and change the Width value to 1600. Click OK.

    click to expand
    Figure 33-5: Select the top-left anchor to add additional space to the right of the canvas only.

  6. Choose Modify ® Canvas ® Canvas Color and set the color to White. Click OK and click Done.

  7. You can close the new document in Dreamweaver without saving. Dreamweaver lets you know that your page is not saved — just click OK for any warnings.

  8. Save the  mission_statement.htm page in Dreamweaver, and preview it (Figure 33-6). With the wider image, the browser window must wider than 1600px for you to see the stripe repeat.

    click to expand
    Figure 33-6: No stripe along the right edge, even with the browser wide-open

Note 

What you just did was a trick to change the original GIF background image in the  mission_statement.htm page. That's why you didn't need to save the new HTML page.



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net