xfy Client 1.0 Tutorial
- Creating XHTML and SVG Compound Documents -

Table of Contents

This section provides the explanation of how to create the document "Company Profile" as shown below, as an example of creating XHTML and SVG compound documents.

Steps for Creating a Document

To create the document:

1. Creating a New Document
2. Creating Body Text - Editing XHTML -
3. Drawing Figures - Editing SVG -
4. Changing the View of a Document
5. Saving a Document

Top of this page

1. Creating a New Document

Now, create a new XHTML document.

1. Click "Template" in the Document Launcher Area on the left side of the screen.
   A list of document templates is displayed in the tree format.
2. Double-click Standard Vocabularies - XHTML from the list of Document Templates.
   A new XHTML document is displayed in the document view area.
   Menu items and buttons for editing XHTML documents are displayed in the menu bar and tool bar.
   

Top of this chapter
Top of this page

2. Creating Body Text - Editing XHTML -

Type text first, and then set the format.

• 2-1. Typing Text
• 2-2. Setting Format

2-1. Typing Text

• 2-1-1. Typing a Heading
• 2-1-2. Typing Body Text
• 2-1-3. Typing a List
• 2-1-4. Typing a Table

2-1-1. Typing a Heading

Type the Headings of the document as follows:

Company Profile
About Us
Business Contents
At a Glance
Location Map

1. Click the document view area.
2. Type "Company Profile," and press the Enter key.
3. Likewise, type "About Us" and after.
   • After you type the last item "Location Map," press the Enter key. By pressing the Enter key, a paragraph is inserted after "Location Map," you can insert a SVG canvas in 3-1. Inserting an SVG Canvas.
   

Top of this chapter
Top of this page

2-1-2. Typing Body Text

Type the content of "About Us" as follows:

xfy Information Systems was formed in 1996, and since then, we are constantly working to create unique, new technologies.

1. Move the cursor after "About Us."
2. Press the Enter key.
   A paragraph is inserted.
3. Type "xfy Information Systems was formed in 1996, and ..."
   • Here, don't press the Enter key after typing the sentence. If you press the Enter key, an extra paragraph will be inserted.
   

Top of this chapter
Top of this page

2-1-3. Typing a List

Type the content of "Business Contents" as follows:

• software development
• system support
• IT training

1. Move the cursor after "Business Contents."
2. Press the Enter key.
   A paragraph is inserted.
3. Select Format - List - Unordered List.
   A bullet point is inserted at the beginning of the line, and you can type the list.
4. Type "software development," and press the Enter key.
   A new line with a bullet point at the beginning is inserted.
5. Type the items in the list likewise.
   
   • Here, don't press the Enter key after typing the last item. If you press the Enter key, an extra item will be created.
   

Top of this chapter
Top of this page

2-1-4. Typing a Table

Under "At a Glance," type the following table that describes company information.

company name	xfy Information Systems
founded	1996
annual revenue	$4.7million(2004)

1. Move the cursor after "At a Glance."
2. Select Table - Insert Table.
   The Insert Table dialog box is displayed.
3. Set as the following table, and click OK.

   Rows	3
   Columns	2
   Table Width	off

4. Type "company name" in the left cell of line 1 of the table, and press the Tab key.
   The cursor moves to the right cell of line 1.
5. Type "xfy Information Systems" in the right cell of line 1, and press the Tab key.
   The cursor moves to the left cell of line 2.
6. Type the contents in the line 2 and the subsequent lines in the same way as for the first line.
7. When you finish typing all the items, drag the table border to adjust it to the width and height of the items.
   

Top of this chapter
Top of this page

2-2. Setting Format

• 2-2-1. Setting a Heading
• 2-2-2. Changing the Style of Text

2-2-1. Setting a Heading

Set a heading to the typed item.

1. Move the cursor on the characters of "Company Profile."
2. Select Format - Paragraph Type - Heading1.
   Heading1 is set to "Company Profile."
3. Move the cursor on the characters of "About Us."
4. Select Format - Paragraph Type - Heading2.
   Heading2 is set to "About Us."
5. Likewise, set heading 2 to "Business Contents," "At a Glance," and "Location Map."
   

Top of this chapter
Top of this page

2-2-2. Changing the Style of Text

Change the style of "xfy Information Systems" in "About Us" to bold.

1. Select "xfy Information Systems."
2. Select Format - Text Style - Bold.
   The text "xfy Information Systems" is displayed in bold style.
   

Top of this chapter
Top of this page

3. Drawing Figures - Editing SVG -

• 3-1. Inserting an SVG Canvas
• 3-2. Changing the Size of the SVG Canvas
• 3-3. Drawing Figures
• 3-4. Typing Text in a Figure

3-1. Inserting an SVG Canvas

1. Select xfy Development Vocabularies - SVG in the list of Document Templates at the left of the screen, and drag and drop it under the "Location Map" in the document view area.
   A blank SVG canvas is inserted.
   • If you cannot drag and drop the SVG canvas
     you can insert the SVG canvas only in the part where a paragraph is inserted.
     Insert a paragraph with following procedures:
     1. Move the cursor after "Location Map."
     2. Press the Enter key.
        A paragraph is inserted.

     * A paragraph can also be inserted by selecting Insert - Paragraph - Paragraph.

     * In 2-1-1. Typing a Heading, if you pressed the Enter key after typing the last item "Location Map," a paragraph has been already inserted.

2. Click inside the SVG canvas.
   Menu items and buttons for editing SVG are displayed in the menu bar and the tool bar.
   

Top of this chapter
Top of this page

3-2. Changing the Size of the SVG Canvas

Set the width of the SVG canvas to 600 pixels and the height to 300 pixels.

