simplifycms
Simplify help | Video tutorials | FAQ | wApplication help | Forum
  Simplify Help - A guide to using our innovations for your success.
Building your Website


This page contains a step by step guide to build a website and take advantage of simplify Edit.

>> Step 1: Defining Regions

The first step of building your website is defining the regions.
Here we are assuming that the html pages are already built.
If you want further information on how to built a template from a design, click here.

Let us take an example the following website for a Chiropractor

Click here to download the source code.

1- The website needs one template with 6 editable regions (yellow means shared region, green means normal region):
  1. Logo area (shared)
  2. Menu area (shared)
  3. Slogan area (shared)
  4. Right column area (shared)
  5. Footer area (shared)
  6. Main content area (normal)
2- The website pages, are:
  1. Home page
  2. FAQs
  3. About Us
  4. Services
  5. Contact Us

Once you build the html code of the template, you need to add the editable regions inside that template by adding the Kyube tags.
(If you are familiar with Dreamweaver tags, we support them 100%)

Here is how you add Kyube tags: 

  1. Define a template
    2.

    After creating and designing the HTML templates, you have to define the template to which a page belongs to. 
    This is done by inserting the below template tag, which should be inserted in the html page, right after the HTML tag and before the <head> tag.

    Template Tag (page.html)

    <html>
    <!--{Template name="/Templates/L1.html"}-->

    <head>
    ...

  2. Insert shared region tags

    3. Second you need to add the shared region tags, here is the logo region:

    Library Tag (page.html)

                            <!-- {Library_logo.lbi} -->

                                      Healing Hands

                            <!--{/Library}-->

    And, to define the slogan shared region, add:

    Library Tag (page.html)

                            <!-- {Library_slogan.lbi} -->

                                       The Client-First Clinic—adjusting client needs to client health 

                            <!--{/Library}-->


  3. Insert normal regions tags

    4. Third you need to add the normal region tag, here is an example of defining the main area region.

    Normal Region Tag (page.html)

    <body> 
    ..................

                        <!--{Section_MainContent_outer}--><!--{MainArea}-->

                              ..... Middle html code (can include pictures, links, etc….)

                        <!--{/MainArea}--><!--{/Section}-->

    ..................
     </body>

    Add all the required tags for all the regions of your templates.
    Click here to learn more about the Kyube Tags

    ** Note that all your regions names and template names should be strictly alphaNumeric and unique.


Moreover, if you do not insert any tags at all, the system can automatically detect and build regions for your page.
If you are not satisfied with how the Kyube wizard has dissected your page, and want more control over the division of your layout; you can insert your own tags. However, these may not satisfy your needs; so, if you want more control over the division of your layout, you can add your own tags.

Now let us build the navigation by adding a menu wApplication in the menu area.

>> Step 2: Adding the Navigation Menu

