2022.2

Styling an image
Justlikemanyotherelements,imagescanbegivenbordersandroundedcorners,andtheycanbe
rotated.Howtodothisisn'tanydifferentfromthewayitisdonewithotherelements,soitisn't
describedinthistopic,butingeneralformattingtopics;see"Stylingandformatting"onpage671.
Thistopicdiscussesspecificimageformattingissues.
NotethatimagecharacteristicslikebrightnessandcontrastcannotbechangedwithintheDesigner.
Localformattingvs.stylesheets
Justasotherelements,imagescanbestyledintwoways:
l
Withlocal formatting.Thismeansstylingtheimagedirectly,usingtheFormattingdialog.
l
ViaCascading Style Sheets(CSS).Inastylesheet,stylerulesaredeclaredforelementswith
differentHTMLtags,ID'sandclasses.
See"Stylingandformatting"onpage671forbackgroundinformationaboutthesetwomethods.
Applying local formatting to an image
Toapplylocalformattingtoanimage,either:
l
right-clicktheimageandselectImage...fromthecontextualmenu
l
clicktheimageandselectFormat > Image...fromthemenu.
Foranexplanationoftheavailableoptions,see"ImageFormattingdialog"onpage886.
Applying style rules to an image
Toformatanimageviaastyle sheet,firstgivetheimageanIDorclass:selecttheimage,andenter
theIDorclassontheAttributespane.ThismakesitpossibletomaketheCSSstyleruletargetthis
imagespecifically,orasetofimageswiththesameclass.Astylerulewiththeselectorimg(theHTML
imagetag)wouldapplytoallimages.
Next,createthestylerule;see"StylingtemplateswithCSSfiles"onpage672.Notethatwhenaprop-
ertyisn'tpresentinthestyleruleeditor,itcanstillbeused:clicktheAdvancedbuttoninthestylerule
editor;enterthepropertyunderProperty,anditsvalueunderValue.
Resizinganimage
Thereareseveralwaystoresizeanimageafterinsertingitinthecontentofatemplate.
l
Clicktheimageanddragthehandlestoresizeit.PresstheShiftkeywhiledragging,toscalethe
imageproportionally.
Page 693