CoffeeCup HTML Editor Manual

transcript

HTMLEditorHelpAugust2009

GotquestionsaboutthefeaturesinHTMLEditor?Wanttocheckoutsomehelpfultutorialstogetyouuptospeedonusingtheprogram?You’vecometotherightplace!ProgramOverviewLearnaboutthetoolsandfeaturesavailablewithintheprogram.TutorialsStep‐by‐stepinstructionsforthemostcommonlyusedfeaturesoftheprogram.FrequentlyAskedQuestionsGotaquestionaboutthesoftware?Findyouranswerhere.CoffeeCupInformationLearnmoreaboutCoffeeCupandreviewallthelegalgobbledygook.StillCan’tFindYourAnswer?

Visitouruserforums(http://www.coffeecup.com/forums/),checkoutthearticlesandvideotutorialsinouronlineKnowledgebase(http://www.coffeecup.com/html‐editor/help/)orcontactourfabuloustechsupportteam(http://www.coffeecup.com/help/)!

ProgramOverviewLearnaboutthetoolsandfeaturesavailablewithintheprogram.

• What is the HTML Editor? • How to use this manual • What’s new • System requirements • Installing the software • Opening the program • Menu bar • Toolbar • Code Editor • Visual Editor • Preview tab • Statusbar • Resource browser

My Websites tab My Computer tab Code Snippets tab Tags tab Characters tab

TutorialsStep‐by‐stepinstructionsforthemostcommonlyusedfeaturesoftheprogram.

CreatingandModifyingYourPages• Working with Website Projects • Creating a new Webpage • Adding an image to your page • How to change the appearance of text • Working with links

o Absolute vs. relative links o Adding a link to your page o Adding an e-mail link to your page o Linking to a downloadable document o Linking to different parts of the same page

• How to create a list • How to use snippets • How to add a Flash™ element created with a CoffeeCup Flash™ program • How to use the Frame designer • How to use the CSS Menu Designer • How to use the Open From Web function • How to use bookmarks • How to use the Code Cleaner • How to use Extended Find and Replace • Previewing your work

CustomizingtheProgram• Switching between open files • Adjusting code highlighting options • How to create a custom toolbar • Customizing code completion tags

FrequentlyAskedQuestionsGotaquestionaboutthesoftware?Findyouranswerhere.

• Frequently asked questions o Features, tools, and functionality o Customization o Error messages and troubleshooting o Miscellaneous

• Keyboard shortcuts • Glossary

CoffeeCupInformationLearnmoreaboutCoffeeCupSoftwareandreviewallthelegalgobbledygook.

• About CoffeeCup Software • Contact us • Thank you • End User License Agreement • Notice of copyright • Software privacy policy

WhatistheHTMLEditor?TheHTMLEditorisafull‐featuredWebdesigntoolforbeginnersandexpertsalike.AhostofusefulfeatureshelpyoucreateandmodifyWebpagesquicklyandefficiently,revealtheinsandoutsofHTML,andgiveyoucompletecontroloverthedesignandstructureofyourWebsite.SinceaWebsiteisfarmorethanjustthefilesthatmakeitup,theHTMLEditoralsocontainsWebsiteProjects,acomprehensivesystemthatkeepsyourworkorganized.Itmaysoundhardtobelieve,butyou’llneverhavetoworryaboutanincorrectlyreferencedlinksorimagesagain!Andwithimprovedvalidation,youcanrestassuredthatyourWebsitewillalwaysperformreliably.Sweetadd‐onslikeabuilt‐inCSSmenudesigner,colorschemegenerator,andimagemappingtool—nottomentiontheabilitytoopenexternalapplicationsfromwithintheprogram—putalltheessentialWebdesigntoolsinoneplace.AndsincenoWebsiteiscompleteuntilit’spublishedtotheWeb,weincludedabuilt‐inFTPclientandserveraccess,allowingyoutouploadworkeasilyandeditdocumentsdirectlyonyourserver.

HowtoUseThisManualWelcometotheCoffeeCupHTMLEditorPDFHelpmanual!Thisistheplacetogotolearntheinsandoutsofthisprogram.Youcannavigatethroughthismanualusingthetableofcontentsontheleftorbyjustreadingitstraightthrough.Ifyou’rewonderingaboutacertainterm,youcansearchforitintheboxuptop.There’salsoaglossarythatcoverscommonlyused(andcommonlymisunderstood)terms.Youmayhavenoticedthatglossaryisboldandredinthepreviousparagraph.That’sbecauseit’salinkthat,whenclicked,takesyoutotheGlossary.Thismanualcontainstonsoflinksformattedinboldredtextand

• bulleted • lists • like • this • one.

You’llalsoseelinkstoWebpagescontainingadditionalinformationformattedlikethis:http://www.coffeecup.com.Justclickthem,andyourdefaultWebbrowserwillopenthepage.We’veincludedsomehandyiconstohelphighlightimportantinformation.

ForMoreInformationLinksyoutoatutorialorfrequentlyaskedquestionthatexplainsthetoolorfunctioninmoredetail.

OnlineResourceLinksyoutoaWebsitecontaininginformationthatmaybebeyondthescopeofthismanual.

UseThisToolWith…Linkstoanothertoolorfunctionthatcanbeusedwiththetoolorfunctionbeingdescribed.

WatchOut!Lookforthisicontoseecommonusererrorsthatmayoccurwhenusingthetoolorfunction.

You’llalsonoticethatthemanualisdividedintodifferentsections.TheProgramOverviewportionexplainswhatallthedifferentmenus,buttons,andcommandsdo.Ifyouhaveaquestionaboutwhatabuttonormenuoptiondoes,you’llfindyouranswerhere.Ifyouwanttolearnhowtoperformataskintheprogram,checkouttheTutorialssection.Itwalksyouthroughcommontasksusingsimple,step‐by‐stepinstructions.Haveaquestion?VisittheFAQ.We’vekepttrackofthequestionswehearmostoftenfromourusersandgatheredthemtogetherinthissection.Wehopethishelps!Ifyouhaveanyquestions,comments,orsuggestionsabouthowthismanualcanbeimproved,we’dlovetohearthem.Shootusane‐mailatwordnerd@coffeecup.com.Anytechnicalsupportrequestsshouldstillgotohttp://www.coffeecup.com/help/myroom/.

What’sNew

• Renamed Projects to Website Projects and improved the feature • Updated markup • Added Validate HTML tool, which opens the W3C markup validation service in

the default browser (http://validator.w3.org/) • Added Server tab to the Resource browser • Open From Web tool can now download and open CSS files • Added Theme Chooser window • Updated user interface • Additional preferences for customizing the workspace • Updated Help manual • Improved Find and Replace performance • Additional options in Quick Start window, including DOCTYPE and character

sets • Replaced DHTML Menu Builder with CSS Menu Designer • Added Welcome window that provides options to help users get started quickly

SystemRequirementsTorunthesoftwareefficiently,yourcomputersystemshouldmeetthefollowingrequirements:

• Operating System – XP, Vista 32-bit • Disk Space – 30 MB • RAM – 120 MB

InstallingtheSoftwareIfyouareinstallingtheregisteredversionofthesoftware,itishighlyrecommendedthatyouuninstallthetrialversionbeforeinstallingtheregisteredversion,andthenrestartyourcomputer.Ifyouhavecreatedanyprojectswiththetrialversion,itisrecommendedthatyoubackthemuptopreventloss.Ifyouhaven'talreadydownloadedyoursoftware,youcanlogintoyourCoffeeCupuseraccount(http://www.coffeecup.com/login/)usingthee‐mailaddressandpasswordyouusedwhenpurchasingthesoftware.Onceyouhavedownloadedthesoftware,double‐clickthe.exefiletostartthesetupprocess.Asyouproceedthroughthesetup,youcanlettheprograminstallwiththedefaultsettings,oryoucanchoosewhereyouwouldlikeitinstalled.Werecommendyoustickwiththedefaultsettings.

InstallingCoffeeCupSoftwareonMacOSXCoffeeCupSoftwareisdesignedforinstallationunderWindowsonly.However,youcaninstallandusethesoftwareonMacOSXwiththecorrectutilities.CrossOver(http://www.codeweavers.com/),developedbyCodeWeavers,andVMware(http://www.vmware.com),developedbyVMware,Inc.,bothallowyoutoemulateoursoftwareonMacOSX.

UpgradingtheSoftwareWhenupgradingyoursoftware,youwillneedtologintoyourCoffeeCupuseraccount(http://www.coffeecup.com/login/)justasyoudidtodownloadtheregisteredversionofthesoftware.Whenyoudownloadtheupgrade,itwillbeanewfullversionandnotjustanupgradetotheexistingsoftwareonyoursystem.Toinstallanupgrade,werecommendthatyouuninstallthepreviousversionofthesoftwareandrestartyourcomputer.Thisisbecauseinstallingoverapreviouslyinstalledversioncancausesomefunctionstonotworkcorrectly.Therefore,itisbesttoinstallafreshcopy.

UninstallingtheSoftwareTouninstalltheprogram,youwillneedtousetheAdd/RemoveProgramsfeatureunderyourcontrolpanelsettingsinWindows.YoucanaccessthisbyclickingStart>Settings>ControlPanel>AddorRemovePrograms.

Theuninstallfeaturemaynotremoveallfilesfromyoursystem.Youmayneedtoremovesomefilesandfoldersmanually.Also,ifyouhavepreviouslycreatedprojects,makesuretobackthemuptopreventloss.

OpeningtheProgramWhenyoufirstopentheHTMLEditor,twowindowsappear:theTipoftheDaywindowandtheWelcomewindow.

TipoftheDayWindowDisplayshelpfultipsforworkingwiththeprogram.

Tonavigatethetips,usethePreviousandNextbuttons.Ifyoudonotwanttoseethesetipsonstartup,uncheckthecheckboxnexttoShowtipofthedayonstartup.

Tore‐enabletheTipoftheDaywindow,gotoHelp>TipoftheDayorusetheoptionsunderTools>Preferences>Generaltab.

WelcomeWindowContainslinkstocommonlyusedprogramfunctions.

NewBlankPageOpenstheQuickStartwindow,whichallowsyoutodefinesettingsforyournewpage,includingthepagetitle,colorscheme,metainformation,andcharacterset.

NewWebsiteProjectOpenstheWebsiteProjectSettingswindow,whichletsyoucreateablankWebsiteProjectortocreateaWebsiteProjectfromexistingfiles.Youcanalsoenteradditionalinformation,suchasyourserversettings,andselectyourfileuploadoptions.

StartWithaThemeOpensawindowthatallowsyoutochoosefromseveralWebpagethemes.

Athemeincludesthreepages(index.html,about‐us.html,andcontact‐us.html)thatincludetheHTMLandimagesforabasicdesign.Youcanreplacetheimagesandtextwithyourowncontent.Ifyouprefertowork

withapagestructure,gotoFile>NewFromLayout.Formoreinformationaboutthedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetweenalayoutandatheme?

Fordetailedtutorialscoveringeachoftheseoptionsforcreatinganewpage,readCreatingaNewWebpage.

OpenExistingFilesAllowsyoutoopenandworkwithapreviouslycreatedfile.

OpenaWebsiteProjectAllowsyoutoopenandworkwithapreviouslycreatedWebsiteProject.

What’saWebsiteProjectAnyway?OpenstheWhatisaWebsiteProject?WebsiteProject,whichgivesstep‐by‐stepinstructionsforhowtoworkwithWebsiteProjects.

MenuBarTheMenubarislocatedatthetopoftheprogram.Itgivesyouaccesstoalltheprogramtools,aswellasoptionslikechanginghowtheprogramlooks,openingandclosingpages,etc.TheoptionsundereachcategorychangedependingwhetheryouareusingtheCodeorVisualeditor.Inthismanual,wehavedescribedtheviewfromtheCodeEditor,becauseitcontainsalltheavailableoptions.

• File menu • Edit menu • View menu • My Websites menu • Document menu • Insert menu • Format menu • Tools menu • Window menu • Help menu

FileMenuTheFilemenucontainsoptionsthatallowyoutocreate,open,close,andsavepages,uploadandprintyourwork,andexittheprogram.

Fordetailedtutorialscoveringthefourdifferentwaystocreate

anewWebpage,readCreatingaNewWebpage.

NewFromQuickStart…OpenstheQuickStartwindow,whichallowsyoutodefinesettingsforyournewpage,includingthepagetitle,colorscheme,metainformation,andcharacterset.

NewBlankPage(Ctrl+N)Createsanewpageforyoutoeditfromscratch.Bydefault,newpagesincludesomebasicHTMLtohelpgetyoustarted.ThisincludestheDOCTYPE,html,head,title,meta,andbodytags,aswellasanHTMLcommentstatingthatthepagewascreatedwithCoffeeCupHTMLEditor.

NewFromLayout…OpensawindowthatallowsyoutochoosefromseveralWebpagelayouts.

AlayoutincludestheHTMLforabasicpagestructure.Youprovidethecontent.Ifyouprefertoworkwithapagedesign,gotoFile>NewFromTheme.Formoreinformationaboutthedifferencebetweenlayoutsand

themes,readWhatisthedifferencebetweenalayoutandatheme?

NewFromTheme…OpensawindowthatallowsyoutochoosefromseveralWebpagethemes.

withapagestructure,gotoFile>NewFromLayout.Formoreinformationaboutthedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetweenalayoutandatheme?

Open…(Ctrl+O)Allowsyoutoopenandworkwithapreviouslycreatedfile.

OpenFromWeb…OpenstheOpenFromWebwindow,whichallowsyoutoimportanHTMLpageontheInternetintotheHTMLEditor.ThisoptionworksbestwithHTMLpagesthatdonotcontainPHPorSSI.Thesescriptsarestoredontheserver,andsometimesaddcodetoaWebpagethatcannotbeimportedintotheHTMLEditor.

RecentFilesDisplaysalistoffilesyouhaveworkedwithrecently,whichallowsyoutoaccessthemmorequickly.

CloseClosesthecurrentfileyouhaveopen,butleavestheprogramopen.

CloseAllClosesalltheopenfiles,butleavestheprogramopen.

Save(Ctrl+S)Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.

SaveAs…(Shift+Ctrl+S)Savesthecurrentfileunderadifferentname.Thiswillnotoverwritethefileyouarecurrentlyworkingon;instead,itwillcreateanewfilethatyoucangiveadifferentname.

SaveAllSavesalltheopenfiles.

SaveSelectedTextasSnippet…OpenstheSaveSnippetwindow,whichallowsyoutonameandsavethehighlightedtextasasnippet.

AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCodeSnippetstab.Foradetailedtutorialaboutworkingwithsnippets,readHowtoUseSnippets.

UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.

PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.

AddorEditServers…OpenstheServerConfigurationwindow,whichallowsyoutoconfigureaneworexistingserverprofile.

Print(Ctrl+P)Printsthecurrentfileinwhateverviewyouhaveselected(CodeEditor,VisualEditor,orPreview).

PrintPreview…Opensawindowthatallowsyoutopreviewthecurrentfileforprintinginwhateverviewyouhaveselected(CodeEditor,VisualEditor,orPreview).

PageSetup…OpensthePrintSetupwindow,whichallowsyoutoadjusttheprintingsettingsforthecurrentfile.

ExitClosestheprogram.

QuickStartWindowTheQuickStartwindowallowsyoutodefinesettingsforyournewpage,includingthepagetitle,colorscheme,DOCTYPE,characterset,andmetainformation.

ForadetailedtutorialaboutusingtheQuickStartwindow,readCreatingaNewWebpage.

YoucanpreviewthesettingsyouchooseinthePagePreviewpaneinthemiddleofthewindow.

PageTitleThetextdisplayedonthebrowser'stitlebarthatalsoappearsinsearchresults.Agoodpagetitlesuccinctlydescribesthecontentonthepage.

BackgroundImageToselectabackgroundimageforyourpage,enterthefilepathinthisfieldorclicktheBrowseicontobrowseyourcomputerfortheimageyouwishtouse.Toremoveabackgroundimage,clicktheredXicon.

ColorsTherearefivecoloroptionsavailable:pagebackground,text,andunvisited,visited,andactivelinks.Tochangethecolorofanyoftheseelements,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.

Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

ColorSchemeDrop‐DownListIfyouwouldliketouseacolorscheme,selectonefromthisdrop‐downlist.

SaveClickthisbuttonifyoumadechangestoaschemethatyouwouldliketosave.

SaveAs…Clickthisbuttonifyouhavecreatedacolorschemeyouwouldliketouseagain.Thisopensawindowthatallowsyoutoenteranameforyournewscheme.

AfteryouclickOK,theschemewillbeavailableunderthedrop‐downlist.

DeleteClickthisbuttontodeletetheselectedscheme.

Don’tUnderlineLinksCheckthisboxifyouwanttoremovetheautomaticunderlinefromyourlinks.

DOCTYPESelectthedesiredDOCTYPEfromthisdrop‐downlist.

CharsetSelectyourpreferredcharactersetfromthisdrop‐downlist.

MetaDescriptionThisisashortdescriptionofyourWebsite.Itshouldbenolongerthan50words.

MetaKeywordsThesearewordsthatdescribeyourWebpage.Theymusteachbeseparatedbyacommaandaspace.

FormoreinformationaboutDOCTYPEs,charactersets,andmetainformation,readNewFromQuickStart.

OpenFromWebWindowTheOpenFromWebwindowallowsyoutoimportanHTMLpagefromtheInternetintotheHTMLEditor.Tousethistool,entertheURLforthepageyouwanttoopenintheURLtoOpenFromtheWebfieldatthetopofthewindow,andthenclickOpen.TheDownloadStatusareaatthebottomofthewindowwilltellyouthestatusofyourdownload.

Foradetailedtutorialabouthowtousethisfunction,readHowtoUsetheOpenFromWebfunction.

TheOpenFromWebfunctionworksbestwithHTMLpagesthatdonotcontainPHPorSSI.Thesescriptsarestoredontheserver,andsometimesaddcodetoapagethatcannotbeimportedintotheHTML

Editor.Additionally,thisfunctioncannotdownloadallthepagesinagivenWebsite.Todothis,youshoulduseanexternalFTPclientsuchasDirectFTP(http://www.coffeecup.com/direct‐ftp/)orFreeFTP(http://www.coffeecup.com/free‐ftp/).

OptionsTabChoosewhereyouwouldliketodownloadthefileandwhatpartsofthepageyouwouldliketodownload.

DownloadOnlytheHTMLPage(WithoutImagesorOtherRequiredFiles)andOpenitintheEditorThisoptiondownloadstheHTMLfromthepage,butdoesnotincludetheassociatedimagesorotherfiles,likeCSSorscripts.ItopensthefileintheEditor,butdoesnotsaveittoyourcomputer.

TosaveanHTMLpageyouhavedownloadedusingthisoption,gotoFile>Save.

SavetoDiskThisoptionsavesthepagetoalocationyouspecifyonyourcomputer.Tospecifyalocation,clicktheBrowseiconandchoosethefolderwhereyouwantthefilesaved.Ifyouchoosetosavetodisk,youcanalsousetheprovidedcheckboxesto:

• Have the page open in the Editor automatically • Download images that appear in the page • Download related files such as CSS and scripts • Open related CSS files in the HTML Editor.

ProxySettingsTabEntertheproxyhostname,login,password,port,andtypeintheprovidedfields,andthenpressOK.

Ifyouareunsureofanyofthisinformation,contactyourhostingprovider.Ifyouarenotsurewhetheryoushouldusethisinformation,chancesareyoudonothaveto.

ServerConfigurationWindowTheServerConfigurationwindowallowsyoutoconfigureaneworexistingserverprofile.

ClickingtheDeletebuttondeletestheselectedserverprofile.ClickingtheAddorEditbuttonopenstheServerConfiguration–AddandEditwindows,respectively.TheseallowyoutosetupanFTPprofileyoucanusetouploadyourworktoyourserver.

Foradetailedtutorialaboutuploadingyourwork,readtheUploadingYourWebsiteProjectportionofWorkingWithWebsiteProjects.

ServerConfiguration–Add/EditWindowTheServerConfiguration–AddandEditwindows,allowyoutosetupanFTPprofileyoucanusetouploadyourworktoyourserver.

Putthefollowinginformationintheprovidedfields.

Ifyouareunsureofanyofthisinformation,contactyourhostingprovider.

NicknameApersonalreminderyoucanusetotellyourserversapart.Youcannameyourserversanythingyouwant.

UsernameTheFTPusernameassignedtoyoubyyourWebhostingcompany.Besuretoentertheinformationexactlyhowitwasgiventoyoubyyourprovider.Usernamesare

casesensitive,soiftherearecapitallettersinyourusername,youmustenteritthatway.

PasswordTheFTPpasswordassignedtoyoubyyourWebhostingcompany.Besuretoentertheinformationexactlyhowitwasgiventoyoubyyourprovider.Passwordsarecasesensitive,soiftherearecapitallettersinyourpassword,youmustenteritthatway.

PortAportdefineshowtheserverrespondstoacertainprotocol.Thisnumberisusually21,andunlessyourhostingproviderhastoldyouotherwise,youshouldnotchangeit.

UsePassiveModeCheckingthisboxactivatespassivemode.Enablepassivemodeifyouexperiencetroubleconnecting.

HostNameTheTCP/IPhostnameofyourFTPserver.ItshouldbeintheformofanIPaddress,yourdomainname(e.g.yourdomain.com),oryourdomainnameprecededbyftp.(e.g.ftp.yourdomain.com).Donotincludeftp://oranydirectorynamesuchasftp.yourdomain.com/mysite,becausetheseareinvalidTCP/IPhostnames.ItisuptoyourWebhostingcompanytoassignyourFTPserverhostname,soyouwillneedtofindoutfromthemwhatitis.

ExamplesofvalidWebserveraddressesftp.mysite.com24.24.100.100mysite.comExamplesofinvalidWebserveraddressesftp://ftp.mysite.comftp.mysite.com/mysitehttp://www.mysite.com

RemoteFoldersFoldersonyourserverwhereyourWebsitefilesarestored.Commonnamesfortheremoterootfolderincludewww,public_html,orweb.Youcanalsousethisspacetoconfiguresubfoldersonyourserverwhereyoumaywanttodirectlyuploadyourfiles.

TestSettingsClickthisbuttontotesttheserversettings.

EditMenuTheEditmenucontainsoptionsthatallowyoutoundoorredoyouractions,cut,copy,paste,select,anddeleteobjects,convertyourcodecase,runafindandreplace,andedityourXHTMLtags.

Undo(Ctrl+Z)Undoesthelastactionyouhaveperformed.

Redo(Ctrl+Q)Redoesthelastaction.TheRedofunctioncomesinhandywhenyouaccidentallyusetheUndofunctionorchangeyourmindaboutundoinganaction.

Cut(Ctrl+X)RemovestheselectedobjectortextfromthescreenandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.

Copy(Ctrl+C)MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindowsclipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.

Paste(Ctrl+V)TakestheobjectstoredontheWindowsclipboardandplacesitonthepage.Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesameobjectasmanytimesasyouneed.

PasteLinesasTableTakestheobjectstoredontheWindowsclipboardandplacesitinatable.Multiplelinesareplacedintheirownrows.

DeleteRemovestheselectedobject(s).

SelectAll(Ctrl+A)Selectseverythingintheworkspace.Thisishelpfulifyouwanttocopy,cut,ordeletemanyobjectsatatimeinsteadofhavingtoselectthemallindividually.

ConverttoUPPERCASE(Shift+Ctrl+U)Convertstheselectedtextandtagstouppercase.

Converttolowercase(Shift+Ctrl+L)Convertstheselectedtextandtagstolowercase.

ConverttoProperCaseConvertstheselectedtextandtagstopropercase.Propercasecapitalizesthefirstletterofeachword.

Find…(Ctrl+F)OpenstheExtendedFindwindow,whichallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm.

Replace…(Ctrl+H)OpenstheExtendedFindandReplacewindow,whichallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearch

FindNext(F3)FindsthenextinstanceofthesearchtermenteredintheExtendedFindwindow.

EditXHTMLTags…OpenstheEditXHTMLTagswindow,whichallowsyoutoviewandedittheattributesandattributevaluesoftheavailableXHTMLtags.

ExtendedFindWindowTheExtendedFindwindowallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm.

FindEnterthetextorcodeyouwouldliketosearchforinthisfield.

MatchCaseSelectthisoptionifyouonlywanttoseeresultswiththesamecapitalandlowercaselettersasenteredintheFindfield.Forexample,ifyouselectthisoptionandsearchforthephrase“WelcometomyWebsite,”theprogramwillnotrecognizethephrase“welcometomywebsite”asamatch.

FindInThisareaallowsyoutochoosewhichdocumentstosearch.Youcanlookinthecurrentdocument,inallopendocuments,orinallthedocumentsinagivenfolder.Ifyouwanttouseafolder,clicktheBrowseicontobrowseyourcomputerforthedesiredfolder.Youcanalsoselectwhichfiletypesyouwouldliketoreturn,andchoosewhethertosearchinthesubfoldersofthegivenfolder.

ExtendedFindandReplaceWindowTheExtendedFindandReplacewindowallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm,andthenreplaceitwithtextofyourchoosing.

Foradetailedtutorialaboutusingthisfunction,readHowtoUseExtendedFindandReplace.

TheSearchResultstabdisplaysacompletelistofthefileswherethesearchtermappears.Toenableit,gotoView>ExtendedFindResults.

FileThepathtothefilewherethetermwasfound.

PositionThenumberofcharactersinthedocumentthatprecedetheterm.

FindEnterthetextorcodeyouwouldliketosearchforinthisfield.

ReplaceWithEnterthetextorcodeyoutoreplacethesearchterminthisfield.

MatchCaseSelectthisoptionifyouonlywanttoseeresultswiththesamecapitalandlowercaselettersasenteredintheFindfield.Forexample,ifyouselectthisoptionandsearchforthephrase“WelcometomyWebsite,”theprogramwillnotrecognizethephrase“welcometomywebsite”asamatch.

FindInThisareaallowsyoutochoosewhichdocumentstosearch.Youcanlookinthecurrentdocument,inallopendocuments,orinallthedocumentsinagivenfolder.Ifyouwanttouseafolder,clicktheBrowseicontobrowseyourcomputerforthedesiredfolder.Youcanalsoselectwhichfiletypesyouwouldliketoreturn,andchoosewhethertosearchinthesubfoldersofthegivenfolder.

Whenrunningafind/replaceinafolder,theHTMLEditorwillnotconfirmchangeswithyou.Forthisreason,youmaywishtobackupyourfilesbeforeperformingthisaction.

FindNextClickthisbuttontofindthenextinstanceofthesearchterm.Thiswillnotreplaceanything.

ReplaceClickthisbuttontoreplacethecurrentinstanceofthesearchterm.

ReplaceAllClickthisbuttontoreplaceallinstancesofthesearchterm.

EditXHTMLTagsWindowTheEditXHTMLTagswindowallowsyoutoviewandedittheattributesandattributevaluesoftheavailableXHTMLtags.ThechangesyoumakeherewillappearintheTagstabwhenHTMLTagsisselected,andinthecodecompletiondrop‐downlistwhenyouareworkingintheCodeEditor.

FormoreinformationaboutworkingwithXHTML,checkouttheW3SchoolsXHTMLTutorial(http://www.w3schools.com/Xhtml/).

TagStartandTagEndThebeginningandendofthetag.

TagsThisisalistoftheavailableXHTMLtags.YoucanaddcustomXHTMLtagsbyclickingthegreenplussigniconatthebottomofthelist.YoucandeletetagsbyclickingtheredXicon,andyoucanrenamethembyclickingtheEditTagNameicon.

SelectedTagAttributesThisisalistoftheattributesthatcanbeusedwiththeselectedtag.YoucanaddcustomXHTMLattributesbyclickingthegreenplussigniconatthebottomofthelist.YoucandeleteattributesbyclickingtheredXicon,andyoucanrenamethembyclickingtheEditAttributeNameicon.

CustomAttributeValuesThisisalistofthevaluesthatcanbeusedwiththeselectedattribute.YoucanselectthevaluetypefromtheAttributeTypedrop‐downlist.Youcanaddcustomvaluesbyclickingthegreenplussignicontotherightofthelist.YoucandeletevaluesbyclickingtheredXicon,andyoucanrenamethembyclickingtheEditAttributeNameicon.

ViewMenuTheViewmenucontainsoptionsthatallowyoutochangehowthingsappearintheprogram.

ViewsDisplaysalistofoptionsforhowthefilesundertheMyComputertabintheResourcebrowsercanbedisplayed:asicons,alist,details,smallicons,orthumbnails.Thefollowingkeyboardshortcutscanbeusedtoaccesstheseoptions:

• Icons – Shift+Ctrl+F4 • List – Shift+Ctrl+F5 • Details – Shift+Ctrl+F7 • Small Icons – Shift+Ctrl+F8 • Thumbnails – Shift+Ctrl+F9

MyWebsitesTabOpenstheMyWebsitestabintheResourcebrowser.

MyComputerTabOpenstheMyComputertabintheResourcebrowser.

CodeSnippetsTabOpenstheCodeSnippetstabintheResourcebrowser.

XHTMLTagsTabOpenstheXHTMLsectionoftheTagstabintheResourcebrowser.

PHPTagsTabOpensthePHPsectionoftheTagstabintheResourcebrowser.

CSSTagsTabOpenstheCSSsectionoftheTagstabintheResourcebrowser.

CharactersTabOpenstheCharacterstabintheResourcebrowser.

Split‐ScreenPreview(F12)Enablessplit‐screenpreview,whichallowsyoutopreviewyourworkinabrowserareabelowtheCodeEditor.

Toviewyourworkinotherbrowsers,usethePreviewtool.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.Themostpopularbrowsersare

Firefox,InternetExplorer,Opera,GoogleChrome,andSafari.

ToggleGutterEnablesthegutter,whichisabartotheleftofthecodewherelinenumbers,bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.

ToggleWordWrapSelectthisoptionifyouwouldlikeyourtexttoautomaticallywraptofittheCodeEditorworkspace.

ToggleLineNumbersTurnsonlinenumbersinthegutter.

ExtendedFindResultsDisplaystheSearchResultstabatthebottomoftheprogram.

SearchResultsandDocumentDependenciesTabsThisareacontainstwotabs,SearchResultsandDocumentDependencies.TheSearchResultstabdisplaysthefileswherethesearchtermspecifiedintheExtendedFindorExtendedFindandReplacewindowswasfound.TheDocumentDependenciestabdisplaysthelinksandexternalfilesreferencedintheopenWebsiteProjectthathavenotbeencopiedormovedtooneoftheWebsiteProjectfolders.

Toexitthisarea,clicktheredXinitsupperright‐handcorner.

• Search Results tab • Document Dependencies tab

SearchResultsTabTheSearchResultstabdisplaysthefileswherethesearchtermspecifiedintheExtendedFindorExtendedFindandReplacewindowswasfound.

FileThepathtothefilewherethetermwasfound.

PositionThenumberofcharactersinthedocumentthatprecedetheterm.

DocumentDependenciesTabTheDocumentDependenciestabdisplaysthelinksandexternalfilesreferencedintheopenWebsiteProjectthathavenotbeencopiedormovedtooneoftheWebsiteProjectfolders.

MissingLocalFileThepathtothefilethathasnotbeenaddedtotheWebsiteProject.

WebsiteProjectFileThepathtotheWebsiteProjectfilethatcontainsthemissinglocalfile.

PositionThenumberofcharactersintheWebsiteProjectfilethatprecedetheterm.

DocumentDependenciesRight‐ClickMenuRight‐clickingthedependenciesopensamenuthatallowsyoutoworkwiththeselecteddependencyandWebsiteProject.

EditReferenceBringsyoutothereferenceintheWebsiteProjectfilesoyoucanworkwiththeHTML.

IgnoreWarning(Remove)RemovesthewarningaboutthisdependencyfromtheDocumentDependencieslist.

FindandCopyFiletoProjectOpensawindowthatallowsyoutobrowseyourcomputertofindandcopythemissingfiletoyourWebsiteProject.

MyWebsitesMenuTheMyWebsitesmenuiswhereyoucanworkwithWebsiteProjectsintheprogram.

FormoreinformationaboutusingWebsite

Projects,readWorkingWithWebsiteProjects.

NewWebsiteProject…OpenstheWebsiteProjectSettingswindow,whichletsyoucreateablankWebsiteProjectortocreateaWebsiteProjectfromexistingfiles.Youcanalsoenteradditionalinformation,suchasyourserversettings,andselectyourfileuploadoptions.

OpenWebsiteProject…AllowsyoutoopenandworkwithapreviouslycreatedWebsiteProject.

CloseWebsiteProjectClosesthecurrentWebsiteProjectyouhaveopen,butleavestheprogramopen.

AllWebsiteProjectsOpensalistofalltheWebsiteProjectsyouhavecreated,whichallowsyoutoaccesstheseWebsiteProjectsmorequickly.

RemoveWebsiteProjectRemovestheselectedWebsiteProjectfromtheHTMLEditor.Thefilewillnotbedeletedfromyourcomputer.

WebsiteProjectSettings…OpenstheWebsiteProjectSettingswindow,whichallowsyoutoeditthesettingsforthecurrentWebsiteProject.

UploadSelectedFilesUploadsthecurrentlyselectedWebsiteProjectfilestoyourserver.Thefilestructureispreservedduringtheupload.Forexample,ifyouuploadanimage

calledimage.pngthatislocatedinafoldercalledimages,image.pngwillbeuploadedintotheimagesfolderontheserver.Ifthereisnoimagesfolderontheserver,itwillbecreatedduringtheuploadprocess.YouwillneedtosetupaserverprofileintheWebsiteProjectSettingswindowinordertouploadyourfiles.

YoucanonlyassignoneserverperWebsiteProject.IfyouwanttouploadanyorallofyourWebsiteProjectfilestoadifferentserverthantheonespecifiedinthisfield,youhavetwooptions:

1. Go to My Websites > Website Project Settings, switch the server, and then

upload the file(s). 2. Go to the My Computer tab, right-click the file(s) you want to publish, and

select the server and folder where you want to upload them. If any of your published documents reference these files, the path to the files you are uploading must match the path specified in your HTML code.

UploadEntireWebsiteProjectUploadstheentireWebsiteProjecttoyourserver.Youwillneedtosetupaserverprofileinordertoperformthisaction.

CheckWebsiteProjectDependenciesDisplaystheDocumentDependenciestabatthebottomoftheprogram.

WebsiteProjectSettingsWindowTheWebsiteProjectSettingswindowallowsyoutoaddoreditthesettingsforaneworexistingWebsiteProject.

WebsiteProjectNameThenameofyourWebsiteProject.Itisapersonalreminder,soyoucannameitanythingyouwant.

WebsiteProjectLocationThelocationwhereyourWebsiteProjectisstoredonyourcomputer.UsetheBrowseicontobrowseyourcomputerforthedesiredlocation.

ServerTheserverwhereyouwilluploadyourWebsiteProjectfiles.YoucanselectoneoftheserversyouhavealreadydefinedordefineoneusingthefieldsintheServerConfigurationwindow.

ConfigureServersOpenstheServerConfigurationwindow,whichallowsyoutoconfigureaneworexistingserverprofile.

RemoteRootFolderTherootfolderwhereyourWebsitefilesarestoredonyourserver.Commonnamesincludewww,public_html,orweb.Ifyouarenotsureofthisinformation,contactyourhostingprovider.

ServerURLTheTCP/IPhostnameofyourFTPserver.ItshouldbeintheformofanIPaddress,yourdomainname(e.g.yourdomain.com),oryourdomainnameprecededbyftp.(e.g.ftp.yourdomain.com).Donotincludeftp://oranydirectorynamesuchasftp.yourdomain.com/mysite,becausetheseareinvalidTCP/IPhostnames.ItisuptoyourWebhostingcompanytoassignyourFTPserverhostname,soyouwillneedtofindoutfromthemwhatitis.

CheckDependenciesBeforeUploadingFilesChecksthedependenciesbeforeuploadingyourfilestoyourservertoensuretheyarereferencedcorrectly.WebsiteProjectdependenciesarelinksandexternalfiles,suchasstylesheets,images,etc.

IfDependenciesAreMissingFromLocalSystem,CancelFileUploadCancelsthefileuploadifanyofthedocumentdependenciesarenotlocatedintherightplaceinyourWebsiteProject.

WhenUploadingFilesYoucanchoosetoalwaysuploaddependentfileslikeimagesandstylesheets,neveruploadthem,orhavetheprogramconfirmwithyoubeforeuploadingthem.

DocumentMenuTheDocumentmenuallowsyoutoworkwithdocumentpropertiesandbookmarks,andtovalidateyourHTML.

DocumentWeight…OpenstheDocumentWeightwindow,whichcontainsinformationaboutthesizeofthecurrentlyopendocumentandhowlongitwilltaketodownloadtoacomputeronseveraldifferentconnections.

DocumentDependencies…OpenstheDocumentDependencieswindow,whichliststhebackgroundimages,items,andexternallinksinyourdocument.Youcanusethisinformationtokeeptrackofyourdependenciesandpreventissueslikebrokenlinksandimages.

DocumentProperties…OpenstheDocumentPropertieswindow,whichletsyouchangethepagetitle,characterset,backgroundimageorcolor,linkcolors,andcolorscheme.

SetHighlighterFileTypeDisplaysalistoffourfiletypes:text,HTML,CSS,andPerl.Thehighlightingstyleinthedocumentwillchangeaccordingtowhichoptionyouchoose.

Tochangethehighlightingcolorscheme,gotoTools>Preferences>Customizationtab,andthenclicktheModifyHighlightingbutton.

SetBookmark(Shift+Ctrl+[0–9])Displaysalistof10bookmarkslotslabeledBookmark0–9.Selectingoneoftheseoptionssetsabookmarkatthelocationofthecursor.Ifyousetabookmarkinaslotthatalreadycontainsabookmark,itwillberesettothenewlocation.

Foradetailedtutorialaboutworkingwithbookmarks,readHowtoUseBookmarks.

GotoBookmark(Ctrl+[0–9])Displaysalistofbookmarksthathavebeenset.Selectingoneoftheseoptionstakesyoutothelocationofthebookmark.

ClearAllBookmarksClearsallthebookmarksthathavebeenset.

GotoLineNumber…(Ctrl+G)OpenstheGotoLineNumberwindow,whichallowsyoutoenteralinenumberyouwouldliketobetakento.

ValidateHTML…

Openshttp://validator.w3.org/inyourdefaultWebbrowser.YoucanvalidatetheHTMLofpagesyouhavealreadypublishedtoyourserver,oryoucanuploadthefilestothissiteandcheckthembeforeuploading.Formoreinformationaboutusingthistool,refertothesite’sdocumentation(http://validator.w3.org/about.html).

DocumentWeightWindowTheDocumentWeightwindowcontainsinformationaboutthesizeofthecurrentlyopendocumentandhowlongitwilltaketodownloadtoacomputeronseveraldifferentconnections.

Weight(FileSize)Thisareadisplaystheweight(filesize)ofthecurrentdocumentandofanydependencies(backgroundimages,externallinks,etc.).Italsoliststhetotalweightofthedocument.

EstimatedDownloadTimeThisarealiststheestimatedtimeitwilltakeforyourpagetoloadonacomputerbasedonitsconnectionspeed.

DocumentPropertiesWindowTheDocumentPropertieswindowletsyouchangethepagetitle,characterset,backgroundimageorcolor,linkcolor,andcolorscheme.

PageTitleThetextdisplayedonthebrowser'stitlebarthatalsoappearsinsearchresults.Agoodpagetitlesuccinctlydescribesthecontentonthepage.

BackgroundImageToselectabackgroundimageforyourpage,enterthefilepathinthisfieldorclicktheBrowseicontobrowseyourcomputerfortheimageyouwishtouse.Toremoveabackgroundimage,clicktheredXicon.

ColorsTherearefivecoloroptionsavailable:pagebackground,text,andunvisited,visited,andactivelinks.Tochangethecolorofanyoftheseelements,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.

ColorSchemeDrop‐DownListIfyouwouldliketouseacolorscheme,selectonefromthisdrop‐downlist.

SaveClickthisbuttonifyouhavemadechangestoaschemethatyouwouldliketosave.

SaveAs…Clickthisbuttonifyouhavecreatedacolorschemeyouwouldliketouseagain.Thisopensawindowthatallowsyoutoenteranameforyournewscheme.

AfteryouclickOK,theschemewillbeavailableunderthedrop‐downlist.

DeleteClickthisbuttontodeletetheselectedscheme.

Don’tUnderlineLinksCheckthisboxifyouwouldliketoremovetheautomaticunderlinefromyourlinks.

InsertMenuTheInsertmenuallowsyoutoinsertvariouselementsintoyourpage.

Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallowsyoutoinsertalinkandanyassociatedattributes.

Target…(Ctrl+T)OpenstheInsertTargetwindow,whichallowsyoutoinsertatarget.Targetsandlinksareusedtocreatelinkstodifferentpartsofthesamepage.

Foradetailedtutorialaboutusinglinksandtargets,readLinkingtoDifferentPartsoftheSamePage.

E‐mailLink…(Ctrl+E)OpenstheInsertE‐mailLinkwindow,whichallowsyoutoinsertane‐maillinkandanyassociatedattributes.

QuickLinktoOpenDocumentExpandstodisplayalistofdocumentsthatareopenintheHTMLEditor.Mousingoveradocumentnameexpandsthemenutodisplayalistoftheanchorswithinthedocument.

Selectingadocumentandalocationwithinthedocumentinsertsarelativelinktothedocumentandtheselectedanchorintothecurrentlyopenfile.

QuickLinktoRelativeFileExpandstodisplayalistofthefilesandfolderslocatedinthesamefolderasthecurrentlyopendocument,aswellasanoptiontomoveuponefolder.

Selectingafilefromthislistinsertsarelativelinktothatfileinthecurrentlyopendocument.

Carefulwhereyoulink!Ifthefileyoulinktoisn’tlocatedinyourWorkingfolderoryourWebsiteProject,itmaynotbereferencedcorrectly—meaningthelinkwon’twork.Needmoreinformationabout

workingwithWebsiteProjects?Checkoutthistutorial:WorkingWithWebsiteProjects.

Image…(Ctrl+M)OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandanyassociatedattributes,andtocreateathumbnailversionoftheimage.

YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.

Sound…OpenstheInsertSoundwindow,whichyoucanusetobrowseyourcomputerforasoundtoplayonyourWebpage.

YoucanalsoaddasoundbydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.

List…OpenstheInsertListwindow,whichallowsyoutoinsertorimportoneoffourdifferentkindsoflists:bulleted,numbered,definition,orunformatted.

Comment…(Shift+Ctrl+C)OpenstheInsertCommentwindow,whichallowsyoutoinsertacomment.CommentsarenotrenderedbyWebbrowsersandcanbeusedtoleavenotesforyourselforforanyoneelsewhomayviewyourcode.

HorizontalRule…OpenstheInsertHorizontalRulewindow,whichallowsyoutodesignahorizontalruleandaddittoyourpage.

Color…OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursorispositionedonthepage.

FrameDesigner…OpenstheFrameDesigner,whichallowsyoutocreateaframes‐basedlayout.

TableDesigner…OpenstheCoffeeCupTableDesigner,whichallowsyoutocreateatable.Atablecanbeusedtodisplayinformationorasyourpagelayout.

QuickTable…OpenstheQuickTablewindow,whichallowsyoutodesignabasictable.

Dragyourmouseoverthesquarestopickhowmanycolumnsandrowsareinyourtable.Clickwhenyouhavespecifiedthedesireddimensions,andthecodewillbeinsertedonyourpage.

FormItemsOpensasubmenuthatallowsyoutoinsertvariousformitems.

ForcomprehensiveinformationaboutcreatingandmodifyingHTMLforms,readtheW3SchoolstutorialHTMLFormsandInput(http://www.w3schools.com/html/html_forms.asp).

GetCoffeeCupFormBuilderOpenstheCoffeeCupWebFormBuilderpage(http://www.coffeecup.com/form‐builder/)inyourdefaultWebbrowser.ThisprogramsimplifiestheprocessofaddingWebformstoyourWebsite.

InsertForm…OpenstheInsertFormwindow,whichallowsyoutosettheformmethod,MIMEpostmethod,andURLwheretheformresultswillbedirected.Thisinformationisimportantifyouwantyourformtoworkproperly!

Drop‐DownList…OpenstheInsertDrop‐DownListwindow,whichallowsyoutoconfigurethecontentsofadrop‐downlist.

EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevaluesyouwouldliketoappearintheformresultsintheValuefield.TheNameappearsintheformresults,andtheAlignmentoptionscontrolwheretheelementappearsonthepage.Adrop‐downlistisabarwithanarrowthatexpandstoshowalistwhenclicked.Itisbestsuitedforlistsinwhichyourusercanonlyselectoneoption.Thedrop‐downlistconfiguredaboverenderslikethis:

ListBox…OpenstheInsertListBoxwindow,whichallowsyoutoconfigurethecontentsofalistbox.

EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevaluesyouwouldliketoappearintheformresultsintheValuefield.TheNameappearsintheformresults,andtheAlignmentoptionscontrolwheretheelementappearsonthepage.Alistisatextboxcontainingalistofitemsthatyourusercanselect,andisbestsuitedforlistsinwhichyourusercanselectseveraloptions.Thelistboxconfiguredaboverenderslikethis:

RadioButtonGroup…OpenstheInsertRadioButtonGroupwindow,whichallowsyoutoconfigurearadiobuttongroup.Radiobuttonsmustbegroupedinordertoworkcorrectly.

EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevaluesyouwouldliketoappearintheformresultsintheValuefield.TheNameappearsintheformresults,andtheAlignmentoptionscontrolwheretheelementappearsonthepage.

CheckboxInsertsthecodeforacheckbox,whichisasquareboxthatcanbeselectedanddeselected,andisbestsuitedforlistsinwhichyourusercanselectoneormoreanswers.Acheckboxlookslikethis:

RadioButtonInsertsthecodeforaradiobutton,whichisaroundbuttonthatyourusercanselectbutonlydeselectbyselectinganotheroption.Theyarebestsuitedforlistsinwhichyourusercanonlyselectoneanswer.Aradiobuttonlookslikethis:

ImageInsertsthecodeforaformimage.Thisisparticularlyhelpfulifyouwanttoaddcustombuttonstoyourform.

TextBoxInsertsthecodeforatextbox,whichisaone‐linefieldwhereyourusercantypeinformation,andisbestsuitedforshortanswers,suchasname,e‐mailaddress,phonenumber,etc.Atextboxlookslikethis:

PasswordTextBoxInsertsthecodeforapasswordtextbox,whichisaone‐linefieldwhereyourusercantypeapassword.Allthecharactersaredisguised.

HiddenTextInsertsthecodeforhiddentext,whichappearsinyourcopyoftheformresultsandcanbeusedforsortingandfilteringinformation.

FileBrowseTextBoxInsertsthecodeforafilebrowsetextbox,whichisusedtobrowseyourcomputerforafile.Thisfilewillbeuploadedwhentheformissubmitted.

TextAreaInsertsthecodeforatextarea,whichisamultiple‐linefieldwhereyourusercantypeinformation,andisbestsuitedforlongeranswers,suchasmessages,feedback,etc.Atextarealookslikethis:

ButtonInsertsthecodeforageneric“SubmitQuery”button,whichsubmitstheinformationtotheURLspecifiedintheInsertFormwindow.

SubmitButtonInsertsthecodeforasubmitbutton.

ResetButtonInsertsthecodeforaresetbutton.

StyleSheetItemsDisplaysalistofoptionsthatletyouinsertvariousstylesheetitems.

Forcomprehensiveinformationaboutcreatingandmodifyingstylesheets,readtheW3SchoolstutorialCSSIntroduction(http://www.w3schools.com/css/css_intro.asp).

StyleSheetWizard…OpenstheStyleSheetwindow,whichallowsyoutochoosebetweencreatinganewstylesheetclassandapplyingastylesheettoapreexistingHTMLtag.

Afteryoumakeyourchoice,youwillbetakentotheStyleSheetWizard,whichallowsyoutosetthevariousoptionsforyourstylesheet.

StyleSheetAttributeWizard…OpenstheStyleSheetWizard,whichallowsyoutosetthevariousoptionsforyourstylesheet.

CSSMenuDesigner…OpenstheCoffeeCupCSSMenuDesigner,whichallowsyoutodesignaCSSmenu.

HeadInsertsthe<head></head>HTMLtags.Putheaderinformationsuchasmetatagsandtitlesbetweenthesetags.Yourheadtagsshouldcomeafteryour<html>tagandbeforeyour<body></body>tags.

TitleInsertsthe<title></title>HTMLtagsbetweenthe<head></head>tags.Putyourpagetitlebetweenthesetags.Apagetitleisusedonthebrowser'stitlebarandwillappearinsearchresults.Agoodpagetitlesuccinctlydescribesthecontentonthepage.

MetaDescriptionInsertsthemetadescriptionHTMLcodebetweenthe<head></head>tags.Putyourmetadescriptionwithinthistag.ThisisashortdescriptionofyourWebsite.Itshouldbenolongerthan50words.

MetaKeywordsThisinsertsthemetakeywordHTMLcodebetweenthe<head></head>tags.Putyourmetakeywordswithinthistag.ThesearewordsthatdescribeyourWebpage.Theymusteachbeseparatedbyacommaandaspace.

Formoreinformationaboutmetainformation,readNewFromQuickStart.

InsertLinkWindowTheInsertLinkwindowallowsyoutoinsertalinkandanyassociatedattributes.

Foradetailedtutorialaboutinsertinglinks,readAddingaLinktoYourPage.

LinkTextThetextyouruserwillclick.Bydefault,linktextisblueandunderlined.

URLThelocationwhereyouruserwillbetakenwhentheyclickthelinktext.IfyouarelinkingtoanexternalWebsite,youmustincludethefulllink,includinghttp://andwww,ifapplicable.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelinkbyclickingthefileicontobrowseyourcomputerforthedesiredpage.YoushouldmakesurethefileislocatedinyourWorkingfolderoryourWebsiteProjecttomakesureitisreferencedcorrectly.

FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.

TargetTheframeyouwantthelinktoopenin.Thisfieldisonlynecessaryifyouareusingframesorifyouwanttoopenthelinkinanewwindow.Toopenthelinkinanewwindow,selectNewBrowserWindow(target="_blank").

TitleAdescriptionofthelinkthatwillappearasatooltipwhentheuserholdstheirmouseoverthelink.

ShowStatusbarMessageonMouseoverCheckingthisboxdisplaysadescriptionofthelinkintheStatusbaratthebottomoftheWebbrowserscreen.ThisoptionisonlyenabledinInternetExplorer.

WebBrowserWindowMessageEntertheStatusbarmessagehere.

InsertE‐mailLinkWindowTheInsertE‐mailLinkwindowallowsyoutoinsertane‐maillinkandanyassociatedattributes.Whenyouruserclicksonthislink,theirdefaulte‐mailclient(Thunderbird,OutlookExpress,etc.)willopenwiththise‐mailaddressintheTo:field.

Foradetailedtutorialaboutusinge‐maillinks,readAddinganE‐mailLinktoYourPage.

LinkTextThetextyouruserwillclick.Bydefault,linktextisblueandunderlined.

E‐mailAddresstoLinkToThee‐mailaddressthatwillappearintheuser’sdefaulte‐mailclientwhentheyclickthelinktext.SubjectThesubjectofthee‐mail.

ShowStatusbarMessageonMouseoverCheckingthisboxdisplaysadescriptionofthelinkintheStatusbaratthebottomoftheWebbrowserscreen.ThisoptionisonlyenabledinInternetExplorer.

WebBrowserWindowMessageEntertheStatusbarmessagehere.

InsertImageWindowTheInsertImagewindowallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.Usetheareaontheleft‐handsideofthewindowtobrowseyourcomputerforthedesiredimage.TheimageshouldbelocatedinyourWorkingfolderorWebsiteProjectinordertodisplaycorrectly.

YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.Foradetailedtutorialaboutaddingimages,readAddinganImagetoYourPage.

IfyouwantmoreWebgraphicstochoosefrom,clicktheGetMoreGreatWebGraphicsHerebuttontocheckouttheCoffeeCupGraphicsShopathttps://www.coffeecup.com/store/graphics/.

Afteryouhaveselectedanimageandconfiguredanyadditionalattributes,clickOK.ThisopenstheCopytoProjectwindow,whichpromptsyoutosaveyourimagetoyourWebsiteProjectorWorkingfolder.

YoucansavetheimagetoanyofthepreexistingfoldersinyourWebsiteProjectorclickCreateFoldertocreateanewfolderforyourimage.Whenyouhaveselectedthefolderwhereyourimagewillbestored,clickOK.

GeneralTabThisiswhereyouinsertthepathtotheimageanditsattributes.

ImageEntertheimagepathhere.Ifyouselectanimageusingthetoolsontheleft‐handsideofthewindow,thepathwillappearinthisfield.

AltAdescriptionoftheimagedisplayedwhentheimagecannotbeshown,suchasinatext‐onlyorspeechbrowser,orifauserhasaslowconnection.YoushouldalwaysusedetailedalttextforallprominentorcontextuallyimportantimagesonyourWebpage

TitleAdescriptionoftheimagethatappearsasatooltipwhentheuserholdstheirmouseovertheimage.

AlignSelectthedesiredalignmentfromthisdrop‐downlist.

BorderEnterthewidthoftheborderinpixelsinthisfield.Ifyoudonotwantaborder,enter0.

WidthandHeightThesefieldsdisplaythewidthandheightofyourimageandcanalsobeusedtoresizeit.Providingthisinformationallowsthepagestructuretoloadcorrectlybeforetheimageloads.Ifyoudonotwanttoincludethesevalues,unchecktheIncludesizecheckbox.

Theimageresizefeatureshouldonlybeusedtomakeminoradjustments,sincesignificantadjustmentsmaydistorttheimage.Ifyouneedtomakeadvancedchangestoyourimage,useanimage‐editingprogram.

URLtoLinkToIfyouwouldliketousetheimageasalink,usethisfieldtoenterthelocationwhereyouruserwillbetakenwhentheyclicktheimage.IfyouarelinkingtoanexternalWebsite,youmustincludethefulllink,includinghttp://andwww,ifapplicable.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelinkbyclickingthefileicontobrowseyourcomputerforthedesiredpage.YoushouldmakesurethefileislocatedinyourWorkingfolderoryourWebsiteProjecttomakesureitisreferencedcorrectly.

ThumbnailTabThisiswhereyoucancreateanoptionalimagethumbnail,whichisasmallerversionoftheimage.Thumbnailsareoftenusedaslinkstotheoriginalversionoftheimage.

CreateandInsertImageasThumbnailSelectthischeckboxifyouwouldliketousetheimageasathumbnail.

LinktoOriginalImageSelectthischeckboxifyouwouldlikethethumbnailtolinktotheoriginalimage.

ThumbnailFilenamePrefixThisdifferentiatesthethumbnailversionoftheimagefromtheoriginal.Bydefault,itissettotn_,butyoucanchangeittowhateveryouwant.

ThumbnailWidthandHeightEnterthewidthandheightofthethumbnailhere.Theaspectratioismaintainedsotheimagewillnotbedistorted.

ThumbnailFormatandQualityChoosethedesiredimagefileformat(.gifor.jpg)andquality.High‐qualityimagesdisplaybetter,butarealsolarger,whichmakesforlongerdownloadtimes.

InsertListWindowTheInsertListwindowallowsyoutoinsertoneoffourdifferentkindsoflists.YoucanalsoimportalistclickingtheImportListbutton.

Foradetailedexplanationofhowtouselists,readHowtoCreateaList.

ListTypeChoosefromthefourdifferentliststyles:bulleted,numbered,definition,orlistitems.

BulletStyleChoosefromthedifferentbulletstyles.Thisonlyappliesifyouareusingabulletedornumberedlist.

ListHeaderTextEnteryourlistheaderhere.Alistheaderappearsabovethelistasalabel.

ListItemFieldEnterthelistitemsinthisfield.Puteachlistitemonitsownline.

InsertHorizontalRuleWindowTheInsertHorizontalRulewindowallowsyoutoconfigurethesettingsofahorizontalrulethatisthenaddedtoyourpage.YoucanpreviewthechangesyoumakeinthePreviewarea.

Formoreinformationabouthorizontalrules,readWhatIsaHorizontalRule?

AlignmentChoosethealignmentofyourhorizontalrule:left,right,orcentered.

WidthChoosethelinewidthandwhetheritismeasuredasapercentageofthecontainingelement(suchasthepageora<div>tag)orinpixels.

ThicknessChoosethelinethickness,with1beingthethinnestand10beingthethickest.

ShadingChoosewhethertoapplya3Deffecttotheline.

ColorCheckingtheIncludecolorcheckboxallowsyoutochangethecoloroftheline.ThiseffectonlyappearsinInternetExplorer.Toselectacolor,clickthecolorswatch.Thisopensadrop‐downlistof40basiccolors.

FrameDesignerTheFrameDesignerallowsyoutocreateaframes‐basedlayout.Selectyourpreferencesusingtheprovidedtools,andthedesignerwillautomaticallyinsertthecodeforyou.YoucanpreviewhowyourdesignwilllookusingthePreviewpaneontheleft‐handsideofthewindow.

Foradetailedtutorialabouthowtousethistool,readHowtoUsetheFrameDesigner.

FrameStyleChoosefromanumberofpredefinedframestyles.Thesestylesincludethenumberofframes,wheretheyarelocated,andwhatfunctiontheyperform.Forexample,HeaderTwoFramecontainstwoframes,oneintendedforuseasaheaderandanotherlargeronewherethebodycontentgoes.

FrameWidthandHeightUsethesedrop‐downmenustosetthewidthandheightoftheselectedframe.Toselectaframe,clickit,anditwillturnblue.

Thewidthandheightaremeasuredinthepercentageofthepagetheframeoccupies.Iftheselectedframetakesuptheentireheightorwidthofthepagebydefault,youwillnotbeabletoadjustthatattribute.

FrameScrollingChoosewhetheryouruserscanscrollwithintheframe.Autoaddsascrollbarwhennecessary,Yesaddsascrollbaratalltimes,andNowillnotaddascrollbaratanytime.

AllowFrameResizeSelectthischeckboxifyouwantyouruserstobeabletoresizetheframes.

FrameBorderSelectthischeckboxtoenableaframeborder,andthenenterthewidthoftheborderinthenumberfield.0isthethinnestborderand50isthelargest.

FrameNameEnteranamefortheframehere.Youshoulduseanamethatrelatestotheframe’sfunction.

SourceURLEntertheURLofthepageyouwanttoappearintheframehere.IfyouarelinkingtoanexternalWebsite,youmustincludethefulllink,includinghttp://andwww,ifapplicable.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelink.YoushouldmakesurethefileislocatedinyourWorkingfolderoryourWebsiteProjecttomakesureitisreferencedcorrectly.

CoffeeCupTableDesignerTheCoffeeCupTableDesignerallowsyoutodesignatable.Whenyouarereadytoapplyyourtablecodetoyourpage,clickOK.

TheTableDesignerissplitintotwotabs,theTableDesigntabandtheIEPreviewtab.TheTableDesigntaballowsyoutoaddcontentandworkwithyourtable,andtheIEPreviewtaballowsyoutoseehowyourworklooksaWebbrowser.

Totestyourtableinotherbrowsers,addthecodetoyourpageandthenusethePreviewtool.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google

Chrome,andSafari.

• Insert New Table window • Table Designer menu bar • Table Designer toolbar • Table Designer right-click menu

InsertNewTableWindowTheInsertNewTablewindowopenswhenyouopentheTableDesignerandcontainstoolsthatallowyoutosetupatable.

NumberofRowsandColumnsEnterthenumberofrowsandcolumnsintothesefields.

BackgroundandBorderColorTochangethebackgroundand/orbordercolorofthetable,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.

TableWidthEnterthewidthofthetableinthisfield.Youcanchoosefromapercentageofthepageorafixedsizeinpixels.

CellSpacingEnterthespaceinpixelsthatwillappearbetweeneachcell.

CellPaddingEnterthespaceinpixelsthatwillappearbetweentheborderofthecellanditscontents.

BorderWidthEnterthewidthinpixelsoftheborderbetweenthecells.

TableDesignerMenuBarTheTableDesignermenubarislocatedatthetopofthewindow.Itgivesyouaccesstoallthetoolsformodifyingyourtable,aswellasoptionslikeopening,saving,andpreviewingyourwork.

• File menu • Edit menu • Insert menu • Format menu • Table menu

FileMenuTheFilemenuallowsyoutoworkwithbasicaspectsoftheTableDesigner,includingcreating,opening,saving,andpreviewingtables,aswellasclosingthedesigner.

NewCreatesanewblanktableforyoutoeditfromscratch.

Open…Allowsyoutoopenandworkwithapreviouslycreatedtable.

Save…Savesthetableyouarecurrentlyworkingon.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.

SaveAs…Allowsyoutosavethecurrenttableunderadifferentname.Thiswillnotoverwritethetableyouarecurrentlyworkingon;instead,itwillcreateanewtablethatyoucangiveadifferentname.

PreviewSwitchestheviewtotheIEPreviewtab,whichallowsyoutoseehowyourworklooksaWebbrowser.

Totestyourtableinotherbrowsers,addthecodetoyourpageandthenusethePreviewtool.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google

Chrome,andSafari.

ExitClosestheTableDesigner.

EditMenuTheEditmenuallowsyoutoundoorredoyouractionsandtocut,copy,paste,select,anddeleteobjects.

PasteSpecial…Allowsyoutochoosetheformatofthepastedinformation.

Delete(Ctrl+Del)Removestheselectedobject(s).

InsertMenuTheInsertmenuallowsyoutoinsertanimageintoyourtable.

InsertImage…Opensawindowthatallowsyoutobrowseyourcomputerfortheimageyouwouldliketoaddtoyourtable.

FormatMenuTheFormatmenuallowsyoutoformatthestyleandfontofyourtextandtosetthebackgroundcolorofyourtable.

BoldBoldstheselectedtextor,ifnotextisselected,appliesboldformattingtoanytexttypedafterthelocationofthecursor.

ItalicItalicizestheselectedtextor,ifnotextisselected,appliesitalicformattingtoanytexttypedafterthelocationofthecursor.

UnderlineUnderlinestheselectedtextor,ifnotextisselected,appliesunderlineformattingtoanytexttypedafterthelocationofthecursor.

Font…OpenstheFontwindow,whichallowsyoutoselectthefont,style,effects,size,andcolorofyourtabletext.

Fill(Background)Color…OpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.

Youcanchoosetoapplythecolortothetext,theparagraph,ortheentiretable.Toselectmorecolors,clicktheMoreColorsbutton.ThisopenstheColorwindow,whichallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

Tochangetheparagraphpadding,clickthePaddingbutton.ThisopensthePaddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingistheamountofspacethatappearsbetweentheparagraphandtheborderofthecell.

TableMenuTheTablemenuallowsyoutoinserttables,adjustthetableproperties,andworkwithrows,columns,andcellcontents.

InsertTable…OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.

TableProperties…OpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.

InsertColumnLeftInsertsacolumntotheleftofwherethecursorispositioned.

InsertColumnRightInsertsacolumntotherightofwherethecursorispositioned.

InsertRowAboveInsertsarowabovewherethecursorispositioned.

InsertRowBelowInsertsarowbelowwherethecursorispositioned.

DeleteRow(s)Deletestherowwherethecursorispositionedortheselectedrow(s).

DeleteColumn(s)Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).

SelectAllowsyoutoselecttheentiretable,arow,acolumn,oracell.

AlignCellContentsAllowsyoutochoosethealignmentofthecontentintheselectedcell:top,middle,bottom,ordefaultcellverticalalignment.

SplitCells…OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.

Youcanchoosetosplitthecellintoanumberofrowsandcolumnsthatyouspecify,orifyouareworkingwithacellthatyoupreviouslymerged,youcansplitthecellsbackintotheiroriginalconfiguration.Ifyouwanttomergethecontentsofthecellbeforeyousplitthem,whichconsolidatesallyourcontentintoonecellandthensplitsitintomultiplecells,checktheMergebeforesplittingcheckbox.

MergeCellsMergesthecontentsofthecellsintoonecell.

TableDesignerToolbarTheTableDesignertoolbarcontainsbuttonsthatyoucanclicktoperformcertaincommonlyusedactionsquickly.Right‐clickingthetoolbaropensthismenu:

UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.

NewCreatesanewblanktableforyoutoeditfromscratch.

OpenAllowsyoutoopenandworkwithapreviouslycreatedtable.

SaveSavesthetableyouarecurrentlyworkingon.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.

InsertImageOpensawindowthatallowsyoutobrowseyourcomputerfortheimageyouwouldliketoaddtoyourtable.

FontOpenstheFontwindow,whichallowsyoutoselectthefont,style,effects,size,andcolorofyourtabletext.

Fill(Background)ColorOpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.

InsertTableOpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.

TablePropertiesOpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.

ModifyTableCellsThisexpandstoshowsomeoptionsyoucanuseformodifyingthecellsinyourtable.

TableDesignerRight‐ClickMenuTheright‐clickmenuallowsyoutoaccesscommonlyusedfeaturesintheTableDesigner.

PasteSpecial…Allowsyoutochoosetheformatofthepastedinformation.

Font…OpenstheFontwindow,whichallowsyoutoselectthefont,style,effects,size,andcolorofyourtabletext.

Fill(Background)Color…OpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.

TableExpandstodisplayoptionsforcreatingoreditingatable.

InsertTable…OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.

TableProperties…OpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.

SelectAllowsyoutoselecttheentiretable,arow,acolumn,oracell.

AlignCellContentsAllowsyoutochoosethealignmentofthecontentintheselectedcell:top,middle,bottom,ordefaultcellverticalalignment.

InsertFormWindowTheInsertFormwindowallowsyoutosettheformmethod,MIMEpostmethod,andURLwheretheformresultswillbedirected.Thisinformationisimportantifyouwantyourformtoworkproperly!

FormMethodChoosehowyouwanttotransfertheformdata.Postsendsittotheserverandgetpullsitfromtheserver.

MIMEPostMethod(Enctype)Selectthetypeofapplicationthatwillprocesstheformdata.

FormContentsGototheFollowingURLTheURLofthescriptthatactuallyprocessestheform.Formoreinformationaboutformscriptsandtodownloadfreeformprocessingscripts,visithttp://www.hotscripts.com.

StyleSheetWizardTheStyleSheetWizardallowsyoutosetthevariouspropertiesofyourstylesheet.

• Font tab • Color and Background tab • Alignment tab • Margins tab • Padding tab • Border tab

FontTabTheFonttaballowsyoutosetpreferencesforthefontoftheclassorHTMLtagyouaremodifyingforyourstylesheet.

FontFamilySelectthedesiredfontfamilyfromthesetwodrop‐downmenus.Firstisthepreferredfont,andcantechnicallybeanyfontyouwant.However,ifyoudonotchooseaWeb‐safefont,itmaynotdisplaycorrectlyonallcomputers.WerecommendmakingSecondaWeb‐safefont.Youcanalsoselectagenericfont,whichalwaysdisplayscorrectly,fromtheGenericdrop‐downlist.Web‐safefontsinclude:Arial Arial Black Courier New

Times New Roman Comic Sans MS Georgia

Impact Trebuchet MS Verdana

FontSizeSelectthesizeofyourfontusingoneoffourmeasurements:absolute,relativetothecontainingelement,pixels,orapercentageofthecontainingelement.

WeightThelightnessordarknessofyourfont,with100beingthelightestand900beingthedarkest.

StyleSelectthefontstyle:normal,italic,oroblique.

DecorationSelectthefontdecoration:none,underline,overline,strikethrough,orblink.

TransformChoosewhethertoapplycapitalization,uppercaseorlowercaseletters,ornone.

VariantSelectthevariant:normalorsmallcaps.

ColorandBackgroundTabTheColorandBackgroundtaballowsyoutosetthetextandbackgroundcolorfortheclassorHTMLtagyouaremodifyingforyourstylesheet.

TextandBackgroundColorTochangethetextorbackgroundcolor,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.

BackgroundImageClickthefoldericontobrowseyourcomputerforthedesiredbackgroundimage.

RepeatIfyouaddabackgroundimage,youcanrepeatithorizontallyand/orvertically.

AttachmentSelectscrollifyouwanttheimagetoalwaysappearinthesameplaceevenwhenthepageisscrolledupordown.Selectfixedifyouwanttheimagetoappearinafixedplaceonthepage.

AlignmentUsethesefieldstospecifytheexactalignmentoftheimage.Youcansetittothedefaultlocation,oruseapercentage,anabsolutepixellocation,orkeywords.

AlignmentTabTheAlignmenttaballowsyoutosetthealignmentfortheclassorHTMLtagyouaremodifyingforyourstylesheet.

IndentationThespacebetweenwhereyourelementstartsandtheleftedgeofthepage.Youcansetittothedefaultoradjusttheindentationinpixelsorapercentage.

LineHeightTheverticalspacebetweentwolinesoftext.Youcansetittothedefaultoradjusttheheightinpixelsorapercentage.

AlignmentUsetheseoptionstosetwherethecontentintheclassortagappearsonthepage.Settheverticaland/orhorizontalalignmentbykeywordorpercentage.Ifyouusetheseoptionstosetthealignment,youcannotusethefloatproperty.

WordandLetterSpacingTheamountofspaceinpixelsbetweenwordsandletters.

FloatChoosewhetherthecontentintheclassortagfloatstotherightorleft,ordoesnotfloatatall.Ifyouusethisoptiontosetthealignment,youcannotusethealignmentproperties.

ClearChoosethesideofthefloatedelementwhereotherfloatingelementswillnotappear.Forinstance,ifyouselectleft,nofloatedelementswillappeartotheleftofthespecifiedfloatedelement.

MarginsTabTheMarginstaballowsyoutosetthemargins,width,andheightinpixelsorapercentageofthecontainingelementfortheclassorHTMLtagyouaremodifyingforyourstylesheet.

“Margin”referstothewhitespacesurroundinganelement.Whenthemarginisincreasedforaselectedelement,morespacewillappearbetweentheelementandtheobjectssurroundingit.

PaddingTabThePaddingtabletsyousetthepaddinginpixelsorapercentageofthecontainingelementfortheleft,right,top,andbottomoftheclassorHTMLtagyouaremodifyingforyourstylesheet.

“Padding”referstothewhitespacewithinanelement.Whenpaddingisincreasedforaselectedelement,morespacewillappearbetweenitsouteredgesandtheobjectscontainedwithinit.

BorderTabTheBordertaballowsyoutosetthebordersfortheclassorHTMLtagyouaremodifyingforyourstylesheet.

SizeThesizeoftheborderinpixelsorapercentageofthecontainingelement.

StyleChoosefromeightborderstyles.

ColorTochangethetextorbackgroundcolor,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.

CSSMenuDesignerTheCSSMenuDesignerallowsyoutocreateaCSSnavigationmenu.

ForadetailedtutorialabouthowtoaddamenuusingtheCSSMenuDesigner,readHowtoUsetheCSSMenuDesigner.Ifyou’rewonderingwhathappenedtotheDHTMLMenuBuilder,readWhathappenedtotheDHTMLMenuBuilder?

Itisextremelyimportanttoremoveanyoldmenucodefromyourdocumentbeforeinsertinganewmenu.Ifyoudon’t,yourmenuwillnotwork.Toremoveyouroldcode,clickSaveMenutosaveanychangesto

yourmenuthatyouhavemade,andthenclickCancel.IfyouhavealreadyinsertedaCSSmenu,removethefollowingcodefrombetweenyour<head></head>tags:

css/menu‐menu.cssisthedefaultnameandlocationofthemenustylesheet.Ifyouhavechangedthenameorlocationofthisstylesheet,thisfilepathwillreflectyourchanges.Next,removethiscodefrombetweenthe<body></body>tags:

Thisexamplecontainsjusttwomenuitems,butyourmenumaycontainmore.Besuretoremovethe<ul class...></ul> tagsandallthecodebetweenthem.menu‐menuisthedefaultnameforthemenuclass.Ifyouhavechangedthenameofthemenu,thenameyouspecifiedwillappearhereinstead.page1.htmlandpage2.htmlarethelinksyouspecifiedforthemenuitems.MenuItem1andMenuItem2arethenamesyouspecifiedforthemenuitems.IfyouneedtoreplaceaDHTMLmenu,removethecodebetween<script type='text/javascript'>and</script>.Thiscodeshouldbelocatedjustbelowthe<body>tag.Onceyouhaveremovedyouroldmenucode,reopentheCSSMenuDesigner,openyoursavedmenu,andtheninsertitintoyourpagebyclickingOK.

OpenMenuClickthisbuttontoopenapreviouslycreatedmenu.

SaveMenuClickthisbuttontosaveyourmenu.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.

PreviewClickthisbuttontopreviewyourmenuinyourdefaultbrowser.

OKClickthisbuttontoinsertyourmenucodeintothecurrentdocument.Thisopenstwowindowscontaininginformationaboutyourmenucode:

Thiswindowremindsyouthatyoumustremoveallyouroldmenucodebeforeinsertingnewcode.

Thisstepisveryimportant!Ifyoudonotremoveyouroldmenucode,yourmenuwillnotworkcorrectly.

Toexitthiswindow,clickOK.ThisopenstheSaveMenuwindow,whichallowsyoutosaveyourmenutoworkwithitlater.

Weonlyrecommendsavingyourmenuifyouhavealreadyremovedyouroldmenucode.ClickingSaveopensawindowthatallowsyoutochoosethelocationwhereyouwouldliketosaveyourmenu.

Onceyouhavesavedyourmenu,thecodewillautomaticallybeinsertedintoyourpage.Ifyouhaven’tremovedyouroldmenucode,clickCancel.ThisbringsyoubacktotheCSSMenuDesigner.Fromhere,youcansaveyourmenuwithoutautomaticallyinsertingthecodeintoyourdocument.Fordetailedinformationaboutthisprocess,refertotheinstructionsabove.

CancelClickthisbuttontoabandonanyunsavedchangestoyourmenuandexittheCSSMenuDesigner.FormoreinformationaboutthedifferentsectionsoftheCSSMenuDesigner,clickoneoftheselinks:

• Menu Designer tab • Menu Colors tab • Options tab

MenuDesignerTabTheMenuDesignertaballowsyoutoaddandconfiguremenuitems.

YourMenuAllowsyoutopreviewthestructureofyourmenu.

AddRootItemAddsarootitemtoyourmenu.Rootitemsmakeupthemainpartofthemenuthatappearsatalltimes.

AddSubitemAddsasubitemtotheselectedrootitem.Asubitemappearswhenyouclickormouseovertherootitem.Youcanadduptothreelevelsofsubitems.

AddSiblingAddsanotheritemonthesamelevelastheselecteditem.

DeleteItemDeletestheselecteditem.

TextEnterthetextyouwouldliketoappearontheselectediteminthisfield.

LinkEnterthelinkyouwouldlikethecurrentlyselecteditemtopointtointhisfield.

MenuColorsTabTheMenuColorstaballowsyoutosetthecolorsforyourmenu.YoucanpreviewanychangesyoumakeintheMenuColorSamplearea.

Tochangethetextorbackgroundcolor,enterahexcodeorclicktheassociatedcolorswatch.Thisopensadrop‐downlistof65basiccolors.

BackgroundColorThebackgroundcolorofthemenu.

MouseoverBackgroundColorThebackgroundcolorofthemenuwhentheuserholdstheirmouseoverit.

FontColorThecolorofthemenutext.

MouseoverFontColorThecolorofthemenutextwhentheuserholdstheirmouseoverit.

BorderColorThecolorofthemenuborder.

UseMainMenuColorsClickthisbuttonifyouwantthesubmenuitemstohavethesamecolorschemeasthemainmenuitems.

OptionsTabTheOptionstaballowsyoutoworkwithmenuoptionsnotpertainingtotheitemsandthecolors.

OrientationChoosebetweenahorizontalandverticallayout.

MarginTopandLeftSetthetopandleftmargininpixelsinthesefields.“Margin”referstotheblankspacesurroundingthemenu.Whenthemarginisincreased,morespacewillappearbetweenthemenuandtheobjectssurroundingit.

BorderWidthEnterthewidthofthemenuborderinpixelsinthisfield.

FontFace,Size,andStyleChoosethefontandsizeofthemenuitemtext,aswellaswhetheritisboldoritalicized.

MenuandSubmenuTextAlignmentChoosehowyouwantthetextinthemenutobealigned:totheleft,right,orcenter.

TopandLeftPaddingSetthetopandleftpaddinginpixelsinthesefields.“Padding”referstotheblankspacewithinthemenu.Whenthepaddingisincreased,morespacewillappearbetweenthemenutextandtheouteredges.

UseFixedWidthforMenuItemsSelectthischeckboxifyouwouldliketouseafixedwidthforthemenuitems.

ItemWidthSetthefixeditemwidthinpixelshere.

FormatMenuTheFormatmenuallowsyoutoformatyourtext.Ifyouhaveselectedtext,thetagswillbeappliedtotheselectedtext.Otherwise,theywillbeinsertedonthepage.

FontWizard…OpenstheFontWizard,whichallowsyoutochoosetheattributesforafonttag.

FontSizesSelectfromfontsizes1(8pt)to7(36pt)oradjustthesizeupordownoneincrement.

FontColor…OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.

HeaderSizesInsertsheadertags(<h1></h1>–<h6></h6>)orappliesthemtoselectedtext.

Bold(Ctrl+B)Insertsboldtags(<b></b>)orappliesthemtoselectedtext.

Italic(Ctrl+I)Insertsitalictags(<i></i>)orappliesthemtoselectedtext.

Underline(Ctrl+U)Insertsunderlinetags(<u></u>)orappliesthemtoselectedtext.

StrikethroughInsertsstrikethroughtags(<strike></strike>)orappliesthemtoselectedtext.

StrongInsertsstrongtags(<strong></strong>)orappliesthemtoselectedtext.

EmphasisInsertsemphasistags(<em></em>)tagsorappliesthemtoselectedtext.

SubscriptInsertssubscripttags(<sub></sub>)tagsorappliesthemtoselectedtext.

SuperscriptInsertssuperscripttags(<sup></sup>)tagsorappliesthemtoselectedtext.

PreformattedInsertspretags(<pre></pre>)tagsorappliesthemtoselectedtext.Pretagspreservetheformattingofthetexttheysurround,includingextraspacesandindenting.

LeftInsertsadivtagwiththealignattributesettoleft(<div align=“left”></div>)orappliesittotheselectedtext.

CenterInsertsadivtagwiththealignattributesettocenter(<div align=”center”></div>)orappliesittotheselectedtext.

RightInsertsadivtagwiththealignattributesettoright(<div align=”right”></div>)orappliesittotheselectedtext.

JustifyInsertsadivtagwiththealignattributesettojustify(<div align=”justify”></div>)orappliesittotheselectedtext.Thisalignsyourtextsoeachlineisthesamelength.

Indent(Shift+Ctrl+.)Indentsyourcodestartingwherethecursorispositioned.ThischangeappearsonlyintheCodeEditorandwillnotberenderedbyabrowser.Itisusedtohelporganizeyourcode.

Unindent(Shift+Ctrl+,)Unindentsyourindentedcodestartingwherethecursorispositioned.ThischangeappearsonlyintheCodeEditorandwillnotberenderedbyabrowser.Itisusedtohelporganizeyourcode.

Paragraph(Ctrl+Enter)Insertsparagraphtags(<p></p>)tagsorappliesthemtoselectedtext.

BreakInsertsabreaktag(<br />).

Non‐BreakingSpaceInsertsanon‐breakingspacecharacterentity( ),whichisrenderedbybrowsersasaspace.Thiscanbeusedtoinsertextraspaces,sinceHTMLonlyallowsforonespacebetweeneachword.

FontWizardTheFontWizardallowsyoutocreateafonttagwithdetailedattributes.YoucanpreviewhowyourtextlooksinthePreviewTextarea.

Foradetailedtutorialabouthowtousetheseoptions,readHowtoChangetheAppearanceofText.

FontsSelectthedesiredfontfamilyfromtheprovidedlistandapplythemtothefonttagbyclickingAddasFont1,2,or3.Font1isthepreferredfont,andcantechnicallybeanyfontyouwant.However,ifyoudonotchooseaWeb‐safefont,itmaynotdisplaycorrectlyonallcomputers.WerecommendmakingFont2and/orFont3aWeb‐safefont.Youcanalsoselectagenericfont,whichalwaysdisplayscorrectly,fromtheGenericdrop‐downlist.Web‐safefontsinclude:Arial Arial Black Courier New

EffectsSelectfrombold,italic,strikethrough,orunderline.

TextPositionSelectwhetheryourtextwillappearnormallyorasasubscriptorsuperscript.

SizeSelectafontsizefrom1(8pt)to7(36pt).

ColorToselectacolorforyourtext,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.

ToolsMenuTheToolsmenucontainstoolsyoucanusetoworkwithyourWebpageandtheprogram.

TestWithDefaultBrowser(Ctrl+F9)OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.ThisisdoneoutsideoftheHTMLEditor.

AdditionalBrowsersExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.

Toconfigureadditionalbrowsers,gotoTools>Preferences>

BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,GoogleChrome,andSafari.

FavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.

ApplicationsExpandstoshowalistofexternalapplicationsyoucanopenfromwithintheHTMLEditor.

Toaddexternalapplications,gotoTools>Preferences>Applicationstab.

OtherSoftwareandServicesExpandstodisplayalistofothersoftwareandservicesofferedbyCoffeeCupSoftware.

FreshIngredientsforYourWebsiteOpenstheHTMLEditorThemeShop(https://www.coffeecup.com/store/themes/html‐editor/)inyourdefaultWebbrowser.

GetMoreGraphics…OpenstheCoffeeCupGraphicsShop(https://www.coffeecup.com/store/graphics/)inyourdefaultWebbrowser.

GetMoreWebsiteSoftware…OpenstheCoffeeCupSoftwarepage(http://www.coffeecup.com/software/)inyourdefaultWebbrowser.

SiteSpider…OpensCoffeeCupWebsiteSpider,whichcontainsvarioustoolsandutilitiesthatprovideinformationyoucanusetooptimizeyourWebsite.

CodeCleaner…OpenstheCodeCleaner,whichallowsyoutosetyourpreferencesforhowyouwouldlikeyourcodetobeformatted,andthenrunsthecodecleaner.

YoucanundoanychangesmadeduringthecodecleaningusingtheUndofunction.

WebsiteColorSchemer…Opensthebuilt‐incopyofWebsiteColorSchemer,whichallowsyoutoselectacolorschemeforyourWebsite.FormoreinformationabouthowtouseWebsiteColorSchemer,consultitsdocumentation.

ImageMap…Opensthebuilt‐incopyofImageMapper,whichallowsyoutocreateanimagemapforyourWebsite.FormoreinformationabouthowtouseImageMapper,consultitsdocumentation.

SearchforUndocumentedCharacters…Checksyourdocumentforanyundocumentedspecialcharacters.

Ifitdiscoversanundocumentedcharacter,itgivesyoutheoptiontoreplaceitwiththeproperHTMLentity.Whenitisfinished,youwillseeamessagethatsays“Finished!”

Toaddcharacterentitiesforanyspecialcharacters,usetheCharacterstabintheResourcebrowserontheleft‐handsideoftheprogram.

CheckSpelling…Checksthespellinginyourdocument.Iftherearenospellingerrors,awindowappearsthatreads,“Thespellingcheckiscomplete.”

Iftherearemisspelledwords,theSpellingwindowopens,allowingyoutoreviewandchangethespellingerrors,andtoadjustspellingoptions.

AutoSpellCheckPutsaredunderlineunderanymisspelledwords.

SpellCheckerOptions…OpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.

Thesaurus…OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselectedword.

ToolbarsandMenusExpandstodisplayoptionsforcustomizingthetoolbarsandmenuswithintheprogram.

Foradetailedtutorialaboutcreatingacustomtoolbar,readHowtoCreateaCustomToolbar.

Customize…OpenstheCustomizewindow,whichallowsyoutocustomizetheprogramtoolbars.

SaveCurrentConfigurationAs…Allowsyoutosavethecurrenttoolbarandmenuconfiguration.Thisisusefulifyouhavecreatedacustomconfigurationyoumaywishtouselater.Whenyousaveaconfiguration,itwillappearbeneathDefaultinthismenu.

DefaultSelectthistoswitchtothedefaulttoolbarandmenuconfiguration.

DocumentDisplayPropertiesOpenstheCustomizationtabofthePreferenceswindow,whichallowsyoutocustomizehighlightingandtoolbaroptions.

Preferences…OpensthePreferenceswindow,whichallowsyoutoadjusttheprogrampreferences,includingworkingwiththeappearanceandfunctionoftheprogram,settingfiletypestheprogramcanopen,addingbrowsersandexternalapplications,settingdefaultfolders,andcustomizinghighlightingandtoolbaroptions.

CoffeeCupWebsiteSpiderCoffeeCupWebsiteSpidercontainsvarioustoolsandutilitiesthatprovideinformationyoucanusetooptimizeyourWebsite.

FormoreinformationonhowtousetheWebsiteSpider,refertoitsdocumentation,availableunderHelp>HelpContents….

CodeCleanerTheCodeCleanerallowsyoutosetyourpreferencesforhowyouwouldlikeyourcodetobeformatted,andthenrunsthecodecleaner.YoucanundoanychangesmadeduringthecodecleaningusingtheUndooption.Mouseovereachfunctionforadetaileddescriptionofwhatitdoes.Thedescriptionappearsintheyellowpaneatthebottomofthewindow.

ForadetailedtutorialaboutusingtheCodeCleaner,readHowtoUsetheCodeCleaner.

LayOut,Fix,andConvertTabTheLayOut,Fix,andConverttaballowsyoutoadjustthelayoutandformatofyourcode.Holdingyourmouseoveranoptionopensadescriptionintheyellowpaneatthebottomofthewindow.

DocumentTabTheDocumenttaballowsyoutoworkwiththeDOCTYPEandcharacterencoding.Holdingyourmouseoveranoptionopensadescriptionintheyellowpaneatthebottomofthewindow.

ASPandXMLTabTheASPandXMLtaballowsyoutosetoptionspertainingtoASP,HTML,andXML.Holdingyourmouseoveranoptionopensadescriptionintheyellowpaneatthebottomofthewindow.

WebsiteColorSchemerTheWebsiteColorSchemerisusedtogenerateanattractivecolorschemeforyourWebsite.

FormoreinformationonhowtousetheWebsiteColorSchemer,refertoitsdocumentation,availableunderHelp>HelpContents(F1).

ImageMapperTheImageMapperisusedtocreateaninteractiveimagemap.

FormoreinformationonhowtousetheImageMapper,refertoitsdocumentation,availableunderHelp>HelpContents.

SpellingWindowTheSpellingwindowallowsyoutoreviewandchangethespellingerrors,andtoadjustspellingoptions.

NotFoundAwordnotfoundinthedictionary.

ReplaceWithTypethereplacementwordinthisfieldorselectawordfromtheSuggestionarea.ClickChangeorChangeAlltoreplacethemisspelledwordwiththewordinthisfield.

SuggestionsSpellingsuggestionsforthemisspelledword.

UndoUndoesthelastchangeyouhaveperformed.

OptionsOpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.

IgnoreIgnoresthemisspelledwordanddisplaysthenextwordnotfoundinthedictionary.

IgnoreAllIgnoresallinstancesofthemisspelledwordanddisplaysthenextwordnotfoundinthedictionary.

ChangeReplacesthemisspelledwordwiththewordintheReplaceWithfield.

ChangeAllReplacesallinstancesofthemisspelledwordwiththewordintheReplaceWithfield.

AddAddsthewordintheNotFoundfieldtothedictionary.

Auto‐CorrectAddsthewordsintheNotFoundandReplaceWithfieldstotheAuto‐Correctdictionary.IftheAutoSpellCheckoptionisenabled,themisspellingwillautomaticallybereplacedwiththereplacementwordwhenyouruntheCheckSpellingfunction.

ToenableAuto‐Correct,gotoTools>AutoSpellCheck.

SpellingOptionsWindowTheSpellingOptionswindowallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.

OptionsSelecttheoptionsyouwouldliketoenablewhencheckingthespellinginyourdocument.

DictionariesListstheavailabledictionaries.Bydefault,11languagedictionariesareincludedintheprogram.Youmayselectasmanyasyouwant.

LocateDictionariesSelectingthisoptionopensawindowthatallowsyoutobrowseyourcomputerforanotherdictionaryfile.

FormoreinformationabouthowtoadddictionaryfilestotheHTMLEditor,readHowdoIimportanotherlanguagedictionaryintotheHTMLEditor?

CustomDictionaryIfyouhaveaddedacustomdictionaryandwouldliketouseitinsteadoforinadditiontothedictionaryordictionariesselectedintheDictionariesarea,selectitfromthisdrop‐downlist.

Dictionaries…OpenstheDictionarieswindow,whichallowsyoutoadd,edit,anddeletecustomdictionaries.

EditOpenstheEdit.aduwindowfortheselecteddictionaryfile,whichallowsyoutoaddwords,auto‐correctpairs,andexcludedwords.

DeleteDeletestheselecteddictionary.

NewOpenstheNewCustomDictionarywindow,whichallowsyoutoenterthenameofanotherdictionaryfileyouwouldliketoaddtoyourcustomdictionaries.

FormoreinformationabouthowtoadddictionaryfilestotheHTMLEditor,readHowdoIimportanotherlanguagedictionaryintotheHTMLEditor?

ResetDefaultsResetstheDictionariesareatoincludeonlythe11defaultdictionaries.

Edit.aduWindowTheEdit.aduwindowallowsyoutoaddwords,auto‐correctpairs,andexcludedwordstotheselecteddictionaryfile.

AddedWordsTabAllowsyoutoaddwordstothedictionaryfileordeletecustomwordsyouhaveadded.

Auto‐CorrectPairsTabAllowsyoutoaddauto‐correctpairstothedictionaryfileordeletecustomauto‐correctpairsyouhaveadded.

IftheAutoSpellCheckoptionisenabled,thewordintheReplacecolumnwillautomaticallybereplacedwithwordintheWithcolumnwhenyouruntheCheckSpellingfunction.

ToenableAuto‐Correct,gotoTools>AutoSpellCheck.

ExcludedWordsTabAllowsyoutoaddwordsthatwillalwaysbeconsideredincorrectwhenrunningspellcheck,ortodeleteanyexcludedwordsyouhaveadded.

CustomizeWindowTheCustomizewindowallowsyoutocustomizetheprogramtoolbars.

Foradetailedtutorialaboutcreatingacustomtoolbar,readHowtoCreateaCustomToolbar.

• Toolbars tab • Commands tab • Options tab

ToolbarsTabTheToolbarstaballowsyoutoaddoreditprogramtoolbars.Thegrayed‐outtoolbarsarenotavailabletobeedited.

ToolbarsDisplaysalistofthetoolbarsavailableintheprogram.SelectingthecheckboxforatoolbardisplaysitintheHTMLEditorworkspace,anddeselectingthecheckboxremovesit.

NewOpenstheAddToolbarwindow,whichallowsyoutonamethenewtoolbar.

Whenyoucreateanewtoolbar,itopensintheHTMLEditorworkspace.

RenameOpenstheRenameToolbarwindow,whichallowsyoutorenametheselectedtoolbar.

DeleteDeletestheselectedtoolbar.

Reset(MainToolbarOnly)Resetsthemaintoolbartoitsdefaultconfiguration.

CommandsTabTheCommandstaballowsyoutoviewandaddcommandstoyourcustomtoolbarortothemaintoolbar.Toaddacommand,dragitfromtheCommandslisttothedesiredtoolbaranddropitthere.

CategoriesBroadcategoriestowhichindividualcommandsbelong.Categoriescannotbeaddedtoatoolbar.

CommandsIndividualcommandsthatcanbeaddedtoatoolbar.Toaddacommand,dragittothedesiredtoolbaranddropitthere.

OptionsTabTheOptionstaballowsyoutocustomizeotheraspectsofyourtoolbars.

MenusShowRecentlyUsedCommandsFirstSelectthischeckboxifyouwantthemostrecentlyusedcommandstoappearatthebeginningofyourcustommenuortoolbar.

ShowFullMenusAfteraShortDelaySelectthischeckboxifyouwantdrop‐downmenusinyourcustommenuortoolbartoappearafterashortdelay.

ResetMyUsageDataResetsyourusagedatasoyourcommandsappearintheorderyouspecifiedinsteadofbeingrankedinorderofuse.

LargeIconsIncreasesthesizeofthemenuicons.

ShowTooltipsonToolbarsSelectthischeckboxtodisplaytooltipswhenyoumouseovertoolbaricons.

ShowShortcutKeysinTooltipsSelectthischeckboxtodisplaykeyboardshortcutsinthetoolbartooltips.

MenuAnimationsSelectthedesiredmenuanimationfromthisdrop‐downlist.

PreferencesWindowThePreferenceswindowallowsyoutoadjustoptionsforworkingwiththeprogramandyourcode.

• General tab • Files tab • Browser Testing tab • Applications tab • Folders tab • Customization tab

GeneralTabTheGeneraltaballowsyoutosetdisplayandfunctionalpreferencesfortheHTMLEditor.

ApplicationStartupSelectwhetheryouwouldlikeaspecificdocumenttoopenautomaticallyintheEditoronstartup.YoucanalsochoosewhethertheMyWebsitesorMyComputertabwillbeopenintheResourcebrowser.Finally,youcanspecifywhetherthetipofthedayandtheWelcomewindowwillappear.

InitialDocumentModeSelectwhetheryouwanttheVisualorCodeeditortoopenautomaticallyonstartup.YoucanalsochoosewhethertoshoworhidetheVisualEditorand/orPreviewtab.

InitialDocumentTypeSelecttheinitialdocumenttypethatwillbeusedonstartupandwhenyoucreateanewpagefromthisdrop‐downlist.

ProperCaseConversionWhenconvertingtopropercase,anylettersafterthecharactersenteredinthisfieldwillbecapitalized.

Toconvertyourdocumentoraselectionoftextandcodetopropercase,gotoEdit>ConverttoProperCase.

MiscellaneousSelectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapply.

WhenStartingaNewWebsiteProjectSelectwhatyouwouldliketheprogramtodowhenyoucreateanewWebsiteProject.

FilesTabTheFilestaballowsyoutospecifythefileextensionsyoucanopenandeditintheHTMLEditor.Formatyourentrieswithanasteriskfollowedbyaperiodandavalidextension(e.g.*.html,*.css,*.php,etc.)

FileExtensionsSpecifythevalidfileextensionsyouwouldliketoopenandeditintheEditorinthesefields.Toresetthembacktotheprogramdefaults,clicktheResetbutton.

UnixFilesSpecifyanyfileextensionsyouwouldliketosaveasUnixfiles.

FileExtensionsThatWillNotBeOpenedinVisualEditorSwitchingtotheVisualEditormaycauseunwantedformattinginsomedocumenttypes.UsethisfieldtospecifyanyfileextensionsyoudonotwanttoopenintheVisualEditor.Thisensuresthatyouwillnotaccidentallyopenthemandlosetheformattingofyourcode.

BrowserTestingTabTheBrowserTestingtaballowsyoutoaddbrowsersyoucanusetopreviewyourwork.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,GoogleChrome,andSafari.

Toaccessanybrowsersyouadd,gotoTools>AdditionalBrowsers.

SelectaBrowserSelecttheslotunderTools>AdditionalBrowserswhereyouwouldlikethebrowsertoappear.AdditionalBrowser1canbeaccessedusingthekeyboardshortcutCtrl+F5.

DisplayNameEnterthedesireddisplaynameforthebrowser.

ApplicationLocationUsetheBrowseicontobrowseyourcomputerforthe.exefileforthebrowseryouwanttoadd.Toremoveabrowser,clicktheRemoveicon.

ApplicationsTabTheApplicationstaballowsyoutoaddexternalapplicationsthatcanbeopenedfromwithintheHTMLEditor.

Toaccessanyapplicationsyouhaveadded,gotoTools>Applications.

DescriptionAcustomdescriptionoftheapplicationthatwillappearunderTools>Applications.Thisisapersonalreminder,soyoucannameitanythingyouwant.

CustomApplication.exeUsetheBrowseicontobrowseyourcomputerforthe.exefilefortheapplicationyouwanttoadd.Toremoveanapplication,clicktheRemoveicon.

FoldersTabTheFolderstaballowsyoutoselectdefaultfoldersusedwithintheHTMLEditor.

DefaultWebsiteProjectsFolderClicktheBrowseicontoselectthedefaultfolderwhereyourWebsiteProjectsaresaved.

DefaultWorkingFolderClicktheBrowseicontoselectthedefaultWorkingfolder.IfyouareusingaWebsiteProject,bydefault,theWorkingfolderisthesameastheWebsiteProjectsfolder.Otherwise,theWorkingfolderiswhereyousaveyourWebsitefiles.

DefaultImageFolderClicktheBrowseicontoselectthedefaultImagefolder.WhicheverfolderyouselectwillbeopenbydefaultintheInsertImagewindow.

DefaultBackgroundImageFolderClicktheBrowseicontoselectthedefaultBackgroundImagefolder.WhicheverfolderyouselectwillbeopenbydefaultinthewindowthatappearswhenyouaddabackgroundimageintheDocumentPropertieswindow.

DefaultSoundsFolderClicktheBrowseicontoselectthedefaultSoundsfolder.WhicheverfolderyouselectwillbeopenbydefaultintheInsertSoundwindow.

OptionalPromptsTheseoptionspromptyouwhenyouaddanimageorinsertapageanditisnotlocatedinyourWorkingfolder.IfyouareusingaWebsiteProject,bydefault,theWorkingfolderisthesameastheWebsiteProjectsfolder.Otherwise,theWorkingfolderiswhereyousaveyourWebsitefiles.

CustomizationTabTheCustomizationtaballowsyoutocustomizehighlightingandtoolbaroptions.

DocumentsSelectthedocumenttypewhosehighlightingschemeyouwanttomodifyfromthisdrop‐downlist.

ModifyHighlightingOpenstheHighlightingOptionswindow,whichallowsyoutomodifythehighlightingschemefortheselecteddocumenttype.ThisschemeappliesonlytothecodeintheEditorasapersonalreminder,andwillnotberenderedbyWebbrowsers.

ModifyOptionsOpenstheEditorOptionswindow,whichallowsyoutosetdisplaypreferencesfortheCodeEditor.

ToolbarCustomizationListsthecustomtoolbarsyouhaveconfiguredandallowsyoutodeleteorrenamethem.

Tocreateacustomtoolbar,gotoTools>ToolbarsandMenus>Customize.

HighlightingOptionsWindowTheHighlightingOptionswindowallowsyoutomodifythehighlightingschemeforthedocumenttypeselectedintheCustomizationtabofthePreferenceswindow.ThisschemeappliesonlytothecodeintheEditorasapersonalreminder,andwillnotberenderedbyWebbrowsers.

Formoreinformationaboutworkingwithhighlightingoptions,readAdjustingCodeHighlightingOptions.

CurrentLanguageStyleDisplaysthedocumenttypeyouareediting.

ElementListsthedifferentelementsofthecurrentlanguage.Selectanelementtoadjustitshighlightingoptions.SelectingDefaultTextgivesyoutheoptiontoapplythedefaultsettingstootherelements.

ForegroundandBackgroundColorTochangethecolorofeitheroftheseelements,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof20basiccolors.

Tobrowseevenmorecolors,clickOther.ThisopenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.

TextAttributesChoosefrombold,italic,orunderline.

UseDefaultsForSelecttheForegroundorBackgroundcheckboxesifyouwanttoapplytheDefaultTextsettingstotheselectedelement.

FontSelectthedesiredfontfacefromthisdrop‐downlist.

SizeSelectthedesiredsizefromthisdrop‐downlist.

EditorOptionsWindowTheEditorOptionswindowallowsyoutosetdisplaypreferencesfortheCodeEditor.

PrintOptionsSelectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapplywhenprintingadocument.

GeneralOptionsSelectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapplyintheCodeEditor.

VisibleRightMarginSelectwhethertodisplayavisiblerightmarginandthenspecifyitswidthinpixels.

VisibleGutterSelectwhethertodisplayavisiblegutterandthenspecifyitswidthinpixels.Agutterisabartotheleftofthecodewherelinenumbers,bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.

BlockIndentStepSizeNumberofspacesautomaticallyusedtoindentthenextlineofcodewhennestingelements.

WordWrapColumnThecolumnatwhichwordwrappingoccurs.Enter0ifyouwantthewordwraptobesettothewidthofthewindow.

ShowWordWrapColumnSelectthischeckboxifyouwanttodisplaythewordwrapcolumn.

TabColumnThetabstopswithintheeditingenvironment.

TabStopThenumberofspacesthecursormoveswhenyouclicktheTabkey.

WindowMenuTheWindowmenuallowsyoutoswitchbetweentheopenfiles.Selectingoneofthefilesopensitinwhichevereditor(CodeorVisual)isopen.

YoucanalsoswitchbetweenopenfilesusingthetabsintheStatusbaratthebottomoftheprogram.

HelpMenuTheHelpmenuallowsyoutoaccessthedifferenthelpoptionsavailableintheprogram.ThisincludesopeningthePDFHelpfile,accessinginformationaboutCoffeeCupSoftware,andgettingsupportfromourfabuloustechnicalsupportcrew.

ViewHelpFile…(F1)OpenstheHelpfile.Thisisyourgo‐tosourceforeverythingrelatedtotheHTMLEditor.

HTMLEditorHelpOnline…OpenstheHTMLEditorHelppage(http://www.coffeecup.com/html‐editor/help/)inyourdefaultWebbrowser.Fromhere,youcanwatchvideotutorialsorreadknowledgebasearticlesthatanswercommonlyaskedquestionsabouttheprogram.

GetSupportOpenstheCoffeeCupSoftwareSupportCenter(http://www.coffeecup.com/help/)inyourdefaultWebbrowser.Fromhere,youcangetintouchwiththeCoffeeCuptechnicalsupportteam,whowillbehappytohelpyouwithanyissuesyoumayhave.

TipoftheDay…OpenstheTipoftheDaywindow,whichdisplayshelpfultipsforworkingwiththeprogram.

Tonavigatethetips,usethePreviousandNextbuttons.Ifyoudonotwanttoseethesetipsonstartup,uncheckthecheckboxnexttoShowtipofthedayonstartup.

Tore‐enabletheTipoftheDaywindow,gotoHelp>TipoftheDayorusetheoptionsunderTools>Preferences>Generaltab.

AboutThisSoftware…OpensawindowthatprovidesbasicinformationabouttheprogramandCoffeeCupSoftware.

ToolbarTheToolbarislocatedacrossthetopoftheprogramandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedprogramfeatures.Right‐clickingthetoolbaropensthismenu:

NewExpandstodisplayalistofoptionsforcreatingnewWebpages.

FordetailedtutorialscoveringthefourdifferentwaystocreateanewWebpage,readCreatingaNewWebpage.

NewFromQuickStart…OpenstheQuickStartwindow,whichallowsyoutodefinesettingsforyournewpage,includingthepagetitle,colorscheme,metainformation,andcharacterset.

NewBlankPage(Ctrl+N)Createsanewpageforyoutoeditfromscratch.Bydefault,newpagesincludesomebasicHTMLtohelpgetyoustarted.ThisincludestheDOCTYPE,html,head,title,meta,andbodytags,aswellasanHTMLcommentstatingthatthepagewascreatedwithCoffeeCupHTMLEditor.

NewFromLayout…OpensawindowthatallowsyoutochoosefromseveralWebpagelayouts.

AlayoutincludestheHTMLforabasicpagestructure.Youprovidethecontent.Ifyouprefertoworkwithapagedesign,selectNewFromTheme.Formoreinformationaboutthedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetweenalayoutandatheme?

NewFromTheme…OpensawindowthatallowsyoutochoosefromseveralWebpagethemes.

withapagestructure,selectNewFromLayout.Formoreinformationaboutthedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetweenalayoutandatheme?

SaveExpandstodisplayalistofoptionsforsavingyourwork.

Save(Ctrl+S)Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequently

topreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.

SaveAs…(Ctrl+Shift+S)Savesthecurrentfileunderadifferentname.Thiswillnotoverwritethefileyouarecurrentlyworkingon;instead,itwillcreateanewfilethatyoucangiveadifferentname.

SaveAllSavesalltheopenfiles.

OpenExpandstodisplayalistofoptionsforopeningpreviouslycreatedwork.

Open…(Ctrl+O)Allowsyoutoopenandworkwithapreviouslycreatedfile.

OpenFromWeb…OpenstheOpenFromWebwindow,whichallowsyoutoimportanHTMLpageontheInternetintotheHTMLEditor.ThisoptionworksbestwithHTMLpagesthatdonotcontainPHPorSSI.Thesescriptsarestoredontheserver,andsometimesaddcodetoaWebpagethatcannotbeimportedintotheHTMLEditor.

RecentFilesDisplaysalistoffilesyouhaveworkedwithrecently,whichallowsyoutoaccessthemmorequickly.

PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthen

selectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.

AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.

FindandReplaceExpandstodisplaythefindandreplaceoptions.

Find…(Ctrl+F)OpenstheExtendedFindwindow,whichallowsyoutosearchthecurrentdocument,

allopendocuments,orallthedocumentsinagivenfolderforasearchterm.

Replace…(Ctrl+H)OpenstheExtendedFindandReplacewindow,whichallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm,andthenreplaceitwithtextofyourchoosing.

ExtendedFindResultsDisplaystheSearchResultstabatthebottomoftheprogram.

SpellingandThesaurusExpandstodisplaythespellingandthesaurusoptions.

CheckSpelling…Checksthespellinginyourdocument.Iftherearenospellingerrors,youwillseeawindowthat

says,“Thespellingcheckiscomplete.”

DocumentExpandstodisplaydocumentoptions.

DocumentWeight…OpenstheDocumentWeightwindow,whichcontainsinformationaboutthesizeofthecurrentlyopendocumentandhowlongitwilltaketo

downloadtoacomputeronseveraldifferentconnections.

DocumentDependencies…OpenstheDocumentDependencieswindow,whichliststhebackgroundimages,items,andexternallinksinyourdocument.Youcanusethisinformationtokeeptrackofyourdependenciesandpreventissueslikebrokenlinksandimages.

DocumentProperties…OpenstheDocumentPropertieswindow,whichletsyouchangethepagetitle,characterset,backgroundimageorcolor,linkcolors,andcolorscheme.

ValidateHTML…Openshttp://validator.w3.org/inyourdefaultWebbrowser.YoucanvalidatetheHTMLofpagesyouhavealreadypublishedtoyourserver,oryoucanuploadthefilestothissiteandcheckthembeforeuploading.Formoreinformationaboutusingthistool,refertothesite’sdocumentation(http://validator.w3.org/about.html).

PreferencesOpensthePreferenceswindow,whichallowsyoutoworkwiththeprogrampreferences,includingworkingwiththeappearanceandfunctionoftheprogram,settingfiletypestheprogramcanopen,addingbrowsersandexternalapplications,settingdefaultfolders,andcustomizinghighlightingandtoolbaroptions.

ApplicationsExpandstoshowalistofotherapplicationsyoucanopenfromwithintheHTMLEditor.Toaddexternalapplications,gotoTools>Preferences>Applicationstab.

SearchAllowsyoutoenterasearchtermandsearchforitintheopendocument.Usetheupanddownarrowstoviewthepreviousandnextiterationsofthesearchterm.

CodeEditorTheCodeEditorallowsyoutoviewandeditthecodethatmakesupyourpage.ItcanbeusedtoeditHTML,serverfilessuchasPHPandCSS,andtext.Foracompletelistoffiletypestheprogramcanopenandtoenteradditionalfiletypes,gotoTools>Preferences>Filestab.

Toaddoreditcode,justtypeitin!Therearealsoanumberofusefultoolstohelpyoucodeyourpagemorequicklyandefficiently.TheycanbeaccessedintheMenuBarorusingeitherofthefollowingoptions:

• Code Editor toolbar • Code and Visual Editor right-click menu • Special features in the Code Editor

CodeEditorToolbarTheCodeEditortoolbarislocatedacrossthetopoftheCodeEditorandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:

Image(Ctrl+M)OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.

LinksExpandstodisplaylinkoptions.

Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallows

youtoinsertalinkandanyassociatedattributes.

FontsExpandstodisplayfontoptions.

FontEffectsAllowsyoutoapplyoneoftheprovidedeffectstoyourfont.

HeaderSizesSelectaheadertag(<h1>–<h6>),anditwillbeinsertedintoyourdocumentorappliedtoanyselectedtext.

Paragraph(Ctrl+Enter)Insertsparagraphtags(<p></p>)tagsorappliesthemtoselectedtext.

BreakInsertsabreaktag(<br />).

Non‐BreakingSpaceInsertsanon‐breakingspacecharacterentity( ),whichisrenderedbybrowsersasaspace.Thiscanbeusedtoinsertextraspaces,sinceHTMLonlyallowsforonespacebetweeneachword.

Bold(Ctrl+B)Insertsboldtags(<b></b>)orappliesthemtoselectedtext.

Italic(Ctrl+I)Insertsitalictags(<i></i>)orappliesthemtoselectedtext.

Underline(Ctrl+U)Insertsunderlinetags(<u></u>)orappliesthemtoselectedtext.

LeftInsertsadivtagwiththealignattributesettoleft(<div align=”left”></div>)orappliesittotheselectedtext.

CenterInsertsadivtagwiththealignattributesettocenter(<div align=”center”></div>)orappliesittotheselectedtext.

RightInsertsadivtagwiththealignattributesettoright(<div align=”right”></div>)orappliesittotheselectedtext.

JustifyInsertsadivtagwiththealignattributesettojustify(<div align=”justify”></div>)orappliesittotheselectedtext.Thisalignsyourtextsoeachlineisthesamelength.

HorizontalRuleOpenstheInsertHorizontalRulewindow,whichallowsyoutodesignahorizontalruleandaddittoyourpage.

TableItemsExpandstodisplaytableoptions.

TableDesigner…OpenstheTableDesigner,whichallowsyoutocreateatable.Atablecanbeusedtodisplayinformationorasyourpagelayout.

QuickTable…OpenstheQuickTablewindow,whichallowsyoutodesignatable.

FormItemsExpandstodisplayformoptions.