So, you've published your first test site but it it's not clear how those templates fit together or are called from the index page...
Before reading the following I should stress that not all NP index pages are the same in concept. The example given is one of the more complex. Use this as a guide when interpreting the structure of other NPA sites - don't be too literal in expecting to see everything below in sites other than 'Lightbox'. For instance, 'Bravado' doesn't use IFrames at all. Some template sets use IFrames just for the search pane, e.g. 'Effervescence' whilst in 'Showcase' the content is almost entirely in IFrames.
The following description is based on a straight output - no customisation bar the site title (#1 below) - of the NP 'Lightbox' template, and the green CSS option was used. Here we will look at how the 'Site' pane of NetPublish Assistant (NPA)affects the output, shown immediately below it:
It would appear the output content area is 800 pixels wide by 560 pixels deep; this excludes browser toolbars, scroll bars, etc. Oddly, the page code defines the main table as 452 pixels high, the presumption must be that the page's template designer supposed it to fit inside 800x600 browser window. Anyway, it is this 'fixed' size layout approach that is the reason the NPA dialog advises recommended dimensions for user-suggested areas and also why the structure of the sites can be hard to understand for customisation purposes.
When referring to NP uploading files, this may be as little as copying files locally if the client and web server are physically located on the same computer.
What is an IFrame?
For occasional HTML coders an IFrame (Inline Frame) is best thought of as a frame within a page, with the referred-to page's content being displayed 'inline' in the page, just as with an image. In short, you describe a section within your current page as an IFrame, indicate another page as its contents and the latter page is rendered as content; unless IFrame height/width attributes are set, IFrames default to a 300w x 150h 'window'. The IFrames used will vary by template, this FAQ is based on the NPA's 'Lightbox' template. Those familiar with code will note that the sizes defined for some IFrames don't accord with the content in use; most likely this is due to the fact that the IFrame structure varies between template sets.
IFrames Pros/Cons
Pros:
Cons:
#1 - Site Title
The text you enter here appears as the site title in the web browser window's title bar. As the site uses design uses IFrames (dynamic page includes) for the changing content sections, this title remains visible as the 'top' level window never changes as you navigate the site.
#2 - Site Logo
Here you see the default NP graphic. You can add your own logo graphic via NPA which will appear in this position. Note that while the NPA dialog suggests a logo no bigger than 150w x 90h, the default loge is 159w x 73h. The code embedding the logo is not in this pages code but in the Header IFrame (see next section). If you don't want the Extensis logo here and don't want a logo at all I suggest you provide a blank GIF or
#3 / #4 - Header and Footer
In this format these are mostly just wasted 'white' space but you can supply your own pages instead which could more usefully display site links, branding, logos etc. You just create a proper HTML page with links, logos etc and point to it via the 'Browse' button and NPA imports the assets and uploads them to the site. NPA suggest the maximum dimension of each of these header/footer pages are 600w x 90h. The Site Logo (above) is defined in the Header IFrame, via the "top.html" page. some if you want a site logo and provide your own page, place it in the page provided as the header resource.
#5 Welcome page
Setting this will allow NPA to import a page which becomes the 'index' or home page for the site and is displayed in the 'Main' IFrame when the site first opens. Size for custom home pages is suggested as 480w x 480h though its host IFrame is defined as 602w x 300h. The link specified by the tick box is the link applied to the Site Logo graphic. The page show above is that created if no user home page is specified. If the link to homepage link is unchecked, clicking the Site Logo returns you to this 'master' page.
The Home page's code
Below is the HTML code for a default home page from NPA's output. There are 6 IFrames embedded in the page, highlighted in red. Note the IFrame 'Gray' which is used to draw a single pixel line beneath both 'Search' and 'Main' and above the 'Favorites' IFrame. The latter houses items placed in the users lightbox/cart/collection. Here is the code:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Portfolio NetPublish Lightbox Test Site</title>
</head>
<body style="margin:0px" bgcolor="FFFFFF">
<table cellpadding="0" cellspacing="0" border="0" height="452">
<tr>
<td height="130" colspan="2" valign="top">
<iframe name="header" id="header" src="/res/sites/LightboxTest/resources/top.html" scrolling="no" width="800" height="130" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</td>
</tr>
<tr>
<td width="198" height="300" valign="top">
<iframe name="search" id="search" src="/netpub/server.np?base&site=LightboxTest&template=search.np&searchCatalog=catalog" scrolling="auto" width="198" height="300" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</td>
<td>
<iframe name="main" id="main" src="/res/sites/LightboxTest/resources/default.html" scrolling="no" width="602" height="300" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</td>
</tr>
<tr>
<td height="1" colspan="2" valign="top">
<iframe name="gray" id="gray" src="/res/sites/LightboxTest/resources/gray.html" scrolling="no" width="800" height="1" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</td>
</tr>
<tr>
<td height="98" colspan="2" valign="top">
<iframe name="favorites" id="favorites" src="/netpub/server.np?show&site=LightboxTest&catalog=catalog&template=collection.np&sorton=Filename" scrolling="auto" width="800" height="98" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</td>
</tr>
<tr>
<td height="30" colspan="2" valign="top">
<iframe name="footer" id="footer" src="/res/sites/LightboxTest/resources/bottom.html" scrolling="no" width="800" height="30" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</td>
</tr>
</table>
</body>
</html>
Question: Anatomy of an IFrame-ed NP site index page [FAQ00128.htm]
Last Update:- 18 August 2009
Site and articles © Mark Anderson 2001-2007 - Visit my home page
