Expression® Web Design
| 
| 
Adding an Image
Saturday, January 05, 2008
Images are adding to web site for various reasons - to add some entertainment to your web site;
to help show other users how to do something; to show users how you looked on
that special night, etc. Some says pictures are worth a thousand words.
Adding an image to your web site might not add a thousand words in regards to
search engines, but they will help users understand more and should improve your
web site.There are numerous ways to add an image to your website. One way is to drag the image from the folder list on the left to the location in your web page. This is usually the easiest way.
alt attribute
In
Expression Web, when you add an image, you get a dialog box that says
"Accessibility Properties". Expression Web wants to help you enter the required
"alt" attribute to the
image element. This alt attribute should help describe
the picture some. It helps user who might not be able to see the image. These
users might have screen readers installed and the screen reader will read the
alt text that you enter. Some users might abuse this alt text for search engine
purposes. Remember, this is not the primary focus of the alt attribute. You
should be adding images that help to add to your web site and use the alt
attribute accordingly.If you have questions on how to use the alt attribute, please check out the International Web Developers Network forum.
Picture Properties
If the image is under the text, there are several ways to fix this
problem. You can right click on the image and choose Picture Properties.
Now click on the Appearance tab. Under the wrapping style, you can choose
"none", "left", or "right". If you choose left, the image will be placed to the left of the text and other elements. Expression Web adds a style to the image, specifically the float property. (FrontPage used a deprecated HTML attribute align which could cause other browser-related problems.) Using the styles though, will help ensure that most browsers will display the image properly.
If you have any question on using styles to help you layout your web site, please check out the International Web Developers Network forum. They will help you understand the need to use styles instead of deprecated HTML attributes.
Video Tutorial on Adding Images
As usual, you can see a video tutorial on adding images to your web site. This will also show you how some browsers will display your alt text instead of your image. Hopefully this will help you to understand the importance of using the alt attribute properly.Browser Problems with the alt attribute
When you place your cursor on an image using Microsoft Internet Explorer, you will see the text that you entered. Unfortunately, the alt text was not meant to be used in this manner. Most browsers will only show the alt text when required (screen readers or images disabled).You can try that on this post actually. If you put the cursor on the images above and you are using Microsoft Internet Explorer, you might see something like Inserting an Image using the Menu, Picture Properties Dialog Box, or Accessibility Properties Dialog Box.
If you just want to have a small box come up on other browsers, you can use the title attribute. Most browsers will show this on image and anchor elements.
<img alt="Picture Properties Dialog Box" src="images/expression-web/picture-properties.gif" style="float: right; padding-left: 5px" title="Picture Properties Dialog Box" />
You will also notice that I did not use the height or width attributes. These are not required attributes and are not needed unless you would like to have the image displayed in another size (other than the original image size).
