Import your PSD layouts into Dreamweaver!

[Bennallick]

winning.

[matspan]

Good video, but when my html is opened in DW the images are not in a big table and I can't find a way to put them into one!

[kicox1]

anyone know how to put a horizontal menu in dreamweaver with drop downs onto the banner???

to be specific, i made the banner in photoshop and the rest of the page but i dont want pics as my Menu i want to use actual HTML made in dreamweaver with the SPRY tool. however, it always pushes it UNDER the BANNER.. i want it on the bottom of the banner (possibly see thru, show only text) now i did manage to move it up but the drops downs are all messed up..

if youd liek to help please reply

[oyvwilmarbjo]

Why show 3 ways ur not gonna do the css? for me as a noob at making websites its just comfusing...

[runedawn]

thats gonna be one slow website.

[galenrivera512]

This video is a favorite on Peru

[cdr26]

@tutvid How do I write on a table I created in Photoshop that has a gradient background so that I don't always have to edit in Photoshop? Do I insert div tag of the image? I've tried a method of that but still having some issue. Please Help...

Thank you

[RoBoCoX88]

Amazing vids man thanks!

[N0l3y]

Can anyone tell me if this method of slices etc is SEO friendly? I have made a site using this technique, and there is a lag (?) when you open the page where all the images are loading and you get an odd exploded/loading mosaic effect? I like being able to put images where I want (strictly coding usually does NOT put the images exactly where I want-being able to overlap images etc)

[publickonvoy]

charlie sheen? no

[outlawradio01]

When building a template in photoshop, what size should the page be for the template ?

[SuperEsala]

your an awesome teacher !!! keep up the good work :D

[whatthephil]

Whenever I make a slice a link it seperates all the slices a little.

[N0l3y]

@whatthephil You need to manually set the border to 0-it is probably blank, but you'll find putting "0" in the box fixes this

[ConstantinTuyishime]

when i click on th template when i'm in dreamweaver, i get a grey background with small icons of pictures cutten on two, on the place where my slices are. any idea where i was wrong??

please help me, thanks in advance

[henrykins]

@ConstantinTuyishime It means your slices are in the wrong place. Read your code and move the images there.

[gdelean]

does sound like charlie sheen



[jasonzyzak]

Thanks man!!!!!!

[Jok3rDicE]

I fucking love you! thanx!

[Xalamandar]

aaaannd im gonna put this to 100 .... %

lolz

[Xalamandar]

lolyoutalkfast

[cookiechicken]

You're a godsend, sir. Thank you so much.

[joevalle90]

Men, I have a question. I made a layout in photoshop and I want a part of the layout to be a frame in Dreamweaver, can I slice it and make it as a frame? So that I can output the thing I want in that sliced part.

[geopvpcom]

geopvp.com

[TheOnlooker2010]

get assistance from Professional web design and SEO call the folks at White Hope Productions, you can call them at 1.877.312.7575

[Jeruhmi]

This is so outdated that it's not even funny.

[eksessiv]

@Jeruhmi Well, make one of your own or stop hating.

[TheOnlooker2010]

get assistance from Professional web design and SEO call the folks

at White Hope Productions, you can call them at 1.877.312.7575

[Marshalmapy]

Thank you so much.. its really helpfull!

[Frisci2]

Feel like a genius! :D Removed height from the entire table and solved the problem with the gaps :"3

[BrandonsGFX]

Great Very Helpful!

[118jellybean]

Coding is allot faster and easier but still good tutorial

[mahsaraha777]

i so love u, u just saved me for my html assignment, cheers

[nloin8]

none of this works for cs5.5

[azsportza]

Good tutorial..however is it just me, or does this guy sound like Charlie Sheen?

[chronikkk]

@azsportza he is charlie sheen

[thabangratshee]

@azsportza he does

[hipoint2411]

You can also accomplish this writing the CSS code in your style-sheet, and giving it a proper z-index. If you don't know how to do this, then research CSS. You can not put text in the content area of something that occupies an image, which is what a slice is without using Absolute Positioning. Hope this helps!

[hipoint2411]

