I agree with your friend that you should get some kind of a mockup going. That you've got an idea planned on paper is an excellent start. But before you go to coding, there are a few things you should consider.
Namely: How much control do you want over the graphic layout of this site? In other words, do you want a site that looks exactly a certain way, no matter what your resolution or the size of your browser window? With CSS, you can also choose to make a site that adapts to varying window sizes. I'll try to find examples to show what I mean.
For example... I'm making a webcomic site. Most webcomic sites like mine use a fixed-width layout, because they deal with large, fixed-width images of their comics. Take a look at the popular webcomic, penny-arcade:
http://www.penny-arcade.com
The entire site is exactly 800 pixels wide. Notice the blank space on the sides, and if you resize your browser window, the site doesn't look different. 800 pixels wide is a good minimum width, because some people will still use computer monitors that have that resolution. Other sites will sometimes use a width of 1024 or 1280.
Your other option is to make a more adaptable, full-screen site. Many sites that use buttons, menus, and text, but not so many large image files, will take this route, because it allows them to fill up the browser window regardless of the user's resolution.
For example, compare penny-arcade to the popular online artists site, DeviantArt:
http://www.deviantart.com/
If you resize your browser window, the entire site adjusts accordingly, without creating a horizontal scrollbar. But notice how the image thumbnails, which are fixed-width, are forced to move around as you shrink the site. This can be a problem if you're planning to display images in precisely a certain way.
---
So, I guess I have a question for you: Do you have a scanner? Or, can you get a hold of one? If you can scan your drawing of your site, you can put it in Photoshop and start to get a feel for what kind of site it should be.
Take a look at your drawing. Your logo will of course have to be a separate image file, but the rest of your site might not. If you noticed on penny-arcade.com, the entire top of the site was one large image, a colorful swooshy thing with other images on top of it. You can't do that with CSS, you have to use image files. But on DeviantArt, most of the site is simply different-colored boxes and regions, and some text, and of course the thumbnail images.
If the plan of your site uses a lot of bars and menus and generally rectangular sections like that, this is all stuff you can code with CSS, so you shouldn't have to make it a fixed-width website. If you're planning to have sweeping, dramatic, graphic imagery for your menus, however, you might want to make it fixed-width. Either way, it still might be a good idea to make the mockup in Photoshop, just to get a clear view of what you're trying to make.
So finally, as far as making that mockup in Photoshop:
Again, I recommend scanning your image. Then you can just drag colored boxes over certain parts, put text layers where you would want text to show, etc... or, you could even just grab the Photoshop paintbrush tool and start painting the colors. Even if it's crude, it will still be useful, because you can use this mockup to help you find pixel-widths and positions when you're writing your CSS code.
If you don't have a scanner, you can always just start trying to imitate your plan in Photoshop itself. Just pick a small black paintbrush and start drawing on a separate layer... you can go back and fill in the colors later, and that way you can hide the black line-art layer to see just the raw colors.
I also agree that it's a good idea to get a basic white website online. As you develop your idea in Photoshop, you can start trying to imitate it with the site, and get a real idea for how it will end up looking.
Feel free to let me know if you need any more help. Good luck!