sidebar1 Content

 

The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div.

Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.

Make Your Webpage More Attractive by Using Graphics

You will need a small image to act as the logo of your website

LogoBear1 Bear2expression1boy1

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.

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 get a small graphic from the Internet.

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.

 At the top of the page is the name of your website. Place the text cursor to the left of the name. You will be inserting your logo at this position.

Choose "Insert | Image" from the menu.

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 labeled "Properties" containing information about your image.

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.

You've now added a logo for your web page, making it look slightly more professional.

Align the Text with the Graphic

LogoRepeat the insert graphic process-----if you have a long paragraph, sometimes, 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.

Save your page with "File | Save".