Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Insert and Align Graphics

In this task, you'll insert a number of images into three pages in the site, and then format the images. Some of the pages have images in the main content area, and all the pages have images in the left column (Products, About, and so on).

I227 code, images are inserted using the <img> tag, as shown in the following example:

<img src="foldername/filename.jpg" alt="This is a description or caption for the
image" />

The <img> tag has a number of attributes, but you'll only need to use two for every image: the src and alt attributes. The src attribute specifies the location of the graphic on the server, relative to the file into which it's inserted. The alt attribute, as you've seen in previous lessons, provides a textual description of the image, useful for users who access Web pages with nongraphical browsers, including screen readers.

Note

The <img> tag is known as an empty tag. That is, it does not have an opening and closing tag, as does, for example, the <p> </p> tag pairing. In the latest version of th218 standard, XHTML, empty tags are not allowed. To close these empty elements, add a space and a slash before the closing angle bracket, as in the following examples: <img />, <br />, and <hr />.

Dreamweaver writes all this code for you when you insert an image. Nevertheless, it's a good idea to maintain at least a working familiarity wit221, even if you're using a visual editor such as Dreamweaver.

You inserted these two images as placeholders when you created the template in the previous lesson. Now that you're working on about, the first thing you need to do is remove the placeholders and replace them with the appropriate graphics for this page.

You can remove and insert any content (whether text or images) freely because you designated this area as an editable region when you set up the template.

Tip

Most elements in the Insert bar can also be found in the Insert menu. For example, you can insert an image from the main menu by choosing Insert > Image.

Use the Insert Image Source dialog to locate the image you need for the page. Check the Preview Images checkbox to preview the image you want to insert. Notice that the URL we have is a relative URL; it specifies the location of the file relative to the page in which it's inserted.

[View full size image]

The image appears in the page and is right-aligned, as was the image it's replacing. That's the alignment you want for this image, so leave it as is.

The look of the template is preserved, but you've given the page a new identity by replacing these two graphics.

The file about is finished. In the process of developing this page, you've built a new page based on a template, worked with text, established various types of hyperlinks, created and formatted a table, and inserted and aligned images. These are core Dreamweaver skills that you'll use over and over again.

Even though about is finished, two more pages still need changes.

[View full size image]

You don't need to replace the page graphicPRODUCTSbecause the correct one for this page was used in the template and already appears.

You can't center-align an image left-to-right i227 using the <img> tag alone, because its align attribute doesn't include horizontal centering. However, if the image is inside a <p> tag, you can apply centering to the <p> tag, and if that <p> tag contains only an image (as in this case), then the image is center-aligned.

Note

You can also align objects with CSS. In fact, the alignment options are much more robust in CSS than they are i227. The only downside to aligning objects in CSS is that it takes an extra step up front. The extra setup is usually worth it, especially for large sites. Because this site is small, you can stick to the Property inspector, which aligns usin220.

[View full size image]

[View full size image]

The image appears above the content block, right below the page heading. The alignment leaves something to be desired. By default, text doesn't wrap around images, wasting considerable screen space and pushing your content offscreen.

Note

While most users tolerate some vertical scrolling in Web pages, usability tests have shown that any content that must be scrolled to be seen is much more likely to be overlooked or ignored than content that appears without scrolling.

It's not always possible to prevent pages from scrolling, but you can wrap text around images to make better use of screen space

Tip

Designers use the phrase "below the fold" to refer to offscreen content that can only be seen if the user scrolls down the page. The phrase is a reference to traditional newspapers, where the day's most important content is placed above the fold on the first pagethe portion of a newspaper visible from newsstands or vending machines.

The Align drop-down menu provides access to all the values of the <img> tag's align attribute. Many options are available. Two of the options, Left and Right, enable text wrapping.

[View full size image]

You can use any method you learned earlier to create this link. This step completes the development of products.

Click the hyperlink you created in Step 10. It should take you to organic, where visitors can learn more about Jade Valley's organic farming approach.