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: 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 Download the .PSD: octotuts.com Download the markup version: octotuts.com Follow me: twitter.com Be a fan: facebook.com For more tutorials and extras: ‪octotuts.com

25 Comments+ Add Comment

  • Why didnt you make it in design? That would be much easier

  • This is a stupid tutorial. You don’t explain how to slice the psd. You fucking retard, never make a tutorial again. Cunt

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

  • 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 🙂

  • really really really special thx i’m really learned man u r wonderful thx thx thx thx

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

  • 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? 🙂

  • Now it works. Thanks alot! 🙂

  • 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)??

  • Americanii creeaza website-uri, olandezii construiesc masini zburatoare, italienii fac autostrade moderne…Politia din Satu Mare, Romania…manipuleaza calculatoarele, intercepteaza telefoasnele, manipuleaza oamenii…SISTEM DICTATORIAL FASCIST…tiganii UniuniiEuropene

  • The problem you are having is due to the target part of the tag. the _blank is telling the link to open up in a new window. If you get rid of that part ( the target=”_blank” ) then it should open up within the same window as the original site.

  • Nice videos Octotuts:
    Ive got a questions that i really need answered. How can I make my screen capture videos in HD in camtasia studio and edit in sony vegas. I want it really clear. I run windows 7 with a 1650×1080 resolution. Please respond and check out my videos!

  • Nice tut but you cod is xhtml & html i think its better all xhtml and you code is nice but the outline of the code is not so good.

  • You used 3 “actual” in 5 seconds.

  • You said it should be boring, but i dnt think so, its really enjoyable for me..thanks for upload and keep going

  • can i add a java slide show instead of the banner? if yes pls tell me how…

  • u can just rename the banner as the java slide like you said just make shure that it has to be a .png or a .jpeg or .gif

  • It’s so easy

  • How to do it? I don’t know 🙂

  • What is the font on your computer wallpaper?

  • Looks like century gothic.

  • Thanks!

  • very good, the best tutorial I’ve seen thus far

  • Great tutorial, have you made a video covering how to slice images?

  • half the video is 22 minutes? Fuck it.