I used a sitebuilder my hosting company provided to do my html pages and also used their templates for my website design.

Overtime I realised that the designs are limited and wanted to get dreamweaver to do a better design work. I go to know dreamweaver is just a html editor and not for designing and was told about softwares like PHOTOSHOP. To get an idea of how it works, I downloaded the free software GIMP. But so far after a few days, all I can really do is upload a photo and edit it. So is that all a PHOTOSHOP does too?

What exactly is the program that is used to do good website designs? I mean doing up nice buttons, nice tables, designer headers, logos and so on.

Also if dreamweaver just does html editing which I can do with sitebuilders that hosting companies gives for free, why would anyone want to shift to dreamweaver? Is there any significant difference?

Do advice. Thanks in advance.

Photoshop and GIMP are for graphic design.

I've not personally used GIMP, however, I've used Photoshop since 5.0 and now I'm using CS3 and it's far more powerful and certainly does more than just allow you to edit photo's.

Photoshop does take some getting used to and designing with the software will take some practice. It's best to search on Google for Photoshop (or GIMP) tutorials and work from there.

Learning a new software isn't typically a one-day experience, so take some time and look over a few tutorials. Once you run through a few tutorials, you should start to feel more comfortable working with the software and designing should become easier.

I personally like using Fireworks.

In web design there are 2 main steps/components to getting a site going. There are also free alternatives to the main applications which are perfectly acceptable to use for a simple web site.

The first component is photoshop (or similiar photo manipulation application), or a similiar design application that you can use to layout your pages. That's actually designing the look and feel of your website. For free alternatives to Photoshop there is Paint.net; which in my opinion is easier to use and similiar in features to photoshop. There is GIMP, which I have not used but it is free.


The second main part is the actually cutting up/slicing the created layout into html. That usually involved cutting and pasting the various elements of your site into the html editor to arrive at your finished web page. There are a couple of free html editors - Coffee Cup (http://www.coffeecup.com)is one of them. They even have free ftp solutions that you use to upload your site.

Those are really the main components of getting a site going. Of course there are a myriad of other factors, especially when dynamic content comes into play.

I use Photoshop for graphics...

I code by hand.

Use a program like Photoshop for graphic design. But learn to code by hand! Using these graphical interfaces like Dreamweaver will never give you a good clean site!

So am I right to say I CAN use Photoshop/GIMP to design buttons, nice designed tables, logos and so on? At least knowing that will give me the confidence to purchase one.

They kinda cost a bomb and I don't want to later realise it is for image editing more for professional photographers and such. :)

Also since I do have a sitebuilder on which I can do HTML editing, do I even need a dreamweaver? Is there any differences? Tnks.

Photoshop is specifically for design. While it does allow you to do photo manipulation, Photoshop is one of the primary tools web designers use for website design.

There are plenty of tutorials on Google for Photoshop, as mentioned above. You'll be able to design buttons, logos and the like, however, it depends on what you mean specifically by tables.

Tables are basically referring to an HTML element, in which case you'd need to use an HTML editor, such a Dreamweaver or my personal favorite, if you code by hand, EditPlus.

Photoshop is specifically for design. While it does allow you to do photo manipulation, Photoshop is one of the primary tools web designers use for website design.

There are plenty of tutorials on Google for Photoshop, as mentioned above. You'll be able to design buttons, logos and the like, however, it depends on what you mean specifically by tables.

Tables are basically referring to an HTML element, in which case you'd need to use an HTML editor, such a Dreamweaver or my personal favorite, if you code by hand, EditPlus.

When I say tables, I am talking abt designing a table like really draw out one. Don't leave the table square, curve the sides and such.

Not talking abt tags like <td> <table> and such.

I shell out way to much on these programs. Though these are my current line up of design/coding applications on one of my desktop pc's.

Designing: Adobe Design Premium package

Coding: Notepad ++ and crimson editor urm Microsoft Visual Studio 2008 also for coding C++, C# and ASP.net

Offline testing: I have apache and co set up on an old pc linked to my home network :)

Offline testing: I have apache and co set up on an old pc linked to my home network :)

I have got no idea what that means. :)

Am I right to say Adobe Design Premium package is different from photoshop?

Design Premium is a collection of several Adobe products, including an extended version of Photoshop. It also includes InDesign, Illustrator, Acrobat, Flash, DreamWeaver, and Fireworks.

When I say tables, I am talking abt designing a table like really draw out one. Don't leave the table square, curve the sides and such.

