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

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

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: octotw.it If you don’t have Dreamweaver, then download the trial from here: www.adobe.com How to Define a Website Folder: www.youtube.com How to Make a Website in Photoshop: www.youtube.com How to Convert a .PSD to .HTML (Part 1): www.youtube.com CSS reset: meyerweb.com Firefox: www.mozilla.com Web Developer toolbar: addons.mozilla.org Download the .PSD: octotuts.com Download the css version: octotuts.com Follow me: twitter.com Be a fan: facebook.com For more tutorials and extras: ‪octotuts.com

Don’t forget to check out our other video tutorials or share this video with a friend.

1 Star2 Stars3 Stars4 Stars5 Stars 0 votes
Loading... 2,887 views

10 responses to “Dreamweaver Tutorial: How to Convert a .PSD to .HTML (Part 2)”

  1. FlickerBand says:

    when i open it up it doesn’t have the source code and style.css tabs. some please help!!

  2. NLmitchieNL says:

    How do i make other pages? do i just make a complete new one and start over or can i copy most of the Index and change it? and do i include the text/css again? or do i make a new one for the “About” page? sorry for multiposting.

  3. NLmitchieNL says:

    AND also ,the nav bar isn’t aligned.. Christ, this is not going well.. i’m just trying to make a small site for a minecraft server but i think it’s not working out very well.

  4. NLmitchieNL says:

    only problem is, my collums are underneath eachother, and not horizontal.. What i’d do wrong?
    I’m a complete noob to .css

  5. Yotham Trumbo says:

    This video was most definitely not boring. A great resource for beginners!

  6. bomberman544 says:

    13:40 He spelled #header wrong 😉

  7. TheJWeb says:

    hey if your wondering how to have the nav text in a line you need to add this CSS
    #nav li {
    display: inline;

    he did this for the footer but not for the header, obviously he added it at some point and didn’t display it in the video, other then that good video

  8. TheBlackOpsHawk says:

    Yeah… You left out how to move the navigation bar down as well has aligning the text used with the links in the navigation bar and how to align the social networking icons. You went from not having them aligned to suddenly having them aligned without telling us, making us go through your source to find the solutions. Someone else commented their “solution” which was also incorrect.

  9. MrTDPFilmS says:

    #nav {
    height: 30px;
    width: 960px;
    margin-left: 10px;
    padding-top: 10px;
    padding-bottom: 5px;

    #nav span {
    color: #4d4d4d;

    #nav la {
    position: relative;
    display: inline;
    margin-right: 10px;
    margin-left: 10px;

    #nav li a {

    #nav li a.hover {
    text-decoration: underline;

    if your still interested

  10. sanzzk says:

    how do you know the position of the elements to style in css.

Leave a Reply

Your email address will not be published. Required fields are marked *