Help Needed For Dreamweaver,

Hello, I'm would describe myself as being quite good with Dreamweaver but i have one problem which i just can't get around.
I have made a background image with photoshop and it has writing for the links on the image, But i can't make the writing on the background links to move to different pages. I can't add the links as text because it's a specific type of font i downloaded and the effect would be lost if others didn't see it on the site. And i've tried making the text seperate images to drop over the background but it doesn't fit because the background is so unusual.

If you need more details i can answer more questions and send you a picture of the background image to help you understand.

Any help would be appreciated and i would prefer direct help by contacting me at antonrand@gmail.com, you can also add that adress to msn if you want to instant message me to help me with my troubles.

I will be very happy if you can help me with this problem and i am grateful for you reading this

Set the image as a background and use hotspots.

Sypher's suggestion is correct, but I'll offer an alternative as well. It requires ImageReady (or similar).

Which version of Photoshop are you using?
I use PhotoShop 8 (CS) which is bundled with ImageReady.
It is quite simple to redirect links within ImageReady although you will need to get used to it at first.
Use the inbuilt HELP facilityto learn how to make buttons.
This way you will slice up the final image around the components you want to make into buttons. You can then change each button by adding 'mouseovers' and 'mousedowns' (and much more). I use the mouseover to change the appearance of the button and the mousedown condition to redirect to a new url.
The advantage of doing this is being able to use the text as part of the image and not having to embed the font into the page.

Don't be daunted by having to learn a little about ImageReady. If you can use PhotoShop and Dreamweaver, I think you'll find it's very simple and it may inspire you to other things as well (there's a lot more you can do in IR than DW or PS. This is just a beginning).

Thanks for the advise, but is there a way to use hotspots for the background, i tried imageready but i could only save it as .psd and i'm guessing that if i put that on dreamweaver it wouldn't be compatible for other users.

Cheers

Anton.R

You're trying to save the ImageReady file for the web using an incorrect format.

The .psd format is the base file for working in PhotoShop / ImageReady and keeping everything separate so you can keep working in a file and maybe change things you've already done.
It won't work in another programme.

You need to a) 'save' or 'save as' to keep the .psd file and protect your work, then b) 'save optimised' to save your work in a useable format.

When given the option, direct the programme to save the files it's about to create to the directory of your website. ImageReady will then save a data-text file and/or (depending on your settings) and 'images' file (which will contain all the slices that make up your final image).

Now, the default option for this procedure (going from memory here, bear with me), is, I believe, for an HTML file and an Images file.
The html (data-text) file is dependent on the contents of the Image file so if you alter the contents, or location, of that the data-text file will not work.

You can open the html (data-text) file and test it's operation. However, it may work differently to when it's finally uploaded. ie, Opening from your local hard-drive may cause Windows or your security programme, to ask whether you wish to allow it to continue as it could harm your computer. Well, you coded it. If you didn't include anything to harm your computer, accept it and see the result as it will appear once it's uploaded.
This happens because the data/text file also includes any javascript needed to run any buttons, effects, etc.

Now, you may be wondering why I'm calling it a 'data/text file instead of simply calling it an html file. Well, in case you are, it's because there's another option in ImageReady which a lot of people using it don't know about, let alone actually look for:-

You can alter the default 'save' options and I began doing this a while ago. Instead of having the programme save an html file, you can get it to save your work as CSS instead! How cool is that?

Using these features I've started designing my whole page in PhotoShop / ImageReady and then divide the final file up into working areas and use the code from each to make up my web page.
ie: Once I've got my finished web-page looking how I want it, I might decide that it consists of three basic areas;
The header (banner / navbar / whatever), the body, and the footer.

So I'll save the whole page as a finished .psd file (in case I need to change anything later).
Then, I'll go back into the file and create separate .psd files for each of the three areas, using only the sizes required by those areas, and optimise them accordingly.

Now, instead of uploading and then asking each visitor to download a 1024x768 px image with all the Kb's that would involve, I might only have a Header image of say, 770x150 px which I can plonk at the top of my page using CSS.
The body can now be reduced to an image of say 770x1 px, repeated down the length of the page (height should be whatever is needed for a clean repetition of the image) which means this body is now made up of bytes rather than Kilobytes. This is almost as good just setting the background colour in HTML (or CSS). [which I'll come back to in a moment]
Finally the footer can be 770x30 (or whatever is necessary, again) and plonked at the bottom of your page.

With a repeating background, and a footer located at the very bottom of the page, you have a page that resizes itself according to your content / browser resolution.

Set the background to something complimentary so browsers with higher resolutions don't feel left out (they'll see a white background if you don't do anything, which doesn't look good if your content background is, say, themed grey).

Then all you have to do is extract the code ImageReady has provided you with and plop it into your web page editor as required. This is a little more complicated with CSS than HTML and I would recommend getting used to doing it in HTML a few times first so you can see where everything goes and how it works.

Right.
Time for coffee!



[edit: For some reason my Dreamweaver doesn't display this very well which is why I still use FrontPage as well as DW and Notepad. Get it right though, and it will look great in a browser.]