Get Started with Expression Web

Five Ways to Customize the Interface in Expression Web

Change Link Colors and Remove The Underline

Create External Style Sheets to Save Time with CSS

Center Div Tags in a CSS Layout with Expression Web

Create Images Styles to Align Images with the Float Option

Add Meta Descriptions for Search Engine Optimization

Create a Rollover Image with the Swap Image Behavior

Make Global Updates with Dynamic Web Templates

Testing Web Site Accessibility

Test Your Web site Before You Publish in Online

Desire to learn design? Order video training for...

Expression Web Training Video

Microsoft Expression Web Essentials Video

How to Upgrade from FrontPage to Expression Web

Advanced Expression Web Training Video

Visit Total Training.com to find video training for all your favorite software programs.

Return to the Expression Web Training Center

Looking for ASP.NET Web hosting?

www.1and1.com,ada web hosting service which also claims to be the largest domain registrar in the world

You'll find many more Microsoft recommended Web servers at www.asp.net/hosters/

 

Partners and sponsors

Total Training Online Software Training - Try it Now Get Free Access

advertisement

Free Greeting Card, Expires 2-27-07

Trusted by over 7 million customers!

Total Training

Create Images Styles to Align Images with the Float Option in CSS in Expression Web

The best way to align images to the left or right of a page so that text and other elements wrap around them on your pages, is to create CSS styles using floats.

Partners and sponsors

Order Your Expression Web Training Video Today!

1. First, place your cursor where you want to add the image in your page and choose Insert > Picture > From File.

Choose New Style from the Modify or Apply Styles task panes.

Figure EW Tutorial 5-1.jpg

 

2. In the New Style dialog, create a class style, which requires a period at the beginning of the name. In this example, I named the new style ".image-right.

Open the Layout category set the Float to Right using the drop-down list.

Figure EW Tutorial 5-2.jpg

 

3. Open the Box category and set the left and bottom margins to create a little space to the left and bottom of image so that there will be some space between the image and the surrounding text when the image is aligned to the right. In this example, I set the left and bottom margins to 10 px to create a 10 pixel margin around the image.

Figure EW Tutorial 5-3.jpg

 

4. Click OK to save the style.

Click to select the image, open the Apply Styles task pane, and click on the style name "image-right" to apply it to the image. The image will automatically align to the right side of the page and the text will wrap around it to the left.

Insert Figure EW Tutorial 5-4.jpg


5. You may want to create a similar style to align images to the left. To do so, repeat the steps above, but set the float to left and add margin space to the right and bottom. Once you’ve created style to align images left and right, you can save them to an external style sheet and use them throughout your site.

Go on to Tip 6 | Return to Expression Web main page

 

Partners and sponsors

Order Your Expression Web Training Video Today!

Shutterfly.com