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

Loading...

Sign in or sign up now!
Alert icon
Upgrade to the latest Flash Player for improved playback performance. Upgrade now or more info.
17,685
Loading...
Alert icon
Sign in or sign up now!
Alert icon

Uploaded by on Apr 8, 2011

Today we're going to be taking the .PSD website template that we made in a previous tutorial, and type up the CSS stylesheet for it. This is the last tutorial in this series; scroll down for the links to the 3 previous tutorials leading up to this one.

Click to tweet this video:
http://octotw.it/19d9d

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

How to Convert a .PSD to .HTML (Part 1):
http://www.youtube.com/watch?v=Zd2wOEnTNU8

CSS reset:
http://meyerweb.com/eric/tools/css/reset/index.html

Firefox:
http://www.mozilla.com/en-US/firefox/

Web Developer toolbar:
https://addons.mozilla.org/en-us/firefox/addon/web-developer/

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

Download the css version:
http://octotuts.com/dl/classy_final.zip

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

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

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

  • likes, 3 dislikes

Link to this comment:

Share to:

Top Comments

  • how do you make the navigation links at the top align? At the 22:27 minute mark, they're still not aligned and after that all the instructions are for the main content and footer.

  • psd2cssonline(dot)com

see all

All Comments (46)

Sign In or Sign Up now to post a comment!
  • I have a custom image as a background, and the containers transperrency is only 60%, so what do I type at "background color", and the background color for the container? Please reply.

  • Hey Mate I gt a problem you know when you make the style.ccs sheet and save it then it comes up on the style.css category mine doesnt and I cant code it its says style.css is not on the local disk doh I saved it on the css folder ?

  • The web developer app for firefox isnt showing me any of the CSS when I try to edit it - is this a common problem?

  • Good Video

  • i can't just export the psd to html in PS?

  • Mine Just Messes Up At The #col1, #col2, #col3 bit! it doesn't seem to work!!!

  • @ShaolinWolf

    Don't find Bones in dick :P

  • @ShaolinWolf google How To Make A Horizontal Navigation Bar With Link Rollover State Using Xhtml/css and click ont he first link or the one for bleepingcomputer helped me out with that part of the code.

  • @CoyoteTutorials Ok but aren't the tutorials here about ppl learning from them ? not just "drag and drop".

Loading...

Alert icon
0 / 00Unsaved Playlist Return to active list
    1. Your queue is empty. Add videos to your queue using this button:
      or sign in to load a different list.
    Loading...Loading...Saving...
    • Clear all videos from this list
    • Learn more