How to Add Images to Your Website in Dreamweaver CS4

How to Add Images to Your Website in Dreamweaver CS4

by Christopher Heng, thesitewizard.com

In this chapter of the Dreamweaver CS4 tutorial, I will deal with how you can add logos, photos and other types of pictures to your website using the Dreamweaver web editor.

For those who have just arrived at this chapter and are otherwise not familiar with Dreamweaver, you may want to read the first chapter of this tutorial series, How to Create a Website with Dreamweaver CS4. This chapter assumes that you have already completed the steps given in that earlier chapter, created a 2 column website and uploaded a preliminary version of your home page to your site.

Goal of This Chapter

By the end of this chapter, you will have added a logo to your 2 column web page, as well as (optionally) embedded some pictures (either product photos, personal photo or some other picture) into your home page.

How to Get Images for Your Website

You will need to have the following pictures for this tutorial:

1. A small image to serve as the logo for your website
   Most websites, including thesitewizard.com, have a logo that appears on every page of the website. Since this tutorial will show you how you can place that logo on your web page, you will need to have a unique image to serve as your site logo if you're to complete this chapter.
   For those who are designing a company website, chances are that you already have some sort of logo around (for example, on your letterhead). If you can get hold of an electronic version of that logo, either in the GIF, JPG or PNG image formats, then you're all set. Otherwise, scan or take a digital photograph of that logo, and use that image. Make sure the image is in the GIF, JPG or PNG formats (which shouldn't be a problem since most cameras and scanners support the JPG file format).
   
2. If you don't already have a logo, you should create one to use here. For things like logos, it's best not to use one of those free images you see on the Internet, even if the author says that you can use it royalty-free on your site. You will want your logo to be unique to your website, and not something other sites also sport. You can create logos either by drawing them on paper and then scanning them, or by using a drawing program or an image editor such as one of the free ones found on the Free Drawing and Painting Software, Image and Photo Editing Programs page.
   For those who have never created a logo before and are not sure how to even start, take a look at the article How to Create a Logo for Your Site the Quick and Easy Way found at http://www.thesitewizard.com/webdesign/make-site-logo-banner.shtml
   You should also read that tutorial if you're not sure how wide your picture should be. While there are no rules for the width or height of an image for a website, if your picture is too wide, you'll have a very difficult time getting it to fit into your web page.
   Again, remember this cardinal rule: pictures of any sort that you want to place your site must be in either the GIF, JPG or PNG file format. Do not use any other format.
   
3. Product images, photos and other types of pictures (Optional)
   
   If you want to place other types of pictures on your website, such as pictures of your products, photos of yourself and scenery, and so on, you should also get them ready before you begin the tutorial.
   For those of you selling software (or giving it away free) only in electronic form, you can also use a program like a 3D software box software to create an image of the box to place on your site. Free versions of such software can be found on the Free 3D Software Box Image Makers page. Images of physical software boxes tend to make your software look more valuable in the minds of visitors.
   Likewise, if you are selling (or giving away) electronic books and want to create images of such books, either use a drawing program to draw it manually, or get commercial software (there are no free ones that I know of) like Box Shot (which can create both 3D software boxes and books) to do the job. For example, the picture here of my How to Make / Create a Website: The Beginner's A-Z Guide was created with BoxShot.
   Note: there is no such physical book, so please don't email me to ask where you can buy the guide. If you want to read it, the complete guide is available online (and you can read it free of charge; no need to buy anything) at http://www.thesitewizard.com/gettingstarted/startwebsite.shtml
   

.....................................................

http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-2.shtml

How to Add a Logo to Your Dreamweaver CS4 Page

1. Create a Folder for Your Images in Your Website Directory
   Start up Dreamweaver CS4.
   Look at the right panel of the web editor. You should see at least two major sections: the top section has a tab entitled "INSERT", and the bottom section has a tab labelled "FILES" (adjacent to another tab called "ASSETS"). In this FILES section, you should see a list of files that are currently part of your website, namely "index.html" and "twoColLiqLtHdr.css". Both were created in chapter 1.
   To create a new folder to store your images, right click the blank space immediately underneath these two files. In the menu that appears, click "New Folder". A folder called "untitled", with its name highlighted, will appear in that window. Type "images" to replace the default "untitled" label, and hit the ENTER (or RETURN) key.
   
2. Copy Your Images into Your Website's Images Folder
   Copy all the images that you want to use on your website into the folder you created in the above step. The method for copying files differ from system to system. For example, if you're using Windows Vista, click the windows button (the "Start" menu) on your task bar, and select "Computer". Navigate to the folder currently containing your images. Select all the images you need, right click them and select "Copy" from the menu that appears. Then navigate to the folder where you keep your website's files and where you just created the "images" folder. For example, if your Vista username is "chris" and your website is called "Example Company", and you didn't change the Dreamweaver defaults in chapter 1, the folder is probably in "c:\Users\chris\Documents\Example Company\images". Open that images folder, right click the blank space, and click "Paste" in the menu that appears.
   
3. Open Your Web Page
   Switch back to Dreamweaver and double-click the "index.html" file in the FILES panel on the right side of Dreamweaver. This will load the page you created in the previous chapter.
   
