Example of Image-Based Unit Front Page

Front Page Guide

• Sample Unit Front Page
• HTML Source for Sample Unit Front Page
• Style Sheet for Sample Unit Front Page

1. Make a separate "Site Settings" file for this one page. Most of the pages in your site will likely use a navigation column, which is missing in this sample page. To make a page without a nav column, all you need to do is leave out the "mynavigation" setting in the Settings file. Since you'll want to keep your nav column for your other pages, you should make a special Settings file for this one Front Page. Just make a copy of your existing Site Settings file, name it something else, and remove the line with the "mynavigation" setting.
2. If you don't already have one, make a Style Sheet for your site (or just for this page) and add a "mycss" setting to the Settings file for your Front Page. You'll use that style sheet to configure the layout of the text and image elements in your Front Page.
3. The sample Front Page uses one big DIV block with a 760x400 pixel background image. Inside that main DIV block are the smaller blocks which mark off the content areas within. If you're not familiar with CSS design, this may sound confusing now, but we'll get to source code examples soon.
4. The easiest way to implement the blocked-off regions in the Front Page was to create a single image with the lines drawn in, and then to use CSS to dictate where the text would appear. You could chop the image up into pieces and re-assemble them in HTML, but it's more complicated that way, and more prone to difficulties with different browsers and computers rendering different versions of the page. Using the single image as a background image, if one browser shifts the text content a pixel or two left or right, the user will never notice the difference.

Background Image

• Download the Photoshop file (2.7 MB)
• Important: The text "KU Unit Logo" is merely a placeholder. You should use an official unit logo in its place. DO NOT simply edit the text in this sample to create your own logo. For information about obtaining a sanctioned logo for your unit, see KU's Visual Identity site.
• The image is 760 pixels wide by 400 pixels tall.
• Using multiple layers and guides made it easy to mark off the different regions of the image.
• The blurred layer is a copy of the background layer, with a Gaussian Blur filter applied using a pixel radius of 8.0.
• The lightened portions are made using a layer of solid white overlaid with "Blending" set to "Screen", and an opacity of 45%.
• Layer masks were used to block off which portions of each different layer get exposed.
• Finally, the white lines were made with the Pencil tool at 1 pixel. Holding the Shift key down while drawing forces the pencil to make a straight horizontal or vertical line. Each line was drawn in its own layer, and the Move tool was used to slide it until it snapped into position on one of the guides.

HTML and CSS

<!--#include virtual="/site/how/sample/ssi/splash_header.shtml" -->
<div id="splash">
	<div id="splash_left"></div>
	<div id="splash_center">
		<div id="splash_center_top">
		
		</div>
		<div id="splash_center_middle">
		
		</div>
		<div id="splash_center_bottom">
		
		</div>
	</div>
	<div id="splash_right">
	
	</div>
</div>
<!--#include virtual="/~http/ssi/footer_ku.shtml" -->

1. Header Include
   Note the Server-Side Include directive at the top references a special "splash_header.shtml" file, a separate header used just for this one page. That header is missing any reference to a navigation file, and includes a reference to the CSS file needed by the sample page.
2. <div id="splash">
   This is the "outer DIV" or "containing DIV". Notice that it begins at the top of the file, and is closed at the end of the file. All the other DIVs are contained within it. This constrains the inner DIVs within the boundaries of the outer DIV. This outer DIV is where the background image is applied, and the style sheet instructs the browser that this block should be the same pixel dimensions as the image itself.

   #splash {
     width:             760px;
     height:            400px;
     background-image:  url("/site/how/sample/images/splash_background.jpg");
     background-repeat: no-repeat;
     padding:           0;
     margin:            0;
   }
   

