Updated, at last, on August 14, 2001
Here are various code snippets useful for O'Reilly Network article production. Some of these examples are subject-specific, and might need to be modified for a specific site -- not all combinations are shown.
Article top for a simple single-page article with one author:
<h2>
<csfield name="title"></h2>
<csfield name="id_author" before="by " hrefaction="pub"><br />
<csfield name="date">Article top for a simple multi-page article with multiple authors:
<!--CS_PAGE_BREAK-->
<h2>
<csfield name="title"></h2>
<csfield name="id_author" before="by " hrefaction="pub"><br />
<csfield name="date">Article top for a multi-page article that is part of a column (this puts the column branding and link at the top of the article, and assumes that the author name appears on the column tile):
<!--CS_PAGE_BREAK-->
<csinclude record="ct/{id_coltype}" template="ct/graphic_link.view">
<h2>
<csfield name="title"></h2>
<csfield name="date"><br clear="all">Page break (place in between each page):
<csinclude template="a/multipage_bottom.view">
<!--CS_PAGE_INDEX-->
<csinclude template="a/multipage_bottomb.view">
<a href="<!--CS_NEXT_REF-->">
<csinclude template="a/multipage_bottomc.view">
<!--CS_PAGE_BREAK-->
<csinclude template="a/multipage_top.view">
<!--CS_PAGE_INDEX-->
<csinclude template="a/multipage_topb.view">Footer for a BSD article, not part of a column:
<p><i>
<csfield name="id_author" after=" " hrefaction="pub">
<csquery path="q/93" where="cs_rid = '{id_author}'"></i></p>
<hr size="1" noshade />
<p>Return to the <a href="/bsd/">BSD DevCenter</a>.</p>
Footer for a BSD article that IS part of a column:
<p><i>
<csfield name="id_author" after=" " hrefaction="pub">
<csquery path="q/93" where="cs_rid = '{id_author}'"></i></p>
<hr size="1" noshade />
<csinclude record="ct/{id_coltype}" template="ct/article_link.view">
<p>Return to the <a href="/bsd/">BSD DevCenter</a>.</p>Code for a graphic with caption. After inserting the graphic, set the table width to be equal to the image width. Items in all caps indicate things you need to fill in.
<table width="WIDTH" cellpadding="0" cellspacing="10"><tr><td><p class="tiny">GRAPHIC HERE<br />
CAPTION HERE</p></td></tr></table>
Pop-up Window for a graphic (you can change the height and width of the window as needed; this will use an 800x600 window -- usually you need to use a window that is about 40 pixels wider and 40 pixels taller than the graphic itself.
<a href="FULL-SIZE GRAPHIC PATH AND FILENAME" onClick="window.open('FULL-SIZE GRAPHIC PATH AND FILENAME','Demo','toolbar=no,width=800,height=600,status=no,location=no,scrollbars=yes,resizable=yes,menubar=yes');return false">THUMBNAIL IMG TAG HERE</a>
Code that will pull in a "related" article name and link (substitute the article record number for XXXX)
<csinclude record="a/XXXX" template="a/related.view">Code that will pull in a "related" article name and link with description (substitute the article record number for XXXX)
<csinclude record="a/XXXX" template="a/related_desc.view">A generic sidebar
<!-- sidebar begins -->
<table width="170" border="0" cellspacing="12" cellpadding="6" align="right"><tr><td width="170" valign="top" bgcolor="#efefef">
<p class="headline">title here</p>
<p class="smalltext"></p>
<p class="smalltext"></p>
<p class="smalltext"></p>
</td></tr></table>
<!-- sidebar ends -->Sidebar "saver" -- use at top of article to keep other sidebars from moving around due to the megabanner scripting.
<!-- sidebar begins -->
<!-- don't move sidebars -->
<!-- sidebar ends -->Sidebar "saver" -- use at the top of the article to get the megabanner to come in at the first paragraph of "real" text. Megabanners will come in at the second consecutive paragraph, so if there is only one paragraph and then a subheading done with H3, insert this before the first paragraph.
<!-- This empty paragraph for megabanner work-around -->
<p style="margin: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; font-size: 1px;"></p>
Talkback sidebar -- use this to insert a graphic and link to a talkback. In this example, the article is 3 pages long -- substitute appropriate page number as needed.
<!-- sidebar begins -->
<table width="170" border="0" cellspacing="8" cellpadding="4" align="right">
<tr>
<td width="170" valign="top" bgcolor="#efefef">
<p class="secondary"><a href="/pub/a{cs.r.file}?page=3#thread"><img src="/images/talkback.gif" alt="Comment on this article" width="40" height="30" border="0" align="left" hspace="5" vspace="3"></a><csfield name="tb_lead"><br />
<b><a href="/pub/a{cs.r.file}?page=3#thread">Post your comments</a></b></p>
</td></tr></table>
<!-- sidebar ends -->
Article mockup with styles -- I use this to work on articles on my local drive, so I can get an idea of how the layout will actually look when I upload the file. Just insert all of the article stuff into the large blank area:
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
if (navigator.userAgent.indexOf('Win') != -1 ) {
if (navigator.appName.indexOf('Microsoft') != -1)
document.write('<link rel="STYLESHEET" type="text/css" href="http://www.oreillynet.com/styles/pc-px-msie.css">');
else
document.write('<link rel="STYLESHEET" type="text/css" href="http://www.oreillynet.com/styles/pc-px-net.css">');
}
else if (navigator.userAgent.indexOf('Mac') != -1 )
document.write('<link rel="STYLESHEET" type="text/css" href="http://www.oreillynet.com/styles/mac-px.css">');
else
document.write('<link rel="STYLESHEET" type="text/css" href="http://www.oreillynet.com/styles/linux-px.css">');
//-->
</script>
<noscript>
<link rel="STYLESHEET" type="text/css" href="http://www.oreillynet.com/styles/linux-px.css">
</noscript>
</head>
<body>
<table width="450" cellspacing="0" cellpadding="0" border="0"><tr><td>
</td></tr></table>
</body>
</html>