The HTML editor features two edition modes: normal mode restitutes
elements close to how they will appear in the client, while source mode
lets you directly edit the document source. Use the View/HTML source
menu or CTRL+H shortcut to change one mode to the other. Please note that
although handling all the tags needed to achieve appealing layouts, eMill's
HTML editor is destined to produce email content. If you plan to produce
sophisticated layouts from a graphical interface environment, we advise you
use a professional web editor and import the file
into your project.
For edition instructions, refer to the standard
and the html editor
commands description.
Content selection:
A project may have several HTML content files. Select the file you want
to edit using the Project/Select Content menu.
Page properties:
To access your HTML document properties, select the Format/Page Properties
menu:
Page title: (Optional) - Text inserted between <TITLE></TITLE>,
displayed as the document name when viewed from a web browser.
Margins: (Optional) - Specifies the TOPMARGIN and LEFTMARGIN
attributes of the BODY tag. Determines the space between the outer limits
of the client window and the content displayed.
For more properties, select the Background tab:
Background picture: Choose a JPEG or GIF file you want displayed
in the background. Generates and affects value to the BACKGROUND attribute
of the BODY tag.
Default text color: Generates and affects value to the TEXT
attribute of the BODY tag.
Background color: Specifies the background filling color
of the client email window. Generates and affects value to the BGCOLOR attribute
of the BODY tag.
Copy/paste an HTML
content from an external application:
If you create an HTML content by using an external application, you can
either import the file in your project or copy the
content to paste it within the eMill HTML Editor.
If you use non-professional HTML editors such as MS Word or Publisher, it is
highly recommended not to import the file but to copy the content and paste it
within the eMill HTML Editor by using the Special paste feature. This
allows you to 'clean' the code created by these applications which could male
your email being flagged as a spam by several mail clients.
To use the Special paste feature, copy the HTML content, open the
eMill HTML Editor in the Design view and go to the Edit > Special
paste menu.
Check the box(es) corresponding to the elements you want to remove. For
instance, if you paste a content create by MS Word, it is recommended to check
the Styles box. By checking the first box All tags and attributes,
you will only keep the content text.
Text edition features:
The editor offers fonts available from your system. Since the email client
also relies on system fonts, it is advised for consistency purposes not to
use the most exotic fonts.
Font: Lists the fonts available from your system. Generates and
affects value to the FONT tag.
Style: Applies to a text selection the SRTONG (bold) and
EM (italic) tags.
Size: Generates and affects value to the SIZE attribute
of the FONT tag.
Effects: Applies to a text selection the U (underlined)
tag. The color setting generates and affects value to the COLOR attribute
of the FONT tag around a text selection.
Separators: 'Insert Horizontal Line' generates an HR tag
at insertion point. 'Insert Break Line' generates a BR tag at insertion point.
'Carriage Return' (Enter) generates a P tag at insertion point.
Inserting images:
By default, eMill embeds images inside the email file. If you need to keep
images on a server, type the http:// URL to the image (e.g. IMG SRC="http://www.mycompany.com/graphics/map.gif").
Picture Source: Path and filename of the image. Use the adjacent
button to browse for the file or type a URL string starting with http://
for images on the server. Generates and affects the value to the SRC (source)
attribute of the IMG (image) tag.
Alternate Text: Provides a text alternate to the image
for clients not downloading graphics. Generates and affects value to the
ALT attribute of the IMG tag.
Layout: Generates and affects values to the ALIGN and
BORDER attributes of the IMG tag.
Spacing: Generates and affects values to the HSPACE
and VSPACE attributes of the IMG tag.
Hyperlinks:
Lets you create a hyperlink from a text or image selection.
URL: Enter the http:// address the link points to.
Bookmark: Adds an optional anchor point to the address above.
Allow link tracking: Determines whether the click on this particular
link should be recorded in the tracking statistics.
Name: Give a name to the link in order to differentiate it when
analysing the tracking statistics.
The unsubscribe link: From the Insert menu, you can select Unsubscribe link. It allows
you to add a link to your message content with the text 'Click here to unsubscribe'. When a receiver clicks on this link, it opens a new email
in which the following elements are already filled out:
- To: The message is sent to your project's sender email address (see Headers Properties).
- Subject: It is composed of the word 'Unsubscribe', the receiver email address
and the eMill project ID. Note that, you can process the unsubscribe
request automatically with eMill thanks to the Message Rules.
Tables:
Tables are effectively used to help control HTML layouts, allowing you to
position text or images inside a grid, which dimensions can be precisely set.
Tags and attributes generated for tables:
TABLE: Tag that indicates where a table starts <TITLE>
and ends </TITLE>.
TR: Tag that indicates where a table row starts
<TR> and ends </TR>.
TD: Tag that indicates where a cell inside
a row starts <TD> and ends </TD>.
There are only a few basic things you need to know if you want to create
your tables from the source mode (recommended):
Text and images are inserted between <TD></TD>, that delimit
a cell.
Cells are included between <TR></TR>, marking the limits of
a row.
Rows are included between <TABLE></TABLE>, defining a table
.
The number of <TR></TR> occurrences gives the number of rows
for the table. The number of <TD></TD> occurrences between each
<TR></TR> gives the number of cells, and should be identical
for each row if no contiguous cells are merged. Contiguous cells within a
row can be merged, in which case a COLSPAN attribute is generated after the
TD tag (e.g. TD COLSPAN=2 indicates 2 cells from a row are merged). Note
that eMill does not generate ROWSPAN attributes from the normal mode (merges
contiguous cells from two different rows).
WIDTH and HEIGHT attributes can be added to TABLE, TR and TD tags. The value
is either in pixels or percentage (of window or table dimension). It is those
attributes that are used to precisely control the HTML layout.
Table attributes: When creating a new table:
Number of Columns: Sets the number of cells per row (TD tags).
Number of Rows: Sets the number of rows (TR tags,
which include TD tags above).
Size: Applies a WIDTH and / or HEIGHT attribute
to the TABLE tag (choose in pixels or in percent).
Border: Sets the BORDER attribute of the TABLE tag
(border thickness around table).
Cellspacing: Sets the CELLSPACING attribute of the
TABLE tag (space between cells).
Cellpadding: Sets the CELLPADDING attribute of the
TABLE tag (space between objects inside cells and outer limits of cell).
Table color: Sets the BGCOLOR attribute of the TABLE
tag.
Cell color: Presets a BGCOLOR attribute to all TD
tags of the table.
Additional attributes from the Table Properties option (right-click
inside the table):
Background: Sets a JPEG or GIF image file in the table background
(BACKGROUND attribute).
Alignment: Generates the DIV tag and sets the ALIGN
attribute before the TABLE tag.
Cell attributes: Right-click inside the cell or highlight a group
of cells from the same row and select Cell Properties. Note: empty cells cannot be selected from the
normal view. Cells are created with a space character (nbsp) to allow selection.
Create one if it was deleted.
Size: Applies a WIDTH and / or HEIGHT attribute to the TD tag
(choose in pixels or in percent).
Cell color: Sets a BGCOLOR attribute to the TD
tag.
Background: Sets a JPEG or GIF image file in the
cell background (BACKGROUND attribute).
Horizontal alignment: Sets the ALIGN attribute
to the TD tag.
Vertical alignment: Sets the VALIGN attribute
to the TD tag.
Colors: The editor provides a color palette. Colors are applied to
text, tables, cells, and the document background. You can specify custom
colors and add them to the project color palette.
From the page, table, cell or font properties, select the color you want
to apply. To add a color to the palette, select Custom Colors; pick
your color from the chooser and Add.
