Creating template - step by step instructions. DIV tag with attributes.

To create macro code, go to the Template tab in the "Resources panel on the left". If the panel is not visible, you can enable it in the Display menu. Another way is to use a keyboard shortcut (F9 by default), or to use the "Show or hide left panel" icon on the main toolbar.

You can also open and go directly to the Templates tab using the keyboard shortcut Ctrl+4

In the Templates tab, select (or create) a category in which to place the new template. Grouping templates into categories allows you to keep your templates organized.

Then click the "Add new template" icon.

Preparations

Before proceeding, it is a good idea to think about what the template will do. This will allow you to prepare it optimally. In this case, the assumptions will be as follows:

• if used when text is selected in the editor, the text is to be enclosed on the left and right by and - the left and right sides of the macro will be used
• the macro code is to allow for the following attributes: id and class - variables will be used
• Attributes do not necessarily have to be used (eg class will not always be needed) - they will be placed in blocks

After opening the Macro Editor , choose a name for it. In this case, " DIV + id + class " will be best

The template type can remain the default - "Just template".

Create a tag skeleton

It is most convenient to create the tag skeleton in the editor using the appropriate Spider tools for each tag. However, for an example as simple as the template you are currently creating, you can type the content manually.

The assumptions imply that if there was selected text in the editor when the macro code was inserted, it should be covered by the

The next step will be to insert attributes. To make attributes optional to insert, use blocks. However, in order to have a view of the final, complete view of the template at the beginning of the work, it is most convenient to enter the content in the markup in the "Left side of the template" tab. The text will be moved to the sides later.

After completing the tag with the attributes will, the text in the "Left side of macro code" tab will look like this:
<div class="" id="">

Use of variables

Now you need to fill in the attribute values that are currently empty. You can enter them there directly, but the best option is to use variables for this purpose - when using the macro code, you will be able to adjust the attribute values to the current needs.

The first thing to do is create a variable for the value of the class attribute. To create a variable, click the "Add new variable" icon in the menu above the template content editing window.

• In the "Variable Name" field, enter a name (for example, "Class Name").
• The "Hidden Variable" option will remain unchecked (a user using the macro code must see it in the inspector to change its value).
• Variable type - since this is a class argument, select the "CSS class name and list" type. Selecting this type will automatically populate the list if there is an external CSS stylesheet inserted or attached in the document that the user wants to insert the template into.
• Finally, you can fill in the "Default class name" field. This will cause this value to be included in the list of classes, even if there is no such class in the CSS stylesheet.

Do the same for the id attribute value. The only difference will be the choice of the variable type - this time "Value type text".

Once a variable has been created, it will appear in the list of variables. To insert it into the body of the macro code, place the cursor between the quotes of the value and click the "Insert selected variable" icon.

Move tag attributes to blocks

When the attributes along with the variables are ready, they can be moved into blocks.

To move content into a block, you must first cut it and place it on the clipboard. This can be done with the context menu (right-click on the selected text), or with the standard shortcut Ctrl+X. It is best to cut the text together with a space before it - then when inserting a block it will always be separated with a space from the preceding tag name or content of another block.

Then create a new block - using the "Add new block" icon. In the "Edit template Block" window, give the block a name (e.g. "CLASS Attribute", or "ID Attribute") and paste the copied text (using the context menu or Ctrl+V shortcut).

After creating the block, insert its callout in place of the cut attribute. To insert a block in a tag, place the cursor in the appropriate place in the tag (where the text for the block was cut from) and click the "Insert selected block" icon.

After inserting block calls into the content of the left part of the template, it should be in the form:
<DIV%pblock%Class%pblock%%pblock%Attribute ID%pblock%>

Now you can close the window with the OK button - the template is ready!

You will be able to use the template using the options:

• "Insert template at cursor position"
• "Insert template without center"