How do I make a website from a PSD file?

R

RavinDJ

Supreme [H]ardness
Joined
Apr 9, 2002
Messages
4,449
So I purchased a template that came in a bunch of different PSD files.

I have Adobe Photoshop CS4 and I wanted to know how to divide these suckers up.

Recommendations? Tutorials? Hints? Tips?
 
I'm more of the coding guy, rather than web design.

I'm looking to use this project as a learning experience and actually do want to learn.
 
If all you have is a PSD, you don't have a template, you have a design.
 
ameoba said:
If all you have is a PSD, you don't have a template, you have a design.
Click to expand...

I do have both... I have the PSD and the HTML template. So all I really need is to change the original .GIF and .JPG images from the PSD so that I can insert them into the HTML template that I have.
 
RavinDJ said:
I do have both... I have the PSD and the HTML template. So all I really need is to change the original .GIF and .JPG images from the PSD so that I can insert them into the HTML template that I have.
Click to expand...

Sounds like you know what you need to do then...
 
It's a common technique in the pr0n industry. Now you've got a legit reason for your "research" :D
 
lol reminds me my first web page was done in excel. LOL Have to start somewhere. :)

What you need to do is save the psd's as jpgs and code the h tml to use them. I personally prefer tables as it's easier to have everything flow together, but some swear on not using tables. Check out www.w3schools.com. A good learning resource.
 
riot8ap said:
/slaps Red Squirrel with trout. Tables are bad for accessibility reasons.
Click to expand...

I see what you're saying. Probably phones and what not, but ever try to open a site that uses lot of div/spans/CSS with IE? IE sucks at following standards and a huge chunk of CSS properties don't even work in IE. As much as any web developer hates IE, you have to try your best to get the site to work in it due to it's sad high use rate. Too many uninformed people out there still using that antiquated browser.
 
Red Squirrel said:
I see what you're saying. Probably phones and what not, but ever try to open a site that uses lot of div/spans/CSS with IE? IE sucks at following standards and a huge chunk of CSS properties don't even work in IE. As much as any web developer hates IE, you have to try your best to get the site to work in it due to it's sad high use rate. Too many uninformed people out there still using that antiquated browser.
Click to expand...

I am unaware of any major problems with divs or span in modern IE. It has some minor quirks, but since IE7 its rendering has definitely been manageable without running back to tables.

I'd say I go with divs for layout about 95% of the time. There is occasionally something that's ridiculously complex with CSS and easy with tables and I'll fall back on them then. I follow the rule of this site: http://giveupandusetables.com/ If you can't figure out how to do it using CSS in 47 minutes, give up and use tables.
 
The thing I've had the most trouble with is dynamic content, such as a forum, or even a home page news listing. divs and what not have to be set by x/y coordinates, and don't flow based on the data in them. I've seen lot of situations where they start to overlap and look ugly. For a static site where the content does not change, then I can see not using tables. Also I don't know why people refer to tableless sites as "CSS sites". CSS is a whole other scripting (if it can even be called that) language then html, and you can use CSS elements on tables which is what I always do.
 
To the OP, my suggestion for you to learn is to go grab dreamweaver, it's a great learning tool. Additionally I recommend you stick to tables if you don't have access to dreamweaver. They're easier to understand, but honestly it's a VERY bad design practice.

Table's aren't so much crap for their lack of accessibility as mentioned before, but they're crap because with a table you end up with tons of lines of extraneous code, it looks like a royal chocolate mess when you're done. A complex website laid out by tables might be 1500 lines of code whereas one laid out with divs might be <200.

Tables are "dirty" and believe it or not much harder to read for someone who knows what they're doing. People claiming div's don't flow to the content inside them etc. really just don't know what they're doing to be honest...

*I have been doing web design & development for 10+ yrs
 
I agree with starting with dreamweaver. Try out different things then look at the code it generates to see how things are done. Also look up CSS as lot of the stuff that can be done straight in html can be done with CSS and it's better practice. ex instead of bgcolor= you can assign a CSS class and the color can be in that class.

