Does anyone have a prefered method from going from Photoshop (save for web) to Dreamweaver and still maintain some sort of table layout? I can slice and dice my designs in Photoshop, but after I import the HTML file into Dreamweaver, there is no sort of table structure. Sure the HTML file displays the page and images, but I can't really do much with any text data on the page. Should I assume at this point that you must then create all of your tables? I keep hearing that it's easier to code straight HTML, but I spend so much time designing the page, that this can be very tedious, plus the learning curve. I know some template companies provide the PSD and the HTML, but I'm not sure if they are hand-coding the HTML. I would like to know the correct way to do this or how professional web designers accomplish this. Please Help!
Photoshop Gurus Forum
Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
You should upgrade or use an alternative browser.
Going from Photoshop to Dreamweaver...
- Thread starter optvision
- Start date
tranquil222
Power User
- Messages
- 230
- Likes
- 0
Hi, I use the save for web feature to save sliced .psds for my company's website. It's not a straightforward/easy method but here's what I do:
Slice up my image in Photoshop
Save for web
-Make sure that when you save, you say to save as .html and images
-Make sure that you have it create DIV tags
-Then save it in a folder in your web directory
Open the page in Dreamweaver and select all and copy
Paste it into your desired page
-What this is doing for you is creating the complex layout table that will house all of your images. Depending on how far or short in the directory structure is, all of your image links will be broken. To solve this, move all of your images where you want them and then get them to link.
Here is the easy way to get them to link
all of your images in your tables will be referencing /images/xxx.jpg. click on one of these images and find the correct source for it by dragging the crosshairs to the image in your site panel. It should show up in the table. So now you have in your code a correct link. If your layout is small, then you can do this for all of your slices. If not, do this:
Find and Replace. What you need to find is the directory structure that all of your images are referencing, most likely /images , and then replace that in the code with the correct directory structure, maybe ../images , or flowers/images . I personally do not like coding myself so what I do is this:
in code view, find the directory structure of a wrongly referenced image(ie, if you have /flowers/images/rhododendron.jpg and /flowers/images/beargrass.jpg, only copy ' /flowers/images/ ' and not the filename)
copy the code before that
put that in the "find" box in the find and replace box
in code view , find the directory structure of a correctly referenced image(ie, if you have /flowers/images/nwflowers/rhododendron.jpg and /flowers/images/nwflowers/beargrass.jpg, only copy '/flowers/images/nwflowers/ ' and not the filename)
copy the code before that
put that in the replace box in find and replace
this should fix your problem. hope this helped. i created the top banner of this website using this technique: www.vf-law.com
please ask anymore questions
Slice up my image in Photoshop
Save for web
-Make sure that when you save, you say to save as .html and images
-Make sure that you have it create DIV tags
-Then save it in a folder in your web directory
Open the page in Dreamweaver and select all and copy
Paste it into your desired page
-What this is doing for you is creating the complex layout table that will house all of your images. Depending on how far or short in the directory structure is, all of your image links will be broken. To solve this, move all of your images where you want them and then get them to link.
Here is the easy way to get them to link
all of your images in your tables will be referencing /images/xxx.jpg. click on one of these images and find the correct source for it by dragging the crosshairs to the image in your site panel. It should show up in the table. So now you have in your code a correct link. If your layout is small, then you can do this for all of your slices. If not, do this:
Find and Replace. What you need to find is the directory structure that all of your images are referencing, most likely /images , and then replace that in the code with the correct directory structure, maybe ../images , or flowers/images . I personally do not like coding myself so what I do is this:
in code view, find the directory structure of a wrongly referenced image(ie, if you have /flowers/images/rhododendron.jpg and /flowers/images/beargrass.jpg, only copy ' /flowers/images/ ' and not the filename)
copy the code before that
put that in the "find" box in the find and replace box
in code view , find the directory structure of a correctly referenced image(ie, if you have /flowers/images/nwflowers/rhododendron.jpg and /flowers/images/nwflowers/beargrass.jpg, only copy '/flowers/images/nwflowers/ ' and not the filename)
copy the code before that
put that in the replace box in find and replace
this should fix your problem. hope this helped. i created the top banner of this website using this technique: www.vf-law.com
please ask anymore questions
tranquil222
Power User
- Messages
- 230
- Likes
- 0
I would say that getting to know a little HTML is going to be worth your while, because in Dreamweaver you're able to find and replace code or text in your entire site. For me this has proven an extremely useful tool.
Thanks allot for the information. When you refer to DIV tags, is that the information that you are copying and pasting into Dreamweaver? If so, doesn't this overwrite the existing HTML code or did I miss something? Also, how to setup the DIV tags within Photoshop as I have not seen this setting. Thanks!
tranquil222
Power User
- Messages
- 230
- Likes
- 0
Well, if you're using windows and are primarily designing for a page that will be viewed in explorer, all of the default options for generating tables is fine. To see the HTML options, and some other options, go to "edit output settings".
tranquil222
Power User
- Messages
- 230
- Likes
- 0
div tags just make life a lot easier by setting attributes for other tags, and photoshop uses this tag to create its tables by default. poke around in the "edit output settings", there is a way to specify the name of the folder you want to save your images in, and also to not save them in a folder at all, you chose whats right for you. what are you working on?
:\
:\
Once you've sliced an image you want to add to your website with Photoshop, open Image Ready and choose File>save as. Select 'HTML and images' and save to a folder on your hard drive.
This creates a web page with your image within a table, borders set to '0' and a folder named 'images' that contain all the slices. Copy/paste the HTML page and image folder to the same directory (folder) for your web site and publish.
If you want your sliced image on an existing web page, you could copy/paste the html code created by Image Ready to the page you want. Copy all the code between the table parameters as my sample shows below:
<table border="0" cellpadding="0" cellspacing="1" height="76">
.
.
.
.
.
</table>
Just be sure your created 'image' folder is in the same directory as your copied table.
(I use Front Page 2002 for my web design)
Doc
This creates a web page with your image within a table, borders set to '0' and a folder named 'images' that contain all the slices. Copy/paste the HTML page and image folder to the same directory (folder) for your web site and publish.
If you want your sliced image on an existing web page, you could copy/paste the html code created by Image Ready to the page you want. Copy all the code between the table parameters as my sample shows below:
<table border="0" cellpadding="0" cellspacing="1" height="76">
.
.
.
.
.
</table>
Just be sure your created 'image' folder is in the same directory as your copied table.
(I use Front Page 2002 for my web design)
Doc
When you're finished with your design in Photoshop, then slice the image and open the Save for Web dialogue box. In this box you can assign formats, sizes, compression, etc., then what I always do is save the sliced images into a folder I created just for the task (which I named Save 4 Web).
After this I open Dreamweaver, then create a new file, and build my tables and cells according to the layout of the design I started in Photoshop. Into the cells where they go I insert the formatted graphics from the Save 4 Web folder where I stored them.
If you assign Photoshop as the main graphics editing program in Dreamweaver, then anytime you want to fix one of the graphics you can click the Edit button in the Property Manager and PS will open right up with that selected graphic on the worksurface.
After this I open Dreamweaver, then create a new file, and build my tables and cells according to the layout of the design I started in Photoshop. Into the cells where they go I insert the formatted graphics from the Save 4 Web folder where I stored them.
If you assign Photoshop as the main graphics editing program in Dreamweaver, then anytime you want to fix one of the graphics you can click the Edit button in the Property Manager and PS will open right up with that selected graphic on the worksurface.