Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Build the Interface

VCB328 Advanced Web Design

Web Site (Part 5: Build the Interface)

After several weeks of planning and preparation, it's now time to start building the actual web pages. Since all pages within a site use the same format and have the same persistent elements (navigation, banner, footer, etc.), it's best to build one page first and then use it as a template for further pages.

There are a number of ways you could proceed; once upon a time I would have recommended taking your mock-up into ImageReady and slicing it up, then outputting it as a finished page in a table. Slick and easy, yes, but it creates a page that 1) is difficult to edit later and 2) is not very accessible. As a result I now strongly discourage my students from using this method.

Instead, we're going to build this site from scratch. If you've never used this approach before it can seem daunting at first; but once you've done it a few times you will see just how much better a technique it is.

Procedure

1. Analyze the make-up of your page. On a print-out of the mock-up or some other scrap of paper, use a pencil or pen to divide the page into separate sections. For example, most web pages contain a header, main navigation, main content, and a footer. Some web pages may have secondary navigation, utility navigation, breadcrumbs, advertising, search fields, and/or other kinds of sections. The approach we're using is to build the page out of component parts—like a jigsaw puzzle—so it's important to know how many parts we're working with and how they're to be laid out.
2. Open a new HTML page and lay-in your content block-by-block. Each block should be surrounded by an set of <div> tags with a unique ID name (for example, around the header you could put <div id-"header">....</div>. Proceed through the blocks in a logical order (e.g. banner, main navigation, sub-navigation, main content, footer).
• Images (like the logo and/or the banner) could be placed within the <div> blocks using the <img> tag or (my preference) applied to the <div> blocks as background images through the use of CSS (step 3).
• Text should simply be typed-in with no formatting at this point. Use <h1>, <h2>, etc. tags for all headings. Use <p> and <ul> and <ol> tags where appropriate.
• All navigation (even tabs or button bars) should be written as unordered lists surrounded by <div> tags. Give each navigation section its own ID ("mainNavigation," "subNavigation," "breadCrumbs," "utilities," etc.). The button/tab graphics should be added later with CSS.
3. Write CSS. With style sheets you can now format you page—position elements properly, add color, create multiple columns, etc. The use of <div> tags with IDs allows you to write styles that apply only to that one section, so you can have different backgrounds, colors, font styles, sizes, margins, padding, etc. in each of your blocks. Of course you can also write general styles that apply to all of the blocks too.
4. Write urls for your links. Even if the pages don't yet exist, determine the names that the pages-to-come will have, and put those names in the link urls.
5. Recommended: Create library items out of the persistent elements (banner, navigation, footer) or convert the page into a template (making sure you carefully designate those areas that will become editable regions).

Due: Beginning of class, week 7

Class schedule

Syllabus

Student resource index