Not talking abt tags like <td> <table> and such.

Photoshop will allow you to do the initial design work, slice the images and save them as a PNG, GIF, JPG, PSD or one of multiple other formats.

It is, however, up to you to do the actual coding once the images are sliced up. From there, you'd need an HTML editor. DreamWeaver will suffice, but it does not produce (X)HTML or CSS valid documents, if that matters to you (to some it doesn't).

Photoshop is basically a tool/program for design. It is a more advanced tool with quite a few options and will serve as a great addition to your web design arsenal, however, you will need to take the time to get to know the software, practice and use the tutorials available on the web.

As with any program, it's not going to be a 1 hour cram session and you'll be a master with it. Designing takes time and effort and it begins with learning the program.

I will advise you to think hard and try to use GIMP before purchasing Photoshop as Photoshop isn't exactly cheap and I don't foresee Adobe giving a refund simply because you can't get the hang of the software.

Photoshop is a professional grade tool, so treat it as such and you should be fine.

In addition to RVSite Builder and other site builder programs

I suggest http://www.webpage-maker.com/
Really good software

Honestly, it's better to learn HTML & CSS than to use a site builder. I don't know of a single site builder that actually produces 100% standards compliant coding. Free solutions generally exist as a solution, not a standards-setting solution.

Sure, it takes time to memorize the lines, coding and general attributes, but if you're going to do web design, you need to learn it correctly and do it correctly and not sub-par.

I will advise you to think hard and try to use GIMP before purchasing Photoshop as Photoshop isn't exactly cheap and I don't foresee Adobe giving a refund simply because you can't get the hang of the software.

Photoshop is a professional grade tool, so treat it as such and you should be fine.

Tnks. I have tried using GIMP and frankly find it so hard to use. In fact I think I don't know how to use it at all. Thus was thinking of purchasing Photoshop hoping the interface will be easier but what you say makes sense about spending money on it. Have to put in more effort on GIMP i guess.

Honestly, it's better to learn HTML & CSS than to use a site builder. I don't know of a single site builder that actually produces 100% standards compliant coding. Free solutions generally exist as a solution, not a standards-setting solution.

Sure, it takes time to memorize the lines, coding and general attributes, but if you're going to do web design, you need to learn it correctly and do it correctly and not sub-par.

Tnks. I do know html and a bit of CSS. When I use sitebuilder, they fill in the codes for me. So what difference does it make?

Adobe offers a 30 day trial on its products including Photoshop, so you could compare its interface against Gimp without making an expensive plunge.

Hmm. That would be a good way to test it. tnks.

Dreamweaver is 2 things - a wysiwyg editor and and excellent coding application. Its get me when people say things like "dont use dreamweaver, you wont get valid code" etc etc when its just rubbish! Our whole company uses Dreamweaver for coding as not only is it an excellent site manager, but it contains tag prompts, color highlighting and intergrates excellent with our staging servers. If you know how to code proper standards compliant CSS and XHTML, Dreamweaver is just fine.

Regarding what the OP asks - Photoshop is not designed just for making websites - it also is not easy. Ive worked with a lot of people who expect to buy photoshop and be able to create amazing designs.... There are no button wizards, or default page layouts, just a blank canvas and some tools.

In my opinion, that is what makes a good designer, you need to have creativity and innovation that lets you concieve a good design, you have to build some squares and apply effects/filters to them to make how you want them to look. It takes time to learn, but once youve mastered the software, you can really let your self loose!

My advice to people always thinking of buying photoshop for web design is simple. Get a piece of paper and draw/color in the design you imagine. If you can get a good design on paper, then great, just learn how photoshop works and recreate it on the PC - if you cant seem to ever create a good design, or think of something you like, dont waste your money on photoshop - as it wont do the hard parts for you ;0)

The most important thing (as said above) is by far inspiration.
Then comes knowledge etc....

I have got no idea what that means. :)

Am I right to say Adobe Design Premium package is different from photoshop?

Sorry I was kind of rushing. I mean I have WAMP set up on an old PC for offline testing, before the page goes live. ;)

Hi Jerran, tnks. The problem lies more with me cos my knowledge in this field is pretty limited. :)

And the pricing for PhotoShop was a shocker to me. All the while I was expecting it to be about 300-400 bucks. It's actually $999! To me it is pretty far-fetched pricing.

Yes, Adobe products are expensive, but you get what you pay for.

