How to Add a Logo to Your Dreamweaver CS4 Page
- 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.
- 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.
- 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.
- 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.
- 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).
- 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.
- 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.
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/.