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.
Alternately use the Insert button from the Standard, Common or Pictures toolbar.
2. In either case navigate to the folder where image is stored, click Insert.
Enter short description in Alternate text and Long description if you want, for the image in the Accessibility Properties 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.
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 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.
1.Double-click the picture to open the Picture Properties dialog box. Select the Appearance tab in this dialog.
You can also right click on the picture to choose the Picture Properties from the drop down menu.
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.
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:
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:
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.
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.
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.
2.To insert padding, click and drag any of these lines and release the mouse when you are done.
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.
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.