Web Pages
The asciidoc(1) command converts AsciiDoc source files to HTML web pages.
The AsciiDoc source files are plain text files with a .txt file name extensions and are located in the AsciiDoc distribution examples/website directory.
AsciiDoc commands to build the entire website are executed by an A-A-P script.
AsciiDoc Configuration File
The asciidoc.conf AsciiDoc configuration file customizes the web pages content (menus, headings, footers).
#
# Asciidoc configuration file for example AsciiDoc generated website.
#
[attributes]
author=Stuart Rackham
email=srackham@methods.co.nz
[specialwords]
emphasizedwords=\bAsciiDoc\b
monospacedwords=\basciidoc\(1\)
[header]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="AsciiDoc {asciidoc_version}" />
<meta name="author" content="{author}" />
<meta name="author-email" content="{email}" />
{index-only}<meta name="description" content="AsciiDoc Example Website" />
{index-only}<meta name="keywords" content="text to HTML, text to DocBook, text to LinuxDoc, text to XML, AsciiDoc, Python installer, Python execution environment" />
<link rel="stylesheet" href="main.css" type="text/css" />
<title>{doctitle}</title>
</head>
<body>
<div id="header">
<img src="header.png" alt="Header" />
</div>
<div id="menu">
<a href="index.html">Overview</a>
<a href="webpages.html">Web Pages</a>
<a href="aap-script.html">A-A-P Script</a>
<a href="execution-environment.html">Execution Environment</a>
<a href="installation-wizard.html">Installation Wizard</a>
<a href="cdrom-creation.html">CD-ROM Creation</a>
<a href="links.html">Links</a>
<a href="feedback.html">Feedback</a>
</div>
<div id="content">
<h1>{doctitle}</h1>
[footer]
</div>
<div id="footer">
<p>
Website built using <a href="http://www.methods.co.nz/asciidoc/">AsciiDoc</a>
and <a href="http://www.a-a-p.org/">A-A-P</a><br/>
Last updated {localdate} {localtime} <br/>
</p>
<p><span class="ahem">This document might look funny (or very plain) to you,
since you're not using a browser which (correctly) supports CSS.</span></p>
</div>
</body>
</html>
[tags]
title1=<h1>|</h1>
title2=<h2>|</h2>
title3=<h3>|</h3>
[graphic-right]
<div class="graphic-right">
<p><img src="{target}" alt="{caption={target}}"/></p>
<p class="caption">{caption}</p>
</div>
[quoteblock]
<div class="quoteblock">
|
</div>
Web Site CSS2 Stylesheet
The main.css file is a CSS2 stylesheet that customizes content presentation.
/*
Main stylesheet.
*/
body {
margin: 0;
padding: 0;
background-color: white;
background-image: url(sidebar.png);
background-position: 0 0;
background-repeat: repeat-y;
background-attachment: fixed;
}
div#content {
background-color: transparent;
min-height: 350px;
margin: 5px 25px 25px 170px;
padding: 10px;
}
div#content a {
font-weight: normal;
text-decoration: underline;
}
div#content a:link {
color: #00c;
}
div#content a:hover {
color: #f60;
}
div#menu {
position: absolute;
top: 70px;
left: 0px;
width: 157px;
}
div#menu a {
display: block;
padding: 5px 0px 5px 10px;
margin: 0px;
text-align: left;
text-decoration: underline;
color: rgb(63,82,148);
font: bold 12pt Arial, sans-serif;
}
div#menu a:hover, div#menu a:focus {
color: #f60;
}
h1,h2,h3,h4 {
color: rgb(63,82,148);
font: normal bold medium Arial, sans-serif;
letter-spacing: 0.25em;
}
h1 {
font-size: 16pt;
background: rgb(255,254,234);
margin: 0 -13px 15px;
padding: 2px 0 2px 29px;
border-top: 2px solid rgb(152,166,211);
border-bottom: 2px solid rgb(152,166,211);
}
h2 {
font-size: 12pt;
letter-spacing: 0.2em;
text-decoration: underline;
margin: 1em 0 0.25em 14px;
}
p {margin: 0 14px 1em;}
ul,ol {
margin-top: 0;
margin-left: 1.25em;
padding: 0 1em;
list-style-position: outside;
}
em { font-weight: normal; font-style: italic;}
li { padding-bottom: 0.25em; }
dl { padding: 0 1em; }
dt { font-weight: bold; }
dd p, li p { margin: 0; padding: 0; }
li div.literalparagraph { margin-left: 0; }
div.literalparagraph pre, li div.literalparagraph pre { margin-left: 2%; }
div#header {
margin: 15px 0 0 195px;
}
div#footer {
clear: both;
background: rgb(255,254,234);
font: 8pt sans-serif;
margin: 0 25px 2px 167px;
padding: 0;
position: relative; /* IE6 loses paragraph without this. */
bottom: 0;
border-top: 2px solid rgb(152,166,211);
border-bottom: 2px solid rgb(152,166,211);
}
div#footer p {
margin: .5em 0 0 15px;
}
div#footer a {
color: #00c;
background: transparent;
font-weight: normal;
text-decoration: underline;
}
div#footer a:hover, div#footer a:focus {
color: #f60;
}
div#badges {padding: 0 12px 5px 12px;}
div#badges td {vertical-align: middle;}
div#badges img {padding-right: 20px; border-style: none;}
div.graphic {
border-style: none;
}
div.graphic img {
margin: 0;
padding: 0;
/* border: 2px solid rgb(152,166,211); */
}
/* graphic caption */
p.caption {
margin: 0 14px 1em;
font-style: italic;
}
div.literalparagraph { margin: 0 1em 1em; }
div.literalblock { margin: 0 1em; }
div.listingblock {
background: #e8e8e8;
margin: 0.5em -9px 1em 14px;
padding: 0.5em 1em;
}
div.sidebarblock {
background: rgb(255,254,234);
margin: 0.5em -9px 1em 14px;
padding: 0.5em 1em;
border: 2px solid rgb(152,166,211);
}
div.sidebarblock p { margin-left: 0; }
div.sidebarblock * { padding-left: 0; }
div.sidebarblock div { margin: 0; }
p.sidebartitle { font-family: sans-serif; font-style: italic; }
div.quoteblock {
margin: 0.5em 35% 0.5em 14px;
padding: 0;
}
div.quoteblock p { font: italic medium serif; }
div.quoteblock p { margin-left: 0; }
div.quoteblock * { padding-left: 0; }
div.quoteblock div { margin: 0; }
div.admonition div.icon {
float: left;
width: 56px;
}
div.admonition div.text {
margin-left: 56px;
padding-top: 1px;
}
div.admonition div.text * { padding: 0; }
div.clear {
clear: both;
}
/* Display for browsers that don't understand stylesheets. */
.ahem { display: none; }
/* Print nicely. */
@media print {
@page { margin: 10% } /* This _is_ valid CSS2. */
h1,h2,h3,h4 { page-break-after: avoid; page-break-inside: avoid }
blockquote,pre { page-break-inside: avoid }
ul,ol,dl { page-break-before: avoid }
/* Override existing property settings. */
div#header { margin: 20px 0 0;}
div#content { margin: 0; border: 0; }
div#menu, div#footer { display: none; }
}