Web Design With Dreamwaver And Photoshop? this is a question that i have for all the designers

[AlucarDez 0]

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 :SPlease help me

[reconraiders 0]

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

[Azriel_Stormbringer 0]

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.

[reconraiders 0]

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.

[Azriel_Stormbringer 0]

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

[reconraiders 0]

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.

[Saint_Michael 3]

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

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.

 

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

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.

 

 

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.

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.

 

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.

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.

 

 

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.

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.

[zak92 0]

Make paralell slices I had the same problem.

[masugidsk8r 0]

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.

[reconraiders 0]

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

[masugidsk8r 0]

I tried using the XHTML and CSS with photoshop but they didn't work out. It's cuz I was trying to make table layouts in CSS. So it's better to learn CSS and then move back to photoshop layouts knowing how CSS works.

[reconraiders 0]

Well, personally... for my own web sites I usually don't use slices at all. I use photoshop to create images and then crop them to size myself and save each image individually. Then I write all the html and css by hand. I always get the result I want with no clutter. But if you don't speak CSS and HTML fluently, slices are the way to go.

[masugidsk8r 0]

I use the same method as reconraiders' I use photoshop to create some graphical interfaces and hand code HTML and CSS. the reason why slices aren't that great with CSS is that it positions everything absolute in css. using "position:absolute" on every element would result in nonflexible layouts, meaning if you have content llarger than the size of the element it would just ruin the whole layout.From experiences with working with the big businesses, I have learned that they are beginning to be aware of clean XHTML and CSS mark-up so they started hiring only those who can hand-code HTML and CSS and have clean mark-up (meaning no presentational mark-up in HTML source code.)Companies will eventually start to hire HTML and CSS hand-coders over those who have bad mark-up codes.to those who are using WYSIWYG editors, I recommend you have a really good knowledge on XHTML and CSS languages. Do not rely heavily on the software's mark-up methods. From working with WYSIWYG editors such as Dreamweaver and Frontpage, I learned that it is better to hand-code the HTML by yourself than to rely on the software's coding methods because it is really messy. Even if css is turned on in Dreamweaver, the naming conventions suck!After years of defending Dreamweaver, I finally moved to source code editors mainly Aptana IDE. I use the Aptana plugin for Eclipse because he Eclipse IDE has the PHP plugin and that's what I needed. Here is a list of softwares recommended for web designers:1. Aptana IDE (or plugin for Eclipse)2. Photoshop3. Web BrowserThat's about all I use and I get professional-like results. I got clean mark-ups and understandable codes. But there is also one more thing to keep in mind: Understand that other web designers/developers will be looking at your code to work on it so make sure they can read it. Don't be selfish and leave your codes messy, i've seen it too many times.And don't rush the work.

[HavocHotel 0]

Cross the limit with each table. But I sometimes get images overflowing on one side of the site when I placed the image in the center of the site using layers. But I just found out a few months ago that if you do not use layers for an image and let a layer go over an image it started to go wonky and overflows. To fix this problem you must make every image layed. If there is a better way tell me

Edited June 22, 2007 by HavocHotel (see edit history)