Placing Graphics on the Page


Images can be placed directly in the body of the document, along with other content such as text. In this exercise you'll begin to incorporate images into your documents.

In this book, all the images you work with have already been saved for use on the Web as GIFs and JPEGs. You will not need to save or optimize any graphics.

Graphic Formats for the Web

The most common and widely supported graphic formats on the Web are GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group). The process of saving images for use on the Web is known as optimization, and can be done with an image editor such as Macromedia Fireworks or Adobe Photoshop. When deciding whether to save a graphic as a GIF or a JPEG, aim for the highest image quality and the lowest possible file size.

As a general rule, GIFs should be used if the artwork has large areas of solid flat colors and little or no blending of colors. GIFs works well with text, vector graphics, images with a limited number of colors, and very small image dimensions. GIF images can be saved, at maximum, using 8-bit color mode in which only 256 colors can be represented. GIF files tend to load faster, have more optimization options, and support transparency and animation. The extension used for a GIF file is .gif.

JPEGs are usually the best choice for photographic images or images with a large tonal range. The JPEG format handles blending of colors very well and can produce much higher quality photographic images at a fraction of the size of a GIF. JPEG saves the image in 24-bit mode, retaining all the colors and using a lossy form of compression in which redundant data is lost. The lower the quality of a JPEG, the more information is lost about the image through this discard of data. Because of the lossy quality of JPEGs, any edits should always be done to the source file and resaved as JPEGs to avoid degradation of the image. The extension used for a JPEG file is .jpg.

A third graphic format, PNG (Portable Network Graphic), is also used for Web graphics. The PNG format was intended as a replacement of the GIF formatit combines features of both JPEG and GIF. PNG files are lossless, can compress better than GIF files and have more options for color control, can retain all colors like a JPG or use a limited number of colors like a GIF. PNG files are not intended to replace JPEGs. PNG does not support animation and is not supported by older browsers. The extension used for a PNG file is .png.


1.

Place the insertion point in front of the title Yoga Sangha at the top of the document and press Return (Macintosh) or Enter (Windows). Place the insertion point in the new blank line. Click the Images menu button in the Common category of the Insert bar; then select the Image option.

The Select Image Source dialog box opens, which allows you to insert a graphic into the page. An alternative method is to choose Insert > Image.

Tip

For Windows users, the Preview images checkbox provides a useful option that enables you to see a thumbnail of the images you click as you browse. When this option is selected, images are displayed in the Select Image Source dialog box along with their dimensions, file size, and approximate download time.

On the Macintosh there is no Preview images checkbox; if you are in column view mode, you see the image preview along with dimensions, file size, and approximate download time in the right pane of the Select Image Source dialog box after you select an image.

2.

Locate the file yoga_sangha-title.jpg in the Lesson_05_Graphics/Images folder.

The Select Image Source dialog box contains a variety of options. You can specify the folder from which you want to pick an image by using the menu (unlabeled on the Macintosh; labeled Look In on Windows) and selecting from the display of folder and files beneath the menu and view tools. Macintosh users have a hierarchical view that enables users to scroll through different levels of files and folders; Windows users have a Files Of Type menu that can be used to limit the view to specific kinds of files, and a File Name text field that displays the name of the selected file (normally, minus extension).

The URL text field displays the path that will be used by the index.html document to access the selected image. Below the URL text field is the Relative To menu. Set to Document by default, the Relative To option lets you choose how Dreamweaver references images: with document-relative (the Document option) or site root-relative (the Site Root option) references. In document-relative referencing, Dreamweaver constructs the path to the image based on the relative location of your HTML document to the graphics file. When Document is selected in the Relative To menu, the filename of the document into which you are inserting the image appears to the right of the menuin this case, you will see index.html. Site root-relative referencing constructs the path to the image based on the relative location of the selected image to the site root, also known as the top level of the local root folder. If Site Root is selected, the name of the site will appear to the right of the menu. Generally, you should use document-relative links and paths. If you have an extremely large site or plan to move pages frequently, you might want to use site root-relative referencing. Throughout the course of this book, you should use only document-relative paths for images.

You also have several additional options in the Select Image Source dialog box that are intended for use with dynamic sites. On the Macintosh, the Select File Name From section located at the bottom of the dialog box contains a Data Sources button and a Sites And Servers button; On Windows, the Select File Name From section is located at the top of the dialog box and has two radio buttons: File System and Data Sources, as well as a Sites And Servers button. The File System option is the default selection method on both Macintosh and Windows for the Yoga Sangha project site and others similar to it that do not use a server technology (such as ColdFusion, ASP, JSP, or PHP). The Data Sources and Sites And Servers options are used for dynamic sites in which a document executes on an application server. You do not need to use these options in the lessons contained in this book because you are not creating a dynamic, data-driven site.

