Tutorial
- Creating XHTML and SVG Compound Documents -

xfy Basic Edition Operation Manual

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. Inputting Text - Editing XHTML -
3. Inputting a Figure - 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.
2. Double click "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 page

2. Inputting Text - Editing XHTML -

• 2-1. Inputting Text to Paragraph
• 2-2. Inputting a List
• 2-3. Inputting a Table
• 2-4. Changing the Style of Text

2-1. Inputting Text to Paragraph

Inputting Heading1

Input the title of this document, "Company Profile", in line 1.
Set the paragraph type of line 1 to "Heading1", which corresponds to h1 element of XHTML.

1. Click the Document View Area.
2. Select [Format - Paragraph Type - Heading1].
3. Input "Company Profile", and press the Enter key.
   

Inputting Heading2

Set the paragraph type of line 2 and the subsequent lines to "Heading2", which corresponds to h2 element of XHTML, and input the following contents.

• About Us
• Business Contents
• At a Glance
• Location Map

1. Select [Format - Paragraph Type - Heading2].
2. Input "About Us", and press the Enter key.
   By pressing the Enter key, a new line of the same paragraph type is inserted.
3. Likewise, input the other contents, and press the Enter key.
   

Inputting Text to Paragraph

Input a paragraph(standard paragraph) under "About Us", and input the next sentence. A paragraph corresponds to 'p' element in XHTML.

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

1. Move the cursor to the position where the paragraph is to be inserted.
   Here, move the cursor to the beginning of the next line of "About Us".
2. Select [Insert - Paragraph - Paragraph].
   A paragraph is inserted.
3. Input "xfytec Information Systems was formed in 1996, and ..."
   

Top of this page

2-2. Inputting a List

Input the following contents under "Business Contents" as an "Unordered list", which corresponds to ul element of XHTML.

• software development
• system support
• IT training

1. Move the cursor to the position where the list is to be inserted.
   Here, move the cursor to the beginning of the next line of "Business Contents".
2. Select [Insert - Paragraph - Paragraph].
   A paragraph is inserted.
3. Select [Format - List - Unordered List].
   The current paragraph becomes the first item of an unordered list, and a bullet point is inserted at the beginning of the line.
4. Input "software development" as the first item.
5. Press the Enter key.
   A new line with a bullet point at the beginning, which is the next item of the list, is inserted.
6. Input items in order.
   

Top of this page

2-3. Inputting a Table

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

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

1. Move the cursor to the position where the paragraph is to be inserted.
   Here, move the cursor to the beginning of the next line of "At a Glance".
2. Select [Table - Insert Table].
   The [Insert Table] dialog box is displayed.
3. Set as the following table, and click [OK]. If the width of table is set to off, the width will be set automatically according to the content input.

   Number of Lines	3
   Number of Columns	2
   Width of Table	off

4. Input "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. Input "xfytec 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. Input the contents in the line 2 and the subsequent lines in the same way as for the first line.
   

Top of this page

2-4. Changing the Style of Text

Change the style of "xfytec Information Systems" under "About Us" to bold.

1. Select "xfytec Information Systems".
2. Click [Bold] on the tool bar.
   The text "xfytec Information Systems" is displayed in bold style.
   

Top of this page

3. Inputting a Figure - Editing SVG -

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

3-1. Inserting an SVG Canvas

Set the line under "Location Map" as a paragraph, and insert an SVG canvas in the paragraph. To create SVG figures in an XHTML document, an SVG canvas needs to be inserted.

1. Move the cursor to the beginning of the next line of "Location Map".
2. Select [Format - Paragraph Type - Paragraph] and set a paragraph type to the paragraph.
3. Select [Insert - XML Object - Create].
   The [Create XML Object] dialog box is displayed.
4. Select [Create from Template] in the [How To Create] field and click [Browse].
   The [Choose Document Template] dialog box is displayed.
5. Select "SVG" in the Document Template list and click [Open].
   "SVG" is input in the [Template Name] field of the [Create XML Object] dialog box.
6. Click [OK].
   A blank SVG canvas is inserted at the cursor position.
7. 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 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 page

3-3. Drawing Figures

Draw figures in the SVG canvas.

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%

   

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 it while examining a reference line drawn between the start point and the current mouse position.
6. Release the button to draw the circle.
   

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.
   

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.
   

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 page

3-4. Inputting Text in a Figure

Input 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 input text.
   A cursor appears there.
5. Type in your desired text.
6. Repeat steps 4 through 5 to input all text.
   

Top of this page

4. Changing the View of a Document

In xfy Basic Edition, 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 on the document in any area other than the SVG canvas.
2. Select [Tool - Change Component].
   The [xfy Component Chooser] dialog box is displayed.
3. Select "Outline View" in the [Component List] and click [Apply].
   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.
4. Click [Close].
   The [xfy Component Chooser] dialog box is closed.

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 page

5. Saving a Document

Save the created document.

1. Select [File - Save as].
2. Set the folder, input the file name, and then click [Save].
   The document is saved as the inputted file name under the setting folder.

Top of this page