Template Layout Guidelines

This page shows how images should be placed in the template using image classes "pic_right" and "pic_left" and paragraph classes "caption" and "captionNoPad." Typical table coding examples are also provided.

• Template Description
• Table Layout Guideline
• Layout Options

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Code for image at right is <img class="pic_right" ...>. Class applies 10px left-padding and float:right.

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Code for image at left is <img class="pic_left" ...>. Class applies 10px right-padding and float:left.

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.

This is a p class=caption which uses blue Arial font and inserts 10px padding at the left. Table width must be set to be 10px wider than the image. Image is align-right. Table is float:right, cellspacing=0,  cellpadding=0, border=0.

Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.

Example at right is for an image requiring a caption >

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.

Example below is for a large image needing a caption.

This is a p class=captionNoPad. Use for captions on wide photos where no left padding is desired. Large images should be kept to a width of no greater than 500 pixels to accommodate people who may still be using smaller monitors.

Table Layout Guidelines

Usually, we do not specify a width so that it expands to fill the page. However, specifying a width for a table with only two columns is fine as long as the table width does not exceed the allowable column width (500 pixels) of the 2-column template. Specifying a fixed table width can help keep things from getting too spaced out on a big monitor.

• Using Microsoft SharePoint Designer
• Using Microsoft FrontPage (all versions)

Using Microsoft SharePoint Designer

SharePoint Designer likes to automatically setup individual embedded styles to control how tables will look on a web page. These styles have very generic names like (style1, style2, style3...). All embedded styles will be placed in the <head></head> section of your web page.

• .style1 - This style controls the outer table border color.
• .style1 - This style controls the inner table border color.
• .style3 - This style controls the upper table header parameters.

Note: If you decide to manually create these styles, you should not set any parameters using the table properties window. If you do, SharePoint will auto generate new styles with generic names and will not put them in your existing manually created styles.

Outer Table Setup
We typically set the following table properties, see the image below:

  - Cell Padding = 5
  - Cell Spacing = 0
  - Borders [Size: 1, Color: #C0C0C0 or Silver, Collapse Table Border: Checked]
  - For this example we will not specify a fixed table width
  - All other property settings are using the default parameters

Code Example: <table cellpadding="5" cellspacing="0" id="table4" class="style1"> 

Internal Table Borders:
We typically set the following internal cell border properties to [#F4F4F4], see the image below:

  - Borders [Size: 1, Color: #C0C0C0 or Silver]
  - All other property settings are using the default parameters 

Code Example: <td class="style2"> 

Table Header Setup:
We typically set the following cell properties for the table header, see below. Column header text are typically bold and the cell background is usually set to [#F4F4F4]. Column text can either be left-justified (default setting) or centered.

  - Horizontal Alignment = Default (left-justified) or Center
  - Inner Borders [Color: #C0C0C0 or Silver, 1 px]
  - Background [Color: #F4F4F4]
  - All other property settings are using the default parameters

Code Example: <td class="style3">  

Below is an example on how the auto generated style code will look in the web page <head></head> section.

<head>
 <style type="text/css">
.style1 {
border-collapse: collapse;
border: 1px solid #C0C0C0;
}

Designer Note:
To make sure the entire external border looks uniform and has same color (gray) all around, manually set the "border" attribute as shown above. When SharePoint Designer sets these attributes automatically, the top and left borders will look lighter in color when displayed in the browser. It will however look correct when displayed in the editor. This happens because it does not set the actual color attribute (#C0C0C0) for the top and left borders.

See the example below -- this is how SharePoint Designer will automatically set the external border attributes...

.style1 {
border-collapse: collapse;
border-left-style: solid;
border-left-width: 1px;
border-right: 1px solid #C0C0C0;
border-top-style: solid;
border-top-width: 1px;
border-bottom: 1px solid #C0C0C0;
}

.style2 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.style3 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #F4F4F4;
}
</style>
</head>

Table Example - Using the above property settings

Using Microsoft FrontPage (all versions)

Table Setup:
We typically set the following table properties, see the image below:

  - Cell Padding = 5
  - Cell Spacing = 0
  - Borders [Size: 1, Color: #C0C0C0 or Silver, Collapse Table Border: Checked]
  - For this example we will not specify a fixed table width
  - All other property settings are using the default parameters

Code Example:
<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#C0C0C0">


 

Table Header Setup - We typically set the following cell properties for the table header, see the image below. Column header text are typically bold and the cell background is usually set to [#F4F4F4]. Column text can either be left-justified (default setting) or centered.

  - Horizontal Alignment = Center
  - Borders [Color: #C0C0C0 or Silver, Collapse ] - Set automatically from the "Table Properties" window.
  - Background [Color: #F4F4F4]
  - All other property settings are using the default parameters

Table Example - Using the above property settings

Last Modified: April 6, 2009

One of ten national laboratories overseen and primarily funded by the Office of Science of the U.S. Department of Energy (DOE), Brookhaven National Laboratory conducts research in the physical, biomedical, and environmental sciences, as well as in energy technologies and national security. Brookhaven Lab also builds and operates major scientific facilities available to university, industry and government researchers. Brookhaven is operated and managed for DOE's Office of Science by Brookhaven Science Associates, a limited-liability company founded by the Research Foundation for the State University of New York on behalf of Stony Brook University, the largest academic user of Laboratory facilities, and Battelle, a nonprofit, applied science and technology organization.

Privacy and Security Notice  | Contact Web Services for help