CCS 的版面設計作法

CCS 的版面規劃與設計，主要的概念是 "Design"，一個 Design 包含一組 master page、master template、CSS、html、js、圖檔等。

這一組 design 都存放在一個 Folder 裡面。 Folder 名稱就是 Design 的名稱。

Master Page：是主要的版面頁面設計，它是一個 .ccp的檔案，裡面一樣有 html /css/js等設計頁面的語法陳述。而其中最重要的依個概念就是 panel 及 placeholder。
Panel ：是一個面板， CCS 有幾種不同的 Panel，主要都是用來定義一個區塊面板用的。
Placeholder ：位置指定器，指定要放在哪裡用的。用來定義該段內容(內容的資料panel)要放到頁面的什麼地方。

Master Template：master page主要是定義整個頁面，而master template則是定義一個區段。這個區段可以被幾個不同的資料頁所共用，就可以用 master template來定義。以便於重複使用。 master template裡面跟 master page 類似的有html、CSS、js 、panel 、placeholder等內容。

使用"主版面控制頁"(Master Pages)

在Code Charge Studio中有這個 "Master pages"的設計，我將之翻譯為"主版面控制頁"，也就是整個網站的網頁版面，要有個一致性的設計，包括CSS、字體、位置、圖案等等設計，都可以設計在這個"主版面控制頁"中。

設計者只要將版面設計及格式等設計在這一頁中，然後將網站其他網頁套用這個版面頁，而不用個別網頁個別很辛苦的分別設計。

當使用者要一個內容頁時，這一頁就會將資料合併套用這個 master page以產生頁面輸出。

CCS內建了 Artisteer 的設計。可以運用。這設計放置在"designs"目錄裡面，可以參考。

Master pages：主版頁、還有
master templates：主模板

這兩個都使用面板 (panels) 來組織內容，對應內容到面板上。

Any panel that is mapped to a placeholder is a 'content' panel.
Content Panel ：內容面板
When you apply a design, the content of your page is moved to a content panel, which is mapped to a placeholder on the master page.
當套用一個Design時，所有網頁的內容都被搬移到 Content Panel，這是主版頁裡面的 placerholder

With Artisteer you can create elaborate designs that work seamlessly with your CodeCharge Studio application, however it is not strictly necessary to have Artisteer to use these features.

The rest of this section describes how you can create your own templates without Artisteer and apply them to your projects.

This is a description of creating and using templates, not a full explanation of creating a design, since 'design' refers to the collection of template pages, stylesheets, images, and other files that define your project design. To create template pages and stylesheets you will need to know HTML and CSS.
Normally the way you apply a master page, is the same as applying a design to a page.

You select the page, then in either Design, or HTML mode, right click the mouse and select the "Apply Design to this page" option. This will apply the current default design. If you follow the conventions described in this section, you can create a master page that will appear alongside the built-in Artisteer designs, which you can select from to set the default page.

Note, after you apply a design, you can also use the context menu to remove the design.
套用 design 以後，可以移除他

This will undo the creation of all the panel structures created on your page for the design.

Be careful though, when you remove a design since all of your content is moved back to the page and your content panels are removed.
Remember that when you apply a design, CodeCharge Studio creates a content panel for every placeholder in your master page, but the content of your page is moved to just the panel called 'content'.
Your placeholders normally define the layout of your page (e.g. 'block' placement). If you want certain content (e.g. 'search' form) to appear in a particular location, you need to move the content to the right content panel.
For example, suppose your page has a Search form but you want the form to appear in the Block1 position (some arbritrary position).
When you apply a design to your page, CodeCharge Studio will create a panel called 'Content' and move the Search form to this panel.
It will also create a Block1 panel (if you master page has a placeholder called 'Block1'), but initially the panel has no content.
To make the Search form appear in the Block1 location, you will need to cut&paste the Search form into the Block1 panel.
You can apply a design manually, without using this menu, by assigning properties to your page and panels, but you have to thoroughly understand how to create a panel structure that corresponds to your master page, and how to assign the properties correctly as described in the following sections.

How Master Pages Work

A master page is a regular CodeCharge Studio page you have created with a predefined layout that can include CSS, static text, HTML controls, HTML elements, etc.