Those of you that is having problems with gaps being created in the content area between your slices need to use the draw AP Div tag in the dreamweaver tool bar, that allows you to draw an area for your content, that is Absolutely Positioned from from the top, left, etc. of the page.

[exoticgl0w]

This is the best - helped me a lot with my website. I used to know a tons of codes but stopped webdesign and graphic design and forgot alot of things......and this has helped a ton. THANKS!!!!!!

[xavierhubbard]

Is it possible to create a web template in Photoshop and incorporate CMS with it?

[psdahtml]

Hola, esta bueno el video.

Si desean aprender sobre conversion de PSD a HTML y Maquetacion Web, pueden ingresar al siguiente sitio donde se explica desde cero y paso a paso, el proceso de maquetacion:

psdahtmlpasoapaso(punto)com

Saludos y espero les sirva!

[VivaHernandez]

im having problems when adding links to my slices, they all mess up and have gaps in them! Please helpppp!!

[mujigae87]

Help!! my slices are not lining up in browsers! Did I slice it wrong?

[BurningWizardX5]

i also dont understand how a template works. if i wanna link buttons on my page, would i do it from the first html file imported or the .dwt template we created? if i edit it in the .dwt will our new html (from template) be updated automatically? does that mean our first html file we imported becomes useless/obsolete?

[BurningWizardX5]

my website isnt aligning in firefox, it works fine in IE but then it goes all stupid when i test it in firefox. can someone please tell me how to fix this?

[MrDamienGallagher]

@TechStudiosPC Hi, I kinda solved it: The border="0" lines were in place automatically by Dreamweaver, adding text was working all along. The problem was a slideshow I inserted that was messing up my slices, I've asked the support of the creators of the slideshow for help. Anyways thx for your help :)

[MrDamienGallagher]

@TechStudiosPC Thanks for quick response. I tried your method but it still doesn't work :(. Any ideas what might be wrong?

[MrDamienGallagher]

@TechStudiosPC Hi, I saw your comment on MaroKage's problem with the slices creating gaps. I'm having the same problem. Should I put border="0" on every img tag and does it matter where in the tag I insert it? Cause I tried putting border="0" in every img tag after alt=" ", but it didnt work :( BTW how many slices is normal for a page created in photoshop (I think I have way many)? Thanks...

[Piarajeno]

@MrDamienGallagher As you said, your problem can be quite common. All you have to do is to remove all default paddings and margins. The way you do this is to create a new css rule set as ' * ' (an asterix) and edit the rule so that all paddings and margins are set to 0. This way, there will be no annoying default gaps between the slices that you mention. I hope this solves your problem. Best wishes.

[MrDamienGallagher]

@Piarajeno Thanks, i'll try that! :)

[shandriya1]

Ünglaublich_lèüte_sÜcht_mÃl_Ních:_olikohle_âûf_gòòglè_voll_g­éil

[felipeslava]

awesome tutorial! very clear and detailed! thanks a lot!

[Jhunray22]

that was a nice tutorial thankz man ur the best..

can i use Macromedia Dreamweaver 8 for this..?

[patriciacullen]

thank you very much! you did help me and my friend for our finals!

[MarionetteMensch]

I would have found this tutorial faster if you would have mentionened "slices" in the heading

[MarionetteMensch]

@MarionetteMensch and by the way ... where is explained how to make the page functional with all the buttons linking to the new content etc. ???

I wanted to get started doing my own website with my design but this tutorial is not completed :-( :-( !!!

[margrado99]

I created my home page and I want to use the same layout for my other pages. Do i need to slice the whole page again and save it or can I just copy and paste it and how ? HELP

[mathias921]

Why do you people always think of yourself!?

Screw the adds and commercials, before Goggle screws your ass!

[SouljazInc]

Hey guys a tip, you could just hit f12, and it asks you to save and when you click yes or no, you can preview your website.

[DarkShadowgale56]

how do you add the links to the buttons to the template? or do you create the pages first and then link the template to them?

[vongolamist]

I just want to ask, I just downloaded dreamweaver and when I open it there is no tool like yours, i'm talking about the tool under file,edit,view etc.The one that you click to turn Common into Layout? How can I show it? thanks.

[JarielTv]

Nice You helped me a lot thanks.

[TrustmeUK]

Brilliant!! Thanks!!

[archsimmusic]

This saved me thanks :D

[ForevaMackin487]

thanks for the helpful videos man! very informative and easy to follow.

[jkd1984]

Why didn't it look centred in Firefox?

[vynum]

@jkd1984 .. the reason it didn't center properly in firefox is because he ONLY CHOSE to select the outer table border then applied a center attribute to it, WRONG WAY TO DO IT. It will not work properly this way. He should have used the "menu bar" and done it this way: (1.) ; EDIT> SELECT ALL or CTRL + A. ( 2.) FORMAT> ALIGN> CENTER. The save document. Note: This way, you are actually selecting everything, every element in the window.

[eLiT3SnIpEz]

@vynum

Not true. I tried your method and there was no option "Format" option to select Align>Center.

I did however try his method and it centered perfectly. By selecting the outer part is selects the entire table in which the site is contained (i.e. EVERY element)

[vynum]

@eLiT3SnIpEz

Yes it is True. In CS4.

help.adobe.com/en_US/Dreamweav­er/10.0_Using/WS09C98DBB-6332-­4f86-8AB8-A50265CEC6A3.html

Center page elements 1. Select the element (image, plug‑in, table, or other page element) you want to center. 2. Select Format > Align > Center. Note: You can align and center complete blocks of text; you cannot align or center part of a heading or part of a paragraph.

[AnnoyingOnion]

file>

save ass

:P

[arketreyu]

wow thats really what i need thanks alot

[ew7810]

webhousestudio

[SouljazInc]

hey guys i'm doing this with adobe dreamweaver cs4, though when i click align center isn't an option please respond asap!

[bloodass3]

Great tutorial :) Thank you. But I have a qustion. How this way I can do my buttons to look better, you know like when I click on it, the image will change and it will look like I am pushing something and so.

[mago1234567890]

hey men you can do a littel of how to biuld web page with css

[flashxpert]

thanks alot...very helpful video.. learnt something new... ;-)

[96bikerider96]

Can I change the button image with onmouse over or click using a PS drawn site?

[ruusky415]

@96bikerider96 theres a hover div code

[nelsongphoto]

Man! I'm gonna lock your tutorial in my safe!! This is a jewel!!

Thank you very much!!! Very Helpful as all your tutorials I've been through.

[wyckaproductions]

I m gonna hack 42 ppll....

[usman2hype92]

okay for some reason when I created a new file from template, the pictures which I created as backgrounds in the DIV TAG just disappeared and became blank (white) in the untitled page. What am i doing wrong?

[BlanquitoMX]

i`m new at this, your video is very usefull, but i wonder, how i can link my about or contact button to another page? or the new pages that i can do from the template shown in this video

[ChillProductions1]

how do you calculate the amount of pixels an object is???please help i need it

[96bikerider96]

@ChillProductions1 Width * height

[Exupery1976]

Could you send us a link to the Slicing and Optimizing Photoshop tutorial...I couldn't find it on your site. Thanks!

[rubayat1]

I donot know how to thank you...you have no idea how much this help me....Thank you...

[PCHavoc]

Is this way good for professional websites though? Like companies?

[nokhazali]

visit website for dreamweaver cs5 step by step free tutorials >> dreamweavercstutorials.co.cc

[orion9k]

I still need to know how you make the menu open links into our content area :/ Cant figure this out, everything else is in its place

[BlanquitoMX]

@orion9k this i wonder to

[Cheriece21]

Thanks so much for this video, what a fantastic help. Please keep up the tutorials

[Scottydoo69]

amazing help.

[charleyhq]

im so confused...... so i did that but when my layouts in there and i try to put my cursor at the end of the layout to center it all it does is select the layor ... it doesnt show that bug cursor next to the layour just a cusor the size of the slice....

[samueljh3]

You're a better teacher than most lynda.com instructors. Question: when creating a five page website in Photoshop, for example, is it better to make all the webpages in Ps, or create one page in Ps and create the rest in Dw? I made a five page website in Ps. Each time I save one of the pages for "web and devices", I get a "replace files" box. I click replace. The other html pages take on the images of the last page saved. Help would be appreciated : )

[CHRISNICX]

god has answered my prayers!! thanks for the vid!

[MaroKage]

ok so I followed everything correctly like 5 or 6 times I even redid my slices 2 times

yet when I put a text in the content area I get gaps between my slices I googled this problem I noticed alot have these problems but non with solution someone pls help? my guesse is it have something to do with Div Tag

[Sheep0989]

@MaroKage a lot of the times when that happens to me, i click on sertain edges around the site and it fixes itself...and manually moving the bars in place, its very frustrating :(

[mikie005500]

@MaroKage

I've had the same problem has anyone resolved this?

[mikie005500]

@MaroKage

I have the same problem has anyone resolved this

[Dyamondgyrl77]

@MaroKage I had the same problem. the problem is with your slices from Photoshop. I corrected mine by going back to Photoshop and zooming in on the the slices. I found that I had auto slices. Try this and see if this helps.

[raulagentraul]

@MaroKage The reason you get the space is because of the hyperlink border add this ( border="0" ) in the code after you add all the links to the buttons

Hope this was useful , it works for me (it worked without this but only in Firefox 4 , other browsers presented the "gaps of hell" as i call them 

[musicizgood]

@MaroKage set border to zero

[maxone007]

@MaroKage i have the same probl on dreamweaver but when I go to preview, all gaps disappear.

[K0NIGWOLF]

@MaroKage It is the div tag. When you use div tags, essentially they force everything in the div tag to line up side by side. when you have div's on top of div's, there's literally no way possible to get them to appear side by side. I would personally suggest using span if you're trying to add css into a portion of your code. This eliminates the div issue.

[Ethical08]

@MaroKage i have the same problem

[akshayjuneja13]

@MaroKage Me too broda wat can i do

[warcolector]

@MaroKage I solved the gap problems with experimenting with the height untill it covered it all. It seems like you'll get a gap if you are using his 350 pixels while your template got higher pixel value and will therefore be too short with the 350 pixels and the gaps gets created.

[volcanoislasmeloso]

@MaroKage just when u place link u will see down in properties field ''border'' just type ''0''

[mangoprojects]

With 'Slice and Export a Website Layout + HTML: Photoshop Tutorial!' and 'Import your PSD layouts into Dreamweaver!', these two videos make the best tutorial combo I ever learn. These tutorials are very resourceful & informative.

Thank you. TutVid.

[KKZReset11]

LOL @ USING TABLES. The tutorial failed at the begining.

[mrslink2]

@KKZReset11 ...and you are part of the problem. I have used tables and CSS....both work fine. Your lame comment helps no one. Be part of the solution, not part of the problem and explain what the difference is!

[mrjjdim]

this video is like the scriptures of web building. nicely done.

[BoredAznChic]

THANK YOU SO MUCH! <3

[hybrdsnipr]

VERY good tutorial!!! learned enough to get me going!

[nietolico]

nathaniel u have great knowledge!!!! i have leanerd a lot!!! thnx for your time and teachings! God bless you

[syntaxengot000]

why are you creating seperate stylesheet in every division? is that a proper way? sorry i'm completely noob.

[GreekNastyBoy]

how I make the nav buttons rollover ?

[chicagoizbeast3]

masballer just go to code and set the margin to 0

[masballer]

Question;

I sliced everything in photoshop and loaded it into dreamweaver. I have some buttons that ive made. In dreamweaver, after i add a link to the buttons it shifts all my slices and add gaps between them. Is there a way to lock all my slices so they will not move.

[stepxunit]

awesome... seriously ive been making websites since im 12.. 23 now.. never used dreamweaver..

And now the day i have to use it i came up to this tutorial :D thnx ! and also.. nice explaining !

[line1260skr]

Hey, when I start adding content (like more than 5 lines of text) to my editable content region gaps appear between the top banner and the footer. I saw some others might have had problems like this. Can someone please help me out?

[KryptoN1g1337]

Thanks for this and all of your other awesome tutorials! Helped me a lot!

[WaziristanGamerz]

nice & useful

Thanks

[anypennybride]

wow best vid i have ever seen, you are such a good teacher!! keep at it!

[RazZaHProductions]

I have a Problem :( When im doing the layout with photoshop then you say that i have to save it with this html options. Well...ive dont it exactly like you did but when i am importing the files to dreamweaver it shows me only one picture and i cant move all my buttons or banner :( Do i have to edit the template in a special way with photoshop ? because i just used some layers...

[MrJulesjuvida]

@RazZaHProductions Layers have nothing to do with it. You have to slice each area of your design and every panel using the slice command of PS while inside photoshop. In this way it will not just be a one picture moving but multiple of it based from your slices. Then export it using save from web.

[westwoodl]

Thank you so much, putting photoshop sites into dreamweaver has been confusing the hell out of me lol been driving me mad. Thanks :D:D

[johnyelland1234]

oh wow, i used to individually add each image lol. Thanks :)

[216CELLS]

NEVER a waste of time watching your tutorials.

-CELL$ DAH BEAT$MIFF

[VISIONSbyLauren]

This is a great tutorial, thanks very much; however, in CS4, there is no selection that states 'advanced'. There is only Class, ID and compound settings. However, when I changed it to a compound setting, it changed the code to a table tag. I figured this was not what I wanted, so I left it at a ID tag. Is this correct?

[wwcfcebu]

Hi! can you show us a tutorial on how to make a joomla 1.5 template using dreamweaver?please!!!!!!:D

[MALOJBADBOY]

thanx thanx thanx!!!!!!

[mrslink2]

In fact, if you copy all of your image code and paste it into at new html page (between the body tags), I got my old slices to work. I would still like to see a video on how to add other pages to this template :-)

[mrslink2]

I have learned SO much from this guy. I am a complete newbie at this, but I wanted share what I did to fix my images blowing apart. I had to reslice all of my images in photoshop. Also, as soon as you see your images misplaced, click in the background and they may go back to normal. Also, I know the "pros" say NOT to use tables, but nobody really gives a good reason. I tried it and it works.

[xBantii]

web designing takes a lot of time and work. Even when i make an entirrly new web page for a client i always refer back to this video for the basics !

[pwrflame13]

I have a problem, when I insert the div tag for the content section for some reason it ends up in the middle of the intended position of the div.

I can't get the "content goes here" to the top of the div.. what am I doing wrong?

[appelpersson34]

it sucks on chrome :(

[jj2jackson2002]

my site images still stay blown apart after i make the div tag.... what am i doing wrong 

[jacquietrowell]

@DreamerWolf0 try shift+enter

[gratitudepoem]

Absolutely brilliant! Thank you so much, this was a huge help for me. Blessings

[roshgorg]

can you add a wordpress theme creation using photoshop and dreamweaver video?

[roshgorg]

Hello tutvis, how to add links in the theme...for example, home, gallery,help,etc

[tamagocheat]

You're voice sound like jonhhy knowxville on jackass,,

[sunderakardus]

i was having problems with centering, and you made my day! thanks a lot, really man. thanks

Ps: you explain really good, and have a good voice for doing it too. Congrats!! XD

[inquestFLASH]

does this mean that you can design your web page in ps and import it into dw for further funcitons?

[fluffysaphire]

Dude!!!!! You have no idea how much this helped me!:D Thanx a gizzillion!!!!!!:D

[beckham7england4ever]

Hi! I have a question about the content area. Is the size of it ranged and I just have to type within the width and height of the image? I mean If I had a lot of Text to write in that box!! what should I do? when I type a lot until I reach the footer, the design get messed up! I tried not to enter the height of the content box in the css sheet but it doesn't work.

[oceanhawk9]

im using CS4. i dont have the "advance" option. I have ID, TAG, COMPOUND, and CLASS. also anyone else having problems? when i delete that portion of my template as he's telling us to do my banner and icons get moved around. hm....

[happygamestvfun1]

how do i place fuken text of a bloody god damn fucken image for ducks sakes!

[elboss1012]

@happygamestvfun1 if you mean how to place text on a image, what i usually do is get the size of the image first, remove the image from the site, create a table with the same size as the image, use the image you removed for background image. simple

[happygamestvfun1]

@elboss1012 your not the owner of this video are you?

[KrAzYizDead]

Hello! Awesome videos! is it possible to make a sliced photoshop file that you convert to dreamweaver a "liquid design" ?