Importing Webpage Layout Into Dreamweaver ?

AP
Posted By
Andy_Preston
Dec 30, 2006
Views
645
Replies
8
Status
Closed
Hi There,

I’ve created a webpage layout with adobe photoshop but i cant work out how to import into adobe dreamweaver to begin adding content e.t.c

thanks 🙂

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

JJ
John Joslin
Dec 30, 2006
Insert > Image ?
AP
Andy_Preston
Dec 30, 2006
well i’m not sure if its an image as its a webpage layout made with photoshop.

see here <http://img82.imageshack.us/img82/7920/layoutcopytj5.jpg>
JJ
John Joslin
Dec 30, 2006
Yup. That’s a JPG image.

You need to consider how to incorporate it into a HTML page.

That’s not really Photoshop business.
L
LenHewitt
Dec 30, 2006
If you saved Optimised as HTML and Images, just open the HTML in DW
AP
Andy_Preston
Dec 30, 2006
but ive saved the whole project as a psd file, ive imported it as a gif but i cant add text or anything to it. i dont understand it 🙁
C
chrisjbirchall
Dec 31, 2006
but ive saved the whole project as a psd file

Open your image in Photoshop. Go FILE>EDIT IN IMAGEREADY. use the Knife tool to create your slices, then "Save Optimised" and (as Len suggested) choose "HTML and Images".

You will then be able to open the project in your HTML editor.

Chris.
A
Anthony
Jan 2, 2007
wrote:
Hi There,

I’ve created a webpage layout with adobe photoshop but i cant work out how to import into adobe dreamweaver to begin adding content e.t.c

thanks 🙂

Once you’ve created your layout, you have to slice it using the slice tool. You can do this in photoshop or imageready, personally, I prefer imageready as it has more options and it allows you to make rollovers, etc. To slice it in imageready you need to press (Shift+Ctrl+M) in photoshop. Once youve done that, slice up your layout. Slicing your layout basically divides your layout into rectangular areas which are images that are defined in photoshop/imageready for web optimization. Often slicing can take some time and practice. Once you’ve sliced your layout you have to save it as a html page. To do this in imageready, go to File > Save Optimized As and save your file. Make sure that you save it as HTML and images. If you’ve sliced it in photoshop, just go to File > Save For Web and once again save your file. Then open up dreamweaver and open your html file and code your layout. As photoshop automaticlly generates the code for you, your slices appear as images, if you would like to add content to these slices you will have to make the a background, for example:

<td><img src="images/index_01.gif" width="43" height="23" border="0"></td>will need to be changed to <td background="images/index_01.gif" width="43" height="23" border="0"></td>

If you’d like to know more information on slicing and savings as a html webpage just google it or go to
http://www.depiction.net/tutorials/photoshop/layoutslicing.p hp or http://www.pixel2life.com/search/all/slicing/1/
T
tosny
Jun 29, 2007
When you edit it in Dreamweaver,you can make it as the background

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

Related Discussion Topics

Nice and short text about related topics in discussion sections