Managing your business with anyPiece/WYSIWYG Web editor/Web designer or programmer/Create page template

From Wikibooks, open books for an open world
Jump to: navigation, search

Create page template[edit]

  1. Click New Page Template button on Template Tab
  2. You will see Template Editor dialog.
  3. Enter template name, and select any of the template type
  4. Optional: Preview is Preview Image for new page. This image will be use when we create new page. Use Upload Picture button to upload image preview or use Clear Preview button to use default Preview Image.
  5. Once you have selected all the above, you can enter your code into the code editor
  6. Use Upload Template button to upload html/htm/txt file from your Computer or use Download button to download text from code editor to your computer
  7. Warning: By click on Clear Page Data button, all page's data which related to this template will cleared.
  8. Click Save & Close to save this template. You must provide Unique Template Name to save template

Template type[edit]

Template Type Description
Master Master pages provide templates for other pages on your web site. A master page provides a template for other pages, with shared layout and functionality. Master page must have content tag.
Content Content Page is a page that is associated to a Master Page. A Content Page will contain only mark-up and controls for that page. Content page will override content tag on master page.
Login Login page is a page will use by user to insert *username and password* to access locked page.
Logout Logout page is a page using to *clear login information*
Block Block page is a page use by *render engine* to show error message like page not found. You can add *Error Message *tag to this page

Master Page[edit]

If you choose page type is Master, Master Page will be hide because you cannot set Master Page for Master Page.

Other Page[edit]

  • If you choose other page type, Master Page will show and you can choose default Master Page for this template.

Tutorial[edit]

Exercise 2: Create Master Page Template[edit]

  1. Go to WebEditor Manager
  2. Make sure Website “example website” is selected
  3. Click on new page template button to create first page template (Master Page)
  4. Insert this data to Template Editor dialog :
Field Value
Name Master Page
Type Master
Code Editor
<html>
  <head>
        <title>
                <!--ap type='website_title'/--> : 
                <!--ap type='page_title'/-->
        </title>
  </head>
  <body>
        <!--ap type='content'/-->
  </body>
</html>

Exercise 3: Create Content Page Template[edit]

  1. Click on new page template button to create second page template (Content Page)
  2. Insert this data to Template Editor dialog:
Field Value
Name Main page
Type Content
Master Page Master Page
Code Editor
<h1>Welcome To <!--ap type='website_title'/--></h1>
<p>
    This is page <b><!--ap type='page_title'/--></b></br>
</p>

Exercise 4: Create Error Page Template[edit]

  1. Click on new page template button to create second page template (Error Page)
  2. Insert this data to Template Editor dialog and click OK
Field Value
Name Error
Type Block
Master Page Master Page
Code Editor
Oppsss... <!--ap type='err_msg'/-->

Exercise 5: Create Login Page Template[edit]

  1. Click on new page template button to create second page template (Login Page)
  2. Insert this data to Template Editor dialog and click OK
Field Value
Name Login
Type Login
Master Page Master Page
Code Editor
<div 
     class='err_msg' 
     style='display:none;'>Please Login to Continue</div><br />

Username : 
    <input 
           type='text' 
           value='' 
           id='txt_user'            
           style='width:200px;' /><br />

Password : 
    <input 
           type='password' 
           value='' 
           id='txt_password' 
           style='width:200px;' /><br />

    <input 
           type='button' 
           value='Login' 
           onclick='do_login()' />

Exercise 6: Create Logout Page Template[edit]

  1. Click on new page template button to create second page template (Logout Page)
  2. Insert this data to Template Editor dialog and click OK
Field Value
Name Logout
Type Logout
Master Page Master Page
Code Editor
You has been logout for this website. <br />
Click <a href="main"><b>here</b></a> to go to Main page