Divs and such have their place (non dynamic data) but for dynamic data you are best to stick with tables. Be sure to comment your code as yes, tables do require more code, but if you try to make something like a listing of data such as "last 10 posters" on a forum without a table, you will pull your hair out. Divs/spans are predefined in size while table cells can move depending on the data or the width of the area they are in (ex: another cell, or the page itself).
 
Red Squirrel said:
I agree with starting with dreamweaver. Try out different things then look at the code it generates to see how things are done. Also look up CSS as lot of the stuff that can be done straight in html can be done with CSS and it's better practice. ex instead of bgcolor= you can assign a CSS class and the color can be in that class.

Divs and such have their place (non dynamic data) but for dynamic data you are best to stick with tables. Be sure to comment your code as yes, tables do require more code, but if you try to make something like a listing of data such as "last 10 posters" on a forum without a table, you will pull your hair out. Divs/spans are predefined in size while table cells can move depending on the data or the width of the area they are in (ex: another cell, or the page itself).
Click to expand...

I think you may want to take another look here : http://www.w3schools.com/css/default.asp

Specifically, check out the concepts under Positioning, Float, and Align.
 
Red Squirrel said:
The thing I've had the most trouble with is dynamic content, such as a forum, or even a home page news listing. divs and what not have to be set by x/y coordinates, and don't flow based on the data in them. I've seen lot of situations where they start to overlap and look ugly. For a static site where the content does not change, then I can see not using tables. Also I don't know why people refer to tableless sites as "CSS sites". CSS is a whole other scripting (if it can even be called that) language then html, and you can use CSS elements on tables which is what I always do.
Click to expand...

PLEASE go research on div's a little more like others have said.
 
Tables are for tabular data only, never website layout. (Exception to the rule is HTML emails, if you are into that sort of thing)

Divs, spans, and oh hell, lets throw in non semantic classes for fun, while technically ok, seem to be used as a crutch for people transitioning from table layout mentality. Your goal should be to completely remove anything that has to do with layout (CSS) and functionality (JavaScript) from the content (HTML) files. I am not just talking about personal or free flow websites but also professional and rigid form websites.

The easiest way to cure yourself of Div'itis and Class'itis is to not use them when originally writing your HTML (use HTML 5 semantic standards). Use the power of CSS 3 selectors to grab what you want. Progressively enhance to your heart's content. And for the love of everything, understand what the C in CSS really means. Use it!

I know you are thinking, "but, old IE doesn't understand the new tags." Well make it understand: Google a small piece of JS called html5shiv. It is an ultra small script that adds the new tags to IE lexicon. All rational modern browsers can handle a tag if you define it, even if it didn't originally know of the tags existence.

Next, use a global reset for the CSS. The reason for this is to undo all pre-CSS styling and give every browser the same starting point. This will prevent a lot of cross browser inconsistency later. Google: Eric Meyer CSS Reset

Now you are going to eventually run into a layout problem that cannot be reliably solved across all browsers. In this case, go ahead and throw in a <div> or <span> if you must to solve the problem. You don't need to be a purist about it, just try to keep it as clean as possible for your own sake.

_________

So why go though all of this to make a webpage? Sure there are a lot of noble reasons: accessibility, works on cell phones, standards compliance is the way, yadda yadda. But truthfully, I prefer the more selfish reasons. 1) If you understand the technologies involved it is actually faster to produce websites in this manner, it just takes more brains. 2) Three months down the road when a client wants a trivial layout change, you can change it instantly, not spend 5 hours tracking where in you 5x nested table the change needs to occur. 3) With the content and layout separate, everything you write is more portable. Nothing is ever so cool as bidding 25k on a project, winning the bid, and already having 15k of the work done!*

*obviously CSS doesnt account for 15k, I am employing the same methodology to my personal JS libraries and server side code to get these savings.
 
Last edited:
Well said, Doc, well said.

When I have to deal with people who insist a nested table-based layout is faster and easier to do, I tell them yes it is, initially; but how about several months down the line after you have committed several hundred or even thousand pages to that template and now your boss wants the size and position of the content or nav areas changed, or maybe wants the site to render differently when viewed on a handheld device?
 