The page becomes the layout and formatting for the content of your page.
A master page is a key part of any design, but not the only element.
You can find examples of master pages in the built-in Artisteer designs.
Instead of designing the styling applied to each web page of your project, the styling can be defined in one template page, then applied to one or more other pages, called content pages.
This way, you can concentrate more on the forms and controls of your web pages, and also the application logic behind your web site without having to consider the layout and formatting.

A page with an assigned 'Master Page' property is a content page.
You use a content page to define the web pages of your CodeCharge Studio application.
They contain forms, controls and other components that define your application.
There is no particular order that your design and content pages have to be developed.
You can create a CodeCharge Studio project, then apply a design to your pages, or you can apply a design to new pages you create and then add your content (e.g. forms) later, or you can do a combination of both.
Normally, you start by creating the master page first, then adding placeholders for the content you want to map to the page.

Note, there are no restrictions in the CodeCharge Studio IDE on how you can use master pages and content pages.
They behave like any other CodeCharge Studio pages you have worked with, but the convention, and the logic, is that you use a master page as an HTML template for the design of your project, and you use content pages to contain the controls, forms and other content that is mapped to your design.

Although the IDE does not enforce this, you should not, for example, add forms, controls, or components to template pages.
Your master page should contain only HTML and CSS to layout and style your content, and placeholders for the content to want to include in the page.
Similarly, you should not use a content page as a template. Although the IDE does not enforce this, it is not likely to work.

Placeholder：
The master page must have at least one placeholder.
A placeholder is a component you add to a page which is then later mapped to and replaced by content at run time. When you apply a design to your content page, CodeCharge Studio automatically creates a panel on your content page for every placeholder in your master page. Also, it always creates a content panel called 'content' and one called 'head'.

Master templates：主模板
主模板類是主版頁，它應用在網頁的一區塊。而不是整個網頁。
主模板一樣要包含 placeholders
Your design can also include master templates. Master templates are similar to master pages except they are intended to be used to format sections of a page, rather than the overall page.
Master templates also include placeholders.
When your content page is requested, first the content is mapped to any master templates, then the container panels for the templates are merged with your master page.
當網頁被呼叫時，是優先將內容套用所有的主模板，然後才合併到主版頁。

Most of how CodeCharge Studio works with designs is based on the Artisteer framework. It is not necessary to have Artisteer to use master pages and master templates, but there are certain conventions that you should be aware of that CodeCharge Studio follows. This will make it easier for you to understand and implement your own designs.

Every design is in a separate folder under the 'designs' folder in your project. Your design can be anywhere, but if you do not follow this convention, your design will not appear in the menus and dialogs of the CodeCharge Studio IDE.
Every master page in a design is called 'MasterPage'. Your master page can be called anything, but if you do not follow this convention, your design will not appear in the menus and dialogs of the IDE.
Every master page must have at least one placeholder. You add placeholders to your templates using the Forms tab and PlaceHolder icon on the ribbon bar.
Whenever you create or change a template (e.g. MasterPage), always save your page before using.
每一次建立或改變模板，例如：母模板，記得一定要儲存網頁。
Every master page is assumed to have two placeholders called 'content', 'and 'head'. Any time you apply your design to a content page, CodeCharge Studio creates a panel structure that includes a panel for each one of these placeholders. This occurs even if your master page does not have these placeholders.

每一個主版頁，一定要有兩個位置指定器："content", "head"

These placeholders have special meaning when you apply a design to a content page. Even if your master page does not have a placeholder called 'content', CodeCharge Studio will create a content panel called 'content' and move everything between the <body> tags on your content page into this panel. The content panel is mapped to the 'content' placeholder, so if your master page does not have this placeholder, your page will not appear correctly. Therefore, you should always include a placeholder called 'content' on your master page. Similarly, CodeCharge Studio always creates a content panel called 'head' that is mapped to the 'head' placeholder on your master page. When you apply a design to a page, all of the code between the <head> tags on your content page is moved to this panel.
Content placeholders can be called anything so long as they match the right panel's 'placeholder' property. When applying a design, CodeCharge Studio creates a content panel for every placeholder in the master page, but the content is only moved automatically to the 'content' panel (the one called 'content'). If you decide that you don't need some of the panels created, you can remove them from your page. For instance, if you apply one of the 'built-in' Artisteer designs, you may not need all of the content panels that are created. But, make sure that each content panel left on your content page is mapped to one placeholder in the master page otherwise your published web page will not appear correctly at run time.

