Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Template creation with dreamweaver/photoshop


Guest

Recommended Posts

Hi,

 

I've seem many nice stores from you guys. i have a question here which actually not related to osc, but since you guys have done it, i hope to get some help here to design my e-store

 

i've got a psd template which i'll edit it in dreamweaver or frontpage.

 

the problem is, i've sliced it & saved in as html. when i open it up & try to add text on it, the background image on that particular cell or table will either disappear or be moved down.

 

i would like to have my text on top of the image as was done by some sample sites posted here.

 

FYI, i'm using sts on the template design

 

hope i'll get some advise soon. thanks

Link to comment
Share on other sites

Hi,

 

I've seem many nice stores from you guys. i have a question here which actually not related to osc, but since you guys have done it, i hope to get some help here to design my e-store

 

i've got a psd template which i'll edit it in dreamweaver or frontpage.

 

the problem is, i've sliced it & saved in as html. when i open it up & try to add text on it, the background image on that particular cell or table will either disappear or be moved down.

 

i would like to have my text on top of the image as was done by some sample sites posted here.

 

FYI, i'm using sts on the template design

 

hope i'll get some advise soon. thanks

 

what you need to doe is(im doing it in dreamwever so im gonna tell you how to do it in there ok)

 

if you have the template already sliced and import the html into dreamweaver....

 

if you want part of the template as background with text ontop you need to firts select the whaole table the image has in an convert all heights and widths to pixels, to do this select the table and in design view on the bottom left of the prperties pane there are six icons 3 in a row, the middle one on each row is what you are looking for! click the and it converts

 

what this does is it gives the table a constant width and height so as when you remove the pic the table doesnt colaps!

 

try and do this with all the tables in your template, the easiest way sometimes is to go into code view and click in the first table tag of each table and go back to design view and convert. remove the pic and place it as a background in the table.

 

now you can put text in over the pic.

 

but now the tricky part of the whole thing and your problem.

 

when you put to much text in a table it starts to stretch and brakes your table struckture and the pictures move!!!! on way of overcoming this(it's not compatable with all browser but if you are not woried about ie5 and less then dont stress)is to tile a background image in the table next to the table with the text in so when you put in text and it streches the image tile seamless next to it and you cant see the difference!

 

BUT!!!! you need to plan for this when you slice your template in photoshop or fireworks or whatever.

for a good explanation on doing this check out this tutorial

http://www.macromedia.com/devnet/mx/firewo...ut_editing.html

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...