1. Select View - Resize.
   The Resize dialog box is displayed.
2. In the Resize dialog box, set the width to 600 and the height to 300, then click OK.
   The size of the SVG canvas is changed.
   

Top of this chapter
Top of this page

3-3. Drawing Figures

Draw figures in the SVG canvas.

• 3-3-1. Preparing to Draw Figures
• 3-3-2. Drawing Lines
• 3-3-3. Drawing a Circle
• 3-3-4. Copying a Figure
• 3-3-5. Changing the Order of Overlapped Figures
• 3-3-6. Drawing a Rectangle

3-3-1. Preparing to Draw Figures

Set for easy drawing of figures.

1. Select View - Grid Settings.
   The Grid Settings dialog box is displayed.
2. Set Show Grid and Snap to Grid on, and click OK.
   Grid is displayed in the SVG canvas, and the function to snap on the grid is enabled.

Top of this chapter
Top of this page

3-3-2. Drawing Lines

Draw lines which represent roads.

1. Select Draw - Change Drawing Style.
   The Change Drawing Style dialog box is displayed.
2. Set the stroke as the following table, and click OK.

   Stroke

   Stroke Drawing	Draw
   Width	15
   Line Style
   Caps	Butt
   Join	Miter
   Color	Gray
   Opacity	100%

3. Select Draw - Line.
4. Press the mouse button at the start point of the road.
5. Hold and drag the mouse, and then release the button at the end point of the road.
   The road is drawn.
6. Repeat steps 4 through 5 to draw all roads.
7. Draw the purple line which represents a highway with the following settings:

   Stroke

   Stroke Drawing	Draw
   Width	4
   Line Style
   Caps	Butt
   Join	Miter
   Color	Purple
   Opacity	100%

   

Top of this chapter
Top of this page

3-3-3. Drawing a Circle

Draw four circles which represent an interchange. Here, draw a circle.

1. Select Draw - Change Drawing Style.
   The Change Drawing Style dialog box is displayed.
2. Set the stroke as the following table, and click OK.

   Stroke

   Stroke Drawing	Draw
   Width	15
   Line Style
   Caps	Butt
   Join	Miter
   Color	Gray
   Opacity	100%

   Fill

   Fill Drawing	No

3. Select Draw - Circle.
4. Press the mouse button at the center of the circle.
5. Hold and drag the mouse referring the reference line.
6. Release the button to draw the circle.
   

Top of this chapter
Top of this page

3-3-4. Copying a Figure

Copy the circle drawn, and draw four circles representing an interchange.

1. Select Draw - Select.
   and are shown around the circle, and the figure is selected.
2. Click on the line at any point other than or , and move the mouse while holding down the mouse button.
3. At the destination, release the button while holding down the Ctrl key.
   The circle is copied. You will see two circles. And the circle created by the copy operation is selected.
4. Repeat steps 2 through 3 until there are four circles.
   

Top of this chapter
Top of this page

3-3-5. Changing the Order of Overlapped Figures

Make the purple line representing the highway be displayed over the four circles representing the interchange.

1. Select Draw - Select and click the purple line.
   and are shown around the line, and the figure is selected.
2. Select Shape - Order - Bring to front.
   The purple line is displayed in the foreground.
   

Top of this chapter
Top of this page

3-3-6. Drawing a Rectangle

Draw the rectangle which represents the destination.

1. Select Draw - Change Drawing Style.
   The Change Drawing Style dialog box is displayed.
2. Set the stroke as the following table, and click OK.

   Stroke

   Stroke Drawing	No

   Fill

   Fill Drawing	Draw
   Rule	Nonzero
   Color	Purple
   Opacity	100%

3. Select Draw - Rectangle.
4. Press the mouse button at the start point to draw a rectangle.
5. Hold and drag the mouse, and then release the button at the end point.
   The rectangle is drawn.
   

Top of this chapter
Top of this page

3-4. Typing Text in a Figure

Type the following text in the figure in the SVG canvas.

• Kakinoki I.C.
• Central Highway
• to downtown
• to airport
• here

1. Select Draw - Change Drawing Style.
   The Change Drawing Style dialog box is displayed.
2. Set the stroke as the following table, and click OK.

   Font

   Font Drawing	Draw
   Font	Not specified
   Substitute font	Not specified
   Size	16
   Direction	Horizontal
   Font Style	(Don't specify)
   Color	Black
   Opacity	100%

3. Select Draw - Text.
4. Click on the position where you want to type text.
   A cursor appears there.
5. Type in your desired text.
6. Repeat steps 4 through 5 to type all text.
   

Top of this chapter
Top of this page

4. Changing the View of a Document

In xfy Client, one document can be displayed by various methods.

• 4-1. Checking Document Outline
• 4-2. Viewing XML Source Code

4-1. Checking Document Outline

Display the outline indicating the overview of the document.

1. Click the XHTML canvas in the document.
2. Select "Change Vocabulary Component" at the upper right corner of the screen.
3. Select Outline View in the displayed list.
   The Outline View component invokes and displays the outline of the document.
   In this outline, the 'h1' and 'h2' elements in HTML and the text in SVG are displayed.
   

Top of this chapter
Top of this page

4-2. Viewing XML Source Code

Switch to the screen that lets you check the XML source code of the entire document.

1. Select View - Source.
   The XML source code of the entire document is displayed in a new window.
   
2. When the XML source code has been checked, click Close.
   The dialog box closes.

Top of this chapter
Top of this page

5. Saving a Document

Save the created document.

1. Select File - Save as.
2. Set the folder, type the file name, and then click Save.
   The document is saved as the typed file name under the setting folder.

Top of this chapter
Top of this page