Video: WORK WITH IMAGES IN EXPRESSION WEB

Presenter:Todd Miranda

There was a day when web pages were capable of no more than text. That day is long gone and now images are used heavily in web pages for layout, interest, and a more enhanced experience. Expression Web gives users multiple tools for working with images directly within the designer. This presentation demonstrates how to work with images in Expression Web and introduces some of the tools in Expression Web to work with and manipulate images.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video



Minute 0

The purpose of presentation is to demonstrate how to use images and expression web elegance of the tools provided for is an expression where to do with images was begin by creating a new website will use a template which avoided and give us some content and some images to begin with and will call this expression image was open at the default htm file says this is a template side some of the page is not editable because it s part of the master template other parts are with me and by inserting an image if you already have an image is part of your website you can simply click and drag an image of your content if you want to add a new image to replace the one I have image and go to insert picture lives there from here you can insert a picture of your hard drive or off the network graph


Minute 1

Or from a scanner camera was just a certain images on our graph will the picture of the stalled when you insert a new image you get asked for alternate text and loan description always a practice for some alternate text longer image certain people that are visually impaired use green readers to read through webpages this will help them determine what the image is by using text so open and your dog of his descriptive great now once you have the image in your content we can begin to work with the issue does appear this is the image toolbar if you don t have any trouble or turned on to turn the ongoing review tool bores and selecting the pictures toolbar so once you place your image in your content you may realize that you ve


Minute 2

Wrong place is easy to take an image and drag it and move it to another place and content like so we can get to some of the property or image by double clicking on the image was right of the picture properties box notice here is the file name is alternate text is a long description and hyperlink information if you wanted to make the image into hyperlink you can also change the tide of your image from JPEG to give to PNG formats and when you specify a data format shall have the capabilities to image quality settings if you go to the appearance tab of the picture properties here is where you can set rapping style which is really a horizontal alignment and layout which includes vertical alignment or border thickness and margins so you can affect the margin here going to show you another way to affect the margin of your image


Minute 3

It also specifies the size of your images you can change it to be smaller or larger note that this doesn t actually change the file size just the width and height tags if you select the aspect ratio going to change with in the hike will change correspondingly with a lower image horizontally to the left so we get some rafting on the right side of the image and leave everything else aside for now they ll if you want to add a border to your image we can do that by going to the format menu borders and shading and choosing different border properties settings with color what type of border you want for style and where you want the border with you want all this bottle top of the rock you also specify padding here some margin is done in individual properties heading is done in the Borders and shading the slitting of the way that we can modify the margin


Minute 4

And the padding is a little hard to see the corners of our image we have small beige lines these baselines allow us to click and drag to create a power margin or lower margin if we click and drag down with you to a 13 pixel margin to the bottom of our image we can also add some more to do the right of our image and add a little but margin to the top don t you want to add padding you can hold down the shift key and you get blue borders instead of the beige bars these can be click and drag his will to provide padding around her element so don t say that we can set some properties for image of interfaith margin and padding was looking for a capability that we have for images of your image to a war we have a lot of functionality we can increase or decrease brightness contrast


Minute 5

We can flip and rotate source rotate image 90 and then let s increase the contrast of our image a few times I wanted to be a pretty drastic change will also increase brightness that you say that we modify the image credit but until we actually save this file those changes will be saved to the file so if we want to go back to the default query and this was before made those changes can use this but here are two more which is to restore clicking this resource or image to the point before we make any editing changes to the image is a nice feature to have so when you re making changes your image be sure that you like the changes before you click save Ellis save this page to see the additional things or come up for us when we say since this image file is not an editorial in the


Minute 6

We get the save embedded files dialog comes up and gives us the option to save this file we can rename it we can change its folder change its flight and said the action on the file to change the folder because we want over images to be in images folder right and what is a mature women don t look over here that falls now been added to our actual website with a similar editing capabilities that we ve got then we got images load of two large soup we can crop the image by clicking and dragging are dashed borders and then we are happy with that you can select click enter in a crop the image again every mistake we can always go back to the default mail we can also resize this image


Minute 7

Alien resize with a life or foot pole downshift it ll maintain the aspect ratio that image they ll know we resize image by default all assuming is changing the width and height specified an image tag is not affecting the actual size of the image however once we resize an image we get this picture actions button that comes up by clicking that we can say we only one model file size attributes which is what s done by default or we can actually resampled a picture to match the size I m doing that in resampled picture down to a smaller size or larger size so after doing that the actual size of the images are modified great as a one of a tool is really nice without access to your toolbar


Minute 8

Add another image so let s insert picture from file and where to use this Windows flag JPEG gives all text through their mail this is a JPEG but would really like to do would like to make the background transparent we can do that by selecting the transparent color tool however when we do that we re going to warning that says this feature must be in a get format in order make some transparency changes so will click okay to change the image format to give and you will select the blue color to your transparency color that is that it made the exact blue collar transparency color would you drop your select another colorfully like to change the color that we won t use for the transparency color as often as we want to get to the exact transparency color that we want you


Minute 9

Is soliciting a look at the site of previous site just one flavor changes and note it will make any changes for images who want to add this to the images folder is correct there were there for a little bit transparency were we selected a particular color and better picture of the dog and stretch little bit was looking one last tool is provided for us in expression of new images to close the default HTML and the summer open up photo gallery htm file was created for us to come right here to insert another picture and was to use a big picture and will save us desert my mail


Minute 10

Is a really big picture to have in our picture gallery so what do we really want is a small version of that and you click on a small version of the full size version of very easily did in expression simply right click on your image and do auto thumbnail auto thumbnail creates a thumbnail of the image and creates a hyperlink election over the full size image is really nice to save this file if you ask us where we want to put the images original image and here s the image thumbnail it was created for us we want to does our images folder soldiers select okay with previous in the browser is your photo Gallery page with our thumbnail if we click on the thumbnail we load the full size image as a really nice way to create thumbnails very quickly in order to do something like photo gallery or just the image that you


Minute 11

Of the full size image of a webpage data so that tools are available to us when working with images in expression

Click here to go to original video page