Steps for Designing the Page Template

1. Overview of the Layout Editor

2. Page Layout Properties

3. Choose a Column Layout

4. Setting the Page Properties

5. Page Border and Background Colors

6. Saving Your Changes

7. Editing Page Elements

8. Types of Page Elements

9. Element Properties

10. Summary of Page Elements and Properties

Overview of the Layout Editor
The Layout Editor gives you an opportunity to customize the look-and-feel of your newsletter and change content display options. Each page template contains one or more page elements. These templates and elements are used to format each new issue of your newsletter. Ideally setup of your templates is only done once when publishing your first newsletter. Subsequent issues will then use these templates and elements, filling new content into the pages you have designed. Each time you publish, you simply add articles to the content database, preview the result, and click 'Post to the Web'.

NOTE: Changes you make in the Layout Editor will impact all unpublished issues of your newsletter. A newsletter issue that has previously been "Posted to the Web" will not be affected unless you re-post that issue. If you want to make changes only to articles and content without impacting the layout, go to the Articles area from the Main Menu.

Page Templates 
Each page template represents a different kind of page. The template is comprised of several layout sections (e.g., header, columns, footer) and each section can hold one or more page elements.

When you create your newsletter for the first time, you can select one of three general layouts. Once the newsletter is created you can specify additional layout options.

There are 5 different built-in page templates. The most commonly used are: Cover Page, Topic Page, and Article Page:

Cover Page
Every newsletter has a Cover Page. This page usually contains a table of contents, a topic list, one or more article synopses, a survey area, and a subscription box. The cover page is viewed when a reader first sees your newsletter, either on the Web or in their email. 

Elements within specific regions of this page often appear as default elements within the regions of the other page templates. For example, the Page Header element appearing in the top region will automatically appear on all other pages in the newsletter. This is because the top region on each inside page defaults to the layout found on the cover page. See "How the Pages Work Together - Empty Regions and Default Pages" below for more details.

Topic Page
When a topic name on the Topic List is clicked, an associated topic page is displayed. If a custom layout for this specific topic is not defined, then the Topic Page template is used to determine the page layout. See "Custom Page Templates" below for more information.

Article Page
When you click the [Full Story] link on an article synopsis, the complete text of the article is displayed on the Article Page. The Article Page layout is the same for all articles. You do not define a separate layout for each article - just one layout that will be applied to all articles.

Additional Templates: Letter View, Login 
These templates control the look and feel of pages that display letters associated with particular articles and the design of the login prompt (if your newsletter is password protected).

Custom Page Templates
While the layout for each full article is determined by the Article Page, the layout of each topic section can be individually controlled through Custom Page Templates. These templates are tied to the topic areas you have defined. There is one custom template for each topic. If there are no page elements defined for a particular topic, the Topic Page template will be used as the default.

Layout Regions
Each Page Template is divided into specific regions. The number and orientation of regions depends on the page layout selected when the newsletter was first created or modified through the Page Layout properties. The common regions are: header, footer, navigation column, and content column. The header and footer regions are separated from the others through a red separator line. The number of columns available depends on the type of layout that you selected - one, two, or three columns.

How the Pages Work Together - Empty Regions and Default Pages
In order to operate in the most automatic fashion and to reduce time spent configuring layout options, this newsletter layout system uses several methods to determine page design. One key principal to remember is that for any page template other than the Cover Page, an empty region of the page template will display elements from the corresponding region on a specific default page. For example, the header region on the Article Page is empty and the default for this page is the Cover Page. So in this case, the system looks at the header region of the Cover Page and displays the elements it contains on the Article Page. In a sense, the header region on the Article page is transparent and lets elements from the Cover Page show through.

Custom Template design can be a bit more complicated. The default page of a Custom Page Template is the Topic Page. In addition, the default page of the Topic Page is the Cover Page. So, an empty region on a Custom Page template will display elements on the corresponding region on the Topic Page. If that region on the topic page is also empty (i.e., does not contain any elements), then the elements from the Cover Page will show through.

Page Elements
There are many different page elements which can be embedded within a newsletter page. These elements include: multiple article, single article, multiple survey, topic list, article list, picture, subscription box, page header, page footer, and more.

Moving Elements - Elements can be moved from one location on the page to another by clicking the positioning tools at the bottom of each page element ().

Adding New Page Elements  - To add a new element, click the   button appearing within the layout section where the element should be located. If there are already elements in this section, you can place the new element either above or below existing elements by clicking the appropriate   button. You will then be asked what type of Page Element you would like to add to the page and to define its properties.

Modifying  Elements  - The display and behavior of existing page elements can be changed by clicking the  button at the top of the element.

