The Anatomy Of Your New Page, Part 2, Top To Bottom

THL Toolbox > Developers' Zone > Web Development > Creating A New Page - Global Vs Template Files Explained > The Anatomy Of Your New Page, Part 2: Top To Bottom

The Anatomy Of Your New Page, Part 2: Top To Bottom


Here we will briefly analyze every line of the basic two-column template (see code or external link: view page). The two-column layout are for pages such as the present one that have their main content in the larger left-hand div, while the right-hand div contains the side-column menu with links to other pages in that part of the site. The banner, the navigational links in the top bar, and the side-column links are all often shared by pages in the same section or "portal" on THL. This is done through a series of PHP includes.

The Header

The header of the THL page is the section of the HTML which is included within the <head> element. In order to maintain the THL look and feel throughout the site, this code is standardized and shared among all THL pages with the use of a PHP include. The included code contains links to the standard THL CSS stylesheets and script tags calling THL scripts for standard functionality of the pages. The standard include call in all THL pages looks like this:

<? $droot = $_SERVER['DOCUMENT_ROOT'];  ?>
<? include_once  "$droot/global/php/header.php" ; ?>

The first line here set a variable, $droot, to the location on the server where the THL files are located. This is necessary for locating the included files in the rest of the template. The second line is a PHP include that includes the code of the global header.php file at this point in the page. This file contains the opening HTML of all THL pages including the doctype definition, the page title, the css, and the javascript references. These are all standard for all THL pages.

However, in some situations, a developer may want to add particular CSS or JS files only to specific pages on the site. There is a way to do this by using the $add_header variable. This variable must be declared before the last line above that includes the header. A developer can put the text for all code s/he wants included in the header in this variable. An example is found in the external link: literary encyclopedia:

<? $add_header = '
   <link rel="stylesheet" type="text/css" href="/encyclopedias/literary/css/literary.css" media="all" />
   <script type="text/javascript" src="/encyclopedias/literary/js/literary.js"> </script>
 '; ?>

Notice that the value of the variable $add_header is set between single quotes because the value itself contains code that has double quotes in it. Also, as the line-return is another string character, multiple lines can be included within the value for $add_header.

This code then gets inserted before the close of the HTML head tag of the resulting code.

The Body

<body class="NAME-OF-THDL-DOMAIN-HERE">


When you are making a new page, you replace the "NAME-OF-THDL-DOMAIN-HERE" with the name of the THL "domain" for which the page is being made, for example, if you are making a "Reference" page, you would change the above to:

<body class="reference">


Doing so will make the navbar link for Reference appear in red on a white background, indicating the domain in which this new page exists. That mechanism is controlled in the /global/css/nav_thdl.css, and will be explained in "How to Make a Portal" section of the Manual.

The css that controls the usual body tag elements is in /global/css/thdl_layout.css.

Masthead

<!-- begin masthead php -->
<? include_once "$droot/global/php/masthead.php" ; ?>
<!-- end masthead include -->


The masthead.php file displays the logo and banner. It also includes the masthead-utility.php file, which displays the menu and options links in the very top of the page; the masthead-navbar.php file, which displays the main horizontal nav links; and the masthead-search.php file, which is empty pending decision on where to put the Search box.

The masthead.php file is frequently overridden, mainly in order to also override the masthead-navbar.php, so you can create non-standard navigation for large Portals and etc. The overriding mastheads are found in the root director of the portal or section of the site that uses them and are called masthead-{portal name}.php. For the the home page and and most of the 2nd-level pages it's just the /global/php/masthead.php file, but custom ones are found in {sub-site dir}/masthead-{dir name}.php. For instance, the Canon catalogs use /encyclopedias/literary/canons/masthead-canons-cats.php

These small files contain the markup for the logo and the banner, plus includes for the nav bar just under the banner and the side column. The side-column include generally points to a file in /global/php/masthead-utility.php and this file has code that looks for the side-column.php file either in the directory in question or its parent directory. This code for determining which side-column.php file to use is:

<div id="fxSideMenu">
  <div id="fxSideMenuContent">
  <?
   $dir = explode( "/" , $_SERVER['SCRIPT_NAME'] ) ;
   array_pop( $dir ) ;
   $dir = implode ( "/" , $dir ) ;
   $f = "$droot$dir/side-column.php" ;
   if ( file_exists( $f ) ) {
   include_once "$droot$dir/side-column.php" ;
   } else {
   $f = "$droot$dir/../side-column.php";
   if ( file_exists( $f ) ) {
   include_once "$droot$dir/../side-column.php" ;
   }
   }
  ?>
  </div>
</div>

Main Content

<!-- begin content -->
<div id="content">
<div class="shell-1">

<h1>(PAGE TITLE HERE)</h1>

<p>
(PRIMARY CONTENT HERE)
</p>

</div></div><!-- end content -->


Pretty clear what's going on there. The text of the <h1> tag is automatically put into the browser's title through javascript. (The "SetBrowserTitle" function in the fn.js file is called once the page loads.) Thus, one should title the pages accordingly using sufficiently descriptive text, such as "THDL Places" instead of the more ambiguous "Places".

Side Column


<!-- begin side column -->
<div id="side-column">
<div class="shell">

<? include_once "$droot/template/side-column.php" ?>

</div></div><!-- end side column -->


The side-column.php file controls the accordion menus on the right side of most pages. It is virtually always overridden, but more on that elsewhere.

Footer

<!-- begin footer include -->
<? include_once "$droot/global/php/footer.php" ; ?>
<!-- end footer include -->


Also overridden for non-standard Portal pages, if you are making a standard THL web page you should leave the footer alone.

Etc.

</body>
</html>
<!-- begin footer utility include -->
<? include_once "$droot/global/php/footer-utility.php" ; ?>
<!-- end footer utility include -->


And finally, the end of the page, body and html tags close; the footer-utility.php file is for some pretty messy business that you don't need to worry about for general page development purposes.


Ok, now you can go back to the Creating A New Page - Global Vs Template Files Explained and head to the bottom of the page for the very last step.

Provided for unrestricted use by the external link: Tibetan and Himalayan Library