3. Content Layout
   The page is blocked off much the same way as the lines are drawn in the image. There is a three-column layout, and the center column is further broken up into a few smaller blocks. For those unfamiliar with CSS, it's important to keep in mind that, by default, a DIV block will span the full width of its containing block. In order to make narrow DIVs which display side-by-side, the style sheet needs to specify that they "float". A full description of how Floats work is beyond the scope of this document, but the definitive reference can be found at w3.org's CSS2 reference guide.
   
   For the time being, suffice it to say that there are three DIV IDs defined in the code: splash_left, splash_center, and splash_right. Each is configured to "float: left;", and is given a specific width. The width value is important: If the columns are too wide, the browser will see that the third column doesn't have room to fit within the "splash" DIV, and will bump it down below the other two, breaking the layout of the page. In our case, the boundaries of these inner DIVs are invisible, so it's safest to make them a bit too narrow. Nobody will ever know or care that they don't line up exactly with the outer edges of the background image.
   
   Hint: If your text content is showing up in unexpected places on your page, you may have a hard time diagnosing where you went wrong. One helpful technique is to add a line like this to the uncooperative DIV in your style sheet:

   border: 1px solid red;

   Refresh your page and you'll see exactly where your browser thinks the DIV should go. If your page is complicated, you can outline different DIVs in different colors. It's easy to remove the "border:" style directives after you've fixed the problem.
4. <div id="splash_left">
   If this DIV looks like it's empty, that's because it is. Since the logo is built into the background image, the only reason for having it here is to use it as a placeholder for the blank region in the left column of the page. The same effect could also be accomplished with a large "margin" or "padding" value for the middle column instead (making it a 2-column layout with a big blank buffer zone at the left side of the left column). Either option is equally good. Here is the style sheet portion relating to "splash_left":

   #splash_left {
     width:   322px;
     height:  400px;
     float:   left;
   }
   

5. <div id="splash_center">
   This DIV is the one which contains even more DIVs for the vertically-stacked blocks in the center column. Because all the text content is contained within those nested DIVs, this DIV doesn't have anything else to it. It's just here to mark off the column. We'll get to the nested DIVs a little later.

   #splash_center {
     width:         266px;
     height:        400px;
     float:         left;
     padding-left:  24px;
   }
   

   One extra style directive in the "splash_center" DIV is the "padding-left" value. This could easily be applied to the nested DIVs instead, but then we'd have to repeat the style directive in each of those nested DIVs. Then, if we want to change it, we have to remember to change all the copies of it. It's easier to define the padding-left value once, here, and then we can assume that all the nested DIVs will line up nicely along the same vertical, and we can easily adjust the padding-left for all three just by changing this one number.
6. <div id="splash_right">
   This is the first DIV we've used that will actually contain some text content, so there are some extra style directives used to specify exactly where the text should be and how it should look. The new style directives are explained in the comments below:

   #splash_right {
     width:         126px;
     height:        244px;
     float:         left;
     margin-top:    156px;  /* Start the text 156 pixels down from the top edge     */
     padding-left:  20px;   /* Start the text 20 pixels in from the left edge       */
     font-weight:   bold;   /* Make all text in this DIV boldfaced for readability  */
   }
   

7. Center Column
   Remember, unless a DIV is told to float, it will take up the whole "line", or span the width of its containing block. Therefore, it's easy to stack DIVs up vertically - that's what they're set up to do by default anyway. The center column is made up of three DIVs, each of which uses style directives to position the text vertically within the column region.
   
   You may wonder why the vertical margins for these DIVs are so large. The reason is that when browsers display the DIVs, they will usually ignore the "height" value unless there's actual content taking up the full height of the DIV. In other words, browsers will usually overlap the empty vertical spaces in DIVs. The easiest way to control this behavior reliably for the various web browsers is to use the margin value since browsers will rarely, if ever, make margins overlap each other.
8. <div id="splash_center_top">
   This block is given an exaggerated height value to account for the empty block in the background image (the nested image in the center).

   #splash_center_top {
     height:          160px;
     margin-top:      60px;
     color:           #ffffff;    /* Set the text color to white                      */
     font-size:       1.1em;      /* Increase font size by 10%                        */
     text-transform:  uppercase;  /* Force all text content in this DIV to uppercase  */
     margin-bottom:   10px;
   }
   

9. <div id="splash_center_middle">
   Nothing fancy here, just adjust the display settings for the text within.

   #splash_center_middle {
     height:       124px;
     color:        #000000 ! important;
     font-size:    1.0em;
     font-weight:  bold;
   }
   

10. <div id="splash_center_bottom">
    Same with the bottom DIV - just adjust the text display settings.

    #splash_center_bottom {
      height:       24px;
      color:        #000000 ! important;
      font-size:    1.0em;
      font-weight:  bold;
    }
    

Experiment