2022.2

wouldproduceinvalidHTMLthefinalresultmaybedifferentthanexpected.Forexample,
whenyouinsertaDivintoaparagraph,theparagraphgetssplitintwo.Thismeansyou
endupwithtwoparagraphswiththeDivinbetween.
Foralistoflinkstothedifferenttypesofelements,see"Elementtypes"onpage170.
Selecting an element
Whenanelementisselected,theAttributespaneshowstheattributesofthatelement,andtheStyles
pane,nexttotheAttributespane,showswhichstylesareappliedtoit.
Toselectanelementinthecontent,youcanofcourseclickonit,butthisisn'talwaysaseasyasit
seems,especiallywhentheelementhaselementsinsideit.
Tip: ClicktheEdgesbuttononthetoolbartemporarilyaddsaframetocertainelementsonthe
Designtab.ThesewillnotPrintoroutput.
Therearetwomorewaystoselectanelementinthecontent:
l
UsingtheBreadcrumbsatthetopoftheworkspace.
BreadcrumbsshowtheHTMLtagoftheclickedelement,aswellastheHTMLtagsof'parentele-
ments':elementsinsideofwhichtheclickedelementislocated.Theclickedelementisattheend
oftheline.
ElementswithclassesorIDsshowthesedetailsnexttothem,forinstancediv #contents >
ol.salesitems > li ~contents.
ClickanyoftheelementsintheBreadcrumbstoselectthatelement.Ifanelementisselectedin
theBreadcrumbsandtheBackspacekeyispressed,thatelementisdeleted.
Click~contentstoselectthecontentsoftheelement.Thiswayyoumay,forexample,quickly
changethetextofahyperlink.
l
UsingtheOutlinepane.YoucanfindthispanenexttotheResourcespane.Itdisplaysatree
viewoftheelementsinthefile.Clickanelementinthetreeviewtoselectit.
Deleting an element
Todeleteanelement,selectit-asdescribedabove-andpresstheDeletekey.
Ifthedeletedelementwastargetedbyascript,youwillbeaskedifyouwanttodeletethescriptaswell.
Page 174