Macromedia Dreamweaver 3

Images

Images bring the web to life. This is where you can learn to insert images on your pages, how to align them and how to position them in relation to text. You will also learn how to set hyperlinks to pages on the same site or any other site on the World Wide Web.

Make sure you have some images in your local folder. You will need them to insert into your Dreamweaver file. Place your mouse where you would like the image to be, and either select the INSERT IMAGE icon on your Objects Palette, or select Insert> Image from the drop down menu on the top of the Dreamweaver application.

Now that the image is on your page, you can use the Property Inspector to create a more complex design by aligning it to the left or right of your text.

When an image is selected, the Property Inspector box appears as it does above. There are a few things to take note of. You can see the size of the image: Image, 8K, as well as the width and height of the image. Src refers to source and there you can see the path the image follows. Next in the Align drop down menu, you'll see a number of choices for alignment. The bottom 2 choices "left" and "right" will put an image against the farthest right or left margin of your page- aligning any text next to the image.

Any other choice in the Align drop down menu will align the image with the top or bottom of the text, but will not allow the text to "sit next to" the image. If you don't specify an alignment, the browser default is Bottom, which causes an image to appear at the left of the screen with its bottom edge aligning with the baseline of the text.

Linking

The popularity of the Web stems from the system of hypertext linking that makes it possible to surf from one location to another. A link can move a viewer to another place within a page, from one page to another on the same web site, or to another site entirely.

To start, select an image on your page, or add a new one from your local folder. If you don't see the Property Inspector box, check the window drop down menu and make sure Properties is checked.

Click the folder icon to the right of the Link text box, and browse to find the file to which you want to link. Remember that you need to link to an *.html file. This will link your image to another page within your web site.

To link an image to a web site that is not in your local folder (perhaps a site you want to reference on the World Wide Web) follow the same course of action as above... Select the image on the page, this time, you wont look in the folder to the right of the Link Text box, you will simply type the URL of the site into the text box. ALWAYS start the URL with http://

To create an internal link, from one part of a page to another, or from an image to a specific location on another page, you must first place an anchor in the place to which you want to link. Internal links are a great way to provide direct access to information and save viewer time scrolling.

To place an anchor, select an image or text you would like to "anchor" to... anchor points are usually various places your viewer will want to "jump to" to get information- usually new paragraphs or a new piece of information on the same site.

Click just to the left of the image or text, from the Insert drop down menu, select Named Anchor. The Named Anchor dialog box appears. Type a name that represents your location, image or text. Click OK

You should see an little image of an anchor where you've just placed your named anchor. This will not be visible to your viewers, it is just there as a reminder to you.

Elsewhere on your page, you will link a word or image to your Named Anchor. Usually at the top your page somewhere, as it will provide an easy jump to the anchor further down on your page.

Select the image or text you would like to link to your Named Anchor and in the Property Inspector box, in the Link text box, type #, immediately followed by the name of your Named Anchor. So if I had named an anchor tshirts, after selecting my image or text to link to the anchor, I would type #tshirts in the Link text box. Try inserting a number of images with anchors and linking them to different images or text on your web site.