| HP003/004.05 | HP003/004.06 | HP25201 |
|
|
||
| Step One: Creating Your Webspace | ||
| Step Two: Getting Our First Web Page | ||
| Step Three: Making Our First Web Page | ||
| Step Four: Uploading Our Page Via FTP | ||
| Step Five: Making A Second Web Page | ||
| Step Six: Backgrounds, Links, and Color Schemes | ||
| Step Seven: Inserting Images Correctly | ||
| Step Eight: Tables | ||
| Fin: Conclusion and Tips | ||
| Bonus Page: Connecting to FTP via Dreamweaver | ||
Step Seven: Inserting Images Correclty
While inserting an image is one of the simpler tags in HTML, I've found many people (myself included) have difficulty accomplishing this with Composer; which is more the editor's fault than ours but we will now learn to work around any issues it may bring up.
Ok, I'm going to open my Abraham page to demonstrate how inserting an image is done. The first step is to find the images you wish to have on your web page. The best way to do this is after you find an image online, right-click on it and save the picture to your computer, a good place to save it would be right into your HonorsSite folder. You don't have to save it in your sitebackup folder too since we're only keeping a backup of our pages there, but if you want to you can.
After a brief pillaging of some of my classmates' pages I grabbed a few Abraham
and Isaac pictures. Now, after opening the page you want to insert an image
into, go to the Insert menu --> Image, then click on "Choose File," and go
to the folder where you saved the image. Double-click the image, and then click
Ok. Voilà! Your picture will now be loaded.
![]() |
![]() |
Ok, when you've inserted a picture, you can align them however you want. Just click an image and then pull-down the appropriate alignment you want (like Center, Left, Right). You can even align it by using the Tab key or Spacebar if you want. I've inserted a few more pictures now, but some of them are too large for my taste and I want to make them smaller. Where do we do this?
If you right-click on the image and go to "Image Properties," you'll notice
something in the lower-left called "Dimensions." The height and width of an
image is determined by a unit called "pixels." The larger the pixel number,
the larger the image. Now let's say if I want to make a certain picture 50%
smaller. All I have to do is type in what half of one of the dimensions is (I
generally use the Calculator in Start --> Programs --> Accessories to
find the new dimension). When this is done Composer will automatically adjust
the other dimension for you. Just be sure that you check the "Constrain" box
before you edit the dimensions, otherwise Composer won't adjust the other dimension
for you. Here's a before and after of my dimension-editing.
![]() |
![]() |
There's one other thing I will talk about in regards to image editing. If you are changing the sizes of your images so they fit better on your page, but you still want someone to be able to view the full image if they desire, that can be done easily through linking to the image.
It works a lot like how we did regular page links back in an earlier lesson. Just right-click the image and go to the hyperlink option as we did before. Instead of typing in an url just type the location of the image (like "picture.jpg" or "images/picture.jpg" etc.). You can link to picture files, other web pages, or even media files through linking via a picture, just follow the same process.

Also, Composer likes to put a border around any image that has a link embedded in it, and if you want to remove the borders right-click the image, go to "Image Properties," and set the "Solid border" option to 0 pixels.

Remember that you have to type the exact and correct location of the image file for it to work. If you just leave your images in the same place you put your web pages then you shouldn't have any problems (just type the image name for the link location), but if you store your pictures in a separate folder like "images" (which is what I like to do) be sure to prefix your picture name with something like /images/ or images/ or ./images, they all work. Lastly, make sure you type the file extension too (like .gif, .jpg, etc.) sometimes Windows doesn't like to show you the full file name immediately.
Well, that's our lesson in image insertion and editing. Now for the
final lesson, mastering tables.