Adding a Picture to Your Page

When you insert a picture in a Web page, Expression Web adds a reference inside the page's HTML tags that points to the location of the graphics file. (We help you take a peek at the HTML for graphics later in this chapter.) The reference tells the visitor's browser to fetch the picture and display it on the page at the location of the reference. In other words, when you look at a Web page that contains pictures, you're looking at more than one file simultaneously: the Web page (the file that contains the text and the references to the pictures) and each individual picture file.

Inserting a picture is similar to creating a hyperlink because you simply link two different files: the Web page and the picture file. So, like a hyperlink, a picture reference can point to a picture file stored inside the Web site or on a remote Web server.

Tip 

If you don't have any pictures of your own or don't want to create any, plenty of excellent Web galleries encourage you to grab their pictures for your own, personal use. Search the Free Graphics collection at http://www.freegraphics.com to start looking for graphics of all types and styles. Chapter 16 includes other sources for finding pictures, available for free or for a minimal fee. Keep in mind that not every image you can download from the Web is free for the taking, however. Before using a picture on your site, check the terms of use on the Web site to make sure that you comply with copyright laws.

Importing pictures into your Web site

Before you add any pictures to your Web pages, we recommend that you first import them into your Web site. Expression Web can then keep tabs on where pictures are stored inside your Web site. If you move them around within the Web site, Expression Web makes note of it and updates all the internal links so that they continue to display properly.

To import pictures into your Web site, follow these steps:

1. Launch Expression Web and open the Web site into which you want to import pictures.

2. In the Folder List task pane, select the folder where you want to store the picture files.

   (See the later sidebar "Organizing picture files" for tips on where to store pictures inside your Web site.)

   If you don't want the pictures in any particular folder, select the name of the Web site folder itself (at the top of the Folder List task pane).

3. Choose File Import File.

   The Import dialog box appears.

4. To import individual picture files, click the Add File button.

   The Add File to Import List dialog box appears.

5. Using the options in the dialog box, navigate to the folder containing the picture or pictures you want to import.

6. Click to select the picture.

   Tip 

   In the upper-right corner of the Add File to Import List dialog box, click the Views button and, from the drop-down menu that appears, click Preview. When you click a picture file, a preview of it appears in the dialog box so that you know you chose the right one.

   If you want to select multiple pictures, hold down the Ctrl key and click each picture.

7. Click the Open button.

   The Import dialog box appears again, listing the picture or pictures you selected, as shown in Figure 5-1.

   
   Figure 5-1: The Import dialog box with pictures ready to be imported.

8. If you want to import more picture files, continue adding pictures to the Import dialog box by repeating Steps 4 through 7.

   To add an entire folder containing pictures, click the Add Folder button and, in the File Open dialog box, navigate to the folder, click to select it, and click the Open button. All files located in the folder appear in the Import dialog box.

   Tip 

   To remove a picture or folder from the Import dialog box File list, click to select it (hold down the Ctrl key to select multiple pictures) and click the Remove button.

9. After you add all the pictures you want to import to the Import dialog box, click OK.

Inserting a picture

After you import your pictures into your Web site, plugging the pictures into a page is easy. Follow these steps:

1. Open the page into which you want to insert the picture, and then, in Design view, place the cursor where you want the picture to appear.

   Expression Web knows how to place the cursor only inside a line of text or in a new, blank paragraph. If the cursor location doesn't exactly correspond to where you want the picture to sit inside your page, just do the best you can. We talk about other ways to position pictures later in this chapter.

2. On the Common, Standard, or Pictures toolbar, click the Insert Picture from File button.

   Pop open the Pictures toolbar by choosing View Toolbars Pictures.

   The Picture dialog box appears, as shown in Figure 5-2.

   
   Figure 5-2: The Picture dialog box.

   Tip 

   If you haven't done so already, click the Views button in the upper-right corner of the Picture dialog box, and, from the drop-down menu that appears, click Preview. When you click a picture file, a preview of it appears in the dialog box so that you know you chose the right one.

3. In the dialog box's file list, navigate to the location of the picture you want to insert, and then double-click the file's icon.

   The Accessibility Properties dialog box appears.

4. In the Alternate Text text box, type the text you want to appear on the screen as an alternative to the picture.

   Alternative text appears in these cases (see the nearby sidebar "Alternative text is mandatory" in this chapter):

   • If the visitor's browser is set to not display pictures

   • While the picture is loading

   • In some browsers, as hover text when the visitor's cursor passes over the picture

