Adding Content to image based web pages?

[bushman91]

Hey,

I am having troubles with my template or web site. I made a image in photoshop and sliced it up into a bunch of gif images. I want to add some content as in images as hyperlinks and some text for Reviews. I have Dreamweaver mx 04.

How do I add content (text and graphics) over top of my curent web layout made up of smaller gif images.

[tgreer]

Use <div> tags and CSS Positioning. All of your background images would be contained in one <div>, and your "content" would be in another.

With CSS, you can make elements overlap each other. I have an article about CSS Positioning on my website, on the "Articles Page".

[2ndPlatform]

Bushman --

If you've sliced up your page in Photoshop, the resulting HTML will be all graphics. Couple things you might want to keep in mind... but without seeing your site I'm not sure if you've already taken these into account.

1. You don't want to have your entire layout be based on images. I would use CSS and HTML to code as much of it as you can. This will cut down on yor load time and make your viewers happier. So for example, if your center column or area of the body of the page has a solid color background, use HTML to define that, not a graphic.

2. You can use graphics as backgrounds to either DIVs or Tables, depending on which strategy you use. Some use more DIVs and CSS layouts, some use tables. There are advantages and disadvanges to both, I think. But instead of putting a graphic in a cell of a table, use it as the background of that cell. That way you can write your text over it. If you go the table route, you may have to define the height and width of the table cell and make sure your graphic in the background doesn't repeat.

If you want to show me your site I can take a closer look -- like I said it's hard to tell, not having seen the site.

Good luck!
Shannon

[mikeSQL]

Ummmm, rule 1. When slicing wheather your using Photoshop or fireworks, It dont matter and I dont give a hey, what you have to do is watch all your slicings, becasue that can effect on how and where you canaddyour contents.

Also remember too that once youve made your slices, you can also add them as a background in a table. That will help you out with the content part for the most of it. But like I said wahct how you slice up your images. Ill bet almost anything you have them sliced in to bits and bits, however fireworks and or photoshop will slice up whatever is nessicery too againts your 1-4 slices. It usually finishes off what you didnt slice up so that you dont have to spend all your time slicing and dicing. LOL, plus youll know that its sliced the way you want it to be sliced.

[kernel]

When cutting up a desin you should always leave potential content areas empty, as in no images unless the image is a background image. ie used in a table, or cell just to fill the area.

For more help, post an image or the coded page of your design and show us where you need to add content. Its hard to help without seeing what we are dealing with.

[mikeSQL]

When cutting up a desin you should always leave potential content areas empty, as in no images unless the image is a background image. ie used in a table, or cell just to fill the area.

For more help, post an image or the coded page of your design and show us where you need to add content. Its hard to help without seeing what we are dealing with.

Right but to make it easy for the ones who is learning here, I wold personally say leave the images where its at after slicing them as far as where you want your contents go. Once your done save it as an html and make sure the images are going into its own folder as well. Open up the page in dreamweaver and where ever you want your contents at, delete that image in that spot. Your done. Boom!

[bushman91]

Yes but i want the content to be over top of an image.

Here's the site (just as one big image though)

[IMG]http://img21.exs.cx/img21/3377/SportsTemplateHome2.jpg[/IMG]

EDIT: The 3 squares is were i would want images over top of that yet
the one square is above the Latest News
the other 2 are above top games.

[tgreer]

Using CSS, you can set the background of <div>'s to an image. The <div> is a block-level element that can contain text and images. So your div can have:

1) a background image with
2) text and images "on top of" or inside the <div>

Get it?

[bushman91]

Ya i get it, but dont know how to add <div> to things or the background stuff

[mikeSQL]

I see, yes, like I said, for the squares, make a slice covering the squares. Next dont slivce anymmore, jjust that and save. Open up your dreamwweaver or whatever program your using and select the squares.

To have the images remain and not deleting theme, just liik at the properies at the bottom. Youll see the images name.
Copy the entire line like this images/image1.gif. This ican be put in a background of that tablethat your slice has made for you.

place that line (images/image1.gif), and put it in the properties where it says BGRD or background, which ever acrynoum tha was. Make sure before doing so you click on that images table. If your having a hard time, PM me and I will send you an example and or do it for you, and then you can look at what and how I did it so you can learn.

[mikeSQL]

So how'd it go?