Make Your Webpage More Attractive by Using Graphics
You will need a small image to act as the logo of your website
You can find free images online.
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
Repeat 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".
How to Make an Image into a Clickable Link
On many websites, the logo of the site is actually a clickable link.
For example, if you were to check the picture at the top of this page,
you will see that it is actually a link to the Course Menu.
It's very easy to make your logo into a link. Simply select the logo by
clicking it. In the Properties pane at the bottom of the window,
look for the "Link" box. Enter the address of your website, for
example, "http://students.oneonta.edu/yourusername" (without the
quotes) into that box.
Alternatively, you can enter a relative link, like "index.html". Next,
look for the "Border" box. Enter "0" (zero, without the quotes) into
that box. This prevents certain browsers from putting a blue border
around your image.