You should check out GIMP, its a free application and works like adobe does.

Ya tried it and have to say it is really not easy to use it at all. I wonder if there is really a good help website on how to use GIMP to design webpages and buttons and such.

I did view a couple of Youtube videos on it but didn't really help.

What are you looking to use the program for? Full blown page layouts or just to create buttons and the like?

I want to change the present websites layout/template. And of course in the process do up a nice logo, change the buttons, do up nice tables/box, headers and so on. If I could do all these with GIMP, it would be great.

I actually signed up for Photoshop free 30days trial and well it's usage difficulty is similar to GIMP for me. So if I can learn to do all these with GIMP, it would really be a plus for me saving me some bucks.

Do you have a design in mind - i.e if you had to draw it on paper could you? That will help you an awful lot - it will also help others give guidance on how to do things, if we know what it is your trying to do.

I could draw it on a paper but no idea how I am going to do it on GIMP and such. Anyway, for a better picture, look at Youtube homepage.

I am talking about designing buttons similar to the Home,Videos and Upload. Also look to the right column, the Inbox and About your video. I am talking about designing tables like this. As for header, instead of Youtube logo, design my own logo there and the rest of the header, design a related theme.

My idea is more less that way. Header as mentioned. Left column Introduction and some banners running. RIght column, input the tables to separate things like articles, news and so on. For you tube the tables are very simple. I would like to just do some simple livening up to the colors and so on.

Now did I got the message across or further confused? :)

Photoshop and GIMP will allow you to do the design work, however, structure will depend on how you code using CSS & HTML.

There's really nothing more to it :). Photoshop & GIMP are for graphic design, nearly any type of graphic design except for 3D.

Whether you're wanting to design buttons, headers, logos, gradients, banners, adverts or anything else that requires some for of design software, Photoshop and GIMP will cover you.

Good to know that. Now I have to really work on learning to use the graphic tools. :)

As for coding using CSS & HTML, guess I am really a long way away from mixing that into designing.

Got a book on Adobe CS3 web workflows. Hope it helps.

I works with photoshop and Zend it works fine.

Whats Zend?

I use Photoshop for graphics...

Photoshop is a great grapics program :)

I totally agree it is a great tool. Its got so many options and so many features you get spolit for choices though the learning curve I am going through is not easy.

The pricing is very steep too. Really wondering if I should settle for CS2 and see if I can get a way cheaper price. Or if I can group some friends, share and purchase the CS3 software and download it on our individual PCs. Problem is I got no idea if this is legal.

I use dreamweaver for design.coding and Fireworks for graphics. You "colud" go the frontpage route just to strat learning but if your goal is to write code, i would go with Dreamweaver.

I do know coding to extend but of course have lots of brushing up to do. So I want to get the hang of using a design software like photoshop and integrating it with codes using a dreamweaver for me to produce the webpage.

Done some digging and diving for you. Listed below, are a few 'free' alternatives.

Free ware image design:

The Gimp - http://www.gimp.org/
Paint.NET - http://www.getpaint.net/


Programming:

Crimson Editor - http://www.crimsoneditor.com/
BlueJ - http://www.bluej.org/download/download.html
Notepad++ - http://notepad-plus.sourceforge.net/uk/site.htm
Notepad2 - http://www.flos-freeware.ch/
PHP Designer 2007 Personal - http://www.mpsoftware.dk/products.php
Textmate - http://macromates.com/

There's a whole lot more on the web, you've just to to search a bit. :agree:

Hi Jerran, tnks for the digging. :)

I do have GIMP but I find it's learning curve really challenging and well the tutorials I find on the net is not really towards webdesign. They are mostly on photo editing. ANy tutorials you know that's more web design related for GIMP?

Thanks again.

we are having a webdesigning company where we use Dreamweaver,Photoshop and flash for designing.

Ok. I have in fact designed my website and all. Taking my own time now to touch up on it and make it better thus all these learning phase. Prefer to do things myself as it gives me more options and in a way is fun.

Thanks.

yo million, thats the best way is to learn it all yourself. Adds some excitement to learning. If i were to give my 1 cent, i would say to definitly learn photoshop and illustrator. You can buy the whole Adobe Creative Suite Design Standard from a a college bookstore for about $200 and definitly worth it. As for coding, there are alot of good programs out there such as dreamweaver, but IMO learn it my hand first with notepad. That way you can read/write it with no problem, and it makes life alot easier.

