Would you like to put an image on your index page? There are several ways to do this and I will start with the easy way.

Transcription

1 Home Frontpage & Other Tutorials Dreamweaver Tutorial Contact Images and Tables Would you like to put an image on your index page? There are several ways to do this and I will start with the easy way. If you have your index page open, you can select a place you want to put the image by positioning the cursor at that place. Then you select Insert, Picture and Clip art. Now, if you look at the image above, you may think I wonder how she copied a page that looks like the screen of the monitor? I copied the screen page to my clipboard by depressing the PrtScn key (at the top right of my keyboard). I then pasted it onto this page. You can do that with any image on your screen at any time and that is how I got the graphics for these pages. But back to our lesson, if we select Clip Art, we get the images that are available in MS Word. If we select, From File, we can insert an image that we have scanned and saved. Or we can obtain an image from the Internet. Let s try the clip art idea. Place your cursor on the screen where you want your image to appear. From the toolbar, click on Insert =Picture = Clip Art -

2 - which brings up this screen: You can either type in a word in the Search for clips box or you can simply click on the different categories and look for an image you want to insert. Here are some of the images to choose from under the category Academic.

3 Here is a clip art image that I selected that reminds me of you right now except you are looking at the big screen, not your monitor! The other cool thing about images is that you can size them. If I click anywhere on the picture above, it will look like this with a little box around the picture. The little box lets you know you can use your sizing tools.

4 If you place your mouse at the corner of the box, your cursor becomes a doubleheaded arrow. If you then press the left button of your mouse when the arrow is showing, you can drag the corner of the box out or in to resize the picture. Tables If you want to place the picture in the center of your page, it is helpful to use a table for this. If you insert a table, you can paste the picture into any cell and then resize it. First, put your cursor where you want your table. Select Table and Insert Table; here is a graphic of what I mean: Then you need to choose how many rows and columns you want. If I only want to put in one picture with no text next to it, I might choose 1 for both my rows and columns as I did below.

5 Notice how this created a long row like table that is aligned to the left - To put the table in the center, I selected the table by placing my cursor in the table and clicking Table, Select, and Table as I did below. When I then selected the center alignment button, my table moved to the center of the page as you can see.

6 Now, I can insert a picture in the center of the page if my cursor is aligned to the center and I can resize the picture after I move it. Now, you are thinking: I hate those lines around the picture. Simple solution: there is an icon on your toolbar that allows you to remove lines from tables. It is called Outside border and it has a box symbol on the toolbar. To remove the lines around the table, place your cursor in the table to select it, click on the drop down menu for the Outside border tool and remove all lines by selecting the table icon with no lines called No Borders. Just click on that and your lines disappear. Too bad that doesn t work on my wrinkles! You will notice that the picture still has the faint lines of the table around it but they won t show online or if you print the page. If you want to remove the table and the picture altogether, you need to select the table like you did above and then click Table and Delete Rows. This will remove the table.

7 Phew! Was that a long lesson or what?! Let s try what we learned. Give it a try Place an image on your index page using what you just learned. For now, just use the images available in Word. Finished? Now that you know how to add images, I am going to let you experiment on this later when there is more time available. You can also find images online, download them and save them in an image file in your web site folder. To insert them, you use the Insert = Picture = From File commands and then navigate to your image and insert it. Advanced Discussion: One factor you need to consider in using images is their size. For example, if you scanned a photograph without reducing the resolution (pixel talk), it will take a long time to download. This means you need to save them at a lower resolution before you insert them on your web pages. Many programs allow you to do this (Adobe Photoshop is one of many). I use Fireworks, part of the Dreamweaver Suite of programs. This program allows me to save pictures that take less time to load. I simply open the photo file in Fireworks, select Export Preview -

8 - and then choose JPEG smaller file. I then Export this picture to my image file. This second version of the picture is smaller and of less quality, but it will load a lot faster so people are more likely to not get irritated when they view your web site. Let s go on to our final topic, uploading to the web, if everyone is ready to proceed. Remember, this final topic is optional and is not required for completion of the web activity. Go to the sixth page. Intro First Second Third Fourth