Okay, here it is in a simple 3 step process. Let's get started:
1. You design the website in photoshop, or somehting of this sort. What i mean by design, is truly design. You draw out everything. Every navigation, your header, the border you want, the background. You create everything you want the end user to see. Even create a navigational button, that has the rollover effect on it already. You will use this to create all other roll over effects. So if you have 6 navi buttons, 5 of them will be normal, and the last would have the roll over effect.
Also note that this should be desinged in the quality that you want your website to be viewed. This is
NOT a sketch. This will basically be your website in a jpeg.
2.You take you're now already created website, and you cut it up with the slice tool. I, however, don't like to do it that way. I use the the slection tool, and copy layers into new documents, and then save them seperatley. That's a bit confusing, so all you need to know is that you have to take the seperate images of your large website design, and cut it up. Now, it is important to do this as your coding your website. Don't cut it all up at once, do it as you progress. For example, first create the border with CSS and HTML, then create the header, then the navi buttons, and so on.
As I said, you're going to have to code it now. You'll have to have basic knowledge of HTML, and CSS. They really aren't that hard. I learned CSS in a matter of days. Although I may not be the best, looks like I did okay with my
website. It's truly straight forward, and HTML is really simple. Nothing more than a few tags. T olearn CSS, just look at a few examples. No need to read books. Its very straight forward. There are such commands as width, height, font-size ... really easy stuff. just know this:
Quote:
#name{
whatever: something;
whatever: something;
whatever: something;
}
#name, this would be referring to a div id of name. You do this in html with:
<div id=name>
whatever goes in here
</div>
the #name would call back to the id=name and set the parameters you give between the { } characters.
Now, the whatever: refers to the parameter, and the something; refers to the setting of that parameter. For example:
width: 90px;
Lastly, know that #name refers to the id of the div, while .name refers to the class of the name. You set it as class, if your using the very same div more than once in the document. So instead of having:
HTML
<div id=name>
fsgs
</div>
<div id=name2>
other stuff
</div>
CSS
#name{
whatever: something;
whatever: something;
whatever: something;
}
#nam2{
whatever: something;
whatever: something;
whatever: something;
}
You can have:
HTML
<div class=name>
fsgs
</div>
<div class=name>
other stuff
</div>
CSS
.name{
whatever: something;
whatever: something;
whatever: something;
}
As you can see, they share the same CSS bit, but they are two different div's. So ... you only use .name for "class" and #name for "id"
|
3. You purchase some hosting, and upload your files! Might i recommend my web host, just because I spent quite a bit of time writing this! lol.
If you need any further assistance, feel free to use the forum, and ask a bit more questions.