4. Insert the Image
   When you first open the web page, the blinking text cursor should be located just before your website's name in the header. If it's not, move your mouse there and click it to place the text cursor there. (If the text cursor ends up somewhere in the middle of the name in the header, you can use your left arrow keys on the keyboard to position it at the beginning.) This is the place where you will be inserting your site logo.
   Click "Insert | Image" from the menu. If you remember from the previous chapter, my shorthand notation "Insert | Image" means that you are to click the "Insert" menu, and then click the "Image" item in the menu that appears.
   A dialog box should appear. If you have been following my instructions, there should be two folders listed here, "_notes" and "images" (which you created in an earlier step). Doubleclick the "images" folder to open it.
   A list of images that you copied to this folder earlier should appear. If you've copied many images here, and are not sure which one is your logo, click once on each item in this dialog box to see the picture in the "Image preview" box in the right side of the dialog box. When you're satisfied that you've got the correct image, select it and click the OK button.
   A new dialog box, with the title "Image Tag Accessibility Attributes" will appear. Enter "Example Company's logo" into the "Alternate text" field (if "Example Company" is the name of your website).
   Basically this "alternate text" is just a text description of what your image is about. It is shown in the browser if your visitor goes to your site with graphics disabled. It is also read aloud by screen readers (used by the blind), and indexed by search engines as the description for that picture. Although Dreamweaver does not force you to enter anything, you should always do so anyway to make your website accessible to the disabled.
   Ignore the "Long description" field, and click the OK button. For better or for worse, the logo will now appear beside your site name in the header. If you find that your logo is too big (or ugly or whatever) and you want to redo it, click it once with your mouse to select it, and hit the DEL key (on your keyboard). This will remove the logo. You can then go back and recreate the logo, save it into the "images" folder, and repeat the insertion procedure again.
   Alternatively, if your logo is one of those that should take up the entire horizontal space of your website, and you want the name of your site underneath the logo, click your mouse between the image and the first letter of your site name. The blinking text cursor should now appear just after the logo and before the name of your site. Hit the ENTER (or RETURN) key to move the site name under the image.
   If the result is not to your liking, you have at least two options. If you simply want to reverse what you just did, click "Edit | Undo New Paragraph" from the menu to undo the operation. Alternatively, you can re-create the logo you made so that it includes your website's name. That way, instead of having the logo and the text version of your site name, you can completely delete the text and let the picture take its place completely. Your picture will then have both the logo and the name of your site. If you choose this route, make sure that your site name appears in the "Alternate text" of the picture (and preferably elsewhere on the page as well), otherwise when visitors search for your site by name in the search engines, your site will not be listed.
   
5. How to Fix the Spacing Between the Logo and Your Site Name
   Even if your logo is small enough to fit beside your site name in the header, you will probably find that it is uncomfortably close to the name. To introduce some space between the logo and the name, click the picture once to select it.
   Look at the bottom of your Dreamweaver window. You should be able to see a panel with a single tab labelled "PROPERTIES". This is the Properties pane. When you click your picture to select it, the Properties pane should be populated with a variety of fields that you can configure for your image (see picture below).
   
   
6. Enter "5" (without the quotes) into the "H Space" field and hit the ENTER key. Notice that some space has been added to either side of your logo when you do so. If the space is either too large or too small, adjust the number you entered till you are satisfied with the results. As you may have guessed, a larger number increases the horizontal space around the image while a smaller one decreases it.
   You can also put a number into the "V Space" to adjust the vertical space around the image.
   
7. Save and Publish Your Web Page
   Save your web page ("File | Save"). Since you have already set up your site details in the previous chapter, all you need to do to publish the revised page is to click "Site | Put". When Dreamweaver asks you whether you should "put dependent files", click "Yes". This will cause the editor to upload your logo along with your web page to your website.
   

How to Add Images to Your Web Page in Dreamweaver CS 4 (Optional)

Inserting photos, drawings, product pictures, etc, into the main body of your web page uses the same technique described above. That is, just click the spot on your page where you want to insert the picture, click "Insert | Image", and so on. As before, you can adjust the space between your picture and the surrounding text using the "H Space" and "V Space" fields.
Dreamweaver also allows you to align your pictures to the left or right of your text. Take the picture below as an example. When you first insert a picture before the text into the main body of your web page, the result probably looks something like this.



This is usually not what a web designer wants, since the placement of objects is awkward at best. To align the picture to the left of the words so that the words flow all around the words, locate the "Align" drop down box in the Properties pane. It is currently set to "Default". Click it and select "Left". Your web page should now look like this:



The image is now flushed to the left with the words flowing all around it. If you prefer that the picture appear on the right, select "Right" from the drop down menu instead of "Left".
You should of course also adjust the "H Space" and "V Space" around the picture so that the words do not come right up to the edge of the picture. The above is merely an example to show you the effect of using the "align" facility in the Properties pane.

When you're through with your changes, save your page and publish it again. And of course, test it by pointing a web browser at your site. Even though you're using a What You See Is What You Get (WYSIWYG) web editor, you should always check the changes you make in a real web browser instead of relying on Dreamweaver's representation of the page. (In fact, you should check it in multiple browsers.)

Congratulations. Your site now looks more professional with the addition of a logo and pictures of your products.

Next Chapter

In the next chapter, you will learn how to change font typefaces, font colour, add bold and italics as well as adjust the font sizes on your web page.
Copyright © 2008-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

....................................

http://www.thesitewizard.com/gettingstarted/dreamweaver-cs4-tutorial-2.shtml