What Is a Layout
A layout is a template for a landing page. When you create a landing page, you can choose to whether to use a layout, build from HTML, or revise an existing page. If you use a layout, you can use one of the quick layouts provided with the application or you can create your own.
NOTE: Once you create a landing page from a layout, the landing page will not reflect future changes to the layout.
You create a layout by using the microsite layouts workspace on the Content tab. When you pause your mouse pointer on the name of an existing layout, you see a thumbnail preview of that layout. You can click the name of an existing layout to edit it. You can create your own layout using HTML or with the layout editor.
Creating a Layout with HTML
When you create your own layout using HTML, you type or paste HTML into the application. You include content areas by clicking the Insert Content Area button or by typing @@ContentArea. You can place @@ContentArea in the HTML code anyplace where you could place a <table> tag.
Note: Because the application automatically inserts header and body tags, only insert the HTML code that is within your <body></body> tags into your layout.
Creating a Layout with the Layout Creator
The layout creator shows the content areas for your landing page as table cells. Tools in the editor set the physical layout and other properties of the landing page. These tools are available on the right-click menu and in the Content Properties and Page Properties section.
Right-Click Menu
You begin with a left-aligned table that contains three rows of two cells. The options on the right-click menu let you add, delete, and merge cells to create the content areas in the positions you want for your landing pages.
Click your right mouse button in a cell to see the following options:
- Insert Row Above - Inserts a row above the selected cell
- Insert Row Below - Inserts a row below the selected cell
- Delete Row - Deletes the row that contains the selected cell
- Insert Column Left - Inserts a column to the left of the selected cell
- Insert Column Right - Inserts a column to the right of the selected cell
- Delete Column - Deletes the column that contains the selected cell
- Merge Cells Right - Merges the selected cell with the cell to its immediate right to create a cell that spans two columns
- Merge Cells Down - Merges the selected cell with the cell immediately below it to create a cell that spans two rows
- Cell Properties - Displays the Cell Properties window where you can set the following properties for the selected cells.
The cell properties that you can control include:
- Width - Sets the width of the column that contains the selected cell. You enter a number and select % (the percentage of the width of the table as set in the Content Properties) or px (the absolute width in pixels).
- Height - Set the height of the row that contains the selected cells. You enter a number and select % (the percentage of the height of the table as set in the Content Properties) or px (the absolute height in pixels).
- Horizontal Alignment - Determines the horizontal alignment of the contents of the cell. You can choose Left, Right, Center, Justified.
- Vertical alignment - Determines the vertical alignment of the contents of the cell. You can choose Top, Bottom, Middle, Baseline (text in a row all appears on the same baseline. This is usually the same as "Bottom" but looks better if cells contain text with different size fonts).
- BGColor - sets the background color for the cell. This background color will appear on top of a background color that you set for the table in the Page Properties section. You can enter the hexadecimal code for the color, or click the box next to the field to display the color selector. You can use the color selector to choose from a palette of colors, enter the RGB values for the color, or enter the hexadecimal code for the color.
Content Properties and Page Properties
The Content Properties and Page Properties menus appear to the left of the layout. The values you set in these menus affect the entire layout, not just the selected cells.
Use the Content Properties menu for the following options:
- Use fixed table size checkbox - Determines whether the width and height of the layout is fixed at a certain size or adjusts itself relative to the size of the content of the landing page. If you set an absolute size for the layout and the content is too big for the size you set, scroll bars appear on the finished landing page.
If you select this checkbox, you can set the values in the Width and Height fields - Width - Determines the width of the layout, if you selected the Use fixed table size checkbox. You enter a number in the field and select % (percentage of the browser window) or px (the absolute width in pixels).
- Height - Determines the height of the layout, if you selected the Use fixed table size checkbox. You enter a number in the field and select % (percentage of the browser window) or px (the absolute height in pixels).
- Horz Align - Determines the horizontal position of the layout within the browser window. This does not affect the alignment of the text. You can choose:
- left - The layout is aligned along the left side of the page.
- right - The layout is aligned along the right side of the page.
- center - The layout is center aligned on the page.
- Cellpadding - Determines the amount of space that appears around the content of a cells in the layout.
- Cellspacing - Determines the amount of space that appears between the cells in the layout.
- Border Size - Determines the width and style of a border that appears around the cells in the layout. You enter a number that determines the width in pixels. Enter 0 to have no border.
You can also select the style. You can choose: - solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset
- Border Color - Determines the border color. You can enter the hexadecimal code for the color or click the box next to the field to display the color selector.
You can use the color selector to choose from a palette of colors, enter the RGB values for the color, or enter the hexadecimal code for the color. - BgColor - Determines the background color of the layout. This color appears in the space between the cells in the layout and on top of the page background color that you select in the Page Properties.
Use the Page Properties menu to control the page behind the layout content:
- Background - You can select an image file to be the background for your landing page. If you select a background image, it appears behind the layout.
If you use this field, you can choose how the image repeats using the Repeat field - Repeat - Determines how the image you selected in the Background field repeats. You can choose:
- repeat - The image repeats vertically and horizontally to fill the background.
- repeat-x - The image repeats only horizontally.
- repeat-y - The image repeats only vertically.
- no-repeat - The background image appears only once.
- BgColor - Determines the background color of the page behind the layout.
How to Create a Layout
Use the following steps to create a layout. After you complete this procedure, you can use the layout to create landing pages.
- Click the Content tab on the navigation bar.
- Click my microsite layouts.
- Click the Create button from the toolbar.
- Complete the information in the Properties section:
- Name - The name of the layout. You use this name to identify the layout in the application. Subscribers cannot see the name.
- Description - The description of the layout. You use this description to further help identify the layout within the application. Subscribers cannot see the description.
- Create in folder - The folder where the layout is stored.
- Complete the information in the Creation Method section and click Save:
- If you select Build Using Layout Creator, the Layout Editor tools appear when you click Save. See What Is a Layout for more information on these tools.
- If you select Build from HTML, an HTML editor window appears when you click Save. You type or paste HTML into the editor window. Click the Insert content area button to include content areas. Content areas can be inserted any place in the HTML code where a <table> tag could be inserted.
Note: Because the application automatically inserts header and body tags, only insert the HTML code that is within your <body></body> tags into your layout.
- After you create the layout, click Save.
This page was last updated on Fri, 31 Dec 2010 17:51:41 GMT.
You are not logged in. Log in 