Basically learn Html/CSS. Draw things in PS/whatever, and then use them as a model to make a webpage. You can slice with photoshop but that's just NOT the way to do things 99% of the time. Think of HTMl and CSS as legos.
Do it the right way. Trust me. It's not hard. Use the element inspector in Firefox/Chrome (Right click, hit inspect element). See why things are positioned the way they are. Use
http://jsfiddle.net as a sandbox to test your skills. Sources to learn, try
http://tizag.com or w3schools. Don't be afraid of getting things wrong. Understand that everthing you see on a webpage is an "element"(or object, or lego keeping in kind with the aforementioned metaphor), and it can be manipulated as such by style "rules" invoked by CSS.
So if I have a link "lego"(element), it looks like this. <a href="http://url.com">. You know this code probably. Href is simply an attribute of the lego, it says this lego points to
http://url.com. I could change this to <a id="randomname" href="http://url.com"></a>, and now it's unique identifier is "randomname", and it can be specifically controlled by CSS and Javascript thusly.
You can name elements anything you like, but of course it's advisable to make your Login button have the id "login" or "login_button" rather than "abc123". IDs can only be used once on a page. Classes are very similar, but you can apply them to as many elements(legos) as you like. So thusly I can make code like this, <a class="redlego" href="http://google.com"></a> <p class="redlego"> This is a 2nd lego with the class 'redlego'</p>
Now notice that I made a 'redlego' out of an "a" element, which is a link, and a "p" element which is a paragraph. A good way to think about it is that there's a predestined set of "legos" which are tags like <img>, <div>, <p>, <span>, etc. From there, you can customize the legos however you want!
http://jsfiddle.net/LSWAb/
Here's an example that illustrates the "redlego" example from above. The top left box is the html we're using, top right is the CSS rules (classes are defined by a period and then your class name, such as '.redlego', whereas IDs are defined with # symbols, such as "#speciallego"). The bottom right is the result of our code. As you can see, the text is red! This is because of the code in the top right box, which is
.redlego{
color:red;
}
So the class redlego, has one rule, which is that the text color is red. In CSS, text color is defined by the identifier "color". Try replacing the code in the top right box with this, and click run at the top of the boxes, see what happens! Play with it, you can't mess anything up.
.redlego{
text-align:center;
font-size:140%;
background-color:#000;
color:red;
}