You can dynamically select a design at runtime, but ONLY if all of your designs have the same consistent mapping between your content pages and the placeholders in the templates and master page. If you do not assign a design at run time, the design applied is the 'default' design you selected in the IDE (using Designs icon on the ribbon bar).
You should be aware that the IDE does not distinguish between content pages, master pages, master templates, form templates, etc., from other types of pages, but there are certain conventions you should follow such as, you should not try to include forms and controls in template pages.

A Simple Example

This is a simple "Hello World!" example to show how the master page and content page work:

Create a folder called 'designs/mysite' in your project folders. In this folder, create a new page called 'masterpage'.
On the master page, use the PlaceHolder button under the Forms tag on the ribbon bar to add a placeholder called 'content', and one called 'head', then save your page. It is IMPORTANT to save your master pages whenever you make a change otherwise your master page may not be applied correctly. Whenever you get an error, make sure you have saved your master page. After you are done, the HTML for your master page should look something like this:

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>masterpage</title>
{head}
</head>
<body>
{content}
</body>

In the Project Explorer, add a new page to your web project, then add some static text to the page: "Hello world!". Select the page and the Data tab under the page properties. Select the 'Master Page' property, then find and select the master page you just created above.
Refresh the Project Explorer and you will notice that a new panel has been created in your page called 'content' and the content of your page ("Hello world!") has been moved to the new panel. For this example, the master page has a placeholder called 'content'. But, if you did not have a placeholder called 'content', CodeCharge Studio would have created a panel called 'content' anyway. Note though, this wouldn't have worked because without a content placeholder called 'content', the content would never be mapped to the master page and your web page would not be rendered correctly.

Select the 'content' panel and look at the properties pane. You will notice that the 'placeholder' property has been updated to 'content'. This placeholder refers to the 'content' placeholder in your master page. This property is what CodeCharge Studio uses to map content panels to the placeholders on your master page. You can change the placeholder name and 'placeholder' property but they must match so your web page is rendered correctly.

The HTML for your content page should look something like this:

<!-- BEGIN Panel content -->
<p>Hello World!</p>
<!-- END Panel content -->
<!-- BEGIN Panel head -->
<meta name="GENERATOR" content="CodeCharge Studio 5.0.0.12000">
<!-- END Panel head -->

When this page is requested, after it is published to the server, CodeCharge Studio will replace the placeholders in the master page with the content from these panels and render the HTML to create a new page.

This example is very trivial because the master page doesn't include any styling, but we could define the layout and formatting around the placeholder called 'content' in the master page and have it apply to any content mapped to it in our web page. For example, we could change the font for the 'content' placeholder like this:

<font color="blue" size="12">{content}</font> {title}{head}

Creating a New Master Page

You create a master page as you would any other CodeCharge Studio page (Home | Pages | Blank page). As mentioned before, you need to add PlaceHolders (Forms | Components | PlaceHolders) to map your content panels to your template, but otherwise, the template should only be used to style the page (i.e. not contain forms, or controls, etc.). Also, you should follow these conventions when you create the page.

Name your page 'masterpage' and place it in a different folder from the rest of your pages. Naming your page 'masterpage' is important if you want to include your master page in the gallery of built-in designs, or other designs you have created with Artisteer.
On your master page, always include a placeholder called 'content', and 'head'. Applying the master page moves the existing HTML from your content page to these new panels as follows:
- Moves all the HTML between the <head> tags to a panel called 'head'.
- Moves all the HTML between the <body> tags to a panel called 'content'
Again, if your master page does not include these placeholders, they will be created automatically when you apply the design, however unless you map the 'placeholder' property to the correct placeholders on the master page, this will not work.
Do not modify or delete the placeholder tags directly in your master pages (e.g. {content}, {head}). You can modify the HTML around the tags, but do not rename the tags, delete the tags or add tags of your own directly. If you create your template, say with another editor, it is sometimes useful to write the tags directly in HTML. This is useful for identifying where your placeholders should be in the template, but later you will need to replace this code by inserting the placeholders in the IDE using the ribbon bar (Forms | Components | PlaceHolder). This is because PlaceHolder components are represented by tags in the HTML but their definition is kept in the CodeCharge Studio page. The IDE cannot create the components from just the tags in the HTML.
Your design stylesheet should appear at the top of the master page and you should remove any other stylesheets (e.g. any CodeCharge Studio 'Style' stylesheets).
Do not modify the template markers in your content page (e.g. ). These denote where your content exists for each panel and should not be changed.
Make sure that your master page is published with your project. This should occur automatically, but depending on your project settings, not all resources (e.g. images, stylesheets) might be published to the server with your project.
Optionally, add other placeholders for other parts of your web page, such as a menu, sidebar, frameset, etc.
Optionally, add master templates for applying different layouts and formatting to different sections of your master page. See Using Master Templates for more details.
Always make sure to save your master page when you make any changes.