The following will show you how simple it is to have a navigation menu in just a few steps.

  1. Add the simplify engine tag
    2.
    For your menu to function in the pages of your website, you have to add the following two links in the tag of all your pages.

    Head Tag (page.html)

    <html>
    <!--{Template name="/Templates/L1.html"}-->
         < head> 
    .................
         <script src=" ky_wapp.wapps/ky_wapplication.js" type="text/javascript" id="_ky_wapp_rw"></script>
         <script src="http://member.simplifycms.com/wapplication/js/ky_wapplication.js" type="text/javascript" id="_ky_wapp_ro"> </script> 
    ..................
           </head>

  2. Add the form in the html page
    3.
    In the template where you want the menu to be, insert the following code in the region you want to contain the menu:

    Form Tag (page.html)

    <body>
    ..................
      <!--{Library_topMenu.lbi}-->
     
      <form id="ky_QuickMenu_topMenu"  ky_wapp="on"  method="post" enctype="multipart/form-data" >
               <div id="face1_tpl" style="display: none;">Loading...</div>
      </form>

    <!--{/Library}--> 
    ..................
    </body>


    In this example we will add the top menu navigation. And the type we have chosen is: Quick menu.
    There are multiple types of menus, visit the section on the Menu Wapplication for more details.

  3. Folder Structure
    4.
    Next, you have to build the folder structure to support the menu wApplication.

    In the root folder of your website, you need to add a folder called ky_Wapp.wapps, as shown in Image 1.     		      
    Image 1: Root website folder

    Image 2: Contents of ky_wapp.wapps folder
    The ky_wapp.wapps is the folder needed by the wApplication ecosystem.

    This ky_wapp.wapps folder contains 3 folders: “faceJSON”, “ky_menu” and "css".

    The css folder is the folder where the needed css by the wApplication are stored.

    The faceJSON is the folder where the client side control of the menu is stored; it will contain the faceJSON file corresponding to the menu.

    The ky_menu is the folder where the preference file as well as the links file of the menu are stored.

    The remaining files are needed files by the ecosystem.
    You do not need to worry about the above files just click here to download them.

    The only 2 files that you need to know are topMenu_links.js and topMenu_pref.js
  4. FaceJSON
    5.
    Create a js file in the faceJSON folder called ky_QuickMenu_topMenu.js, and insert the following code in it:

    faceJSON (ky_QuickMenu_topMenu.js) 

    {
        "author": "Kyube Inc",
        "startup" : "face1_tpl",
        "face1_tpl" : {
            "initialize" :  ["KYMENU1"], 
             "KYMENU1" : {
                    "type" : "client",
                    "hook" : "KYMENU",
                    "menuID" : "topMenu"
                    }
            }
    }

      You are now ready to modify your menu's links and pref JSON structures.
     
  5. topMenu_links.js file

    6. The links.js file is where you would define the structure of your menu; that is you define the navigation links by setting the labels and their URL.
    Goto the folder ky_wapp.wapps/faceJSON/ky_menu/. Open the topMenu_links.js file and insert the following code:

    faceJSON/ky_menu (topMenu_links.js) 

    {
        "links" : [
            {
                "label" : "Home",
                "URL" : "index.html" 
            },
            {
                "label" : "FAQs", 
                "URL" : "faqs.html" 
            },
            {
                "label" : "About Us",
                "URL" : "aboutUS.html" 
            },
            {
                "label" : "Services",
                "URL" : "services.html" 
            },
            {
                "label" : "Contact Us",
                "URL" : "contactUS.html" 
            }  
        ]
    }
     
     
  6. topMenu_pref.js file

    7. Since the we have chosen to add a menu of the type “QuickMenu”, we have to add a pref.js file.
    In this file you set the styles for the links. The link has 3 state: (active, hover, selected).
    In the pref file you will find properties for each state.
    Create a file called topMenu_pref.js and insert the following code in it:

    faceJSON/ky_menu (topMenu_pref.js) 

    {
            "type" : "QuickMenu",

    //ACTIVE
    	"BGColor" : "",
    	"BGImage" : "",
    	"menuWidth" : "260",
    	"menuHeight" : "180",
    	"menupaddingTop" : "15",
    	"menupaddingLeft" : "15",
    	"menupaddingRight" : "",
    	"menupaddingBottom" : "",
    	"orientation" : "vertical",//"horizontal", "vertical"
    	"spacing" : "10",
    	"listStyleType" : "none", 
    	"justification" : "left", //"left", "center", "right"
    	"fontSize" : "15",
    	"fontFamily" : "Calibri",
    	"wordSpacing" : "",
    	"fontStretch" : "",
    	"paddingTop" : "3",
    	"paddingLeft" : "15",
    	"paddingRight" : "",
    	"paddingBottom" : "10",
    	"borderTop" : "",
    	"borderLeft" : "",
    	"borderRight" : "",
    	"borderBottom" : "1px solid #FFFFFF",
    	"cursor" : "",
    	"color" : "#ffffff",
    	"bold" : "true",
    	"italic" : "false",
    	"textDecoration" : "none",
    	"backgroundColor" : "",
    	"imagePath" :  "",
    	"imageRepeat" : "false",
    	"imageWidth" : "",
    	"imageHeight" : "",

    //HOVER
    	"mouseoverEffect" : "true",
    	"mouseoverColor" : "#50D4FB",
    	"mouseoverBold" : "true",
    	"mouseoverItalic" : "false",
    	"mouseoverTextDecoration" : "none",
    	"mouseoverBackgroundColor" : "",
    	"mouseOverImagePath" :  "",

    //SELECTED
    	"selectedEffect" : "true",
    	"selectedColor" : "#50D4FB",
    	"selectedBold" : "true",
    	"selectedItalic" : "false",
    	"selectedTextDecoration" : "none",
    	"selectedBackgroundColor" : "",
    	"selectedImagePath" :  ""
    }

     


If you want to explore more available options in building your navigation, click here to learn more about the menu wApplication.

After you have finished building your website on your desktop, you can upload it on simplify.
Click here to learn how you can upload your website
Copyright © 2008 Kyube Inc. All Rights Reserved. Patent 717104000. June 7, 2006