PDA

View Full Version : Converting Photoshop comp


Interstellar Icon
04-09-2008, 06:25 AM
Hi All,

I've created a comp of an index page in Photoshop, and I'm now trying to replicate it in Dreamweaver.

First, here's the comp:

http://i237.photobucket.com/albums/ff183/DesignDude/tracing_image.jpg

I'd like the gradient background to autostretch, and the white page with rounded corners to be centered regardless of browser size. I don't think I'll have any problem getting the images and content onto the page once it's set up, but I've been unable to set it up to this point. Can anyone advise as to the easiest way to accomplish this?

Thanks in advance,
Sam :)

Ricky55
04-09-2008, 10:11 AM
Looks OK. You could do with some more breathing room though around your text. No be afraid of white space, there's a lot of text there.

To get this into DW you should really be working in CSS, if you've never done this before you will be better doing a few tutorials first.

domedia
04-09-2008, 02:17 PM
I'd like the gradient background to autostretch,
Look into the CSS property 'repeat', 'repeat: repeat-x' is most likely what you are looking for.

and the white page with rounded corners to be centered regardless of browser
size.
Look in the tutorials section of this website for a tutorials on centering content.
Good Luck Sam!

Rob_Che
04-10-2008, 12:13 PM
Keep us posted - some good problems to solve there.

I'd like to see this develop... Good luck !

Start with your main contebt "wrapper" - tutorial on this on the main page.

Jittor
04-10-2008, 08:46 PM
I would say your first steps should be slicing your images to get them usable for CSS - or if your not ready for CSS, get them ready for your table.

- You know, I was planning on doing a VTM on something like this last year - how time flies.

Interstellar Icon
04-11-2008, 06:45 AM
Hey All,

Thanks very much for all of your input, and I'm sorry I haven't gotten back on this sooner. I'm scrambling to get this project done for a client, and I'm feeling like I'm in over my head. :shock:

As the project stands now, I loaded the gradient background as the background image for the project, and that's working...at least visually. :wink: I am working with layout tables (and probably no where near ready for CSS at present), and I was able to center the main layout table and give it a white background, which looks pretty good. It doesn't have the rounded corners or drop shadow of the image above, but I think those will have to wait. (My client just wants to get something functional up for the site at present, and I told them I'd continue to work on the design after launch.)

Here's my latest challenge, and it's pretty bizarre: I've painstakingly set up the layout tables I'm using so that they're "perfect", i.e. all of the dimensions and positions are exactly as they should be. The header table contains the logo and exponential graphic, the table below it contains the navigation menu, and then there are three tables down the left side for the images, and one table next to them on the right for the text. Here's the kicker: As long as the text table is blank, everything lines up perfectly, but as soon as I add the text, it throws all of the other tables to the left, I'd say 1-2 pixels. I've done extensive troubleshooting, and I've discovered that as soon as I get past around 3 lines of text, the problem appears - less than 3 lines and everything still lines up perfectly. And the table is way bigger than 3 lines of text, so I don't think its dimensions are part of the problem.

Sorry to be so verbose, and I hope all of that makes sense. Any ideas?

Thanks again for your input so far, and I look forward to hearing your thoughts on this one. :-D

Sam

Rob_Che
04-11-2008, 08:37 AM
I was able to center the main layout table and give it a white background, which looks pretty good. It doesn't have the rounded corners or drop shadow of the image above, but I think those will have to wait.

If you made the header a .gif with rounded corners and made sure that it was set on a transparent background - added it to the table with no background colour you would have trans rounded corners...
Just a thought... For drop shadows start looing at .png files.

as soon as I get past around 3 lines of text, the problem appears - less than 3 lines and everything still lines up perfectly. And the table is way bigger than 3 lines of text, so I don't think its dimensions are part of the problem.

Tables are a pain for this.
There WILL be a really easy reason but impossible for me to diagnose from here!

Interstellar Icon
04-13-2008, 05:17 AM
Hey Rob,

Thanks again for your input and suggestions. I think I'm going to need to get up to speed with CSS and building websites proper, because I really want to do things right. :-D As for the text/tables issue, I've fired a copy of the page off to Adobe Support, so hopefully they'll be able to find a resolution. I'll post here once I hear back, in hopes that it may help others.

Peace,
Sam

Interstellar Icon
05-29-2008, 06:35 AM
Hey Everyone,

Just wanted to let everyone know that I did fire this issue off to Adobe Support, and their response was basically "We don't do that". They did refer me to a user forum on their site, but I think I'm going to try a redesign on the page, as it's really too busy for its own good. :shock:

Thanks again for all your input, and I'll be posting some additional questions around the forum...

Sam

Rob_Che
05-29-2008, 09:52 AM
Sorry... what exactly did you ask Adobe Support for ?

Ricky55
05-29-2008, 12:01 PM
Aye tell us?

Interstellar Icon
05-30-2008, 09:14 AM
Sorry... what exactly did you ask Adobe Support for ?

The issue was with the Index page "jumping" around 3 pixels to the left, only in IE. I'm pretty sure you blamed it on "tables" in one of your posts above, which I'm sure is correct. The site is live now, so you can see it here:

http://www.nthdegreeconsulting.com/

Here's my verbose explanation of the problem from one of the above posts:

"I've painstakingly set up the layout tables I'm using so that they're "perfect", i.e. all of the dimensions and positions are exactly as they should be. The header table contains the logo and exponential graphic, the table below it contains the navigation menu, and then there are three tables down the left side for the images, and one table next to them on the right for the text. Here's the kicker: As long as the text table is blank, everything lines up perfectly, but as soon as I add the text, it throws all of the other tables to the left, I'd say 1-2 pixels. I've done extensive troubleshooting, and I've discovered that as soon as I get past around 3 lines of text, the problem appears - less than 3 lines and everything still lines up perfectly. And the table is way bigger than 3 lines of text, so I don't think its dimensions are part of the problem."

Thanks,
Sam

domedia
05-30-2008, 12:20 PM
Adobe support will provide support for their software, not your code.

Tables are for tabular data, think spreadsheets. Better go back to that idea about making proper web pages ;)
You can start here: http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_cs3.html