TubeWorld Layout Recipe

Explanation of 2010 Publishing class test.

Mark Up The Content

The text asked you to make a web page that looked as close as possible as this screenshot using this text.

First of all, get the html5 skeleton from my website, or elsewhere.

( Note: if you look at the code of the example files, links to which are later in this document, you will notice that there are a few minor differences between them and the html5 templates we’re using in this class. The most noticeable of course is the long doctype in the first line. This is nothing to worry about: the files used an earlier version of html.)

In the <body> of the document, paste in the text. If we look at the screenshot, we see an obvious two-column layout below a “banner” that spans the entire width of the document. Let’s start with the banner.

It’s obviously the most important text in the document, so let’s make it an H1. Underneath that, make the phrase “EL84” an H2. Don’t make the wikipedia attribution an H3: the information is not that important. It should just be paragraph text, like most of the text that follows.

In the sample text, there are three categories of vacuum tube: preamp, power amp, and rectifier tubes. Each has a bunch of different tube types listed. I’d mark up these categories as H3s (our next level of importance, because we’ve already used H1 and H2) and each group of tube types as a separate list. Make each tube type a “testing” link ( a href=”#” ).

Finally, I’d mark up the “Makers of Amps with EL84s” as an H4 (reasoning that that phrase is less important than the words preamppower amp, and rectifier in the menu. If they were equally important, I could use an H3).

Your code should now look like this.

(Click the link and then go View < Source or View < Page Source).

Make the First Styles: H1 & BODY

In this example, I’m going to use an internal style sheet. This will make it easier to test the file, as I won’t have to deal with any of the caching issues that can trip you up (especially with Safari). If I want to make an external stylesheet, I can just copy these styles to a separate css file later.

In the <HEAD> of the document, put the opening and closing <STYLE> tags.Make the <BODY> style. Give it margin and padding values of “0” in order to neutralize the space each browser reserves along the edges of the content (which is normally a good thing: it’s so that unstyled text doesn’t go all the way to the edge of the browser window).

Give the <BODY> style a font-size value of 14px. Now make the <H1> style. Give it a font-family value of “Trebuchet MS”, Arial, Helvetica, sans-serif and a font-size of 160px.

Give the h1 a red background-color and white color (this sets the text color). Test the page in a browser. It should look like this. So we see that the red background color goes all the way across the document (like we’d expect with a block-level element). But there’s a ton of space above the red bar.

To get rid of it, look at the html context. Right after the <BODY> tag is this <H1> we’re trying to style. We’ve already zeroed the margin and padding on the <BODY> tag. So we need to manipulate the H1’s box model properties to close this gap.

Set the <H1> margin to “0” and then test the page. It should now look like this. See how the gap closes? However, resize the browser smaller: notice that the type now wraps? There’s a number of ways to combat that problem. The most concise, though, is to add the following to the <H1> style: “white-space:nowrap”.

Finally, we need to increase the height of this <H1> we’re treating as a banner. To do that, remember that the height a line of type sits in is controlled by the line-height property. Set the line-height to 240px. The type now sits right in the middle. Finally, add, say, 60px of padding-left to the <H1> style to move it over from the edge. The page should now look like this.The nice thing here is that we’ve kept our xhtml very simple, but still got good results from a few lines of CSS.

Add Some DIVs to Set up The Column Structure

Now, let’s take care of the column structure. In the HTML, wrap the from the H2 (inclusive) to right before the start of the menu section in a DIV. Give that DIV an ID of “content”. Wrap the menu section in a DIV with an ID of “menu”. To see what your code looks like at this point, go here and choose View < Page Source or View Source.

Float the Menu

To set up the columns, we need to remember the cardinal rules of floats.

First, the floated content must go first in the HTML.

Second, the floated content must have a width.

If we don’t give a width to the #menu DIV, then it will take up the whole width of the containing element (the browser, in this case) and the float won’t appear to work.

Make a style for #menu. Add “float:left” to it. Give it a width of 120px for now. Test the page. It should look like this.

It may look like the float hasn’t worked, but it has. The trouble is, however, that there’s no content after the floated element, so nothing comes up beside it.To fix that, in the XHTML move the #menu DIV up ahead of the #content DIV (but after the <H1> that’s serving as our banner). The page will now look like this.

Style the #content DIV

Now make a style for #content. First of all, set a margin value of “0 15% 10px 130px”. This CSS shorthand specifies, in order, margin-top, margin-right, margin-bottom, and margin-left. To remember the order, use a mnemonic ofTRouBLe.

The page should now look like this.

There’s our layout taken care of.The rest is tweaking.

Style the Rest of the Document

To understand the remaining tweeks to the document, go to the completed version and choose “View < Page Source.” I’ve consolidated some styles and heavily commented the rest of them to explain what I’ve done to finish the exercise.If you have any questions, get in touch and I’ll try to answer any question you toss my way.


One thought on “TubeWorld Layout Recipe

  1. Pingback: Publishing: Electronic Communications « wrmf.ca

Comments are closed.