Hi Matrix. I am quite comfortable with html and such so will be ok with dreamweaver I believe.

Anyway the whole Creative Suite Design Standard for $200? Thats a steal but too bad I live in Singapore and don't believe we have such offers here. Sobbs.

Hi Jerran, tnks for the digging. :)

I do have GIMP but I find it's learning curve really challenging and well the tutorials I find on the net is not really towards webdesign. They are mostly on photo editing. ANy tutorials you know that's more web design related for GIMP?

Thanks again.

No bother, though I would think about getting some adobe suite, but only the design software for example Adobe Photoshop and illustrator. :agree:

Though I would not bother with dreamweaver and co. Many free software out there that do a better job for programming. :blush:

Better free sofware for prgramming like for example NVU?

you need to get macromedia ..err adobe dreamweaver

Hi Matrix. I am quite comfortable with html and such so will be ok with dreamweaver I believe.

Anyway the whole Creative Suite Design Standard for $200? Thats a steal but too bad I live in Singapore and don't believe we have such offers here. Sobbs.

You dont need photoshop to be honest, any tool that allows you to make shapes (mostly curved boxes), overlay text and use gradient fill colors will set you up to make a decent modern web design.

Ill download GIMP and have a look at if it can do the above, if it does, ill PM you a few ideas on how to achieve some simple "tools" to use in a design :)

Hi Davithtn, I didn't know dreamweaver is a free software..

You dont need photoshop to be honest, any tool that allows you to make shapes (mostly curved boxes), overlay text and use gradient fill colors will set you up to make a decent modern web design.

Ill download GIMP and have a look at if it can do the above, if it does, ill PM you a few ideas on how to achieve some simple "tools" to use in a design :)

That will be a very great help. Tnks.

I've been using Photoshop since version 3.0 and can generally do what needs to be done there. However, I would like to explore GIMP.

I read somewhere that there is a GIMP "add-in" that creates an interface that makes it much more comfortable for Photoshop users? Can someone clarify that for me?

Well I believe Photoshop pretty much can do all and likely more than GIMP cos end of the day GIMP is a freeware compared to the highly priced Photoshop.

I think that photoshop, fireworks and gimp are great for graphic design. I don't think you always need to pay for your graphics software if you are just going to use the basics of graphic design if you want to create complex designs then it is always a good idea to invest.

gimp-tutorials.net/websitetutorial ;D For more: google.com/search?q=web+design+gimp Ooh, and thanks for the list Jerran, quite useful =)

I have got no idea what that means. :)

Am I right to say Adobe Design Premium package is different from photoshop?

If you have no idea what this means, you have A LOT of learning to do before you get to serious on the whole web design issue.

You can spend thousands and thousands of dollars buying all the various commercial software to do what you are looking to do... or you can spend 0. Since you seem to be very inexperienced, purchasing thousands of dollars would very likely leave you right in the same place that you are.

Save your many for classes, because unless you have a lot of time and are very dedicated, you are going to need them.

I suggest GiMP (very high learning curve tho..) and Inkscape for design. Although personally I use amost 0 graphic elements in my designs, aside from logos and such.

Once you create a design that you like, you need to decide which parts of it actually HAVE to be images - you know, jpgs, gifs, pngs, swf.. etc.

From there, you slice the design up so that you have just the image portions that you need, and do you page layout in a program such as Dreamweaver, FrongPage (ack!), or by hand (THE way it should be done) using XHTML (or html if you're not that skilled), and CSS at the bare minimum.

Personally, I use PSPad for coding, it is free and sweet.

The easier route would be to purchase the whole Adobe suite of tools for production, but then you still have to learn a lot about html/css/js (tho not as much) and a whole slew of programs with medium-high learning curves.

Up to you, I suggest graphics classes at a local college, but stay away from the web design courses as they will most likely focus on Frontpage, maybe Dreamweaver, but you should learn online how to do it by hand.

gimp-tutorials.net/websitetutorial ;D For more: google.com/search?q=web+design+gimp Ooh, and thanks for the list Jerran, quite useful =)

Thanks for the link. :)

Nice advice Camofish. Tnks.

I have used NoteTab Pro for a number of years. It is an ASCII editor, but has HTML syntax highlighting, ability to use a library of macros, ability to create your own macros, open up multiple files at the same time, and create changes on the current file or all files that are open.