Deleting Elements  - To remove a page element from the template, click the delete action () located at the bottom of the page element.

Page and Element Properties
The appearance and function of the page template and the page elements it contains is determined by setting properties. For example, properties such as background color and border width can be set. Along with the standard display properties, each page element has its own set of unique properties. The properties of the page are modified by clicking the  button at the top of the page in Layout mode. To change the properties of any page element, click the  button at the top of the element.

Page Layout Properties
To get to the Page Layout properties, from the Main Menu select  > (at the top).

The Page Layout properties are separated into the following categories: 

• Column Layout
• Page Properties
• Border and Colors

Choosing a Column Layout

You have a choice of four general layout styles. All four come with a title banner on the top.

COLUMN LAYOUT 3 Columns 2 Columns 2 Columns 1 Column

A three column layout typically contains content, surveys, links, and other short tidbits of information on the left and right sides with the middle containing the bulk of the content, the articles. The two column layouts contain the links and surveys in the smaller column with the content in the larger box. To select a layout, choose the radio button to the left of the icon.

Changing Existing Layouts
If you change the number of columns on an existing layout, it is likely you will need to fix the arrangement of several layout elements. Some elements may disappear from the layout and others may appear in the footer. To fix this you can move these elements around and add new ones. To avoid having certain elements disappear when reducing the number of columns, try moving them to the first column before changing the layout.

Using Different Layout Styles in the Same Newsletter
It is possible to mix different layout styles. For example, you can have a three column style for the Cover Page and a two column style for the Article Page. When configuring this type of layout, note that the behavior of empty regions becomes more complex. In general, an empty region on the Article Page will inherit the page elements that appear in this same region on the Cover Page. Since, in this case, the number of regions within the Article Page and the Cover Page do not match, the Cover Page region used is determined by counting the number of regions starting at the top and moving across from left to right. The header is region 1, the first column is region 2, etc. To make it easier, simply add the appropriate elements to all regions on the Article Page and avoid using empty regions.  

Column Properties
Once the general layout style has been selected you can modify it using the Column Properties. This screen lets you modify the relative width of the columns in relation to the page width and it allows the color of headings, columns, and column dividers to be specified.

To access this screen, click the Column Properties button.

Colors
To select the color of a particular region, click the [CHOOSE COLOR...] link next to the corresponding input box. Or, if you know the hexadecimal color code, type it into the box. To see how the selected color will appear on the layout sample, click the Preview button.

Using this method you can select the color of the Title region, columns, Footer region, and the Column Divider.

Adjusting Column Widths
To change the width of a column, enter a number between 1 and 99 which represents the relative width of that column in relation to the overall width of the page. The number is used as a percentage and it must be whole number with no decimal fractions. When you change the value in one column you will need to adjust the values in the other columns so that they all total 100%. Use the Preview button to check your work.

The Column Divider
By default, a thin vertical line appears between each column in the layout. The color of this line can be changed or it can be removed entirely by unchecking the Show checkbox.

Setting the Page Properties

Page properties determine the width and positioning of the newsletter page and the page color. These settings can be applied to the current page template or they can be applied to all of the page templates at the same time when you click the Save button.

Setting the Page Width
The default width of all page templates is 650 pixels. This width was selected because it allows the page to fit well when it appears within most email programs and the most common screen resolution settings. However, different page designs may require the page width to be changed to accomodate the graphics and content being displayed. It is also possible to make the page width adjustable as a percentage of the window size. For example, to have the newsletter automatically fill the entire width of the browser or email window, set the width to 100 percent. To add spacing around the left and right side of the page, set the page width to 80 or 90 percent.

Page Alignment
The page alignment allows you to adjust the general position of the newsletter page with respect to the window in which it is displayed. For example, to have the layout align itself with left edge, choose Left Alignment. To have the page display down from the center of the window, choose Center Alignment.

Page Color
To specify the page color, click the [CHOOSE COLOR...] link next to the color box. Or, if you know the hexadecimal color code, type it into the box. The page color is the color used within the borders of the newsletter. The default is #FFFFFF (white). To set the color outside the newsletter border, specify the Background Color (see below).

Applying Settings to All Pages
By default, the page layout properties set here will be applied to only the page template you are currently editing. To have these setting apply to all of the template pages in your account, check the box next to "Apply these settings to all template pages" before you click the Save button.

[ Return to Top]

Page Border and Background Colors

The newsletter page within the browser or email window can have a border to let it standout from the background. By default the newsletter page is outlined with a thin (1 pixel) black line. The thickness of this line and its color can be specified using the Border Width and Border Color settings. To specify the Border Color, click the [CHOOSE COLOR...] link next to the color box. Or, if you know the hexadecimal color code, type it into the box.

