HELP FOR FIRST WEBSITE
Jaime Montaño (121 points) | Tue, 2006-02-21 02:45Hi all you guys,
Some teachers of my college are going to launch an electronic publication wich is going to be renewed every two months. I'ts a web site and I was requested to do some sketches, and by one way or another, I accept to do the site. Is not a big job, cause its about 5 articles and a photo gallery, but there's a problem. I just know the basic stuff of html. alignment, breaks, tables, frames, font face, headers and that stuff. But when I check the code of one pro page or some simple pages I found stuff like w3c and css. I mean, I know what those words means, and I know that css rocks but I dont know how to use it.
Im wondering if I can do the site with just basic html or slicing images in photoshop or need to find a very good tutorial or what do you suggest. I already did a very basic layout view in Photoshop. It look like this.
------------------------------
@Behance
Jaime, I think that if it is a very basic website, you do not need to know CSS and all that good stuff, I don't know much either, but I did these two sites with very basic knowledge:
http://www.deepbluequest.com
http://www.aquaticfrontier.com
Check them out, I think they are a proof that anyone, "even myself" can make a website.
--designer wannabe--
This will sound like I'm trying to jump all over you but any opportunity to stop a fledgling designer from developing bad habits I'll take it.
Firstly, whatever you know about frames and table based design, forget it. Please. Tables are for data. Tables are not for presentation. Frames, well, frames are just very bad all together.
CSS, firstly, is not hard. Just keep telling yourself that and then you'll realize, it really isn't hard. I'll give a brief tutorial to get you started but for more in depth info try A List Apart.
Now, a brief tutorial. The basic building block of most modernly designed sites is the
<div>. Think of a div as a magic box you can stuff things into that will grow and contract as needed. It's far more magical than that but that's good enough for now.There are two major CSS properties for every tag: margin and padding. Take a div and set a margin of 5px. In CSS that looks like
margin: 5px;. Now, that div will be 5px from everything else on the page on all four sides. Easy. But, why is that cool?It's cool because in your CSS you can say
div {margin: 5px;}and every div on the page will have a margin of 5 pixels. If you change your mind, you just change one line of CSS. The same holds true for any CSS property applied to any HTML element.Now, what do you do if you want a div that is red and a div that is blue? Class. CSS has class. In your html you have
<div class="red">contents of div</div>and the same for the blue div. Then, in your CSS you create the class.red {background-color: red;}. Now, any div with the class "red" will have a background color of red.Things get cooler when you realize you can apply a class to any element. Want warning paragraphs to have a red background?
<p class="red">Warning! Placing live bunnies in the microwave will result in bloody messes.</p>I hope you're starting to get what I'm talking about here and why CSS is so great for far more reasons than the basics of semantic design and platform compatibility. It's not just the right thing to do, it's the better thing to do.
Now, that's certainly not enough to get fully going with CSS, so some links would be handy. Here they are:
W3 CSS2.1 spec Bookmark this.
Adactio's CSS Based Design
If none of that helps then let me know. Feel free to hit up my own site and send me an email. I'd be more than happy to offer some pointers.
http://restiffbard.com/