2022.2

Tip: ClicktheEdgesbuttononthetoolbartomakebordersofelementsvisibleontheDesigntab.
TheborderswillnotbevisibleonthePreviewtaborintheoutput.
Litmus
Thereareseveraltoolstopreviewhowemailwillberenderedonavarietyofclients.Werecommend
usingLitmus.SupportforLitmusisintegratedintotheDesigner;theSendTestEmaildialoghasan
optionto"SendtoLitmus".
Emmet
Emmetisapluginthatenablesthelightning-fastcreationofHTMLcodethoughtheuseofasimpleand
effectiveshortcutlanguage.TheEmmetfunctionalityisavailableintheHTMLandCSSsourceeditors
ofConnectDesigner.EmmettransformsabbreviationsforHTMLelementsandCSSpropertiestothe
respectivesourcecode.TheexpansionofabbreviationsisinvokedwiththeTabkey.
IntheSourcetaboftheWorkspace,youcouldforexampletypediv.row.Thisistheabbreviationfora
<div>elementwiththeclassrow.
OnpressingtheTabkey,thisabbreviationistransformedto:
<div class="row"></div>
ToquicklyenteratablewiththeID'green',onerow,andtwocellsinthatrow,type:
table#green>tr>td*2
OnpressingtheTabkey,thisistransformedto:
<table id="green">
<tr>
<td></td>
<td></td>
</tr>
</table>
AllstandardabbreviationscanbefoundinEmmet'sdocumentation:Abbreviations.
TolearnmoreaboutEmmet,pleaseseetheirwebsite:Emmet.ioandtheEmmet.iodocumentation:
http://docs.emmet.io/.
Preferences
TochangethewayEmmetworksintheDesigner,selectWindow > Preferences,andinthePrefer-
encesdialog,selectEmmet;see"Emmetpreferences"onpage358.
Page 152