Applying and Removing a Master Page

There are two ways to apply (or remove) a master page from your content page. The simplest way is to change the 'master page' property. Select the content page, then the Data tab in the Properties pane. Find the 'master page' property and enter (or browse to) the master page you want to apply.
If you have created your master page following the conventions described above, you can also set your master page as the default design using the Designs icon on the ribbon bar. Then, you can also apply your master page to a page by right-clicking on the page content (Design or HTML mode) and select 'apply design to this page' from the context menu. The master page used is based on the default design, which you assign with the Designs icon.
You remove a master page from your content page by either deleting and setting the property to blank, or right click on the page in Design or HTML mode and select 'remove design from this page'. Removing the master page has the reverse effect of applying the master page. That is, the panels, such as 'head', 'content', etc. are removed from the page and the content in each panel is moved back to the content page.

One other thing takes place when you apply a design to a page. Normally when you create a CodeCharge Studio page, the initial HTML generated is based on a template (which you can change in your project settings) that contains the basic amount of code to render a web page. It contains a <body> section, a <head> section and other declarations. When you add content (e.g. a grid form), CodeCharge Studio generates other HTML in conjunction with the components it adds to the page. When you apply a design to a page, the HTML changes. Now instead of the standard HTML declarations, there are template blocks that mark off where the content panels exist on the page.

<!-- BEGIN Panel content -->
<p>Hello World!</p>
<!-- END Panel content -->
<!-- BEGIN Panel head -->
<meta name="GENERATOR" content="CodeCharge Studio 5.0.0.0">
<!-- END Panel head -->

If you have any special code that was part of your HTML template, you may need to add or move this code to your master page.

Master Page Property & CCS_PathToMasterPage

When you apply a design from the ribbon bar, CodeCharge Studio automatically updates the 'master page' property on your content page, using the internal variable 'CCS_PathToMasterPage' variable. This variable is the path to the selected default design folder. When you use this variable, you can use dynamic design selection with your published web site, when you have more than one master page (design) in your project. If you do not use the 'CCS_PathToMasterPage' property, you cannot use dynamic selection (e.g. if you set the 'master page' property directly on the page instead of applying the design from the gallery).

See Using Artisteer Designs for more details about using this variable and dynamic design selection. Note though, like the built-in designs, the 'design' name you specify in dynamic selection is the name of the folder where your master page resides. If the master page cannot be found on the server (i.e. the design was not published with your project), CodeCharge Studio will apply the default design instead.

How Content is Mapped to your Templates

This section describes how the content on your content page is mapped to the master page in your design.
A content page contains the components, such as forms and controls that you want merged with the master page. It doesn't matter what order you create the content. You could start off by simply creating a CodeCharge Studio page, add whatever forms you want included in the page, then apply your design. Or, you could create a blank page, apply a design, then add your content as you would any CodeCharge Studio page. Or, you could do a combination of both.
As described previously, your master page contains a set of placeholders. When you apply a design to a page, CodeCharge Studio creates a panel for each placeholder on your master page. It also creates a couple other placeholders (see description above) for 'content', and 'head' even if your master page does not include these placeholders. The 'placeholder' property for each of these panels specifies which placeholder in the master page, the panel is mapped to.
A panel with a 'placeholder' property is called a content panel because everything within the panel (as you can see in the folder tree, or HTML), is used to replace a placeholder in the template (i.e. master page).
When your content page is requested, each of the content panels are mapped to the master page and replace the placeholder tags within the HTML code. This is done according to the panel's 'placeholder' property. If a panel on the page does not have a defined 'placeholder' property, or if a placeholder for that property does not exist on the master page, the panel is not merged with the master page. Similarly, any content (e.g. grid form) that exists on the page but outside a content panel that is mapped to the master page, does not get rendered on your page; it is, as if, it does not exist.

