My view on this is a bit heretical, but I think it's going to be more compatible with what you seem to want than what others are going to tell you. I've been programming for 38 years, and dealing with websites for just a little under half that, and IMHO most of what's 'common practice' in the industry right now is nothing more than dimestore hoodoo, five and ten voodoo snake oil; existing for the sole purpose of ripping people off and on the whole making the Internet harder for users to actually use.
Now, word of warning to the thin skinned wussies who usually get their panties in a knot when I decide to be honest, just do us all a favor and stop reading now! I AM going to offend you because to be frank, you and your sleazy scam artist bull needs to be ripped a new hole. IF you find this post offensive, please do the world a favor and either take a good hard look in the mirror, or just sierra tango foxtrot uniform; sorry, adults talking here -- go back to singing kumbaya around the drum circle as the world burns around you!
Dicking around in some goofy paint program and calling oneself a "designer" takes a massive set of brass and is generally speaking a giant load of grade A farm fresh horse manure. The people who work that way universally sleaze out buggy, broken, bloated, slow loading inaccessible laundry lists of "how to to build a website". No matter how pretty their work -- and much of their work is VERY attractive and takes a lot of talent -- at the end of the day it doesn't matter how pretty something is if it's useless to visitors.
Simple fact is that with the array of different screen sizes, device capabilities, user impairments, default font sizes and host of other things your layoutS (yes, plural) should be capable of handling, playing around at one resolution in a tool designed to work in pixels, concentrating on a visual appearance before you even have semantic markup of content is putting the cart before the horse and a completely back-assward approach to development.
Just look at the major success stories of the Internet -- eBay, Amazon, FaceBook, Twitter, Wikipedia -- not exactly a visual tour-de-force; do you REALLY think any of those has some Photoshop jockey in the back room screwing around for hours with 'layers'? OF COURSE NOT! Even when they are poorly coded inaccessible wrecks (like most social media sites) they focus on what's REALLY important on a website; content of value presented in as navigable a manner as possible.
... and that's a lot of the problem, a lot of people just want to fork over cash for something flashy -- a lot of "designers" want to rape people's wallets with their flashy bull, and the end result is one giant scam that just screws the people too stupid to realize it until it's too late; or never realize it and just assume that websites suck and it's more of an expense than an investment.
It sounds like you mostly have the tools to do sane and rational template building; forget the Adobe-tard bull and halfwit idiotic garbage like fireworks and dreamweaver. In terms of web development the only thing about Adobe software that can be considered professional grade tools are the people promoting it's use.
...and yes you can build an entire site with just HTML and CSS, though I would highly recommend adding a server language like PHP to your skillset, if for no other reason than to be able to glue together parts that are the same across an entire site (header, menu, footer) to your content. Even when building "static" sites being able to re-use the same parts and edit things on all pages from one place is something you need to learn to do early on.
Lemme outline my site development process for you:
1) I take the content of my main page, or a reasonable facsimile of future content and put it into a flat text editor. (I use Flo's notepad2, but Sublime, editplus, notepad++, gEdit, Text Wrangler, Scite, or any other programmer's editor is fine) and arrange it into an order that makes sense as if HTML never even existed.
2) I add my semantic markup enhancing the logical document structure with numbered headings and horizontal rules. You choose your tags based on their MEANING, not what they happen to look like. If you are choosing tags based on their default appearance, you're choosing the wrong tags for the wrong reason.
I feel the need to re-iterate how to use numbered headings as I have no clue where you learned the tags from, and most sources skip a VERY important detail of using them that comes from professional writing.
H1 is the heading under which everything on the page is a subsection, h2 indicating the start of subsections of the H1, H3 indicating the start of subsections of H2, and so forth with HR (horizontal rule) indicating a change in section/topic where a heading is unwarranted. That's what they would mean in professional writing, and that's how they SHOULD be used in building a website. This is why it usually makes sense to only have one h1, why it's gibberish to skip over heading levels (like a H5 or H6 on a page that doesn't even have H4 or H3), and why HTML 5's allegedly semantic new structural tags (header, section, nav, footer, aside) are a bunch of pointless redundanct code bloat bull... another reason I don't advocate the use of HTML 5.
In any case, at step 2 you should be adding your markup WITHOUT worrying about what the page looks like; to that end you also shouldn't be adding any DIV or SPAN at this point since those two tags provide no specific semantic meaning.
3) Create your layoutS (yes, plural) for your various MEDIA targets (screen, projection, tv, print) -- this is when you use semantically neutral containers (DIV and SPAN) to make it easier to apply style, but only add them WHEN YOU NEED THEM. Don't just go slapping DIV around things like ... well, lets' use a menu UL as an example. Nine out of ten times you see a DIV around a menu UL, it's just pointless code bloat as there's nothing you can do to a DIV you can't do to a UL... DIV are great for grouping tags for the application of style or making CSS selectors easier; as a rule of thumb, that's all you should use them for. Likewise SPAN should be used for applying style when style is being used that has no real meaning or corresponding tag.
This is also the stage at which you'd be adding classes and ID's. Well written pages classes and ID's should also say what things ARE, NOT what they look like. It's called separation of presentation from content... and it's why most HTML and CSS "frameworks" -- like YUI, like Blueprint, and like the new steaming pile of halfwit idoitic manure "Bootstrap" are a bunch of nonsense that defeats the entire reason we even have HTML and CSS in the first place!
Your layout should be three things first and foremost:
Elastic -- any 'fixed' measurements like side columns should automatically expand based on the default font size; which is why declaring fonts in pixels is inaccessible trash that should only be used with an eye-dropper where it's absolutely needed -- like when there's a complex image interaction like Gilder-levin.
Semi-fluid -- automatically expanding and contracting to the available space, but with a max-width so that long lines of text do not become difficult to read. Fixed width layouts are inaccessible crap, and anyone telling you otherwise is packing you so full of sand you could change your name to Sahara.
Responsive -- adding/removing columns and re-arranging content using media queries so as to best fit the content to the available space.
4) paint it. Only after you have a working layout should you start thinking color, backgrounds and other window dressing... and really that's all the vast majority of style is, extra doo-dads to make it pretty and NOT the actual important part of the page. This is the stage at which you bring the paint program into things to create backgrounds, logo's, etc. Photoshop and it's kine go at the END of the process, NOT the beginning.
The people who start out in Photoshop before they have semantic markup of their content or a reasonable facsimile of future content have generally blown so much smoke up their own backside they could enter their ribs in a BBQ competition. They've deluded themselves into thinking their very pretty but ultimately slow loading inaccessible crap has any value, and the industry as a whole is going down the toilet because of it.
Getting near the post size limit, so
... to be continued