Adding Graphics to Your Web Site

WyzGuys Computer Tutors

Computer Instruction. Web Design Instruction, and Web Hosting

Adding Graphics to Your Web Site

Site Navigation

Day One

Day Two

Day Three

Day Four

We use and recommend

for your on-line transactions

Hands On Practice

Adding Clip Art

To add clip art from the Clip Organizer:

On the Insert menu, point to Picture, and then click Clip Art.
In the Clip Art task pane, in the Search for box, type a word or phrase that describes the clip you want.
If you want to limit your search to a specific clip art collection or file type, do the following:
- In the Search in list, clear the check boxes next to the collections you do not want to search.
- In the Results should be list, select the file types you want.
Click Go.
In the Search Results list, click the graphic you want to add.

Go ahead and try this now. Select a spot on your Practice Page where you want to place the Clip Art and follow the procedure above. If the image is too large for the screen, find a handle on one of the corners and drag it smaller, or right click for Picture Properties.

Adding Pictures from Files

Download the two pictures from the web site and Save them to your My Document, My Pictures folder.

Starry Night Burning Candle

On the Insert menu, point to Picture, and then click From File.
Locate the file you want to add (My Documents, My Pictures), and then click Insert.
With the Starry Night picture, use the handles in the corner to Resize, and then Resample from the Context Menu.
With the Burning Candle picture, after you have it inserted on your page, click on the Preview view. Notice that this is an animated GIF, the flame appears to flicker. Animated GIFS are a fun way to add some visual interest to your site.
Increase the size of Burning Candle. Notice the blurring. This is called pixelization and indicates that there is not sufficient data to fill in the blanks. Some images cannot be increased in size without a loss of visual clarity.

TIP - To select more than one graphic, hold down CTRL and select the graphics you want by clicking each one while holding down the CTRL key.

Add A Logo to Your Page Header

On the first day we place a 3 cell table in your Page Header, and left a space for a logo. Insert one now, or use something from ClipArt.

Copy and Paste or Drag and Drop Images

Another method is to copy and paste all your images into the images folder, then open the folder in the Folder list by clicking on the plus sign. You will see all your image files. Select the image you want to use, and drag and drop it into your web page.

Copying a Picture from the Web

This flag image is another animated GIF and I use it in the Header area of all my web sites. i found it on the web, on someone else's web site, and i liked it.

It is easy to borrow images from the web. If you find a picture you like, simply right click on the image and the context menu at right will open.

Click on Copy and then Paste it directly into FrontPage. Go ahead and try it now.
If you click on Save Picture As.. a Save dialog will open and you can save it to your My Pictures folder or browse to another directory (images in your web, your Desktop, etc) and save it there.
Just for fun. Clicking on Set as Background will install it on your computer desktop as the screen background.
Properties will give you information like the filename of the picture, and its file size and format.

I always get asked, "Isn't this like stealing?" And my answer is "Probably." Plagiarism is rampant on the Web, because anything you can see in your browser can be copied and pasted into another document. Ask your kids how they write term papers these days. Personally, I avoid copyrighted works, or provide proper attribution with a hyperlink back to the source, or I ask for permission to use items I would like to borrow, and I have not been turned down yet.

FYI, this goes for your content too, so if there are things you don't want to give away for free, don't put them on your web site.

Moving Pictures on Your Page

If you don't like the position of your image, you can move it by highlight the picture, and either dragging and dropping it to a new location, or cutting and pasting it. Let's try this now.

Click on the Flag image and drag and drop it into one of the cells in one of the table we made earlier. Now copy and paste some dummy text into the adjacent cell.
Click on the Burning Candle, right click and Cut it from the page. Position your cursor inside a cell of a different table. Right click and Paste. Now copy and paste some dummy text into the adjacent cell.

Now you can see how to move images, and how using tables can help to organize related text and images.

You can also add pictures in other ways. You can add pictures from CDs or attached storage like USB key drives. Cameras and Scanners that are attached to your computer are treated like external hard drives, and images can be transferred directly from them as well. We will not be trying these methods out, just be aware they are possible.

Add a graphic from a scanner

On the Insert menu, point to Picture, and click From Scanner or Camera.
Under Device, click the device you want to add a graphic from.
Click the resolution that you want. Resolution: The fineness of detail in an image or text produced by a monitor or printer.
Do one of the following:
- To add the graphic in its original form, click Insert.
- To adjust the properties of the graphic, click Custom Insert, and then select the graphics you want to add.

Add a graphic from a digital camera

On the Insert menu, point to Picture, and click From Scanner or Camera.

Under Device, click the device you want to add a graphic from.

Click Custom Insert.

Select the graphic that you want to add and then click Get Pictures.

Back

To Exercise

Next

Curriculum developed by WyzGuys Computer Tutors

Hosted by WyzHost.com

contact support@wyzhost.com