It is important to remember that the mapping between the panels on your content page is based on the 'placeholder' property, not their name. For example, even if my master page has a placeholder called 'content', and my content page has a panel called 'content', my 'content' panel must have a 'placeholder' property named 'content', otherwise it will not be merged with the master page correctly.

When you already have content on a page (e.g. a grid form), but no design, when you apply a master page, all the content on your existing page is moved to a panel called 'content'. Even if your master page is missing this placeholder, when you apply a design to a page, this 'content' panel is created automatically. Typically, you won't want all of your content mapped to one placeholder. Typically, you want to have several different placeholders which are laid out and formatted differently. Once everything is moved to the 'content' panel, you need to cut and paste the content (e.g. forms) to other panels. And, as mentioned before, you need to make sure that your content panels are mapped to the master page correctly using the 'placeholder' property.

If you have content that you may want to reuse on your web pages, you may find it useful to move the content to an 'include' page, then add a reference to the include page on the panels mapped to your placeholders. For example, if you have a Search form which you want to reuse on different pages, put the Search form in an 'include' page, then add a reference to the 'include' page on the content panel mapped to the section of your master page where you want the Search form to appear (e.g. sidebar block).
Your placeholders in the master page define different sections where content is inserted from your content page. Typically the styling on your page (CSS stylesheet) applies to the page and the individual sections but not the content that may appear in each section. For example, you might define a block of your page to contain a sidebar containing content related to, but not the main content of the page. The sidebar might contain other content elements such as search forms, links, calendars, etc. To maintain a consistent appearance of items in the sidebar you might want to define a particular styling to individual segments within the sidebar. You can define this thru another template called a master template, which describes the appearance of the content that appears within a particular section. Master templates are described in the next section. To use a master template with a master page, select the content panel on your content page (e.g. select a form in HTML mode) and apply the master template property, or move the content on your content page to an 'include' page, add a reference to the 'include' page in a content panel on your content page, then apply the master template to the content panel.

Using Master Templates 主模板

A Master template can be used to develop a consistent appearance within fragments of a page.
主模板主要用來發展一個網頁的區塊的一致性。僅針對區塊。
For each section of your master page, you can develop a separate styling for the content.
每一個網頁的一個特定的區塊的一致性。
A master template is a CodeCharge Studio page that contains HTML and a set of placeholders representing sections of content that are mapped from your content page.
主模板就是包含著 HTML 跟一組 "位置放置器" placeholders

A content panel is a panel with content, such as forms and controls that you want mapped to a master page or master template.
content panel：一個含有內容的 panel，例如：forms/controls
A template panel is a panel that is mapped to a master template and contains the content panels that are mapped to the master template thru the placeholders.

template panel：對應到主模板的panel，包含有 content panel

The template panel is used just like a container panel. It contains other panels that are mapped to placeholders in the master template. The 'master template' property identifies which master template to use. Like a master page, each of the content panels within a template panel are mapped to the master template using the 'placeholder' property. Which template they apply to (master page or master template) depends on whether or not the panels are contained in the page, or the template panel (i.e. a structure of panels).
A master template and a master page are very similar. However, a content page is mapped to a master page template using the 'master page' property. The content panels within a content page are mapped to the master page template using the 'placeholder' property. A panel with an a 'master template' property is a template panel. Template panels also contain content panels which are mapped to the placeholders in the master template with the 'placeholder' property. Even though every panel has both a 'placeholder' property and a 'master template' property, do not assign both properties at the same time. Also, all of the content panels within a template panel should map to the same master template. That is, if one of your content panels within a template panel refers to a placeholder that is not in the master template, it will not be rendered on your page at run time.
A master template can be used to style any portion of a CodeCharge Studio page. It does not have to be used in conjunction with a master page.
Most of the built-in Artisteer designs include one or more master templates with each design. When you apply one of the designs to a page, CodeCharge Studio creates a content panel on your page for every placeholder on the master page (i.e. title, content, head, body, menu, etc.). You should notice that every one of these panels is mapped to the master page with the 'placeholder' property. But, in addition to the master page, the designs also usually include several master templates you can use to style each of the content panels. For example, if your page has a menu, the design normally includes a MenuTemplate that can be used to style the content panel for your menu.