3.

Click Choose (Macintosh) or OK (Windows). Enter Yoga Sangha in the Alternate Text field in the Image Tag Accessibility Attributes dialog box and click OK.

The Alternate Text option provides the opportunity to specify text that will displayed if users have graphics disabled, if their browsers are not capable of displaying graphics, if a particular image fails to load, or if another situation prevents the user from being able to see the graphic. Alternative text should be the text equivalent of the graphicit should describe the function. For example, alternative text should be included with any graphics that are critical for site navigation. Adding alternative text is useful because if users have graphics disabled or are using a text-only browser, they can see some of the information they would otherwise miss. Additionally, people who have vision disabilities use various programs, often called readers or speech synthesizers, which relay content on Web pages audibly. In these cases, the alternative text of an image is spoken. Many browsers will display the alternate text as the user moves the pointer over the image. The more descriptive and detailed your alternative text is, the more useful it is for users of your site.

At times, you might have graphics that serve a strictly visual function and do not display words or other imagery that are important to the content of your page. Spacer images, invisible graphics that occupy a certain space, are one example of nonfunctional graphics that can make it more difficult for users with vision disabilities to use your site if they are labeled inappropriately with alternative text. For these types of images, you should click the menu button to the right of the Alternative text field and select <empty>. Avoid setting irrelevant alternative textit does more harm than good.

In this exercise, the alternative text you specified is the same as the text that is shown in the image. Alternative text is an attribute of the <img> tag that defines images.

Tip

Alternative text can be modified via the Property inspector when the image is selected. The menu containing the <empty> option is also available in the Property inspector.



Creating Section 508 and WCAG-Compliant Sites

The goal of accessibility is to create sites that are accessible to the widest possible audience. Section 508 and Web Content Accessibility Guidelines (WCAG), both described as follows, address the need for accessibility on the Web.

Section 508 is an amendment to the Rehabilitation Act of 1973, which requires Federal agencies in the United States to account for the needs of people with disabilities, ensuring that all users have an equal opportunity to access the content made available through technologies such as the Internet. Section 508 defines the standards that are necessary for those who have disabilities to be provided with comparable information and services as those available to nondisabled users. Although Section 508 is not forced upon the private sector, it is important for all Websites to adhere to the practice of creating compliant code wherever possible for many reasons. Conditions ranging from poor or failing eyesight to color blindness or even total blindness affect a significant portion of the populationand your audience.

WCAG was developed by the W3C to address a wide range of accessibility issues and provide a set of clear guidelines for the development of accessible sites. Accessible sites are also important for WebTV, mobile phones, and PDAs. More information can be found at: http://www.w3.org/TR/WAI-WEBCONTENT/.

One solution is to create an alternative, text-only version of your site, but it might not be feasible or even necessaryparticularly given the issues of the kinds of content and services offered, amount of space available, time and resources needed to create additional pages, and increased requirements for site maintenance. A text-only page might not even be accessible, depending on the techniques used to create it and the content it contains. Another drawback to text-only sites is that they usually contain less information than their counterparts, and/or the functionality of the site is decreased.

Incorporating accessibility features into a single version of your site is usually the best method. It provides options in one place for as many different users as possible and avoids duplication of content and maintenance efforts. There are a number of ways to use integrated solutions to address accessibility issues without creating a duplicate site and with no degrading visual impact on your page designs. Dreamweaver provides you with easy ways to create accessible Web pages through the use of elements such as CSS, alternative text, descriptions, and summaries.


Note

To turn accessibility prompts on or off, choose Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows) and select Accessibility from the list of categories. Uncheck the boxes for any elements for which you do not want to be prompted for accessibility attributes.

4.

Delete the line of text Yoga Sangha that is formatted as Heading 1 and save the document.

The heading is no longer necessary because the image contains the name of the project site and alternative text has been included. The text, as well as the line that it is on, should be deleted.

Note

The yoga_sangha-title.jpg graphic was saved as a JPEG because of the large tonal range behind the text. To maintain the quality of the lines for the text, the image was saved as a high-quality JPEGresulting in an increased file size. As a lower-quality JPEG, the same image would show more JPEG artifactssmall, blocky squares where redundant data is discarded, which are more common in areas of solid flat color like the text Yoga Sangha. In this case, JPEG was the best option to compromise between the needs of the photographic areas and the text.





Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

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