5. Click OK.

   The dialog box closes, and the picture appears inside the page.

Tip 

Here's a quick way to insert a picture that you already imported into your Web site. From the Folder List task pane, drag the icon for the picture file into your Web page. Then add alternative text for the picture when the Accessibility Properties dialog box pops up (as just explained in Step 3) and click OK.

GLANCE AT THE CODE 

Take a look at the code for a picture:

 <img alt="sunflower" src="/books/1/178/1/html/2/images/sunflower.gif"            width="193" height="174" /> 

Alternative text is mandatory

Some Web surfers, desperate to save seconds, turn off their browsers' capability to display pictures, as do many browsers on portable devices. Nowadays, Web pages need to be viewable in a lot of different "viewpoints" (as browsers are called by the World Wide Web Consortium, the folks who set the rules for Web standards and accessibility). To make your Web pages accessible to all, your pictures must contain alternative text, or alt text, as it's called in Web design circles. That's why Expression Web prompts you to enter alternative text in the Accessibility Properties dialog box as soon as you add a picture to your page. Of course, you can turn off the prompt by deselecting the Show This Prompt When Inserting Images check box, but you just have to go back and add it later if you want your pages to pass their accessibility tests. (We talk about how to test your pages in Chapter 12.) Good alt text should briefly describe the picture so that Web surfers at least know what they're missing and screen readers can interpret images for vision-impaired visitors. You can read up on the guidelines for alt text at http://www.w3.org/TR/html4/struct/objects.html#h-13.8. See also http://www.w3.org/WAI/References/Browsing for a discussion of alternative browsing methods.

Notice that there's no separate closing tag for a picture tag. The tag opens and closes within one set of angle brackets, and img tells the browser to display an image in this location. Next comes the alt text; in this example, the word sunflower appears on the page (alt=“sunflower”) if images are turned off.

The next part of the tag tells the browser the name of the picture file and its location in relation to the page, called a relative link: src=“images/ sunflower.gif”. In this case, the GIF file sunflower.gif is located in a subfolder named images. The next bit of information, width=“193” height=“174”, tells the browser how many pixels wide and high to reserve for this picture. (We talk more about picture dimensions later in this chapter.) Finally, the tag closes with />.

Adding a picture from another application or location

You can also add pictures to your pages from other locations. Here's a brief rundown of your options:

• Paste a picture from the Clipboard: Copy the picture to the Clipboard from another application or from another Web page (either in the current site or in another Web site) and paste it into your page at the cursor location (choose Edit Paste or press Ctrl+V).

• Insert a picture from a scanner or a digital camera: Hook up your scanner or camera to your computer, and then choose Insert Picture From Scanner or Camera. In the Insert Picture from Scanner or Camera dialog box, choose your device, click the Web Quality option, and then click the Insert button. (Check the instructions for your device and Microsoft Expression Web Help for more information.)

• Drag and drop a picture file into your Web page from Windows Explorer: Find the picture file's icon and drag it into your Web page.

REMEMBER 

Regardless of how you add a picture to a Web page, Expression Web pops open the Accessibility Properties dialog box and prompts you to enter alternative text.

If you add a picture whose original file lives outside the current page's Web site, Expression Web needs to save a copy of the file inside your Web site. (Remember that a picture on a page is nothing more than a reference to the file, not to the picture itself.) This concept becomes especially important when you publish your Web site on the Internet so that the picture files don't get left behind.

To save a picture file inside your Web site, follow these steps:

1. Save the Web page to which you added a picture or pictures. (We tell you how in Chapter 2.)

   The Save Embedded Files dialog box appears when you save your page, as shown in Figure 5-3.

   
   Figure 5-3: The Save Embedded Files dialog box.

2. To rename the picture file, click the picture file to select it, click the Rename button, and type a new name.

   Remember that your Web site's files should contain only lowercase letters; use the underscore character (_) rather than spaces.

3. To specify where to save the picture file, click the Change Folder button, and, in the Change Folder dialog box, navigate to the desired folder (or create a new folder by clicking the Create New Folder button) and click OK.

   Unless you tell it otherwise, Expression Web saves the file in the folder shown in the Embedded Files to Save list, in the Folder column.

4. (Optional) If you want to change the picture format or set other options for the picture, click the Picture File Type button.

   We talk about how to edit a picture later in this chapter.

5. Click OK.