Sharco Technology Web Framework is a sophisticated piece of software utilizing Cascade Style Sheets, XML and various other technologies. In order to take a full advantage of every single component, you need to know the names of our CSS classes and names of internal variables, so that you can customize it properly.
The idea behind of our web framework is quite simple. You provide the data (web pages content) just like you normally do while writing an email or typing a letter in the word processing software, and the framework will compile that data with images, buttons, menus, etc. according to the layout and style defined by you, or your web developer. Therefore, you don't have to worry about the design. You don't have to be afraid of accidental mistakes which could screw up your design or do repetitive tasks typically associated with the web design. You just type the text, and our framework will "dress it up" so that page would look like any other page on your web site.
There are some similar technologies provided by other companies, but the biggest difference between all of them and ours is that we have a different goal. Most other services have a goal of giving you the power of creating new pages from scratch and even selecting a new design, while we have different goal.
Our logic is simple: How often are people changing the style of their web site? Most people never, some do that only for the purpose of improving things, and not just because they got bored with that look. However, what most web site owners really need is to be able to quickly make changes on the existing pages, or create new pages which should look like any other page on their web site. Another important requirement is the ability to add a button on every other pages pointing to the new page. That button could have any shape and form, but the idea is still the same - there should be a way of adding new button or menu item on every page with a single action.
So here's the quick list of features:
- Ability to modify content, without touching any other elements of the layout.
- Ability to add a new page, which should be already Search Engine Optimized.
One of the most important pages in the control panel is Site Settings. Site Settings is a database table which has list of various settings, which define various aspects of the framework. Here's the list of variables:
The following example demonstrates configuration of a menu. You may have unlimited number of menus on a single web site. After you completely finish reconfiguring your menu, you can place it anywhere on the page (typically in the header or footer) using the following format:
<MenuXXX> where XXX is the menu ID - any integer number which identifies that particular menu, for example <Menu100> would place the Menu # 100.
The creation of a menu is a 3 steps process, one of which is optional. When you create the menu, you suppose to come up with a number identifying that menu. So the first step is to go to the Menus page under control panel, and create a new record.
The second step is to go to the Menu Items page and start adding the menu items, whether they are going to be A list of links or buttons.
And finally the 3rd - the optional step is to go to the Site Settings page and customize that particular menu.
The customization process is basically the process of adding new records to that table with specific variable names. Each variable name must have the Menu ID number. For example Menu Header variable for menu with the ID # 100 is called MenuHeader100. In our example we are going to use XXX in place of the menu ID, like this: MenuHeaderXXX.
Here's the list of variables:
- MenuHeaderXXX - List of HTML tags which would appear in front of the menu, for example <TABLE> or <TABLE><TR>, etc.
- MenuItemLeftFirst - The left part of the menu element without the closing bracket, i.e. <TD CLASS=MenuFirst100 This tag will show up in front of the first menu element
- MenuItemLeft - The left part of the menu element without the closing bracket, i.e. <TD CLASS=Menu100 This tag will be shown in front of every item of the menu, starting from the second item. If variable MenuItemLeftFirst is not defined, then the content of MenuItemLeft will be shown in front of the first item as well.
- MenuPrefixID - This optional variable defines the CSS ID prefix that will be shown inside of MenuItemLeftFirst and MenuItemLeft. For example, if you have Menu with the ID 100 and the ID number of the first item in that menu is 10, and you set the MenuPrefixID to MyMenu, then the framework will create the following HTML code inside of MenuItemLeftFirst or MenuItemLeft: ID="MyMenu100_10"
- MenuItemRight - This is the right portion of the menu element. Typically </LI> or </TD> or </TD></TR>, etc.
- MenuFooterXXX - This is the very last part of the menu, displayed after the last MenuItemRight. For example </TR></TABLE> or just </TABLE>, etc.
How to get started
Typical web page consist 2 parts: the header - everything between <HEAD> and </HEAD> tags; and the body - everything between <BODY> and </BODY> tags. Framework takes care of generating lots of various elements of the page. Because of that, the framework should be able to construct these 2 sections on its own, therefore you should not include those tags on the page (unless the full source code option is selected), because the framework will add those tags automatically at appropriate places.
It is a good practice to have all pages on your web site look identical, so that the visitor would familiarize with the navigation and the structure of the site and would feel comfortable using your web site. If your web site should have at least 2 or more similar pages, then it means that you can share some of the elements of those pages, which suppose to remain the same. Usually it is something at the very top and the bottom of the page. Optionally, you may have similar content on the left and/or the right sides of the page. In any of these cases all of those mentioned elements are the common elements of your web site, and therefore should be shared with other pages. You can accomplish this by defining those elements in the special section called Header and/or Footer. (Please note, that the Header section which we are going to mention quite often in this document has nothing to do with the HEAD section of HTML page).
So, the whole process of dynamically generating the similar content lays in the simple idea of splitting the content of your page <BODY> section onto 3 parts: The header, the footer and the middle portion, which is the main content of a page. The fact is that every single page on the internet can be split on 3 parts. That means that every page can be Sharco Framework compatable.
What goes to the header and footer?
The logic is very simple. In English language, we are reading from the left to the right, and only then, from top to the bottom. The framework compiles the page using the same idea. The left part goes to the header, then the middle part goes to the content and the right part goes to the footer. Just remember this simple path:
The Header → The Content → The Footer
Using the same logic, now you can realize that if your page is supposed to have something at the top, but nothing on the left side, then that top part goes to the header. If your page is going to have something at the top AND on the left side, then both of those elements would go into the header.
Then, after the main content which is normally resides somewhere in the middle of your page, you may have a banner, a menu or something else on the right side. In this case, that right side is going to be the part of the footer. It may only seem confusing "Why are we calling the right - the footer, if it's not at the bottom but on the right!" Well, we are calling this the footer, because following our path it is suppose to appear after the main content area. To better memorizing this, just remember the following: Everything at the top and on the left side goes to the header. Everything on the right side and at the bottom goes to the footer. What you have left off is the middle area - the main content of the page.
Here are a few examples of a typical web page layout:
As you can see…
- In the 1st example, the header is at the top, and the content is in the middle. There's no footer.
- In the 2nd example the header is at the top, and the left column is also part of the header, which would probably consist the menu or something else. Then we've got the middle-right larger area for the content. Again, no footer here.
- In the 3rd example the header is at the top and the left side. We have the center column for the content area, and the right column is part of the footer.
- And finally in this example we have the header at the top, then the content in the left-middle area and the right column is now part of the footer.
Obviously there are a lot more different styles of the layout that can be created, but for the purpose of demonstration of the layout scheme these 4 examples should be enough.
How to create the header and the footer?
All the HTML code that normally goes into the BODY section of a standard HTML web page, can be entered and modified using the Framework Content applet. The Framework Content table has 2 check-box columns identifying the Header and the Footer. When you create a new record, just place the check into the check-box of either Header or Footer, and that's it. By doing so, you will enable the framework to use the content of those records at the appropriate location.
The content management control panel has build-in WYCIWYG type of Web Page Editor (see fig.2). One of the most important features of the Web Page Editor is the ability to generate HTML code for you in the background. This great feature of the editor would contradict to the logic of our own framework, when we want to split a page on 3 parts. Obviously, you can not use the Web Page Editor to create the header or the footer, because the header and the footer suppose to look like incomplete HTML code. That's the very essence of our framework - separating HTML code of the entire page on 3 different sections.
Therefore, you need to be able to type (or copy-and-paste) the raw code. For this purpose we have the Advanced button. The typical steps to create the header of the footer is to click on the new button to create a new record. When you do that for the first time, the Framework Content page will open the Web Page Editor. You can use this mode to enter some text and possible some images, but don't try to do any other formatting, because the Auto-Correction feature of the editor will prevent you from typing "Incomplete" HTML code, but that's what you really need - to type the incomplete code, because the other part of that code would reside in another record - the footer. Therefore, after typing just initial text, maybe adding an image or two, or you can even leave it completely blank, just click on the Create button to create this new record. Don't forget to give the label that record by providing the name, which is going to be used only internally. The first header should be called Header. As soon as the record created, you can click on the ADVANCED button next to that record. Now you should see the source code of that section, and in this mode you can type anything you want.
For your convenience, Our Web Site Content applet will remember the last mode you have been using, so when you click on the New button again, instead of Web Editor mode you will see the Notepad mode, so you will be able to create the footer easily. After you finish creating the Header and the Footer, you need to create at least one page. The default page (that's the page which opens when you type the address only in the address bar of a browser), should be called "Default".