Several years ago, when one of my sites had only about 350 pages and needed an upgrade, I did a mass update that involved editing all 350 files. I used NoteTab Pro to open up all files in a subdirectory and, since I used a template to create all the files in the subdirectory (thus ensuring that the code was compatible in each subdirectory) I was able to make changes to all files at once with one command for each change. As best I recall, the process took only 5-6 hours.

NoteTab Pro costs $30: http://www.notetab.com/index.php

The other tool I use is WeBuilder 2008.

http://www.blumentals.net/webuilder/

It costs between $50 and $70. Excellent technical support.

What it provides is a smart ASCII editor, the ability to span the display between both of my 19" LCD panels (with the code on the left and the actual page rendered in a browser on the right), the ability to save directly to a website (via built-in FTP) ... this thing is really great for prototyping new designs.

And, for the graphics stuff, I've been a PhotoShop user since version 3.0, and currently use version 8.0 (CS). I probably use less than 5% of the capability of the product. Sigh.

Hi, Websquad. But how do you do the design work. I mean just Html editors aren't going to give you the nice graphics and design works and a usage of 5% sounds so little.

Also wish to ask all seasoned programmers. Are you telling me you basically go into a html editor and jus type out everything From your titles to paragrapghs tables and all other tags? Wouldn't it be much easier to use something like a Sitebuilder where you can see how your website will turn out compared to HTML writing where you just see words unless you publish to really see the final outcome. do advice if I am missing out on something down here.

CamoFish is on the right track. Your situation is that you don't really know how to drive yet, and want advice on what transport to buy. Many of the answers suggested here are akin to a Lear Jet or a helicopter.

I suggest you start with a Ford or Toyota. If you decide later you want to become a full-time world traveller, and earn your income from it, then a Lear or helicopter could be a good investment of money and time. But not yet, until you find out if you can at least steer in a straight line :)

If I read your questions correctly, you want something to make quick prototypes of a design. Once you've finished messing around with the design, you need to translate it into a web page.

Get yourself a WYSIWYG page editor like FrontPage or CoffeeCup. FP might be the easiest to use, I don't know. You don't currently have the time or need to mess with complex expensive tools.

Draw your page layout in the editor. Grab copies of buttons etc you like off other websites and put them in for now. Play around with it all until you get something you like.

At that stage, get a graphics editor and make your own buttons etc. Nobody mentioned Paint Shop Pro yet, I assume that's still around? It used to be the cheap alternative to PhotoShop.

Alternatively, search online for free graphics sets you can download and modify--that would be a lot quicker and easier than creating them all from scratch. The only guaranteed thing about your design is that you'll want to change it in 6-12 months, so don't spend forever on this first effort.

Don't go mad on graphics in your page, and make sure to optimize them for web display. Every graphic is an extra file download which can freeze in the visitor's browser, and delays the page's display. Use the minimum number and filesize. If a lot of your visitors will be Asian, then bandwidth issues should be a big concern in your design--there's a lot of web access via handhelds and mobiles in your side of the world.

Summary: spend you time now learning the basics of what you want to do, not learning the intricacies of expensive tools you may never need. Good luck :)

Hi, Websquad. But how do you do the design work. I mean just Html editors aren't going to give you the nice graphics and design works and a usage of 5% sounds so little.

Also wish to ask all seasoned programmers. Are you telling me you basically go into a html editor and jus type out everything From your titles to paragraphs tables and all other tags? Wouldn't it be much easier to use something like a Sitebuilder where you can see how your website will turn out compared to HTML writing where you just see words unless you publish to really see the final outcome. do advice if I am missing out on something down here.

This sounds lame, but after coding a few thousand web pages over the past 12-13 years, it comes 'sorta second nature. But I realized that there is a major fallacy in relying only on experience. You keep doing the same thing! So, to that end, I invested a few dollars in a fairly new book "The Principles of Beautiful Web Design" by Jason Beaird. Jason recommends that you start with a blank piece of paper and a pencil, and sketch out your ideas. http://www.principlesofbeautifulwebdesign.com/ You can download the PDF version for $10 or get the bound paper version for $40. Sitepoint (the publisher) will let you download a sample for free. This is NOT a book on HTML, XML, or CSS ... no coding, just visual design.

Another person posting recommended FrontPage ... IMHO that product is a mess, producing pages that will not work consistently on the wide number of browsers that are used today. On one of my sites, which gets 20K - 25K page views per month, there were over a dozen different browsers in use, all the way down to Intenet Explorer 2. It is a messy world out there! When I'm developing a template for a new or to-be-updated site, I always include in the menu or footer a couple of links for validating HTML and CSS ... just to keep me honest.

