CSS, XHTML, and the temple of doom: part 2 Lets layout some design, and laydown some code!

So back on the webdesign train! Today we are working on taking a design and working with xhtml. The mockup Layout of my page So the first thing I do is take my mockup that have made in photoshop, and I break it down into logical parts. usually this is done just in my head but here Ive divided it out in a wireframe layout. The areas that have the black lines around them are DIV elements in most cases. If you havent used this tag its a very handy tag that basicly, makes up the skelleton of the site (I know I know purist xhtml people say that most designers overuse them, but they are a great tool). the “div” in div stands for “division” so its really the logical choice item to divide our page up.

Now for a little behind the scenes on xhtml. If your not used to it it can sound daunting, but its not that hard. For example you might have this piece of code in html: (sorry, the code examples are images because wordpress messes with your HTML because it wants everything nice so browsers dont choke.)

code example

But in xhtml, that code is a no-no, because in xhtml all tags need to be closed like this:

XHTML Code Example

See how the paragraph (p) tags are closed just like you would for a link using the anchor tag (a). Now you might be wondering whats going on with the img tag, in the first one the tag is just closed with the normal /img tag which makes sense if every tag in XHTML needs to be closed like I said. In the second image tag however, there is only one tag there and it ends with a slash before the ending angle bracket. That’s a self closing tag, that can be used whenever you would normaly have a tag with no text inside it.

Okay, so lets lay down this XHTML. This step is about 2 things: content normaly and structure, but not looks. For now I am going to be using lipsum text as a place holder for content, as this is for a site that I dont quite know what the final text will be. Structure is the real focus now though, and what we want to do is break it up into logical chuncks that we can jocky around later. Starting with a blank template (I just tell Dreamweaver that I am using XHTML 1.0, and it generates the template but its not hard to write yourself.)

XHTML Code Example

Next, lets set up the DIV tags that give this document structure. I’ll give each div an ID while I am at it, these IDs atributes will help me later when I am doing the CSS style. I put notes in so that you can see which div is which, and I added one div from my initial layout at the top of the page: (you can click the guide if your confused where things will go.)

div guide XHTML Code Example

ResultsOkay, now we just fill in the deets, and here is the result. To see the code, click View then Page Source (in firefox). “But Scott,” you say, “that looks like crap!” Well thats what CSS is for. this gives us a framework to fill in the rest of the site.

Awesome, next time we play with CSS and make things pretty. One last thing though, although this tutorial itself is written by me, the design that I am making is for work. Therefore the code is Copyright the Regents of the University of Michigan. This means while you can use the code as an example, you may not use the code on your site. Sorry. I was going to do this with a personal project so this wouldn’t come up, but this way I was able to kill two birds with one stone, and honestly I dont have time for my own web projects right now. So dont use this code directly, but use it as an example to help write your own!

This entry was posted in css, The Web. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>