Information Technology Systems & Services
Image 1
Please download Image 1 for this exercise. To download it to your computer, put your cursor over the image and right click (Windows) or hold the mouse button down (Mac OS) until a menu pops up. One of the choices is "Save Image As..." or some wording that is similar depending upon your Web browser. Save it into the folder created in the first Dreamweaver workshop or create a folder for this workshop titled "Dreamweaver Intro 2" on your computer.
Now that we have some text and an image to play with, let's play!
- put your cursor in front of the text "I need some text on this page so I can play with inserting an image. The more text I have, the more text is available to play with."
- go to the "Insert" menu
- choose "Image"
- browse to your image
- double-click on the image
You now have an image in your document! View it in your Web browser to see what it looks like.
If life is good, it will look something like the project page with image.
You've probably noticed this workshop page has text wrapping around its image. Why should I have all the fun? Let's do the same with our work page!
First, let's add some alternate text. Alternate text is a description of the image and is useful for people using screen readers or non-graphical browsers, and those surfing with their graphics turned off or on slow Internet connections.
- click on your image once to select it (it will have an outline with resize handles when you do this)
- in the "Properties" panel, fill in the "Alt" text box with text that describes what a sighted person is supposed to learn from the image
- when you are done entering text, click in the main editing window to finish
To create a border:
- select the image by clicking on it once
- put a number other than "0" in the "Properties" panel "Border" box
- click in the main editing window to finish
I have a border value of "1" for the image at the top of this page.
We still haven't wrapped text so head on to "Text Wrapping and Clearing."