One final thing: I test and then test some more. I'm blessed to have four computers: two Windows/XP machines, a Linux/Ubuntu, and a Mac PowerPC G4. On these machines I have nine different browsers. Although by now I should not be surprised, occasionally a browser will do some strange things with spec-complient HTML and CSS ... and you have to code your way around those problems. So, after you learn the basics of designs by reading Jason's book and by visiting a few hundred websites, then you really need to learn the underlying code to make things work correctly. Good luck!

FOREWORD: If you don't want to read my whole diatribe, please at least pay attention to the BLUE paragraph... it explains how I learned almost everything I know about HTML (and now XHTML), as well as CSS, javascript, and even PHP. Naturally, you can't use the "view source" technique to learn PHP, but Google turns up plenty of tutorials!

This sounds lame, but after coding a few thousand web pages over the past 12-13 years, it comes 'sorta second nature. But I realized that there is a major fallacy in relying only on experience. You keep doing the same thing! So, to that end, I invested a few dollars in a fairly new book "The Principles of Beautiful Web Design" by Jason Beaird. Jason recommends that you start with a blank piece of paper and a pencil, and sketch out your ideas. http://www.principlesofbeautifulwebdesign.com/ You can download the PDF version for $10 or get the bound paper version for $40. Sitepoint (the publisher) will let you download a sample for free. This is NOT a book on HTML, XML, or CSS ... no coding, just visual design.
Agreed on both points:

