Working with Images in Expression Web (I)

Posted by: Minal Agarwal , on 8/16/2007, in Category Expression Web
Views: 46509
Abstract: In the previous articles you saw how to create web pages and format text in these pages. In this article I will explain the tasks related to inserting images in your pages.
Working with Images in Expression Web (I)
You have already explored adding text, copying, moving and pasting it in pages as well as some helpful features like line breaks, paragraph breaks, font colors, sizes, headings etcetera. These were fundamentally the tasks that let you format the text of the pages. But web pages are more than just text-based documents. Web developers and users expect other elements like images, sounds, multimedia elements, links and some interactive attributes in these web pages. In this article I will explain the tasks related to inserting images in your pages.
It may seem simple to add images to your web pages, but let me tell you this is one complex topic. You all must be aware that you have abundant type of images to choose from like GIF, JPEG, TIF, BMP, PICT, PNG, etc. but you have a limitation to choose from GIF, JPEG or PNG.  A care needs to be taken while selecting the type of image so that its size does not affect the bandwidth. Hence web developers have to use special tools to optimize images before they are used in the web pages.
Graphical Interchange Format (GIF): GIF is used for images or graphics with fewer colors and for graphics with less amount of tonal range.
Joint Photographic Experts Group (JPEG): JPEG is used on graphics with high tonal ranges like photographs.
Portable Network Graphics (PNG): PNG was introduced with some advantages over GIF to replace the latter.
Adding images to web pages
Expression Web does a swift job of adding images into your web pages, be it a click and drag an image into your page or insert the image by navigating to the path. Follow the steps given below to insert images into your web pages:
1. Open the web page and click where you want to insert the image. Go to the Insert menu > Picture and choose the source from the sub menu.
ExpressionWeb Insert menu
Alternately use the Insert button from the Standard, Common or Pictures toolbar.
ExpressionWeb Insert Picture button
2. In either case navigate to the folder where image is stored, click Insert.
ExpressionWeb Picture dialog box
Enter short description in Alternate text and Long description if you want, for the image in the Accessibility Properties window.
ExpressionWeb Accessibility window
3. Click OK, and the image appears on the page.
4. Save the page, if you have added an image that is not already saved in the website then Save Embedded Files dialog appears. Click on Change Folder to navigate to your site files where you want to save the image.
TIP: If the image you want to insert is already saved in your site then click and drag the image from the folder list on to the page where you want to place it.
Moving Images
You may require to move your images within your page while designing it. In that case simply click the image to select it. When the picture gets selected it shows a thin border around the picture along with small square handles on its corners and sides. Place your cursor over the image and press your left mouse button, keeping it pressed drag the image to the new position. When you release the mouse button the picture is placed on its new position.
NOTE: When you move a picture to a new position you may require to change the picture’s wrapping style.
Aligning images
Aligning or wrapping helps you position your image with other objects. Horizontal alignment controls your picture’s alignment with the items on its left or right side and Vertical alignment controls the image position on the same level, above or below the other objects.
Horizontal Alignment
1.Double-click the picture to open the Picture Properties dialog box. Select the Appearance tab in this dialog.
ExpressionWeb Picture properties
You can also right click on the picture to choose the Picture Properties from the drop down menu.
ExpressionWeb Page Properties option
2.The default wrapping style selected in None. You can choose Left or Right depending upon how you want your text to be wrapped around the picture.
Click OK to close the dialog box and apply changes.
NOTE: You can set margins and picture size from the Picture Properties dialog box.
Vertical Alignment
1.Open the Picture Properties dialog box following any method mentioned above in Horizontal Alignment.
2.In the Layout section choose the Alignment drop down to choose the options for vertical alignment. These options are shown in the following screen image:
ExpressionWeb Picture Properties
3.Choose Default, Top, Middle or Bottom since the other alignment choices are no longer supported by the modern web browsers.
4.Click OK to close the dialog box and the text will be aligned according to your selection.
NOTE: The effect of the alignment depends upon the chosen wrapping style. So horizontal alignment is nothing but the wrapping style of the text and vertical alignment lets you position your image in the vertical grid.
Adding Borders, Margins and Padding to the Images
Before we get into the details of inserting borders, margins and padding, I would like you to know the difference between the three. The figure below shall explain the differentiation:
ExpressionWeb diagram
Adding Borders to an image
1.Click on the picture (in Design view or Split view) to which you want to apply border.
2.Go to Format > Borders and Shading to open the Borders and Shading dialog box.
ExpressionWeb Format menu
ExpressionWeb Border and Shading dialog box
Borders tab is focused by default.
3.Select the Settings and Style and Preview them.
Adding Margins to Image
To add margin to your picture click on the picture in either Design view or Split view. Now you will be able to see a thin line surrounding the picture. Move your mouse pointer over any of these lines until the cursor becomes two headed arrow. Click and drag horizontally to change the horizontal margin. Release the mouse when you are satisfied with the size of the margin. Similarly you can change the vertical margin for the picture.
 ExpressionWeb Margin
In this above image, the shaded area surrounding the picture is the margin of the picture.
Adding Padding to Images
1.In the Design view or Split view click on the image to select it and press the Shift key. You would be able to see four light blue lines inside the picture’s boundary, as shown in the image below.
ExpressionWeb Padding
2.To insert padding, click and drag any of these lines and release the mouse when you are done.
ExpressionWeb Padding
3.Save your changes.
TIP: Sometimes you may find it difficult to differentiate the light red lines for borders and light blue lines for padding. In that case press the Shift key and release it, repeat this until you notice the difference.
Conclusion
The article covered simple tasks like inserting an image, positioning it and adding borders and padding to it. In the second part of my article I would focus on editing the images.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by abdulaziz on Saturday, August 2, 2008 4:27 AM
thank you for this article
i think Expression Web has many week points such as moving pictures while designing
the old versions has somthing called "wrapping" it lets move the pictures using the arrows and you can make the picture behind the text so it will move smoothly in your design, but this version is hard to do that
Comment posted by Bob on Monday, November 7, 2011 1:40 AM
Can you drag photos around on the screen and place them specifically where you want them?
Comment posted by SSEBIRAGALA CHARLES on Wednesday, April 4, 2012 10:45 AM
Its summarized and  easy to understand thank you.

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook