photoshop cs3 output to css question?

Question

Has anyone designed a web page layout using slice and generating CSS referenced by ID? I think this is a table-less layout which will be used in dreamweaver.

thats what I did so far and now I don't know what to do with it in dreamweaver. Do I need to code now? Or is this some generic way of doing it, opposed to just using tables.

I am new to this and trying to learn, so if you can tell me in a non jargon way, that would be great. Thanks

Answer 1

I'm not sure what you mean by "photoshop cs3 output to css", maybe some new feature in cs3 perhaps?



Anyway its a really bad idea to rely on such tools, especially if its made in photoshop. Generally WYSIWYG tools dosn't have a place in professional webdesign, they are only good when someone need to publish a document in a hurry.



Most webdesigners who care enough about their code are using text editors such as notepad, and at most coding tools with features such as syntax highlighting and/or autocompletion.



Photoshop is however a very nice tool to create graphics such as, buttons; borders; backgrounds; and logos. Its Grouping feature is very useful when having lots of supporting graphics or different layouts.



It may also be worth to mention, that choice of tool usually depends intirely of the project size. If you got a few hundreds lines of code, it may be more convenient to chose a editor which allows to hide chunks of code such as, functions, if statements, or even individual selectors in a stylesheet. I mostly prefer just to use the lightweight tools such as notepad, however syntax highlighting dose speed up my work in bigger projects.





Its not hard to work with CSS at all, it used to be because of browser specific problems, but IE7 pretty much was the end of that. So unless you want to support lots of broken/outdated browsers, it won't be hard. Just keep in mind that most css properties are easy-to-understand plain english, even the values are pretty much self-explanatory.



The below will thech you most of what you need to know, to work with css, i do also suggest you learn about CSS Selectors, since that will make it easier to style your documents in a clean way.

http://www.brugbart.com/Tutorials/17/ - HTML 4.01

http://www.brugbart.com/References/6/ - An Introduction to CSS

http://www.brugbart.com/References/117/ - CSS Selectors



Finally you should not neglect to validate your code, having valid code will solve a huge range of problems.

http://validator.w3.org/ - W3C HTML Validation Service

http://jigsaw.w3.org/css-validator/ - The W3C CSS Validation Service

Answer 2

The current version of photoshop is CS4 by the way, however CS3 does take up a little bit more space then CS2, but for most computers it really won't matter that much, some of the new features in cs3 were: Increased Productivity and Streamlined Workflows Streamlined interface Zoomify export Adobe Bridge with Stacks and Filters Photoshop Lightroom integration Improved print experience Adobe Device Central Workflow enhancements Unrivaled Editing Nondestructive Smart Filters Black and White conversion Improved Curves Photomerge with advanced alignment and blending Adjustable cloning and healing with overlay preview Enhanced 32-bit HDR support Next-generation Camera Raw Breakthrough Compositing Quick Selection tool Refine Edge feature Automatic layer alignment Automatic layer blending

Answer 3

Trying to design your website using CSS is better than using tables. First of all it is easier to do and to maintain in the future, and second it is easier to ensure that all modern browsers can view your web page in a similar way.



Once you have your layout designed in Photoshop you start to create the web pages using valid HTML and CSS.



A great place to start learning HTML, xHTML, and CSS (among other languages too) is:



http://www.w3schools.com



There are plenty of other sites too, such as:



http://www.good-tutorials.com/



Good luck!

Answer 4

photoshop tutorial-http://photoshopguru.info/

Answer 5

oracle tutorials-http://nstarsolution.com/