Tutorial‎ > ‎


Site structure

The site you are on right now is actually built with Open Site Builder basing on the template provided by Google Page Creator. The only page maintained by means of GPC is a home page. Current GPC design dictate that at least the home page must be maintained by GPC but all other pages needn't. Here we will describe how the OSB site was built.

The first step is to download and install Open Site Builder so that you could access it in your browser by entering the following address:


OSB is a PHP program and needs PHP installed on your machine. If you do not have PHP (and Apache) installed you may use the official PHP package from http://www.php.net/ and Apache distribution from http://httpd.apache.org/ or use one of the integrated packages available on the net, like WAMP5, EasyPHP or many others that install and configure Apache/PHP/Mysql in seconds.

Our file structure is as follows:

index.html          (Home page, maintained by GPC)
start.html          (Introduction)
tutorial.html       (Tutorial) + 8 tutorial.*.html files
reference.html      (Reference) + 5 reference.*.html files
support.html        (Support)
links.html          (Links)

There are some more companion files:

flow1.png           (Template-Content-Target image)
g_hacks.css         (GPC browser hacks)
g_theme.css         (GPC theme layout)
menu-sample.png     (Menu sample for Introduction page)
osb.css             (Our own CSS markup)
osbtools-sitemap.xml(Sitemap file for the site)

The navigation is represented by main site menu and page submenus and contains links to each main section of a website in main menu and each subsection page when you are in Tutorial or Reference section. The current page in both menus is unlinked so that if you are on Tutorial / Site structure page than the Tutorial position is unlinked in the main menu and Site structure position is unlinked in submenu.

Download menu position is the only link that points to the outside resource and thus does not need any more maintenance. Other menu positions (like Introduction or Tutorial) need to have two representations: standard (linked) and active (unlinked) form. Then on each page we will define which menu position will use its active (unlinked) form. Other positions will by default be represented by links.

Let's proceed to the work layout.