View Full Version : Using PSD web templates as index files

08-16-2006, 10:13 PM
Ive got a few PSD web templates but I dont know how to import them as index files so i can create a webpage in Dreamweaver by using them. Any suggestions?

08-16-2006, 11:07 PM
What you do is...
1) Cut out all of the pieces that need to be images in the final page and you save them as GIF, JPEG, or PNG.
2) Use semantic markup[1] written in HTML 4.01 Strict or XHTML 1.0 Strict to give the page its structure.
3) Start using CSS to make the page look the way you want it to.
4) Decide which images have meaning (often these have text in them) and which are just there to make the page look good.
5) For the images with meaning you make <img> elements for them or use CSS Image Replacement [2].
6) For the images that are just decorative, you should use CSS to add them as background images to elements in the page as much as possible.

[1] Semantic code: What? Why? How? (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html)
The Meaning of Semantics (Take I) (http://www.peachpit.com/articles/article.asp?p=369225&rl=1)
Semantic code (http://www.maxdesign.com.au/presentation/sit2003/05.htm)
Creating Semantic Structure (http://www.webaim.org/techniques/structure/)
Semantics, HTML, XHTML, and Structure (http://www.brainstormsandraves.com/articles/semantics/structure/)
Standards don't necessarily have anything to do with being semantically correct (http://www.kottke.org/03/08/standards-semantically-correct)
Semantic Coding (http://www.andybudd.com/archives/2004/05/semantic_coding/)

[2] I use and recommend the Gilder/Levin Method of CSS Image Replacement (http://www.mezzoblue.com/tests/revised-image-replacement/index.php#gilderlevin) which uses an empty span element, because it's the method that's still usable with the images disabled and CSS enabled scenario, which to me is more important than the empty span elements.