944,093 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Dec 13th, 2004
0

Adding Content to image based web pages?

Expand Post »
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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bushman91 is offline Offline
24 posts
since Dec 2004
Dec 14th, 2004
0

Re: Adding Content to image based web pages?

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".
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Dec 16th, 2004
0

Re: Adding Content to image based web pages?

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
Reputation Points: 15
Solved Threads: 0
Junior Poster in Training
2ndPlatform is offline Offline
61 posts
since Nov 2004
Dec 19th, 2004
0

Re: Adding Content to image based web pages?

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.
Reputation Points: 16
Solved Threads: 3
Junior Poster
mikeSQL is offline Offline
196 posts
since Dec 2004
Dec 19th, 2004
0

Re: Adding Content to image based web pages?

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.
Reputation Points: 10
Solved Threads: 0
Light Poster
kernel is offline Offline
44 posts
since Dec 2004
Dec 20th, 2004
0

Re: Adding Content to image based web pages?

Quote originally posted by 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.
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!
Reputation Points: 16
Solved Threads: 3
Junior Poster
mikeSQL is offline Offline
196 posts
since Dec 2004
Dec 20th, 2004
0

Re: Adding Content to image based web pages?

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

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

http://img21.exs.cx/img21/3377/SportsTemplateHome2.jpg

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bushman91 is offline Offline
24 posts
since Dec 2004
Dec 20th, 2004
0

Re: Adding Content to image based web pages?

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?
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Dec 20th, 2004
0

Re: Adding Content to image based web pages?

Ya i get it, but dont know how to add <div> to things or the background stuff
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bushman91 is offline Offline
24 posts
since Dec 2004
Dec 20th, 2004
0

Re: Adding Content to image based web pages?

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.
Reputation Points: 16
Solved Threads: 3
Junior Poster
mikeSQL is offline Offline
196 posts
since Dec 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in Site Layout and Usability Forum Timeline: Seeking DW MX 2004 Expert
Next Thread in Site Layout and Usability Forum Timeline: DreamweaverMX 2004 Pro- Plague of Layout Problems





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC