How to export a website from photoshop to dreamweaver

[Music] hey guys and welcome to menu Photoshop slash Dreamweaver tutorial and today I'll be showing you how to how to export your Photoshop file document like this your websites that you created or download the download the template and just export it to Dreamweaver so first of all it's great our our root folder for Dreamweaver I'm just going to do this on the desktop and we'll say tour site and that's going to be a root then let's get back to photoshop open your document and then we're gonna use the slice tool which is under the crop tool usually and just slice the buttons now dragging guides can also help you with it like this okay now use your slice tool and slice buttons like so it's not hard at all so that's it and now what we're gonna want to do is go to file save for web and devices and it should open this panel okay and we can see the slices right here now we're gonna choose JPEG quality 70 or less so it doesn't take too much space on your website and so you don't need so if you took more space it would take a lot of time to load then go to save now here's the part we'll go to a root folder tutorial site and now choose format and select HTML and images file name index dot HTML save we can minimize this and what we got is an index dot HTML we can preview it it's all okay images we have all the slices so now go to tutorial site right click on the index open with Adobe Dreamweaver goes down site new site tutorial site local site folder desktop tutorial site select advanced settings default images folder images select save and this is what we have and now we have all the pictures sliced so we can link them now it's totally up to you what you gotta do in Dreamweaver to edit this but usually you link the buttons by going here to the Lincoln just simply dragging to your document and don't forget to put border:0 unless you want the ugly blue border to be around the button and just doing simply stuff you can also align everything to be centered and you can also add the background by going to page properties and setting the background color to gray and also you can align it select everything the line Center now we can preview to the web browser and this is how it looks if we click on our homepage it should refresh and also you can add your title I don't know tutorial site on page ctrl s to save and preview it back oh here it is now thanks for watching this tutorial I hope it was helpful I hope you enjoyed comment like and subscribe I see you until next time also I forgot to say that I personally don't like this way of building websites and I recommend that you get a Dreamweaver template with more functions than just simple buttons didn't they don't do anything so thanks for watching and I see you next

Channel: 00PoisonAngel00

Views: 132,930

Keywords: template, css, photoshop, dreamweaver, import, export, html, images, slice, tool, website, design, web, guides, pictures, tutorial, ps, dw, tut, how to, cs4, cs5, psd

Id: rEgZDw5G-oI

Length: 8min 24sec (504 seconds)

Published: Wed Sep 08 2010