I was wondering what most of you do when you're starting a new site. Do you design in Photoshop, slice in Imageready, then code it? Or do you do things another way? Do most of you code by hand, by WYSIWYG (Dreamweaver), or by both? Most things I've read tell me to: 1. Design in Photoshop, set mouseovers and what not 2. Prepare in ImageReady, slice the image into..slices, then save it as an optimized HTML file 3. Open the file in Dreamweaver, and code it. I'm just trying to figure out what to do, I'm not that new to the programs, but I've never actually built a professional site and published it. For example: What would be the easiest way to prepare this and code this? (Its not mine, I just found it on a google image search): http://www.aplosweb.com/images/clients/big/trendboys1.jpg Also: When I code in Dreamweaver I usually preview in my default Browser, Firefox. It looks great. When I preview it in Internet Explorer...it looks terrible and everything is out of whack. How can I fix this? Thanks
Personally when I'm starting to make a site I just whip out notepad and start coding, making images as I go down the page.
Play with HTML and CSS to learn good web designing as a fresher.. for work on images, buttons backgrounds go for photoshop..
Some people like to code it right away (ie: make things in CSS) but I personally pretty much do what you said. I typically draw up a design on paper and know what elements I want and where to place them. Then I take a while making mock up designs in Photoshop. Before I slice up all the images and stuff, I only get the images I need for say "the top part". I then code it and work with the images, and from there I go down and switch back and forth between Photoshop to get images/backgrounds and my html editor. I do it like this because often times problems come up like "oh this would look better here" and then I go into photoshop and make changes... if I had already sliced up every single thing then I might need to go back and redo those things so I like to just get the images as I need them that way I don't feel committed to having to use a certain thing just because I've already saved it. Oh also, I like to have my CSS embedded while I'm designing this way it's just one file I have to mess with... later when I've progressed far enough I extract the css file and start cleaning up the code (like putting things into includes and what not) Well since I've mentioned all that, I figure I'd show one thing I've been working on: http://www.animehotornot.com/ It's still not released yet as I have a lot of polishing up to do but it's getting there. The menu's are a bit more css-advanced than I usually do so that part took me a few trys to get right, which is why I don't slice up every single image before hand (because then I would have to redo all that numerous times). I'm just taking a break now messing around these forums instead of working on that site actually
I generally start from a css template, (two or three columns fixed or liquid) according to what the site is all about. Then I define the color palettes and aspect and the CSS is done. After I start coding menus and navigation breadcrumbs, header and footer with all the usual stuff you need (javascripts, counters etc.) Last I use divs to add all the content. In this way it's much faster and easier when you have to modify something and i can code with an advanced text editor like ConText or notepad++
I code and design along the way. The only thing in my head at the start is a very basic image of how it's going to look like in the end.
That's the same way I do it. Sometimes I draw a picture of it on a piece of paper to get it somewhere where I can refrence back to it though.
I ganerally start from designing how my webpage looks like in Photoshop and then layout the webpage using CSS. Finally i code HTML and PHP stuff.