Dreamweaver Tutorial: How to Convert a .PSD to .HTML (Part 1)

Today we're going to be taking the .PSD website template that we made in a previous tutorial, and type up the markup language for it. In a later tutorial we will take the file we make in this tutorial and write the .css for it, finishing up the entire website.

Click to tweet this video:
http://octotw.it/83b2e

If you don't have Dreamweaver, then download the trial from here:
http://www.adobe.com/products/dreamweaver/?promoid=BPDEC

How to Define a Website Folder:
http://www.youtube.com/watch?v=j3SSK6a5H_U

How to Make a Website in Photoshop:
http://www.youtube.com/watch?v=E1YuW2yHQ-k

Download the .PSD:
http://octotuts.com/dl/classy.zip

Download the markup version:
http://octotuts.com/dl/classy_markup.zip

Follow me:
http://twitter.com/octosites

Be a fan:
http://facebook.com/octosites

For more tutorials and extras:
‪http://octotuts.com

Category:

Education

Tags:

• adobe
• photoshop
• dreamweaver
• cs3
• cs4
• cs5
• tutorial
• tut
• tuts
• make
• website
• template
• code
• coding
• markup
• language
• sample
• psd
• create
• graphic
• design
• octotuts.com
• octotuts

[JayBB100]

PSD to Wordpress Shall i make my psd to html to create the Wordpress theme

[octotuts]

@JayBB100 You don't need to convert a psd to html to convert it to Wordpress, but it would help you understand the concept a lot better if you learn the html version first.

[VideosGlobeOfgeek]

You never showed us how to slice the psd...

[skriptorius]

@octotuts

Thanks for the great tutorial. Also advice people to translate what tags mean, for example (ul=unordered list, li= list items, div=division) and so on. Its much more clearly when you know what means what.

[anujfr]

out of curiosity, whats the point of making a psd template when you are not even going you it (expect that its a good visual reference)??

[MrChubs23]

@ThePonyKM Your Welcome.

[ThePonyKM]

@MrChubs23 Now it works. Thanks alot! :-)

[MrChubs23]

@ThePonyKM target="_blank" dos that, so remove that from and it should work

[ThePonyKM]

Hi, great guide - but I have a problem. I've made the navigation bar like in this tutorial, but when I click on it the new page for example "About" opens in a new window. Do anybody know how to solve this problem? :-)

[SaltaxGaming]

Nice video, Where is part 2?

[fahadmanutd]

It is clear sympathy with me ,but guess what I like so keep it coming ,hahhahahahhahahhahahah ,what a loser am I !!

[afroto91]

really really really special thx i'm really learned man u r wonderful thx thx thx thx

[timmb2008]

Thanks a million for this video - was exactly what I was looking for. Sorry for all the stupid comments people have left, but I'm sure it's just bored 12 year olds being infantile :-)

[TizeTV]

I want to see how you sliced it up for Dreamweaver!