Intro to Dreamweaver – part III

Pretty easy to do, just click so the cursor appears on the page and go to Insert>Image. From there you just have to find the photo you want to link to and there you go.

A word of warning, keep your web files organized! If you choose to link to an image that isn’t in your website folder then you will have issues when you upload. When an image is added to a page it actually links it from where it is, it doesn’t insert an actual copy of the image into the document, so what you have is this little string of folders that point the way to where the photo actually resides. If you don’t upload the image to the site in the folders the code points to, then you will get a broken image link when your page is viewed. Because of this, the cleanest way to set things up is to add an “images” folder to your website folder. All the image links will then have the images/whateveryourimageis.jpg extension and they will link properly. Keep it clean and you will be rewarded for the extra effort when you upload your site.

Something else I should probably mention is it is always best to resize your image in Photoshop rather than allowing your HTML to do it for you. For one thing, if the image is larger than you need then it will be a larger file size, which can be the kiss of death when it comes to load time. To keep your load time below five seconds it is a good idea to keep all image file sizes as small as you possibly can.

This doesn’t mean you need to keep only thumbnails on your site. You can use larger images but be certain that you save them from Photoshop using the “Save for Web and Devices” feature and try to get your file size as low as possible without degrading your image.

Another reason to keep your resize your images in Photoshop is sometimes the HTML will distort the image if part of the code is missing. For instance, if you set the height that is smaller than the actual image height but leave the width alone, sometimes it will default to the width of the actual image, thereby displaying a graphic that looks squished vertically. You don’t want your friends photo to show someone that is twice as wide as they are tall do you?


Under Insert you will find a few other options that relate to images, primarily Image Objects and Media. Image Objects contains Image Placeholder and Rollover Images as well as Fireworks HTML (which we won’t cover here).

An image placeholder is basically just a box the same shape and size as what your image will be. This is good for mockups and getting your sizing right, as well as for taking the place of an image you haven’t acquired yet. It will represent itself as a box who’s color you can change, not too exciting but suits its purpose just fine.

Rollover Images are simply variations on the same image that are used together by the page to show the state of the action being performed. In simple terms, there are different images for different rollover states that all fit in the same spot. Menu buttons are often done this way. You’ll see an “off” version of the button, which is its ordinary state, but when you mouse over it you will see the “on” version.

Media covers the types of video you can add directly to your site.

The most common is a .swf file which stands for ShockWave File. It’s actually a compressed format used by flash. This can contain video, different animations and even special buttons and links.

The uncompressed version would fit into the category of Flash, right below SWF in the list. There are a few different Flash formats that this encompasses but most are going to be larger in size than a .swf file. The fact that these aren’t usually compressed means that a viewer might be able to copy your file and alter it for their own work. This usually isn’t a good idea since it gives them the option to infringe on the copyright. It’s never a good idea to hand over your files on a silver platter this way.

It seems a little redundant to have both an SWF and a Shockwave option but there are different file extensions that Shockwave can use. Chances are you won’t have to get into this very much since Shockwave isn’t commonly used anymore.

The next three are Applet, ActiveX and Plug-in – all of which refer to actual small programs that run within your document. We won’t go into those much seeing as how this is a little more advanced than what you need to get into now. You can click the links to learn more about them if you would like.

Next time we will cover using images as links and how to upload your site to the server.


One thought on “Intro to Dreamweaver – part III”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s