Hello, I think this is my first post, er at least question.

I love Steel Dolphin and many of it's affiliates. They provide a lot of inspiration and info to me.

I am a hobbyist web designer who wants to create professional looking/functioning sites. I currently am messing with a design to showcase my photography and possible my other art work. I dont want a template site(though many are soo cool looking) or a Gallery or Coppermine. I want create a site that is 100% "me" except for a few scripts. I know some php but have not created my own scripts to date.

Anyways, my design keep changing and changing and changing....ect ect. It's the project that never gets done. What I need to know is the design "process". Recently, I tried creating an interface and the whole page in Photoshop. Then I sliced it up one big table. That didnt seem to work out too well. Currently (http://www.deltaboy.com/delta_css.html), I have more simple table with simple .css box's embedded into the TD's. This seems to function better but harder to design with. I mean, I cant just draw it out with Photoshop then slice it up...or can I???

I think what I need to see, which I have yet to, is the whole web design process from concept, to design, to coding, to finished product. There are many tutorials for small parts of it but putting it all together is a whole new ball game. Do the better designers draw it all out in Photoshop first? or do they have the design in their head and they code each piece seperately? Any places I could go to see such a thing? Perhaps, such a tutorial could be requested here or somewhere?

I use Photoshop and Dreamweaver MX.

My eyes hurt.

I start out with a site plan, basically that maps out every page and where it fits in the site. Then I (or someone else who's better than me like SD) design the interface in photoshop. The interface is designed as one file and will basically look like a screenshot of the finished site. Once an interface is chosen, I cut it up into slices and optimize it. I usually scrap the layout tables that photoshop creates and rebuild them. I'm a hand coder, but dreamweaver is the best wysiwyg. but as I say to my students however, you should now how to hand code before you start with wysiwyg. Once I have the interface into an html page, I divide it up into a header and footer to be used on the other pages (http://www.ucit.ca/serverside1.php). Hope that helps.

Okay Delta_ Boy....you are using the same programs I am using.....and this is the way I begin with all my sites.
I always start with the front page...a simple layout of tables, keeping the borders for now- so I can see what they look like- changing the sizes to suit the style I am looking for- when I am happy, its over to Photoshop..
I then design a background image for the main table, this will decide the overall colour of my site.....keeping in mind at least 2 more colours will be added to blend into the main colour.
My next step, is usually the header- and then comes the menu- then I save this page for example Scotty.htm.
The next time I open up that page.....all could change, as I have designed a reasonable header- but it doesn't match my colour of the main table......so another background Image will be made for that table.......and then that page will be saved as scotty1.htm...............this can go on for days and days- and I will end up with scotty10.htm..........I will then use scotty10.htm as a template for the rest of my other pages.
This is just a wee idea of what I do- but once again I have seen my first original scotty page ending up scotty20.htm.
I too have created a whole page in Photoshop. Then I sliced the bugger up and added the tables and iframes....but this really limited my space and all pages kinda looked the same..............it works very well with other designers- but one must find his or hers own best way of designing a site..
You don't have to follow my directions- but thats just some information how I go about in designing a eye catching web site............hopefully you will find your way and find your style ..

Joel and i have worked on quite a few websites together and our processes are very similar in fact he is the one that originally taught me about SSI (server side includes) - how many years ago was that?

If I am doing only the look and interface for the site and some one else is doing the HTML then I create every thing in photoshop including the mouse overs, Ideally having all the layers set up so that turning different things visibility on and off will give different looks for differen master pages if required. A master page is what i use for building similar pages (templates) of a similar look. Fo instance a 'Home Page' with a news feed and a few other things might have one master, and the portfolio pages looking different have a different master page....

If I am doing it all myself , the process is pretty much the same as Joel, I try to divide the page up into global (things that are seen on all pages) and areas that will be page specific. Things that are global should be set up as includes so that changing one file changes all the pages....

Sometimes I start witha rough pencil sketch ina notebook for layout ideas for a site...then take it into Photoshop, I have also used Illustrator to design a layout or two.

One important thing to keep in mind is content - know before had whats going into the site, so taht your design will allow for this and try to plan for what you might like to add or change inthe future. :)

I hope this helps.

Thanks for your input guys! It seems I do similiar procedures. I designed , sliced, and laid the tables out in photoshop then over to dreamweaver, I would split up the "base" page into the Header, Index, and Footer for the Server Side includes. The Window>Cascade>Horizontal function in Dreamweaver is great for that.

I too use make the borders visible to see the layout. I recently have experimented with other people source code to see how their site is laid out. I have learned that many tables end up being nested inside a main table. I thought that to be eye opening. I think that I will keep my .css blocks nested in a table though.

I do need to put more thought into the layout in terms of easy updates. Thanks Scotty for mentioning that your Header is seperate from your Menu. I will seperate mine on the next design. Currently, my header is also the menu with an image map.

As for the seemless Iframe...I dont know how to do that yet. I suppose that I could slice something up in photoshop for that. I will tinker and eventually figure it out. Hopefully, I will come up with a design that is as colour co-ordinated and seemless as AngryBlue, Dubtastic, or of course, the Holy Grail...SteelDolphin :)

PS: Joel, I can hand code HTML, CSS, and some PHP. I am glad I took the time to learn it.

:furious3: I have are questioning in regard to what has been said on this old thread. Now that CSS support is getting better and better and the old browsers that do not support CSS are getting used less and less, are any of you moving to CSS based web design rather than pixel based web design? I mean just getting down the aesthetics in something like Photoshop and then marking up large areas like the header and navigation in CSS and HTML. Making virtual buttons that have no pixels and I just HTML and CSS. Or perhaps are their design is that have not spoken to this thread yet that are doing that a lot. Or is there something wrong with trying to do that.

are any of you moving to CSS based web design rather than pixel based web design? I mean just getting down the aesthetics in something like Photoshop and then marking up large areas like the header and navigation in CSS and HTML. Making virtual buttons that have no pixels and I just HTML and CSS. Or perhaps are their design is that have not spoken to this thread yet that are doing that a lot. Or is there something wrong with trying to do that.

I'm not quite sure what you are talking about? Do you mean using css for colors and buttons, rather than images?

Yes logos and buttons and searching out wherever possible to replace pixels with CSS code. I even have seen a page (http://www.ejhweb.com/index.html) by a person who is a CSS consultant that when you look at the source code avoids tables altogether and does it with a lot of CSS.

Yes logos and buttons and searching out wherever possible to replace pixels with CSS code. I even have seen a page (http://www.ejhweb.com/index.html) by a person who is a CSS consultant that when you look at the source code avoids tables altogether and does it with a lot of CSS.
I'm having trouble understanding your post, plus I think you hijacked Delta Boy's thread here, but maybe this will help you somewhat:

Yes, there is a push towards replacing tables used for layout with CSS controlled Bock-Level tags, usually the Div tag. Tables were intended to display tabular data, not to hold a layout together. As far as the "virtual buttons" you refer to, I think you're referring to block areas, probably unordered list items, that have their properties set in CSS so that they look and function like buttons. Graphics are still graphics, even in standards based XHTML/CSS development. They're usually .gifs, .jpgs, or .pngs and they're placed via CSS.