Getting Visual, Part 1:
Adding Images and Graphics
What You’ll Learn in This Hour:
. What the main image file types are and when to use them . How to import an image into Expression Web 4
. How to insert an image into a page
. How to change the placement and appearance of an image in a page
Because the World Wide Web is a visual medium, making your website visually pleasing is important. The easiest way to do this is by adding images and graphics to the text. However, images can be so much more than just eye candy. As hinted at in Hour 5, “Getting Connected With (Hyper)Links: The Cornerstone of the World Wide Web,” an image can also be used as a link or even as a navigational tool. If you dis- sect websites, you find images used as borders, backgrounds, buttons, underlines, and even text. The possibilities are endless.
In the past, heavy use of images in websites was frowned upon, mostly because peo- ple were on slow dial-up connections, and the images made the pages heavy and slow to load. But, now that broadband Internet is becoming more and more preva- lent throughout the world and image-compression technology has evolved to a point where web-quality images take up little memory, web designers rely heavily on image elements to improve the look of their sites.
The bottom line is this: Used correctly, images can be a great tool to enhance the look and feel of your website.
ptg7913109
Images on the Web: Three File Types for Three Uses
At first glance, it looks like all images on the Web have the same format. But, in real- ity, they are different. Web designers choose different file formats, with different attributes, depending on how they plan to use an image. That choice in turn affects how a page looks and works.
Most current browsers support three main image formats: GIF (Graphics Interchange Format), JPEG or JPG (Joint Photographic Experts Group), and PNG (Portable Net- work Graphics). Each format has advantages and limitations:
. The GIF format produces the smallest files for quick downloads. Unfortunately, the image quality of a GIF file is poor. When introduced, the GIF format was the only format that supported transparency. It gave designers the option to create graphics that could display on top of other graphics or display without an unsightly box around them. However, this transparency is coarse and effec- tive only with images that have clean lines. In addition, the GIF format can display only up to 256 colors, severely limiting the kinds of images that design- ers can use it for. For these reasons, the GIF format is best suited for computer- generated content and line drawings. Today’s designers use the GIF format mostly to display small icons and buttons (see Figure 6.1).
FIGURE 6.1 A GIF image with transparency on a white back- ground and a transparent background. The file size is 3.82KB.
. JPEG or JPG is the most common image format on the Web. Its success stems from its high compression rate and low image noise. JPEG has become the standard format for images not only on the Web, but also in digital cameras and other devices. JPEG is a compression format that uses advanced algorithms to recalculate the image data and remove content that is not easily noticed by the human eye. Among the many different things a JPEG compressor does is evening the colors, duplicating similar looking areas, and compressing the actual image code to make it shorter. At high-quality (and low-compression) settings, JPEG compression can be excellent, but if you set the compression too
ptg7913109 high, the image can end up looking a bit like a paint-by-numbers painting
(see Figure 6.2). The JPEG is “solid” and cannot be made transparent. Today it is recommended that you use the JPEG format for photos and other organic images. For computer-generated graphics, the PNG format is preferred.
FIGURE 6.2 A JPEG image with minimum compression to the left and max- imum compres- sion to the right.
At minimum compression, the file size is 21KB; at maxi- mum compres- sion, it is 14.2KB.
. PNG is the newest of the three formats. PNGs fare bitmaps that carry with them an alpha layer that tells the browser what portions of the image are transparent. As a result, you can superimpose PNGs on top of other images with full transparency. Unlike the GIF format, PNG transparencies are clean (see Figure 6.3). The ability to create advanced transparencies makes the for- mat ideal for logos and other superimposed and hovering graphics in websites.
Some older browsers, in particular Internet Explorer 6, do not support PNG transparencies. The PNG format was designed to handle computer-generated graphics and does a far better job at it than the JPEG format.
FIGURE 6.3 A PNG image with trans- parency on a white back- ground and a transparent background.
Note that, unlike the GIF format, the transparency in the PNG is clean. The file size is 7.1KB.
Importing and Inserting an Image
Images are the most common nontextelements featured in web pages. And because images are so heavily used, there are many different ways to handle them depending on how the designer plans to use them.
The easiest use is simply inserting an image into a page. To do that, you need to import the image file into your project. But before you do, it’s a good idea to start thinking about how your site is organized. Look at the Folder List panel, and you see that your site currently consists of two pages: default.html and myCameras.html.
Now, you are adding image files to your site, which means they appear alongside your two HTML files. If you were adding just two or three images, this wouldn’t be a
ptg7913109 problem. But as you saw in Hour 2, “Beginning at the End: A Walkthrough of the
Finished Project,” the final site has a large number of images and files. So, before things get too complicated, it’s a good idea to start organizing everything in folders.
In other words, you need to make a folder for your images.
Creating a New Folder and Importing a New Image
Folders serve as effective tools for keeping your site organized. Websites have a ten- dency to fill up with files fast, and it’s important to think about file organization early. The Folder List panel gives you easy access to all the files and folders in your site, and you can use it to create new files and folders and organize them.
1. With the Folder List panel selected, click the arrow next to the New Document icon on the Common toolbar and select Folder (see Figure 6.4). Alternatively, you can right-click inside the panel and select New, Folder.
FIGURE 6.4 One of several ways to create a new folder is to select Folder from the New drop-down menu on the Common toolbar.
2. Name the new folder Imagesand double-click it.
3. Select File, Import, File as you did in Hour 5. In the Import dialog, click Add File and browse to the location where you stored the downloaded lesson files on your computer.
4. Click Hour 6 and select the file called camerasSmall.jpg. Click Open, and then click OK. Expression Web 4 copies the file and stores it in the Images folder. You can see it in the Folder List panel by clicking the + icon next to the Images folder (see Figure 6.5).
ptg7913109 Expression Web 4 is finicky when it comes to image files. If you add images into
your website without importing them through Expression Web 4, they might not work properly in Design view, and you see a small square with a red X instead of the image. This doesn’t mean that there is anything wrong with the image; in fact, if you preview the page in a browser, you see that the image is there. The problem has to do with how Expression Web 4 handles files internally. The best (and only) way to avoid this problem is to make it a habit to import all image files properly through the Import File dialog.
Now that Expression Web 4 has imported the image into your project, it’s time to insert it into a page. You can do this in Design view by dragging and dropping the image into the text. To start, open the myCameras.html file. In the Folder List panel, click and hold the camerasSmall.jpg file and drag it to Design view. You see a gray dotted marker jump around inside the text indicating where the image insertion point will be. Place the image at the beginning of the first paragraph under the head- ing and let go. Doing so opens the Accessibility Properties dialog (see Figure 6.6).
FIGURE 6.5 The imported image file as it appears under the Images folder in the Folder List panel when the + icon has been clicked. If you click the – icon, the folder is closed and the + icon reappears.
Watch Out!
FIGURE 6.6 The Accessibility Properties dialog lets you cus- tomize the infor- mation attached to the image for those who can’t view the image itself.
ptg7913109 The Accessibility Properties dialog gives you the option to attach alternative text and
a longer description to your images. Some visitors cannot see the images in your page because they are using a text-only browser, portable device, or text-to-speech browser.
The alternative text displays in place of the image for these users and helps to explain what the image shows. It also appears if, for one reason or another, the image doesn’t load properly when the page is opened by someone using a regular browser. The alternative text should be a description of what the image is. In this case, enter Most of my cameras together in the Alternate Text text box and then click OK. Expression Web 4 inserts the image in the text at the beginning of the first para- graph (see Figure 6.7).
FIGURE 6.7 The inserted image as it appears in Design view.
Save the file and preview the page in a browser. Something is a bit off; the image breaks the text and leaves a large empty area to the right (see Figure 6.8).
This big void appears because, by default, web browsers consider images to be
“inline” elements, meaning they appear alongside the other elements on the line just like a letter or word. If you’ve ever placed images in a Word document, you are prob- ably familiar with the concept of “text wrapping.” The solution to the problem is similar when we work with websites: Tell the browser that the image should not be considered part of the text but rather an object around which the text should wrap.
This can be done using the Picture Properties.
ptg7913109
Using Picture Properties to Change the Appearance of an Image
After an image is part of a web page, you can use properties and functions to tell the browser how to display the image and how the image should relate to the surround- ing content. In addition to simple HTML properties, Expression Web 4 gives you access to some basic image-editing options normally found only in dedicated imag- ing software. You can access some of these options by right-clicking the image in Design view and selecting Picture Properties from the context menu. Doing so opens the Picture Properties dialog (see Figure 6.9).
The General Tab
Under the General tab, the Picture field tells you the file with which you are currently working. You can change the file by using the Browse button or by typing a new file- name in the Picture text box. The Edit button opens the source file in the default image editor on your computer.
FIGURE 6.8 The page with the inserted image as it appears in Opera.
ptg7913109
Expression Web 4 Is Not an Image Editor!
Even though you are presented with the option of using Expression Web 4 to change the file formats for images, it is not something I suggest you do. Expres- sion Web 4 is not an image-editing program, and the options you are given are both restrictive and potentially destructive. By changing the file formats of your images—from a transparent PNG to a low-resolution JPEG image, for example—
you can inadvertently reduce the quality of your images to the point where they are unusable.
As much as possible, try to use a dedicated image editor to make changes to your images and then import the final product into Expression Web 4.
FIGURE 6.9 The General tab of the Picture Properties dialog.
Watch Out!
Directly underneath the Picture text box is the Picture File Type button. If you click this button, a new dialog opens (see Figure 6.10). From here, you can convert the file you are working with to any other main image format with a few mouse clicks. If you change the file type in this dialog, Expression Web 4 automatically replaces the image on your page. When you save the page, a dialog asks you where you want to store the new image file. My recommendation is to never use this function.
The next section of the General tab of the Picture Properties dialog is Accessibility.
This displays the same options that appeared when you inserted the image.
The final section is Hyperlink. Here, you can make the entire image into a hyperlink pointing to a different page, a different site, or a file.
ptg7913109
The Appearance Tab
The Appearance tab contains the most commonly used code controls for the image (see Figure 6.11). This is where you instruct the browser how to handle the image in relation to other content as well as specify border thickness, margins, and dimen- sions. The functions under the Appearance tab are styles that Expression Web 4 applies to the image. In later hours, you learn how to create styles that apply to all images in a site so that you don’t have to set them for each individual image.
FIGURE 6.10 The Picture File Type dialog lets you change the file type of your images without having to open a separate image- editing applica- tion.
FIGURE 6.11 The Appearance tab of the Pic- ture Properties dialog controls the image in relation to the other content on the page and sets the image dimensions, border, and margins/
padding.
ptg7913109 . The Wrapping Style options define how the surrounding text wraps around the
image. The three buttons provide good illustrations of what the different options mean. None (the default) tells the browser to handle the image as if it were part of the text. This means that the image lines up with the rest of the text like a large letter and pushes the remaining text to the right to make room.
Left means that the image lines up against the left side of the window and the text wraps on its right. Right works the same way as the Left option, except the image is now on the right with the text wrapping on the left.
. Alignment settings apply only if the wrapping style is set to None. In the Lay- out section, the Alignment option gives you control over where the image lies in relation to the remaining text on the line. For example, if you set the align- ment to Top, the top of the image aligns with the top of the text line. If you set the alignment to Middle, the middle of the image aligns with the middle of the text line (see Figure 6.12). And if you set the alignment to Bottom, the bottom of the image aligns with the bottom of the text line. Expression Web 4 gives you eight different positions in addition to Default.
FIGURE 6.12 The Alignment attribute is set to Middle, centering the image verti- cally in relation to the line of text.
. The Layout section also contains the Border Thickness setting (which defines a border or outline that can be applied to the edges of the image) and the Hori- zontal Margin and Vertical Margin settings (which create empty space on the four sides of the image).
ptg7913109
▼
. The final section of the Appearance tab is Size, where you can manually set the dimensions of the image either in pixels or as a percentage of the original size.
You can also toggle the Keep Aspect Ratio option on and off. As a rule of thumb, always keep the image size the same as the file itself and never change the aspect ratio. If you change the image size, you leave it up to the browser to resize the image, and its quality drops dramatically as a result. Changing the aspect ratio distorts the image by making it either too squished or too stretched out. In Hour 7, “Getting Visual, Part 2: Advanced Image Editing, Thumbnails, and Hotspots,” you learn how to use one of Expression Web 4’s built-in func- tions to create a thumbnail (small version of your image) that links to the larger version, thereby avoiding the need to manually resize your images.
Try It Yourself
Change the Properties of the Image
By default, an image inserted into a page appears directly next to the line of text where the designer placed it, and the image breaks the text. To make the page more appealing, it is necessary to separate the image from the text and give it some breathing room.
1. Right-click the image in Design view and select Picture Properties. Select the Appearance tab.
2. Click Left in the Wrapping Style section to align the image to the left and wrap the text to the right.
3. Set the border thickness to 3 pixels using the up and down buttons or by typing 3in the box.
4. Set the horizontal and vertical margins to 15 pixels by using the up and down buttons or by typing 5in the boxes, and then click OK. Save the file and pre- view the page in your browser.
The image now appears to the left with the text wrapped to the right. The image has a 3-pixel black border with a 5-pixel space between the image and the surrounding text (see Figure 6.13).
▲
ptg7913109
Summary
Images are an important part of any website. Not only do they increase the visual appeal of the site, but they can also help make the content more interesting and informative. In this hour, you learned that three main image formats are in use on the Web and that each has advantages and disadvantages. You also learned how to import images into your project and organize them in folders. At the end of the hour, you learned how to insert an image into a page using Design view and how to manipulate that image with the functions available in the Picture Properties dialog.
You now have the basic building blocks to create a page with text and images.
Q&A
Q. When I imported an image into Expression Web 4, it didn’t end up in the Images folder but was stored alongside the files in the main folder. Why did this happen and how can I fix it?
A. If the file you imported was stored in the main (or root) folder, you didn’t select the subfolder before you started the import process. To avoid this problem, before you start the importing process, always double-click the folder you want to import files to. If a file ends up in the wrong folder, simply go to the Folder List panel or the Folders view in the Web Site pane and drag the file into the FIGURE 6.13
With styling applied, the image floats to the left with the text wrapping to the right.