If you look at the solution examples, particularly the 'blog' and 'store' solutions, there are two ways that the menu content is created: as a menu component ('blog'), or a list of links ('store'). In both cases, the menu is actually part of an include page that is part of a content panel that is mapped to a placeholder in the master page. The include page contains a template panel that is mapped to a master template in the design. The template panel contains another panel that contains the actual menu and is mapped to a placeholder in the master template.

The built-in designs created with Artisteer include template pages intended to format sections within the master page of the design. To know which ones you want to use depends on the orientation of each section and the styling (design stylesheets), and the template HTML code.

Creating a New Master Template

Like a master page, a master template is a CodeCharge Studio page with placeholders for content you want to replace. Typically, you design your master template to style parts of your master page (but you can apply it to any page). You create a blank master template in the same way as any other CodeCharge Studio page, but like master pages, these pages are not intended to contain forms, controls, etc.
Note, when you create a new template, your page may look like the following since CodeCharge Studio does not distinguish between template pages and content pages, or other types of pages. In this example, a stylesheet ("Basic") has been assigned because there is a default style in the project and CodeCharge Studio automatically applied the Style when the page was created. If you look at the HTML for the templates in one of the built-in Artisteer designs, you will notice that you do not need any of this code. To eliminate the code and prevent CodeCharge Studio from regenerating it later, select the page you created and set the 'includable' option to 'yes', then delete all the HTML in the page. That is, make master templates 'includable' pages.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="GENERATOR" content="CodeCharge Studio 5.0.0.12000">
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>NewPage1</title>
<link rel="stylesheet" type="text/css" href="Styles/Basic/Style_doctype.css">
</head>
<body>
</body>
</html>

You can name your template anything you want but generally you should put your templates in the same folder as the master page. This is important if you use dynamic assignment since CodeCharge Studio uses an internal variable called 'CCS_PathToMasterPage' to locate both the master page and the master template.
Your master template does not have to include any placeholders, but obviously without them you will not be able to merge any content panels into the rendered page

This example has two placeholders called 'Title' and 'Content'. The <div> classes are supposed to work in conjunction with the CSS rules in the designs stylesheet to format and orient the content in the section.

<div class="art-Block">
  <div class="art-Block-tl"></div>
  <div class="art-Block-tr"></div>
  <div class="art-Block-bl"></div>
  <div class="art-Block-br"></div>
  <div class="art-Block-tc"></div>
  <div class="art-Block-bc"></div>
  <div class="art-Block-cl"></div>
  <div class="art-Block-cr"></div>
  <div class="art-Block-cc"></div>
  <div class="art-Block-body">
    <div class="art-BlockHeader">
  <div class="l"></div>
  <div class="r"></div>
  <div class="art-header-tag-icon">
   <div class="t">{Title}</div>
  </div>
 </div>
 <div class="art-BlockContent">
  <div class="art-BlockContent-body">
   <div class="art-BlockContent">{Content}</div>
  </div>
    </div>
  </div>
</div>

Applying a Master Template

套用主模板

You apply a master template to portions of an existing page. The page, may or may not be mapped to a master page (i.e. have a design applied to the page).
如何套用主模板 master template 到一個網頁？注意：這個網頁不一定要套用到母版頁master page去！
Again, content panels are mapped to either a master page or a master template using the 'placeholder' property.

content panel 透過位置指定器 placeholder 套用到網頁的位置

The following example is from the 'Blogs' example solution.
This uses one of the built-in Artisteer designs.
The Main page is mapped to the master page in the design.
The page contains several content panels (e.g. 'title', 'head', 'content', etc.) which are all mapped to different placeholders in the master page.
Some content panels contain just content (e.g. 'Block1Container'), while others contain template panels that contain other content panels (e.g. 'Content').
Each template panel (e.g. 'Panel_Post') is mapped to a specific template in the design (e.g. 'PostTemplate').
The content panels in each template panel are mapped to placeholders in the template (e.g. 'Panel_Post_title' is mapped to the 'title' placeholder in the 'PostTemplate' master template).

