<?xml version="1.0"?> <!DOCTYPE abiword PUBLIC "-//ABISOURCE//DTD AWML 1.0 Strict//EN" "http://www.abisource.com/awml.dtd"> <abiword xmlns:awml="http://www.abisource.com/awml.dtd" version="unnumbered" fileformat="1.0" styles="unlocked"> <!-- ===================================================================== --> <!-- This file is an AbiWord document. --> <!-- AbiWord is a free, Open Source word processor. --> <!-- You may obtain more information about AbiWord at www.abisource.com --> <!-- You should not edit this file by hand. --> <!-- ===================================================================== --> <styles> <s type="P" name="Heading 1" basedon="Normal" followedby="Normal" props="keep-with-next:1; font-size:17pt; field-font:NULL; margin-bottom:0.0417in; line-height:1.000000; font-weight:bold; font-family:Arial; margin-top:0.3056in"/> <s type="P" name="Normal" basedon="" followedby="Current Settings" props="font-family:Times New Roman; margin-top:12pt; font-variant:normal; margin-left:0pt; text-indent:0in; widows:2; font-style:normal; font-weight:normal; text-decoration:none; color:000000; line-height:1.000000; text-align:left; margin-bottom:0pt; text-position:normal; margin-right:0pt; bgcolor:transparent; font-size:12pt; field-font:NULL; font-stretch:normal"/> <s type="P" name="Heading 2" basedon="Normal" followedby="Normal" props="keep-with-next:1; font-size:14pt; field-font:NULL; margin-bottom:0.0417in; line-height:1.000000; font-weight:bold; font-family:Arial; margin-top:0.3056in"/> <s followedby="Current Settings" name="Emphatic" basedon="None" type="C" props="font-style:italic"/> <s type="P" name="Heading 3" basedon="Normal" followedby="Normal" props="keep-with-next:1; font-size:12pt; field-font:NULL; margin-bottom:0.0417in; line-height:1.000000; font-weight:bold; font-family:Arial; margin-top:0.3056in"/> <s followedby="Current Settings" name="GUIdoc" basedon="None" type="C" props="font-weight:bold"/> <s type="C" name="Command" basedon="None" followedby="Current Settings" props="font-family:Courier New"/> </styles> <pagesize pagetype="Letter" orientation="portrait" width="8.500000" height="11.000000" units="in" page-scale="1.000000"/> <section> <p style="Heading 1"><c props="lang:en-US">Tips and Tricks for Authoring Web-Clean AbiWord Documents</c></p> <p style="Heading 2"><bookmark type="start" name="introduction"/><c props="lang:en-US">Introduction</c><bookmark type="end" name="introduction"/></p> <p style="Normal"><c props="lang:en-US">When writing a document, many authors want to be able to present that document in a variety of media and formats. AbiWord has a variety of file formats available for your use.</c></p> <p style="Normal"><c props="lang:en-US">Often, a particular file format is naturally associated with a particular type of media. For example, HTML is naturally associated with presentation on the World Wide Web. If you are interested in presenting your document in a variety of media, there are issues of presentation which you should keep in mind. This tutorial discusses how to create "Web-Clean" AbiWord documents. A "Web-Clean" document is a document which will accurately be represented in HTML and which will be easy for you to modify for integration into your web-site.</c></p> <p style="Heading 2"><bookmark type="start" name="structure"/><c props="lang:en-US">Word Processing versus Content Authoring</c><bookmark type="end" name="structure"/></p> <p style="Normal"><c props="lang:en-US">When creating any document, there are two different approaches that an author can take. The first is a concentration on presentation, where the author manually edits the visual details of his or her document until happy with the way it looks. The second is a concentration on structure, where the author focuses on the content of the document, and then applies formatting based on what type of structure the content possesses.</c></p> <p style="Normal"><c props="lang:en-US">In order to create a "Web-Clean" AbiWord document, you must engage in word processing while at the same time paying attention to the structure of the document which you are creating. A typical document consists of a variety of structures, such a headers, lists, paragraphs, and so on.</c></p> <p style="Normal"><c props="lang:en-US">To demonstrate what I'm talking about, let's look at the example of creating a header in a document. Doing things the first way, concentrating on presentation, we would insert the cursor where we want the header, then select Times New Roman for the font, 20 for the font size, and bold, for emphasis. Doing things the second way, concentrating on structure, we would select the style which best represents the structure we want from the drop down menu at the left of the Formatting toolbar. In this case, we would select "Heading 1", and then this section of the document would have the "Heading 1" style.</c></p> <p style="Heading 2"><bookmark type="start" name="styles"/><c props="lang:en-US">Styles</c><bookmark type="end" name="styles"/></p> <p style="Normal"><c props="lang:en-US">What we notice first, following the instructions above, is that when we apply the "Heading 1" style to our header, we do </c><c style="Emphatic">not</c><c props="lang:en-US"> have the formatting which we had when we manually formatted our header by the first method. By default, the built in formatting for the "Header 1" style is Arial, bold, 17 point font. This is just the default, however; styles give an author a great deal of control over the appearance of a document.</c></p> <p style="Normal"><c props="lang:en-US">A style is simply a description of a structural element in your document, such as a header. Each style has an associated set of formatting instructions which apply to every element with that style. The author can then manipulate these formatting instructions to control the visual presentation of all elements with the given style.</c></p> <p style="Heading 3"><bookmark type="start" name="important"/><c props="lang:en-US">Why is this important?</c><bookmark type="end" name="important"/></p> <p style="Normal"><c props="lang:en-US">There are two main reasons why utilizing styles is important for the authoring of your documents. The utilization of styles allows you to make changes to the presentation of the document very easily. For instance, if you need to make all headers of a certain type bigger, you just adjust the formatting instructions for that header, and the change is applied throughout the document. To do this, go to </c><c style="GUIdoc">Format > Style...</c><c props="lang:en-US"> to bring up the </c><a xlink:href="../interface/dialogstyles.html"><c style="GUIdoc">Styles</c></a><c props="lang:en-US"> menu. Select the style you want to modify from the </c><c style="GUIdoc">Available Styles</c><c props="lang:en-US"> list, and press </c><c style="GUIdoc">Modify...</c><c props="lang:en-US"> to bring up the </c><c style="GUIdoc">Modify Styles</c><c props="lang:en-US"> dialog. From this window you can access the presentation information associated with the style that you chose. As you can see, this technique is valuable for any type of document authoring. This concept of styles is also utilized in the export to HTML, so that if you need to edit your HTML separately, you can change the presentation of one style by easily editing the formatting instructions, known as Cascading Style Sheets.</c></p> <p style="Normal"><c props="lang:en-US">Additionally, using styles and formatting instructions gathers all presentation information into a centralized location, which greatly simplifies the content of your document. This is particularly important when it comes to working with HTML, as you may need to work directly with the HTML markup at some point to integrate your document with your web-site.</c></p> <p style="Heading 3"><bookmark type="start" name="css"/><c props="lang:en-US">HTML Formatting Instructions - Cascading Style Sheets (CSS)</c><bookmark type="end" name="css"/></p> <p style="Normal"><c props="lang:en-US">By default, when you save your document as an HTML file, AbiWord places all formatting instructions into one block at the beginning. These formatting instructions use the Cascading Style Sheet language, and are in the <style> tag in the <head> of your document. From here it is easy to move the styles as a whole (copy and paste) into a new document which can then be externally linked or integrated with your web-site's style sheet.</c></p> <p style="Heading 2"><bookmark type="start" name="paragraphs"/><c props="lang:en-US">Paragraphs & Indentation</c><bookmark type="end" name="paragraphs"/></p> <p style="Normal"><c props="lang:en-US">Every time you press Enter or Return when you are editing an AbiWord document, you are creating a new content block in your document. In order to create Web-Clean AbiWord documents, you should try to have only one content block for every section of content in your document. </c><c props="font-family:Times New Roman; font-size:12pt; color:000000; text-decoration:none; text-position:normal; font-weight:normal; font-style:normal; lang:en-US">Examples of sections of content include paragraphs, headers, and items in a list.</c></p> <p style="Normal"><c props="lang:en-US">For example many authors, when using a word processor, will manually insert whitespace between paragraphs by pressing Enter repeatedly. The amount of whitespace between paragraphs, however, is a detail about visual presentation which should be left to the formatting instructions of the paragraphs, as discussed in the section about styles, </c><a xlink:href="#styles"><c props="lang:en-US">above</c></a><c props="lang:en-US">.</c></p> <p style="Normal"><c props="lang:en-US">You can also control indentation within paragraphs with formatting instructions. It is often tempting to control the specific indentation of sections of text with multiple spaces or tabs. In order to create Web-Clean documents, however, you should set the desired margins or indents using </c><a xlink:href="#styles"><c props="lang:en-US">formatting instructions</c></a><c props="lang:en-US"> or the margin stops in the ruler:</c></p> <p style="Normal" props="text-align:center"><image dataid="/home/john/In_progress/abisource/ruler.png_0" props="height:0.23in; width:6.49in"/></p> <p style="Normal" props="text-align:left">Using this method enables the HTML to use the appropriate formatting instructions to properly indent the text, and saves you, the author, from having to repeatedly indent text manually.</p> <p style="Heading 2"><c props="lang:en-US">Images</c></p> <p style="Normal"><c props="lang:en-US">As an author using AbiWord and interested in presenting your content as a web-page, there is one issue you should be aware of with respect to using images in your document. First, unlike AbiWord files, HTML files cannot store image information within the file itself. Rather, they must refer to separate image files. When you save an AbiWord file as an HTML file, then, all images are saved into a directory and referred to from there. If the name of the HTML file to which you are saving is </c><c style="Command" props="lang:en-US">filename.html</c><c props="lang:en-US">, then this directory will be called </c><c style="Command" props="lang:en-US">filename.html_d</c><c props="lang:en-US">. You will find all the images from your document in this directory.</c></p> </section> <data> <d name="/home/john/In_progress/abisource/ruler.png_0" mime-type="image/png" base64="yes"> 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 </d> </data> </abiword>