|
|
Building a Page Layout
Page Layouts are used as a template to build web pages. Within each page layout are layout regions and content regions. Once created, content is added either through templates or pre-defined regions to content regions.
Page Layout Context Details
This is the area where HTML and CSS layout codes are inserted. It is not necessary to link CSS codes to the page in the HTML section.
All layouts must start with the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
The specific code forces all browsers into XHTML strict mode, which is required for the WYSIWYG Editor to work correctly; it does not affect the actual output).
*Note: HTML Tag Id’s cannot be named the same as region names, this causes WYSIWIG conflicts.
Example 1 (OK):
< div id="test" >
< region type="content" name="Main" />
Example 2 (NOT OK):
< div id="test" >
< region type="content" name="test" />
*Note: There are two types of regions, Content and Layout, all regions must be named uniquely to avoid WYSIWIG conflicts.
Example 1 (OK, all have unique names):
< region type="content" name="c1" />
< region type="content" name="c2" />
< region type="layout" name="Lay1" />
< region type="layout" name="Lay2" />
Example 2 (NOT OK, can’t have content and layout regions named the same):
< region type="content" name="c1" />
< region type="content" name="c2" />
< region type="layout" name="c1" />
< region type="layout" name="Lay2" />
Example 3 (NOT OK, can’t have 2 content regions with the same name, can’t have 2 layout regions with the same name):
< region type="content" name="c1" />
< region type="content" name="c1" />
< region type="layout" name="Lay1" />
< region type="layout" name="Lay1" />
Layout Regions
-
Two types of regions where content is added:
Layout Regions:
Areas where content is on a per-layout basis. This means any content added to a Layout Region will appear on all pages using that particular layout (Example: Page Navigation).
Content Regions:
Areas where content is on a per-page basis. This means that content added in these regions will be different on all pages (Example: Body content).
-
1 Click the Layout sub tab in the Content Generator.
2 In the Page Layouts block, click the Add Page Layout button.
3 Enter the name and description for the layout (i.e. Home Page).
4 Check the “Shared” box– optional (checking the “Shared” box allows Network
Users creating “Build Your Own Web Pages” to use the layout).
5 Click the Add Page Layout button.
-
Edit the Page Layout Details
1 In the Page Layouts block, click the layout name.
2 In the Page Layout block, the editable fields include:
a Name
b Description – a brief explanation of the layout.
c Folder - Choose a folder to organize layouts
d Shared – allows Network Users creating “Build Your Own Web
Pages” to use the layout.
e Preview Image – a preview of the layout to be used will display to
Network Users when creating
“Build Your Own Web Pages.”
f View Files for this Layout – click View Files (see Upload Dependent
Files).
g Click the Save Changes button.
Edit the Market/Language Context
1 In the Market/Language Contexts block, click Add Context.
2 Choose the Site Context. Optional
3 Select the Market.
4 Select the corresponding Language for the Market.
5 Choose the Layout to copy from.
6 Click the Add Context button.
Note: The default Market/Language is Worldwide/Default.
7 To switch to a particular Context click Select (located in the right-most
column of the Market/Language Contexts list).
Edit the Page Layout Context Details
1 In the Page Layout Context Details block is where HTML and CSS changes
are made.
-
Dependent Files: Necessary files coded into the layout for proper display (i.e. background images).
Add a Dependent File
1 Click on Content Generator.
2 Click on Layout sub tab.
3 Under Page Layouts, click on name of layout.
4 Under Page Layout Details, scroll down to View Files for this layout.
5 Click View Files.
6 Click the Add File or Multi-File Upload button.
7 Enter the File Name (case sensitive and must match name used in CSS).
8 Enter a description of the file.
9 Click Browse, select the file(s) to upload (for multiple files hold Ctrl and click on each
file to upload).
10 Click the Open button.
11 Click Add File.
To continue editing the layout, click the Back to List button.
-
1 Insert the following code:
< region type=”layout or content” name=”Region Name” /> - All single HTML tags must end with “/>”.
*Note: HTML Tag Id’s cannot be named the same as region names, this causes WYSIWIG conflicts.
Example 1 (OK):
< div id="test" >
< region type="content" name="Main" />
</ div >
Example 2 (NOT OK):
< div id="test" >
< region type="content" name="test" />
</ div >
*Note: There are two types of regions, Content and Layout, all regions must be named uniquely to avoid WYSIWIG conflicts.
Example 1 (OK, all have unique names):
< region type="content" name="c1" />
< region type="content" name="c2" />
< region type="layout" name="Lay1" />
< region type="layout" name="Lay2" />
Example 2 (NOT OK, can’t have content and layout regions named the same):
< region type="content" name="c1" />
< region type="content" name="c2" />
< region type="layout" name="c1" />
< region type="layout" name="Lay2" />
Example 3 (NOT OK, can’t have 2 content regions with the same name, can’t have 2 layout regions with the same name):
< region type="content" name="c1" />
< region type="content" name="c1" />
< region type="layout" name="Lay1" />
< region type="layout" name="Lay1" />
-
Every layout has a designated section for adding CSS code (no special codes are needed when adding CSS to a template). However, there are few components that have specific coding in order to work properly.
Backgrounds with CSS must use the following code:
● Class name or div id
● The class, div id, and image name may vary.
Note:It is suggested that dependent images are .gif, .jpeg, or .png.
-
Shared Layouts will be available to users with permissions set to build their own web pages, in Web Generator. A Preview Image will display a "preview" of the layout when a user selects the layout to use when building a page. Preview Images will need to be loaded in the Content Library prior to uploading in a Page Layout. Suggested size for Preview Image is 550px x 400px.
Upload a Preview Image
1 Click on Content Generator.
2 Click on Layout sub tab.
3 Under Page Layouts, click on name of layout.
4 Under Page Layout Details, scroll down to Preview Image.
5 From the dropdown menu, select the Preview Image.
6 Save Changes.
Your Preview will now display to users when selecting this page layout.
-
Layout Contexts are created to support a multilingual content. Layout contexts are created when users within your network are set to a market and language that does not match your Worldwide/Default and have permissions to build their own web pages in Web Generator. Example: Mexico/Spanish. In this case, adding a context of Worldwide/Spanish will allow users set to Mexico/Spanish to have access to the layout when creating Build Your Own Web Pages, in Web Generator. Another example: Dependent Files, i.e., background images - that are context based
Add Layout Context
1 Click on Content Generator.
2 Click on Layout sub tab.
3 Under Page Layouts, click on name of layout.
4 In the Market/Language Contexts block, click on Add Context
5 Select Site Context. Optional
6 Select a Market.
7 Select a Language.
8 Under Copy Layout From, select a Layout to copy from.
9 Click Add Context.