DocFaustus said:
-snip-.
Click to expand...

Interesting info. I thought when people say "don't use tables" they meant to use divs/spans instead. So what do you use normally?

You can (and should) use CSS when using tables. My sites are all tables, but all use CSS. I usually have a class like "topheader" "sidebar" "footer" "copyrightnotice" etc so I could revamp my whole site without touching the html code. I use div/spans for stuff that is "in place" and won't move, such as a logo, or banner ad. Something like "forum top posters" or something is harder to do without tables.

I'll admit I'm way behind with web design, I've had the same site layout on my main site since like 2005, probably even before. Next site I build I will probably do lot of research on new stuff that has come out or is known better practice now.
 
Sgraffite said:
Do you have any sites that you would consider to be good examples of this? I've seen http://www.csszengarden.com/ but I'm not sure if that's exactly what you are talking about or not?
Click to expand...

csszengarden is div heavy. Great looking site though, but not the portability I was trying to explain. Try looking around at http://101besthtml5sites.com/ for actual sites. But mostly read up on articles on html5 like http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/.

I have got 1 professional project and 1 personal project going on right now that are almost 100% pure html5/css3 semantically correct websites. They are not ready for deployment yet, but one 90% of layout and design is done and they are mostly waiting for content to be delivered. One is a traditional center floating webpage with a drop shadow and I have managed to do it even without using a wrapper, the other site is less complete as far as style and layout goes, but the html for both is almost identical and hence interchangeable. The later (personal) one will demonstrate everything I have been talking about.

Much of my workday consists of maintaining and modifying websites that were made using table layouts, nested 5 deep often. I know that is a huge contributing factor of why I am so damn preachy on this topic.
 
Red Squirrel said:
Interesting info. I thought when people say "don't use tables" they meant to use divs/spans instead. So what do you use normally?

You can (and should) use CSS when using tables. My sites are all tables, but all use CSS. I usually have a class like "topheader" "sidebar" "footer" "copyrightnotice" etc so I could revamp my whole site without touching the html code. I use div/spans for stuff that is "in place" and won't move, such as a logo, or banner ad. Something like "forum top posters" or something is harder to do without tables.

I'll admit I'm way behind with web design, I've had the same site layout on my main site since like 2005, probably even before. Next site I build I will probably do lot of research on new stuff that has come out or is known better practice now.
Click to expand...

I keep meaning to go back and correct my old sites too, but when it comes down to it, without changing the design, there isn't a compelling reason to make the current just for the sake of being current. I however switched to webdesign as a career after tables were already on the decline. But even without tables, I used a million divs and horrible classes called things like "highlightRedandUnderline". My style sheet didn't hardly cascade, and a lot of tags would have 4 classes on them. I thought I was following modern standards at the time, but I missed the entire concept. Over time my style has been getting better. Obviously to restyle my old pages I will have to re-write the html too. My new pages will not need a html rewrite to change styling.

divs really aren't needed, I only use them if I have to. Many elements are already blocks, and even ones that are not can be styled as blocks. Example would be a horizontal navigation bar with mouseover color changes so it looks like a box. Use the accepted practices of nesting the tags like this: <nav><ul><li><a>. Typically the <li>is set to inline or inline-block and the <a>is made into a block with margins, the :hover changes it's color.

<nav> is new to HTML 5, you can treat it like a div, or as a nice way to target your jquery. style it how you wish. and best of all, since it is semantic, search engines will love you. So far, I have only styled it to match the website (eg set the width) as I put the colors and whatnot on the ul,li and a styles

Edit: I have been talking a lot of HTML 5 because it just makes sense to use the newest standards going forward. But almost everything I have said holds true in HTML4 sans a few special tags; you will just have a few more divs in 4. The real power comes from leveraging CSS's advanced selectors (CSS2+). The added bonus is that if you use jQuery as your JavaScript library, you already understand that power.
 
Last edited:
You must log in or register to reply here.
Back
Top