In the previous chapter of this Dreamweaver tutorial, we designed a two-column web page using Dreamweaver CS3 and uploaded it to the web host.
In this chapter, you will learn how to insert images into your web page.
If you have missed the first instalment of this tutorial, you should read and attempt the steps given in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1) before trying out the things on this page. Uploading the web page, which we did in Part 1, is a necessary step if Dreamweaver is going to handle the web addresses (URLs) of your images correctly. This chapter assumes that you have completed the steps in Part 1.
Requirements
You will need the following to complete this tutorial:
A small image to act as the logo of your website
You will need a small image to place on the top left hand corner of your web page. This image will serve as your site's logo. It will appear on every page of your website.
If you are designing a company website, chances are that your company already has a logo. If you don't have an image file for the logo, either scan it or take a digital photograph of the logo for your use in this chapter.
If you don't have a logo yet, create one using your favourite graphics drawing software or draw one on paper and scan it or take a digital photo of it. You will need a program that can produce either PNG, GIF or JPG files. If you don't already have a drawing or painting program, you can find a list of free ones on thefreecountry.com's Free Drawing and Painting Software page.
When creating your logo, note the following:
Try to keep the width and height of the image small. There are no fixed size stipulations for a logo, but if your logo is too wide or tall, you will have a hard time fitting it into your web page. If the picture you have is too big, try resizing it in your graphics software.
If you really have no idea what to put in your logo, just create an image with the name of your site on it.
A description of how to use a drawing program or a scanner is outside the scope of this tutorial. Nonetheless, you will definitely need a graphics image for this tutorial.
Product images or other pictures (optional)
If you want to place other pictures on your web page, for example, photos of the product you're selling, or your own photo, you will also need to have them in either the PNG, GIF or JPG format. Don't worry if you don't have any picture or photo of this sort. This part is entirely optional.
Adding Images to Your Dreamweaver Page
Put a copy of your graphics files in the same directory as the file you created for your website in the first part of this tutorial.
Start up Dreamweaver.
In the right column, you should be able to see "index.html" in the list of files that belong to your project. Doubleclick it to open the file.
At the top of the page is the name of your website, which you entered in the first chapter. Place the text cursor to the left of the name. That is, click on the name, and move your cursor to the leftmost position using the left arrow key on your keyboard. You will be inserting your logo at this position.
Choose "Insert | Image" from the menu. If you recall from the previous chapter, "Insert | Image" means that you click the "Insert" menu, then click the "Image" item on the menu that appears. A dialog box will appear. You should see the image or images that you previously saved in the folder. If you have more than one images in the folder and are not sure which is the one you are going to use for your logo, you can click the name of the image once. A preview of the image will appear in the dialog box, making it easier for you to select the correct image.
Once you have decided on the image you want, select it by clicking on it once, and then clicking the "OK" button.
A dialog box will appear, asking you for the "Alternate text" for the image. This is basically a brief description of your image. The description will be displayed for visitors browsing with graphics disabled. It will also be the text that is read aloud by screen readers. The latter are used by visually impaired people visiting your website. Search engines also rely on the text, since they cannot "see" images either. It's wise to always give your graphics a brief description.
Since this image is merely your site's logo, you can either type into the "Alternate text" field your company's name or even just the word "logo" if you're lazy. Don't worry that the box is so small - it will scroll as you type.
Once you've typed your "Alternate text", click the OK button. Ignore the "Long description" field.
Your logo should now appear before your company name or your site name. If you find the logo is too big, and you want to redo it, simply click it once and hit the DEL key. Recreate your logo as needed, save it into the website folder and repeat the above procedure.
-
At this point, you will probably find that the logo is uncomfortably close to the name of your website. To introduce some space between the logo and your site name, click the logo once to select it. At the bottom of your Dreamweaver window, you should a panel labelled "Properties" containing information about your image (see picture below).
Locate the "H Space" edit box and enter "5" (without the quotes). Press enter. Notice that some space has been inserted between your image and your website title. If you think 5 is too much or too little, you can experiment with other values in this box. Basically, a larger value means that more space is inserted, while a smaller value shrinks the amount of space between your picture and the surrounding material.
That's it. You've now added a logo for your web page, making it look slightly more professional.
(Optional Step) The same technique that you used here to add a logo and be used to add other images to your web page. For example, you can use this method to add pictures of your products in the main body of the web page.
Let's say for example, that you are using the following text in the main part of your web page.
Welcome
Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.
Featured Product
Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you can modify and augment to suit your needs.
(If the text seems familiar, it's because I used it as the sample text in the previous chapter.)
If you wanted to insert a picture of a product so that it appears as a small thumbnail just beside the block of words "Dreamweaver Site: This..." (etc), place the cursor just before "Dreamweaver Site" (use to mouse to click that spot). Click "Insert | Image". Type the alternate text for your product when the Alternate Text dialog box appears. Click OK.
Notice that the words do not exactly flow over to the right of the image. To make all the words appear to the right of the image, click the image. Locate the "Align" box in the Properties panel. It is currently set to "Default". Set it to "Left".
The image should now be placed completely to the left of the text, with the words filling in the space on the right.
If the image is too close to the words to your liking, adjust the "H Space" in the Properties panel as before. You can also adjust the "V Space" to change the vertical space between the image and the words. If you don't know what I mean, just experiment by setting some value like "5" (without the quotes) in the "V Space" box to see what happens. You can always delete the value again if you don't like the result.
Before you continue to the next section, save your page with "File | Save".
You should now upload (ie, publish) the updated web page to your web host. Since you have already set up everything in the previous chapter, all you have to do at this point is to click "Site | Put" from the menu. If Dreamweaver prompts you to save the site before "putting", do so. If you are asked whether you should put "dependant files", click "Yes" to allow Dreamweaver to publish your images and CSS files as well.
Finally, check your website using your browser. Congratulations. Your website now looks more professional with the addition of a logo and some images for your products or yourself.
0 comments:
Post a Comment