Microsoft Expression Web Images - Microsoft Expression Web

Why web images are useful?

Web images are used heavily in webpages to improve and provide a better user experience. This chapter will explain about how to add images to the website. Let’s explain the step by step process in detail.
Step 1 − To add images create a new one-page site and add a name of default.html file to index.html.
default_html
Step 2 – Let’s add images to the website to make them available those images in the webpage. Now create a new folder, right-click on the website name.
website_name
Step 3 – Now you can see that there are no images in this folder. If you want to add images in this folder, select and drag images from your hard drive and drop them over the images folder.
add_images
You can find that the images are added to the website images folder, as displayed in the following screenshot.
add_images
Step 4 – Images which are included in your website are not used in a webpage. The simple process is to add an image to in the webpage is to drag the image from the images folder and drop in the code view where you want to add the image in the webpage.
Incase if you want to add an image below the heading. If you drop the image and release the mouse button, then it will display the following dialog box.
accessibility_properties
You can enter the alternate text and long description. Then click OK and save the webpage. Now you can see that <img> tag is added with the alternate name and source of the image.
img_tag
Step 5 – You can follow the same process and add the second image along with its alternate name and source.
Now the index.html file will appear as follows –
Step 6 – To get access to the used pictures, use the Picture Properties dialog box. Double-click on an image then it will display the Picture Properties box.
picture_properties
In Expression Web, Picture Properties dialog has two tabs, General and Appearance.
Following are the options available on the General tab.
  • Picture − It includes the folder/file name of the graphic image.
  • Alternate Text − Type the text you want to be displayed for pictures when the graphic is downloading, when it can't be found, or when a site visitor moves the pointer over it. This text will also be used by a screen reader if your viewer is using one.
  • Long Description − There are times a few words may not be enough to describe your image. Charts and graphs are examples. Click Browse to select a file that contains a longer description of the picture.
  • Location − If you want to link your image to a webpage or larger image, you insert the hyperlink here.
  • Target Frame − If the current page is a frames page, this option indicates which frame the link should be displayed in OR you can choose to have the image or page open in a new window.
Below mentioned options are available on the Appearance tab.
appearance_tab
  • Wrapping Style − Specify how the picture floats in the page, such as None, Left, or Right.
  • Layout − In this section, you can set the alignment, border thickness, horizontal and vertical margins.
  • Size − Expression Web automatically sets the width and height properties for the image based on the actual dimensions of the picture. Rather than resizing your image by changing these dimensions, resize the image using your graphic editor.
Step 7 − Now, let’s preview the webpage in the browser; it will display the following output.
webpage

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Microsoft Expression Web Topics