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