Formatting Data for Print and Web

1. Formatting Data forPrint and Web Dynamic Web Page to Quark XPress Document Susan GreeneWebmaster, Housatonic Community College

2. 1 Goals� One reliable data source for web site and printed catalog Present data accurately in a dynamic web page Output same data in a pre-formatted document for print designer

3. 2 RequirementsYou, or someone you work with, should have� Working knowledge of dynamic web pages and data recordsets Working knowledge of print design, formatting, and style sheets Competence in QuarkXPress

4. 3 The Principle Separating content from presentation is a key principle of web design �best practices� This is key to the process explained here, you will reuse your web content, apply special mark-up, and import it into QuarkXPress

5. 4 Step 1�Prepare dynamic page for web display Using whatever technologies and methods you are comfortable with, create the dynamic page that will present your data in the format you want. Insert any necessary code to show/hide field data as required. You probably already have created this page.View my example online

6. 5 Step 2�Create 2nd dynamic page without style formatting Using the page described above, remove all style formatting so that the data will appear on the page in correct layout. Do not use tables to layout data, only use <p> and <br> tags and spaces or   to separate field data. The goal here is to show the data similar to a plain text format because that is ultimately what we are creating.  Here is what my example looks like in this format.

7. 6 Step 2� Continued This page is going to be the "skeleton" for the file that we will import into QuarkXpress. You can leave a blank line between records for ease of reading, but you may want to remove them in the next step.

8. 7 Step 3: Add XPress Tags to Unformatted Page Mark up the dynamic data with XPress Tags. Begin with the page you created in Step 2. Work with your print designer to find out how the layout is designed and what style names he will use for the QuarkXPress style sheets (paragraph styles and character styles). Correctly placed tabs are very important in the Xpress Tag document.

9. 8 Some Basic XPress Tag Rules: The first line of the document must contain the code that identifies the file type and Quark version. Example - <v6.10><e0> (Quark version 6.1) .TIP: To obtain the code your version of Quark uses try exporting XPress Tags from an existing Quark document.  Each paragraph style is identified by @ followed by the style name and a colon. Example - @courseTitle: Each new paragraph style must be the first item of a line preceded by <br>. Example - <br>@courseTitle: To identify a - @creditHours>NOTE: These style sheets do not have paragraph formatting but can change character styles WITHIN a paragraph.Full Xpress Tag Documentation is available here

10. 9 @courseTitle:ACC* E113 <\#9>Principles of Financial Accounting <\#9><@courseCredits>3 C.H. @courseCodes:Previously: AC 101<\#9><@courseCredits>Code B @coursePrereq:Prerequisite or Parallel: ENG* E043. @courseDescript:A study of the basic principles and procedures of the accounting process as they relate to the recording, measurement, and communications of the business entity's financial data. Emphasis is placed on the recording process, income determination and the development of financial statements.

11. 10 Step 4: Create Text File for Import into Quark Step-by-Step Guide to Importing Preformatted Text into Quark XPress using Style Sheets Once you have created the data page with the XPress Tags you will select and copy (from the browser window) all of the text on the page including the version identifier at the beginning (for example <v6.10><e0>). Paste the text into a new text editor document (Word, Notepad, SimpleText, etc.). Save this new text file as plain text with an .xtg extension (instead of the default .txt). This is the file you will import into Quark Xpress. Continued�

12. 11 Step 4 continued Create your Quark document. If you are using an existing Quark document with existing Style Sheets make sure that they won't conflict in name with the styles that you will be importing. They can have the same name as existing styles as long as you want both of them to have the same formatting.

13. 12 Step 4 continued Click inside a text box and choose Import Text... from the file menu in Quark. Be sure to check Include XPress Tags or Interpret XPress Tags in the import dialog box. Choose your import file (with the .xtg ending). If the Style Sheets are previously defined then the imported text will appear formatted appropriately. If the styles did not exist then you will see them in the Style Sheet list and you must edit them.

14. 13 Step 4 continued Note: To edit the new Style Sheets you must be sure that the character style is set to Default in the edit dialog box (not Normal), proceed to edit the character attributes if desired.

15. 14 If all has gone according to plan your multiple records of datawill be formatted instantly!�but

16. 15 What if I don't want to use Style Sheets in Quark? In my opinion, Style Sheets are key to successfully using Quark Xpress to designa print document.But�

17. 16 � if you only want to import your data with simple structural elements (such as tabs and paragraphs), you can do that as well. Refer to the XPress Tag list for these tags and use them in the dynamic page that you have created to generate the records embedded with XPress Tags.Quark Tip: When using italic or bold type in Quark you should use an italic or bold font face, not the B or I font style buttons. For this reason I recommend that you replace any standard character format <B> or <I> tags with the correct font face once imported into Quark.

18. 17 Printed Catalog This data, once imported and formatted through style sheets,displayed in our 2007-2008 catalog like this: The two tabs that were placed before the <@courseCredits> tag have been assigned a location (for example, 3.5") and right alignment in the courseTitle and courseCodes style sheets of the Quark document. TIP: Correctly placed tabs are critical to a well planned XPress Tag document.