Overview
The Layouts Section contains a subsection for each Page Set and a Default Layout section that applies to all Page Sets. The sections are all very similar and the subsection properties are explained here.
The subsection properties define
- the Layout for the site,
- the Static Content for the site, and
- the Page Scripts for the site.
Column widths are set in the Layout Widths Stylesheets section.
Default Layout Section
The values in the Default Layout section apply to all the pages in the site except when users assign values to the same properties in one of the other subsections. Each of the other subsections applies to a specific Page Set, whereas the Default Layout applies to all Page Sets.
So, when you assign a value to a property in the Default Layout section, it applies to all the pages in the site. If you want to make an exception for the Main Page, for example, you edit the same property in the Main Page section and assign it a different value. This arrangement provides the convenience of setting a value in one place with the flexibility of specifying different values for different pages.
Layout Property
The Layout property controls the main structure of the page. You can choose a Layout with one, two, or three columns, with fixed-width content or variable-width, and dozens of other alternatives.
The Layout names are codified because there are a lot of options and the names would be quite long otherwise; see the Layout Naming Rules section later on this page for an explanation.
When you choose a Layout, Second Site displays an icon that indicates the arrangement of the page sections in that Layout. The diagram colors are explained on the Layout Gallery page. That page shows all the Layout options and reviewing it will help to understand both the names and the Layout options.
Most Layouts are implemented via CSS styles. As a result, when you change one or more of the Layout properties, you can update the site using the File > Make Styles command rather than the more time-consuming File > Make Site command. In some cases, HTML files must be updated to apply the new Layout, and in that case, Second Site will warn you when you execute the Make Styles command.
Second Site assigns reasonable Layout choices when you create a new SDF file:
- The Default Layout.Layout property is set to "1 Col F Con Side-Xtra", a fixed-size, one-column layout where the SideBar and Extra Content sections are arranged below the Content section. The page contents are centered in the browser window.
- The Chart Pages.Layout property is set to "2 Col Chart Side Con BE", a Layout where the chart contents are free to expand beyond the width of the window.
It's important to use a Layout that accommodates wide content; charts can be extremely wide. With many Layouts, Internet Explorer will not honor the page layout rules, and wide content will make the page look like a mess. Use a Layout with "Chart" in the name. (Even though "Chart" is in the name, they are designed for any extra-wide content.)
- The Image Pages.Layout property is set to "1 Col LC Con Side-Xtra", a Layout where the image occupies the entire window width.
As with Chart Pages, it's important to use a Layout that accommodates wide content; images can be very wide. If you use a two column or three column Layout, and the image is wide, Internet Explorer will not honor the page Layout, and the page will look like a mess. Use "1 Col LC Con Side-Xtra", or for two columns, one of the Chart Layouts (Even though they have "Chart" in the name, they are designed for any extra-wide content.)
- The remaining Layout properties in other subsections are set to "Inherit", which means they use the Layout assigned to the Default Layout.Layout property.
- Con for the main Content section
- Side for the SideBar section
- Xtra for the Extra section
- Ftr for the Footer section
Those values will produce good results for most sites, but you may opt to change Layout values if your site includes SideBar menu entries or a lot of Static Content, among other possible motivations.
Frames Property
The Default Layout.Frames pull-down menu determines whether the site is framed or not. The choices are None and Side by Side. The default is None, meaning the site is not framed.
If you choose Side by Side, the site will be framed, and the surname index and name index pages will load in a thin, left-hand frame. The other pages will load in a wide, right-hand frame.
The Default Layout.Frames property applies to the site as a whole; there is no Frames property in any of the other subsections.
Use Frame Script
For framed sites, the Use Frame Script checkbox controls whether or not Second Site includes a script that forces content pages to be loaded into the frameset for links that point directly to the content pages and not to the frameset page. So, for example, if Use Frame Script is checked, links from an external site that point directly to a person page will open the person page briefly, and then the person page will be replaced by the frameset page, and the person page will be loaded into its frame within the frameset.
Scripts that manipulate frame content can be helpful but they can also be a nuisance. The scripts sometimes interfere with the browser's back button, an inconvenience for people who visit your site. The Frame Script requires JavaScript, and if the user who visits your site has JavaScript turned off or not available for some other reason, the script will not work and so the person page will load and not the frameset page.
The default value is unchecked.
When the frame script detects that it is being used on a local web site (when the protocol is "file", not "http" or "https"), the frame script will not attempt to force content pages into a parent frame. That functionality is not required when using a local site. Avoiding that behavior also avoids a security warning in Google Chrome that has negative side effects.
See the Index Page Links section for information about advanced uses for the framed-site script.
Static Content Properties
There are eight Static Content properties that apply to all Page Sets. Each property adds text to a particular part of the output pages. You can enter HTML, and you may also use script statements. (See the Built-in Dynamic Content Scripts page.)
To add Static Content for every page on the site, set the value of one of the properties in the Static Content section of the Default Layout subsection such as Default Layout.Extra Footer.
To customize a Static Content property for a particular Page Set, such as Person Pages or Charts, you must select the Override checkbox associated with the text value.
For example, to enter text in the Main Page.Extra Sidebar textbox, you must select the Main Page.Extra Sidebar Override checkbox.
If you select an Override checkbox and leave the associated textbox empty, the Static Content for that property will be empty.
See the Static Content page for more information.
Page Script Properties
Pages are divided into sections, and the content and format of each section is determined by a Page Script. Second Site includes a library of Page Scripts, and users can choose a script for each page segment based on their preferences.
See the Page Scripts page for more information.
Include Prev/Next Links
The Include Prev/Next Links checkbox is included on the Person Indexes, Person Pages, Source Pages, and Place Indexes sections. When checked, those pages will include links to the previous page and the next page in the series. The default is on (checked) for Person Indexes and Place Indexes. The default is off (unchecked) for Person Pages and Source Pages.
Layout Naming Rules
The structure of the names are as follows:
| Field | Value | Meaning |
|---|---|---|
| Columns | 1 Col | One column |
| 2 Col | Two columns | |
| 3 Col | Three columns | |
| Type | F | Fixed Centered—Each of the columns has a fixed width and the contents are centered in the browser window. The fixed section will shrink if the browser window is not wide enough. |
| FL | Fixed Left—Each of the columns has a fixed width and the contents are left-adjusted in the browser window. The fixed section will shrink if the browser window is not wide enough. | |
| FS | Fixed SideBar—The SideBar section is in its own column, and its width is fixed. The remaining columns expand or contract based on the width of the browser window. | |
| FX | Fixed Extra—The Extra section is in its own column, and its width is fixed. The remaining columns expand or contract based on the width of the browser window. | |
| LC | Liquid Content—The Content column expands or contracts to fit the browser window; the other columns are fixed. | |
| P | Percentage—Each of the columns is assigned a percentage width relative to the width of the browser window. | |
| S | Static Width—A variation of the Fixed Centered Layout where the fixed-width section will remain the same width even if it is wider than the browser window. I do not recommend the use of static Layouts. Pages with static Layouts will be difficult to use on mobile devices. | |
| SL | Static Width Left—A variation of the Fixed Left Layout where the fixed-width section will remain the same width even if it is wider than the browser window. I do not recommend the use of static Layouts. Pages with static Layouts will be difficult to use on mobile devices. | |
| Column Codes | Con Side Xtra Ftr | Column sequence—The column sequence is described using short codes in the sequence of the columns.
For one column layouts, a minus sign (-) between two codes means that the two sections share a column. For example, in "1 Col F Con Side-Xtra", the Content section gets a column of it's own and the SideBar section is next to the Extra section in the same column. For two column layouts, a plus sign (+) between two codes means that the first section is above the second. For example, in "2 Col F Side+Xtra Con", the SideBar section is above the Extra section in the same column, and the Content section gets a column of it's own. If the Footer section is not included in the sequence, as is the usual case, the Footer is below all the columns. The notation Con+Ftr means the Footer is positioned directly below the Content. |
| Bottom Extra | BE | The code "BE" at the end of the name indicates that the Extra section is a wide section stacked below the other two columns. |
There are a few Layouts whose names do not follow the structure shown above.
As described above, any Layout with the word "Chart" in the name is intended for content that exceeds the width of the browser window such as occurs in box charts.
There are also some special purpose Layouts. The "1 Col LC Border" Layout is intended for sites that use a Theme that includes a graphic border of vertically-repeating images on the left-hand side of the page. The "Left-Hand Frame Page" Layout is used for pages that load in the left-hand frame of a Side by Side site.
Custom Layouts
The following information is intended for advanced users.
The Layouts folder and subfolders can be extended via the User Data Folder mechanism, so users can create custom Layouts. Layouts are complicated, and most users should use one of the 40+ Layouts provided with Second Site.
A Layout is defined by a subfolder in the Layouts folder. The name of the subfolder determines the name of the Layout. The subfolder must contain a Layout.sss Layout script. The subfolder may contain a layout.htm file if necessary; see the Layout HTML section in this document.
Layout Scripts
Layout scripts determine the CSS properties for a Layout. They are similar to Stylesheet scripts, but they are specific to particular Page Sets (whichever Page Sets use the Layout) and they should not alter the look of the site.
Layout scripts refer to values in the Stylesheets.System.Layout.Layout Widths section to determine the user's preference for column widths, etc.
See one of the Layouts supplied with Second Site for an example of a Layout script.
Layout HTML
The Layout HTML file layout.htm is optional. If there is no layout.htm file in the Layout subfolder, Second Site will use the default layout.htm file. Most of the Layouts supplied with Second Site use the default layout.htm file.
Layout HTML files define the HTML "shell" that surrounds the HTML generated by the program. A valid Layout HTML file must contain DIV elements (or other elements) with the proper element IDs. Without the proper elements and element IDs, stylesheet scripts and page scripts will not produce the expected results.
The structural HTML elements for a Second Site page are more complex than usual for HTML pages. The default layout.htm file that is used by most Layouts must be flexible enough to accommodate a wide variety of Layouts, Themes and user-variable stylesheet properties. As a result, there are multiple nested DIV elements, some or most of which would not be necessary in a hand-crafted page.
There is some additional complexity because the files contain a mix of HTML code and script statements. The script statements are delimited by <% and %> characters. The script statements call Page Script functions that return the content of the page.
Here is the default layout.htm Layout HTML file as of Second Site Version 2.0:
Layout.htm
<%=GetHead()%>
<body id="<%=Page.PageSetID%>">
<div id="container"><%=GetTopMenu%>
<div id="headerw"><div id="header"><%=GetHeader()%><div class="stretch"></div></div></div>
<%=GetMenuBar%>
<div id="wrapper">
<div id="contentw"><%=GetContent()%></div>
</div>
<div id="sidebarw"><div id="sidebar"><%=GetSideBar()%></div></div>
<div id="extraw"><div id="extra"><%=GetExtraContent()%></div></div>
<div id="footerw"><%=GetFooter()%></div>
<div class="stretch"></div>
</div>
<div id="pup"></div>
</body></html>
Second Site supports a special expression to access function results. <%=expression%>, a variable or function name preceded by an equal sign, will insert the value of the expression in the output file in place of the delimited expression. That expression is used multiple times in the default layout.htm file.
Index Page Links
The following information is intended for advanced users.
For framed sites created with Use Frame Script checked, you may create links that load specific content pages into the frameset. You control which pages are loaded using arguments of this general form:
framename=filename.htm
Valid framenames are "ssmain" and "ssindex".
So, for example, to load the main content frame with person page 17, create a link as follows:
<a href="index.htm?ssmain=p17.htm">Page 17</a>
To load the main content frame with person page 17 and scroll to a specific person on that page, create a link as follows. The example assumes that the person's TMG ID# is 85:
<a href="index.htm?ssmain=p17.htm;i85">J. Doe</a>
Note that the "i85" portion of the HRef is called an anchor and refers to a specific HTML element on the content page. On Person Pages, Second Site assigns anchors to each person. The anchor begins with "i" and is followed by the person's TMG ID number.
Using the HRef format described above, you can specify the content page for multiple frames. To specify pages for both the left-hand frame ("ssindex") and the right-hand frame ("ssmain"):
<a href="index.htm?ssindex=i1.htm&ssmain=p17.htm;i85">J. Doe</a>
This page last changed on 16 Feb 2016.