Photoshop to website

DRakE

Hi
I've recently designed a website for a local cycling club as a favour, and the guy who got me to make it said he had alot of people interested in sites so i've the potential for alot more work out of it.
I'm just wondering.

I laid out the website in Photoshop first then used the Save For Web option on it.
I went into Expression Web(frontpage) and edited it to what I wanted. I seem to come across problems when I want to have a page scroll down i.e have more information on the page than just the first screen.. I couldnt manage this without my tables from the save for web going all out of whack and the only thing I knew how to use was an IFRAME, which I hear is a wee bit rubbish these days.

But anyway, I'm just loooking basically for advice if anyone starts out making their websites that way, the link for the website is www.westcoastwheelers.com .

Anything appreciated,
Alan

Liam Byrne

Photoshop will only create a fixed-size graphic; scrolling text requires that the background is suitable for being fixed or tiled, allowing the content to "sit" in front of it.

IFRAMEs are reasonably OK for particular applications when there's no alternative (e.g. showing news or a blog from another site on your site) but for a general websites they're a complete disaster, screwing up search engines, bookmarks, links, etc.

I'm curious (and not being lousy, coz everyone has to start somewhere) but where does the "potential for a lot more work" come from if - as it seems - you don't know the basics ?

There's a lot more to "designing" a website than "Save for Web" in PhotoShop or Microsoft Word.....

axer

Liam Byrne wrote: »

I'm curious (and not being lousy, coz everyone has to start somewhere) but where does the "potential for a lot more work" come from if - as it seems - you don't know the basics ?

I believe that is the aul' "do some work for me for free 'cos I will get you loads of paying customers" spiel. Usually thats the same as "do some work for me for free [FULL STOP]"

OP: drop the iframe as it is not necessary. Just put each news item into a div if you are using CSS and a table if you are not. The CSS version is alot better.

Adam

What you're looking for is Imageready, photoshops buddy. You create "slices" that are appropriate for repeated background behind anything that stretches down/across the page, all depending on your specific design.

Google a couple of tutorials on "slicing a photoshop template" or something similar, that'll set you on the way.

Also though, take on board the fact that you could get in over your head, and if you plan to do this anywhere near full time, please god learn the basics, if not for your clients than for respect from your peers. Nothing pains a designer more than seeing dodgey sites get done for money, when you could do the job twice as good in half the time.

DRakE

No i'm not trying to get into it full time.. I'm just trying to make a bit of dosh to help pay for college fee's next year.

Im not sure if you guys are missing the point of the post i am wondering how i can put text onto the page without having the tables misalign the images all down the page..

or maybe imageready IS what I need, i'mm have a gander when I get home. and also have a look at css and that lark

thanks

Adam

No, I know exactly what you mean. And my solution is exactly what you need, in the case of the above website where the background isn't just a solid color but an image. If it were just white/black/orange etc. you would use css. and the background color would fill the entire page regardless of length. With images, you need to create a slice that can repeat down the page vertically behind the text depending on the length of the paragraph(s).

PixelTrawler

Drake...

Make life easy for yourself to start with. Go here (or somewhere like it)

Get yourself a nice css based design and modify it. A good design will grow correctly as you add more content to it. Quite a lot of these are fairly well coded and browser tested and you can learn a lot from them.

I think what you have ended up with is a rigid structure that wont expand downwards (only from a glance, I didnt check your code).

If you don't want the page to grow, add the content to additional pages - the iframe idea is not so appealling from a design point and I think from a usability point.

And best of luck with it!

DRakE

hey sorry saw this a while ago but didnt reply

thanks

PixelTrawler

Let us know how you get on!

Css can get tricky - especially when you

a) try to do something complicated - css menus etc
b) try and get it to work in multiple browsers and versions - painful! Its def worth it in the long run though