Adding Pictures To a Web page
This tutorial explains how you can use Microsoft Expression Web to add pictures to a web page. First lets create a blank web document. Open Expression Web, then choose File -> New -> HTML Page from the menu bar. If you are not in design mode select View -> Page -> Design from the menu bar.
Insert a Picture
To insert a picture into your web page simply select Insert -> Picture -> From File from the menu bar. Then select a picture to insert. For this test I am going to find one that ships with the Microsoft Expression Suite. Browse to C:\Program Files\Microsoft Expression\MEDIA\CAGCAT10\ and select J0284916.JPG.
Next a screen will appear that asks you to input the accessibility properties. Make sure you put some alternate text here. This text will appear if a user doesn't have images download or if the user is blind and has a screen reader program. This text will also be indexed by search engines so they know what the picture is about. In this case I will put "hands holding flowers".
Adding text with a picture
You will now see the picture inserted into your page. However if you start typeing text you will notice that that the first line is to the right of the picture and the rest of the text goes below it. This obviously looks ugly. One solution is to simply hit enter after the picture to start a new paragraph, but what if you want the text to be beside the picture? Expresison Web provides an easy way for you to handle this.
Aligning the picture with text
If you click on the picture and select Format -> Properties from the menu bar (or press Ctrl-Enter). You will see the picture properties box appear. Click on the Appearance tab and you will see a section labeled wrapping style. By default Expression Web sets the wrapping style to none. Click the Left style. Notice there are a lot of other options under this appreance tab as well. For example you can adjust how much margin is between your picture and the text. This is very handy as otherwise your text will run right up against the picture. Set the Horizontal and Vertical margins to 2. Then click the OK button.
Now if you click to the right of the picture and start writing text you will notice that it appears right beside the picture. If you want the picture to appear to the right of your text simply go into Expression's Picture Properties again and select the right alignment.