Cheat Sheet

Part 1: Main document

The source code of this website’s template has many comments nested within the HTML, such as <!--content div open--> <!--content div close-->. That's not an astonishing fact, but for those for those of us who work with Artisteer source files, it could save the day.

Artisteer’s HTML template has default content and navigation which is either edited or replaced. A WYSIWYG editor such as Dreamweaver might be a solution, and so is a text editor like EditPlus. Working with HTML source files does offer an advantage: learning the structure of your design template. On the flip side, we can easily break a template in a second by hacking the code and not closing or ommitting a <div> tag.

I’ll outline this website’s design template and show the comments’ relevance to the template’s structure. Keep in mind that the choices made when designing an Artisteer template do affect it’s HTML output, however, many elements of Artisteer templates are common.

Let’s start with the body and the “art-Sheet“. It will look something like this:

<body>
<!--Page Background-->
<div class="PageBackgroundSimpleGradient"></div>
<!--Main/art-Sheet div - Open-->
<div class="art-main">
<div class="art-Sheet">
<div class="art-Sheet-tl"></div>
<div class="art-Sheet-tr"></div>
<div class="art-Sheet-bl"></div>
<div class="art-Sheet-br"></div>
<div class="art-Sheet-tc"></div>
<div class="art-Sheet-bc"></div>
<div class="art-Sheet-cl"></div>
<div class="art-Sheet-cr"></div>
<div class="art-Sheet-cc"></div>
<!--Sheet-body div - Open-->
<div class="art-Sheet-body">

So what’s going on here?

  1. Call the page background.
  2. Set the ‘Main’ document structure (100% of the browser window).
  3. Set the ‘Sheet’ pixel width and position, which is typically center.
  4. Frame the ‘Sheet’, i.e., shadow images, borders, corners.
  5. Set the ‘Sheet’ body for the header, menu, content areas, and footer.

Tip:
A background image can be set within the “art-Sheet” of a website. While it could also be set in the main content area, I typically use the art-Sheet. You can modify Artisteer’s style sheet, and it will look something like this:

.art-Sheet
{
position:relative;
z-index:0;
margin:0 auto;
width: 900px;
min-width:35px;
min-height:35px;
background-image: url('images/your_background_image.png');
background-repeat: no-repeat;
background-position: center center;
}

Other important comments are <!--Main/art-Sheet div - Open--> and <!--art-Sheet-body div- Open-->. These tags remain open and are closed later in the document. I’ll show you where as we proceed.

Basically, that’s your beginning template’s HTML. We’ll now move into the header, followed by the navigation, main content, sidebar, footer, and page footer.

Share ShareClosePart 2: Header »