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.

0 votes

Loading... 3,111 views

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

1. FlickerBand says:

   23/09/2012 at 11:46 am

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

   Reply
2. NLmitchieNL says:

   23/09/2012 at 12:40 pm

   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.

   Reply
3. NLmitchieNL says:

   23/09/2012 at 12:50 pm

   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.

   Reply
4. NLmitchieNL says:

   23/09/2012 at 12:50 pm

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

   Reply
5. Yotham Trumbo says:

   23/09/2012 at 2:07 pm

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

   Reply
6. bomberman544 says:

   23/09/2012 at 2:58 pm

   13:40 He spelled #header wrong 😉

   Reply
7. TheJWeb says:

   23/09/2012 at 3:18 pm

   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

   Reply
8. TheBlackOpsHawk says:

   23/09/2012 at 3:30 pm

   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.

   Reply
9. MrTDPFilmS says:

   23/09/2012 at 3:34 pm

   #nav {
   background-color:#f2f1e9;
   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 {
   color:#000;
   }

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

   if your still interested

   Reply
10. sanzzk says:

    23/09/2012 at 3:37 pm

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

    Reply