1.1 --- a/docs/design.html Tue Nov 08 19:02:02 2005 +0000
1.2 +++ b/docs/design.html Tue Nov 08 19:04:00 2005 +0000
1.3 @@ -1,12 +1,9 @@
1.4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.5 -<html xmlns="http://www.w3.org/1999/xhtml">
1.6 -<head>
1.7 +<html xmlns="http://www.w3.org/1999/xhtml"><head>
1.8 <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
1.9 - <title>Creating Applications: Design a Template</title>
1.10 - <meta name="generator"
1.11 - content="amaya 8.1a, see http://www.w3.org/Amaya/" />
1.12 - <link href="styles.css" rel="stylesheet" type="text/css" />
1.13 -</head>
1.14 +
1.15 + <title>Creating Applications: Design a Template</title><meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" />
1.16 + <link href="styles.css" rel="stylesheet" type="text/css" /></head>
1.17 <body>
1.18 <h1>Creating Applications: Design
1.19 a Template</h1>
1.20 @@ -24,7 +21,7 @@
1.21 <h2>The Template Outline</h2>
1.22 <p>In raw HTML - that is, the code which defines how a Web page is made
1.23 - we may wish to design the skeleton (or outline) of the page:</p>
1.24 -<pre><?xml version="1.0"?><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>Example</title><br /></head><br /><body><br /><form action="" method="POST"><br /><br /><!-- Template text between the start and the interesting part. --><br /><br /><!-- The interesting part which we will design below. --><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre>
1.25 +<pre><?xml version="1.0"?><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>Example</title><br /></head><br /><body><br /><form action="" method="post"><br /><br /><!-- Template text between the start and the interesting part. --><br /><br /><!-- The interesting part which we will design below. --><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre>
1.26 <p>Most visual editors for Web pages will add such details
1.27 automatically when creating a new page, but there are a few things to
1.28 remember to check:</p>
1.29 @@ -33,8 +30,7 @@
1.30 choose to create XHTML pages. We casually refer to our XHTML templates
1.31 as being "HTML" throughout this documentation, and the well-formed
1.32 stipulation is just assumed, but it should be noted that old-style
1.33 -ill-formed HTML, where start and end tags need not match, will <span
1.34 - style="font-style: italic;">not</span> work with XSL transformations
1.35 +ill-formed HTML, where start and end tags need not match, will <span style="font-style: italic;">not</span> work with XSL transformations
1.36 and will therefore <span style="font-style: italic;">not</span> work
1.37 with XSLForms.</li>
1.38 <li>We add a <code>form</code> element to the outline so that
1.39 @@ -46,11 +42,10 @@
1.40 label and a text field. Alongside these things, we may also wish to
1.41 have a button which can be pressed to remove that item from its list.
1.42 The visual representation of this might resemble the following:</p>
1.43 -<form method="post" action="" name="structure">
1.44 +
1.45 <p>Some
1.46 -item: <input name="value" value="some value" /><input name="remove"
1.47 - value="Remove" type="submit" /> </p>
1.48 -</form>
1.49 +item: <input name="value" value="some value" /><input name="remove" value="Remove" type="submit" /> </p>
1.50 +
1.51 <p>The HTML code which produces this representation might look like
1.52 this:</p>
1.53 <pre><div><br /> <p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /></div></pre>
1.54 @@ -67,13 +62,11 @@
1.55 the above design for the items by adding some additional text and a
1.56 similar label, field and button arrangement for each of the subitems.
1.57 For example:</p>
1.58 -<form method="post" action="" name="hierarchical">
1.59 - <p>Some item: <input name="value" value="some value" /><input
1.60 - name="remove" value="Remove" type="submit" /></p>
1.61 +
1.62 + <p>Some item: <input name="value" value="some value" /><input name="remove" value="Remove" type="submit" /></p>
1.63 <p>Itself containing more items:</p>
1.64 - <p>Sub-item: <input name="subvalue" value="some other value" /><input
1.65 - name="remove2" value="Remove" type="submit" /></p>
1.66 -</form>
1.67 + <p>Sub-item: <input name="subvalue" value="some other value" /><input name="remove2" value="Remove" type="submit" /></p>
1.68 +
1.69 <p>This representation might be expressed in HTML as follows:</p>
1.70 <pre><div><br /> <p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <p><br /> Sub-item: <input name="subvalue" type="text" value="some other value" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /></div><br /></pre>
1.71 <p>In the above example, the <code>div</code> element encloses the
1.72 @@ -90,15 +83,13 @@
1.73 We can thus extend our visual representation to incorporate such
1.74 details. For example:
1.75 </p>
1.76 -<form method="post" action="" name="hierarchical">
1.77 - <p>Some item: <input name="value" value="some value" /><input
1.78 - name="remove" value="Remove" type="submit" /></p>
1.79 +
1.80 + <p>Some item: <input name="value" value="some value" /><input name="remove" value="Remove" type="submit" /></p>
1.81 <p>Itself containing more items:</p>
1.82 - <p>Sub-item: <input name="subvalue" value="some other value" /><input
1.83 - name="remove2" value="Remove" type="submit" /></p>
1.84 + <p>Sub-item: <input name="subvalue" value="some other value" /><input name="remove2" value="Remove" type="submit" /></p>
1.85 <p><input name="add2" value="Add subitem" type="submit" /></p>
1.86 <p><input name="add" value="Add item" type="submit" /></p>
1.87 -</form>
1.88 +
1.89 <p>This representation might be expressed in HTML as follows:</p>
1.90 <pre><div><br /> <p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <p><br /> Sub-item: <input name="subvalue" type="text" value="some other value" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /> <p><br /> <input name="add2" type="submit" value="Add subitem" /><br /> </p><br /></div><br /><p><br /> <input name="add" type="submit" value="Add item" /><br /></p><br /></pre>
1.91 <p>In the above example, the new buttons have been added alongside the
1.92 @@ -112,12 +103,10 @@
1.93 <h2>Saving the Template</h2>
1.94 <p>Adding the above modifications to the outline, we end up with the
1.95 following HTML code:</p>
1.96 -<pre><?xml version="1.0"?><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>Example</title><br /></head><br /><body><br /><form action="" method="POST"><br /><br /><!-- Template text between the start and the interesting part. --><br /><br /><div><br /> <p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <p><br /> Sub-item: <input name="subvalue" type="text" value="some other value" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /> <p><br /> <input name="add2" type="submit" value="Add subitem" /><br /> </p><br /></div><br /><p><br /> <input name="add" type="submit" value="Add item" /><br /></p><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre>
1.97 +<pre><?xml version="1.0"?><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>Example</title><br /></head><br /><body><br /><form action="" method="post"><br /><br /><!-- Template text between the start and the interesting part. --><br /><br /><div><br /> <p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <p><br /> Sub-item: <input name="subvalue" type="text" value="some other value" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /> <p><br /> <input name="add2" type="submit" value="Add subitem" /><br /> </p><br /></div><br /><p><br /> <input name="add" type="submit" value="Add item" /><br /></p><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre>
1.98 <p>Once you are happy with the
1.99 design of the page, save it to the <a href="directory.html">directory</a>
1.100 created earlier (perhaps choosing the name <code>structure_template.xhtml</code>),
1.101 then proceed to <a href="structure.html">adding
1.102 -structure information</a> in the next stage of the <a
1.103 - href="overview.html">process</a>.</p>
1.104 -</body>
1.105 -</html>
1.106 +structure information</a> in the next stage of the <a href="overview.html">process</a>.</p>
1.107 +</body></html>
1.108 \ No newline at end of file