Hey YouTube! It’s Tech Support Gone Bad. And today I’m going to show you guys how to import your Photoshop designed layout into DREAMWEAVER and actually make it editable, so if to type whatever you want, make all the pages of your website and then get it up on the web. Only so before I actually started tutorial, a couple of things I need to talk about. Well the first thing, you guys want to watch two videos before you watch this one, How to make your website with Photoshop Part I and Part II.

Now that will get you cut out with everything that I’ve done so far and this video is going to take off where part two of how to make your own website with Photoshop ended. So yeah and another thing also if you don’t get this tutorials or you’re just too lazy to make your own website or you still don’t have the tools to make your own website, I have a great section of my website where you could get Pre-made Website Templates made by me. All you got to do is go to TechSupportGoneBad.com. Click on the link section of my website and then click on Pre-made Website Templates and then a single pop up reading you to term and conditions. And once you agree Press OK.

Next you want to just read this top part and then read the FAQ for it and the FAQ should you help you out with any of these templates and it will teach you how to actually use the templates, download them and everything that you need to know. And also the FAQ is leading part in too because if you want to make your own website template and if you’re having or you want to make your own website using my tutorials and if you’re having any trouble with the website at all, if you read the FAQ, it can also help you out with any trouble you’re having with your own website. Alright so saying that, another thing that I need to talk about, well actually let’s get started on the tutorial but before we get started I want to just mention that I always like to have a couple of things open while doing this.

First stuff, I like to have Photoshop open just in case I need to change anything in my template. I could just go ahead and change it press C buzz and then save for web and revise it again. So yeah I like that Photoshop open. I like to have DREAMWEAVER open obviously because that’s what we’re going to be doing all the working today. I like to have the website folder open. And if you guys don’t know with that is, it’s basically with folder that you put everything that has to do with your website in there, so all the images, website, all the layouts, the pages, the videos, everything like that goes in your website folder. I like to have no pad open and you’ll see why later. I’ll just like to have no pad open because you need to write down some stuff to remember it. I like to have my default web browser open just in case I need any information. I need to Google anything or anything like that.

Alright so let’s get started on the absolute tutorial. Okay so the part two of how to make your own website with Photoshop and left off with you guys pressing FILE and clicking SAVE AS then clicking your Website template and then clicking File and clicking SAVE for Web and Devices and actually saving your Website template as an HTML file.

So now we’re going to open that HTML file up in DREAMWEAVER. So click OPEN, go to your website folder and just open that HTML file. By the way I like to name that HTML main, M-A-I-N, and I’ll show you guys why at the end of this tutorial. I don’t like to name it index, but that’s but that’s because I already use it as a template and as a base. So I could just make although other pages out of the main HTML file. I’ll explain that further later on. Alright so I’m going to change the magnification to 50% and you want to just select, if you select the corner of it, it just select the whole thing, so it just select the whole layout if you could get the corner of it. And if not, all you have to do is select like one of the images and just change right here until it says . So you just got to press on one of the images if you can get to corner and just right here still around here that you should see that. Either you could just click on body or what I just said, either one of it will work.

Alright so next, you’re going to see something right here and if you don’t that’s probably because it looks like this. If it looks like this, you want to click on this arrow and bring this base up. So you’re going to see something right here that say align. Now you want to change that align to center, so it could center your website layout. So you want to press CTRL S to save it and I’m just going to preview to show you guys that it is in fact centered. So preview in Firefox or you could just press F12 and as you can see it is centered. Okay so a couple of other things you could do before we actually get to making it editable, you could change the title up here. The title right now should be MAIN or whatever you save to Save As but I’m going to change the title to TechSupportGoneBad. Now with the title is let me just show real quickly, if you open up a New Tab you could see that the title for example if you open up my website, the title right here says TechSupportGoneBad. So that’s what the title is. So whatever you put in that little area, it’s going to come up right here.

So typing the title right here then hold CTRL-S to save it or go to file and just click SAVE. Also another thing that you could do is add a Favicon. Now if you don’t know what a Favor Icon is when you open a new link or a new page, it shows you this little icon right next to the title. Now that little icon is called a Favicon. Now I’m not going to show you guys how to make a Favicon in this tutorial because I’ve already made another tutorial on how to make a Favicon. So the link to that tutorial along with the first two tutorials I mentioned in the beginning of this tutorial will be in the video description, so you guys could just click on the links and check those out.

Alright, so once you have made all those adjustments and done all that, now you want to get it to the part two making it editable. So what you want to do is select the whole template again or the whole layout and then click—make sure you have the layout tab selected right here at the top, you should see something that’s set this layout. You want to select that and then click on this little button that says insert Div Tag. Now you want to make sure that the whole template is selected or the whole design is selected. So click on that little button that says Insert Div Tag. Now you want to insert to be Wrap Around Selection and you want the ID to be site_layout. Click on new CSS Style and you want the selected to be #site_layout. And you want to define in a New Style Sheet File. Press OK and a thing will pop up telling you to save it. You want to make sure that you are on your website folder then type the Filename as site_layout and make sure you’re saving as the type Style Sheet Files and if you say (.css) then press SAVE. And now an options panel will pop up.

Now there are a couple of things that you want to do. First of all, you want to set the background color, so I’m going to set the background color as black. And you want to set the box and then you want to click on box after, after you have set the background color on the right hand side or the left hand side where it says CATEGORY. You want to choose box and put the width and the height to 100%. Now my default is going to save pixels so make sure to select it and go down and choose the percent. So you want the width and the height to be 100% then press OK.

Now also, now we set the background color to black. So now I’m going to show you real quick why we did that. So you want to press OK and then you want to actually press OK to insert the Div Tag.