You can create this entire structure manually by creating each panel separately and assigning the properties, but CodeCharge Studio provides several ways to make this easier, though you may often find that you still need to manually change the structures.
There are couple ways to apply a master template to the content on your page.
有幾個方法套用：
First, you can add a template panel to your page, then add some content panels to the template, and content (e.g. form) to each content panel.
第一：增加一個 template panel 到網頁，然後增加一些 content panel 到那個模板，增加一些內容到每一個 content panel裡面
Second, you can select some content on your page, then apply a master template to the content (e.g. forms) you select.
第二：選擇一些網頁上的內容，然後套用主模板到你選擇的這些內容。

To add a template panel to your page:

Select the Forms tab on the ribbon bar. Select the page where you want to create a template panel, and click on theTemplate Panel button on the ribbon bar. In Design mode or HTML mode, you can also place the cursor anywhere on the page.

The options you see for master templates are based on the default master page (design) selected, not necessarily the design applied to your page (if there is one). See Using Artisteer Designs for more information about setting the default design. If your project has no default design, the drop down list will be blank. You will need to browse and select the template page. When you want to apply a master template that you have created, typically you will need to browse and select the template. Otherwise, if you are working with a master page you created, make your master page the default design and the list of master templates you have created will appear in this drop down list. Do not use a master page as the template.

When you select a master template, CodeCharge Studio will add a template panel to your page and update the 'master template' property for the panel automatically, then create content panels within the template panel corresponding to the placeholders in the master template, and update the 'placeholder' property for each panel. For example, if your master template has two placeholders called 'title' and 'content', CodeCharge Studio will create an inner content panel for each one. You are responsible for defining or moving any content within each of the content panels.

To select some content first (e.g. form), and then move it to a template panel:

Select some content that you want to apply the template to and select the Template Panel button from the ribbon bar. In Design or HTML mode, select the content you want to add.

In Design mode, the current selection has a series of move and reshape icons ("boxes") around the outline of the selection.

You can also select your content in HTML mode. HTML mode should be used instead of Design Mode since it is often difficult to select the content properly, and when this occurs, the generated HTML code for the page may not be correct.

When you have selected content that you want to add, select the Template Panel button on the ribbon bar and you should see the following form:

The options you see for master templates are based on the default master page (design) selected, not necessarily the design applied to your page (if there is one). If your project does not have a default selection, the drop down list of templates will be blank. You will need to browse and select the template page. Once the template page is selected, for 'Select PlaceHolder' you should see a list of placeholders for the selected template. Select the placeholder within the template where you want the content you selected to be moved.
Note, the 'Select PlaceHolder' drop down list only appears when you have selected some content in your page. If you haven't selected the content correctly, this field will not appear in the dialog.

You can also change or specify the master template and the mapped placeholders in the panel properties. Select the panel you want to use as the template panel, and then define the master template that applies to this panel. For each panel in the template panel that is mapped to the master template placeholder, select the panel, then define the placeholder name that the panel is mapped to in the master template.
When you set the 'master template' property directly, normally it will be a relative path to where the master template is located in your application folders on the server. If you use the dialogs described above to create the template panel, the property will use the 'CCS_PathToMasterPage' internal variable. When you use this variable, you can use dynamic design selection at run time (as described below).
Unlike a master page, you can not undo applying a master template to a panel. That is, with a master page, if you remove the design, CodeCharge Studio moves the content in the various panels back to the page and then removes the content panels that were mapped to the master page. This happens automatically when you remove the design. A master template does not work this way. You have to move the content yourself, and remove any template panels you have created if you want to undo the application of the template.

Master Template Property & CCS_PathToMasterPage

When you apply a master template using the Template Panel icon on the ribbon bar, CodeCharge Studio automatically creates a template panel, then content panels for each placeholder in the master template. It also automatically updates the 'master template' property for the template panel, and the 'placeholder' property for each of the content panels. You could do this manually, but when CodeCharge Studio defines the master template property, it automatically adds the 'CCS_PathToMasterPage' property.

The 'CCS_PathToMasterPage' variable is the run time folder location for your master page. If you put your templates in the same location, you can dynamically change templates at run time. For example, most of the 'built-in' Artisteer designs include master templates you can use to style different parts of the page. The designs share the same names for the master templates and the templates are located in the same location within the design folder. This allows some applications to dynamically assign a design at run time.

