Adding a clickable link in a PSD to Dreamweaver file…

MS
Posted By
Mark_Something
Jul 13, 2008
Views
534
Replies
13
Status
Closed
Hi,
Honestly, I’m not sure if it’s better to ask this here or in the Dreamweaver forum. But basically, how do I add a clickable URL to a PSD template using PSD and DW CS3?
A bit of history here, I am not really good at PSD CS3, yet, but my hosting company has a free template in PSD that I want to use. I can alter it, change pix, etc easily, import into Dreamweaver CS3 and publish a nice looking webpage. I just can’t find out how to insert a link on the page.

I’m not good at making them myself yet, but I will be. Until then, this template is spot on what I need.

I did search the help and only found info about making a URL relative to "slices". These templates, as far as I know, are not "sliced". I don’t see any slices if they are.
Or..do I add a hotspot in Dreamweaver? I tried that and it sort of "fragmented" the PSD file.
Thank you,
Mark
Related Tags
add file link

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

P
Phosphor
Jul 14, 2008
Do it in Dreamweaver.

In a way, ALL Photoshop documents are sliced. Some just have only one slice. But URLs are never embedded in a graphic; they exist in the HTML you output, and DW is the better program for doing that.
S
Silkrooster
Jul 14, 2008
Slices or hotspots will work. I prefer slices though some prefer the hotspots. I guess its what your use to.
Anyways, in photoshop use the slice tool and drag out a box around the area you want to have the link.
Now use the slice select tool even though the slice may still be selected this will bring up some options in the top tool bar.
Clicking the icon just to the right of the show auto slices will bring up the slice options. here you can add your url plus any other info thats needed.
Once your done use the save for wen and devices. Here you need to specify that you want to save images and html. Also make sure you save the entire image. Not just the selected slice.
With a text editor you can open the html page that photoshop create and you can see how links are created.
They are nothing more than html tags that point to the slice and a url. There is nothing added to the image(s).
Just in case you have problems finding the tag look for something like the following:

<a href="http://www.example.com <http://www.example.com>"><img src="http://www.example.com/folder/image.jpg <http://www.example.com/folder/image.jpg>">Some optional text</a>

First tag is the hyperlink, second tag is the image, third tag closes the first tag. Second tag does not need closing unless you use xhtml in that case the second tag would be like <img src="http://www.example.com/folder/image.jpg <http://www.example.com/folder/image.jpg> />
MS
Mark_Something
Jul 14, 2008
Quote:
Ed Hannigan – 5:48pm Jul 13, 08 PST (#1 of 2)

Do it in Dreamweaver.

In a way, ALL Photoshop documents are sliced. Some just have only one slice. But URLs are never embedded in a graphic; they exist in the HTML you output, and DW is the better program for doing that.

And could you tell me how to do that inside Dreamweaver please? As I said, I tried making hotspots, but it made the template fractured. That is, some things were not aligned anymore after adding the hotspot.
MS
Mark_Something
Jul 14, 2008
If using the slices method, are the slices just saved in an image folder in Dreamweaver? Then published from there?
Thank you!
Mark
P
Phosphor
Jul 14, 2008
I mostly use GoLive, but, in DW, right click on the graphic and choose Make Link. Input your URL in the proper space.

That will make the whole image clickable. If you want part of it to be a link you will have to slice it.
P
Phosphor
Jul 14, 2008
Might be a good idea to seek further info on the Dreamweaver Forum.

< http://www.adobe.com/cfusion/webforums/forum/index.cfm?forum id=12>
S
Silkrooster
Jul 15, 2008
A creating a hot spot in dreamweaver should not break up an image unless it was previously sliced. Take a look at the html code in dreamweaver see if there is a table or multiple div’s for that image.
MS
Mark_Something
Jul 15, 2008
Ok..I think we’re getting somewhere now. IT is tables. Sorry folks. Ok, I was saving it in PS, I "Save for web" JPEG then get the promt to save html/images. then save all of these images. Then open that .html file with DW. This is part of what’s then there:
well, html is not allowed so it’s like:
backslash tee rrr close tag

open tag td rowspan="23" close tag
open tag img src="images/left.jpg" width="85" height="426" alt=""close tag open tag/td

a whole code page of that type stuff….
But what I’m supposed to do is save it as JPEG, make new page in DW, maybe css, then insert the whole image..right? And hotspot from there? Is that how these templates are used? O
Or do you just download the temps, edit in PS (including making a slice a URL) SAVE all the slices and then…
I get confused now about getting all these slices published in DW in one page..Are they all saved in the image folder?
I hate to seem so stupid..really.
Thanks for all your help,
Mark
MS
Mark_Something
Jul 15, 2008
What I was do is I opened the PSD with PS and made edits. Then saved as "web page", opened with DW and then tried to make a hotspot to an html page and that’s when it fractured the table setup.
It wasn’t an image, it was tables.
duhhhh.
Sorry, and thanks,
Mark
DM
dave_milbut
Jul 15, 2008
html is not allowed so it’s like…

just so you know in the future,

you can type &lt; for a left bracket and right brackets are ok.

so…

<td rowspan="23">
<img src="images/left.jpg" width="85" height="426" alt=""></td>
P
Phosphor
Jul 15, 2008
save all of these images.

If it’s not sliced, there is only one image.
MS
Mark_Something
Jul 18, 2008
Just thought I’d chime in to let everyone know WHY I was fragmenting a template when I made a link in DW.
The border needs to be set to "0". I didn’t know that. Fortunatly a buddy told me that late last nite, and now I can insert links fine.
Now..if I could figure out how to make Dreamweaver set the border to "0". But, thought you folks might be interested in the resolution. Mark
S
Silkrooster
Jul 19, 2008
Are you creating html or xhtml pages. The border portion of the img tag is depreciated. Its best to set the border in the css.

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections