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; }
}