The background color is the color that surrounds the newsletter page and fills the window to its edges. The default background color is a light grey. To specify the Background Color, click the [CHOOSE COLOR...] link next to the color box. Or, if you know the hexadecimal color code, type it into the box.

TIP: If you leave both the page color and the border color empty, the background color will show through to the entire page.

Saving Your Changes

When you are finished editing the Page Properties, click the Save button at the lower left of the window. This will take you back to the Layout Editor. Your changes will be applied to the page that is shown. If you are satisfied with your changes and would like to save them and publish them, click the button at the top.

[ Return to Top]

Editing Page Elements

Page elements define what content appears on the page and the location and style used to present it. Page elements are added, removed, and/or modified using the Layout Editor. To get to the Layout Editor, select  from the Main Menu. Your newsletter appears in the Layout Editor much like it appears in preview mode, except small buttons and edge markers are sprinkled throughout the page. Below is an example showing a simple Default Layout as it would appear in the Layout Editor.

PAGE: [Cover Page] [Topic Page] [Article Page] [Letter Page] [Login Page] News Events People ISSUE: Issue 1

Page Heading My Newsletter   Friday, September 28, 2001 VOLUME 1 ISSUE 1   Home Link Topic List Note: Clicking on the beneath Home Link in the above default example will remove it from the layout and the  Topic List element below will move up and take its place. Article List CONTENTS Multiple Article Note: The default layout has three columns - left column, main column, and right column with a page header (top part of the newsletter) and page footer (bottom of the newsletter). The left column contains the Home Link, Topic List, and Article List. The content, middle column, contains the articles. The right column holds Subscription, Multiple Survey, and Issue Archive. The header (at top of the newsletter), contains the newsletter title that you entered, date, issue number, and volume / issue number. The page footer, bottom, has the copyright information and Tell A Friend link. Subscription SUBSCRIBE Enter your email address in the box below to receive an email each time we post a new issue of our newsletter:  Add  Remove  Send as HTML     Multiple Survey Issue Archive Page Footer Published by MyCompany Copyright © 2003 MyCompany. All rights reserved.   TELL A FRIEND

[ Return to Top]

Editing Element Properties
The edges () indicate the four corners of each Page Element. Along the top of each element you will also find a text label indicating the type of element you are looking at (e.g., Article List, Subscription, etc.) and an button that let's you modify the element properties. Whenever you need to change the look-and-feel or behavior of a page element, click on the button along its top edge.

Moving Elements
Along the bottom edge of each page element you will find directional buttons () that allow the element to be moved around the page from region to region and column to column. Press the up arrow to move up within a column. If you are at the top of the column, press the up arrow to move the element into the Header region. The down arrow operates in a similar manner and the left and right arrows let you move between columns.

Deleting Elements
The bottom edge of the element also contains the delete button (). Click this button to remove the element from the page.

Adding New Elements
To add a new page element, click the button that is closest to the location where you would like it to appear. To insert a new page element between two elements, click the button that occurs between them. To add a new page element to the end of a column, click the button appearing at the end of the column.

[ Return to Top]

Types of Page Elements

A page consists of regions that may contain one or more page elements. As previously stated, the default left column contains Home Link, Topic List, and Article List. An empty section with nothing in it will display the same information in the same location on the default layout. For example, if the Article Page's left column is empty, then it will show the same information found on the Cover Page's left column. If you prefer nothing to show  in the left column of the Article Page, then select Empty Region from the Page Element list.

There are many different Page Elements that can be inserted into a newsletter page. These elements include: multiple article, single article, multiple survey, topic list, article list, picture, subscription box, page header, page footer, and more. Whenever you click to insert a new item, you'll get the following list of Page Elements: 

NEW PAGE ELEMENT