First - once you learn (X)HTML and CSS well enough, you will gain a fairly good understanding of what elements and styles it takes to make stuff appear where and how you want it. TBH, I mostly picked this up through lots of trial and error; now, the only other program I use besides EditPlus (http://www.editplus.com) (ConTEXT (http://www.contexteditor.org/index.html) is an amazing freeware text editor that provides the same useful things like syntax highlighting - had I found it before I bought EditPlus, I'd be using it instead) is Photoshop. I was lucky enough to get a subsidized copy of Photoshop from my job so I didn't have to shell out $$$$$$$ for it, but having used it since high school (worked on the school newspaper) I'm familiar with it, and Photoshop on your resume always looks good. Anyways, I use Photoshop for relatively trivial things like buttons, logos, and graphical headers, as well as the occasional background image. I also use Photoshop to get measurements so I know what size I need to make the various divs and whatnot; a screenshot combined with the measuring tool takes the guesswork out of it, but sometimes it's quicker to just eyeball it and guesstimate the desired width or height of an element.

The best way (at least what works best for me, YMMV) to learn HTML, CSS, and the like is to look at pages that have a look and feel similar to what you're going for. Then, view the source of those pages, and try to read the tags and figure out what correlates to what. Copy and paste snippets into a test web page of your own, and try modifying values (widths, heights, colors) to see what changes and how it changes. Also, if you're unsure what an HTML tag does, try Googling "HTML", followed by the tag name (like "HTML div" (http://www.google.com/search?q=HTML+div)). Some of the sites that come up on the first page are generally tutorials and specifications that indicate what the tag does, and how to use and modify its appearance and behavior. If you're unsure what a CSS attribute does, just Google "CSS", followed by the attribute name (like "CSS background-color" (http://www.google.com/search?q=css+background-color)). If you're trying to find a tag or attribute that does something specifically, try HTML or CSS as appropriate, followed by a keyword or two that represent what you're trying to do: "CSS background image" (http://www.google.com/search?q=CSS+background+image) or "CSS vertical centering" (http://www.google.com/search?q=CSS+vertical+centering) are two issues that I've found less than intuitive to implement, and have thus consulted Google multiple times for reference.

Second - sketching out web design ideas is great. While you can do draft mockups in Photoshop*, it's not really meant as a drawing program, and unless you have a Wacom tablet or equivalent, you may find yourself a bit limited. Photoshop* is great once you have a good idea of what look you're going after, and can bridge the gap between mockup and site layout by letting you create and modify your images where you want them to be on the page so you can see how it'll look when it's done, but drawing up and revising drafts in Photoshop* can be tedious.

* Photoshop, or your preferred (and cheaper) image editing solution ;)

Another person posting recommended FrontPage ... IMHO that product is a mess, producing pages that will not work consistently on the wide number of browsers that are used today. On one of my sites, which gets 20K - 25K page views per month, there were over a dozen different browsers in use, all the way down to Intenet Explorer 2. It is a messy world out there! When I'm developing a template for a new or to-be-updated site, I always include in the menu or footer a couple of links for validating HTML and CSS ... just to keep me honest.

Agree again. Depending on who you ask, Firefox commands 15%-40% of the web browser market share, which is a significant portion... of course depending on your content (and thus the type of viewer you attract and their preferred browser type) it could be more or less. While FrontPage (now Expressions Web, by the way) is getting better about generating clean and standards-compliant code, it still has a pretty comfy spot in last place compared to other web-design tools' output.

As for validation, use the W3C (X)HTML Validator (http://validator.w3.org/) and the W3C CSS Validator (http://jigsaw.w3.org/css-validator/). A page that passes validation on these tools will display fairly consistently across all popular/recent browsers, about 98% of the time... which is about the best you can hope for ;)

One final thing: I test and then test some more. I'm blessed to have four computers: two Windows/XP machines, a Linux/Ubuntu, and a Mac PowerPC G4. On these machines I have nine different browsers.

If you don't have a wide array of computer hardware at your disposal, and are feeling somewhat adventurous, virtual machines (VMs) might be your solution; they also have the added benefit of giving you a platform on which to learn another operating system! VirtualBox (http://www.virtualbox.org) is a great free VM software, and if you can find an old license of Windows 2000 laying around, you can use IE 5.01 and slap something else old, like Netscape 6, on there and have a bit more versatility. Create another VM with some flavor of Linux, and you can use it to test some Linux-only browsers, as well as maybe an older version of Firefox. Lastly, if you can procure a license for Mac OS X, you can even test Safari, and possibly IE for Mac (which behaves quite differently than the Windows flavors of IE). Each virtual machine you create will occupy a single gargantuan file on your hard drive, and not consume other resources unless you're actually running that virtual machine. I would recommend 20GB of free space for this endeavor though, allocating 5-10GB of space per VM - Win2K and Linux can comfortably fit in about 5-6GB (after all the only programs you'll be installing on the VMs will probably be a few additional web browsers), whereas the latest OS X versions take close to 6GB just for the core OS.

Although by now I should not be surprised, occasionally a browser will do some strange things with spec-complient HTML and CSS ... and you have to code your way around those problems. So, after you learn the basics of designs by reading Jason's book and by visiting a few hundred websites, then you really need to learn the underlying code to make things work correctly. Good luck!

A good example that I ran across last night actually, is object opacity. Opacity didn't become an official style attribute until CSS Layer 3 and thus has spotty support at best, so you can opt for the W3C-compliant (Level 3 only - it won't pass 2.1 or lower) "opacity" attribute, or kick compliance to the curb in this particular instance and use the cross-browser trifecta of "opacity: 0.5", "filter:alpha(opacity=50)", and "-moz-opacity: 0.5", which provides the broadest opacity coverage.

I've looked at many of the free or inexpensive website tools and the one I like is Site Spinner. It sells for $50 USD, and you can download a free trial.

It will never build you an award winning site, but it will build you a decent looking site. I like it better than WeBuilder 2008 mentioned above. You can learn to use it in just a few hours, although to learn all of its features will take a little longer.

Unless you are going to be a hard-core website designer for a living, forget the idea of working with an HTML editor. I am a programmer by trade and by education (master's degree), and I spent quite a few years programming in assembler and C (now I do network-related work). When I did my first few websites I coded them by hand in HTML just so I could learn HTML. Insofar as the language goes, there's not that much to learn it, but to master it would take a while. And to what end. How many of you can write something up in PCL. If you want something to print you go into your word processor and type it up and print it. How many of you have ever directly entered anything in PCL. Sure, it would give you more control than a word processor, but it would take a week to create a short document in PCL, or a few minutes to type it in in a word processor. If you don't do your documents in PCL, why would you do your websites in HTML (or any other raw code). Clearly there are excepetions, but you're not at the exception level yet.

Download site spinner and give it a try. Even if you want to go hardcore and code by hand, you could still use it to do some prototyping with.

My final comment is this: Coding a page is easy -- What to code on the page is hard. You need to understand design, function, ergonomics, etc.

This sounds lame, but......

Hi, a pretty good book it seems. Might consider purchasing it. Tnks. So am I right to say you draw out your layout and designs on a paper after which you do everything by code? Sounds really cool and specialized. :)