Participant

Question

How do I add hyperlinks to a PSD layout in Dreamweaver?

Forum|Forum|7 years ago
November 9, 2018
2 replies
900 views

Hello, I am a beginner at HTML coding creating my first website. I have created a home page layout in Photoshop which includes a right column with several buttons that I want to be hyperlinks to the other pages of the site. The layout was sliced and exported into Dreamweaver. I understand how to make hyperlinks, but I cannot figure out how to

1. Place the hyperlink where the image is, and make its clickable boundary the same as the image, so you can click on any part of the button for it to work.

2. Hide the hyperlink so the only thing that's visible is the image on that section of the layout.

This picture I have attached describes the location of the button on the layout. "home_but.jpg" is the button.

This topic has been closed for replies.

Nancy OShea

Community Expert

If you persist in using the Photoshop generated code for your website, it won't be mobile or tablet friendly. And your image based navigation won't be be accessible to screen readers, language translators or search engines. At least with a starter template, your layout will be responsive and web friendly. Take your design ideas and shape the starter template however you like with CSS styles, images, text, video, etc... to make it uniquely your own. But don't use image based navigation.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Hi and welcome to the Dreamweaver forum .

Sadly what you have done so far is to allow a graphics app to generate HTML code for you. It's not stable for use in real websites. Photoshop excels as a graphics app but it stinks as a code generator. The other mistake you made is slicing images. We do not do that anymore. This tells me you're using an outdated tutorial.

Start over with one of the pre-built CSS Starter Templates in Dreamweaver.

First define your local site folder by going to Site > New Site. Example, C:\MyTestSite\

Next, go to File > New > Starter Templates. Select one and hit CREATE button.

After you save and name your document, DW will create assets folders in your Files Panel.

You now have a good starting point for building your new website with HTML and CSS code.

HTML Tutorial

CSS Tutorial

Nancy O'Shea— Product User & Community Expert

C

ChuckBerAuthor

Participant

Thank you for your reply. Is there a way to turn my PSD file into a template then? The layout is very specific to the purpose of the website, it's for my business. It's a 3 column with custom graphics and very little text. I'm trying to hone my graphic design skills and am not interested in using a standard template at this point.

BenPleysier

Community Expert

I think that you should have a clear understanding of what the differences are between graphic design and web design, the main one being the medium in which it is presented, namely, graphic design is static, web design is fluid. For more info, see Web Design vs. Graphic Design, What’s the Difference?

Yes, you can show your prowess in a web page, but only if you follow the rules of web design. You can use the images from your PSD file to use in an HTML document, but cannot use the HTML code that is produced by the PSD file.

Also note that images do very little to add value for search engine optimisation (SEO). If this is your business site, you will want to be found by search engines.

Anyhow, this is enough to put a damper on your project. I do salute you for wanting to take the initiative and I hope that you continue with it. Just remember, the web site is a reflection of the quality of your graphics design.

Good luck.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded