Web Design With Dreamwaver And Photoshop?

YoYO!

I'm a web designer from Chile, when i start i'v found a way to design web sites by designing first all the layout on PS, and then go to Dreamwaver and make tables for all the "image" designed on PS.

Everything goes fine, but when i "cross" the limit of each table, all site gets disorder.... i don't know why :S

Please help me

I'm not sure what you mean by "cross the limit". More info, or maybe a link to the site might help.

Do you mean the table cells get strecthed? Try to remove the size limit for your table cell's and see what happens.
If you make your site in PS theres a way of just saving it as a HTML and edit if from there. I cant remember myself...but i was thinking about getting back into it soon.

You can use ImageReady and just make slices. Then you can have ImageReady output the HTML and Images for you. Takes a few seconds. Really easy.

Exactly what i meant with Photoshop, but i cant remember how

in the toolbar select the "Slice Tool" and you can just click and drag a sqaure "slice". Make as many as you want. Then you flick "File>Save Optimized" I think.

When designing a template in adobe photoshop and then code them fro dreamweaver you need to do two things, First slice the template to accommodate where you want your content and navigation to go and how template will download on the browser. Second thing you need to do, well you could go either way on this depending if you want your site to be search engine friendly; you can either use iframes for your content, or create some 1px in height images and css code them so that they expand. Which is the better way to go, although a bit more challanging since you would create these images for specific parts of the site in order for the repeat image to work properly.

Now with that being said, the problem your having is that your breaking the layout because all your images and tables are fixed and so if you go beyond those width's and heights, your going to break the templates and it will look wacky. So like I mentioned in my above paragraph you can go one of three ways with the CSS version a bit more tricker to control, depending on how detailed your template it but worth it since instead of manually adding background images CSS will do it for you.




Basically what I said above he is breaking the layout by going beyond the fixed width's and heights, thus making the template look like a jigsaw puzzle.





It's not the matter of reove the size's it's about the content he puts in that template is going beyond those images/tables limits. Yes you can save it as a html, but you need to slice the template first and then save it as a html. However, I know longer have CS2 and what CS3 has it set up as save for web devices....did a little search in your file menu it should be Save for Web.



I wouldn't recommend using Imageready as it's purpose is for animation and you have more control in photoshop when slicing and optimizing for saving it for the web.





You want to keep your images at a minimum, you want to have between 20-30, but if you can make it less and you will have quick download times. So in order to do this you slice your content and navigations first; with those sliced you will have an idea what the rest of the slices will look like because then you have to figure out which ones you can make into large images (which is done to have less images to download) and to see which ones need to be small. So if you have 50-60 images in your template then that means you have improperly cut them and thus the longer download it takes for the site to load.

Sad thing is that not many tutorials cover this aspect since most just tell you have to slice a template that you will build, but if you can remember what I suggested, you will have a better time slicing templates and even a better time slicing templates with a lot of detail in them.

Make paralell slices I had the same problem.

Nooo! Don't do this method. I used to do the same thing until I found out about CSS layouts. Avoid Table Layouts at all times. I bet your HTML code is so messy because of the photoshop layout and everything. There's also graphical mark-up everywhere. I could help you with this problem but it's better to just move to CSS layouts.

The reason for that is you separate content from styles making your HTML code cleaner and readable to other developers. You may be skeptic right now saying things like "It won't be as attractive as Photoshop layouts" or something like that but once you get to know CSS and how it's SUPPOSED to be used then you'll love it.

To those who haven't delved into the world of CSS, I suggest learning about it. I was given a really helpful and useful book called "CSS Mastery". It's concerned with all CSS and cross-browser and whatnot. If you're interested in getting this one, read a tutorial from W3Schools first so you get the basics of CSS.

If you still don't want to learn about CSS then be that way. Who's going to have the hard time modifying those pages later--not me. And for those who are interested in moving on to the future of web design (yea it sounds corny but it's true) then go ahead. You'll be developing faster and it will be easier to modify them later.

Photoshop/ImageReady does allow you to output html laid out in CSS. It is actually xhtml compliant too If they don't want to learn CSS... oh well, more business for those of us who know it! lol. But if you want to get ahead and stay up with the best, you should learn CSS and understand all aspects of web standards