We have a couple of options as to how to insert images into our web pages.
We can use the <img> tag in the html or we can use CSS Style Rules to insert background images.
We can also use CSS Style Rules to create class styles and apply those styles to certain img's. (See "How to Float Text Around an Image" further down this page)
However, before you insert your images, you must optimize or compress each image file in order to decrease the file size. This will ensure that your images load quickly.
1. Place your cursor on the web page where you would like to insert the image.
2. Click Insert -- Hover over Picture --- Choose From File
3. A dialog window opens that will let you navigate your computer for an image. Find the image you want to use, click on it and click Insert.
4. At this point, a small dialog window will open asking you for Alternate Text, which is technically called an 'alt tag'. Simply and briefly describe the image you are inserting.
The Alternate Text is an Accessibility Requirement. Some people who are visually impaired or blind will use a screen reader. A screen reader, like a search engine, cannot read images. So we must supply some text that describes the image.
Failing to supply Alternate Text for your images will cause your SEO to suffer.
To insert an image with CSS, we will create a new style or we could use an existing style and modify it by adding an image.
Example: Let's create the container of our layout and add a background image to that container.
1. Place a div on your web page
2. Locate Manage Styles Panel and click New Style. This will open the Style Builder.
3. Make the selector #container, define in: the current page, check the box to apply the style to current document selection.
4. Click on the Background Category.
5. Look for background-image and click on Browse.
6. Now you can navigate your computer for the image you want to insert as the background of the container. Select it and click ok.
7. Click Apply to apply the image to the background so you can see it.
8. Modify the position of the image wihtin the cfontainer by setting values for x and y postions.
9. Also, do you want this image to repeat across or down, or none. Select one for background-repeat.
10. Click Ok, and save your work.
You will need to open up the container in order to see the entire background. As you add content to the container, it will automatically open up. Or you can temporarily give the container a height by going to the Position Category and setting a height.
Watch
the Video: Inserting CSS Background Image
This
is one of the most frequently asked questions. The answer is
the float property.
Once we insert the HTML Image, we will create a New Style and float the image. This will allow the text near the image to float up and around the image.
We should also place some margins on the image so that the text does not smash up against the image.
You can also add a border to the image via the CSS style. Just keep experimenting.
Modify
and optimize an Image in Adobe Fireworks and Insert it into your
web page using CSS
Here we use a graphics program to modify a very large image and save it directly to our web site.