Choose a Page Element Here are the different types of page elements that can be placed within sections of your layout. Each element is designed to display certain types of information and/or add a specific type of functionality to your newsletter. The display and behavior of each element is determined by its settings. You can specify an element's settings at the time it is created and can always edit these settings later through the layout editor. The behavior of some of these elements will vary depending upon the type of page on which they are placed. Click an element name to select it. Single Article Use this element to display the contents of a single article. This element is found by default on the Article Page where it is configured to display the full body of the current article. You can also use this element to locate a specific article at a specific location on a page. NOTE: If you use this element to display a specific article that is part of a specific issue, the article will not appear in subsequent issues but the page element will still be in your layout. It is often better to use the Single Article layout to show articles configured to appear in All Issues and use the Multiple Article element to show and hide articles automatically from one issue to the next. Multiple Article This element automatically displays one or more articles on the page. It uses its settings to determine what articles to show. For example, you can specify the minimum position rating needed, the display order, and you can restrict the selection by topic. Single Survey Multiple Survey Use these elements to display one or more surveys. Choose different formatting options and specify the order, number, and topic of the surveys displayed. Topic List This allows articles and other material to be selected by topic area. Article List This provides a table of contents for your newsletter. Home Link The Home Link allows readers to easily return to the cover page from any page within your newsletter. Letter Summary Letter View Letter Entry These elements provide a feedback mechanism. Use them to collect and display letters that are submitted by readers in response to a particular article. Picture Display only the picture that is associated with a particular article. Subscription Box Allow readers to easily subscribe and unsubscribe to your newsletter by supplying their email address to this element. Optionally allow them to specify the email format that they prefer (plain text or HTML). Issue Archive The issue archive displays a list of previously published newsletter issues and allows the reader to access them. Page Header This element usually appears at the top of the newsletter and contains your logo, title, sub-title, and other information. Page Footer This element usually appears at the bottom of the newsletter and contains publisher and copyright information, an archive link, and the "Tell a Friend" feature. Custom HTML (Empty Element) Use the Empty Region element to leave a column or section of your newsletter blank. This will prevent default elements from the cover page and other default pages from appearing within a section of your layout. This element can also be used to place any HTML within your newsletter layout without including the functionality found in all of the other page elements. Flash Animation Add a Macromedia Flash movie to your newsletter. This element will play any flash movie that has been uploaded to your account. CANCEL

[ Return to Top]

Element Properties
When you select a Page Element, the next step is to complete the Element Properties screen. Each element has property settings that are unique to it and other properties that it shares in common with other elements. Element Properties control both the behavior of the element and how it looks. Each element is designed to display certain types of information and/or add a specific type of functionality to your newsletter. You can specify an element's properties at the time it is created and can always edit these settings later through the Layout Editor. The behavior of some of page elements will vary depending upon the type of page on which they are placed.

Here is the list of Common Properties (applicable to all Page Elements):

Text Styles - This area lets you define the font styles for any portion of text appearing within the page element. The actual number of items represented here varies from one element to the next depending upon the number of different text prompts within the element. To change the font for an item, click the EDIT button that appears to the right on each row. This will open the Style Editor. For more information, see the "Style Editor" section below.

Heading Text - This text appears at the top of the page element. By default, this is white text within a black bar. Using the Style Editor you can change this bar to another color and change the text color as well.

Border and Colors - An element can be surrounded by a border. To display the border, select a page width of 1 or greater. By default the color of the border will be black. To change the border color, click the [CHOOSE COLOR...] link or enter the hexadecimal representation of the number in the edit box.

Background Color - To add color to your page element, select a background color. This will fill the entire element with the color you select.

Foreground Color - The foreground color is used when a page element displays two or more items. In these cases the foreground and background colors will alternate creating a striped pattern. This makes it easier to distinguish where one item begins and the other ends. If both the foreground color and background color match, no alternating pattern will be visible.

Advanced Settings - The Advanced section provides a way to introduce any text or HTML formatting around the page element. The HTML formatting can be placed Before or After the element (in the Before or After edit boxes), and will appear outside the border and heading bar. Some page elements also include an Inbetween box that will show any text or HTML formatting inbetween each item shown by the page element. To help create the content that appears in these boxes a link to the online HTML editor is provided. To open the editor, click Use Editor... underneath the box containing the text you want to modify.

Display Rule - The Display Rule within a page element allows you to use specific criteria to determine if the page element is shown to a particular subscriber. Clicking the Edit Display Rule... button opens the Rule Editor window. The Display Rule is a TRUE/FALSE statement that determines whether or not this page element is displayed for a particular subscriber. The statement compares the values of one or more fields in the subscriber record. If the complete statement is TRUE, the element is displayed. For example, if the statement is 'STATE EQUAL TO MA AND CITY EQUAL TO BOSTON', then only subscribers who are from Boston, Massachusetts will see the contents of this element.

ADVANCED If you would like to place any text or HTML before or after this section, please enter it in the boxes below: Before: After:

[ Return to Top]

The Style Editor
The Style Editor defines the font and color properties of the various text prompts within the page element. Next to the description of each prompt there is an EDIT button. Clicking this button will open a new window containing the Style Editor.

There are two major parts to the Style Editor window: color properties and font properties.

Color Properties
This is mainly the color of the font and in some cases defines the color of the background.

Font Color - Enter the hexadecimal code representing the color you would like to use or click [CHOOSE COLOR...] to open the Color Picker window.