Example: Converting an Application Created with an Earlier Version of CodeCharge Studio

This example is based on an application originally created with the 'Forums' solution template in version 4.3. If you want to follow along, you should create a new project based on this solution. Make sure the project target is 'C# - InMotion Framework'.
In this example, we will convert the application to 5.0, then apply one of the built-in Artisteer designs to the project. This example demonstrates how to apply a design and use the master templates to style different sections of the web page.

Open the application and convert it to 5.0.
Open the Header page and edit the HTML to change the header to just a list of links, so we delete the graphics (since this will be part of the design), and eliminate all the formatting. The result should look something like this:
Delete the Footer page since this is part of the design we will add. Also, delete the 'include' reference to the footer on the 'default' page.
Create an 'include' page called 'Search' and then cut and paste the search form on the 'default' page to this new 'include' page. 'Cut&paste' the form as a 'record', not as text. Change the field caption from 'Topic or Message' to 'Message', and change the style of the form 'Sand Beach' to 'No Style'. The new search form should look something like this:
Add the 'farm song' design to the project and make sure it is the default design. Refresh the Project Explorer so the design appears in the folder tree.
Select the 'default' page and change the Style for the Page from 'Sand Beach' to 'No Style', and then apply the 'farm song' design to the page using the 'Apply design to this page' option in the context menu as described before. You will notice that this is not entirely what we want. The formatting is not correct. The header does not appear as a menu, and there is no search form.
Cut and paste the 'include' page 'header' from the 'Content' panel to the 'Menu' panel. The design we are using includes a placeholder on the master page called 'Menu', and a master template called 'MenuTemplate'. The 'header' contains a list of hyperlinks we want to create a menu from. To do this, we want to apply the 'MenuTemplate' to the 'header'.

Select the Forms tab on the ribbon bar, then navigate to the include page 'Header', and mark&select the hyperlinks in the page. Select the Template Panel icon on the ribbon bar, select the MenuTemplate, and then MenuItems for the placeholder. This will create a template panel with two subpanels; one for the menu title and one for the menu items. This will also move the hyperlinks to the menu items panel.
We are not quite done with this. You may notice in the preview window that the links appear vertically instead of horizontally across the page. If you look at the menu template, the menu is described as an unordered list, but we haven't defined the links as line items so it is unlikely the menu will be formatted correctly. We need to change the links to line items and preview the window again.
In the master page, there is a placeholder called 'sidebar1'. We want to put the Search form in this sidebar and then use the Block Template in the design to format this block.

Select the 'Sidebar1' panel in the default page and add a reference to the include page, 'Search'.

Find and navigate to the include page, 'Search'. Like you did with the hyperlinks above, mark&select the search form, then select Template Panel from the ribbon bar. For the master template, select the Block Template, and for the placeholder, select 'Content'. This will create a template panel and two subpanels; one for the title, and one for the content (i.e. the 'search' form).

So far, the default page should look something like this:

The "Headline" and "Slogan text" can be changed in the master page.

To change the title, 'Forum Messages' so it appears above the table instead of inside the table, change this code:

with this code:

 <table class="Header" border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td class="HeaderLeft"><img alt="" src="{CCS_PathToMasterPage}Images/Spacer.gif"></td> 
     <td class="th"><strong>Forum Messages</strong></td> 
     <td class="HeaderRight"><img alt="" src="{CCS_PathToMasterPage}Images/Spacer.gif"></td>
   </tr>
 </table>

The template panel we used to format the Search form has a 'title' and 'content'. We moved the search form to the 'content' panel, so now add a title to the 'title' panel:

<!-- BEGIN Panel Title -->Search<!-- END Panel Title -->

Our Search form already has a form title ('Search'), so since this is redundant, delete this code on the search form:

 <table border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td><img border="0" alt="" src="{page:pathToRoot}Styles/None/Images/Spacer.gif"></td> 
      <td><strong>Search</strong> </td> 
      <td><img border="0" alt="" src="{page:pathToRoot}Styles/None/Images/Spacer.gif"></td>
   </tr>
 </table>

Also, change the alignment of the button so it appears in line with the rest of the fields:

<td align="left">

The final page should look something like this:

網站設計筆記

2014年8月26日星期二