<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//MOZQUITO//DTD XHTML-FML 1.0//EN"
"http://www.mozquito.org/dtd/xhtml-fml1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:x="http://www.mozquito.org/xhtml-fml">
<head>
<title>Using Mozquito XML-UI for HomeSite</title>
<meta name="generator" content="Mozquito Factory 1.5" />
<style type="text/css">
 <![CDATA[
  a:link    	{ text-decoration:underline;font-family:Arial,Geneva,sans-serif; }
  a:active  	{ text-decoration:underline;font-family:Arial,Geneva,sans-serif; }
  a:visited		{ text-decoration:underline;font-family:Arial,Geneva,sans-serif; }

	.above			{	font-size:11pt;color:#222566;font-weight:bold;text-decoration:none;font-family:Arial,Geneva,sans-serif;	}

	.index			{	font-size:9pt;color:#222566;font-weight:bold;text-decoration:underline;font-family:Arial,Geneva,sans-serif;	}

	.element     { color:#800000; }

	.elementb     { font-size:10pt;font-weight:bold;color:#800000;font-family:Arial,Geneva,sans-serif; }

	.black9			{	font-size:9pt;color:#000000;font-weight:normal;text-decoration:none;font-family:Arial,Geneva,sans-serif;	}
	.black9b		{	font-size:9pt;color:#000000;font-weight:bold;text-decoration:none;font-family:Arial,Geneva,sans-serif;	}
	.dred9b			{	font-size:9pt;color:#873940;font-weight:bold;text-decoration:none;font-family:Arial,Geneva,sans-serif;	}
	.red				{	font-size:9pt;color:#FF0000;font-weight:bold;text-decoration:none;font-family:Arial,Geneva,sans-serif;	}
	.green			{	font-size:9pt;color:#008000;font-weight:bold;text-decoration:none;font-family:Arial,Geneva,sans-serif;	}
	.code				{	font-size:9pt;color:#000000;font-weight:normal;text-decoration:none;font-family:courier new,courier,sans-serif;	}
	.black10b		{	font-size:10pt;color:#000000;font-weight:bold;text-decoration:none;font-family:Arial,Geneva,sans-serif;	}
	.dred15b		{	font-size:15pt;color:#873940;font-weight:bold;text-decoration:none;font-family:Arial,Geneva,sans-serif;	}

	.bg					{	background-image:url(img/bg_1.gif);	}
	.bgblank		{	background-image:url(img/blank.gif);font-size:1pt;	}
	.bgblblack15b		{	background-image:url(img/blank.gif);font-size:15pt;color:#000000;font-weight:bold;text-decoration:none;font-family:Arial,Geneva,sans-serif;	}
	.bgblblack9			{	background-image:url(img/blank.gif);font-size:9pt;color:#000000;font-weight:normal;text-decoration:none;font-family:Arial,Geneva,sans-serif;	}

	
	.margin1		{	margin-left:25px;	}
	.margin2		{	margin-left:10px;	}
	.margin3		{	margin:9px;	}
	.margin4		{	margin-left:111px;	}
	.float      { margin:9px;	float:left:}
  ]]>
</style>
</head>
<!-- lightgray #ACABA7  darkred #873940 darkblue #222566;  background="img/bg_100.gif"  -->
<body bgcolor="#FFFFFF">
<div align="center">

<!-- T E M P L A T E   1  -->
<x:template id="tmp1">
	<table width="750" border="0" cellpadding="0" cellspacing="0" class="bgblblack9">
		<tr>
			<td width="110" height="30" class="bgblblack9">
				 
			</td>
			<td width="640" class="bgblank">
				<div class="margin2"><span class="black10b">|group|</span><span class="|color|">|titel|</span></div>
			</td>
		</tr>
	</table>
</x:template>

<x:form id="Plugin">

<!-- UNTERGRUND DER TABELLE (uebergeordnete Tabelle) -->
	<table width="760" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td width="760" height="570" class="bg" valign="top">
<!-- NAVIGATION Tabelle (BACK - INDEX - NEXT) -->
				<table width="760" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td width="760" colspan="4" height="40" class="bgblank">
							 
						</td>
					</tr>
					<tr>
						<td width="550" height="28" align="right" valign="middle" class="bgblank">
							 
						</td>
						<td width="70" height="28" align="right" valign="middle" class="bgblank">
							<x:toggle id="backbutton">
								<x:img src="img/nav_back_g.gif" width="70" height="20" preload="yes" alt="click next" />
								<x:img src="img/nav_back_r.gif" onclick="toggle:pages,--" width="70" height="20" preload="yes" alt="back" />
							</x:toggle>
						</td>
						<td width="70" height="28" align="right" valign="middle" class="bgblank">
							<x:img id="index" src="img/nav_index.gif" onclick="toggle:pages,p01" width="70" height="20" preload="yes" alt="index" />
						</td>
						<td width="70" height="28" align="right" valign="middle" class="bgblank">
							<x:toggle id="nextbutton">
								<x:img src="img/nav_next_g.gif" width="70" height="20" preload="yes" alt="click back" />
								<x:img src="img/nav_next_r.gif" onclick="toggle:pages,+" width="70" height="20" preload="yes" alt="next" />
							</x:toggle>
						</td>
					</tr>
				</table>

				<x:toggle id="pages">
<!-- S T A R T S E I T E  -->
					<x:tg id="p00" onshow="toggle:backbutton;toggle:nextbutton;" onhide="toggle:backbutton;toggle:nextbutton;">
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0" class="bgblblack9">
								<tr>
								<td colspan="9">
									<x:img src="img/grau.gif" width="632" height="1" preload="yes" alt="grey line" />
								</td>
								</tr>
								<tr>
								<td width="634" align="center" valign="top" class="bgblblack15b">
								<br /><br />
								
									<span class="bgblblack15b">Welcome!</span>
									<br /><br /><span class="black10b">How To Use</span>
									<br /><br />Mozquito XML-UI for Homesite
									<br /><br /><span class="dred15b">Click <x:textoutput value="INDEX" onclick="toggle:pages,p01;" class="dred15b"/>  to proceed</span>
									<br /><br /><br /><br /><span class="black9">Copyright © 2001 Mozquito Technologies AG, all rights reserved.</span>
								<br /><br />
								</td>
							</tr>
								<tr>
								<td colspan="9">
								
									<x:img src="img/grau.gif" width="632" height="1" preload="yes" alt="grey lines" />
								</td>
							</tr>
						</table>
						</div>
					</x:tg>
<!-- I N D E X  -->
					<x:tg id="p01">
						<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0" class="bgblblack9">
						<tr>
								<td width="600" align="left" valign="top" class="bgblblack9">
							<br /><div class="margin2"><x:textoutput value=" Contents" class="above" /></div>
						</td>
						</tr>
							<tr>
								<td colspan="9">
									<x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" />
								</td>
							</tr>
							<tr>
								<td width="600" align="left" valign="top" class="bgblblack9">

									<br />
									<div class="margin2"><span class="dred9b">» </span>
									<x:textoutput value="What is Mozquito XML-UI?" onclick="toggle:pages,p02" class="index" /></div>
									<div class="margin2"><span class="dred9b">» </span>
									<x:textoutput value="What is XHTML?" onclick="toggle:pages,p03" class="index" /></div>
									<div class="margin2"><span class="dred9b">» </span>
									<x:textoutput value="Before creating a new Mozquito XML-UI document" onclick="toggle:pages,p04" class="index" /></div>	
										<div class="margin1">								
										<x:textoutput value="What is a DOCTYPE?" onclick="toggle:pages,p4a" class="element" /></div>	
										<div class="margin1">								
										<x:textoutput value="The XML-UI DOCTYPE" onclick="toggle:pages,p4b" class="element" /></div>	
										<div class="margin1">								
										<x:textoutput value="The XHTML DOCTYPES" onclick="toggle:pages,p4c" class="element" /></div>								
									<div class="margin2"><span class="dred9b">» </span>
									<x:textoutput value="Getting started in HomeSite" onclick="toggle:pages,p05" class="index" /></div>									
										<div class="margin1">								
										<x:textoutput value="Using XML-UI Resources" onclick="toggle:pages,p5a" class="element" /></div>	
										<div class="margin1">								
										<x:textoutput value="XML-UI Snippets" onclick="toggle:pages,p5b" class="element" /></div>	
										<div class="margin1">								
										<x:textoutput value="XML-UI Examples" onclick="toggle:pages,p5c" class="element" /></div>										
										<div class="margin1">								
										<x:textoutput value="Browsers that support XML-UI" onclick="toggle:pages,p5d" class="element" /></div>
										<div class="margin1">								
										<x:textoutput value="Tips for writing XML-UI" onclick="toggle:pages,p5e" class="element" /></div>
										<div class="margin1">								
										<x:textoutput value="CSS tips for XML-UI" onclick="toggle:pages,p5f" class="element" /><br /><br /></div>																					
								</td>
							</tr>
							<tr>
								<td colspan="9">
									<x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" />
								</td>
							</tr>

						</table>
						</div>
					</x:tg>	
					
<!-- What is Mozquito XML-UI?  -->
					<x:tg id="p02">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">What is Mozquito XML-UI?</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="288" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									XML-UI is the next step up from XHTML-FML (Forms Markup Language). It consists of a set of new tags 
									for creating not only forms but also other types of dynamic documents. 
									</div>
									<div class="margin3">
									You can use XML-UI to make:
									<ul>
									<li>Order forms</li>
									<li>Quizzes</li>
									<li>Polls</li>
									<li>Questionnaires</li>
									<li>Surveys</li>
									<li>On-line shops</li>
									<li>E-commerce applicatioins</li>
									<li>Slideshows</li>
									<li>Interactive maps</li>
									<li>Whatever you come up with!</li>
									</ul>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>

					</div>
					</x:tg>
<!-- What is XHTML?  -->
					<x:tg id="p03">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">What is XHTML?</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									XHTML is basically the same as HTML 4.0 except for one major difference: XHTML is an application 
									of XML (the eXtensible Markup Language). 
									</div>	
									<div class="margin3">
									XHTML is the current HTML standard as defined by the World Wide Web Consortium (W3C), 
									the organization which is in charge of the development of HTML. It became a W3C Recommendation 
									in January 2000. 
									</div>				
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
					</div>
					</x:tg>
<!-- Before creating a new Mozquito XML-UI document  -->
					<x:tg id="p04">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">Before creating a new Mozquito XML-UI document</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									We are quickly coming to the time when documents published on the 
									Web will need to be valid in order for browsers to display them. Here is what you 
								  need to make this happen in your XML-UI and XHTML documents:</div>
								 <div class="margin3">
									<ul>
										<li>a DOCTYPE declaration</li>
										<li>well-formed code</li>
										<li>valid code</li>
									</ul>
								</div>
								<div class="margin3">
								In case you don't know what a DOCTYPE declaration is or where to get one, we'll talk about it in 
								the next section. Well-formed and valid code simply means you need to be very 
								careful that you write code that follows XHTML, the current official 
								HTML standard. The code needs to be clean and the tags properly 
								nested. More information about how to write clean XHTML can be found in the Help 
								section 'HTML vs. XHTML' in the Using_XML-UI folder.
								</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
					</div>
					</x:tg>
<!-- DTD?  -->
					<x:tg id="p4a">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">What is a DOCTYPE?</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="288" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									A DOCTYPE declaration is a bit of code in the header of your document that tells a 
									validator what kinds of tags you are using. The tags are defined in a Document Type Definition (DTD). 
									The validator uses all this information to check for wellformedness and validity. </div>									
									<div class="margin3">
									You need to have a DOCTYPE declaration at the beginning of the document when writing XML-UI and XHTML. 
									XML-UI for HomeSite includes template files for XML-UI and XHTML which already have the DOCTYPE included. 
									These template pages are in the New Document Window found under File->New.
									</div>
									<div class="margin3">Here is an example of the XML-UI DOCTYPE declaration:<br /><br />
									</div>
									<div class="code">
										   <?xml version="1.0" encoding="iso-8859-1"?><br />
										   <!DOCTYPE html PUBLIC "-//MOZQUITO//DTD XML-UI 2.0//EN"<br />
										      "http://www.mozquito.org/dtd/xhtml-xml-ui20.dtd"><br />
										   <html xmlns="http://www.w3.org/1999/xhtml" <br />
										     xmlns:xf="http://www.w3.org/2001/06/xforms"<br />
										     xmlns:xl="http://www.w3.org/1999/xlink"<br />
										     xmlns:fml="http://www.mozquito.org/xhtml-ui"><br /><br />
									</div>
									<div class="margin3">This declaration includes information for the XML parser in the browser 
									(if it has one), as well as what kind of 
									markup is in the file. There is also information for the 
									browser about the XHTML and XML-UI namespaces, i.e. which tags and which combination of tags 
									are allowed in the document.<br />
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>

					</div>
					</x:tg>
<!-- XML-UI DTD  -->
					<x:tg id="p4b">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">The XML-UI DOCTYPE</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="288" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									If you look in File->New, you will find a tab for XML-UI. Clicking this tab will bring 
									up the window which has a new XML-UI document template icon. Clicking on this icon will open a new 
									XML-UI document complete with XML-UI DOCTYPE declaration in the header.
									<ul>
										<li>XML-UI 2.0: Lets you use the XML-UI tags along with XHTML tags. You can also use 
										Cascading Style Sheets (CSS) to set up your layout.</li>
									</ul>

									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>

					</div>
					</x:tg>
<!-- XHTML DTDs  -->
					<x:tg id="p4c">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">The XHTML DOCTYPES</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="288" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									There are three XHTML DOCTYPES. If you want to write a plain XHTML file, you need to 
									pick one of them:
									<ul>
										<li>XHTML 1.0 Strict: Requires that you clearly separate your content from your layout. 
										To do this you need to use Cascading Style Sheets (CSS) or another XHTML compatible style sheet. 
										You may not use tags deprecated in HTML 4.0. The validator in the Mozquito XML-UI plugin 
										will let you know if your tags are valid or not.<br /><br /></li>
										<li>XHTML 1.0 Transitional: This lets you use HTML 4.0 together with the basic rules 
										for XHTML to allow backwards-compatibility. You should still separate your content from 
										your layout using Cascading Style Sheets or another XHTML compatible style sheet.<br /><br /></li>
										<li>XHTML 1.0 Frameset: Lets you define a frameset.<br /><br /></li>
									</ul>
									</div>
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>

					</div>
					</x:tg>
<!-- Getting started in HomeSite  -->
					<x:tg id="p05">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">Getting started in HomeSite</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="220" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									After you have installed the plugin and started HomeSite, you will see the Mozquito Menu Bar 
									either along the right side of the HomeSite workspace or in the menu bar area. Each icon has a 
									tool tip with the name of the icon. If you put your 
									mouse on top of the icon, the tool tip will appear. 
									</div>
								<div class="margin3">
									<img src="img/toolbar.gif" height="100" width="620" alt="toolbar image" />
									</div>
									<div class="float">
									<x:img id="formIcon" src="img/form.gif" alt="form icon" />  20 red icons: Each icon stands for an XML-UI tag. 
									Clicking on one will insert the opening and closing tags into your code where the cursor currently is. 
									In the Help menu there is a .pdf file with all the tags and their attributes. If you have Acrobat Reader 
									installed, you can print this file out for your reference.</div>
									<div class="float">
									<x:img id="wellformed" src="img/wellform.gif" alt="wellformed icon" />  An icon with a blue check: 
									This checks wellformedness for XML-UI and XHTML files.</div>
									<div class="float">
									<x:img id="valid" src="img/valid.gif" alt="valid icon" />  An icon with a red check: 
									This checks validity for XML-UI and XHTML files.</div>
									<div class="float">
									<x:img id="browser2" src="img/browser.gif" alt="hybrid browser icon" />  A hybrid browser icon: 
									This lets you preview XML-UI files (only!) in your default browser. Future versions of XML-UI for HomeSite will
									let you choose different browsers.</div>
									<div class="float">
									<x:img id="generate" src="img/generate.gif" alt="generate icon" />  A white file icon with a red arrow: 
									This lets you generate an XML-UI file into an HTML file with JavaScript.</div>
									<div class="float">
									<x:img id="question" src="img/Question.gif" alt="question mark icon" />  A yellow question mark icon: 
									This is the About box where can find the build number (version) of 
									the Mozquito Matrix your plugin is using. You can also check how many trial days you 
									have left as well as input a product key.
									</div>				
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
					</div>
					</x:tg>
<!-- Using XML-UI Resources  -->
					<x:tg id="p5a">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">Using XML-UI Resources</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									There are a number of resources installed with the plugin to help you learn how to 
									use XHTML and XML-UI. 
								</div>	
								<div class="margin3">
									<x:img id="HelpIcon" src="img/HelpIcon.gif" alt="help icon" /> 
									They are found in the Help section in the Using_XML-UI folder.
								<ul>
									<li>HTML vs. XHTML: This gives you the basic rules for using XHMTL.<br /><br /></li>
									<li>XML-UI Quick Reference Card: This a .pdf file with a handy table of all the XML-UI tags and attributes you 
									can use. You can print this out for your convenience.<br /><br /></li>
									<li>10 Steps: This is a simple introduction on how to use XML-UI.<br /><br /></li>
									<li>XML-UI Reference: This is a comprehensive guide to the tags and attributes used in XML-UI.<br /><br /></li>
								</ul>
									</div>				
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey liine" /></td></tr>
						</table>
					</div>
					</x:tg>
<!-- XML-UI Snippets  -->
					<x:tg id="p5b">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">XML-UI Snippets</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									<x:img id="snippet" src="img/Snippet.gif" alt="snippet icon" /> 
									In the Snippets Resource Window, you can choose from two sets of pre-made XML-UI snippets 
									to make you coding go faster. You can even create your own. To find them, click on Snippet 
									tab in the Resource Window to the left. Then just click on the one you need to insert 
									it into your XML-UI file.
									</div>				
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
					</div>
					</x:tg>
<!-- XML-UI Example Documents  -->
					<x:tg id="p5c">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">XML-UI Examples</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey liine" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									Many people learned HTML by copying and pasting from other Web pages and then changing the code to suit their 
									needs. For many this is a practical way of learning. You can do this with XML-UI too! 
									However with XML-UI this needs to be from an ungenerated file. We have included 
									a number of XML-UI files for you to play with and adapt.<br /></div>
									<div class="margin1">
									<x:img id="FileOpen" src="img/Drive.gif" alt="open-file icon" /> 
									Using the File->Open directory, go to the folder in Allaire->HomeSite 4.5->Help->XML-UI_Examples.<br /><br /></div>
									  <div class="margin1">        <x:img id="examplewindow" src="img/Examples.gif" alt="examples window" />
									<br /><br />
									  </div>
											<div class="margin1">								
									In XML-UI_Examples, you will find two folders: Advanced and Simple.<br /><br /></div>
										<div class="margin1">								
									There are a number of .xhtml documents in each folder, some with images. Clicking on an .xhtml 
									file will open the source code in your HomeSite workspace.<br /></div>
									<div class="margin3">
									Each example gives you a small idea of what you can do with XML-UI. 
									You can take any document and adapt it as you wish.
									</div>				
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
					</div>
					</x:tg>
<!-- Browsers that support XML-UI  -->
					<x:tg id="p5d">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">Browsers that support XML-UI</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										XML-UI documents generated by the the Mozquito Matrix can be displayed on the following browsers:</div>
										<div class="margin3">Windows
										<ul>
										<li>Netscape Navigator 4.01 and higher</li>
										<li>Microsoft Internet Explorer 4.01 and higher</li>
										</ul>
									</div>	
									<div class="margin3">Macintosh
										<ul>
										<li>Netscape Navigator 4.0 and higher</li>
										<li>Microsoft Internet Explorer 4.01 and higher</li>
										</ul>
									</div>	
									<div class="margin3">Linux and Solaris
										<ul>
										<li>Netscape Navigator 4.5-4.7</li>
										</ul>
									</div>	
									<div class="margin3">
									We recommend that you use the latest compatible version of the browser of your choice and 
									that you ask your site visitors to do the same. The browsers listed above usually represent 
									around 90% of the browsers currently used.
									</div>				
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
					</div>
					</x:tg>
<!-- XML-UI Tips -->
					<x:tg id="p5e">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">Tips for writing in XML-UI</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
										Here are a few tips to make working with XML-UI a little easier.</div>
									<div class="margin1">
									When you create IDs, be sure that they do not start with a number and that they do not 
									include foreign language characters. This is a general XML requirement.<br /><br />
									</div>
									<div class="margin1">
									When you include XML-UI images with the <fml:img> element and you have preload="yes", you need to give 
									a width and height. Also if the width and height attributes are there, they must have values. 
									In either case, if you don't do this, the previewed page will be empty.<br /><br />
									</div>
									<div class="margin1">
									Remember: You cannot use the HomeSite workspace Browse button to preview an .xhtml file. Please use the 
									Preview button in the Mozquito XML-UI for HomeSite toolbar.<br /><br />
									</div>	
									<div class="margin1">
									If your remove your default browser, be sure to change you system settings to the new 
									default browser or the XML-UI plugin will become confused.<br /><br />
									</div>	
									<div class="margin1">
									We recommend that you use the latest compatible version of the browser of your choice and 
									that you ask your site visitors to do the same. The browsers which support XML-UI usually represent 
									around 90% of the browsers currently used.<br /><br />
									</div>				
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
					</div>
					</x:tg>
<!-- CSS Tips -->
					<x:tg id="p5f">
						<x:insert  template="tmp1" >
							<x:prop name="group">XML-UI: </x:prop>
							<x:prop name="color">elementb</x:prop>
							<x:prop name="titel">CSS tips for XML-UI</x:prop>							
						</x:insert>
					<div class="margin4">
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="634" height="227" align="left" valign="top" class="bgblblack9">
									<div class="margin3">
									Here are a few tips to make using CSS (Cascading Style Sheets - a challenge unto itself) with XML-UI a bit easier:
										</div>
									<div class="margin1">
									With XML-UI you can use external CSS style sheets, styles in the header and inline styles. However, as soon as you 
									include inline styles, all styles from external style sheets and styles in the header are ignored.<br /><br />
									</div>
									<div class="margin1">
									If you use an external CSS style sheet, you can alter the style sheet and its effect on your XML-UI file 
									without having to regenerate your file. So once your XML-UI file works the way you want it to, 
									generate the file and then polish up the styling by adjusting the style sheet.<br /><br />
									</div>
									<div class="margin1">
									When you create class names, be sure that there are no underscores (_) in the class name. Also you cannot 
									start a class name with a number.<br /><br />
									</div>	
									<div class="margin1">
									When you use comments in your style sheets, be sure to use CSS comments (/* */) and not HTML comments.<br /><br />
									</div>
									<div class="margin1">
									Avoid using the font Helvetica. This a printing font for Macs. Using it on a Web page makes it very small 
									i.e., illegible for your Mac users, unless you do a lot of tweaking.<br /><br />
									</div>	
									<div class="margin1">For sans-serif fonts, the following is a good basic sset up for a font-family:
									<br /><br />
									</div>
									<div class="code">
									      font-family:Verdana,Geneva,Arial,sans-serif;<br /><br />
									</div>
						s			<div class="margin1">
									Verdana for Windows users, Geneva for Mac users and Arial for UNIX users.<br /><br />
									</div>				
								</td>
							</tr>
						</table>
						<table width="634" border="0" cellpadding="0" cellspacing="0">
							<tr><td><x:img src="img/grau.gif" width="634" height="1" preload="yes" alt="grey line" /></td></tr>
						</table>
					</div>
					</x:tg>
  </x:toggle>
			</td>
		</tr>
	</table>
</x:form>
</div>
</body>
</html>