Background Color - Enter the hexadecimal code representing the color you would like to use or click [CHOOSE COLOR...] to open the Color Picker window. This color will appear behind the text like the way the default Heading Bar appears.

Font Properties
The typeface and size of the text is determined through the font properties. The following font properties can be specified:

Font - this is the name of the typeface used to display the text: Arial, Courier, Times New Roman, Verdana, Tahoma

Font Size - this is the size of the text in points.

Bold, Italic - Use bold and italic formatting to highlight text and make it more readible.

Decoration - Additional text formatting such as "underline".

Alignment - this is the alignment of the text within the default heading bar: left, center, right

Color Properties: Font Color: [CHOOSE COLOR...] Background Color: [CHOOSE COLOR...] Font Properties: Font: Arial Courier Times New Roman Verdana Tahoma Font Size: 1 - xx small 2 - x small 3 - small 4 - medium 5 - large 6 - x large 7 - xx large Bold: Italic: Text Decoration: none underline overline line through Text Alignment: left center right

[ Return to Top]

Summary of Page Elements and Properties
In addition to the common properties, there are many additional properties and settings which apply to each page element. Below you will find a listing of each page element and its properties.

List of Page Elements

Single Article Multiple Article Single Survey Multiple Survey Topic List Article List Home Link Letter Summary Letter View Letter Entry

Picture Subscription Box Issue Archive Page Header Page Footer Custom HTML (Empty Element)

Single Article
Use this element to display the contents of a single article. This element is found by default on the Article Page where it is configured to display the full body of the current article. You can also use this element to locate a specific article at a specific location on a page. Before adding a Single Article element to the page template, first consider whether it would be better to use a Multiple Article element instead. Generally, a Single Article element is good for placing a specific article at a specific location in every issue of your newsletter. If you need to change the article, you would need to edit this setting and do so every time you publish a new issue. If you plan to have the same type of content, but different articles appearing within a region of the page it is best to use the Multiple Article element.  

NOTE: If you use this element to display a specific article that is part of a specific issue, the article will not appear in subsequent issues but the page element will still be in your layout. It is often better to use the Single Article layout to show articles configured to appear in ALL ISSUES and use the Multiple Article element to show and hide articles automatically from one issue to the next.

Single Article Properties:

Article Assignment - select the Article to which this element is to be assigned. Select [AUTO] only if this element is on the Article Page template. The [AUTO] setting is a special feature that causes the content of the Single Article element to be determined by the link from which the reader originates.

Display Attributes - check the boxes of the items you wish to display with the article: date, title, sub-title, author name, and Web address. From the Article Display Mode drop-down list, indicate how you want the article displayed on the page: Synopsis, Full Article, or Title Only.

Date Format - If you have chosen to display the article date, the Date Format prompt lets you determine how the date information will appear. There are several pre-defined date formats to choose from. Each format is illustrated by using today's date (however this is not the actual date that will be shown).  If none of the pre-defined formats fit your needs, you can create a custom format of your own. To define a custom format, select the "Custom Format:" option from the Date Format list. To the right of this list a new edit box will appear to allow for the entry of a date format string. The date format string is a series of special character codes that represent day, month, and year information. A summary of valid format codes is shown below:

Format Code	Displays
d	Day of the month as digits with no leading zero for single-digit days.
dd	Day of the month as digits with a leading zero for single-digit days.
ddd	Day of the week as a three-letter abbreviation.
dddd	Day of the week as its full name.
m	Month as digits with no leading zero for single-digit months.
mm	Month as digits with a leading zero for single-digit months.
mmm	Month as a three-letter abbreviation.
mmmm	Month as its full name.
y	Year as last two digits with no leading zero for years less than 2010.
yy	Year as last two digits with a leading zero for years less than 2010.
yyyy	Year represented by four digits.

Linking Information - This section determines what happens with the hyperlinks that are generated for this article. There are two types of links which can be configured here: Full Story and Printer Friendly Version. The Full Story link has adjustable text and can be configured to point to the Article Page (the default), to another template page, to another location on the same page, or to the Web address assigned to the article. To prevent the Full Story link from appearing, set the Text Label to blank. To place the hyperlink on the article title instead of or in addition to the Full Story link, select YES next to the "Hyperlink on article title?" prompt.

Picture Display Options - select the checkbox if you wish to display any picture associated with the article and enter the width and/or height the picture should be scaled to fit. You can determine the original dimensions of the image by opening the picture in your Web browser and viewing its properties. The "Position picture at:" prompt gives you choices of where you want to place the picture relative to the article text. NOTE: Specify only one dimension to allow the picture to be re-sized proportionally and prevent distortion.