CoffeeCup-HTML-Editor-Manual
-
Upload
jesse-hastings -
Category
Documents
-
view
313 -
download
2
Transcript of CoffeeCup-HTML-Editor-Manual
![Page 1: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/1.jpg)
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/)!
1
![Page 2: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/2.jpg)
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
2
![Page 3: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/3.jpg)
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
3
![Page 4: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/4.jpg)
FrequentlyAskedQuestionsGotaquestionaboutthesoftware?Findyouranswerhere.
• Frequently asked questions o Features, tools, and functionality o Customization o Error messages and troubleshooting o Miscellaneous
• Keyboard shortcuts • Glossary
4
![Page 5: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/5.jpg)
CoffeeCupInformationLearnmoreaboutCoffeeCupSoftwareandreviewallthelegalgobbledygook.
• About CoffeeCup Software • Contact us • Thank you • End User License Agreement • Notice of copyright • Software privacy policy
5
![Page 6: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/6.jpg)
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.
6
![Page 7: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/7.jpg)
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.
7
![Page 8: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/8.jpg)
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/.
8
![Page 9: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/9.jpg)
What’sNew
2009
• 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.
9
![Page 10: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/10.jpg)
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.
10
![Page 11: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/11.jpg)
OpeningtheProgramWhenyoufirstopentheHTMLEditor,twowindowsappear:theTipoftheDaywindowandtheWelcomewindow.
TipoftheDayWindowDisplayshelpfultipsforworkingwiththeprogram.
Tonavigatethetips,usethePreviousandNextbuttons.Ifyoudonotwanttoseethesetipsonstartup,uncheckthecheckboxnexttoShowtipofthedayonstartup.
Tore‐enabletheTipoftheDaywindow,gotoHelp>TipoftheDayorusetheoptionsunderTools>Preferences>Generaltab.
WelcomeWindowContainslinkstocommonlyusedprogramfunctions.
11
![Page 12: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/12.jpg)
NewBlankPageOpenstheQuickStartwindow,whichallowsyoutodefinesettingsforyournewpage,includingthepagetitle,colorscheme,metainformation,andcharacterset.
NewWebsiteProjectOpenstheWebsiteProjectSettingswindow,whichletsyoucreateablankWebsiteProjectortocreateaWebsiteProjectfromexistingfiles.Youcanalsoenteradditionalinformation,suchasyourserversettings,andselectyourfileuploadoptions.
StartWithaThemeOpensawindowthatallowsyoutochoosefromseveralWebpagethemes.
12
![Page 13: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/13.jpg)
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.
13
![Page 14: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/14.jpg)
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
14
![Page 15: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/15.jpg)
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.
15
![Page 16: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/16.jpg)
AlayoutincludestheHTMLforabasicpagestructure.Youprovidethecontent.Ifyouprefertoworkwithapagedesign,gotoFile>NewFromTheme.Formoreinformationaboutthedifferencebetweenlayoutsand
themes,readWhatisthedifferencebetweenalayoutandatheme?
NewFromTheme…OpensawindowthatallowsyoutochoosefromseveralWebpagethemes.
16
![Page 17: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/17.jpg)
Athemeincludesthreepages(index.html,about‐us.html,andcontact‐us.html)thatincludetheHTMLandimagesforabasicdesign.Youcanreplacetheimagesandtextwithyourowncontent.Ifyouprefertowork
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.
17
![Page 18: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/18.jpg)
AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCodeSnippetstab.Foradetailedtutorialaboutworkingwithsnippets,readHowtoUseSnippets.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
18
![Page 19: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/19.jpg)
AddorEditServers…OpenstheServerConfigurationwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
Print(Ctrl+P)Printsthecurrentfileinwhateverviewyouhaveselected(CodeEditor,VisualEditor,orPreview).
PrintPreview…Opensawindowthatallowsyoutopreviewthecurrentfileforprintinginwhateverviewyouhaveselected(CodeEditor,VisualEditor,orPreview).
19
![Page 20: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/20.jpg)
PageSetup…OpensthePrintSetupwindow,whichallowsyoutoadjusttheprintingsettingsforthecurrentfile.
ExitClosestheprogram.
20
![Page 21: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/21.jpg)
QuickStartWindowTheQuickStartwindowallowsyoutodefinesettingsforyournewpage,includingthepagetitle,colorscheme,DOCTYPE,characterset,andmetainformation.
ForadetailedtutorialaboutusingtheQuickStartwindow,readCreatingaNewWebpage.
YoucanpreviewthesettingsyouchooseinthePagePreviewpaneinthemiddleofthewindow.
PageTitleThetextdisplayedonthebrowser'stitlebarthatalsoappearsinsearchresults.Agoodpagetitlesuccinctlydescribesthecontentonthepage.
21
![Page 22: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/22.jpg)
BackgroundImageToselectabackgroundimageforyourpage,enterthefilepathinthisfieldorclicktheBrowseicontobrowseyourcomputerfortheimageyouwishtouse.Toremoveabackgroundimage,clicktheredXicon.
ColorsTherearefivecoloroptionsavailable:pagebackground,text,andunvisited,visited,andactivelinks.Tochangethecolorofanyoftheseelements,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
22
![Page 23: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/23.jpg)
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.
23
![Page 24: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/24.jpg)
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/).
24
![Page 25: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/25.jpg)
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.
25
![Page 26: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/26.jpg)
Ifyouareunsureofanyofthisinformation,contactyourhostingprovider.Ifyouarenotsurewhetheryoushouldusethisinformation,chancesareyoudonothaveto.
26
![Page 27: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/27.jpg)
ServerConfigurationWindowTheServerConfigurationwindowallowsyoutoconfigureaneworexistingserverprofile.
ClickingtheDeletebuttondeletestheselectedserverprofile.ClickingtheAddorEditbuttonopenstheServerConfiguration–AddandEditwindows,respectively.TheseallowyoutosetupanFTPprofileyoucanusetouploadyourworktoyourserver.
Foradetailedtutorialaboutuploadingyourwork,readtheUploadingYourWebsiteProjectportionofWorkingWithWebsiteProjects.
27
![Page 28: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/28.jpg)
ServerConfiguration–Add/EditWindowTheServerConfiguration–AddandEditwindows,allowyoutosetupanFTPprofileyoucanusetouploadyourworktoyourserver.
Putthefollowinginformationintheprovidedfields.
Ifyouareunsureofanyofthisinformation,contactyourhostingprovider.
NicknameApersonalreminderyoucanusetotellyourserversapart.Youcannameyourserversanythingyouwant.
UsernameTheFTPusernameassignedtoyoubyyourWebhostingcompany.Besuretoentertheinformationexactlyhowitwasgiventoyoubyyourprovider.Usernamesare
28
![Page 29: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/29.jpg)
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.
29
![Page 30: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/30.jpg)
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.
30
![Page 31: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/31.jpg)
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.
31
![Page 32: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/32.jpg)
ExtendedFindWindowTheExtendedFindwindowallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm.
FindEnterthetextorcodeyouwouldliketosearchforinthisfield.
MatchCaseSelectthisoptionifyouonlywanttoseeresultswiththesamecapitalandlowercaselettersasenteredintheFindfield.Forexample,ifyouselectthisoptionandsearchforthephrase“WelcometomyWebsite,”theprogramwillnotrecognizethephrase“welcometomywebsite”asamatch.
FindInThisareaallowsyoutochoosewhichdocumentstosearch.Youcanlookinthecurrentdocument,inallopendocuments,orinallthedocumentsinagivenfolder.Ifyouwanttouseafolder,clicktheBrowseicontobrowseyourcomputerforthedesiredfolder.Youcanalsoselectwhichfiletypesyouwouldliketoreturn,andchoosewhethertosearchinthesubfoldersofthegivenfolder.
32
![Page 33: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/33.jpg)
ExtendedFindandReplaceWindowTheExtendedFindandReplacewindowallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm,andthenreplaceitwithtextofyourchoosing.
Foradetailedtutorialaboutusingthisfunction,readHowtoUseExtendedFindandReplace.
TheSearchResultstabdisplaysacompletelistofthefileswherethesearchtermappears.Toenableit,gotoView>ExtendedFindResults.
FileThepathtothefilewherethetermwasfound.
PositionThenumberofcharactersinthedocumentthatprecedetheterm.
33
![Page 34: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/34.jpg)
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.
34
![Page 35: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/35.jpg)
EditXHTMLTagsWindowTheEditXHTMLTagswindowallowsyoutoviewandedittheattributesandattributevaluesoftheavailableXHTMLtags.ThechangesyoumakeherewillappearintheTagstabwhenHTMLTagsisselected,andinthecodecompletiondrop‐downlistwhenyouareworkingintheCodeEditor.
FormoreinformationaboutworkingwithXHTML,checkouttheW3SchoolsXHTMLTutorial(http://www.w3schools.com/Xhtml/).
TagStartandTagEndThebeginningandendofthetag.
TagsThisisalistoftheavailableXHTMLtags.YoucanaddcustomXHTMLtagsbyclickingthegreenplussigniconatthebottomofthelist.YoucandeletetagsbyclickingtheredXicon,andyoucanrenamethembyclickingtheEditTagNameicon.
35
![Page 36: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/36.jpg)
SelectedTagAttributesThisisalistoftheattributesthatcanbeusedwiththeselectedtag.YoucanaddcustomXHTMLattributesbyclickingthegreenplussigniconatthebottomofthelist.YoucandeleteattributesbyclickingtheredXicon,andyoucanrenamethembyclickingtheEditAttributeNameicon.
CustomAttributeValuesThisisalistofthevaluesthatcanbeusedwiththeselectedattribute.YoucanselectthevaluetypefromtheAttributeTypedrop‐downlist.Youcanaddcustomvaluesbyclickingthegreenplussignicontotherightofthelist.YoucandeletevaluesbyclickingtheredXicon,andyoucanrenamethembyclickingtheEditAttributeNameicon.
36
![Page 37: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/37.jpg)
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.
37
![Page 38: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/38.jpg)
Split‐ScreenPreview(F12)Enablessplit‐screenpreview,whichallowsyoutopreviewyourworkinabrowserareabelowtheCodeEditor.
Toviewyourworkinotherbrowsers,usethePreviewtool.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.Themostpopularbrowsersare
Firefox,InternetExplorer,Opera,GoogleChrome,andSafari.
ToggleGutterEnablesthegutter,whichisabartotheleftofthecodewherelinenumbers,bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.
38
![Page 39: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/39.jpg)
ToggleWordWrapSelectthisoptionifyouwouldlikeyourtexttoautomaticallywraptofittheCodeEditorworkspace.
ToggleLineNumbersTurnsonlinenumbersinthegutter.
ExtendedFindResultsDisplaystheSearchResultstabatthebottomoftheprogram.
39
![Page 40: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/40.jpg)
SearchResultsandDocumentDependenciesTabsThisareacontainstwotabs,SearchResultsandDocumentDependencies.TheSearchResultstabdisplaysthefileswherethesearchtermspecifiedintheExtendedFindorExtendedFindandReplacewindowswasfound.TheDocumentDependenciestabdisplaysthelinksandexternalfilesreferencedintheopenWebsiteProjectthathavenotbeencopiedormovedtooneoftheWebsiteProjectfolders.
Toexitthisarea,clicktheredXinitsupperright‐handcorner.
• Search Results tab • Document Dependencies tab
40
![Page 41: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/41.jpg)
SearchResultsTabTheSearchResultstabdisplaysthefileswherethesearchtermspecifiedintheExtendedFindorExtendedFindandReplacewindowswasfound.
FileThepathtothefilewherethetermwasfound.
PositionThenumberofcharactersinthedocumentthatprecedetheterm.
41
![Page 42: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/42.jpg)
DocumentDependenciesTabTheDocumentDependenciestabdisplaysthelinksandexternalfilesreferencedintheopenWebsiteProjectthathavenotbeencopiedormovedtooneoftheWebsiteProjectfolders.
MissingLocalFileThepathtothefilethathasnotbeenaddedtotheWebsiteProject.
WebsiteProjectFileThepathtotheWebsiteProjectfilethatcontainsthemissinglocalfile.
PositionThenumberofcharactersintheWebsiteProjectfilethatprecedetheterm.
42
![Page 43: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/43.jpg)
DocumentDependenciesRight‐ClickMenuRight‐clickingthedependenciesopensamenuthatallowsyoutoworkwiththeselecteddependencyandWebsiteProject.
EditReferenceBringsyoutothereferenceintheWebsiteProjectfilesoyoucanworkwiththeHTML.
IgnoreWarning(Remove)RemovesthewarningaboutthisdependencyfromtheDocumentDependencieslist.
FindandCopyFiletoProjectOpensawindowthatallowsyoutobrowseyourcomputertofindandcopythemissingfiletoyourWebsiteProject.
43
![Page 44: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/44.jpg)
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
44
![Page 45: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/45.jpg)
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.
45
![Page 46: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/46.jpg)
WebsiteProjectSettingsWindowTheWebsiteProjectSettingswindowallowsyoutoaddoreditthesettingsforaneworexistingWebsiteProject.
WebsiteProjectNameThenameofyourWebsiteProject.Itisapersonalreminder,soyoucannameitanythingyouwant.
WebsiteProjectLocationThelocationwhereyourWebsiteProjectisstoredonyourcomputer.UsetheBrowseicontobrowseyourcomputerforthedesiredlocation.
ServerTheserverwhereyouwilluploadyourWebsiteProjectfiles.YoucanselectoneoftheserversyouhavealreadydefinedordefineoneusingthefieldsintheServerConfigurationwindow.
46
![Page 47: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/47.jpg)
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.
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.
ExamplesofvalidWebserveraddressesftp.mysite.com24.24.100.100mysite.comExamplesofinvalidWebserveraddressesftp://ftp.mysite.comftp.mysite.com/mysitehttp://www.mysite.com
CheckDependenciesBeforeUploadingFilesChecksthedependenciesbeforeuploadingyourfilestoyourservertoensuretheyarereferencedcorrectly.WebsiteProjectdependenciesarelinksandexternalfiles,suchasstylesheets,images,etc.
47
![Page 48: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/48.jpg)
IfDependenciesAreMissingFromLocalSystem,CancelFileUploadCancelsthefileuploadifanyofthedocumentdependenciesarenotlocatedintherightplaceinyourWebsiteProject.
WhenUploadingFilesYoucanchoosetoalwaysuploaddependentfileslikeimagesandstylesheets,neveruploadthem,orhavetheprogramconfirmwithyoubeforeuploadingthem.
48
![Page 49: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/49.jpg)
DocumentMenuTheDocumentmenuallowsyoutoworkwithdocumentpropertiesandbookmarks,andtovalidateyourHTML.
DocumentWeight…OpenstheDocumentWeightwindow,whichcontainsinformationaboutthesizeofthecurrentlyopendocumentandhowlongitwilltaketodownloadtoacomputeronseveraldifferentconnections.
DocumentDependencies…OpenstheDocumentDependencieswindow,whichliststhebackgroundimages,items,andexternallinksinyourdocument.Youcanusethisinformationtokeeptrackofyourdependenciesandpreventissueslikebrokenlinksandimages.
49
![Page 50: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/50.jpg)
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.
50
![Page 51: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/51.jpg)
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).
51
![Page 52: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/52.jpg)
DocumentWeightWindowTheDocumentWeightwindowcontainsinformationaboutthesizeofthecurrentlyopendocumentandhowlongitwilltaketodownloadtoacomputeronseveraldifferentconnections.
Weight(FileSize)Thisareadisplaystheweight(filesize)ofthecurrentdocumentandofanydependencies(backgroundimages,externallinks,etc.).Italsoliststhetotalweightofthedocument.
EstimatedDownloadTimeThisarealiststheestimatedtimeitwilltakeforyourpagetoloadonacomputerbasedonitsconnectionspeed.
52
![Page 53: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/53.jpg)
DocumentPropertiesWindowTheDocumentPropertieswindowletsyouchangethepagetitle,characterset,backgroundimageorcolor,linkcolor,andcolorscheme.
PageTitleThetextdisplayedonthebrowser'stitlebarthatalsoappearsinsearchresults.Agoodpagetitlesuccinctlydescribesthecontentonthepage.
BackgroundImageToselectabackgroundimageforyourpage,enterthefilepathinthisfieldorclicktheBrowseicontobrowseyourcomputerfortheimageyouwishtouse.Toremoveabackgroundimage,clicktheredXicon.
ColorsTherearefivecoloroptionsavailable:pagebackground,text,andunvisited,visited,andactivelinks.Tochangethecolorofanyoftheseelements,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.
53
![Page 54: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/54.jpg)
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
ColorSchemeDrop‐DownListIfyouwouldliketouseacolorscheme,selectonefromthisdrop‐downlist.
SaveClickthisbuttonifyouhavemadechangestoaschemethatyouwouldliketosave.
54
![Page 55: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/55.jpg)
SaveAs…Clickthisbuttonifyouhavecreatedacolorschemeyouwouldliketouseagain.Thisopensawindowthatallowsyoutoenteranameforyournewscheme.
AfteryouclickOK,theschemewillbeavailableunderthedrop‐downlist.
DeleteClickthisbuttontodeletetheselectedscheme.
Don’tUnderlineLinksCheckthisboxifyouwouldliketoremovetheautomaticunderlinefromyourlinks.
CharsetSelectyourpreferredcharactersetfromthisdrop‐downlist.
55
![Page 56: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/56.jpg)
InsertMenuTheInsertmenuallowsyoutoinsertvariouselementsintoyourpage.
Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallowsyoutoinsertalinkandanyassociatedattributes.
56
![Page 57: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/57.jpg)
Target…(Ctrl+T)OpenstheInsertTargetwindow,whichallowsyoutoinsertatarget.Targetsandlinksareusedtocreatelinkstodifferentpartsofthesamepage.
Foradetailedtutorialaboutusinglinksandtargets,readLinkingtoDifferentPartsoftheSamePage.
E‐mailLink…(Ctrl+E)OpenstheInsertE‐mailLinkwindow,whichallowsyoutoinsertane‐maillinkandanyassociatedattributes.
QuickLinktoOpenDocumentExpandstodisplayalistofdocumentsthatareopenintheHTMLEditor.Mousingoveradocumentnameexpandsthemenutodisplayalistoftheanchorswithinthedocument.
Selectingadocumentandalocationwithinthedocumentinsertsarelativelinktothedocumentandtheselectedanchorintothecurrentlyopenfile.
QuickLinktoRelativeFileExpandstodisplayalistofthefilesandfolderslocatedinthesamefolderasthecurrentlyopendocument,aswellasanoptiontomoveuponefolder.
57
![Page 58: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/58.jpg)
Selectingafilefromthislistinsertsarelativelinktothatfileinthecurrentlyopendocument.
Carefulwhereyoulink!Ifthefileyoulinktoisn’tlocatedinyourWorkingfolderoryourWebsiteProject,itmaynotbereferencedcorrectly—meaningthelinkwon’twork.Needmoreinformationabout
workingwithWebsiteProjects?Checkoutthistutorial:WorkingWithWebsiteProjects.
Image…(Ctrl+M)OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandanyassociatedattributes,andtocreateathumbnailversionoftheimage.
YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
Sound…OpenstheInsertSoundwindow,whichyoucanusetobrowseyourcomputerforasoundtoplayonyourWebpage.
58
![Page 59: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/59.jpg)
YoucanalsoaddasoundbydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
List…OpenstheInsertListwindow,whichallowsyoutoinsertorimportoneoffourdifferentkindsoflists:bulleted,numbered,definition,orunformatted.
Comment…(Shift+Ctrl+C)OpenstheInsertCommentwindow,whichallowsyoutoinsertacomment.CommentsarenotrenderedbyWebbrowsersandcanbeusedtoleavenotesforyourselforforanyoneelsewhomayviewyourcode.
59
![Page 60: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/60.jpg)
HorizontalRule…OpenstheInsertHorizontalRulewindow,whichallowsyoutodesignahorizontalruleandaddittoyourpage.
Color…OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursorispositionedonthepage.
60
![Page 61: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/61.jpg)
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).
61
![Page 62: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/62.jpg)
GetCoffeeCupFormBuilderOpenstheCoffeeCupWebFormBuilderpage(http://www.coffeecup.com/form‐builder/)inyourdefaultWebbrowser.ThisprogramsimplifiestheprocessofaddingWebformstoyourWebsite.
InsertForm…OpenstheInsertFormwindow,whichallowsyoutosettheformmethod,MIMEpostmethod,andURLwheretheformresultswillbedirected.Thisinformationisimportantifyouwantyourformtoworkproperly!
Drop‐DownList…OpenstheInsertDrop‐DownListwindow,whichallowsyoutoconfigurethecontentsofadrop‐downlist.
62
![Page 63: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/63.jpg)
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevaluesyouwouldliketoappearintheformresultsintheValuefield.TheNameappearsintheformresults,andtheAlignmentoptionscontrolwheretheelementappearsonthepage.Adrop‐downlistisabarwithanarrowthatexpandstoshowalistwhenclicked.Itisbestsuitedforlistsinwhichyourusercanonlyselectoneoption.Thedrop‐downlistconfiguredaboverenderslikethis:
ListBox…OpenstheInsertListBoxwindow,whichallowsyoutoconfigurethecontentsofalistbox.
63
![Page 64: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/64.jpg)
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevaluesyouwouldliketoappearintheformresultsintheValuefield.TheNameappearsintheformresults,andtheAlignmentoptionscontrolwheretheelementappearsonthepage.Alistisatextboxcontainingalistofitemsthatyourusercanselect,andisbestsuitedforlistsinwhichyourusercanselectseveraloptions.Thelistboxconfiguredaboverenderslikethis:
RadioButtonGroup…OpenstheInsertRadioButtonGroupwindow,whichallowsyoutoconfigurearadiobuttongroup.Radiobuttonsmustbegroupedinordertoworkcorrectly.
64
![Page 65: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/65.jpg)
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevaluesyouwouldliketoappearintheformresultsintheValuefield.TheNameappearsintheformresults,andtheAlignmentoptionscontrolwheretheelementappearsonthepage.
CheckboxInsertsthecodeforacheckbox,whichisasquareboxthatcanbeselectedanddeselected,andisbestsuitedforlistsinwhichyourusercanselectoneormoreanswers.Acheckboxlookslikethis:
RadioButtonInsertsthecodeforaradiobutton,whichisaroundbuttonthatyourusercanselectbutonlydeselectbyselectinganotheroption.Theyarebestsuitedforlistsinwhichyourusercanonlyselectoneanswer.Aradiobuttonlookslikethis:
ImageInsertsthecodeforaformimage.Thisisparticularlyhelpfulifyouwanttoaddcustombuttonstoyourform.
TextBoxInsertsthecodeforatextbox,whichisaone‐linefieldwhereyourusercantypeinformation,andisbestsuitedforshortanswers,suchasname,e‐mailaddress,phonenumber,etc.Atextboxlookslikethis:
65
![Page 66: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/66.jpg)
PasswordTextBoxInsertsthecodeforapasswordtextbox,whichisaone‐linefieldwhereyourusercantypeapassword.Allthecharactersaredisguised.
HiddenTextInsertsthecodeforhiddentext,whichappearsinyourcopyoftheformresultsandcanbeusedforsortingandfilteringinformation.
FileBrowseTextBoxInsertsthecodeforafilebrowsetextbox,whichisusedtobrowseyourcomputerforafile.Thisfilewillbeuploadedwhentheformissubmitted.
TextAreaInsertsthecodeforatextarea,whichisamultiple‐linefieldwhereyourusercantypeinformation,andisbestsuitedforlongeranswers,suchasmessages,feedback,etc.Atextarealookslikethis:
ButtonInsertsthecodeforageneric“SubmitQuery”button,whichsubmitstheinformationtotheURLspecifiedintheInsertFormwindow.
SubmitButtonInsertsthecodeforasubmitbutton.
ResetButtonInsertsthecodeforaresetbutton.
StyleSheetItemsDisplaysalistofoptionsthatletyouinsertvariousstylesheetitems.
66
![Page 67: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/67.jpg)
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.
67
![Page 68: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/68.jpg)
MetaDescriptionInsertsthemetadescriptionHTMLcodebetweenthe<head></head>tags.Putyourmetadescriptionwithinthistag.ThisisashortdescriptionofyourWebsite.Itshouldbenolongerthan50words.
MetaKeywordsThisinsertsthemetakeywordHTMLcodebetweenthe<head></head>tags.Putyourmetakeywordswithinthistag.ThesearewordsthatdescribeyourWebpage.Theymusteachbeseparatedbyacommaandaspace.
Formoreinformationaboutmetainformation,readNewFromQuickStart.
68
![Page 69: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/69.jpg)
InsertLinkWindowTheInsertLinkwindowallowsyoutoinsertalinkandanyassociatedattributes.
Foradetailedtutorialaboutinsertinglinks,readAddingaLinktoYourPage.
LinkTextThetextyouruserwillclick.Bydefault,linktextisblueandunderlined.
URLThelocationwhereyouruserwillbetakenwhentheyclickthelinktext.IfyouarelinkingtoanexternalWebsite,youmustincludethefulllink,includinghttp://andwww,ifapplicable.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelinkbyclickingthefileicontobrowseyourcomputerforthedesiredpage.YoushouldmakesurethefileislocatedinyourWorkingfolderoryourWebsiteProjecttomakesureitisreferencedcorrectly.
69
![Page 70: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/70.jpg)
FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.
TargetTheframeyouwantthelinktoopenin.Thisfieldisonlynecessaryifyouareusingframesorifyouwanttoopenthelinkinanewwindow.Toopenthelinkinanewwindow,selectNewBrowserWindow(target="_blank").
TitleAdescriptionofthelinkthatwillappearasatooltipwhentheuserholdstheirmouseoverthelink.
ShowStatusbarMessageonMouseoverCheckingthisboxdisplaysadescriptionofthelinkintheStatusbaratthebottomoftheWebbrowserscreen.ThisoptionisonlyenabledinInternetExplorer.
WebBrowserWindowMessageEntertheStatusbarmessagehere.
70
![Page 71: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/71.jpg)
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.
71
![Page 72: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/72.jpg)
ShowStatusbarMessageonMouseoverCheckingthisboxdisplaysadescriptionofthelinkintheStatusbaratthebottomoftheWebbrowserscreen.ThisoptionisonlyenabledinInternetExplorer.
WebBrowserWindowMessageEntertheStatusbarmessagehere.
72
![Page 73: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/73.jpg)
InsertImageWindowTheInsertImagewindowallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.Usetheareaontheleft‐handsideofthewindowtobrowseyourcomputerforthedesiredimage.TheimageshouldbelocatedinyourWorkingfolderorWebsiteProjectinordertodisplaycorrectly.
YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.Foradetailedtutorialaboutaddingimages,readAddinganImagetoYourPage.
IfyouwantmoreWebgraphicstochoosefrom,clicktheGetMoreGreatWebGraphicsHerebuttontocheckouttheCoffeeCupGraphicsShopathttps://www.coffeecup.com/store/graphics/.
Afteryouhaveselectedanimageandconfiguredanyadditionalattributes,clickOK.ThisopenstheCopytoProjectwindow,whichpromptsyoutosaveyourimagetoyourWebsiteProjectorWorkingfolder.
73
![Page 74: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/74.jpg)
YoucansavetheimagetoanyofthepreexistingfoldersinyourWebsiteProjectorclickCreateFoldertocreateanewfolderforyourimage.Whenyouhaveselectedthefolderwhereyourimagewillbestored,clickOK.
GeneralTabThisiswhereyouinsertthepathtotheimageanditsattributes.
74
![Page 75: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/75.jpg)
ImageEntertheimagepathhere.Ifyouselectanimageusingthetoolsontheleft‐handsideofthewindow,thepathwillappearinthisfield.
AltAdescriptionoftheimagedisplayedwhentheimagecannotbeshown,suchasinatext‐onlyorspeechbrowser,orifauserhasaslowconnection.YoushouldalwaysusedetailedalttextforallprominentorcontextuallyimportantimagesonyourWebpage
TitleAdescriptionoftheimagethatappearsasatooltipwhentheuserholdstheirmouseovertheimage.
AlignSelectthedesiredalignmentfromthisdrop‐downlist.
BorderEnterthewidthoftheborderinpixelsinthisfield.Ifyoudonotwantaborder,enter0.
WidthandHeightThesefieldsdisplaythewidthandheightofyourimageandcanalsobeusedtoresizeit.Providingthisinformationallowsthepagestructuretoloadcorrectlybeforetheimageloads.Ifyoudonotwanttoincludethesevalues,unchecktheIncludesizecheckbox.
75
![Page 76: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/76.jpg)
Theimageresizefeatureshouldonlybeusedtomakeminoradjustments,sincesignificantadjustmentsmaydistorttheimage.Ifyouneedtomakeadvancedchangestoyourimage,useanimage‐editingprogram.
URLtoLinkToIfyouwouldliketousetheimageasalink,usethisfieldtoenterthelocationwhereyouruserwillbetakenwhentheyclicktheimage.IfyouarelinkingtoanexternalWebsite,youmustincludethefulllink,includinghttp://andwww,ifapplicable.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelinkbyclickingthefileicontobrowseyourcomputerforthedesiredpage.YoushouldmakesurethefileislocatedinyourWorkingfolderoryourWebsiteProjecttomakesureitisreferencedcorrectly.
FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.
ThumbnailTabThisiswhereyoucancreateanoptionalimagethumbnail,whichisasmallerversionoftheimage.Thumbnailsareoftenusedaslinkstotheoriginalversionoftheimage.
CreateandInsertImageasThumbnailSelectthischeckboxifyouwouldliketousetheimageasathumbnail.
LinktoOriginalImageSelectthischeckboxifyouwouldlikethethumbnailtolinktotheoriginalimage.
76
![Page 77: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/77.jpg)
ThumbnailFilenamePrefixThisdifferentiatesthethumbnailversionoftheimagefromtheoriginal.Bydefault,itissettotn_,butyoucanchangeittowhateveryouwant.
ThumbnailWidthandHeightEnterthewidthandheightofthethumbnailhere.Theaspectratioismaintainedsotheimagewillnotbedistorted.
ThumbnailFormatandQualityChoosethedesiredimagefileformat(.gifor.jpg)andquality.High‐qualityimagesdisplaybetter,butarealsolarger,whichmakesforlongerdownloadtimes.
77
![Page 78: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/78.jpg)
InsertListWindowTheInsertListwindowallowsyoutoinsertoneoffourdifferentkindsoflists.YoucanalsoimportalistclickingtheImportListbutton.
Foradetailedexplanationofhowtouselists,readHowtoCreateaList.
ListTypeChoosefromthefourdifferentliststyles:bulleted,numbered,definition,orlistitems.
BulletStyleChoosefromthedifferentbulletstyles.Thisonlyappliesifyouareusingabulletedornumberedlist.
ListHeaderTextEnteryourlistheaderhere.Alistheaderappearsabovethelistasalabel.
ListItemFieldEnterthelistitemsinthisfield.Puteachlistitemonitsownline.
78
![Page 79: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/79.jpg)
InsertHorizontalRuleWindowTheInsertHorizontalRulewindowallowsyoutoconfigurethesettingsofahorizontalrulethatisthenaddedtoyourpage.YoucanpreviewthechangesyoumakeinthePreviewarea.
Formoreinformationabouthorizontalrules,readWhatIsaHorizontalRule?
AlignmentChoosethealignmentofyourhorizontalrule:left,right,orcentered.
WidthChoosethelinewidthandwhetheritismeasuredasapercentageofthecontainingelement(suchasthepageora<div>tag)orinpixels.
ThicknessChoosethelinethickness,with1beingthethinnestand10beingthethickest.
79
![Page 80: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/80.jpg)
ShadingChoosewhethertoapplya3Deffecttotheline.
ColorCheckingtheIncludecolorcheckboxallowsyoutochangethecoloroftheline.ThiseffectonlyappearsinInternetExplorer.Toselectacolor,clickthecolorswatch.Thisopensadrop‐downlistof40basiccolors.
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
80
![Page 81: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/81.jpg)
FrameDesignerTheFrameDesignerallowsyoutocreateaframes‐basedlayout.Selectyourpreferencesusingtheprovidedtools,andthedesignerwillautomaticallyinsertthecodeforyou.YoucanpreviewhowyourdesignwilllookusingthePreviewpaneontheleft‐handsideofthewindow.
Foradetailedtutorialabouthowtousethistool,readHowtoUsetheFrameDesigner.
FrameStyleChoosefromanumberofpredefinedframestyles.Thesestylesincludethenumberofframes,wheretheyarelocated,andwhatfunctiontheyperform.Forexample,HeaderTwoFramecontainstwoframes,oneintendedforuseasaheaderandanotherlargeronewherethebodycontentgoes.
FrameWidthandHeightUsethesedrop‐downmenustosetthewidthandheightoftheselectedframe.Toselectaframe,clickit,anditwillturnblue.
81
![Page 82: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/82.jpg)
Thewidthandheightaremeasuredinthepercentageofthepagetheframeoccupies.Iftheselectedframetakesuptheentireheightorwidthofthepagebydefault,youwillnotbeabletoadjustthatattribute.
FrameScrollingChoosewhetheryouruserscanscrollwithintheframe.Autoaddsascrollbarwhennecessary,Yesaddsascrollbaratalltimes,andNowillnotaddascrollbaratanytime.
AllowFrameResizeSelectthischeckboxifyouwantyouruserstobeabletoresizetheframes.
FrameBorderSelectthischeckboxtoenableaframeborder,andthenenterthewidthoftheborderinthenumberfield.0isthethinnestborderand50isthelargest.
FrameNameEnteranamefortheframehere.Youshoulduseanamethatrelatestotheframe’sfunction.
SourceURLEntertheURLofthepageyouwanttoappearintheframehere.IfyouarelinkingtoanexternalWebsite,youmustincludethefulllink,includinghttp://andwww,ifapplicable.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelink.YoushouldmakesurethefileislocatedinyourWorkingfolderoryourWebsiteProjecttomakesureitisreferencedcorrectly.
FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.
82
![Page 83: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/83.jpg)
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
83
![Page 84: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/84.jpg)
InsertNewTableWindowTheInsertNewTablewindowopenswhenyouopentheTableDesignerandcontainstoolsthatallowyoutosetupatable.
NumberofRowsandColumnsEnterthenumberofrowsandcolumnsintothesefields.
BackgroundandBorderColorTochangethebackgroundand/orbordercolorofthetable,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.
84
![Page 85: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/85.jpg)
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
TableWidthEnterthewidthofthetableinthisfield.Youcanchoosefromapercentageofthepageorafixedsizeinpixels.
CellSpacingEnterthespaceinpixelsthatwillappearbetweeneachcell.
CellPaddingEnterthespaceinpixelsthatwillappearbetweentheborderofthecellanditscontents.
BorderWidthEnterthewidthinpixelsoftheborderbetweenthecells.
85
![Page 86: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/86.jpg)
TableDesignerMenuBarTheTableDesignermenubarislocatedatthetopofthewindow.Itgivesyouaccesstoallthetoolsformodifyingyourtable,aswellasoptionslikeopening,saving,andpreviewingyourwork.
• File menu • Edit menu • Insert menu • Format menu • Table menu
86
![Page 87: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/87.jpg)
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.
87
![Page 88: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/88.jpg)
EditMenuTheEditmenuallowsyoutoundoorredoyouractionsandtocut,copy,paste,select,anddeleteobjects.
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.
PasteSpecial…Allowsyoutochoosetheformatofthepastedinformation.
88
![Page 89: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/89.jpg)
Delete(Ctrl+Del)Removestheselectedobject(s).
89
![Page 90: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/90.jpg)
InsertMenuTheInsertmenuallowsyoutoinsertanimageintoyourtable.
InsertImage…Opensawindowthatallowsyoutobrowseyourcomputerfortheimageyouwouldliketoaddtoyourtable.
90
![Page 91: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/91.jpg)
FormatMenuTheFormatmenuallowsyoutoformatthestyleandfontofyourtextandtosetthebackgroundcolorofyourtable.
BoldBoldstheselectedtextor,ifnotextisselected,appliesboldformattingtoanytexttypedafterthelocationofthecursor.
ItalicItalicizestheselectedtextor,ifnotextisselected,appliesitalicformattingtoanytexttypedafterthelocationofthecursor.
UnderlineUnderlinestheselectedtextor,ifnotextisselected,appliesunderlineformattingtoanytexttypedafterthelocationofthecursor.
Font…OpenstheFontwindow,whichallowsyoutoselectthefont,style,effects,size,andcolorofyourtabletext.
91
![Page 92: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/92.jpg)
Fill(Background)Color…OpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.
Youcanchoosetoapplythecolortothetext,theparagraph,ortheentiretable.Toselectmorecolors,clicktheMoreColorsbutton.ThisopenstheColorwindow,whichallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
92
![Page 93: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/93.jpg)
Tochangetheparagraphpadding,clickthePaddingbutton.ThisopensthePaddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingistheamountofspacethatappearsbetweentheparagraphandtheborderofthecell.
93
![Page 94: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/94.jpg)
TableMenuTheTablemenuallowsyoutoinserttables,adjustthetableproperties,andworkwithrows,columns,andcellcontents.
InsertTable…OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.
TableProperties…OpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.
94
![Page 95: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/95.jpg)
InsertColumnLeftInsertsacolumntotheleftofwherethecursorispositioned.
InsertColumnRightInsertsacolumntotherightofwherethecursorispositioned.
InsertRowAboveInsertsarowabovewherethecursorispositioned.
InsertRowBelowInsertsarowbelowwherethecursorispositioned.
DeleteRow(s)Deletestherowwherethecursorispositionedortheselectedrow(s).
DeleteColumn(s)Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).
SelectAllowsyoutoselecttheentiretable,arow,acolumn,oracell.
95
![Page 96: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/96.jpg)
AlignCellContentsAllowsyoutochoosethealignmentofthecontentintheselectedcell:top,middle,bottom,ordefaultcellverticalalignment.
SplitCells…OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.
96
![Page 97: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/97.jpg)
Youcanchoosetosplitthecellintoanumberofrowsandcolumnsthatyouspecify,orifyouareworkingwithacellthatyoupreviouslymerged,youcansplitthecellsbackintotheiroriginalconfiguration.Ifyouwanttomergethecontentsofthecellbeforeyousplitthem,whichconsolidatesallyourcontentintoonecellandthensplitsitintomultiplecells,checktheMergebeforesplittingcheckbox.
MergeCellsMergesthecontentsofthecellsintoonecell.
97
![Page 98: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/98.jpg)
TableDesignerToolbarTheTableDesignertoolbarcontainsbuttonsthatyoucanclicktoperformcertaincommonlyusedactionsquickly.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
NewCreatesanewblanktableforyoutoeditfromscratch.
OpenAllowsyoutoopenandworkwithapreviouslycreatedtable.
SaveSavesthetableyouarecurrentlyworkingon.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
Undo(Ctrl+Z)Undoesthelastactionyouhaveperformed.
Redo(Ctrl+Q)Redoesthelastaction.TheRedofunctioncomesinhandywhenyouaccidentallyusetheUndofunctionorchangeyourmindaboutundoinganaction.
Cut(Ctrl+X)RemovestheselectedobjectortextfromthescreenandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.
98
![Page 99: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/99.jpg)
Copy(Ctrl+C)MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindowsclipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.
Paste(Ctrl+V)TakestheobjectstoredontheWindowsclipboardandplacesitonthepage.Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesameobjectasmanytimesasyouneed.
InsertImageOpensawindowthatallowsyoutobrowseyourcomputerfortheimageyouwouldliketoaddtoyourtable.
BoldBoldstheselectedtextor,ifnotextisselected,appliesboldformattingtoanytexttypedafterthelocationofthecursor.
ItalicItalicizestheselectedtextor,ifnotextisselected,appliesitalicformattingtoanytexttypedafterthelocationofthecursor.
UnderlineUnderlinestheselectedtextor,ifnotextisselected,appliesunderlineformattingtoanytexttypedafterthelocationofthecursor.
FontOpenstheFontwindow,whichallowsyoutoselectthefont,style,effects,size,andcolorofyourtabletext.
99
![Page 100: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/100.jpg)
Fill(Background)ColorOpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.
100
![Page 101: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/101.jpg)
Youcanchoosetoapplythecolortothetext,theparagraph,ortheentiretable.Toselectmorecolors,clicktheMoreColorsbutton.ThisopenstheColorwindow,whichallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
Tochangetheparagraphpadding,clickthePaddingbutton.ThisopensthePaddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingistheamountofspacethatappearsbetweentheparagraphandtheborderofthecell.
101
![Page 102: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/102.jpg)
InsertTableOpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.
TablePropertiesOpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.
ModifyTableCellsThisexpandstoshowsomeoptionsyoucanuseformodifyingthecellsinyourtable.
InsertColumnLeftInsertsacolumntotheleftofwherethecursorispositioned.
InsertColumnRightInsertsacolumntotherightofwherethecursorispositioned.
102
![Page 103: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/103.jpg)
InsertRowAboveInsertsarowabovewherethecursorispositioned.
InsertRowBelowInsertsarowbelowwherethecursorispositioned.
DeleteRow(s)Deletestherowwherethecursorispositionedortheselectedrow(s).
DeleteColumn(s)Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).
MergeCellsMergesthecontentsofthecellsintoonecell.
SplitCells…OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.
Youcanchoosetosplitthecellintoanumberofrowsandcolumnsthatyouspecify,orifyouareworkingwithacellthatyoupreviouslymerged,youcansplitthecellsbackintotheiroriginalconfiguration.Ifyouwanttomergethecontentsofthecellbeforeyousplitthem,whichconsolidatesallyourcontentintoonecellandthensplitsitintomultiplecells,checktheMergebeforesplittingcheckbox.
103
![Page 104: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/104.jpg)
TableDesignerRight‐ClickMenuTheright‐clickmenuallowsyoutoaccesscommonlyusedfeaturesintheTableDesigner.
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.
PasteSpecial…Allowsyoutochoosetheformatofthepastedinformation.
104
![Page 105: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/105.jpg)
Font…OpenstheFontwindow,whichallowsyoutoselectthefont,style,effects,size,andcolorofyourtabletext.
105
![Page 106: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/106.jpg)
Fill(Background)Color…OpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.
Youcanchoosetoapplythecolortothetext,theparagraph,ortheentiretable.Toselectmorecolors,clicktheMoreColorsbutton.ThisopenstheColorwindow,whichallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
106
![Page 107: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/107.jpg)
Tochangetheparagraphpadding,clickthePaddingbutton.ThisopensthePaddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingistheamountofspacethatappearsbetweentheparagraphandtheborderofthecell.
BoldBoldstheselectedtextor,ifnotextisselected,appliesboldformattingtoanytexttypedafterthelocationofthecursor.
ItalicItalicizestheselectedtextor,ifnotextisselected,appliesitalicformattingtoanytexttypedafterthelocationofthecursor.
UnderlineUnderlinestheselectedtextor,ifnotextisselected,appliesunderlineformattingtoanytexttypedafterthelocationofthecursor.
TableExpandstodisplayoptionsforcreatingoreditingatable.
107
![Page 108: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/108.jpg)
InsertTable…OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.
TableProperties…OpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.
108
![Page 109: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/109.jpg)
InsertColumnLeftInsertsacolumntotheleftofwherethecursorispositioned.
InsertColumnRightInsertsacolumntotherightofwherethecursorispositioned.
InsertRowAboveInsertsarowabovewherethecursorispositioned.
InsertRowBelowInsertsarowbelowwherethecursorispositioned.
DeleteRow(s)Deletestherowwherethecursorispositionedortheselectedrow(s).
DeleteColumn(s)Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).
SelectAllowsyoutoselecttheentiretable,arow,acolumn,oracell.
109
![Page 110: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/110.jpg)
AlignCellContentsAllowsyoutochoosethealignmentofthecontentintheselectedcell:top,middle,bottom,ordefaultcellverticalalignment.
SplitCells…OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.
110
![Page 111: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/111.jpg)
Youcanchoosetosplitthecellintoanumberofrowsandcolumnsthatyouspecify,orifyouareworkingwithacellthatyoupreviouslymerged,youcansplitthecellsbackintotheiroriginalconfiguration.Ifyouwanttomergethecontentsofthecellbeforeyousplitthem,whichconsolidatesallyourcontentintoonecellandthensplitsitintomultiplecells,checktheMergebeforesplittingcheckbox.
MergeCellsMergesthecontentsofthecellsintoonecell.
111
![Page 112: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/112.jpg)
InsertFormWindowTheInsertFormwindowallowsyoutosettheformmethod,MIMEpostmethod,andURLwheretheformresultswillbedirected.Thisinformationisimportantifyouwantyourformtoworkproperly!
ForcomprehensiveinformationaboutcreatingandmodifyingHTMLforms,readtheW3SchoolstutorialHTMLFormsandInput(http://www.w3schools.com/html/html_forms.asp).
FormMethodChoosehowyouwanttotransfertheformdata.Postsendsittotheserverandgetpullsitfromtheserver.
MIMEPostMethod(Enctype)Selectthetypeofapplicationthatwillprocesstheformdata.
FormContentsGototheFollowingURLTheURLofthescriptthatactuallyprocessestheform.Formoreinformationaboutformscriptsandtodownloadfreeformprocessingscripts,visithttp://www.hotscripts.com.
112
![Page 113: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/113.jpg)
StyleSheetWizardTheStyleSheetWizardallowsyoutosetthevariouspropertiesofyourstylesheet.
Forcomprehensiveinformationaboutcreatingandmodifyingstylesheets,readtheW3SchoolstutorialCSSIntroduction(http://www.w3schools.com/css/css_intro.asp).
• Font tab • Color and Background tab • Alignment tab • Margins tab • Padding tab • Border tab
113
![Page 114: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/114.jpg)
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
114
![Page 115: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/115.jpg)
FontSizeSelectthesizeofyourfontusingoneoffourmeasurements:absolute,relativetothecontainingelement,pixels,orapercentageofthecontainingelement.
WeightThelightnessordarknessofyourfont,with100beingthelightestand900beingthedarkest.
StyleSelectthefontstyle:normal,italic,oroblique.
DecorationSelectthefontdecoration:none,underline,overline,strikethrough,orblink.
TransformChoosewhethertoapplycapitalization,uppercaseorlowercaseletters,ornone.
VariantSelectthevariant:normalorsmallcaps.
115
![Page 116: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/116.jpg)
ColorandBackgroundTabTheColorandBackgroundtaballowsyoutosetthetextandbackgroundcolorfortheclassorHTMLtagyouaremodifyingforyourstylesheet.
TextandBackgroundColorTochangethetextorbackgroundcolor,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.
116
![Page 117: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/117.jpg)
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
BackgroundImageClickthefoldericontobrowseyourcomputerforthedesiredbackgroundimage.
117
![Page 118: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/118.jpg)
RepeatIfyouaddabackgroundimage,youcanrepeatithorizontallyand/orvertically.
AttachmentSelectscrollifyouwanttheimagetoalwaysappearinthesameplaceevenwhenthepageisscrolledupordown.Selectfixedifyouwanttheimagetoappearinafixedplaceonthepage.
AlignmentUsethesefieldstospecifytheexactalignmentoftheimage.Youcansetittothedefaultlocation,oruseapercentage,anabsolutepixellocation,orkeywords.
118
![Page 119: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/119.jpg)
AlignmentTabTheAlignmenttaballowsyoutosetthealignmentfortheclassorHTMLtagyouaremodifyingforyourstylesheet.
IndentationThespacebetweenwhereyourelementstartsandtheleftedgeofthepage.Youcansetittothedefaultoradjusttheindentationinpixelsorapercentage.
LineHeightTheverticalspacebetweentwolinesoftext.Youcansetittothedefaultoradjusttheheightinpixelsorapercentage.
119
![Page 120: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/120.jpg)
AlignmentUsetheseoptionstosetwherethecontentintheclassortagappearsonthepage.Settheverticaland/orhorizontalalignmentbykeywordorpercentage.Ifyouusetheseoptionstosetthealignment,youcannotusethefloatproperty.
WordandLetterSpacingTheamountofspaceinpixelsbetweenwordsandletters.
FloatChoosewhetherthecontentintheclassortagfloatstotherightorleft,ordoesnotfloatatall.Ifyouusethisoptiontosetthealignment,youcannotusethealignmentproperties.
ClearChoosethesideofthefloatedelementwhereotherfloatingelementswillnotappear.Forinstance,ifyouselectleft,nofloatedelementswillappeartotheleftofthespecifiedfloatedelement.
120
![Page 121: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/121.jpg)
MarginsTabTheMarginstaballowsyoutosetthemargins,width,andheightinpixelsorapercentageofthecontainingelementfortheclassorHTMLtagyouaremodifyingforyourstylesheet.
“Margin”referstothewhitespacesurroundinganelement.Whenthemarginisincreasedforaselectedelement,morespacewillappearbetweentheelementandtheobjectssurroundingit.
121
![Page 122: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/122.jpg)
PaddingTabThePaddingtabletsyousetthepaddinginpixelsorapercentageofthecontainingelementfortheleft,right,top,andbottomoftheclassorHTMLtagyouaremodifyingforyourstylesheet.
“Padding”referstothewhitespacewithinanelement.Whenpaddingisincreasedforaselectedelement,morespacewillappearbetweenitsouteredgesandtheobjectscontainedwithinit.
122
![Page 123: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/123.jpg)
BorderTabTheBordertaballowsyoutosetthebordersfortheclassorHTMLtagyouaremodifyingforyourstylesheet.
SizeThesizeoftheborderinpixelsorapercentageofthecontainingelement.
StyleChoosefromeightborderstyles.
ColorTochangethetextorbackgroundcolor,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.
123
![Page 124: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/124.jpg)
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
124
![Page 125: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/125.jpg)
CSSMenuDesignerTheCSSMenuDesignerallowsyoutocreateaCSSnavigationmenu.
ForadetailedtutorialabouthowtoaddamenuusingtheCSSMenuDesigner,readHowtoUsetheCSSMenuDesigner.Ifyou’rewonderingwhathappenedtotheDHTMLMenuBuilder,readWhathappenedtotheDHTMLMenuBuilder?
Itisextremelyimportanttoremoveanyoldmenucodefromyourdocumentbeforeinsertinganewmenu.Ifyoudon’t,yourmenuwillnotwork.Toremoveyouroldcode,clickSaveMenutosaveanychangesto
yourmenuthatyouhavemade,andthenclickCancel.IfyouhavealreadyinsertedaCSSmenu,removethefollowingcodefrombetweenyour<head></head>tags:
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">
css/menu‐menu.cssisthedefaultnameandlocationofthemenustylesheet.Ifyouhavechangedthenameorlocationofthisstylesheet,thisfilepathwillreflectyourchanges.Next,removethiscodefrombetweenthe<body></body>tags:
125
![Page 126: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/126.jpg)
<ul class="menu-menu"> <li class="first"><a href="page1.html">Menu Item 1</a></li> <li><a href="page2.html">Menu Item 2</a></li> </ul>
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:
126
![Page 127: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/127.jpg)
Thiswindowremindsyouthatyoumustremoveallyouroldmenucodebeforeinsertingnewcode.
Thisstepisveryimportant!Ifyoudonotremoveyouroldmenucode,yourmenuwillnotworkcorrectly.
Toexitthiswindow,clickOK.ThisopenstheSaveMenuwindow,whichallowsyoutosaveyourmenutoworkwithitlater.
127
![Page 128: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/128.jpg)
Weonlyrecommendsavingyourmenuifyouhavealreadyremovedyouroldmenucode.ClickingSaveopensawindowthatallowsyoutochoosethelocationwhereyouwouldliketosaveyourmenu.
Onceyouhavesavedyourmenu,thecodewillautomaticallybeinsertedintoyourpage.Ifyouhaven’tremovedyouroldmenucode,clickCancel.ThisbringsyoubacktotheCSSMenuDesigner.Fromhere,youcansaveyourmenuwithoutautomaticallyinsertingthecodeintoyourdocument.Fordetailedinformationaboutthisprocess,refertotheinstructionsabove.
CancelClickthisbuttontoabandonanyunsavedchangestoyourmenuandexittheCSSMenuDesigner.FormoreinformationaboutthedifferentsectionsoftheCSSMenuDesigner,clickoneoftheselinks:
• Menu Designer tab • Menu Colors tab • Options tab
128
![Page 129: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/129.jpg)
MenuDesignerTabTheMenuDesignertaballowsyoutoaddandconfiguremenuitems.
YourMenuAllowsyoutopreviewthestructureofyourmenu.
AddRootItemAddsarootitemtoyourmenu.Rootitemsmakeupthemainpartofthemenuthatappearsatalltimes.
AddSubitemAddsasubitemtotheselectedrootitem.Asubitemappearswhenyouclickormouseovertherootitem.Youcanadduptothreelevelsofsubitems.
AddSiblingAddsanotheritemonthesamelevelastheselecteditem.
DeleteItemDeletestheselecteditem.
TextEnterthetextyouwouldliketoappearontheselectediteminthisfield.
129
![Page 130: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/130.jpg)
LinkEnterthelinkyouwouldlikethecurrentlyselecteditemtopointtointhisfield.
130
![Page 131: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/131.jpg)
MenuColorsTabTheMenuColorstaballowsyoutosetthecolorsforyourmenu.YoucanpreviewanychangesyoumakeintheMenuColorSamplearea.
Tochangethetextorbackgroundcolor,enterahexcodeorclicktheassociatedcolorswatch.Thisopensadrop‐downlistof65basiccolors.
131
![Page 132: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/132.jpg)
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
BackgroundColorThebackgroundcolorofthemenu.
MouseoverBackgroundColorThebackgroundcolorofthemenuwhentheuserholdstheirmouseoverit.
FontColorThecolorofthemenutext.
MouseoverFontColorThecolorofthemenutextwhentheuserholdstheirmouseoverit.
132
![Page 133: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/133.jpg)
BorderColorThecolorofthemenuborder.
UseMainMenuColorsClickthisbuttonifyouwantthesubmenuitemstohavethesamecolorschemeasthemainmenuitems.
133
![Page 134: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/134.jpg)
OptionsTabTheOptionstaballowsyoutoworkwithmenuoptionsnotpertainingtotheitemsandthecolors.
OrientationChoosebetweenahorizontalandverticallayout.
MarginTopandLeftSetthetopandleftmargininpixelsinthesefields.“Margin”referstotheblankspacesurroundingthemenu.Whenthemarginisincreased,morespacewillappearbetweenthemenuandtheobjectssurroundingit.
BorderWidthEnterthewidthofthemenuborderinpixelsinthisfield.
FontFace,Size,andStyleChoosethefontandsizeofthemenuitemtext,aswellaswhetheritisboldoritalicized.
MenuandSubmenuTextAlignmentChoosehowyouwantthetextinthemenutobealigned:totheleft,right,orcenter.
134
![Page 135: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/135.jpg)
TopandLeftPaddingSetthetopandleftpaddinginpixelsinthesefields.“Padding”referstotheblankspacewithinthemenu.Whenthepaddingisincreased,morespacewillappearbetweenthemenutextandtheouteredges.
UseFixedWidthforMenuItemsSelectthischeckboxifyouwouldliketouseafixedwidthforthemenuitems.
ItemWidthSetthefixeditemwidthinpixelshere.
135
![Page 136: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/136.jpg)
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.
136
![Page 137: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/137.jpg)
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.
137
![Page 138: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/138.jpg)
Unindent(Shift+Ctrl+,)Unindentsyourindentedcodestartingwherethecursorispositioned.ThischangeappearsonlyintheCodeEditorandwillnotberenderedbyabrowser.Itisusedtohelporganizeyourcode.
Paragraph(Ctrl+Enter)Insertsparagraphtags(<p></p>)tagsorappliesthemtoselectedtext.
BreakInsertsabreaktag(<br />).
Non‐BreakingSpaceInsertsanon‐breakingspacecharacterentity( ),whichisrenderedbybrowsersasaspace.Thiscanbeusedtoinsertextraspaces,sinceHTMLonlyallowsforonespacebetweeneachword.
138
![Page 139: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/139.jpg)
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
Times New Roman Comic Sans MS Georgia
Impact Trebuchet MS Verdana
139
![Page 140: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/140.jpg)
EffectsSelectfrombold,italic,strikethrough,orunderline.
TextPositionSelectwhetheryourtextwillappearnormallyorasasubscriptorsuperscript.
SizeSelectafontsizefrom1(8pt)to7(36pt).
ColorToselectacolorforyourtext,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
140
![Page 141: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/141.jpg)
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.
141
![Page 142: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/142.jpg)
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.
142
![Page 143: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/143.jpg)
ImageMap…Opensthebuilt‐incopyofImageMapper,whichallowsyoutocreateanimagemapforyourWebsite.FormoreinformationabouthowtouseImageMapper,consultitsdocumentation.
SearchforUndocumentedCharacters…Checksyourdocumentforanyundocumentedspecialcharacters.
Ifitdiscoversanundocumentedcharacter,itgivesyoutheoptiontoreplaceitwiththeproperHTMLentity.Whenitisfinished,youwillseeamessagethatsays“Finished!”
Toaddcharacterentitiesforanyspecialcharacters,usetheCharacterstabintheResourcebrowserontheleft‐handsideoftheprogram.
CheckSpelling…Checksthespellinginyourdocument.Iftherearenospellingerrors,awindowappearsthatreads,“Thespellingcheckiscomplete.”
143
![Page 144: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/144.jpg)
Iftherearemisspelledwords,theSpellingwindowopens,allowingyoutoreviewandchangethespellingerrors,andtoadjustspellingoptions.
AutoSpellCheckPutsaredunderlineunderanymisspelledwords.
SpellCheckerOptions…OpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.
Thesaurus…OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselectedword.
ToolbarsandMenusExpandstodisplayoptionsforcustomizingthetoolbarsandmenuswithintheprogram.
Foradetailedtutorialaboutcreatingacustomtoolbar,readHowtoCreateaCustomToolbar.
144
![Page 145: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/145.jpg)
Customize…OpenstheCustomizewindow,whichallowsyoutocustomizetheprogramtoolbars.
SaveCurrentConfigurationAs…Allowsyoutosavethecurrenttoolbarandmenuconfiguration.Thisisusefulifyouhavecreatedacustomconfigurationyoumaywishtouselater.Whenyousaveaconfiguration,itwillappearbeneathDefaultinthismenu.
DefaultSelectthistoswitchtothedefaulttoolbarandmenuconfiguration.
DocumentDisplayPropertiesOpenstheCustomizationtabofthePreferenceswindow,whichallowsyoutocustomizehighlightingandtoolbaroptions.
Preferences…OpensthePreferenceswindow,whichallowsyoutoadjusttheprogrampreferences,includingworkingwiththeappearanceandfunctionoftheprogram,settingfiletypestheprogramcanopen,addingbrowsersandexternalapplications,settingdefaultfolders,andcustomizinghighlightingandtoolbaroptions.
145
![Page 146: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/146.jpg)
CoffeeCupWebsiteSpiderCoffeeCupWebsiteSpidercontainsvarioustoolsandutilitiesthatprovideinformationyoucanusetooptimizeyourWebsite.
FormoreinformationonhowtousetheWebsiteSpider,refertoitsdocumentation,availableunderHelp>HelpContents….
146
![Page 147: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/147.jpg)
CodeCleanerTheCodeCleanerallowsyoutosetyourpreferencesforhowyouwouldlikeyourcodetobeformatted,andthenrunsthecodecleaner.YoucanundoanychangesmadeduringthecodecleaningusingtheUndooption.Mouseovereachfunctionforadetaileddescriptionofwhatitdoes.Thedescriptionappearsintheyellowpaneatthebottomofthewindow.
ForadetailedtutorialaboutusingtheCodeCleaner,readHowtoUsetheCodeCleaner.
LayOut,Fix,andConvertTabTheLayOut,Fix,andConverttaballowsyoutoadjustthelayoutandformatofyourcode.Holdingyourmouseoveranoptionopensadescriptionintheyellowpaneatthebottomofthewindow.
147
![Page 148: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/148.jpg)
DocumentTabTheDocumenttaballowsyoutoworkwiththeDOCTYPEandcharacterencoding.Holdingyourmouseoveranoptionopensadescriptionintheyellowpaneatthebottomofthewindow.
148
![Page 149: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/149.jpg)
ASPandXMLTabTheASPandXMLtaballowsyoutosetoptionspertainingtoASP,HTML,andXML.Holdingyourmouseoveranoptionopensadescriptionintheyellowpaneatthebottomofthewindow.
149
![Page 150: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/150.jpg)
WebsiteColorSchemerTheWebsiteColorSchemerisusedtogenerateanattractivecolorschemeforyourWebsite.
FormoreinformationonhowtousetheWebsiteColorSchemer,refertoitsdocumentation,availableunderHelp>HelpContents(F1).
150
![Page 151: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/151.jpg)
ImageMapperTheImageMapperisusedtocreateaninteractiveimagemap.
FormoreinformationonhowtousetheImageMapper,refertoitsdocumentation,availableunderHelp>HelpContents.
151
![Page 152: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/152.jpg)
SpellingWindowTheSpellingwindowallowsyoutoreviewandchangethespellingerrors,andtoadjustspellingoptions.
NotFoundAwordnotfoundinthedictionary.
ReplaceWithTypethereplacementwordinthisfieldorselectawordfromtheSuggestionarea.ClickChangeorChangeAlltoreplacethemisspelledwordwiththewordinthisfield.
SuggestionsSpellingsuggestionsforthemisspelledword.
UndoUndoesthelastchangeyouhaveperformed.
OptionsOpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.
IgnoreIgnoresthemisspelledwordanddisplaysthenextwordnotfoundinthedictionary.
IgnoreAllIgnoresallinstancesofthemisspelledwordanddisplaysthenextwordnotfoundinthedictionary.
152
![Page 153: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/153.jpg)
ChangeReplacesthemisspelledwordwiththewordintheReplaceWithfield.
ChangeAllReplacesallinstancesofthemisspelledwordwiththewordintheReplaceWithfield.
AddAddsthewordintheNotFoundfieldtothedictionary.
Auto‐CorrectAddsthewordsintheNotFoundandReplaceWithfieldstotheAuto‐Correctdictionary.IftheAutoSpellCheckoptionisenabled,themisspellingwillautomaticallybereplacedwiththereplacementwordwhenyouruntheCheckSpellingfunction.
ToenableAuto‐Correct,gotoTools>AutoSpellCheck.
153
![Page 154: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/154.jpg)
SpellingOptionsWindowTheSpellingOptionswindowallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.
OptionsSelecttheoptionsyouwouldliketoenablewhencheckingthespellinginyourdocument.
DictionariesListstheavailabledictionaries.Bydefault,11languagedictionariesareincludedintheprogram.Youmayselectasmanyasyouwant.
LocateDictionariesSelectingthisoptionopensawindowthatallowsyoutobrowseyourcomputerforanotherdictionaryfile.
FormoreinformationabouthowtoadddictionaryfilestotheHTMLEditor,readHowdoIimportanotherlanguagedictionaryintotheHTMLEditor?
154
![Page 155: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/155.jpg)
CustomDictionaryIfyouhaveaddedacustomdictionaryandwouldliketouseitinsteadoforinadditiontothedictionaryordictionariesselectedintheDictionariesarea,selectitfromthisdrop‐downlist.
Dictionaries…OpenstheDictionarieswindow,whichallowsyoutoadd,edit,anddeletecustomdictionaries.
EditOpenstheEdit.aduwindowfortheselecteddictionaryfile,whichallowsyoutoaddwords,auto‐correctpairs,andexcludedwords.
DeleteDeletestheselecteddictionary.
NewOpenstheNewCustomDictionarywindow,whichallowsyoutoenterthenameofanotherdictionaryfileyouwouldliketoaddtoyourcustomdictionaries.
FormoreinformationabouthowtoadddictionaryfilestotheHTMLEditor,readHowdoIimportanotherlanguagedictionaryintotheHTMLEditor?
ResetDefaultsResetstheDictionariesareatoincludeonlythe11defaultdictionaries.
155
![Page 156: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/156.jpg)
Edit.aduWindowTheEdit.aduwindowallowsyoutoaddwords,auto‐correctpairs,andexcludedwordstotheselecteddictionaryfile.
AddedWordsTabAllowsyoutoaddwordstothedictionaryfileordeletecustomwordsyouhaveadded.
156
![Page 157: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/157.jpg)
Auto‐CorrectPairsTabAllowsyoutoaddauto‐correctpairstothedictionaryfileordeletecustomauto‐correctpairsyouhaveadded.
IftheAutoSpellCheckoptionisenabled,thewordintheReplacecolumnwillautomaticallybereplacedwithwordintheWithcolumnwhenyouruntheCheckSpellingfunction.
ToenableAuto‐Correct,gotoTools>AutoSpellCheck.
157
![Page 158: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/158.jpg)
ExcludedWordsTabAllowsyoutoaddwordsthatwillalwaysbeconsideredincorrectwhenrunningspellcheck,ortodeleteanyexcludedwordsyouhaveadded.
158
![Page 159: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/159.jpg)
CustomizeWindowTheCustomizewindowallowsyoutocustomizetheprogramtoolbars.
Foradetailedtutorialaboutcreatingacustomtoolbar,readHowtoCreateaCustomToolbar.
• Toolbars tab • Commands tab • Options tab
159
![Page 160: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/160.jpg)
ToolbarsTabTheToolbarstaballowsyoutoaddoreditprogramtoolbars.Thegrayed‐outtoolbarsarenotavailabletobeedited.
ToolbarsDisplaysalistofthetoolbarsavailableintheprogram.SelectingthecheckboxforatoolbardisplaysitintheHTMLEditorworkspace,anddeselectingthecheckboxremovesit.
NewOpenstheAddToolbarwindow,whichallowsyoutonamethenewtoolbar.
160
![Page 161: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/161.jpg)
Whenyoucreateanewtoolbar,itopensintheHTMLEditorworkspace.
RenameOpenstheRenameToolbarwindow,whichallowsyoutorenametheselectedtoolbar.
DeleteDeletestheselectedtoolbar.
Reset(MainToolbarOnly)Resetsthemaintoolbartoitsdefaultconfiguration.
161
![Page 162: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/162.jpg)
CommandsTabTheCommandstaballowsyoutoviewandaddcommandstoyourcustomtoolbarortothemaintoolbar.Toaddacommand,dragitfromtheCommandslisttothedesiredtoolbaranddropitthere.
CategoriesBroadcategoriestowhichindividualcommandsbelong.Categoriescannotbeaddedtoatoolbar.
CommandsIndividualcommandsthatcanbeaddedtoatoolbar.Toaddacommand,dragittothedesiredtoolbaranddropitthere.
162
![Page 163: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/163.jpg)
OptionsTabTheOptionstaballowsyoutocustomizeotheraspectsofyourtoolbars.
MenusShowRecentlyUsedCommandsFirstSelectthischeckboxifyouwantthemostrecentlyusedcommandstoappearatthebeginningofyourcustommenuortoolbar.
ShowFullMenusAfteraShortDelaySelectthischeckboxifyouwantdrop‐downmenusinyourcustommenuortoolbartoappearafterashortdelay.
ResetMyUsageDataResetsyourusagedatasoyourcommandsappearintheorderyouspecifiedinsteadofbeingrankedinorderofuse.
163
![Page 164: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/164.jpg)
LargeIconsIncreasesthesizeofthemenuicons.
ShowTooltipsonToolbarsSelectthischeckboxtodisplaytooltipswhenyoumouseovertoolbaricons.
ShowShortcutKeysinTooltipsSelectthischeckboxtodisplaykeyboardshortcutsinthetoolbartooltips.
MenuAnimationsSelectthedesiredmenuanimationfromthisdrop‐downlist.
164
![Page 165: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/165.jpg)
PreferencesWindowThePreferenceswindowallowsyoutoadjustoptionsforworkingwiththeprogramandyourcode.
• General tab • Files tab • Browser Testing tab • Applications tab • Folders tab • Customization tab
165
![Page 166: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/166.jpg)
GeneralTabTheGeneraltaballowsyoutosetdisplayandfunctionalpreferencesfortheHTMLEditor.
ApplicationStartupSelectwhetheryouwouldlikeaspecificdocumenttoopenautomaticallyintheEditoronstartup.YoucanalsochoosewhethertheMyWebsitesorMyComputertabwillbeopenintheResourcebrowser.Finally,youcanspecifywhetherthetipofthedayandtheWelcomewindowwillappear.
InitialDocumentModeSelectwhetheryouwanttheVisualorCodeeditortoopenautomaticallyonstartup.YoucanalsochoosewhethertoshoworhidetheVisualEditorand/orPreviewtab.
InitialDocumentTypeSelecttheinitialdocumenttypethatwillbeusedonstartupandwhenyoucreateanewpagefromthisdrop‐downlist.
ProperCaseConversionWhenconvertingtopropercase,anylettersafterthecharactersenteredinthisfieldwillbecapitalized.
166
![Page 167: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/167.jpg)
Toconvertyourdocumentoraselectionoftextandcodetopropercase,gotoEdit>ConverttoProperCase.
MiscellaneousSelectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapply.
WhenStartingaNewWebsiteProjectSelectwhatyouwouldliketheprogramtodowhenyoucreateanewWebsiteProject.
167
![Page 168: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/168.jpg)
FilesTabTheFilestaballowsyoutospecifythefileextensionsyoucanopenandeditintheHTMLEditor.Formatyourentrieswithanasteriskfollowedbyaperiodandavalidextension(e.g.*.html,*.css,*.php,etc.)
FileExtensionsSpecifythevalidfileextensionsyouwouldliketoopenandeditintheEditorinthesefields.Toresetthembacktotheprogramdefaults,clicktheResetbutton.
UnixFilesSpecifyanyfileextensionsyouwouldliketosaveasUnixfiles.
FileExtensionsThatWillNotBeOpenedinVisualEditorSwitchingtotheVisualEditormaycauseunwantedformattinginsomedocumenttypes.UsethisfieldtospecifyanyfileextensionsyoudonotwanttoopenintheVisualEditor.Thisensuresthatyouwillnotaccidentallyopenthemandlosetheformattingofyourcode.
168
![Page 169: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/169.jpg)
BrowserTestingTabTheBrowserTestingtaballowsyoutoaddbrowsersyoucanusetopreviewyourwork.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,GoogleChrome,andSafari.
Toaccessanybrowsersyouadd,gotoTools>AdditionalBrowsers.
SelectaBrowserSelecttheslotunderTools>AdditionalBrowserswhereyouwouldlikethebrowsertoappear.AdditionalBrowser1canbeaccessedusingthekeyboardshortcutCtrl+F5.
DisplayNameEnterthedesireddisplaynameforthebrowser.
ApplicationLocationUsetheBrowseicontobrowseyourcomputerforthe.exefileforthebrowseryouwanttoadd.Toremoveabrowser,clicktheRemoveicon.
169
![Page 170: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/170.jpg)
ApplicationsTabTheApplicationstaballowsyoutoaddexternalapplicationsthatcanbeopenedfromwithintheHTMLEditor.
Toaccessanyapplicationsyouhaveadded,gotoTools>Applications.
DescriptionAcustomdescriptionoftheapplicationthatwillappearunderTools>Applications.Thisisapersonalreminder,soyoucannameitanythingyouwant.
CustomApplication.exeUsetheBrowseicontobrowseyourcomputerforthe.exefilefortheapplicationyouwanttoadd.Toremoveanapplication,clicktheRemoveicon.
170
![Page 171: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/171.jpg)
FoldersTabTheFolderstaballowsyoutoselectdefaultfoldersusedwithintheHTMLEditor.
DefaultWebsiteProjectsFolderClicktheBrowseicontoselectthedefaultfolderwhereyourWebsiteProjectsaresaved.
DefaultWorkingFolderClicktheBrowseicontoselectthedefaultWorkingfolder.IfyouareusingaWebsiteProject,bydefault,theWorkingfolderisthesameastheWebsiteProjectsfolder.Otherwise,theWorkingfolderiswhereyousaveyourWebsitefiles.
DefaultImageFolderClicktheBrowseicontoselectthedefaultImagefolder.WhicheverfolderyouselectwillbeopenbydefaultintheInsertImagewindow.
DefaultBackgroundImageFolderClicktheBrowseicontoselectthedefaultBackgroundImagefolder.WhicheverfolderyouselectwillbeopenbydefaultinthewindowthatappearswhenyouaddabackgroundimageintheDocumentPropertieswindow.
171
![Page 172: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/172.jpg)
DefaultSoundsFolderClicktheBrowseicontoselectthedefaultSoundsfolder.WhicheverfolderyouselectwillbeopenbydefaultintheInsertSoundwindow.
OptionalPromptsTheseoptionspromptyouwhenyouaddanimageorinsertapageanditisnotlocatedinyourWorkingfolder.IfyouareusingaWebsiteProject,bydefault,theWorkingfolderisthesameastheWebsiteProjectsfolder.Otherwise,theWorkingfolderiswhereyousaveyourWebsitefiles.
172
![Page 173: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/173.jpg)
CustomizationTabTheCustomizationtaballowsyoutocustomizehighlightingandtoolbaroptions.
DocumentsSelectthedocumenttypewhosehighlightingschemeyouwanttomodifyfromthisdrop‐downlist.
ModifyHighlightingOpenstheHighlightingOptionswindow,whichallowsyoutomodifythehighlightingschemefortheselecteddocumenttype.ThisschemeappliesonlytothecodeintheEditorasapersonalreminder,andwillnotberenderedbyWebbrowsers.
ModifyOptionsOpenstheEditorOptionswindow,whichallowsyoutosetdisplaypreferencesfortheCodeEditor.
ToolbarCustomizationListsthecustomtoolbarsyouhaveconfiguredandallowsyoutodeleteorrenamethem.
Tocreateacustomtoolbar,gotoTools>ToolbarsandMenus>Customize.
173
![Page 174: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/174.jpg)
HighlightingOptionsWindowTheHighlightingOptionswindowallowsyoutomodifythehighlightingschemeforthedocumenttypeselectedintheCustomizationtabofthePreferenceswindow.ThisschemeappliesonlytothecodeintheEditorasapersonalreminder,andwillnotberenderedbyWebbrowsers.
Formoreinformationaboutworkingwithhighlightingoptions,readAdjustingCodeHighlightingOptions.
CurrentLanguageStyleDisplaysthedocumenttypeyouareediting.
174
![Page 175: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/175.jpg)
ElementListsthedifferentelementsofthecurrentlanguage.Selectanelementtoadjustitshighlightingoptions.SelectingDefaultTextgivesyoutheoptiontoapplythedefaultsettingstootherelements.
ForegroundandBackgroundColorTochangethecolorofeitheroftheseelements,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof20basiccolors.
Tobrowseevenmorecolors,clickOther.ThisopenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.
175
![Page 176: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/176.jpg)
TextAttributesChoosefrombold,italic,orunderline.
UseDefaultsForSelecttheForegroundorBackgroundcheckboxesifyouwanttoapplytheDefaultTextsettingstotheselectedelement.
FontSelectthedesiredfontfacefromthisdrop‐downlist.
SizeSelectthedesiredsizefromthisdrop‐downlist.
CharsetSelectyourpreferredcharactersetfromthisdrop‐downlist.
176
![Page 177: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/177.jpg)
EditorOptionsWindowTheEditorOptionswindowallowsyoutosetdisplaypreferencesfortheCodeEditor.
PrintOptionsSelectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapplywhenprintingadocument.
GeneralOptionsSelectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapplyintheCodeEditor.
VisibleRightMarginSelectwhethertodisplayavisiblerightmarginandthenspecifyitswidthinpixels.
177
![Page 178: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/178.jpg)
VisibleGutterSelectwhethertodisplayavisiblegutterandthenspecifyitswidthinpixels.Agutterisabartotheleftofthecodewherelinenumbers,bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.
BlockIndentStepSizeNumberofspacesautomaticallyusedtoindentthenextlineofcodewhennestingelements.
WordWrapColumnThecolumnatwhichwordwrappingoccurs.Enter0ifyouwantthewordwraptobesettothewidthofthewindow.
ShowWordWrapColumnSelectthischeckboxifyouwanttodisplaythewordwrapcolumn.
TabColumnThetabstopswithintheeditingenvironment.
TabStopThenumberofspacesthecursormoveswhenyouclicktheTabkey.
178
![Page 179: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/179.jpg)
WindowMenuTheWindowmenuallowsyoutoswitchbetweentheopenfiles.Selectingoneofthefilesopensitinwhichevereditor(CodeorVisual)isopen.
YoucanalsoswitchbetweenopenfilesusingthetabsintheStatusbaratthebottomoftheprogram.
179
![Page 180: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/180.jpg)
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.
180
![Page 181: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/181.jpg)
Tonavigatethetips,usethePreviousandNextbuttons.Ifyoudonotwanttoseethesetipsonstartup,uncheckthecheckboxnexttoShowtipofthedayonstartup.
Tore‐enabletheTipoftheDaywindow,gotoHelp>TipoftheDayorusetheoptionsunderTools>Preferences>Generaltab.
AboutThisSoftware…OpensawindowthatprovidesbasicinformationabouttheprogramandCoffeeCupSoftware.
181
![Page 182: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/182.jpg)
ToolbarTheToolbarislocatedacrossthetopoftheprogramandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedprogramfeatures.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
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.
182
![Page 183: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/183.jpg)
AlayoutincludestheHTMLforabasicpagestructure.Youprovidethecontent.Ifyouprefertoworkwithapagedesign,selectNewFromTheme.Formoreinformationaboutthedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetweenalayoutandatheme?
NewFromTheme…OpensawindowthatallowsyoutochoosefromseveralWebpagethemes.
183
![Page 184: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/184.jpg)
Athemeincludesthreepages(index.html,about‐us.html,andcontact‐us.html)thatincludetheHTMLandimagesforabasicdesign.Youcanreplacetheimagesandtextwithyourowncontent.Ifyouprefertowork
withapagestructure,selectNewFromLayout.Formoreinformationaboutthedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetweenalayoutandatheme?
SaveExpandstodisplayalistofoptionsforsavingyourwork.
Save(Ctrl+S)Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequently
topreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
SaveAs…(Ctrl+Shift+S)Savesthecurrentfileunderadifferentname.Thiswillnotoverwritethefileyouarecurrentlyworkingon;instead,itwillcreateanewfilethatyoucangiveadifferentname.
SaveAllSavesalltheopenfiles.
SaveSelectedTextasSnippet…OpenstheSaveSnippetwindow,whichallowsyoutonameandsavethehighlightedtextasasnippet.
184
![Page 185: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/185.jpg)
AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCodeSnippetstab.Foradetailedtutorialaboutworkingwithsnippets,readHowtoUseSnippets.
OpenExpandstodisplayalistofoptionsforopeningpreviouslycreatedwork.
Open…(Ctrl+O)Allowsyoutoopenandworkwithapreviouslycreatedfile.
OpenFromWeb…OpenstheOpenFromWebwindow,whichallowsyoutoimportanHTMLpageontheInternetintotheHTMLEditor.ThisoptionworksbestwithHTMLpagesthatdonotcontainPHPorSSI.Thesescriptsarestoredontheserver,andsometimesaddcodetoaWebpagethatcannotbeimportedintotheHTMLEditor.
RecentFilesDisplaysalistoffilesyouhaveworkedwithrecently,whichallowsyoutoaccessthemmorequickly.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthen
selectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
185
![Page 186: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/186.jpg)
AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
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.
FindandReplaceExpandstodisplaythefindandreplaceoptions.
Find…(Ctrl+F)OpenstheExtendedFindwindow,whichallowsyoutosearchthecurrentdocument,
allopendocuments,orallthedocumentsinagivenfolderforasearchterm.
Replace…(Ctrl+H)OpenstheExtendedFindandReplacewindow,whichallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm,andthenreplaceitwithtextofyourchoosing.
186
![Page 187: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/187.jpg)
ExtendedFindResultsDisplaystheSearchResultstabatthebottomoftheprogram.
SpellingandThesaurusExpandstodisplaythespellingandthesaurusoptions.
CheckSpelling…Checksthespellinginyourdocument.Iftherearenospellingerrors,youwillseeawindowthat
says,“Thespellingcheckiscomplete.”
Iftherearemisspelledwords,theSpellingwindowopens,allowingyoutoreviewandchangethespellingerrors,andtoadjustspellingoptions.
AutoSpellCheckPutsaredunderlineunderanymisspelledwords.
Thesaurus…OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselectedword.
187
![Page 188: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/188.jpg)
DocumentExpandstodisplaydocumentoptions.
DocumentWeight…OpenstheDocumentWeightwindow,whichcontainsinformationaboutthesizeofthecurrentlyopendocumentandhowlongitwilltaketo
downloadtoacomputeronseveraldifferentconnections.
DocumentDependencies…OpenstheDocumentDependencieswindow,whichliststhebackgroundimages,items,andexternallinksinyourdocument.Youcanusethisinformationtokeeptrackofyourdependenciesandpreventissueslikebrokenlinksandimages.
188
![Page 189: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/189.jpg)
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.
189
![Page 190: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/190.jpg)
ApplicationsExpandstoshowalistofotherapplicationsyoucanopenfromwithintheHTMLEditor.Toaddexternalapplications,gotoTools>Preferences>Applicationstab.
SearchAllowsyoutoenterasearchtermandsearchforitintheopendocument.Usetheupanddownarrowstoviewthepreviousandnextiterationsofthesearchterm.
190
![Page 191: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/191.jpg)
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
191
![Page 192: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/192.jpg)
CodeEditorToolbarTheCodeEditortoolbarislocatedacrossthetopoftheCodeEditorandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
Image(Ctrl+M)OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
LinksExpandstodisplaylinkoptions.
Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallows
youtoinsertalinkandanyassociatedattributes.
E‐mailLink…(Ctrl+E)OpenstheInsertE‐mailLinkwindow,whichallowsyoutoinsertane‐maillinkandanyassociatedattributes.
192
![Page 193: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/193.jpg)
FontsExpandstodisplayfontoptions.
FontWizard…OpenstheFontWizard,whichallowsyoutochoosetheattributesforafonttag.
FontSizesSelectfromfontsizes1(8pt)to7(36pt)oradjustthesizeupordownoneincrement.
FontColor…OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.
FontEffectsAllowsyoutoapplyoneoftheprovidedeffectstoyourfont.
193
![Page 194: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/194.jpg)
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.
194
![Page 195: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/195.jpg)
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.
195
![Page 196: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/196.jpg)
Dragyourmouseoverthesquarestopickhowmanycolumnsandrowsareinyourtable.Clickwhenyouhavespecifiedthedesireddimensions,andthecodewillbeinsertedonyourpage.
FormItemsExpandstodisplayformoptions.
ForcomprehensiveinformationaboutcreatingandmodifyingHTMLforms,readtheW3SchoolstutorialHTMLFormsandInput(http://www.w3schools.com/html/html_forms.asp).
196
![Page 197: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/197.jpg)
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:
197
![Page 198: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/198.jpg)
ListBox…OpenstheInsertListBoxwindow,whichallowsyoutoconfigurethecontentsofalistbox.
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevaluesyouwouldliketoappearintheformresultsintheValuefield.TheNameappearsintheformresults,andtheAlignmentoptionscontrolwheretheelementappearsonthepage.Alistisatextboxcontainingalistofitemsthatyourusercanselect,andisbestsuitedforlistsinwhichyourusercanselectseveraloptions.Thelistboxconfiguredaboverenderslikethis:
198
![Page 199: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/199.jpg)
RadioButtonGroup…OpenstheInsertRadioButtonGroupwindow,whichallowsyoutoconfigurearadiobuttongroup.Radiobuttonsmustbegroupedinordertoworkcorrectly.
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevaluesyouwouldliketoappearintheformresultsintheValuefield.TheNameappearsintheformresults,andtheAlignmentoptionscontrolwheretheelementappearsonthepage.
CheckboxInsertsthecodeforacheckbox,whichisasquareboxthatcanbeselectedanddeselected,andisbestsuitedforlistsinwhichyourusercanselectoneormoreanswers.Acheckboxlookslikethis:
RadioButtonInsertsthecodeforaradiobutton,whichisaroundbuttonthatyourusercanselectbutonlydeselectbyselectinganotheroption.Theyarebestsuitedforlistsinwhichyourusercanonlyselectoneanswer.Aradiobuttonlookslikethis:
199
![Page 200: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/200.jpg)
ImageInsertsthecodeforaformimage.Thisisparticularlyhelpfulifyouwanttoaddcustombuttonstoyourform.
TextBoxInsertsthecodeforatextbox,whichisaone‐linefieldwhereyourusercantypeinformation,andisbestsuitedforshortanswers,suchasname,e‐mailaddress,phonenumber,etc.Atextboxlookslikethis:
PasswordTextBoxInsertsthecodeforapasswordtextbox,whichisaone‐linefieldwhereyourusercantypeapassword.Allthecharactersaredisguisedasasterisks.
HiddenTextInsertsthecodeforhiddentext,whichappearsinyourcopyoftheformresultsandcanbeusedforsortingandfilteringinformation.
FileBrowseTextBoxInsertsthecodeforafilebrowsetextbox,whichisusedtobrowseyourcomputerforafile.Thisfilewillbeuploadedwhentheformissubmitted.
TextAreaInsertsthecodeforatextarea,whichisamultiple‐linefieldwhereyourusercantypeinformation,andisbestsuitedforlongeranswers,suchasmessages,feedback,etc.Atextarealookslikethis:
ButtonInsertsthecodeforageneric“SubmitQuery”button.
200
![Page 201: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/201.jpg)
SubmitButtonInsertsthecodeforasubmitbutton.
ResetButtonInsertsthecodeforaresetbutton.
ListOpenstheInsertListwindow,whichallowsyoutoinsertorimportoneoffourdifferentkindsoflists:bulleted,numbered,definition,orunformatted.
StyleSheetItemsDisplaysalistofoptionsthatletyouinsertvariousstylesheetitems.
Forcomprehensiveinformationaboutcreatingandmodifyingstylesheets,readtheW3SchoolstutorialCSSIntroduction(http://www.w3schools.com/css/css_intro.asp).
StyleSheetWizard…OpenstheStyleSheetwindow,whichallowsyoutochoosebetweencreatinganewstylesheetclassandapplyingastylesheettoapreexistingHTMLtag.
Afteryoumakeyourchoice,youwillbetakentotheStyleSheetWizard,whichallowsyoutosetthevariousoptionsforyourstylesheet.
StyleSheetAttributeWizard…OpenstheStyleSheetWizard,whichallowsyoutosetthevariousoptionsforyourstylesheet.
CSSMenuDesignerOpenstheCoffeeCupCSSMenuDesigner,whichallowsyoutodesignaCSSmenu.
201
![Page 202: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/202.jpg)
ColorThisbuttonopenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursorispositionedonthepage.
EditDisplayExpandstodisplayprogramdisplayoptions.
ToggleWordWrapSelectthisoptionifyouwouldlikeyourtexttoautomaticallywraptofittheCodeEditorworkspace.
ToggleGutterEnablesthegutter,whichisabartotheleftofthecodewherelinenumbers,bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.
202
![Page 203: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/203.jpg)
ToggleLineNumbersTurnsonlinenumbersinthegutter.
Split‐ScreenPreview(F12)Enablessplit‐screenpreview,whichallowsyoutopreviewyourworkinanInternetExplorerbrowserareabelowtheCodeEditor.
Toviewyourworkinotherbrowsers,usethePreviewtool.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,GoogleChrome,andSafari.
203
![Page 204: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/204.jpg)
TestinBrowserExpandstodisplaybrowser‐testingoptions.
TestWithDefaultBrowser(Ctrl+F9)OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.ThisisdoneoutsideoftheHTMLEditor.
TestwithFavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.
AdditionalBrowsersExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.
Toconfigureadditionalbrowsers,gotoTools>Preferences>BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.
204
![Page 205: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/205.jpg)
Split‐ScreenPreview(F12)Enablessplit‐screenpreview,whichallowsyoutopreviewyourworkinabrowserareabelowtheCodeEditor.
Toviewyourworkinotherbrowsers,usethePreviewtool.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,GoogleChrome,andSafari.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
205
![Page 206: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/206.jpg)
AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
206
![Page 207: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/207.jpg)
SpecialFeaturesintheCodeEditorThereareafewspecialfeaturesintheCodeEditorthathelpmakeiteasiertocodeyourdocumentsbyhand.
CodeCompletionTypingatag,tagattribute,orattributevalueopensalistof(X)HTMLentitiesthatmatchthelettersyouhavetyped.
Youcanuseyourmouseorthearrowkeysonyourkeyboardtoselectthetag,tagattribute,orattributevalueyouwanttouse,anditwillbeinsertedintoyourdocument.Selectingataginsertstheopeningandclosingtags,whichpreventsunclosedtags.
Tocustomizewhich(X)HTMLentitiesappearintheCodeCompletionlist,gotoEdit>EditXHTMLTags.ThisopenstheEditXHTMLTagswindow,whichallowsyoutoadd,modify,ordelete(X)HTMLtags,attributes,andattributevalues.Foradetailedtutorialthatoutlinesthis
process,readCustomizingCodeCompletionTags.
SyntaxHighlightingWhenyoulookattheCodeEditorworkspace,youwillnoticethatdifferentpartsofthecodearedifferentcolors.
207
![Page 208: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/208.jpg)
Thisiscalledsyntaxhighlighting,anditisausefulwaytotelldifferenttags,tagattributes,andtagvaluesapart.Forexample,itmaybedifficultortime‐consumingtotrytofindeveryinstanceofan<img>tag,butifyousetyourhighlightingoptionstomakeall<img>tagsred,thenallyou’dhavetodoislookforthecolorred.
Tocustomizeyoursyntaxhighlightingoptions,gotoTools>DocumentDisplayProperties.Selectthelanguagewhosesyntaxhighlightingcolorschemeyouwanttochange,andthenclicktheModifyHighlightingbutton.ThisopenstheHighlightingOptions
window,whichallowsyoutocreateormodifythehighlightingcolorscheme.
208
![Page 209: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/209.jpg)
VisualEditorTheVisualEditorallowsyoutoworkdirectlywiththeelementsinyourpageinaWYSIWYG(WhatYouSeeIsWhatYouGet)environment.
Toworkwithyourpageelements,simplyselectthemwithyourmouseanddraganddropthemtothedesiredlocation.(YoumayneedtousetheMoveandUnlockObjecticontoenablethisfeature.)Therearealsoanumberofusefultoolstohelpyouworkwithyourpagemorequicklyandefficiently.TheycanbeaccessedintheMenuBarorusingeitherofthefollowingoptions:
• Visual Editor toolbar • Code and Visual Editor right-click menu • Working with tables in the Visual Editor
IfyoucannotseetheVisualEditor,itmaynotbeenabled.Toturniton,gotoTools>Preferences>GeneraltabandunselecttheHideVisualEditortabcheckbox.
209
![Page 210: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/210.jpg)
VisualEditorToolbarTheVisualEditortoolbarislocatedacrossthetopoftheVisualEditorandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
InsertandMoveTextInsertsthewords“YourTextHere”intotheVisualEditor.Youcanreplacethismessagewithyourowntext.
EditElementSourceOpenstheEditElementSourcewindow,whichallowsyoutoworkwiththeHTMLfortheselectedobject.
210
![Page 211: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/211.jpg)
MoveandUnlockObjectUnlockstheobjectfromitscurrentposition,whichallowsyoutodraganddropittothedesiredlocationonthepage.
Image(Ctrl+M)OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
LinksExpandstodisplaylinkoptions.
Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallows
youtoinsertalinkandanyassociatedattributes.
E‐mailLink…(Ctrl+E)OpenstheInsertE‐mailLinkwindow,whichallowsyoutoinsertane‐maillinkandanyassociatedattributes.
FontsExpandstodisplayfontoptions.
FontWizard…OpenstheFontWizard,whichallowsyoutochoosetheattributesforafonttag.
FontSizesSelectfromfontsizes1(8pt)to7(36pt)oradjustthesizeupordownoneincrement.
FontColor…OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.
211
![Page 212: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/212.jpg)
FontEffectsAllowsyoutoapplyoneoftheprovidedeffectstoyourfont.
HeaderSizesSelectaheadersize(1‐6)anditwillappliedtotheselectedtextoranytexttypedafterthecurrentcursorposition.
212
![Page 213: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/213.jpg)
Paragraph(Ctrl+Enter)Createsanewparagraph.
BreakInsertsalinebreak.
Bold(Ctrl+B)Boldstheselectedtextoranytexttypedafterthecurrentcursorposition.
Italic(Ctrl+I)Italicizestheselectedtextoranytexttypedafterthecurrentcursorposition.
Underline(Ctrl+U)Underlinestheselectedtextoranytexttypedafterthecurrentcursorposition.
LeftLeft‐alignstheselectedtextoranytexttypedafterthecurrentcursorposition.
CenterCenterstheselectedtextoranytexttypedafterthecurrentcursorposition.
RightRight‐alignstheselectedtextoranytexttypedafterthecurrentcursorposition.
JustifyJustifiestheselectedtextoranytexttypedafterthecurrentcursorposition.Thisalignsyourtextsoeachlineisthesamelength.
HorizontalRuleOpenstheInsertHorizontalRulewindow,whichallowsyoutodesignahorizontalruleandaddittoyourpage.
ListOpenstheInsertListwindow,whichallowsyoutoinsertorimportoneoffourdifferentkindsoflists:bulleted,numbered,definition,orunformatted.
213
![Page 214: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/214.jpg)
VisualTableElementsExpandstodisplayvisualtableoptions.
TableDesigner…OpenstheTableDesigner,whichallowsyoutocreateatable.Atablecanbeusedtodisplayinformationorasyourpagelayout.
QuickTable…OpenstheQuickTablewindow,whichallowsyoutodesignatable.
214
![Page 215: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/215.jpg)
Dragyourmouseoverthesquarestopickhowmanycolumnsandrowsareinyourtable.Clickwhenyouhavespecifiedthedesireddimensions,andthecodewillbeinsertedonyourpage.
ToggleInvisibleGridLinesDisplaystablebordersiftheyaresetto0.ThisispurelyfordesignpurposesandwillnotberenderedinaWebbrowser.
InsertColumnInsertsacolumnintothetable.
InsertRowInsertsarowintothetable.
DeleteColumnDeletesthecolumnwherethecursorispositionedortheselectedcolumn(s).
DeleteRowDeletestherowwherethecursorispositionedortheselectedrow(s).
MergeCellsThisoptionisonlyavailableintheTableDesigner.
SplitCellSplitsthecellinhalf.
PreviewExpandstodisplaypreviewoptions.
215
![Page 216: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/216.jpg)
TestWithDefaultBrowser(Ctrl+F9)OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.ThisisdoneoutsideoftheHTMLEditor.
TestwithFavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtabinthePreferenceswindow.
AdditionalBrowsersExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.
Toconfigureadditionalbrowsers,gotoTools>Preferences>BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
216
![Page 217: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/217.jpg)
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
ColorThisbuttonisonlyenabledintheCodeEditor.
217
![Page 218: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/218.jpg)
CodeandVisualEditorRight‐ClickMenuTheright‐clickmenuallowsyoutoaccesscommonlyusedfeaturesintheCodeandVisualeditors.
Cut(Ctrl+X)RemovestheselectedobjectortextfromthescreenandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.
Copy(Ctrl+C)MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindowsclipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.
Paste(Ctrl+V)TakestheobjectstoredontheWindowsclipboardandplacesitonthepage.Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesameobjectasmanytimesasyouneed.
SelectAll(Ctrl+A)Selectseverythingintheworkspace.Thisishelpfulifyouwanttocopy,cut,ordeletemanyobjectsatatimeinsteadofhavingtoselectthemallindividually.
218
![Page 219: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/219.jpg)
MoveText(VisualEditorOnly)Movesanyselectedtextintoitsowntextbox,whichallowsyoutodraganddropittoanotherlocation.
MoveandUnlockObject(VisualEditorOnly)Unlockstheobjectfromitscurrentposition,whichallowsyoutodraganddropittothedesiredlocationonthepage.
EditElementSource…(VisualEditorOnly)OpenstheEditElementSourcewindow,whichallowsyoutoworkwiththeHTMLfortheselectedobject.
Find…(Ctrl+F)OpenstheExtendedFindwindow,whichallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm.
Replace…(Ctrl+H)OpenstheExtendedFindandReplacewindow,whichallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm,andthenreplaceitwithtextofyourchoosing.
Undo(Ctrl+Z)Undoesthelastactionyouhaveperformed.
219
![Page 220: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/220.jpg)
Redo(Ctrl+Q)Redoesthelastaction.TheRedofunctioncomesinhandywhenyouaccidentallyusetheUndofunctionorchangeyourmindaboutundoinganaction.
Save(Ctrl+S)Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
SaveAs…(Shift+Ctrl+S)Savesthecurrentfileunderadifferentname.Thiswillnotoverwritethefileyouarecurrentlyworkingon;instead,itwillcreateanewfilethatyoucangiveadifferentname.
SaveSelectedTextasSnippet…OpenstheSaveSnippetwindow,whichallowsyoutonameandsavethehighlightedtextasasnippet.
AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCodeSnippetstab.Foradetailedtutorialaboutworkingwithsnippets,readHowtoUseSnippets.
TestinBrowserExpandstodisplaybrowser‐testingoptions.
220
![Page 221: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/221.jpg)
TestWithDefaultBrowser(Ctrl+F9)OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.ThisisdoneoutsideoftheHTMLEditor.
TestwithFavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.
AdditionalBrowsersExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.
Toconfigureadditionalbrowsers,gotoTools>Preferences>BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
221
![Page 222: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/222.jpg)
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
FontExpandstodisplayfontoptions.
FontWizard…OpenstheFontWizard,whichallowsyoutochoosetheattributesforafonttag.
FontSizesSelectfromfontsizes1(8pt)to7(36pt)oradjustthesizeupordownoneincrement.
222
![Page 223: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/223.jpg)
FontColor…OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.
FontEffectsAllowsyoutoapplyoneoftheprovidedeffectstoyourfont.
HeaderSizesSelectaheadertag(h1‐h6),anditwillbeinsertedintoyourdocumentorappliedtoanyselectedtext.
223
![Page 224: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/224.jpg)
LinksExpandstodisplaylinkoptions.
Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallowsyoutoinsertalinkandanyassociatedattributes.
E‐mailLink…(Ctrl+E)OpenstheInsertE‐mailLinkwindow,whichallowsyoutoinsertane‐maillinkandanyassociatedattributes.
Image…OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.
YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
Color…ThisbuttonopenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursorispositionedonthepage.
224
![Page 225: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/225.jpg)
SpellingandThesaurusExpandstodisplayspellingandthesaurusoptions.
CheckSpelling…Checksthespellinginyourdocument.Iftherearenospellingerrors,youwillseeawindowthatsays,“Thespellingcheckiscomplete.”
225
![Page 226: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/226.jpg)
Iftherearemisspelledwords,theSpellingwindowopens,allowingyoutoreviewandchangethespellingerrors,andtoadjustspellingoptions.
SpellCheckerOptions…OpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.
AutoSpellCheckPutsaredunderlineunderanymisspelledwords.
Thesaurus…OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselectedword.
CloseClosesthecurrentfileyouhaveopen,butleavestheprogramopen.
226
![Page 227: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/227.jpg)
WorkingWithTablesintheVisualEditorWhenyouselectatableintheVisualEditor,apaneappearsatthebottomofthescreendisplayingoptionsformodifyingyourtable.
YoucanalsodesignatableusingtheTableDesigner.Toaccessit,gotoInsert>TableDesigner.
HorizontalandVerticalAlignmentSelectthehorizontalandverticalalignmentforthetextintheselectedcell.
WidthandHeightEnterthewidthandheightinpixelsoftheselectedcell.
NoWrapSelectthischeckboxifyoudonotwantthetextintheselectedcelltoautomaticallywraptofitthewidthofthecell.
BGColorOpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.
227
![Page 228: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/228.jpg)
NoBGColorRemovesthebackgroundcolor.
BorderColorOpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursorispositionedonthepage.
NoBorderColorRemovesthebordercolor.
228
![Page 229: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/229.jpg)
PreviewTabThePreviewtabisabuilt‐inbrowser(InternetExplorer)youcanusetopreviewyourWebsite.
Toconfigureadditionalbrowsers,gotoTools>Preferences>BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.
SincethePreviewtabispoweredbyInternetExplorer,itsright‐clickmenuisthesameastheright‐clickmenuforthebrowser.Formoreinformationabouthowtousetheoptionsintheright‐clickmenu,consultInternetExplorer’sdocumentation
(http://windowshelp.microsoft.com/Windows/en‐US/internet‐explorer.mspx).
• Preview toolbar
229
![Page 230: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/230.jpg)
PreviewToolbarThePreviewtoolbarislocatedacrossthetopofthePreviewtabandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
BackTakesyoutothepreviouslyviewedpage.
ForwardTakesyoutothepageyounavigatedbackfrom.
StopStopsthepagefromloading.
RefreshReloadsthecontentofthepage.
230
![Page 231: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/231.jpg)
TestinBrowserExpandstodisplaybrowser‐testingoptions.
TestWithDefaultBrowser(Ctrl+F9)OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.ThisisdoneoutsideoftheHTMLEditor.
TestwithFavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.
AdditionalBrowsersExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.
Toconfigureadditionalbrowsers,gotoTools>Preferences>BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.
231
![Page 232: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/232.jpg)
StatusbarTheStatusbarislocatedatthebottomoftheprogram,andallowsyoutoswitchbetweenopendocumentsandviewbasicinformationabouttheopenfile.
FileTabsToswitchbetweenopendocuments,clickthetabwiththefilenameofthedesireddocument.
Tocloseafilefromoneofthesetabs,right‐clickit.Thisopensaright‐clickmenuthatallowsyoutoclosethetab.
FilePathHoldingyourmouseoverafileintheMyComputertabdisplaysthefullfilepathintheStatusbar.
Line,Column,andSaveStatusTheright‐handsideoftheStatusbardisplaysthelineandcolumnwherethecursoriscurrentlypositioned.Italsoletsyouknowifyourfileissavedorunsaved.
232
![Page 233: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/233.jpg)
TagInformationWhenyourcursorispositionedwithinan(X)HTMLtagorCSSproperty,alistofvalidattributeswillappearintheStatusbar.
Toaccesstheseattributes,starttypingtheoneyouwanttouse,ortypeaspace.ThisopenstheCodeCompletionlist,whichcontainstheavailableattributesyoucanuse.
233
![Page 234: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/234.jpg)
ResourceBrowserTheResourcebrowserislocatedontheleft‐handsideoftheprogram.ItisusedtoaccessWebsiteProjects,codesnippets,tags,andspecialcharacters.Youcanexpandorcollapseitusingthearrowiconatthetop.
• My Websites tab
Local Disk tab Local Disk right-
click menu Server tab
Server right-click menu
My Websites toolbar • My Computer tab
My Computer toolbar My Computer right-click
menu • Code Snippets tab
Code Snippets toolbar Code Snippets and Tags
right-click menu • Tags tab
Tags toolbar Code Snippets and Tags
right-click menu • Characters tab
234
![Page 235: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/235.jpg)
MyWebsitesTabTheMyWebsitestabiswhereyouorganizeandworkwithyourWebsiteProjects.
FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.
• Local Disk tab Local Disk right-click menu
• Server tab Server right-click menu
• My Websites toolbar
235
![Page 236: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/236.jpg)
LocalDiskTabTheLocalDisktabiswhereyouworkwiththeWebsiteProjectfilessavedonyourcomputer.YoucanviewthestructureofyourWebsiteProjectandeditthefilesusingtheMyWebsitestoolbarortheLocalDiskright‐clickmenu.
TochangewhichtypesoffilesdisplayintheLocalDisktab,selectthedesiredfiletypefromthedrop‐downlistatthebottom.
236
![Page 237: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/237.jpg)
AnotherfeaturethatappearsatthebottomofthetabisanimagepreviewthatappearswhenanimageisselectedintheLocalDisktab.
• Local Disk right-click menu • My Websites toolbar
237
![Page 238: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/238.jpg)
LocalDiskRight‐ClickMenuRight‐clickingtheLocalDisktabopensamenuthatallowsyoutoworkwiththeWebsiteProjectortheselectedfile.
InsertasLinkIntoCurrentDocumentInsertstheselectedfileintothecurrentdocumentasarelativelink.
Youcanalsoaddalinktoadocumentbydraggingthedocumentfromthe
MyWebsitesorMyComputertabintotheCodeorVisualeditor.Thisopensawindowaskingifyouwanttoinsertthedocumentorpageasalinkorifyouwanttoopenitinanothertabforediting.
InsertImageIntoCurrentDocumentInsertstheselectedimageintothecurrentdocumentwithan<img>tag.
YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
OpeninAssociatedApplicationOpenstheselectedfileintheassociatedapplication.Forinstance,ifyouselectedaPDF,itwouldopeninAdobeAcrobat.
EditOpenstheselectedfileinanewtab.
RenameAllowsyoutorenametheselectedfile.
Delete…Deletestheselectedfile.
238
![Page 239: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/239.jpg)
CreateFolderCreatesanewfolder.
MoveFile/FoldertoWebsiteProjectAllowsyoutomovetheselectedfiletoadifferentlocationwithintheWebsiteProject.
UploadSelectedFilesUploadstheselectedfiletotheserverspecifiedintheWebsiteProjectSettingswindow.
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.
FileProperties…OpenstheWindowspropertieswindowfortheselectedfile,whichprovidesbasicinformationaboutthefile.
239
![Page 240: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/240.jpg)
240
![Page 241: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/241.jpg)
ServerTabTheServertabiswhereyouworkwiththeWebsiteProjectfilessavedonyourserver.YoucanviewthestructureofyourWebsiteProjectandeditthefilesusingtheMyWebsitestoolbarortheServerright‐clickmenu.
Additionally,youcanclicktheShowFTPLoglinkatthebottomtoviewalogofyourFTPactivityintheCodeEditor.Thisinformationcanbeusefulifyouexperienceissueswhenconnectingoruploading.
• Server right-click menu • My Websites toolbar
241
![Page 242: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/242.jpg)
ServerRight‐ClickMenuRight‐clickingafileintheServertabopensamenuthatallowsyoutoworkwiththeselectedfile.
EditOpenstheselectedfileinanewtab.Savingthefilesavesitdirectlytotheserver.
Downloadto[WebsiteProjectPath]DownloadstheselectedfiletothemainfolderinyourWebsiteProject.Onceyouhavedownloadedit,youcanmoveittothedesiredfolder.
RenameAllowsyoutorenametheselectedfile.
Delete…Deletestheselectedfile.
CreateFolderCreatesanewfolder.
FileProperties…Opensawindowthatprovidesbasicinformationaboutthefile,includingitsname,size,anddateitwasfirstcreated.
242
![Page 243: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/243.jpg)
MyWebsitesToolbarTheMyWebsitestoolbarislocatedacrossthetopoftheMyWebsitestabandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
WebsiteProjectsExpandstodisplayWebsiteProjectoptions.
NewWebsiteProject…OpenstheWebsiteProjectSettingswindow,whichletsyoucreateablankWebsiteProjectortocreateaWebsiteProjectfromexistingfiles.Youcanalsoenteradditionalinformation,suchasyourserversettings,andselectyourfileuploadoptions.
OpenWebsiteProject…AllowsyoutoopenandworkwithapreviouslycreatedWebsiteProject.
CloseWebsiteProjectClosesthecurrentWebsiteProjectyouhaveopen,butleavestheprogramopen.
AllWebsiteProjectsOpensalistofalltheWebsiteProjectsyouhavecreated,whichallowsyoutoaccesstheseWebsiteProjectsmorequickly.
243
![Page 244: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/244.jpg)
RemoveWebsiteProjectRemovestheselectedWebsiteProjectfromtheHTMLEditor.Thefilewillnotbedeletedfromyourcomputer.
WebsiteProjectSettings…OpenstheWebsiteProjectSettingswindow,whichallowsyoutoeditthesettingsforthecurrentWebsiteProject.
ToolsExpandstodisplayuploadanddependenciesoptions.
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.
UploadSelectedFilesUploadsthecurrentlyselectedWebsiteProjectfilestoyourserver.Thefilestructureispreservedduringtheupload.Forexample,ifyouuploadanimagecalledimage.pngthatislocatedinafoldercalledimages,image.pngwillbeuploadedintotheimagesfolderontheserver.Ifthereisnoimagesfolderontheserver,itwillbecreatedduringtheuploadprocess.YouwillneedtosetupaserverprofileintheWebsiteProjectSettingswindowinordertouploadyourfiles.
CheckWebsiteProjectDependenciesDisplaystheDocumentDependenciestabatthebottomoftheprogram.
244
![Page 245: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/245.jpg)
MyComputerTabTheMyComputertaballowsyoutoviewandeditfilesonyourcomputer,addthemtoyourWebsiteProjectorWorkingfolder,andeditthemintheEditor.Itisdividedintotwosections.Thetopsectionallowsyoutobrowsefilesandfoldersonyourcomputer.YoucandosobyclickingthroughfoldersandusingtheoptionsintheMyComputertoolbar.Selectingafolderopensitscontentsinthebottomsection.YoucanworkwiththesefilesusingtheMyComputerright‐clickmenu.
TochangewhichtypesoffilesdisplayintheMyComputertab,selectthedesiredfiletypefromthedrop‐downlistatthebottom.
245
![Page 246: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/246.jpg)
• My Computer toolbar • My Computer right-click menu
246
![Page 247: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/247.jpg)
MyComputerToolbarTheMyComputertoolbarislocatedacrossthetopoftheMyComputertabandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeaturesintheMyComputertab.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
DesktopOpenstheDesktopinthefilebrowser.
UpOneFolderMovesuponefolderfromtheselectedfolderinthefilebrowser.
RefreshRefreshesthecontentintheMyComputertab.Ifyouhaverecentlyaddedafileanditdoesnotappear,tryrefreshingthisarea.
GotoWorkingFolderOpensyourWorkingfolderinthefilebrowser.IfyouareusingaWebsiteProject,bydefault,theWorkingfolderisthesameastheWebsiteProjectsfolder.Otherwise,theWorkingfolderiswhereyousaveyourWebsitefiles.
247
![Page 248: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/248.jpg)
MyComputerRight‐ClickMenuRight‐clickingafileinthebottomsectionoftheMyComputertabopensamenuthatallowsyoutoworkwiththeselectedfile.
InsertasLinkIntoCurrentDocumentInsertstheselectedfileintothecurrentdocumentasarelativelink.
YoucanalsoaddalinktoadocumentbydraggingthedocumentfromtheMyWebsites
orMyComputertabintotheCodeorVisualeditor.Thisopensawindowaskingifyouwanttoinsertthedocumentorpageasalinkorifyouwanttoopenitinanothertabforediting.
InsertImageIntoCurrentDocumentInsertstheselectedimageintothecurrentdocumentwithan<img>tag.Theprogramusesarelativelink,soifthefileisnotlocatedinyourWebsiteProjectorWorkingfolder,itmaynotdisplaycorrectlyonyourWebsite.
YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
InsertSoundIntoCurrentDocumentInsertstheselectedsoundintothecurrentdocumentwitha<bgsound>tag.Theprogramusesarelativelink,soifthefileisnotlocatedinyourWebsiteProjectorWorkingfolder,itmaynotdisplaycorrectlyonyourWebsite.
CopyFiletoProjectExpandstodisplayalistoffoldersinthecurrentlyopenWebsiteProject.
248
![Page 249: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/249.jpg)
Selectthefolderwhereyouwouldlikethefiletobestored,andacopyofthefilewillbecreatedinthatfolder.
OpeninEditorOpenstheselectedfileinanewtabintheEditor.
ConvertImageFormat…Allowsyoutoconverttheformatoftheimage.Werecommendusing.gif,.jpg,or.pngimagefiles.
OpeninAssociatedApplicationOpenstheselectedfileintheassociatedapplication.Forinstance,ifyouselectedaPDF,itwouldopeninAdobeAcrobat.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
249
![Page 250: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/250.jpg)
AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
CopyMakesacopyoftheselectedfileandstoresthatcopyontheWindowsclipboard.Thefileisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.
CutRemovestheselectedfileandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.
DeleteRemovestheselectedfile(s).
PasteTakesthefilestoredontheWindowsclipboardandplacesitinthefolder.Pastingafiledoesnotremoveitfromtheclipboard,soyoucanpastethesamefileasmanytimesasyouneed.Inorderforthisfunctiontowork,youmustclickinanareaoutsideofanyotherfiles.
MoveOpensawindowthatallowsyoutomovethefiletoadifferentlocationyourcomputer.
250
![Page 251: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/251.jpg)
RenameAllowsyoutorenametheselectedfile.
CreateFolderCreatesanewfolder.
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
251
![Page 252: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/252.jpg)
CodeSnippetsTabTheCodeSnippetstabcontainsthepredefinedcodesnippetsthatcomewiththeprogram,aswellasanysnippetsyoumayhaveadded.
Toaddasnippettoyourpage,double‐clickitordraganddropitintotheCodeEditor.
• Code Snippets toolbar • Code Snippets and Tags right-click menu
252
![Page 253: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/253.jpg)
CodeSnippetsToolbarTheCodeSnippetstoolbarcontainsbuttonsthatyoucanclicktoperformcertaincommonlyusedactionsquickly.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
RefreshRefreshesthecontentintheCodeSnippetstab.Ifyouhaverecentlyaddedasnippetanditdoesnotappear,tryrefreshingthisarea.
InsertItemIntoCurrentDocumentInsertstheselectedcodesnippetintotheCodeEditor.Youcanalsoaddasnippetbydouble‐clickingitordragginganddroppingitintotheCodeEditor.
EditSnippetOpensthecodesnippetinitsowntabintheHTMLEditorworkspace,whichallowsyoutoeditit.
NewSnippetOpensanewblanktabintheHTMLEditorworkspace,whichallowsyoutoenterthecodeforanewsnippet.
253
![Page 254: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/254.jpg)
TagsTabTheTagstabcontainslistsofthemostcommonlyusedHTML,PHP,andCSStags.Toaddatagtoyourpage,double‐clickitordraganddropitintotheCodeEditor.
Tocustomizewhich(X)HTMLentitiesappearintheCodeCompletionlist,gotoEdit>EditXHTMLTags.ThisopenstheEditXHTMLTagswindow,whichallowsyoutoadd,modify,ordelete(X)HTMLtags,
attributes,andattributevalues.Foradetailedtutorialthatoutlinesthisprocess,readCustomizingCodeCompletionTags.
• Tags toolbar • Code Snippets and Tags right-click menu
254
![Page 255: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/255.jpg)
TagsToolbarTheTagstoolbarallowsyoutoselectwhichgroupoftagsisdisplayed.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
HTMLTagsDisplaysalistofthemostcommonlyusedHTMLtags.
PHPTagsDisplaysalistofthemostcommonlyusedPHPtags.
CSSTagsDisplaysalistofthemostcommonlyusedCSStags.
255
![Page 256: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/256.jpg)
CodeSnippetsandTagsRight‐ClickMenuRight‐clickingtheCodeSnippetsorTagstabopensamenuthatallowsyoutoworkwiththeselectedtagorcodesnippet.
OnlytheInsertItemIntoCurrentDocumentoptionworksinbothtabs.
NewSnippet(CodeSnippetTabOnly)OpensanewblanktabintheHTMLEditorworkspace,whichallowsyoutoenterthecodeforanewsnippet.
DeleteSnippet(CodeSnippetTabOnly)Deletestheselectedsnippet.
InsertItemIntoCurrentDocumentInsertstheselectedtagorcodesnippetintotheCodeEditor.
Youcanalsoaddatagtoyourpagebydouble‐clickingitordragginganddroppingitintotheCodeEditor.
OpeninNewWindow(CodeSnippetTabOnly)OpensthecodesnippetinitsowntabintheHTMLEditorworkspace,whichallowsyoutovieworeditit.
256
![Page 257: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/257.jpg)
CharactersTabTheCharacterstabdisplaysalistofHTMLentitiesforcommonlyusedspecialcharacters.
ToaddanHTMLentitytoyourpage,double‐clickitordraganddropitintotheCodeEditor.
257
![Page 258: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/258.jpg)
WorkingWithWebsiteProjectsWecannotstressenoughhowimportantWebsiteProjectsare.Ifusedcorrectly,thistoolcanmakebrokenlinksathingofthepast.You’llneverseethosepeskyredX’sinsteadofyourimagesagain.YourWebsite’sstructurewillbeorganizedandintuitive.You’llruletheworld!Okay,youwon’truletheworld,butyouwillsaveyourselfatonofheadaches.So,howexactlydoesthisawesometoolwork?Thisquestionactuallyhasareallylengthyanswer.We’llgooverthebasicshere,butyoushouldalsocheckoutavaluableguidebuiltrightintotheHTMLEditor.GotoMyWebsites>AllWebsiteProjects>WhatisaWebsiteProject.ThisopensacomprehensivedocumentthatwillanswerallyourquestionsaboutusingWebsiteProjects.Betteryet,itactuallyisaWebsiteProject,soyou’llgettoseefirsthandhowtheywork.Okay,let’sdiverightin!
Step1:CreatingaWebsiteProjectTocreateanewWebsiteProject,useoneoftheseoptions:
• Go to My Websites > New Website Project • In the My Websites tab, click the Website Projects icon and select New Website
Project ThisopenstheWebsiteProjectSettingswindow,whichallowsyoutoconfiguresettingsforyourWebsiteProject.
258
![Page 259: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/259.jpg)
Here’swhatgoesintheprovidedfields:
WebsiteProjectNameThisisthenameofyourWebsiteProject.Sinceit’sjustapersonalreminder,youcannameitanythingyouwant.Ourrecommendation,justtokeepthingssimple,istogiveyourWebsiteProjectthesamenameasyourWebsite.
WebsiteProjectLocationThisisthelocationwhereyourWebsiteProjectfileswillbesaved.UsetheBrowseicontobrowseyourcomputerforthedesiredlocation.
259
![Page 260: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/260.jpg)
IfyouwanttocreateaWebsiteProjectusingpreexistingfiles,selectthefolderthatcontainsthefilesyouwanttouse.Ifyouarestartingfromscratch,youwillneedtocreateablankfolderwhereyourWebsiteProjectfileswillbestored.Todothis,browseyourcomputerfortheplacewhereyouwouldliketostorethisfolder,andthenclickCreateFolder.Givethefolderaname,makesureitisselected,andthenclickOK.
ServerThisistheserverwhereyourWebsitefileswillbestored.YoucanselectoneoftheserversyouhavealreadydefinedordefineoneusingthefieldsintheServerConfigurationwindow.
260
![Page 261: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/261.jpg)
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.
ConfigureServersThisopenstheServerConfigurationwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
RemoteRootFolderThisistherootfolderwhereyourWebsitefilesarestoredonyourserver.Commonnamesincludewww,public_html,orweb.Ifyouarenotsureofthisinformation,contactyourhostingprovider.
ServerURLThisistheTCP/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
CheckDependenciesBeforeUploadingFilesThischecksyourdocumentdependenciesbeforeuploadingyourfilestoyourservertomakesuretheyarereferencedcorrectly.WebsiteProjectdependenciesarelinksandexternalfiles,suchasstylesheets,images,etc.—basicallyanythingthatyourHTMLfilelinksto.Ifoneormoreofyourdocumentdependenciesaren’treferencedcorrectly,youwillreceiveinformationabouttheincorrectlyreferenceddependency.
261
![Page 262: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/262.jpg)
IfDependenciesAreMissingFromLocalSystem,CancelFileUploadCheckingthisboxcancelsthefileuploadifanyofthedocumentdependenciesarenotlocatedintherightplaceinyourWebsiteProject.
WhenUploadingFiles…Youcanchoosetoalwaysuploaddependentfiles(likeimagesandstylesheets),neveruploadthem,orhavetheprogramconfirmwithyoubeforeuploadingthem.Whenyou’redonefillingoutthesefields,clickOK.YournewWebsiteProjectwillappearintheMyWebsitestab.
YoucanalwaysreturntotheWebsiteProjectSettingswindowtomodifythesechangeslaterusingoneoftheseoptions:
• Go to My Websites > Website Project Settings • In the My Websites tab, click the Website Projects icon and Website Project
Settings
262
![Page 263: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/263.jpg)
Step2a:AddingIndividualPagestoYourWebsiteProjectThenextthingwe’llcoverisaddingpagestoyourWebsiteProject.First,createanewpageusingoneofthefollowingoptions:
• Go to File and select New From Quick Start, New Blank Page, or New From Layout
• Click the New Items icon in the Toolbar and select New From Quick Start, New Blank Page, or New From Layout
• Use the keyboard shortcut Ctrl+N to create a new blank page Formoreinformationabouttheseoptions,readCreatingaNewWebpage.
Next,saveyourpageusingoneofthefollowingoptions:
• Go to File > Save • Click the Save Items icon in the Toolbar and select Save • Use the keyboard shortcut Ctrl+S
Thisopensawindowthatallowsyoutochoosethelocationwhereyournewpagewillbesaved.Bydefault,theprogramwillpromptyoutosaveyourpagetotherootfolderofyourWebsiteProject.EnteranameforyourpageandclickOK.
IfthispageisgoingtobeyourWebsitehomepage(frontpage),nameitindex.html.
YourfilewillappearintheMyWebsitestab.
Step2b:AddingThemestoYourWebsiteProjectAnalternativetoaddingindividualpagestoyourWebsiteProjectistostartwithatheme.Athemeincludesthreepages(index.html,about‐us.html,andcontact‐
263
![Page 264: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/264.jpg)
us.html)thatincludetheHTMLandimagesforabasicdesign,whichmeansallthehardworkisdoneforyou.
Formoreinformationaboutthemes,readtheNewFromThemesectionofCreatingaNewWebpage.
Tochooseanewtheme,useoneofthefollowingoptions:
• Go to File > New From Theme • Click the New Items icon in the Toolbar and select New From Theme
ThisopenstheThemeChooserwindow,whichallowsyoutoselectathemeyouwouldliketouseasyourWebsite.
Selectthethemeyouwouldliketouse,andthenclickOK.ThisopensawindowpromptingyoutochoosetheWebsiteProjectwhereyouwouldliketosaveyourtheme.
264
![Page 265: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/265.jpg)
ChooseCurrentProject.ThethemefileswillappearintheMyWebsitestab.
Step3:AddingFolderstoYourWebsiteProjectAnorganized,intuitivestructureisareallyimportantaspectofawell‐designedWebsite.OneofthefirstthingsyoucandotohelporganizeyourWebsitefilesistocreatefoldersforspecificpageelements.TakealookattheWebsiteProjectcreatedfromatheme.SeethosesubfoldersofthemainWebsite—css,images,
265
![Page 266: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/266.jpg)
andjs?Eachofthosefoldersisclearlylabeledwiththenameofthetypeoffileitcontains.Thissystemhelpskeepeverythinginitsownplace.Let’semulatethisstructureinourblankWebsiteProject.(Ofcourse,youcanalsoaddfolderstoaWebsiteProjectcreatedwithatheme.)Tocreateafolder,right‐clickanywhereintheMyWebsitestab.Thisopensaright‐clickmenuthatcontainsoptionsforworkingwithyourWebsiteProject:
SelectCreateFolder.Thiscreatesanewfolder.Bydefault,itwillbenamedNewFolder1,butyoucangiveitanynameyouwant.Forthistutorial,let’scallthisfileimagesanduseittostore—youguessedit—images.
266
![Page 267: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/267.jpg)
Step4:AddingOtherFilestoYourWebsiteProjectNext,let’saddsomeimagestoourimagesfolder.Todothis,switchovertotheMyComputertab.
Usetheareaatthetoptobrowseyourcomputerfortheimageyouwanttoaddtoyourpage.Selectingafolderinthetopareaopensallitsfilesinthebottomarea.Let’stakealookinsidePublicPictures>SamplePictures.
267
![Page 268: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/268.jpg)
Whenyoufindtheimageyouwanttouse—inthiscase,let’sgowithTocoToucan—right‐clickit.Thisopensanotherright‐clickmenuwithoptionsforworkingwiththefilesonyourcomputer.SelectCopyFiletoFolder.ThisexpandstodisplayalistofthefoldersinyourWebsiteProject.
268
![Page 269: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/269.jpg)
Sincethisisanimage,we’lladdittoimages>[Here].ThisopensawindowthatconfirmswhetheryouwouldliketocopythefiletoyourWebsiteproject.
Next,returntoyourWebsiteProjectbyclickingtheMyWebsitestab.Expandtheimagesfolderbyclickingthelittleplussigntotheleftofit.There,you’llseeyournewlyaddedimage.
269
![Page 270: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/270.jpg)
Now,anyonefamiliarwithWebsiteswillknowthatspacesinfilenamesareatotalno‐no.Let’srenamethisimagetosomethingmoreWeb‐friendly.Torenametheimage,rightclickitandselectRename.Nowenteranewnamefortheimage—inthiscase,toco‐toucanshouldworkjustfine.
Step5:LinkingtoFilesandPagesinYourWebsiteProjectNowthatwe’veaddedanimagetoourWebsiteProject,let’saddittoourpage.Todothis,right‐clicktheimageandselectInsertImageIntoCurrentDocument.ThisinsertstheHTMLforanimageintheplacewhereyourcursorwaspositionedintheCodeEditor.Thecodelookslikethis:
<img src="/images/toco-toucan.jpg" width="1024" height="768" alt="" border="0">
Foradetailedtutorialaboutotherwaystoaddanimagetoyourpage,readAddinganImagetoYourPage.
Next,let’screatealinktoanotherpageinyourWebsiteProject.Ofcourse,beforewecandothis,we’llhavetoaddanotherpage.Todothis,usethemethoddescribedinStep2a.Forthistutorial,nameyourpageabout‐us.html.Switchovertoindex.htmlbyclickingtheindex.htmltabintheStatusbaratthebottomoftheprogram.
Next,right‐clickabout‐us.htmlandselectInsertasLinkIntoCurrentDocument.ThisinsertstheHTMLforalinkintheplacewhereyourcursorwaspositionedintheCodeEditor.Thecodelookslikethis:
270
![Page 271: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/271.jpg)
<a href="about-us.html"></a>
Next,let’sentersomelinktext,whichisthetextyouruserwillclicktobetakentoabout‐us.html.Bydefault,linktextisblueandunderlined.Forthistutorial,we’llusethisasthelinktext:Learnmoreaboutus!Yourcodewilllooklikethisnow:
<a href="about-us.html">Learn more about us!</a> Finally,justforthesakeofformatting,let’sputthislinkinsomeparagraphtags.Todothis,useoneofthefollowingoptions:
• Manually enter paragraph tags (<p></p>) around the link HTML • Highlight the link HTML and go to Format > Paragraph • Highlight the link HTML and click the Paragraph icon in the Code Editor
toolbar • Highlight the link HTML and use the keyboard shortcut Ctrl+Enter
Foradetaileddescriptionaboutotherwaysyoucanaddthemanydifferentkindsoflinkstoyourpage,readWorkingWithLinks.
Step7:PreviewingYourWebsiteProjectLet’stakealookathowyourWebpagelooks!Todothis,clicktothePreviewtabatthetopoftheprogram.ThePreviewtabisabuilt‐inWebbrowser(InternetExplorer,tobeexact),soyou’llgetachancetotestyourWebpageinitsnativeenvironment.
271
![Page 272: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/272.jpg)
Okay,admittedlyit’sprobablynottheWebsiteofyourdreams,butit’sastart.Yourimagedisplayscorrectly,andyourlinkpointstoyourAboutUspage.
Foradetailedtutorialaboutthemanydifferentwaysyoucanpreviewyourwork,readPreviewingYourWork.
Step8:UploadingYourWebsiteProjectEventhoughyourWebsiteisn’tquitedoneyet,let’sstillwalkthroughthestepsinvolvedinuploadingit.It’sprettysimple—justclicktheToolsiconatthetopoftheWebsiteProjectstabandselectUploadEntireWebsiteProject.ThisopenstheUploadFilestoServerwindow,whichdisplaysthestatusofyourfileupload.
272
![Page 273: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/273.jpg)
Thiswindowclosesautomaticallyoncetheuploadiscomplete.NowyoucanswitchovertotheServertabandcheckoutyourfilesonyourserver!
You’llnoticethatyourfilestructureisperfectlypreserved,whichmeansallyourlinksandimageswillbereferencedcorrectly.Whatifyoudon’twanttouploadyourentireWebsiteProject?Easy:Justselectthefile(s)youwanttoupload,andthenuseoneoftheseoptions:
• Click the Tools icon and select Upload Selected Files • Right-click the selected file(s) and select Upload Selected Files
ThecoolthingaboutWebsiteProjectsisthatevenwhenyou’reuploadingindividualfiles,yourfilestructurewillstillbepreserved.Andthat’sprettymuchit!Bynow,youshouldhaveaprettygoodideaofhowtouseWebsiteProjects.Ifyouwantanyadditionalinformation,wehighlyrecommendcheckingoutthesampleWebsiteProjectincludedintheHTMLEditor.Toaccessit,gotoMyWebsites>AllWebsiteProjects>WhatisaWebsiteProject.
273
![Page 274: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/274.jpg)
CreatingaNewWebpageTherearefourwaystocreateanewpageintheHTMLEditor:usingtheQuickStartWizard,startingfromscratch,usingalayout,orloadingatemplate.
NewBlankPageThisoptionisbestforpeoplewhowanttojumprightintocodingtheirWebsite.Ifthatsoundslikeyou,here’swhatyougottado:
Step1OpentheHTMLEditorandselectNewBlankPagefromtheWelcomewindow.
IfyoualreadyhavetheEditoropen,useoneofthefollowingoptionsinstead:
Go to File > New Blank Page Click the New Items toolbar icon and elect New Blank Page Use the keyboard shortcut Ctrl+N
Step2AnewblankpagewillopenintheCodeEditor.Bydefault,newpagesincludesomebasicHTMLtohelpgetyoustarted.ThisincludestheDOCTYPE,html,head,title,meta,andbodytags,andanHTMLcommentstatingthatthepagewascreatedwithCoffeeCupHTMLEditor.Andthat’sallthereistoit!Letthecodingbegin.
274
![Page 275: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/275.jpg)
NewFromQuickStartIfyouwanttocustomizeyourpagebeforeyougetstarted,thisisprobablytheoptionforyou.TheQuickStartWizardletsyouspecifysomebasicpageproperties,includingthetitle,DOCTYPE,characterset,metainformation,background,andcolorscheme.Whenyou’redonespecifyingthisinformation,thecorrespondingcodeisautomaticallyaddedtoyourpage.Here’showtogetstartedwiththeQuickStartWizard:
Step1OpentheHTMLEditorandclosetheWelcomewindow.
Step2OpentheQuickStartwindowusingoneoftheseoptions:
• Go to File > New From Quick Start • Click the New Items toolbar icon and select New From Quick Start.
Step3EnterthefollowinginformationintheprovidedfieldsintheQuickStartwindow.
275
![Page 276: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/276.jpg)
PageTitleThetextdisplayedinthebaracrossthetopofaWebbrowserandthatalsoappearsinsearchresults.Agoodpagetitlesuccinctlydescribesthecontentonthepage.Forexample,let’ssayyourWebsiteisnamedMyHimalayanAdventures,andyouuseittoblogyouradventuresclimbingintheHimalayas.IfthisparticularWebpagedescribesyourtripupK2,yourpagetitlecouldbeanyoneofthese:
MyHimalayanAdventures|ConqueringK2MyHimalayanAdventures|MyTripupK2MyHimalayanAdventures|ClimbingK2:WhattheHellWasIThinking?
YoumayhavenoticedthatthenameoftheWebsiteisincludedinallthesetitles,andtherestofthedescriptionisseparatedbythepipecharacter.Thisisn’trequired,butitlooksniceandkeepsthenameofyourWebsitefreshinyourvisitors’minds.
BackgroundImageToselectabackgroundimageforyourpage,enterthefilepathinthisfieldorclicktheBrowseicontobrowseyourcomputerfortheimageyouwishtouse.Toremoveabackgroundimage,clicktheredXicon.Ifyouchoosetouseabackgroundimage,itshouldbecleanandsimple.Flashybackgroundimagescanbedistractingorlookamateurish.TheHTMLEditorautomaticallyrepeatsthebackgroundimagetofitthesizeofthepage,soyourimageshouldlooknaturalwhenrepeated.Whenyoubrowseforabackgroundimage,thedefaultfoldercontainspredefinedbackgroundsthatcomewiththeHTMLEditor.YoucanuseanyoftheseinyourWebsite,orusethemasaguideforwhatyourcustombackgroundimageshouldlooklike.Forthistutorial,we’llbrowseforanimage,openthebeigefolder,andselectbasket.jpg.
ColorsTherearefivecoloroptionsavailable:pagebackground,text,andthreedifferentstatesoflinks:visited,unvisited,andactive.Avisitedlinkisalinkthathasalreadybeenclickedbytheuser,andanunvisitedlinkhasnotbeenclickedbytheuser.Alinkisactivewhileauserisclickingit.Tochangethecolorofanyoftheseelements,clickthecolorswatchnexttoit.Thisopensadrop‐downlistof40basiccolors.
276
![Page 277: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/277.jpg)
Clickwhichevercoloryouwouldliketoapply.Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
Toselectoneofthesecolors,clickthecoloryouwanttouse,andthenadjustthesliderontheright‐handsidetochangethebrightness.
ColorSchemeDrop‐DownListIfyouwouldliketouseapredefinedcolorschemeforthesecoloroptions,youcanselectonefromtheColorSchemedrop‐downlist.
277
![Page 278: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/278.jpg)
Topreviewhowaschemelooks,selectitfromthelist.Youcanalwayscustomizeitorreturntothedefaultbyselecting(Default).Forthistutorial,we’llstickwiththedefaulttheme—whyrocktheboat?
SaveIfyoudochoosetouseoneofthecolorschemes,butdecidetochangeoneormoreoftheoptions,clickthisbuttontosavethesechangestothescheme.Thisoverwritesthedefaultscheme,somakesureyoureallywanttoreplaceitbeforeyousaveoverit!
SaveAs…Ifyoucreateacustomcolorschemeorcustomizeoneoftheexistingthemesanddon’twanttooverwriteit,clickthisbuttontosavethechangesunderanewname.Thisopensawindowthatallowsyoutoenteranameforyournewscheme.
AfteryouclickOK,theschemewillbeavailableundertheColorSchemedrop‐downlist.
DeleteClickthisbuttontodeletetheselectedscheme.Thischangeispermanent,somakesureyoureallywanttodeleteitbeforeyougoaheadandclickthisbutton!
278
![Page 279: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/279.jpg)
Don’tUnderlineLinksCheckthisboxifyouwouldliketoremovetheautomaticunderlinefromyourlinks.Werecommendkeepingtheunderline—it’soneofthemainwaysyourvisitorswillbeabletodistinguishyourlinksfromyournormaltext,sowhymakethingsmoredifficultforthem?
DOCTYPESelectthedesiredDOCTYPEfromthisdrop‐downlist.ADOCTYPEtellstheWebbrowserthetypeandversionofthelanguagethepageiswrittenin.
CharsetSelectyourpreferredcharactersetfromthisdrop‐downlist.AcharactersetisthesetofcharactersavailabletobeusedinyourcodeandonyourWebsite.Forexample,ifyouwanttocreateaWebsiteusingCyrillic,thatwoulduseadifferentcharactersetthanaWebsitethatusedtheLatinalphabet.
MetaDescriptionThisisashortdescriptionofyourWebsitethatsometimesappearsinsearchresults.Itshouldbenolongerthan50words.
MetaKeywordsThesearewordsthatdescribeyourWebpage.Theymusteachbeseparatedbyacommaandaspace.
Step4Whenyou’redoneenteringthisinformation,clickOK.Thecodewillbeinsertedintoyourpageforyou.You’realldonegettingstarted—therestisinyourhands!
NewFromLayoutThisoptionallowsyoutochooseabasiclayouttostartwith.AlayoutcontainstheHTMLforabasicpagestructure.Thisisagoodstartingplaceforpeoplewhowanttostartwithabarebonesstructureandaddadesignfromthere.Here’showtogetstartedwithlayouts:
Step1OpentheHTMLEditorandclosetheWelcomewindow.
Step2OpentheLayoutChooserusingoneoftheseoptions:
• Go to File > New From Layout • Click the New Items toolbar icon and select New From Layout.
279
![Page 280: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/280.jpg)
Step3SelectthedesiredlayoutfromtheLayoutChooser.
YoucanpreviewhowthedifferentlayoutslookinthePreviewarea.(FYI,liquidlayoutsresizeautomaticallytofitthesizeoftheuser’sbrowser,whereasfixedlayoutsalwaysstaythesamesize.)
Step4Whenyoufindalayoutyoulike,clickOK.Thecodewillbeinsertedintoyourpageforyou.Oncethecodeisinserted,youcanreplacethegenerictextwithyourown,tweakelementsofthecode,addimages,andwhateverelseyouneedtocompleteyourWebpage!
NewFromThemeIfyou’reatotalbeginnerandhavenoideawheretostart,thisistheplace.Thisoptionisalsogreatifyouwanttoputtogetheraprofessional‐lookingWebsitewithaminimumofmuss,fuss,andtime.Athemeincludesthreepages(index.html,about‐us.html,andcontact‐us.html)thatincludetheHTMLandimagesforabasicdesign—whichbasicallymeansallthehardworkisdoneforyou!Here’showyougetstartedwiththemes:
Step1OpentheHTMLEditorandselectStartWithaThemefromtheWelcomewindow.
280
![Page 281: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/281.jpg)
IfyoualreadyhavetheEditoropen,opentheThemeChooserusingoneoftheseoptions:
• Go to File > New From Theme • Click the New Items toolbar icon and select New From Theme.
Step2SelectthedesiredthemefromtheThemeChooser.
281
![Page 282: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/282.jpg)
YoucanpreviewhowthedifferentthemeslookinthePreviewarea.
Step3Whenyoufindathemeyoulike,clickOK.Thecodewillbeinsertedintoyourpageforyou.Oncethecodeisinserted,youcanreplacethegenerictextandimageswithyourown,tweakelementsofthecode,anddowhateverelseyougottadotocompleteyourWebpage!
282
![Page 283: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/283.jpg)
AddinganImagetoYourPageTherearetwodifferentmethodsofaddinganimagetoyourpage:UsingtheInsertImagewindowandusingtheResourcebrowser.TheInsertImagewindowisagoodchoiceifyouwanttospecifyimageattributesand/orcreateathumbnailversionoftheimage.TheResourcebrowserisbestifyouwanttoskipallthatstuffandjustaddanimagetoyourpage.
Method1:InsertImageWindowThismethodisagoodchoiceifyouwanttospecifyimageattributesand/orcreateathumbnailversionoftheimage.ThereareafewdifferentwaystoreachtheInsertImagewindow:
• Go to Insert > Image. • Click the Image icon on the Code or Visual Editor toolbar. • Right-click the Code or Visual Editor and select Image… • Use the keyboard shortcut Ctrl+M.
EachoftheseoptionsopenstheInsertImagewindow,whichallowsyoutochooseanimageandspecifyadditionalinformation,likealttext,alignment,border,size,andotherfancystuff,likeaddingalinkorcreatingathumbnail.
283
![Page 284: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/284.jpg)
Here’swhatyoudo:
Step1:LocateYourImageUsethefilebrowseareaontheleft‐handsideofthewindowtolookthroughyourcomputerfortheimageyouwanttouse.Whenyoufindtheimageyouwant,clickitwithyourmouse.Fornow,theimagemaybelocatedanywhereonyourcomputer—you’llgetachancetosaveitinyourWebsiteProjectorWorkingfolderinafewsteps.
Ifthephrases“Workingfolder”and“WebsiteProject”leftyouscratchingyourhead,takesometimetocheckoutthistutorial:WorkingWithWebsiteProjects.
Step2:EnterGeneralInformationNowyoucanusethefieldsundertheGeneraltabtoentersomeadditionalinformationabouttheimage.It’sbynomeansnecessary,butitcanhelpyourpageloadmoreefficientlyandmakeyourpagemoreaccessibletodisabledusers.We’llgothrougheachfieldstepbystep,andyoucandecidewhichyouwanttoinclude.Inthisexample,wehavechosenapictureofalandscapethatwillbefeaturedprominentlyonourpage.
ImageThisiswherethepathtotheimagegoes.Ifyouhaveselectedanimageusingthefilebrowsesectionontheleft‐handsideofthewindow,thepathwillautomatically
284
![Page 285: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/285.jpg)
appearinthisfieldforyou.Ifyoujusthappentoknowthefilepathoffthetopofyourhead,youcanalsoenteritmanually.
AltThisfieldcontainswhat’scalled“alttext,”whichisadescriptionoftheimagethatisdisplayedwhentheimagecannotbeshown.Thisismostcommonlyusedintext‐onlyorspeechbrowsers,whichtheblindusetoaccesstheInternet,butitalsoappearsbeforetheimageloadsifsomeoneissurfingtheWebonaslowconnection.YoushouldalwaysincludedetailedalttextforallprominentorcontextuallyimportantimagesonyourWebpage,otherwiseyouruntheriskofsomeusersnotgettingthefullgistofyourWebpage.Sincetheimageweareusingisimportanttoourpage,we’llusethealttext“Adesertlandscape.”
TitleAtitleisadescriptionoftheimagethatpopsupinatooltipwhentheuserholdstheirmouseovertheimage.Thiscanbeusedtoprovideadditionalinformationabouttheimage.Forthistutorial,we’llusethelocationofthelandscapeandthedatewhenwetookthepictureasourtitle.It’snotnecessaryinformation,butsomeusersmightfinditinteresting,sowhynotincludeit?
AlignSelectthealignmentoftheimagefromthisdrop‐downlist.Theoptionsshouldbeprettyself‐explanatory,butincaseyou’rewonderingaboutthem,youcancheckoutahandyguideatHTMLCodeTutorial(http://www.htmlcodetutorial.com/images/_IMG_ALIGN.html).We’ll
keepitsimpleandselectleftforourimage.
BorderThisisablackborder,measuredinpixels,thatappearsaroundtheimage.Thelargerthenumber,thethickertheborder.Foratypicalborder,werecommendusinganumberbetween1and5.Ourimageisn’tgoingtouseaborder,sowe’llkeepitsetto0.
WidthandHeightThesefieldsdisplaythewidthandheightofyourimage,andtheseattributesareincludedintheHTMLforyourpage.Thisishelpfulbecauseittellsthebrowserhowmuchspacetoallotfortheimage.IfauserisviewingyourWebpageonaslowconnection,thiswillensurethatthetextisformattedproperlyevenbeforetheimageloads.Forthatreason,it’simportanttoincludethesizemeasurements.Ifyoudecideyou’drathernot,justunchecktheIncludesizecheckbox.We’llleaveitcheckedinthisexample.
Youcanalsousethesefieldstoresizeyourimage,butbecarefulifyoudo!Theimageresizefeatureshouldonlybeusedtomakeminor
285
![Page 286: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/286.jpg)
adjustments,sincetheHTMLEditordoesn’tmaintaintheaspectratio.Thismeansthatunlessyouknowtheexactratioofthewidthtotheheight,yourimagewilllikelyendupdistorted.Ifyouneedtomakechangestothesizeofyourimage,saveyourselfaheadacheanduseanimage‐editingprogram.
URLtoLinkToIfyouwouldliketomaketheimageintoaclickablelink,usethisfieldtoentertheURLwhereyouruserwillbetakenwhentheyclicktheimage.IfyouarelinkingtoanexternalWebsite,besuretoincludethefullWebaddress,includingthehttp://wwwbit.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelinkbyclickingthefileicontobrowseyourcomputerforthefileyouwanttolinkto.
Carefulwhereyoulink!Ifthefileyoulinktoisn’tlocatedinyourWorkingfolderoryourWebsiteProject,itmaynotbereferencedcorrectly—meaningthelinkwon’twork.Needmoreinformationabout
workingwithWebsiteProjects?Checkoutthistutorial:WorkingWithWebsiteProjects.
Step3:CreateaThumbnailThisstepistotallyoptional.Thumbnailsareusuallyusedtolinktothelargeroriginalversionoftheimage.Thisgivesyouabitmoredesignfreedom,sinceyoudon’thavetoworkaroundtonsoflargeimages,andusersonslowconnectionswillthankyoufornotincreasingdownloadtimeswithtonsoflargefiles.Ifyou’rejustaddingaregularol’imagetoyourpage,youcanskipthispartandgostraighttoStep4.Butifthissoundsuseful,switchovertotheThumbnailtabandfollowalong!
286
![Page 287: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/287.jpg)
CreateandInsertImageasThumbnailSelectthischeckboxifyouwouldliketousetheimageasathumbnail.
LinktoOriginalImageSelectthischeckboxifyouwouldlikethethumbnailtolinktotheoriginalimage.
ThumbnailFilenamePrefixThisisaprefixthatappearsatthebeginningofthethumbnailfilename.Sincethisfeaturecreatesanew,smallerversionoftheimageyouadded,itneedsanewnametodifferentiateitfromtheoriginal.Thedefaultprefixistn_,butyoucanchangeittowhateveryouwant.
ThumbnailWidthandHeightEnterthewidthandheightofthethumbnailhere.TheHTMLEditormaintainstheaspectratioforthumbnails,whichmeansyourthumbnailwon’tendupdistorted.
ThumbnailFormatandQualityChoosethedesiredimagefileformat(.gifor.jpg)andquality(65‐95).Keepinmindthathigh‐qualityimageslookbetter,butarealsolarger,whichcanmakeforlongerdownloadtimes.Intoday’sdayandage,ahigh‐qualityimageisn’treallygoingtoslowanyonedown,sodon’tfeelguiltyaboutsplurgingandgoingwithaqualityof95.
Step4:AddingYourImagetoYourWorkingFolderorWebsiteProjectWhenyou’redoneenteringalltheadditionalinformation,clickOK.ThisopensawindowthatasksifyouwanttocopyyourimagefiletoyourWebsiteProject.
287
![Page 288: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/288.jpg)
Wecan’tstressenoughhowimportantitistosaveyourimagestoyourWebsiteProjectorWorkingFolder!Ifyoudon’t,theymaynotbeuploadedtoyourserver,whichmeanstheywon’tshowuponyourWebsite.Instead,you’llgetthoseannoyingredX’s—nottomentiona
hugeheadache.
Method2:ResourceBrowserUsingthismethod,youcansimplydraganimagefromtheResourcebrowserontheleft‐handsideofthescreentoyourpage.Here’sthestep‐by‐stepversion:
288
![Page 289: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/289.jpg)
Step1OpentheMyComputertabintheResourcebrowserontheleft‐handsideoftheprogram.
Step2Usetheareaatthetoptobrowseyourcomputerfortheimageyouwanttouse.Selectingafolderinthetopareaopensallitsfilesinthebottomarea.
Step3Whenyouhavefoundtheimageyouwanttoadd,useyourmousetodragittoyourWebpage.ThisopensawindowthatasksifyouwanttocopyyourimagefiletoyourWebsiteProject.
289
![Page 290: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/290.jpg)
Wecan’tstressenoughhowimportantitistosaveyourimagestoyourWebsiteProjectorWorkingFolder!Ifyoudon’t,theymaynotbeuploadedtoyourserver,whichmeanstheywon’tshowuponyour
Website.Instead,you’llgetthoseannoyingredX’s—nottomentionahugeheadache.
Step4Theimagewillnowappearonyourpagewithoutanyspecialformatting.Ifyouneedtoworkwiththealignment,bordersettings,alttext,oranyotherassociatedattributes,switchtotheCodeEditorifyouaren’ttherealready,andtheneditthecodedirectly.
290
![Page 291: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/291.jpg)
HowtoChangetheAppearanceofTextUnlikepeople,notalltextiscreatedequal.Sometextisboldoritalicized.Othertextcanbedifferentcolors,suchasred,blue,ororange.Sometextis
enormous,whereasothertextisdownrighttiny.Ifallthosedifferentformatsdidn’tinspireyoutochangethestyleofthetextonyourpage,nothingwill!ThereareacoupleofdifferentwaystochangetheappearanceofyourtextintheHTMLEditor.Totweakbasicattributes,suchassize,color,andeffectslikebold,italic,andunderline,thereareafewquick’n’easytoolsyoucanuse.OpenuptheFormatmenuandtakealookatthefirsthalfoftheoptions:
Theseoptionsareprettyself‐explanatory.Tousethem,justhighlightthetextyouwanttochange,andthenselecttheattributeyouwanttoapply.YoucanalsoaccesstheseoptionswiththekeyboardshortcutsdisplayedintheFormatmenu,aswellasintheCodeandVisualEditorright‐clickmenuandtoolbar.Tomakemorein‐depthchangestoyourtext,usetheFontWizard.Here’show:
Step1Highlightthetextyouwanttochange.
291
![Page 292: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/292.jpg)
Step2OpentheFontWizardbygoingtoFormat>FontWizard,clickingtheFonticonintheCodeorVisualEditortoolbar,orright‐clickingandselectingFont>FontWizard…
Step3StartworkingwiththeoptionsintheFontWizard!Thistoolallowsyoutochangethetypeface,effects(bold,italic,strikethrough,orunderline),position(normal,subscript,orsuperscript),size,andcolorofthefont.Let’stakeadeeperlookattheseoptions:
FontsSelectthefontyouwanttousefromthislist,andthenapplyittoyourtextusingoneofthethreeAddasFontbuttonstotheright.Whyaretherethreefontboxes?Well,justlikefonts,noteverycomputeriscreatedequal.Yourcomputermighthavesomecrazy‐funky‐freshfontinstalledthat’lllookjustperfectonyourWebsite,butthatsamefontmightnotbeinstalledonsomeoneelse’scomputer.Whenthathappens,theotherperson’sWebbrowser
292
![Page 293: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/293.jpg)
defaultstoadefaulttoagenericfont(usuallyArialorsomethingsimilar).ThiscanmessuptheappearanceofyourWebsite,withwordsrunningoutofboxes,elementsgettingpushedoutofthewayofmaraudingtext,andothersuchchaosthatbasicallymessesupyourentireWebsite.Yikes!YoucanavoidthismessbyusingWeb‐safefonts.Thesearefontsthatareinstalledoneverycomputerbydefault,whichmeansthattheywillalwaysdisplaycorrectlyoneverycomputer.Theyincludesuchtimelessclassicsas:Arial Arial Black Courier New
Times New Roman Comic Sans MS Georgia
Impact Trebuchet MS Verdana
So,ifWeb‐safefontsareso,well,safe,thenwhydoesn'teveryoneusethem?Frankly,becausethey'rekindofboring.Fortunately,theHTMLEditorgivesyouthreechoices.ForFont1,useyourfirst‐choicefont.Goasfunkyandcrazyasyouwant,andifthefonthappenstobeinstalledonyouruser'scomputer,awesome!Ifnot,thebrowsercanjustlookforthesecondfontyouspecified.MakeFont2andFont3Websafe,andyou’llbegolden.Forextrasecurity,youcanalsoselectagenericfont,whichalwaysdisplayscorrectly,fromtheGenericdrop‐downlist.Genericfontsaretotallyno‐frills,butyoucanrestassuredthatthey’llalwayswork,eveninthevery,veryrareinstancewhenaWeb‐safefontmightnot.Byspecifyingmultiplefonts,youcantellthebrowsertofirsttryafancy,non‐Web‐safefont.Thatway,youcanmakesurethatyourWebsitewilllookgoodwhetheryou'reusingacool,customfontorasecure,Web‐safefont.
EffectsSelectfrombold,italic,strikethrough,orunderline.
TextPositionSelectwhetheryourtextwillappearnormallyorasasubscriptorsuperscript.
Size
Selectafontsizefrom1(8pt)to7(36pt).
ColorToselectacolorforyourtext,clickthecolorswatch.Thisopensadrop‐downlistof40basiccolors.
293
![Page 294: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/294.jpg)
Ifyouseeacoloryoulike,clickit.Ifyouwanttoseeevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
Step4Whenyou'redoneformattingyourtextoptions,clickOK.Allthecodewillautomaticallybeaddedtoyourpageforyou!
294
![Page 295: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/295.jpg)
WorkingWithLinksHowimportantarelinks?Wickedimportant—it’snoexaggerationwhenwesaythatwithoutthem,theInternetasweknowitwouldn’texist.Thissectionwillteachyouthebasicsaboutabsoluteandrelativelinks,andthenwalkyouthroughtheprocessofaddinglinksyourpagesintheHTMLEditor.Toskipaheadtothetutorials,usetheselinks:
• Adding a link to your page • Adding an e-mail link to your page • Linking to a downloadable document • Linking to different parts of the same page
Absolutevs.RelativeLinksOneofthemostcommonthingsnewcomerstoHTMLgetconfusedaboutislinkingtootherpagesandsites,especiallywhenabsoluteandrelativepathscomeintoplay.Butworrynot!Creatinglinks—relativeandabsolutealike—isactuallyfairlyeasy.Readon,andbytheendofthisarticle,you'llknowthedifferencebetweenthesetwotypesoflinks,aswellaswhenandhowtousethem.
WhenyoucreatelinksusingtheWebsiteProjectstool,itautomaticallycreatesvalidrelativelinksforyou—onelessthingtothinkabout!Ofcourse,it’sstillimportanttounderstandhowthisallworks,soreadon…
Firstoff,asyoumayormaynotknow,youwouldusethefollowingcodetocreatealinkinHTML:
<a href=”linkhere.html”>Click Me</a> linkhere.htmlwouldbethepageyouwanttolinkto,andClickMewouldbetheblue,underlinedlinkthatthepagedisplays.Intheexampleabove,weusedarelativepath.Youcantellifalinkisrelativeifthepathisn'tafullWebsiteaddress.(AfullWebsiteaddressincludeshttp://www.)Asyoumayhaveguessed,anabsolutepathdoesprovidethefullWebsiteaddress.Hereareafewexamplesofrelativeandabsolutepaths:
RelativePathsindex.html/graphics/image.png/help/articles/how‐do‐i‐set‐up‐a‐webpage.html
295
![Page 296: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/296.jpg)
AbsolutePathshttp://www.mysite.comhttp://www.mysite.com/graphics/image.pnghttp://www.mysite.com/help/articles/how‐do‐i‐set‐up‐a‐webpage.html
Thefirstdifferenceyou'llnoticebetweenthetwodifferenttypesoflinksisthatabsolutepathsalwaysincludethedomainnameoftheWebsite,includinghttp://www.,whereasrelativelinksonlypointtoafileorafilepath.Whenauserclicksarelativelink,thebrowsertakesthemtothatlocationonthecurrentsite.Forthatreason,youcanonlyuserelativelinkswhenlinkingtopagesorfileswithinyoursite,andyoumustuseabsolutelinksifyou'relinkingtoalocationonanotherWebsite.So,whenauserclicksarelativelink,howdoestheirbrowserknowwheretotakethem?Well,itlooksforthelocationofthefilerelativetothepagewherethelinkappears.(That'swherethenamecomesfrom!)Let'sgetbacktoourfirstexample:
<a href=”linkhere.html”>Click Me</a> Thislinkpointstoafilename,withnopathprovided.Thismeansthatlinkhere.htmlislocatedinthesamefolderasthepagewherethislinkappears.IfbothfileswerelocatedintherootdirectoryoftheWebsitehttp://www.website.com,theactualWebsiteaddresstheuserwouldbetakentoishttp://www.website.com/linkhere.html.Ifbothfileswerelocatedinasubfolderoftherootdirectorycalledfiles,theuserwouldbetakentohttp://www.website.com/files/linkhere.html.Howaboutanotherexample?Let'ssayweourhttp://www.website.comdomainhadasubfoldercalledpictures.Insidethepicturesfolderisafilecalledpictures.html.Thefullpathtothispagewouldbehttp://www.website.com/pictures/pictures.html.Stillwithme?Good.Let'ssayinthispictures.htmlfile,wehavealink:
<a href=”morepictures.html”>More Pictures</a> Ifsomeoneclickedthatlink,wheredoyouthinkitwouldtakethem?Ifyousaidhttp://www.website.com/pictures/morepictures.html,you'dberight!Youprobablyknowwhyitwouldtakethemthere:becausebothfilesaresavedinthepicturessubfolder.Now,whatifwewantedtousearelativelinktoshowapageinanotherfolder?Ifyouwanttolinktoafileinasubfolderofthecurrentfolder,providethefilepathtothatfile,likeso:
296
![Page 297: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/297.jpg)
<a href=“/pictures/tahiti-vacation/tahiti.html”>Read about my Tahiti vacation.</a>
Inthisexample,you'retellingthebrowsertolookinthecurrentfolder(pictures)forasubfolder(tahiti‐vacation)thatcontainsthefileyouwanttheusertakento(tahiti.html).Youcanlinktoasmanysubfoldersasyouneedusingthismethod.Whatifyouwanttolinktoafileinafolderabovethecurrentfolder?Youhavetotellthebrowsertomoveuponefolderinyourrelativelinkbyputtingtwoperiodsandaslash(../)infrontofthefilenameorpath:
<a href=”../about.html”>Learn more about my Website.</a>
Whenthebrowsersees../infrontofthefilename,itlooksinthefolderabovethecurrentfolder.Youcanusethisasmanytimesasyouneedto.Youcanalsotellthebrowsertolookinasubfolderofthedirectoryabovethecurrentone.UsingthesameexampleWebsitefromabove,let'ssaywewantedtocreatealinkthatwouldtaketheusertoapagecalledstories.htmllocatedinanotherfoldercalledstories.Thisfolderislocatedintherootdirectory,onefolderupfromthecurrentfolder,pictures.Here'showarelativelinktothisfilewouldlook:
<a href=”../stories/stories.html”>Read Stories</a> Now,let'stalkaboutabsolutepaths.Likewementionedearlier,absolutepathsprovidethecompleteWebsiteaddresswhereyouwanttheusertogo.Anabsolutelinkwouldlooklikethis:
<a href=”http://www.coffeecup.com”>Click here to visit CoffeeCup Software.</a>
YoumustuseabsolutepathswhenlinkingtoanotherWebsite,butyoucanalsouseabsolutepathswithinyourownWebsite.Thispracticeisgenerallyfrownedupon,though.RelativelinksmakeiteasytodothingslikechangeyourdomainnamewithouthavingtogothroughallyourHTMLpages,huntingdownlinksandchangingthenames.Asanaddedbonus,theyforceyoutokeepyoursitestructureneatandorganized,whichisalwaysagoodidea.
297
![Page 298: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/298.jpg)
AddingaLinktoYourPageOpentheInsertLinkwindowusingoneoftheseoptions:
• Go to Insert > Link • Right-click the page and select Links > Link • Click the Links icon in the Code Editor toolbar and select Link • Use the keyboard shortcut Ctrl+L
TheseoptionsopentheInsertLinkwindow,whichallowsyoutoinsertalinkandanyassociatedattributes.
Let’sgooverwhateachofthesefieldsdoes.
LinkTextThetextyouruserwillclick.Bydefault,linktextisblueandunderlined.Intheexampleabove,thelinktextwouldlooklikethisonyourWebpage:
Clickhereforgreatsoftware!
298
![Page 299: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/299.jpg)
URLThisisthelocationwhereyouruserwillbetakenwhentheyclickthelinktext.IfyouarelinkingtoanexternalWebsite,youmustincludethefulllink,includinghttp://andwww,ifapplicable.TheexampleabovelinkstoanexternalWebsite,http://www.coffeecup.com.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelinkbyclickingthefileicontobrowseyourcomputerforthedesiredpage.YoushouldmakesurethefileislocatedinyourWorkingfolderoryourWebsiteProjecttomakesureitisreferencedcorrectly.
FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.
TargetThisistheframeyouwantthelinktoopenin,andisonlynecessaryifyouareusingframesorifyouwanttoopenthelinkinanewwindow.Toopenthelinkinanewwindow,selectNewBrowserWindow(target="_blank").
Foradetailedtutorialaboutusingframes,readHowtoUsetheFrameDesigner.
TitleThisisadescriptionofthelinkthatappearsasatooltipwhenyouruserholdstheirmouseoverthelink.It’stotallyoptional,butitisanicesourceofinformationforyourusers.
ShowStatusbarMessageonMouseoverIfyoucheckthisbox,adescriptionofthelinkwilldisplayintheStatusbaratthebottomoftheWebbrowserscreenwhenyouruserholdstheirmouseoverthelink.ThisoptionisonlyenabledinInternetExplorer,soit’sbesttouseatitleinsteadifyouwanttoprovidethisadditionalinformation.
WebBrowserWindowMessageIfyoudodecidetouseaStatusbarmessage,typeitinthisfield.Whenyou’redonefillingoutallthisinformation,clickOK.Thecodewillautomaticallybeinsertedwhereveryourcursorwaspositionedonyourpage.Youcanmoveitaroundbyselectingitanddraggingittothedesiredlocationonthepage.
299
![Page 300: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/300.jpg)
AddinganE‐mailLinktoYourPageOpentheInsertE‐mailLinkwindowusingoneoftheseoptions:
• Go to Insert > E-mail Link • Right-click the page and select Links > E-mail Link • Click the Links icon in the Code Editor toolbar and select E-mail Link • Use the keyboard shortcut Ctrl+E
TheseoptionsopentheInsertE‐mailLinkwindow,whichallowsyoutoinsertane‐maillinkandanyassociatedattributes.Whenyouruserclicksonthislink,theirdefaulte‐mailclient(Thunderbird,OutlookExpress,etc.)willopenwiththise‐mailaddressintheTo:field
LinkTextThisisthetextyouruserwillclick.Bydefault,linktextisblueandunderlined.Intheexampleabove,thelinktextwouldlooklikethisonyourWebpage:
Clickheretogetintouch.
300
![Page 301: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/301.jpg)
E‐mailAddresstoLinkToThisisthee‐mailaddressthatwillappearintheuser’sdefaulte‐mailclientwhentheyclickthelinktext.SubjectWhatevertextyouenterinthisfieldwillautomaticallyappearintheSubjectfieldinyouruser’se‐mailclient.
ShowStatusbarMessageonMouseoverIfyoucheckthisbox,adescriptionofthelinkwilldisplayintheStatusbaratthebottomoftheWebbrowserscreenwhenyouruserholdstheirmouseoverthelink.ThisoptionisonlyenabledinInternetExplorer,soit’sbesttouseatitleinsteadifyouwanttoprovidethisadditionalinformation.
WebBrowserWindowMessageIfyoudodecidetouseaStatusbarmessage,typeitinthisfield.Whenyou’redonefillingoutallthisinformation,clickOK.Thecodewillautomaticallybeinsertedwhereveryourcursorwaspositionedonyourpage.Youcanmoveitaroundbyselectingitanddraggingittothedesiredlocationonthepage.
LinkingtoaDownloadableDocumentFollowthesestepstoaddalinktoadownloadabledocumentonyourpage.
ThistutorialassumesyouareworkingwithWebsiteProjects.FormoreinformationabouthowtouseWebsiteProjects,readWorkingWithWebsiteProjects.
Step1:LocatingtheFileFirst,gototheMyComputertabandselectthefileyouwanttoaddtoyourWebsiteProject.Inthistutorial,we’lladdaPDFfile.
301
![Page 302: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/302.jpg)
Step2:AddingtheFiletoYourWebsiteProjectRight‐clickthefileyouwanttoaddtoyourprojectandselectCopyFiletoProject>[Folder],whereFolderisthefolderwhereyouwanttostorethefile.Inthistutorial,we’lladdthefiletotheWebsiteProjectrootfolder,butyoumaywanttostoreyourdownloadablefilesinaspecialsubfolder.
302
![Page 303: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/303.jpg)
ThisopensawindowconfirmingwhetheryouwanttocopythefiletoyourWebsiteProjectFolder.ClickYes.
303
![Page 304: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/304.jpg)
Step3a:LinkingtotheFileFromYourWebsiteProjectTherearetwomethodsyoucanusetolinktoyourfile.ThefirstisfrominsideyourWebsiteProject.Todothis,gobacktotheMyWebsitestab,whereyou’llseethefileyoujustaddedtoyourWebsiteProject.Right‐clickitandselectInsertasLinkIntoCurrentDocument.
ThisinsertstheHTMLcodeforalinktothisdocumentonyourpage.Inthiscase,thelinkwouldlooklikethis:
<a href="newsletter.pdf"></a>
Next,enterthelinktextyouwanttheusertoclickbetween>and</a>.Thefinalcodemightlooklikethis:
<a href="newsletter.pdf">Our PDF newsletter.</a>
Step3b:LinkingtotheFileUsingtheInsertLinkWindowThesecondmethodistousetheInsertLinkwindow.FollowtheinstructionsprovidedinAddingaLinktoYourPage,onlyinsteadofchoosingan.htmlfile,selectthefileyouaddedtoyourWebsiteProject.Inthiscase,itwillbethenewsletterPDF.Whenyou’redonefillingoutallthisinformation,clickOK.Thecodewillautomaticallybeinsertedwhereveryourcursorwaspositionedonyourpage.Youcanmoveitaroundbyselectingitanddraggingittothedesiredlocationonthepage.
304
![Page 305: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/305.jpg)
AnoteaboutPDFsandotherdownloadablefilesyoumaywishtoadd:Mostofthetime,PDFfileswillopenautomatically.ThisisbecausealmostallvisitorsalreadyhavetheAdobeAcrobatReaderinstalled,and,
dependingonthebrowser,thePDFfilewilleitheropendirectlyinthebrowserorinaseparatereaderwindow.Additionally,anyonevisitingyoursitewithInternetExplorerwillbeabletoopenfilescreatedinanyOfficeapplication(Word,PowerPoint,Excel,etc.)directlyinthebrowser.Ifyouwanttomakesureyourusersdownloadthefile,youcanalsoplaceasmallremindersomewhereonthepagethatsayssomethinglike,"Right‐clickandselectSaveLinkAs...tosavethistoyourcomputer."
LinkingtoDifferentPartsoftheSamePageYou'vebeendesigningyoursiteandhavefiguredoutthatapagecanbeaslongasnecessary.Thisisgreat,butitcanbeapainwhenyou'redealingwithlongerpages.Helpoutyourvisitorsbyprovidinglinksthatquicklytakethemtospecificlocationsonthepage.Here’show:
Step1:CreateaTargetThefirststepistosetatarget.Thetargetistheplaceonthepagewhereyouwanttheusertobeabletojumpto.Toinsertatarget,gotoInsert>Target.ThisopenstheInsertTargetwindow.
EnteranameforthetargetintheTargetNamefield,andthenclickOK.ThisinsertsthecodeforthetargetonyourHTMLpage.Inthisexample,thetargetwillbeanemployeeprofileforJohnSmithonourAboutUspage,sowe’llnamethetargetjsmith.Theresultingcodelookslikethis:
305
![Page 306: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/306.jpg)
<a name=”jsmith”></a>
Step2:PositiontheTargetSinceourtargetisassociatedwithJohnSmith’semployeeprofile,let’smoveittothesamelocationashisprofileontheHTMLpage.Todothis,justclickanddragthetargetcodetothedesiredlocation.
Step3:LinktotheTargetNowthatourtargetisinposition,let’sreturntothetopofthepageandcreatealinktoit.Todothis,createanewlinkusingtheoptionsdescribedinAddingaLinktoYourPage.OnceintheInsertLinkwindow,insteadoflinkingtoaURLorapageinyourWebsiteProject,insteadenterthenameofyourtargetprecededbyapoundsign(#).Inkeepingwithourexample,we’dtype#jsmithintheURLfieldand“LearnmoreaboutJohnSmith”intheLinkTextfield.
306
![Page 307: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/307.jpg)
Whenyou’redone,clickOK.Thisinsertsthelinkcodeinyourpage,which,inourexample,wouldlooklikethis:
<a href=”#jsmith”>Learn more about John Smith</a> Andthat’sit!NowyoucanswitchovertothePreviewtabtoseeyourlinkandtargetinaction.
307
![Page 308: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/308.jpg)
HowToCreateaListListsareagreatwaytopresentyourinformationinamoreorganized,eye‐catchingway.Sure,youcoulduseplaintexttogetyourpointacross,butlistsaremucheasierandfastertoread.FollowthesestepstolearnhowtocreatealistintheHTMLEditor:
Step1OpentheInsertListwindowusingoneoftheseoptions:
• Go to Insert > List • Click the List icon in the Code or Visual Editor toolbar
Step2ThisopenstheInsertListwindow,whichallowsyoutoselectwhatkindoflistyouwanttoaddandtoadditemsandatitletoit.
Let’stakealookatwhateachoftheavailableoptionscando:
ListTypeSelectthetypeoflistyouwanttocreate.Youroptionsarebulleted,numbered,definition,andnone,whichisjustalistofitemswithnospecialformatting.Here’showeachofthedifferentlisttypeslook:
308
![Page 309: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/309.jpg)
BulletStyleThisoptionisonlyavailableifyoucreateabulletedornumberedlist,anditallowsyoutochoosethestyleofthebulletsornumbers.Here’showthedifferentbulletsandnumberslook:
ListHeaderTextThisisthetitleofyourlist,anditisonlyavailableifyoucreateabulletedornumberedlist.
ListItemFieldThisiswhereyouenteryourlistitems.Puteachseparatelistitemonitsownline.
309
![Page 310: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/310.jpg)
Ifyouarecreatingadefinitionlist,eachitemyoutypeisadefinitiontitle(e.g.“Thisisadefinitionlist”intheexampleabove).Toadddefinitions,switchtotheCodeEditorandtypethembetweenthe
corresponding<dd></dd>tags.
ImportListIfyouhavealreadyformattedalistandjustwanttoimportitscontents,clickthisbutton.Thisopensawindowthatallowsyoutobrowseyourcomputerforatextfilecontainingyourlist.Youcanonlyimportlistsin.txtformat.
Whenyoufindthefileyouwanttoimport,selectitandclickOpen.ThecontentswillbeinsertedintheListItemfield.
Step3Whenyouaredoneconfiguringyourlistitemsandoptions,clickOK.Thecodewillbeinsertedinthepageforyou.
310
![Page 311: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/311.jpg)
HowtoUseSnippetsIfyou'veeverbeenfrustratedathavingtotypethesamepieceofcodeoverandover,you'lllovesnippets.AsnippetisapieceofcodestoredintheHTMLEditorthatcanbeusedandreusedasmanytimesasyouneed.YoucansavesnippetsofHTML,JavaScript,DHTML,Perl,oranyotherscriptinglanguage.TheHTMLEditorcomeswithseveralbuilt‐insnippetsandgivesyoutheoptiontocreateyourown.
ViewingSnippetsToseealistofavailablesnippets,opentheCodeSnippetstabintheResourcebrowserontheleft‐handsideoftheprogram.Whenyouselectasnippetnamefromthetoppane,thecodewillappearinthebottompane.Allthebuilt‐insnippetscomewithadetailedHTMLcommentexplainingwhatthecodedoes.
311
![Page 312: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/312.jpg)
InsertingSnippetsUseanyoneofthefollowingoptionstoinsertyoursnippetintoyourpage:
• Double-click its name. • Select it and click the Insert Item Into Current Document icon in the Code
Snippets toolbar. • Right-click it and select Insert Item Into Current Document. • Drag it onto your page.
CreatingSnippetsTocreateasnippet,highlightthetextyouwouldliketosaveasasnippetanduseoneofthefollowingoptionstoopentheSaveSnippetwindow:
• Go to File > Save Selected Text as Snippet. • Click the Save icon in the Toolbar and select Save Selected Text as Snippet.
NamethesnippetandclickOK.ThenewsnippetwillbeaddedtothelistintheCodeSnippetstab.YoucanalsoaddanewsnippetusingtheoptionsintheCodeSnippetstab:
• Click the New Snippet icon in the Code Snippets toolbar. • Right-click a snippet and select New Snippet.
BothoftheseoptionsopenanewtabintheHTMLEditorworkspace.Whenyouaredoneenteringthesnippettext,savethedocumentnormally.ThisopenstheSaveSnippetwindow.
312
![Page 313: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/313.jpg)
EditingSnippetsToeditanexistingsnippet,selectitandclicktheEditSnippeticonintheCodeSnippetstoolbar.ThisopensthesnippetcodeinatabintheHTMLEditorworkspace.Edititandthensaveitnormally.
DeletingSnippetsTodeleteanexistingsnippet,right‐clickitandselectDeleteSnippet,orusethekeyboardshortcutDelkey.Thisopensawindowaskingifyouaresureyouwanttodeletethesnippet.Ifyouchangeyourmindaboutdeletingthesnippet,clickNo.
RefreshingtheCodeSnippetsTabIfyouhaveadded,edited,ordeletedasnippetbuthaven’tseenthechangesintheCodeSnippetstab,clicktheRefreshiconintheCodeSnippetstoolbar.Thisrefreshestheareasoyoucanseethemostup‐to‐datesnippets.
313
![Page 314: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/314.jpg)
HowtoAddaFlash™ElementCreatedwithaCoffeeCupFlash™ProgramFollowthesestep‐by‐stepinstructionstoaddaFlash™elementcreatedinoneofCoffeeCupSoftware’sFlash™applications(PhotoGallery,WebFormBuilder,WebJukeBox,etc.)toapagecreatedintheHTMLEditor.Youshouldhavebothapplicationsopen.Inthistutorial,wewilladdaformcreatedinWebFormBuildertotheHTMLEditorpage,buttheprocessisthesameforallourFlash™applications.
Step1SaveyourFlash™elementtothesamefolderwheretheHTMLpageitwillappearonissaved.ThisshouldbeintheWorkingfolderorWebsiteProjectsfolderyouspecifiedintheHTMLEditor.
Thisstepisveryimportant!Ifyoudon’tsavethefilesassociatedwithyourFlash™elementinthesamefolderastheHTMLfilewhereitappears,theelementwillnotdisplaycorrectly—oratall.
Step2SavingopenstheFileswindow,whichliststhefilesyoumustuploadinorderforyourFlash™objecttodisplaycorrectly,aswellastheHTMLcodeyoumustpasteoneverypagewhereyouwanttheobjecttoappear.CopythiscodetoyourWindowsclipboardbyclickingtheCopytoClipboardbutton.
314
![Page 315: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/315.jpg)
Step3OpentheHTMLEditorpagewhereyouwanttheFlash™objecttoappear,andpastethecodebetweenthe<body>and</body>tags.
Step4Uploadyourchangestoyourserver,makingsureyouincludethefilesassociatedwithyourFlash™elementaswellasthepagecontainingthecode.
315
![Page 316: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/316.jpg)
HowtoUsetheFrameDesignerSo,you'rereadytoputyourcodingexperiencetothetestbycreatingapagewithframes?TheHTMLEditorcangiveyouaboostwithitsFrameDesigner.Here’showyouworkwithit:ToopentheFrameDesigner,gotoInsert>FrameDesigner.
Asyoucreateyourframes‐basedlayout,youcankeepaneyeonhowyourdesignwilllookusingthePreviewpaneontheleft‐handsideofthewindow.Youcanalsousethisareatoselectframesforindividualediting.Justclickaframetoeditit.Youcantellwhichframeisselected,becauseitwillbeblue.Here’showyouuseeachoftheoptionsinthiswindow:
FrameStyleChoosefromanumberofpredefinedframestyles.Thesestylesincludethenumberofframes,wheretheyarelocated,andwhatfunctiontheyperform.Forexample,HeaderTwoFramecontainstwoframes,oneintendedforuseasaheaderandanotherlargeronewherethebodycontentgoes.
316
![Page 317: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/317.jpg)
FrameWidthandHeightUsethesedrop‐downmenustosetthewidthandheightoftheselectedframe.Thewidthandheightaremeasuredinthepercentageofthepagetheframetakesup.Iftheselectedframetakesuptheentireheightorwidthofthepagebydefault,youwillnotbeabletoadjustthatattribute.Forexample,lookattheheaderframeintheimageabove.Becauseitautomaticallytakesup100%ofthewidthofthescreen,youcannotadjustthewidth.Otherwise,whatwouldgointhespaceitleftbehind?
FrameScrollingChoosewhetheryouruserscanscrollwithintheframe.Autoaddsascrollbarwhennecessary,Yesaddsascrollbaratalltimes,andNowillnotaddascrollbaratanytime.
AllowFrameResizeSelectthischeckboxifyouwantyouruserstobeabletoresizetheframes.
FrameBorderSelectthischeckboxtoenableaframeborder,andthenenterthewidthoftheborderinthenumberfield.0pixelsisthethinnestborderand50pixelsisthelargest.Werecommendkeepingtheborderbetween1and5pixels.
FrameNameEnteranamefortheframehere.Youshoulduseanamethatrelatestotheframe’sfunction.
SourceURLEntertheURLofthepageyouwanttoappearintheframehere.IfyouarelinkingtoanexternalWebsite,youmustincludethefulllink,includingthehttp://wwwbit.IfyouarelinkingtoanexternalWebsite,besuretoincludethefullWebaddress,includingthehttp://wwwbit.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelink.
Carefulwhereyoulink!Ifthefileyoulinktoisn’tlocatedinyourWorkingfolderoryourWebsiteProject,itmaynotbereferencedcorrectly—meaningthelinkwon’twork.Needmoreinformationabout
workingwithWebsiteProjects?Checkoutthistutorial:WorkingWithWebsiteProjects.Onceyouhaveenteredtherequiredinformation,clickOK.Thecodewillautomaticallybeaddedtothepageforyou.IfyouhavealreadycreatedtheHTMLfilesthatwillbeusedasthesourceforeachframe,clickthePreviewbuttonintheToolbar,andyou'llbeabletoviewyourpage,framesandall!
317
![Page 318: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/318.jpg)
HowtoUsetheCSSMenuDesignerTheCSSMenuDesignerisanewadditiontotheHTMLEditor.It’sanawesometoolthatcreatesasophisticatednavigationmenuforyourWebsite.Readontolearnhowtouseit!
Step1:BeforeYouGetStartedItisextremelyimportanttoremoveanyoldmenucode(DHTMLorCSS)fromyourdocumentbeforeinsertinganewmenu.Ifyoudon’t,yourmenuwon’twork!Ifyouarecreatingyourfirstmenu,theseinstructionsdon’tapply,soyoucanskipaheadtoStep2.Toremoveyouroldcode,firstopentheCodeEditorandfindthecodeyouhavetoremove.ThecodewilllookdifferentdependingonwhetheryouhaveinsertedaCSSorDHTMLmenu.
RemovingCSSMenuCodeRemovethefollowingcodefrombetweenyour<head></head>tags:<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen"> css/menu‐menu.cssisthedefaultnameandlocationofthemenustylesheet.Ifyouhavechangedthenameorlocationofthisstylesheet,thisfilepathwillreflectyourchanges.Next,removethiscodefrombetweenthe<body></body>tags:<ul class="menu-menu"> <li class="first"><a href="page1.html">Menu Item 1</a></li> <li><a href="page2.html">Menu Item 2</a></li> </ul> Thisexamplecontainsjusttwomenuitems,butyourmenumaycontainmore.Besuretoremovethe<ul class...></ul> tagsandallthecodebetweenthem.menu‐menuisthedefaultnameforthemenuclass.Ifyouhavechangedthenameofthemenu,thenameyouspecifiedwillappearhereinstead.page1.htmlandpage2.htmlarethelinksyouspecifiedforthemenuitems.MenuItem1andMenuItem2arethenamesyouspecifiedforthemenuitems.
RemovingDHTMLMenuCodeRemovethecodebetween<script type='text/javascript'>and</script>.Thiscodeshouldbelocatedjustbelowthe<body>tag.
318
![Page 319: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/319.jpg)
Step2:OpeningtheCSSMenuDesignerNowthatyouhaveremovedyouroldmenucode,thenextstepistoworkwiththemenuyouwanttoinsertinitsplace.First,openuptheCSSMenuDesignerbygoingtoInsert>CSSMenuDesigner…
Theoptionsatthebottomofthiswindowappearnomatterwhichtabisselected.Here’swhattheydo:
OpenMenuClickthisbuttontoopenanexistingmenu.
SaveMenuClickthisbuttontosaveyourmenu.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
PreviewClickthisbuttontopreviewyourmenuinyourdefaultWebbrowser.
OKClickthisbuttontoinsertyourmenucodeintothecurrentdocument.We’lltalkmoreaboutthisoptioninStep5.
CancelClickthisbuttontoabandonanyunsavedchangestoyourmenuandexittheCSSMenuDesigner.
319
![Page 320: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/320.jpg)
Thenextstepgoesovertheprocessofopeningapreexistingmenu.Ifthisisyourfirstmenu,skipaheadtoStep4.
Step3:OpeningaPreviouslyDesignedMenuIfyouhavealreadydesignedamenuintheCSSMenuDesignerortheDHTMLMenuBuilderandwanttomakeeditstoit,clicktheOpenMenubutton.Thisopensawindowthatallowsyoutobrowseyourcomputerforthe.mnufileforyourexistingmenu.
Whenyoufindthefileyouwanttoopen,selectitandclickOK.ThisopensthemenuintheCSSMenuDesigner.
YoucanopenamenucreatedintheDHTMLMenuBuilderintheCSSMenuDesigner!Justfindandopenthe.mnufileforyourDHTMLmenu.Youcanthenedititnormally.Whenyousaveorinsertyourmenucode,itwillbeconvertedtoCSS.
Step4:DesigningaMenuNowthatwe’vecoveredthenutsandboltsofopeningamenu,let’sgetdowntobusiness:designingit!
320
![Page 321: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/321.jpg)
TheCSSMenuDesignerisbrokenupintothreetabs:MenuDesigner,MenuColors,andOptions.TheMenuDesignertabiswhereyouworkwiththestructureofyourmenu;theMenuColorstabiswhereyoupickoutyourmenucolorscheme;andtheOptionstabissortofthecatchallsection,whereyoucanconfiguretherestofyourmenuoptions.Let’sgothrougheachoftheseoptionsanddesignourmenu!
MenuDesignerTab
First,takealookattheYourMenusection.Thisiswhereyoucankeepaneyeonthestructureofyourmenu.First,let’saddarootitem,whichisabuttoninthemainpartofthemenu.ClickingtheAddRootItembuttoninsertsabuttoncalled,bydefault,Untitled1.
321
![Page 322: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/322.jpg)
Let’schangethetextthatappearsonthisbuttonfromUntitled1tosomethingabitmoreuseful.IntheTextfield,typeContactUs.Next,let’slinkthisbuttontoourcontactuspage,which,forthesakeofthistutorial,we’llassumeiscontact‐us.html.TypethatintotheLinkfield.
We’llbeusingrelativelinksinthistutorial.Notsurewhatrelativelinksare?Definitely,definitelytakethetimetoreadAbsolutevs.RelativeLinks.
Ourfirstmenuitemisconfigured!Let’sdoanotherone.ClicktheAddRootItembuttonagain,andnamethenewitemLearnMore.Don’tassignitalinkjustyet—we’regoingtodosomethingabitdifferentwiththismenuitem.MakingsurethatLearnMoreisselectedintheYourMenusection,clicktheAddSubitembutton.ThisaddsanitemthatwillappearunderneaththeLearnMoremenuitemwhenyouruserclicksit.NameyoursubitemAboutUs,andlinkittoabout‐us.html.
Youcanaddasubitemthatexpandswhenasubitemisclicked,butanyfurthersubitemsaren’tallowed.Thisisbecausethere’snonavigationalbenefittohavingsubitemsofsubitemsofsubitems—plusitsounds
reallysillytosay,“subitemsofsubitemsofsubitems”intutorials;)
322
![Page 323: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/323.jpg)
Let’saddanothersubitemtotheLearnMoreitem.YoucouldselectLearnMoreandclicktheAddSubitembutton,oryoucoulduseadifferentmethodandclickAboutUsandclicktheAddSiblingbutton.Thisaddsanotheritemonthesamelevelastheselecteditem.Let’snamethisnewsubitemPrivacyPolicyandlinkittoprivacy.html.Here’showtheMenuDesignertablooksafterallthesechanges:
Let’sswitchovertotheMenuColorstabandcustomizeourmenucolors.
323
![Page 324: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/324.jpg)
MenuColorsTab
First,takealookattheMenuColorSamplearea.Thisiswhereyoucankeepaneyeonyourmenucolorscheme.Next,let’stakealookatwhateachoftheseoptionsdoes.
BackgroundColorThebackgroundcolorofthemenu.
MouseoverBackgroundColorThebackgroundcolorofthemenuwhentheuserholdstheirmouseoverit.
FontColorThecolorofthemenutext.
MouseoverFontColorThecolorofthemenutextwhentheuserholdstheirmouseoverit.
BorderColorThecolorofthemenuborder.Okay,nowthatweknowwhateverythingdoes,let’spickoutsomecolors!Howaboutaprettydarkgreenforthemenubackground?Tochangethis,clickthecolorswatchnexttowhereitsaysBackgroundColor,andselectthedarkgreenshadeyouwant:
324
![Page 325: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/325.jpg)
Hmm,lookslikethereisn’tmuchchoiceintermsofdarkgreens,solet’sclickCustomColor.Thisopensarainbowgradientwherewecanbrowseevenmorecolorsandadjustbrightness.
Perfect!Next,let’susethesameprocesstopickalightgreenforthemouseovercolor.Therestofthecolorslookgoodasis,butlet’schangethesubmenucolorsto
325
![Page 326: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/326.jpg)
matchourmainmenucolors.Todothis,clicktheUseMainMenuColorsbutton.Rightnow,theMenuColorstablookslikethis:
Awesome!Let’sswitchonovertotheOptionstabtomakeafewmorechangestoourmenu.
OptionsTab
326
![Page 327: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/327.jpg)
First,let’stakealookatwhateachoftheseoptionsdoes.
OrientationChoosewhetheryouwouldlikeahorizontalandverticallayout.Fornow,let’sstickwithahorizontalmenu.
MarginTopandLeftUsethesefieldstosetthetopandleftmargininpixels.Amarginistheblankspacesurroundingthemenu.Whenthemarginisincreased,morespacewillappearbetweenthemenuandtheobjectssurroundingit.We’llkeepthedefaultsfornow,butifyoudecideyouwanttogiveyourmenuabitmorebreathingroomonceyouseeitonyourpage,youcanalwaysreopenitandadjustthesefieldslater.
BorderWidthUsethisfieldtosetthewidthofthemenuborderinpixels.Again,we’llleavethisasthedefault—whyrocktheboat?
FontFace,Size,andStyleUsethisareatosetthefontandsizeofthemenuitemtext,aswellaswhetheritisboldoritalicized.Let’sworkwiththeseoptionsafterwegetthroughtheseexplanations!
MenuandSubmenuTextAlignmentUsethisareatochoosehowyouwantthetextinthemenutobealigned:totheleft,right,orcenter.
TopandLeftPaddingUsethesefieldsthetopandleftpaddinginpixels.Paddingistheblankspaceinsidethemenu,betweentheborderandthemenucontents.Whenthepaddingisincreased,morespacewillappearbetweenthetextandtheborder.
UseFixedWidthforMenuItemsSelectthischeckboxifyouwouldliketouseafixedwidthforthemenuitems.Thismeansthemenuitemswillalwaysbethesamewidth,regardlessofhowlongtheircontentis.Thisisanotheroptionwe’llworkwith.
ItemWidthSetthewidthofyourmenuitemsinpixelshere.Okay,nowthatyouknowwhateverythingdoes,let’smakesomeadjustments!First,let’schangethefontface.ClicktheFonticontoopentheFontwindow,whichallowsyoutoselectwhichfontfaceyouwouldliketouse.
327
![Page 328: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/328.jpg)
Let’schooseaWeb‐safefont,justsoweknowitwilldisplaycorrectly.HowaboutTimesNewRoman?SelectitfromthelistandthenclickOK.
FormoreinformationaboutWeb‐safefonts,readHowtoChangetheAppearanceofText.
Next,let’schangethesizeandstyleofourmenutext.SinceTimesNewRomanlooksabitsmall,let’schangeittosize12,andmakeitboldbycheckingtheBoldcheckbox.Finally,let’smakesureourmenuitemshaveenoughroomfortheirtext.MakesureUseFixedWidthforMenuItemsischecked,andthenchangetheItemWidthto200pixels.Thatshouldbemorethanenoughroom.Havingmadeallthesechanges,theOptionstabwilllooklikethis:
328
![Page 329: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/329.jpg)
Andthat’sitforcustomization!Let’sinsertourmenu,shallwe?
Step5:InsertingYourMenuToinsertyourmenu,clickOK.Thisopenstwowindowscontaininginformationaboutyourmenucode:
Thiswindowremindsyouthatyoumustremoveallyouroldmenucodebeforeinsertingnewcode.IfyoufollowedtheinstructionsinStep1,youdon’tneedto
329
![Page 330: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/330.jpg)
worryaboutthiswindow.ClickOK.ThisopenstheSaveMenuwindow,whichallowsyoutosaveyourmenutoworkwithitlater.
GoaheadandclickSave—youwouldn’twanttoloseallthechangesyoujustmade,right?Thisopensawindowthatallowsyoutochoosethefolderwhereyourmenufilesaresaved.Bydefault,itwillbesavedintoyourWorkingfolderoryourWebsiteProject.
330
![Page 331: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/331.jpg)
Onceyouhavesavedyourmenu,thecodewillautomaticallybeinsertedintoyourpage.Thecodeforourmenulookslikethis:
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen"> </head> <body> <ul class="menu-menu"> <li class="first"><a href="contact-us.html">Contact Us</a></li> <li> <a href="">Learn More</a> <ul> <li class="first"><a href="about-us.html">About Us</a></li> <li><a href="privacy.html">Privacy Policy</a></li> </ul> </li> </ul>
Thetoppartthatcomesbeforethe</head>tagisalinktothemenustylesheet,andthebottompartistheHTMLcodethatismodifiedbythestylesheet.
331
![Page 332: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/332.jpg)
Interestedinlearningmoreaboutwhatstylesheetsareandhowtheywork?CheckoutthecomprehensivetutorialaboutthisawesomeWebdesigntoolatW3Schools(http://www.w3schools.com/css/css_intro.asp).
SwitchonovertothePreviewtabandseehowyournewmenulooks!
Prettysnazzy,huh?
Step6:PositioningYourMenuTochangewhereyourmenuappearsonyourpage,yourbestbetistouse<div></div>tagstopositionit.Todothis,place<div></div>tagsaroundthemenucodethatappearsbetweenthe<body></body>tags,whichwouldlooklikethis:
<div> <ul class="menu-menu"> <li class="first"><a href="contact-us.html">Contact Us</a></li> <li> <a href="">Learn More</a> <ul> <li class="first"><a href="about-us.html">About Us</a></li> <li><a href="privacy.html">Privacy Policy</a></li>
332
![Page 333: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/333.jpg)
</ul> </li> </ul> </div>
Next,addthealignattributetotheopening<div>tag,andgiveitoneofthesevalues:bottom,center,justify,left,right,ortop.Forinstance,ifyouwantedtocenteryourmenu,theopening<div>tagwouldlooklikethis:
<div align=”center”>
Step7:AddingYourMenutoYourOtherPagesUsingCodeSnippets,youcaneasilyaddyourmenutoallthepagesinyourWebsite.Todothis,firstselectthecodeinyourmenuthatappearsbetweenthe<head></head>tags,whichlookslikethis:
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">
Next,useoneoftheseoptionstosaveitasasnippet:
• Go to File > Save Selected Text as Snippet • Click the Save Items icon in the Toolbar and select Save Selected Text as
Snippet • Right-click the text and select Save Selected Text as Snippet
ThisopenstheSaveSnippetwindow.EnterthenameforthesnippetintheFilenamefield.Inthiscase,we’llcalloursnippetMenuStyleSheet.Whenyou’redone,clickOK.Next,highlightthemenucodethatappearsbetweenthe<body></body>tags—<div>tagsandall!—andcreateanothernewsnippet.CallthisoneMenuCode.NowswitchovertotheCodeSnippetstab,whereyou’llseeyournewsnippets!
333
![Page 334: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/334.jpg)
Nowwheneveryouwanttoinsertyourmenuintoanotherpage,justgototheCodeSnippetstabandinsertthesnippetsintothecorrectlocationsinyourpage.
FormoreinformationabouthowtouseCodeSnippets,readHowtoUseSnippets.
334
![Page 335: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/335.jpg)
HowtoUsetheOpenFromWebFunctionWiththeHTMLEditor,youcanimportpublishedWebpagesfromtheInternetandopenthemintheprogram.Todothis,gotoFile>OpenFromWeb.ThisopenstheOpenFromWebwindow,whichallowsyoutoentertheURLofthepageyouwishtoopenandtospecifyoptionsforsavingthisfiletoyourcomputer.
Afewnotesaboutthisfunctionbeforewedescribehowyouuseit.First,itcanonlybeusedtodownloadonefileatatime.IfyouwanttodownloadmultiplefilesfromaWebsite,youmaywanttouseanFTP
clientsuchasDirectFTP(http://www.coffeecup.com/direct‐ftp/)orFreeFTP(http://www.coffeecup.com/free‐ftp/)todownloadseveralfilesatonce.Second,thisoptionworksbestifyouaredownloadinganHTMLpagethatdoesnotusePHPorSSI,becausescriptinglanguageslikethesecanaddcodetoapublishedpage.Asaresult,youmaynotdownloadthecorrectHTML.Finally,ifthepagedoesn'tloadcorrectly,theservermayberespondingslowly.Inthiscase,repeattheOpenFromWebfunction.
335
![Page 336: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/336.jpg)
Allright,nowthatyouknowwhatthisfunctioncanandcannotdo,let’sgetstarted!ThefirststepistoentertheURLfortheexactWebpageyouwanttodownload.Forinstance,sayyouwantedtoemulatetheoh‐so‐snazzydesignoftheCoffeeCupAboutUspage(http://www.coffeecup.com/about/).YouwouldhavetotypethatentireURLintotheURLtoOpenFromWebfield.Ifyoutriedjustusinghttp://www.coffeecup.com,you’dgettheCoffeeCupSoftwarehomepage—stillsnazzy,butnotthepageyouwerelookingfor.Onceyou’veenteredtheURLofthepageyouwanttodownload,it’stimetochoosewhereyouwouldliketodownloadthefileandwhatpartsofthepageyouwouldliketodownload.That’swheretheOptionstabcomesintoplay:
DownloadOnlytheHTMLPage(WithoutImagesorOtherRequiredFiles)andOpenitintheEditorThisoptiondownloadsonlytheHTMLfromthepage.Thatmeansanyimages,CSS,JavaScript,andanythingelseassociatedwiththepagewon’tbedownloaded.Thisoptionalsodoesnotsavethefiletoyourcomputer.Instead,itjustopenstheHTMLintheEditor.Thisisagoodoptionifyouwanttogetyourhandsontherawstructureofthepageandstarteditingitrightaway.Onceyou’redonemakingyouredits,youcansavethefilenormally.
SavetoDiskThisoptionsavesthepagetoalocationyouspecifyonyourcomputer.Tospecifyalocation,clicktheBrowseiconandchoosethefolderwhereyouwantthefilesaved.Ifyouchoosetosavetodisk,youcanalsousetheprovidedcheckboxesto:
• Have the page open in the Editor after it has been saved to your computer • Download images that appear in the page • Download related files such as CSS and scripts • Open related CSS files in the HTML Editor
TheseoptionscomeinhandyifyouwanttoworkwithmorethanjustthepageHTML.
336
![Page 337: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/337.jpg)
ThelaststepistoswitchovertotheProxySettingstab,whereyoucanenterproxyinformationifnecessary.
Tobehonest,ifyouaren’tsurewhetheryoushouldusethisinformation,chancesarereallygoodthatyoudonothaveto.Ifyouwanttobeextra‐sure,contactyourhostingprovider,andthey’llbeabletogiveyouadefinitiveanswer.
Onceyou’veconfiguredallyoursettings,goaheadandclickOpen.YoucantracktheprogressofyourdownloadintheDownloadStatusareaatthebottomofthewindow.Whenit’sdone,edityournewlydownloadedfilesnormally.
337
![Page 338: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/338.jpg)
HowtoUseBookmarksMaybeit’sthelastplaceyouleftoffediting,aportionofthepagewhereyoumakealotofchangesandupdates,oradesignelementyouwanttorunbyaclient—forwhateverreason,youneedtocomebacktoacertainpartofyourcodeatanothertime.Thisiswherebookmarkscomeinhandy.Theseunobtrusivetoolsmarkplacesinyourcodesoyoucanreturntothemwheneveryouneedto.Bookmarksappearasgreenbookiconslabeledwithanumberinthegutter,theareaontheleft‐handsideofthecodethatalsocontainslinenumbersandsymbolsrepresentingparagraphbreaks.
SettingBookmarksTosetabookmark,useoneofthefollowingoptions:
• Go to Document > Set Bookmark and select which bookmark number you want to set.
• Use the keyboard shortcut Shift+Ctrl+[0-9]. Choose the digit that corresponds to the bookmark number you want to set. For instance, if you wanted to set bookmark number 5, you would use the keyboard shortcut Shift+Ctrl+5.
Youcansetupto10bookmarksperdocument.
LocatingBookmarksTolocateabookmark,useoneofthefollowingoptions:
• Go to Document > Go to Bookmark and select the bookmark number you want to locate.
• Use the keyboard shortcut Ctrl+[0-9]. Choose the digit that corresponds to the bookmark number you want to locate. For instance, if you wanted to go to bookmark number 5, you would use the keyboard shortcut Ctrl+5.
ResettingBookmarksTherearetwomethodsforresettingbookmarks.Ifyouwanttoresetanindividualbookmark,justsetthebookmarknumberinanotherlocation.Forinstance,ifyouwereusingBookmark0tomarkyourmetatagsbutwantedtouseittomarkyourfooterHTML,justpositionyourcursoratyourfooterHTMLandsetBookmarkousingoneofthemethodsdescribedabove.
338
![Page 339: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/339.jpg)
Thesecondmethodistoclearallyourbookmarksatonce.Todothis,gotoDocument>ClearAllBookmarks.
339
![Page 340: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/340.jpg)
HowtoUsetheCodeCleanerIfyou'veevertriedtoeditsomeoneelse'scode,youknowhowmuchofahassleitcanbetopickthroughastylethatisn'tyourown.Reformattingcanbeapain,butwiththeHTMLEditor'sCodeCleaner,it'sabreeze.TheCodeCleanerfiltersthroughsourcecode,restylesittofityourpersonaltaste,andweedsoutpeskyerrorsinthedocument.Ifyouhavetroubleloadingadocumentinabrowser,runningtheCodeCleanermaybeabletofindtheproblemforyou.Here'showtousetheCodeCleaner:
Step1GotoTools>CodeCleaner...ThisopenstheCodeCleanerwindow,whichallowsyoutosetyourcodecleaningpreferences.
Step2Toviewdetaileddescriptionsonhowagivenoptionworks,placeyourmouseoverthatoptionandreadthedescriptionintheyellowpaneatthebottomofthewindow.YoucanalsoswitchtotheDocumentandASPandXMLtabstoseemoreoptions.
340
![Page 341: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/341.jpg)
Step3Selectalltheattributesyouwouldliketoapplytoyourcode,andwhenyou'redone,clickOK.Thisstartsthecodecleaningprocess.IfyouchangeyourmindabouttheeditstheCodeCleanermade,youcanundothembygoingtoEdit>Undo.YoucanalwaysreruntheCodeCleanerusingdifferentsettingsuntilyouaresatisfiedwiththeresults.
341
![Page 342: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/342.jpg)
HowtoUseExtendedFindandReplaceIfyoursitehasmorethanonepage—likeprettymucheveryWebsiteever—thenyouknowthatmakingaglobalchangecanbeprettydifficult.Forexample,sayyouwanttoreplaceeveryinstanceofcolor="red"onyourWebsitewithcolor="black".Whetheryouhadtochangethison5or500pages,locatingeveryinstanceofthatcodewouldgetoldfast.What'saWebmastertodo?WiththeHTMLEditor'sExtendedFindandReplacefunction,globalchangeslikethisareeasy.Justfollowthesesimplesteps:
Step1OpentheExtendedFindandReplacewindowusingoneoftheseoptions:
• Go to Edit > Replace… • Click the Find and Replace icon in the Toolbar and select Replace… • Use the keyboard shortcut Ctrl+H
Step2EnterthetextorcodeyouwanttofindintheFindfield,andthenenteritsreplacementintheReplaceWith:field.
342
![Page 343: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/343.jpg)
Step3Specifywherethechangesneedtobemade.ChooseCurrentDocumentifyouonlywantthechangestoapplytothedocumentcurrentlyopenintheHTMLEditor,andchooseAllOpenDocumentsifyouwantthechangestoapplytoallthedocumentscurrentlyopenintheHTMLEditor.Ifyouwanttochangeallthefilesinagivenfolder,chooseLookinFolderandthenclickthefoldericontobrowseyourcomputerforthedesiredfolder.
UsetheLookinFolderoptionwithcaution,becauseyouwon'tbewarnedbeforechangesaremadetoyourcode.Tobesafe,makebackupsofallyourfilesbeforeyoumakethesechanges.Alsonotethatthis
featurewillonlyworkonfilesthathavepreviouslybeenopenedintheHTMLEditor.
Step4ClickReplaceAll,andlettheHTMLEditordotherest!
343
![Page 344: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/344.jpg)
PreviewingYourWorkThereareatonofdifferentoptionsavailableforpreviewingyourwork.Afterall,it'sgoodWebdesignpracticetoviewyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility,sowemadesuretogiveyouplentyofdifferentwaystotestyourpages,retestthem,andtestthemagainjusttobesure.
FYI,themostpopularbrowsersareFirefox,InternetExplorer,Opera,GoogleChrome,andSafari,soyoushouldmakesureyourWebsitelooksgoodinallofthem—yep,allofthem.Usetheselinkstodownloadthesebrowsersandinstallthemonyourcomputer:
• Firefox: http://www.mozilla.com/en-US/firefox/upgrade.html • Internet Explorer: http://www.microsoft.com/windows/internet-
explorer/default.aspx • Opera: http://www.opera.com/ • Google Chrome: http://www.google.com/chrome • Safari: http://www.apple.com/safari/
Andnow,ontothemanywaysyoucanpreviewyourworkintheHTMLEditor!
PreviewTabThePreviewtabisafullyfunctional,built‐inbrowser(InternetExplorer)youcanusetopreviewyourWebsite.Toaccessit,justclickthePreviewtabatthetopoftheworkspace.
344
![Page 345: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/345.jpg)
Split‐ScreenPreviewThisisafullyfunctional,built‐inbrowser(InternetExplorer)thatallowsyoutopreviewyourworkinabrowserareabelowtheCodeEditor.Toaccessit,useoneoftheseoptions:
• Go to View > Split-Screen Preview • Click the Edit Display icon in the Code or Visual Editor toolbar and select
Split-Screen Preview • Click the Test in Browser icon in the Code or Visual Editor toolbar and select
Split-Screen Preview • Use the keyboard shortcut F12
AdditionalBrowsersSincebothbuilt‐inbrowsersareInternetExplorer,theHTMLEditorofferstheoptiontoaddupto10additionalbrowsersforpreviewingyourwork.Toaddthesebrowsers,gotoTools>Preferences>BrowserTestingtab.
345
![Page 346: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/346.jpg)
SelectaBrowserSelecttheslotunderTools>AdditionalBrowserswhereyouwouldlikethebrowsertoappear.AdditionalBrowser1canbeaccessedusingthekeyboardshortcutCtrl+F5.
DisplayNameEnterthedesireddisplaynameforthebrowser.
ApplicationLocationUsetheBrowseicontobrowseyourcomputerforthe.exefileforthebrowseryouwanttoadd.Toremoveabrowser,clicktheRemoveicon.Topreviewyourworkinanyoftheadditionalbrowsersyouhaveadded,useoneoftheseoptions:
• Go to Tools > Additional Browsers and select the browser you want to use • Click the Test in Browser icon in the Code or Visual Editor toolbar and select
the browser you want to use. • Use the keyboard shortcut Ctrl+F5 (applies only to Additional Browser 1)
346
![Page 347: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/347.jpg)
SwitchingBetweenOpenFilesThereareacoupleofdifferentoptionsforswitchingbetweenopenfilesintheHTMLEditor.
WindowMenuTheWindowmenuallowsyoutoseeallthefilesopenintheEditor.Clickafiletoopenitforediting.
StatusbarTabsTheStatusbar,locatedatthebottomoftheprogram,displaystabsforeachoftheopendocumentsintheEditor.Toswitchbetweenopendocuments,clickthetabforthefileyouwanttoedit.
347
![Page 348: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/348.jpg)
AdjustingCodeHighlightingOptionsCodesyntaxhighlightingisagreatwaytotelldifferenttags,tagattributes,andtagvaluesapart.Forexample,itmaybedifficultortime‐consumingtotrytofindeveryinstanceofan<img>tag,butifyousetyourhighlightingoptionstomakeall<img>tagsred,thenallyou’dhavetodoislookforthecolorred.Followthesestepstocreateyourowncodehighlightingcolorscheme:
Step1GotoTools>DocumentDisplayProperties.ThisopenstheCustomizationtabofthePreferenceswindow.
Step2Selectthelanguagewhosehighlightingschemeyouwanttoeditfromtheprovideddrop‐downlist.Inthistutorial,we’llbeworkingwithHTML/PHPDocuments,soselectit.Next,clicktheModifyHighlightingbutton.ThisopenstheHighlightingOptionswindow.
348
![Page 349: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/349.jpg)
Step3SelecttheelementwhosecoloryouwanttochangefromtheElementlist.Inthistutorial,we’llchangeHTMLAttributes,soselectthatoptionfromthelist.
Step4Applythecolorand/orstylechangesyouwanttoappearinthecodesyntax.Youcanpreviewthemintheareaatthebottomofthewindow.Forthisexample,let’schangeHTMLattributestobemagentaandbold.Tochangethetextcolor,selectitfromtheForegroundcolorswatch.
349
![Page 350: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/350.jpg)
Andtomakeitbold,selecttheBoldcheckbox.Aftermakingthesechanges,you’realldone!ClickOKtoclosethiswindow,andthenreturntotheCodeEditor,whereyou’llgettoseeyourcustomcodesyntaxhighlightinginaction.
350
![Page 351: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/351.jpg)
HowtoCreateaCustomToolbarEveryonelovesatoolbar.Whyspendtimediggingaroundinmenuswhenyoucanaccomplishataskwiththeclickofabutton?Well,withtheHTMLEditor'scustomizableinterface,youcangetcreateatoolbarthatcontainstheiconsyouuseallthetimewithnosuperfluouselements.Followthesestepstocreateyourowntoolbar:
Step1:OpentheCustomizeWindowOpentheCustomizewindowusingoneoftheseoptions:
• Go to Tools > Toolbars and Menus > Customize • Right-click any toolbar and select Customize
TheseoptionsopentheCustomizewindow,whichliststhetoolbarsintheprogramandallowsyoutocreateacustomtoolbarorcustomizethemaintoolbar,whichappearsacrossthetopoftheHTMLEditorworkspace.Inthistutorial,wewillcreateourowncustomtoolbar.
351
![Page 352: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/352.jpg)
Step2:CreateaNewToolbarClickNew.ThisopenstheAddToolbarwindow.Typeanameforyournewtoolbar.Inthistutorial,we’llcalloursMyToolbar.
.Whenyou’redone,clickOK.ThenewtoolbarwillbeaddedtotheToolbarslist.
You’llalsoseeatiny,blanktoolbarjusttotheleftoftheCustomizewindow.
352
![Page 353: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/353.jpg)
Thenextstepwillshowyouhowtofillthattoolbarupwithhelpfulicons!
Step3:AddIconstoYourToolbarToaddbuttonstoyourtoolbar,switchovertotheCommandstab.
TheCategorieslistcontainsbroadcategoriesofindividualcommands.Youcan’taddthesetoatoolbar,butyoucanselectthemtoviewthecommandstheycontain.Forourtoolbar,let’saddsomebasiccommandsfromtheFilemenu.ClickFiletodisplaythesecommandsintheCommandslist.
353
![Page 354: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/354.jpg)
Let’saddNewBlankPagetoourtoolbar.Todothis,justclickanddragNewBlankPageontothetoolbar.Whenyouseethelittleplussign,letgoofthemouse.Thisaddstheicontothetoolbar.
Awesome!Let’saddafewmoreicons—howaboutOpen,Close,andSave?
Looksgood!
354
![Page 355: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/355.jpg)
Step4:ChangingtheOrientationoftheToolbarSayyouwantedyourtoolbartobehorizontalinsteadofvertical.Nosweat!—justclickoneofthesideswithyourmouseanddragfurthertotheside,orclickthebottomanddragthebottomofthetoolbarup.
Youcanhaveyouriconsstackedorallinaline—it’suptoyou!YoumaynoticethatMyToolbardoesn’tdisplayfully.That’sbecauseyourcustomtoolbarsonlytakeupasmuchspaceastheyneed,whichhelpsconservespace.
Step5:AdjustingAdditionalToolbarOptionsIfyouwanttoworkwithmoretoolbaroptions,switchovertotheOptionstab.
355
![Page 356: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/356.jpg)
Let’stakealookatwhateachoftheseoptionsdoes.
MenusShowRecentlyUsedCommandsFirstSelectthischeckboxifyouwantthemostrecentlyusedcommandstoappearatthebeginningofyourcustomtoolbar.
ShowFullMenusAfteraShortDelaySelectthischeckboxifyouwantthedrop‐downmenusinyourcustomtoolbartoappearafterashortdelay.
ResetMyUsageDataClickingthisbuttonresetsyourusagedatasoyourcommandsappearintheorderyouoriginallyspecifiedinsteadofbeingrankedinorderofuse.
LargeIconsSelectthischeckboxtoincreasethesizeofthetoolbaricons.Largetoolbariconslooklikethis:
ShowTooltipsonToolbarsSelectthischeckboxtodisplaytooltipswhenyoumouseovertoolbaricons.Tooltipsstatewhattheiconsdo.
ShowShortcutKeysinTooltipsSelectthischeckboxtodisplaykeyboardshortcutsinthetoolbartooltips.
MenuAnimationsSelectthedesiredmenuanimationfromthisdrop‐downlist.YouroptionsareRandom,Unfold,Slide,orFade.Fornow,let’sleavetheseoptionsalone—ourtoolbarisspiffyenoughasis.
Step6:DockYourCustomToolbarYoumaynoticethatyourcustomtoolbarisfree‐floating.However,youcandockyourtoolbarinseverallocationsintheworkspace:atthetop,alongtheleftorrightside,oronthebottom.Todothis,justclickanddragthetoolbartothedesired
356
![Page 357: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/357.jpg)
location.Onceyouhavedockedit,youcanchangeitspositionbyclickinganddraggingthesolidordashedlinesinthetoolbar.
Step7:FurtherCustomizingYourToolbarYoualsohavetheoptiontoaddorremovebuttonsrightfrominsidethetoolbar.Todothis,clickthedownward‐facingarrow:
Uncheckaselectiontoremoveitfromyourmenu.Youcanalwaysre‐additbyreselectingitfromthelist.
Step8:RemovingYourToolbarIfyoudecideyoudon’twantyourtoolbartodisplayinyourworkspace,butyoudon’twanttodelete,it,youcanremoveitbyclickingtheXintheupperright‐handcorner.
357
![Page 358: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/358.jpg)
CustomizingCodeCompletionTagsHaveyoueverwantedtoknowhowtoaddyourowncustomtags,tagattributes,orattributevaluestotheCodeCompletionlistintheHTMLEditor?It'sactuallyprettyeasy.Forexample,let'ssayyouwantedtoaddacustomattributeforthe<img>tag.Here’showyou’dgoaboutdoingthis:
Step1GoEdit>EditXHTMLTags.ThisopenstheEditXHTMLTagswindow.
358
![Page 359: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/359.jpg)
Step2SelectIMGfromtheTagslistontheleft‐handsideofthewindow.Whenyoudo,alltheavailableattributeswillappearintheSelectedTagAttributeslist.
Step3AtthebottomoftheSelectedTagAttributeslist,you’llseeagreenplussignicon.Clickthisicontoaddanewattributetothelist.Bydefault,itiscalledAttribute1.
359
![Page 360: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/360.jpg)
Step4MakesureAttribute1isselected,andthenclicktheEditAttributeNameicon,whichisalsolocatedatthebottomoftheSelectedTagAttributeslist.Inthistutorial,we’llchangethenametoLONGDESC,butnaturally,youcangiveyourattributesanynamesyouwant.Andthat’sit!ClickClose.Nowwheneveryouaddan<img>tagtoyourHTMLdocument,theLONGDESCattributewillshowupintheCodeCompletionlist.ItwillalsoappearintheTagstabontheleft‐handsideoftheprogramwhenHTMLTagsisselected.
360
![Page 361: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/361.jpg)
FrequentlyAskedQuestions
Features,Tools,andFunctionalityHowdoIaddspecialcharacters?HowdoIchangemycodecase?IsthereaJavaScriptorHTMLdebuggerincludedintheprogram?Whatisahorizontalrule?Whatisthedifferencebetweenalayoutandatheme?HowdoIuseWebsiteProjects?WhathappenedtotheDHTMLMenuBuilder?
CustomizationHowdoIturnontheVisualEditor?HowdoIimportanotherlanguagedictionaryintotheHTMLEditor?
ErrorMessagesandTroubleshootingIgetanerrorthatreferstoMFC42.dll.Vistaisn'tdisplayingthefilesinmyWorkingfolder.Igetanerrormessagethatsays,“Nosuchinterfacesupported.”IgetanerrorI/O183.IseeredX’sinsteadofmyimages.Squaresorquestionmarksappearinsteadofspaces.
MiscellaneousWhatisthedifferencebetweentheHTMLEditorandtheFreeHTMLEditor?HowdoIinstallHTMLEditorthemes?Ibuiltmysiteusingathirdparty'sWebpagebuilder.WillIbeabletousetheHTMLEditor?
Features,Tools,andFunctionality
HowdoIaddspecialcharacters?Toaddspecialcharacters—whichincludesymbolsnotcommonlyincludedonkeyboards,suchastrademarksigns,accents,umlauts,etc.,non‐breakingspaces,andsymbolsaWebbrowsermightinterpretasHTML(namely<and>)—useanHTMLentity.Thisisaspecialcodethatbrowsersrenderasthecorrespondingsymbol.ToaddanHTMLentityintheHTMLEditor,clicktheCharacterstabontheleft‐handsideofthescreen,positionyourcursorinthelocationonthepagewhereyouwantthecharactertoappear,andthendouble‐clickthecharacterofyourchoice.Youcanalsodraganddropthecharactertothepage.ThecorrectHTMLentitywillautomaticallybeinsertedforyou.
361
![Page 362: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/362.jpg)
HowdoIchangemycodecase?TherearenostandardsinplaceforhowHTMLtagsaredisplayed.Somecoderspreferallcaps(<BODY>),whereasotherspreferlowercase(<body>).UsingthetoolsintheHTMLEditor,youcaneasilyswitchfromonestandardtoanother.Ifyouonlywanttochangeafewlinesofcodeorcontent,firstselectitwithyourmouse,andthengototheEditmenu.There,youcanselectbetweenconvertingtouppercase,lowercase,orpropercase,whichcapitalizesthefirstletterofwordsappearingaftercertaincharacters.Tomodifywhichlettersarecapitalizedinpropercase,gotoTools>Preferences>Generaltab,andusetheoptionundertheProperCaseConversionheading.Ifyouwanttochangeallyourcode,usetheCodeCleaner.Todothis,gotoTools>CodeCleaner>LayOutandConverttab.Ifyouwantuppercasetagsand/orattributes,selecttheassociatedcheckboxes;ifyoupreferlowercase,unselectthesecheckboxes.Next,clickOK.Thespecifiedchangeswillbeappliedtoyourdocument.
IsthereaJavaScriptorHTMLdebuggerincludedintheprogram?TherearenoJavaScriptdebuggingtoolsinHTMLEditor,butthereisanHTMLcodecleanerthatcanfindunclosedandunsupportedtags,aswellasotheranomaliesinyourcode.Toaccessit,gotoTools>CodeCleaner.YoucanalsovalidateyourcodeusingtheW3Cmarkupvalidationservice.Todothis,gotoDocument>ValidateHTML.ThisopenstheW3Cmarkupvalidationservice(http://validator.w3.org/)inyourdefaultWebbrowser.
Whatisahorizontalrule?Ahorizontalrule(<hr>)isalinethatgoesacrossaWebpage.Tocreateacustomizedhorizontalrule,gotoInsert>HorizontalRule.ThisopenstheInsertHorizontalRulewindow,whichallowsyoutosetpropertiesfortheline,includingalignment,width,color,shading,andthickness.ThePreviewareaallowsyoutoseehowthepropertieslookasyouadjustthem.Whenyouaredone,clickOK,andtheHTMLwillbeautomaticallyinsertedintoyourpage.
Whatisthedifferencebetweenalayoutandatheme?AlayoutincludestheHTMLforabasicpagestructureandallowsyoutoprovideyourowncontent.Thisgivesyoumorefreedomovertheappearanceofyourdesign.Athemeincludesthreepages(index.html,about‐us.html,andcontact‐us.html)thatincludetheHTMLandimagesforabasicdesign,allowingyoutoreplacetheimagesandtextwithyourowncontent.Thisisagreatoptionforbeginners,sincethebulkoftheworkhasalreadybeendoneforyou.
362
![Page 363: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/363.jpg)
HowdoIuseWebsiteProjects?Thisquestionactuallyhasareallylengthyanswer!Ratherthantryingtotackleithere,we’regoingtodirectyoutoacoupleofhelpfulresources.First,checkoutthestep‐by‐steptutorialinthismanual:WorkingWith
WebsiteProjects.Afterperusingthatguide,switchovertotheHTMLEditorandgotoMyWebsites>AllWebsiteProjects>WhatisaWebsiteProject.ThisopensacomprehensiveguidetousingWebsiteProjects.Betteryet,itactuallyisaWebsiteProject,soyou’llgettoseefirsthandhowtheywork.
WhathappenedtotheDHTMLMenuBuilder?InthelatestversionoftheHTMLEditor,wereplacedtheDHTMLMenuBuilderwiththeCSSMenuDesigner.Thisnewtoolisavastimprovement—itrendersproperlyinallthemajorbrowsers,it’svalidaccordingtoW3Cstandards,anditproducesalotlesscodethantheDHTMLMenuBuilder,whichmakesforfasterloadtimes.IfyouwanttoconvertyourDHTMLmenutoCSS,justgotoInsert>CSSMenuDesigner>OpenMenubutton,andthenbrowseyourcomputerforthe.mnu
fileyoucreatedwiththeDHTMLMenuBuilder.ClickOpen,andthenresavethemenu.ThisautomaticallyconvertsthecodetoCSSforyou!Ifyou’reinterestedinevenmoreinformationaboutusingtheCSSMenuDesigner,checkoutthistutorial:HowtoUsetheCSSMenuDesigner.Ifyou’reallabouttheold‐schoolDHTMLMenuBuilder,youcanstilluseit.Justdownloadthefree,stand‐aloneversionfromthislocation:http://www.coffeecup.com/free‐dhtml/
Customization
HowdoIturnontheVisualEditor?Bydefault,theVisualEditoristurnedoff.Toturnitbackon,gotoTools>Preferences>Generaltab,anduncheckHideVisualEditortab.
HowdoIimportanotherlanguagedictionaryintotheHTMLEditor?
ToimportotherlanguagedictionariesintotheHTMLEditorforspellcheckingneeds,downloadtheproper.admfilefromhttp://www.coffeecup.com/help/articles/how‐do‐i‐add‐custom‐dictionaries‐to‐the‐html‐editor/andsaveitintoC:\ProgramFiles\CoffeeCupSoftware\.
Next,opentheHTMLEditorandgotoTools>SpellCheckerOptions>Dictionariesbutton>Newbutton.Thisopensawindowthatallowsyoutoadd
363
![Page 364: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/364.jpg)
customdictionaries.Enterthenameofthe.admfileyoudownloadedandthenclickOK.YoucanalsogotoTools>SpellCheckerOptionsandselectLocateDictionariesfromtheDictionariesarea.Thisopensawindowthatallowsyoutobrowseyourcomputerforthe.admfileyouadded.Afterusingeitheroftheseoptions,thedictionarywillappearintheDictionariesareaoftheSpellingOptionswindow.Putacheckmarkintheboxnexttowhicheverdictionaryyouwanttouse,andthenclickOK.
ErrorMessagesandTroubleshooting
IgetanerrorthatreferstoMFC42.dll.Whenyoureceivethiserror,itmeanstheversionofMFC42.dllonyourcomputerisolderthantheoneinstalledwiththeprogram.Forwhateverreason,thefileisnotbeingupdatedduringtheinstall.Followthesestepstofixtheproblem:
1. Uninstall the HTML Editor from your computer. 2. Do a search for MFC42.dll, and then rename it. What you decide to call it doesn't
matter; what you're doing here is, in essence, removing the file with the name MFC42.dll so that when you reinstall the HTML Editor, it can install the newest version of the file.
3. Install the latest version of the HTML Editor from your download center (http://www.coffeecup.com/help/myorders/).
Ifthisdoesn'twork,youmayneedtoinstallapatchfromMicrosoftfromthislink:http://support.microsoft.com/default.aspx?scid=kb;en‐us;259403.
Vistaisn'tdisplayingthefilesinmyWorkingfolder.Bydefault,theHTMLEditorwillsavefilesintheWorkingfolder,whichislocatedatC:\ProgramFiles\CoffeeCupSoftware\Working.However,Vistamayinterferewiththisprocess,creatingavirtualfolderandwritingthefilesthere. Togivetheapplicationfullpermissiontowritetotheproperfolder,makesuretheHTMLEditorisclosed,andthenright‐clicktheHTMLEditordesktopicon.SelectRunasAdministrator.Thisshouldproperlylaunchtheprogramforyou.Ifitdoes,great!Youcancontinuetolaunchtheprograminthisway,oryoucangoastepfurtherandconfiguretheshortcuttoalwaysrunasadministrator.Here'show:
1. Right-click the shortcut icon and select Properties. 2. Click the Compatibility tab. 3. Put a checkmark next to Run This Program as an Administrator.
364
![Page 365: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/365.jpg)
4. Put a checkmark next to Run This Program in Compatibility Mode For: and then select Windows XP Pro Service Pack 2.
5. Click OK.
Nowwhenyoudouble‐clicktheHTMLEditorshortcut,itwillrunandsavefilesnormally.Formoreinformationaboutthisissueandfilevirtualization,checkoutScottHanselman'sComputerZen(http://www.hanselman.com/blog/VistasShowCompatibilityFilesAndTheScrumptiousWonderThatIsFileVirtualization.aspx).
Igetanerrormessagethatsays,“Nosuchinterfacesupported.”Ifyoureceivethe"NoSuchInterfaceSupported"errorwhenlaunchingtheHTMLEditorortryingtoaccesstheVisualEditorintheprogram,youhaveinstalledthesoftwareunderalimiteduseraccount.TheVisualEditorrequiresaccesstothesystem32folder,whichalimiteduseraccountcannotaccess.Tocorrectthisproblem,logintoWindowsasanadministrator.
IgetanerrorI/O183.YoumayreceivethiserrorifyouaretryingtoeditfilesthattheHTMLEditorcannotunderstandbecausetheydon'tcontainvalidHTMLcode.YouwillnotbeabletoeditthesefileswiththeHTMLEditor.IfyouaretryingtoopenafilecreatedinanotherWebdesignprogram,suchasVisualSiteDesigner,thereisawaytoworkaroundthis.Ifyouhaveuploadedyourworktoyourserver,youcandownloadtheHTMLfilesusinganFTPclientsuchasDirectFTP(http://www.coffeecup.com/direct‐ftp),orwiththeHTMLEditor'sOpenFromWebfunction.ToopenafilefromtheWeb,gotoFile>OpenFromWeb,andthenentertheURLofthepageyouwishtodownload.Thismethodonlyworksonepageatatime,soifyouwanttoworkwithanentireWebsiteinsteadofasingleWebpage,youmaybebetteroffdownloadingthefileswithanFTPclient.
IseeredX’sinsteadofmyimages.Thereareacoupleofdifferentreasonsthatcouldexplainwhyyourimagesarenotdisplayingcorrectly:
1. In addition to uploading the HTML page, you also need to upload the images it references. For instance, if you have a page called page.html that displays two images, dog.png and cat.png, you will need to upload all three files: page.html, dog.png, and cat.png.
2. The HTML code must reference these images correctly. Your document could be
linking to the files on your hard drive or in the wrong location in your Working folder, or the links could be formatted incorrectly.
365
![Page 366: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/366.jpg)
3. Make sure the capitalization in the image file name matches the capitalization in the HTML document. For example, if you link to dog.png but the actual file name is Dog.png, the image will not display correctly.
MostoftheseproblemscanbesolvedbytransitioningtousingWebsiteProjects.FormoreinformationabouthowWebsiteProjectswork,returntotheHTMLEditorandgotoMyWebsites>AllWebsiteProjects>WhatisaWebsiteProject.ThisopensacomprehensiveguidetousingWebsiteProjects.Betteryet,itactuallyisaWebsiteProject,soyou’llgettoseefirsthandhowtheywork.Ifyouaren’tsurewhetheryouuploadedyourimages,trytovisittheURLoftheimage.Forexample,ifyouhaveanimagesavedintherootfolderofyourservercalleddog.png,useyourfavoriteWebbrowsertovisithttp://www.yourwebsitename.com/dog.png.Ifyougeta404error,youeitherdidnotuploadtheimageoruploadedittoadifferentfolderonyourserver.Toresolvethisissue,switchtoWebsiteProjects,whichyoutokeeptrackofwhereyourimagesarelocatedinyourWebsitestructureandcaninsertcorrectlinkstotheimageinyourHTMLpage.Ifyourimagetagsarereferencingimagesonyourharddriveinsteadofyourserver,saveyourcurrentWebsitefilestoanewWebsiteProject.Next,correctthecodeonyourWebpagessoitusesrelativepathstoyourimagefiles.Todothis,openthepagewhereyourimagesarebeingreferencedincorrectly.Foreachimage,youwillfindanimagetag(<img>)andthesrcattribute(src="image.png"),whichlooksomethinglikethis:
<img src="file://C:\Program Files\CoffeeCup Software\Working\filename.png">
Thatfilepathiswhat'scausingallthetrouble—ittellstheWebbrowsertolookforafileonyourcomputer.DeletethiswholechunkofcodeandthenfindtheimageinyourWebsiteProject.Right‐clickitandselectInsertImageIntoCurrentDocument.Thisplacesanaccuraterelativelinktothefileinyourpageforyou.Nowjustsaveyourworkanduploadyourchangestoyourserver.
Squaresorquestionmarksappearinsteadofspaces.Thesecharacterswillappearinplaceofspacesifthetextwasoriginallywritteninanotherapplication,suchasMicrosoftWord,andthencopiedandpastedintotheVisualEditor.ThereasonforthisisthattheoriginalapplicationdoesnotusethesamehexvaluetorepresentspacesthattheHTMLEditordoes.Tocorrectthisissue,switchtotheCodeEditorandmanuallydeletethesquares.
366
![Page 367: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/367.jpg)
Miscellaneous
WhatisthedifferencebetweentheHTMLEditorandtheFreeHTMLEditor?TheHTMLEditorcontainsafewkeyfeaturesnotfoundinFreeHTMLEditor,includingtheCSSMenuDesigner,thetabledesigner,andtheabilitytoaddandeditXHTMLtags,aswellasthebuilt‐incopiesofSiteSpider,ImageMapper,andWebsiteColorSchemer.
HowdoIinstallHTMLEditorthemes?Followthesestep‐by‐stepinstructionstoinstallHTMLEditorthemes:
1. Download your HTML Editor Themes from your download center (http://www.coffeecup.com/help/myorders/). The themes will be in .zip format.
2. Make sure the HTML Editor is closed. 3. Unzip the themes using your favorite ZIP utility or by right-clicking the folder
and selecting Extract All. 4. Go to the following file path: C:\Program Files\CoffeeCup Software\Themes\.
There, you’ll see a list of folders that correspond with the categories in the Theme Chooser. If you want to save your theme to one of these categories, drag and drop the extracted folder to the desired category. If you would rather create a new category for the theme, create a new folder, give it the name you want to appear in the Theme Chooser, and then drag and drop the extracted folder into this folder.
5. Open the HTML Editor and click Start With a Theme. This opens the Theme Chooser. Select your theme and click OK.
6. In the window that appears, select the Website Project where you would like to save the theme.
7. Double-click the page you wish to edit, such as index.html, about-us.html, or contact-us.html. It will open in the Code Editor, and you will be able to modify it normally.
Ibuiltmysiteusingathirdparty'sWebpageBuilder.WillIbeabletousetheHTMLEditor?Yes!YoucanuseCoffeeCupHTMLEditortoopenanyHTMLpagecreatedwithanothercompany'sWebdesignsoftware.
367
![Page 368: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/368.jpg)
KeyboardShortcutsHTMLEditorofferstheoptiontoaccessmanyofitsmostcommonlyusedfunctionsquicklybyusingkeyboardshortcuts.Belowisacompletelistofallthekeyboardshortcutsavailableinthisprogram:
• New Blank Page – Ctrl+N • Open – Ctrl+O • Save – Ctrl+S • Save As – Shift+Ctrl+S • Print – Ctrl+P • Undo – Ctrl+Z • Redo – Ctrl+Q • Cut – Ctrl+X • Copy – Ctrl+C • Paste – Ctrl+V • Delete (Table Designer Only) – Ctrl+Del • Select All – Ctrl+A • Convert to Uppercase – Shift+Ctrl+U • Convert to Lowercase – Shift+Ctrl+L • Find – Ctrl+F • Replace – Ctrl+H • Find Next – F3 • Icon View – Shift+Ctrl+F4 • List View – Shift+Ctrl+F5 • Detail View – Shift+Ctrl+F7 • Small Icon View – Shift+Ctrl+F8 • Thumbnail View – Shift+Ctrl+F9 • Split-Screen Preview – F12 • Set Bookmark 0–9 – Shift+Ctrl+[0–9] • Go to Bookmark 0–9 – Ctrl+[0–9] • Go to Line Number – Ctrl+G • Insert Link – Ctrl+L • Insert Target – Ctrl+T • Insert E-mail Link – Ctrl+E • Insert Image – Ctrl+M • Insert Comment – Shift+Ctrl+C • Bold – Ctrl+B • Italic – Ctrl+I • Underline – Ctrl+U • Indent – Shift+Ctrl+. • Unindent – Shift+Ctrl+, • Paragraph – Ctrl+Enter • Test With Default Browser – Ctrl+F9 • Test With Favorite Browser – Ctrl+F5 • View Help File – F1
368
![Page 369: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/369.jpg)
GlossaryA C D–G H
I–L
M–N P R–S T U–X
AalttextAdescriptionofanimagedisplayedwhentheimagecannotbeshown,suchasinatext‐onlyorspeechbrowser,orifauserhasaslowconnection.YoushouldalwaysusedetailedalttextforallcontextuallyimportantorprominentimagesonyourWebpage.attributeProvidesadditionalinformationaboutanHTMLelement.Forexample,intheHTMLforalink(<a href=“http://www.coffeecup.com”>Click here for great software!</a>),hrefwouldbeanattributeoftheelementa.attributevalueThevalueofagivenattribute.Attributevaluesarealwaysenclosedindoublequotes.Forexample,intheHTMLforalink(<a href=“http://www.coffeecup.com”>Click here for great software!</a>),http://www.coffeecup.comwouldbeavalueoftheattributehref.
CcharactersetThesetofcharactersavailabletobeusedinyourcodeandonyourWebsite.Forexample,ifyouwanttocreateaWebsiteusingCyrillic,thatwoulduseadifferentcharactersetthanaWebsitethatusedtheLatinalphabet.CodeEditorTheareaoftheprogramusedtoviewandeditthecodethatmakesupapage.ItcanbeusedtoeditHTML,serverfilessuchasPHPandCSS,andtext.codesnippetApredefinedorcustomchunkofcodethathasbeensavedandcanbereused.CodesnippetsarefoundintheCodeSnippetstab.
369
![Page 370: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/370.jpg)
commentHTMLelementsthatarenotrenderedbyWebbrowsersandcanbeusedtoleavenotesforyourselforforanyoneelsewhomayviewyourcode.CSSAbbreviationforCascadingStyleSheets.ThisisalanguagethatisstoredinastylesheetanddefineshowanHTMLdocumentisdisplayed.
D–GDOCTYPEAbbreviationforDocumentTypeDeclaration.ThistellsaWebbrowserthetypeandversionofthelanguagethepageiswrittenin.documentdependencyAlinktoanexternalfile,suchasanimageorexternalWebsite,inadocument.drop‐downlistInaform,thisisabarwithanarrowthatexpandstoshowalistofitemswhenclicked.Itisbestsuitedforlistsinwhichyourusercanonlyselectoneoption.elementEverythingbetweenthestartandendHTMLtag.Forexample,<a href=“http://www.coffeecup.com”>Click here for great software!</a>isanelement.formmethodThemethodusedtotransferformdatatoorfromaserver.frameAnindividualsectionofaframes‐basedlayout.FramesallowyoutohavemultipleWebpagesopeninthesamewindow.FTPAbbreviationforFileTransferProtocol.ThisistheprocessoftransferringWebsitefilestoaserver.gutterAbartotheleftofthecodeintheCodeEditorwherelinenumbers,bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.
370
![Page 371: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/371.jpg)
HheadelementThesectionofanHTMLdocumentthatcontainsheadelements,includingthefollowingtags:<meta>,<script>,<style>,and<title>.hexcodeAsix‐charactercodeconsistingoflettersand/ornumbersthatrepresentsacolor.hiddentextFormtextthatisnotrenderedbyWebbrowsersbutthatdoesappearintheformresults.Itcanbeusedforsortingandfilteringinformation.highlightingschemeAsystemofhighlightingthatcanbeappliedtodifferentcodelanguagesintheHTMLEditor.Thiscanbeusedtohelpdistinguishdifferentelementsandattributes.horizontalruleAhorizontallinethatcanbeaddedtoyourpagedesign.hostnameTheaddressyouneedtoconnecttotheserver.Ifyoudonotknowthisinformation,contactyourhostingprovider.HTMLAbbreviationforHyperTextMarkupLanguage.ThisisthelanguageusedtocreateWebpages.hyperlinkAreferenceonaWebpagethattakesyoutoanewlocation.
I–LimagemapAninteractiveimagewithareasthatcanbeclickedtolinktheusertoadifferentlocation.kilobyteAkilobyte(abbreviatedKb)equals1024bytesandisareferencetofilesize.layoutAfeatureintheHTMLEditorthatcontainstheHTMLforabasicpagestructure.
371
![Page 372: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/372.jpg)
linkShortforhyperlink.linkhovercolorThecolorofalinkwhenauserholdstheirmouseoverit.listboxAtextboxcontainingalistofitemsthatyourusercanselect.Alistboxisbestsuitedforlistsinwhichyourusercanselectseveraloptions.
M–NmarginThewhitespacesurroundinganelement.Whenthemarginisincreasedforaselectedelement,morespacewillappearbetweentheelementandtheobjectssurroundingit.menubarLocatedatthetopoftheprogram,theMenubargivesyouaccesstoalltheprogramoptionsandtools,aswellasthingslikeprintingprojects,customizingtheappearanceoftheworkspace,andexitingtheprogram.metadescriptionAshortdescriptionofyourWebsite.Itshouldbenolongerthan50words.metakeywordWordsthatdescribeyourWebpage.Theymusteachbeseparatedbyacommaandaspace.metatagAnHTMLtaglocatedintheheadsectionthatcontainskeywordsandadescription.MIMEPostMethodAtypeofapplicationthatprocessesformdata.non‐breakingspace( )AcharacterentityrenderedbyWebbrowsersasaspace.Thiscanbeusedtoinsertextraspaces,sinceHTMLonlyallowsforonespacebetweeneachword.
372
![Page 373: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/373.jpg)
PpaddingThewhitespacewithinanelement.Whenpaddingisincreasedforaselectedelement,morespacewillappearbetweenitsouteredgesandtheobjectscontainedwithinit.passivemodeAwayofconnectingtoaserver.Enablepassivemodeifyouexperiencetroubleconnecting.pretagsHTMLtagthatpreservetheformattingofthetexttheysurround,includingextraspacesandindenting.PHPAscriptinglanguageusedtocreatedynamicWebpages.pixelAcomputerscreenconsistsofnumeroustinycoloreddots.Thesedotsarecalledpixels.portFTPinformationthatdefineshowtheserverrespondstoacertainprotocol.FormostFTPconnections,theportshouldbesetto21.PreviewtabTheareaoftheprogramthatcontainsbuilt‐inbrowser(InternetExplorer)youcanusetopreviewyourWebsite.proxyAspecialkindofFTPconnection.Ifyouareunsurewhetheryouuseaproxytoconnect,chancesareyoudonot,butyoucancontactyourhostingprovidertomakesure.
R–SremotefolderInanFTPprofile,thissettingdetermineswherefileswillbestoredonaserver.Typicalfoldernamesarepublic_html,web,andwww.Ifyoudonotknowthisinformation,youwillneedtocontactyourhostingprovider.ResourcebrowserTheareaontheleft‐handsideoftheprogramthatcontainstheMyWebsites,MyComputer,Tags,CodeSnippets,andCharactertabs.
373
![Page 374: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/374.jpg)
scriptAprograminalanguagelikeJavaScriptorPHPthatcreatesinteractiveWebpages.serverAcomputerthatstoresWebsitefilessoothersmayviewthesiteontheInternet.StatusbarLocatedatthebottomoftheworkspace,theStatusbarallowsyoutoswitchbetweenopendocumentsandviewbasicinformationabouttheopenfile.stylesheetACSSdocumentthatdefineshowanHTMLdocumentisdisplayed.
TtagThecontentinsideanglebracketsinanHTMLelement.Forexample,intheHTMLforalink(<a href=“http://www.coffeecup.com”>Click here for great software!</a>),<a href=”http://www.coffeecup.com”>isthestartingtag,and</a>istheendingtag.targetAspecificlocationwherealinkpoints.Thiscanbeadifferentareaonthesamepage,anotherframe,oranewbrowserwindow.textareaAmultiple‐linefieldwhereyourusercantypeinformation.Thisisbestsuitedforlongeranswers,suchasmessages,feedback,etc.themeApagecreationoptionthatincludesthreepages(index.html,about‐us.html,andcontact‐us.html)thatincludetheHTMLandimagesforabasicdesign.thumbnailAsmallerversionofanimage.Thumbnailsareoftenusedaslinkstotheoriginalversionoftheimage.titletagUsedtospecifyapagetitle,whichappearsonthebrowser'stitlebarandappearsinsearchresults.Agoodpagetitlesuccinctlydescribesthecontentonthepage.toolbarLocatedacrossthetopoftheprogramandthedifferentcomponentswithintheprogram,toolbarsoffershortcutstocommonlyusedprogramfunctions.
374
![Page 375: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/375.jpg)
U–XundocumentedcharacterAcharacterthatisnotsupportedinagivencharactersetorcodelanguage.URLAWebaddress.http://www.coffeecup.comisaURL.VisualEditorTheareaoftheprogramthatallowsyoutoworkdirectlywiththeelementsinyourpageinaWYSIWYG(WhatYouSeeIsWhatYouGet)environment.WebbrowserAprogramusedtoaccesstheInternet.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,GoogleChrome,andSafari.WebsiteProjectAcomprehensivesystemthatkeepsyourWebpagesandanyassociatedfilesorganized.YoucanworkwithWebsiteProjectsintheWebsiteProjectstab.WorkingfolderIfyouareusingaWebsiteProject,bydefault,theWorkingfolderisthesameastheWebsiteProjectsfolder.Otherwise,itisthefolderwhereyourWebsitefilesaresaved.WYSIWYGAbbreviationforWhatYouSeeIsWhatYouGet.ThisisakindofWebdesignsoftwarewhereusersworkwiththeactualpageelementsinsteadofHTMLcode.XHTMLAbbreviationforExtensibleHypertextMarkupLanguage.ThisisalanguageusedtocreateWebpages.
375
![Page 376: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/376.jpg)
AboutCoffeeCupSoftwareCoffeeCupSoftware,Inc.wasfoundedin1996,buttherootsofournamegobackabitfurther.Here’showitallstarted:ThestoryofCoffeeCupbeganinarealcoffeehousecalledTheRaven&TheSparrowin1994.ItwastheonlyplaceinCorpusChristi,Texas(andoneofonlyadozenorsoworldwide)thatofferedfreeInternetaccess.Peoplecouldcomeby,orderacappuccino,andsurftheWeb,whichwasquitenewatthetime.AsmorepeoplewereexposedtotheInternet,morepeoplewantedtobeapartofit.Withallthesecomputerjunkiesasguests,itwasclearthatthecoffeecup.comdomainnameneededtobepurchasedandthataWebsiteforthecoffeehouseneededtobemade.ThecoffeehousegotalittlepressfromTVandthelocalnewspaper,andotherbusinessesstartedtocallaboutmakingWebsitesforthem,too.BackthenintheearlydaysoftheInternet,goodsoftwaretoeasilycreategood‐lookingWebsiteswasreallyhardtofind.So,aswiththefirstWebsiteforthecoffeehouse,thesesitesweremadewithhand‐codedHTMLusingNotepad.Oneday,whilechattingwithafewregularsaboutcreatingWebsites,theideaofasimpleyetpowerfulHTMLeditorwasborn.WewantedtocreateaniftypieceofsoftwarethatwouldmakeiteasyforpeoplelikeustobuildourownWebsites.Oneoftheregularswasaprogrammer,sowegottowork,andinAugustof1996thefirstversionofourHTMLEditorwasreleased.Sincethecoffeehousealreadyhadthewww.coffeecup.comdomainname,ourfirstsoftwareprogramwascalledtheCoffeeCupHTMLEditor,andthecompanywasnamedCoffeeCupSoftware.ThesoftwarewaspostedontheWebsite,anditwasaninstanthit!Peoplefromallovertheworldweredownloadingtheprogramande‐mailingtheirpraises.Atthesametimethecoffeehousestartedtoencounterparkingproblems.Yousee,thecoffeehousewasquitepopular,andwithonlyeightparkingspots,peopleoftenparkedalongthestreet.ApparentlythiswasaproblemtothecityofCorpusChristi.TheCityCouncilsuggestedwebuymorelandandputinanewparkinglot,butthatwouldbeanexpensiveventure.Besides,creatingsoftwarewasalotmorefun,andwiththatamountofmoney,wholenewapplicationscouldbebuilt!SoonthecoffeehousewasclosedaswefocusedoncreatingandreleasingsharewareapplicationsliketheImageMapperandDirectFTP.Aftersometime,theeffortsbegantopayoffasmoreandmorepeoplestartedusing(andpayingfor)thesoftware.TherestisInternethistory.
376
![Page 377: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/377.jpg)
Inthelast10yearswehavemovedtoalargeroffice,startedaWebhostingcompany,asearchenginesubmissionservice,andcreatedover25othersoftwareprogramssothatotherscouldfulfilltheirdreamsofWebdesign,too.Nowwithmorethan29,905,323usersworldwide,andsoftwaresoldinover87countries,CoffeeCupSoftwarehasgrownbeyondourwildestdreams.Wehavewonlotsofawards,includingbeingNo.400intheInteractive500,arankingofthebestInternetandE‐Commercecompanies.Westillrememberthegoodolddaysthough,whenwewerejustasmallcoffeehouse.Westrivetokeepthatsamelevelofpersonalservicewithasmilethatwentwitheverycupofsteaminghotcappuccino.
377
![Page 378: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/378.jpg)
ContactUsWegiveyoumorethenjustsoftware.Wehaveamissionwhenitcomestosupport:Beextraordinary!Whenyoubuyoursoftware,whatyougetgoeswellbeyondwhatyouexpectfromasoftwarecompany.Wedonotoffertechsupport—weoffercoachesandcounselorstohelpyouwiththesoftwareandWebdesign.WearehereforyousoyoucanbeasuccessfulWebmaster,notjustlearnapieceofsoftware.Registeredcustomersalwaysget:
• The software you paid for, of course. • Free live chat support (ask a question, get an answer live). • Free upgrades for life and access to download software at any time. • Access to our User Forum where you can talk about Web design or business tips. • Availability to visit our offices to sit down for some pointers. • Exclusive discounts and sneak peeks at new software or services.
TrialSupportServices: Wearealwayshappytohelpyouwithyourquestionsaboutoursoftware.IfyouareusingatrialversionofoursoftwareyoucanusetheOnlineHelpandKnowledgebaselinksaboveore‐mailoursupportstaffanytime.Feelfreetoaskusyourquestions,andwewillreplyassoonaspossible.GetprioritysupportandaccesstoourCustomerCareCenterwhenyouorderoursoftware.Ourmissionistoprovidethebestpossibleservicetoourcustomers.JointheranksofWebmastersworldwideandorderoursoftwaretoday.You'llbehappyyoudid.:)OurAddress:CoffeeCupSoftware165CourtlandStreetSuiteA,Box312Atlanta,GA30303USAPhone:(678)495‐3480http://www.coffeecup.com
378
![Page 379: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/379.jpg)
ThankYouToallourusers—youknowwhoyouare...Withoutthesupportandfeedbackofthosewhodownloadandbuyoursoftware,wewouldn'tbehere.Weareveryluckytohavehadsomanypeopleovertheyearsthinkoursoftwareisgreat,andweareproudthatyoustilldo.
ThankYouEveryone!
379
![Page 380: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/380.jpg)
EndUserLicenseAgreementBYCLICKINGTHEACCEPTBUTTONORINSTALLINGTHESOFTWARE,YOU(EITHERANINDIVIDUALORASINGLEENTITY)CONSENTTOBEBOUNDBYANDBECOMEAPARTYTOTHISAGREEMENT.IFYOUDONOTAGREETOALLOFTHETERMSOFTHISAGREEMENT,CLICKTHEBUTTONTHATINDICATESTHATYOUDONOTACCEPTTHETERMSOFTHISAGREEMENTANDDONOTINSTALLTHESOFTWARE.(IFAPPLICABLE,YOUMAYRETURNTHEPRODUCTTOTHEPLACEOFPURCHASEFORAFULLREFUND.)1.LicenseGrant.Subjecttothepaymentoftheapplicablelicensefees,andsubjecttothetermsandconditionsofthisAgreement,CoffeeCupSoftwareherebygrantstoyouanon‐exclusive,non‐transferablerighttouseonecopyofthespecifiedversionoftheSoftwareandtheaccompanyingdocumentation(the"Documentation")ononecomputeronly.2.Term.ThisAgreementiseffectiveforanunlimiteddurationunlessanduntilearlierterminatedassetforthherein.ThisAgreementwillterminateautomaticallyifyoufailtocomplywithanyofthelimitationsorotherrequirementsdescribedherein.UponanyterminationorexpirationofthisAgreement,youmustdestroyallcopiesoftheSoftwareandtheDocumentation.YoumayterminatethisAgreementatanypointbydestroyingallcopiesoftheSoftwareandtheDocumentation.3.OwnershipRights.TheSoftwareisprotectedbyUnitedStatescopyrightlawsandinternationaltreatyprovisions.CoffeeCupSoftwareanditssuppliersownandretainallright,titleandinterestinandtotheSoftware,includingallcopyrights,patents,tradesecretrights,trademarksandotherintellectualpropertyrightstherein.Yourpossession,installation,oruseoftheSoftwaredoesnottransfertoyouanytitletotheintellectualpropertyintheSoftware,andyouwillnotacquireanyrightstotheSoftwareexceptasexpresslysetforthinthisAgreement.4.Restrictions.Youmaynotrent,lease,loan,sublicenseorreselltheSoftware.YoumaynotpermitthirdpartiestobenefitfromtheuseorfunctionalityoftheSoftwareviaatimesharing,servicebureauorotherarrangement.YoumaynottransferanyoftherightsgrantedtoyouunderthisAgreement.Youmaynotreverseengineer,decompile,ordisassembletheSoftware,excepttotheextenttheforegoingrestrictionisexpresslyprohibitedbyapplicablelaw.Youmaynotmodify,orcreatederivativeworksbasedupon,theSoftwareinwholeorinpart.YoumaynotcopytheSoftwareorDocumentation.exceptthatyoumayeither(a)makeonecopyoftheSoftwaresolelyforbackuporarchivalpurposes,or(b)transfertheSoftwaretoasingleharddiskprovidedthatyoukeeptheoriginalsolelyforbackuporarchivalpurposes.Youmaynotremoveanyproprietary
380
![Page 381: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/381.jpg)
noticesorlabelsontheSoftware.AllcopiesmustcontainthesameproprietarynoticesthatappearonandintheSoftware.AllrightsnotexpresslysetforthhereunderarereservedbyCoffeeCupSoftware.5.WarrantyandDisclaimer.a.LimitedWarranty.CoffeeCupSoftwarewarrantsthatforsixty(60)daysfromthedateoforiginalpurchasethemedia(e.g.,CD‐Rom)onwhichtheSoftwareiscontainedwillbefreefromdefectsinmaterialsandworkmanship.b.Remedies.CoffeeCupSoftware'sanditssuppliers'entireliabilityandyourexclusiveremedyforanybreachoftheforegoingwarrantyshallbe,atCoffeeCupSoftware'soption,either(i)returnofthepurchasepricepaidforthelicense,ifany,or(ii)replacementofthedefectivemediainwhichtheSoftwareiscontained.YoumustreturnthedefectivemediatoCoffeeCupSoftwareatyourexpensewithacopyofyourreceipt.Thislimitedwarrantyisvoidifthedefecthasresultedfromaccident,abuse,ormisapplication.Anyreplacementmediawillbewarrantedfortheremainderoftheoriginalwarrantyperiod.OutsidetheUnitedStates,thisremedyisnotavailabletotheextentCoffeeCupSoftwareissubjecttorestrictionsunderUnitedStatesexportcontrollawsandregulations.c.WarrantyDisclaimer.Exceptforthelimitedwarrantysetforthherein,THESOFTWAREISPROVIDED"ASIS."TOTHEMAXIMUMEXTENTPERMITTEDBYAPPLICABLELAW,CoffeeCupSoftwareDISCLAIMSALLWARRANTIES,EITHEREXPRESSORIMPLIED,INCLUDINGBUTNOTLIMITEDTOIMPLIEDWARRANTIESOFMERCHANTABILITY,FITNESSFORAPARTICULARPURPOSE,TITLEANDNONINFRINGEMENTWITHRESPECTTOTHESOFTWAREANDTHEACCOMPANYINGDOCUMENTATION.YOUASSUMERESPONSIBILITYFORSELECTINGTHESOFTWARETOACHIEVEYOURINTENDEDRESULTS,ANDFORTHEINSTALLATIONOF,USEOF,ANDRESULTSOBTAINEDFROMTHESOFTWARE.WITHOUTLIMITINGTHEFOREGOINGPROVISIONS,CoffeeCupSoftwareMAKESNOWARRANTYTHATTHESOFTWAREWILLBEERROR‐FREEORFREEFROMINTERRUPTIONSOROTHERFAILURESORTHATTHESOFTWAREWILLMEETYOURREQUIREMENTS.SOMESTATESANDJURISDICTIONSDONOTALLOWLIMITATIONSONIMPLIEDWARRANTIES,SOTHEABOVELIMITATIONMAYNOTAPPLYTOYOU.Theforegoingprovisionsshallbeenforceabletothemaximumextentpermittedbyapplicablelaw.6.LimitationofLiability.UNDERNOCIRCUMSTANCESANDUNDERNOLEGALTHEORY,WHETHERINTORT,CONTRACT,OROTHERWISE,SHALLCoffeeCupSoftwareORITSSUPPLIERSBELIABLETOYOUORTOANYOTHERPERSONFORANYINDIRECT,SPECIAL,INCIDENTAL,ORCONSEQUENTIALDAMAGESOFANYCHARACTERINCLUDING,WITHOUTLIMITATION,
381
![Page 382: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/382.jpg)
DAMAGESFORLOSSOFGOODWILL,COMPUTERFAILUREORMALFUNCTION,ORFORANYANDALLOTHERDAMAGESORLOSSES.INNOEVENTWILLCoffeeCupSoftwareBELIABLEFORANYDAMAGESINEXCESSOFTHELISTPRICECoffeeCupSoftwareCHARGESFORALICENSETOTHESOFTWARE,EVENIFCoffeeCupSoftwareSHALLHAVEBEENADVISEDOFTHEPOSSIBILITYOFSUCHDAMAGES.FURTHERMORE,SOMESTATESANDJURISDICTIONSDONOTALLOWTHEEXCLUSIONORLIMITATIONOFINCIDENTALORCONSEQUENTIALDAMAGES,SOTHISLIMITATIONANDEXCLUSIONMAYNOTAPPLYTOYOU.Theforegoingprovisionsshallbeenforceabletothemaximumextentpermittedbyapplicablelaw.7.Miscellaneous.ThisAgreementisgovernedbythelawsoftheUnitedStatesandtheStateofTexas,withoutreferencetoconflictoflawsprinciples,andthepartiesagreethatthesolelocationandvenueforanylitigationwhichmayarisehereundershallbeNuecesCounty,Texas.TheapplicationoftheUnitedNationsConventionofContractsfortheInternationalSaleofGoodsisexpresslyexcluded.ThisAgreementsetsforthallrightsfortheuseroftheSoftwareandistheentireagreementbetweentheparties.ThisAgreementsupersedesanyothercommunicationswithrespecttotheSoftwareandDocumentation.ThisAgreementmaynotbemodifiedexceptbyawrittenaddendumissuedbyadulyauthorizedrepresentativeofCoffeeCupSoftware.NoprovisionhereofshallbedeemedwaivedunlesssuchwaivershallbeinwritingandsignedbyCoffeeCupSoftwareoradulyauthorizedrepresentativeofCoffeeCupSoftware.IfanyprovisionofthisAgreementisheldinvalid,theremainderofthisAgreementshallcontinueinfullforceandeffect.ThepartiesconfirmthatitistheirwishthatthisAgreementhasbeenwrittenintheEnglishlanguageonly.8.TheSoftwareandDocumentationareprovidedwithRestrictedRights.Use,duplication,ordisclosurebytheU.S.Governmentissubjecttorestrictionsassetforthinsubparagraph(c)1(ii)oftheRightsinTechnicalDataandComputerSoftwareclauseatDFARS252.227‐7013orsubparagraphs(c)(1)and(2)oftheCommercialComputerSoftware‐RestrictedRights48CFR52.227‐19,asapplicable.9.Youagreethatyouwillnotexportorre‐exporttheSoftwareorDocumentationtoanycountry,person,entityorendusersubjecttoU.S.A.exportrestrictions.Restrictedcountriescurrentlyinclude,butarenotnecessarilylimitedtoCuba,Iran,Iraq,Libya,NorthKorea,Sudan,andSyria.YouwarrantandrepresentthatneithertheU.S.A.BureauofExportAdministrationnoranyotherfederalagencyhassuspended,revokedordeniedyourexportprivileges.Copyright©1996‐2007CoffeeCupSoftware,Inc.AllRightsReserved.CoffeeCupSoftware®isaregisteredtrademarkofCoffeeCupSoftware,Inc.
382
![Page 383: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/383.jpg)
NoticeofCopyrightAcceptanceofTermsWelcometotheWebsite(the"Website")ofCoffeeCupSoftware,Inc.("CoffeeCup").OnthisWebsite,CoffeeCupmakesavailabletoyouawiderangeofinformation,software,products,downloads,documents,communications,files,text,graphics,publications,content,tools,forums,resources,andservices.PLEASEREADTHETERMSOFUSECAREFULLYBEFOREUSINGTHISWEBSITE.ByaccessingandusingthisWebsiteinanyway,including,withoutlimitation,browsingtheWebsite,usinganyinformation,usinganycontent,usinganyservices,downloadinganymaterials,and/orplacinganorderforproductsorservices,youagreetoandareboundbythetermsofusedescribedinthisdocument("TermsofUse").IFYOUDONOTAGREETOALLOFTHETERMSANDCONDITIONSCONTAINEDINTHETERMSOFUSE,DONOTUSETHISWEBSITEINANYMANNER.TheTermsofUseareenteredintobyandbetweenCoffeeCupandyou.IfyouareusingtheWebsiteonbehalfofyouremployer,yourepresentthatyouareauthorizedtoaccepttheseTermsofUseonyouremployer'sbehalf.CoffeeCupreservestheright,atCoffeeCup'ssolediscretion,tochange,modify,update,add,orremoveportionsoftheTermsofUseatanytimewithoutnoticetoyou.PleasechecktheseTermsofUseforchanges.YourcontinueduseofthisWebsitefollowingthepostingofchangestotheTermsofUsewillmeanyouacceptthosechanges.UseofMaterialsLimitationsAllmaterialscontainedintheWebsitearethecopyrightedpropertyofCoffeeCup,itssubsidiaries,affiliatedcompaniesand/orthird‐partylicensor's.Alltrademarks,servicemarks,andtradenamesareproprietarytoCoffeeCup,oritssubsidiariesoraffiliatedcompaniesand/orthird‐partlicensor's.Unlessotherwisespecified,thematerialsandservicesonthisWebsiteareforyourpersonalandnon‐commercialuse,andyoumaynotmodify,copy,distribute,transmit,display,perform,reproduce,publish,license,createderivativeworksfrom,transfer,orsellanyinformation,software,productsorservicesobtainedfromtheWebsitewithoutthewrittenpermissionfromCoffeeCup.PrivacyPolicy
383
![Page 384: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/384.jpg)
CoffeeCuprespectsyourdesireforprivacy.YourinformationmaybestoredandprocessedintheUnitedStatesoranyothercountryinwhichCoffeeCuporCoffeeCuprepresentativesandaffiliatesmaintainfacilities.Thisinformationishighlyprotectedandisstoredinasecureandcontrolledenvironment.Byusingthissite,youconsenttoanysuchtransferofinformationoutsideofyourcountryandyouconsenttothetermsofourPrivacyPolicy.CoffeeCup'sPrivacyPolicycanbefoundathttp://www.coffeecup.com/legal/privacy.html.UseofSoftwareontheWebsiteAnysoftwarethatismadeavailabletodownloadfromtheWebsite("Software")isthecopyrightedworkofCoffeeCupand/oritssuppliers.UseoftheSoftwareisgovernedbythetermsoftheEndUserLicenseAgreement,ifany,whichaccompaniesorisincludedwiththeSoftware("LicenseAgreement"),orasexpresslystatedontheWebsitepagesaccompanyingthesoftware.AnenduserwillbeunabletodownloadorinstallanySoftwarethatisaccompaniedbyorincludesaLicenseAgreement,unlessheorshefirstagreestotheLicenseAgreementterms.TheSoftwareismadeavailablefordownloadsolelyforusebyendusersaccordingtotheLicenseAgreement.Anyuse,reproductionorredistributionoftheSoftwarenotinaccordancewiththeLicenseAgreementisexpresslyprohibitedbylaw,andmayresultinseverecivilandcriminalpenalties.Violatorswillbeprosecutedtothemaximumextentpossible.AbsentaLicenseAgreementthataccompaniestheSoftware,useoftheSoftwarewillbegovernedbytheTermsofUse.WITHOUTLIMITINGTHEFOREGOING,COPYINGORREPRODUCTIONOFTHESOFTWARETOANYOTHERSERVERORLOCATIONFORFURTHERREPRODUCTIONORREDISTRIBUTIONISEXPRESSLYPROHIBITED,UNLESSSUCHREPRODUCTIONORREDISTRIBUTIONISEXPRESSLYPERMITTEDBYTHELICENSEAGREEMENTACCOMPANYINGSUCHSOFTWARE.THESOFTWAREISWARRANTED,IFATALL,ONLYACCORDINGTOTHETERMSOFTHELICENSEAGREEMENT.EXCEPTASWARRANTEDINTHELICENSEAGREEMENT,COFFEECUPSOFTWARE,INC.HEREBYDISCLAIMSALLWARRANTIESANDCONDITIONSWITHREGARDTOTHESOFTWARE,INCLUDINGALLWARRANTIESANDCONDITIONSOFMERCHANTABILITY,WHETHEREXPRESS,IMPLIEDORSTATUTORY,FITNESSFORAPARTICULARPURPOSE,TITLEANDNON‐INFRINGEMENT.FORYOURCONVENIENCE,COFFEECUPMAYMAKEAVAILABLEASPARTOFTHESERVICESORINITSMATERIALSORSOFTWAREPRODUCTS,TOOLSANDUTILITIESFORUSEAND/ORDOWNLOAD.COFFEECUPDOESNOTMAKEANYASSURANCESWITHREGARDTOTHEACCURACYOFTHE
384
![Page 385: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/385.jpg)
RESULTSOROUTPUTTHATDERIVESFROMSUCHUSEOFANYSUCHTOOLSANDUTILITIES.YOUSHALLRESPECTTHEINTELLECTUALPROPERTYRIGHTSOFOTHERSWHENUSINGTHETOOLSANDUTILITIESMADEAVAILABLEONTHESERVICESORINCOFFEECUPSOFTWAREPRODUCTS.UseofDocumentsandPublicationsontheWebsiteExceptasexpresslyprohibitedonthisWebsite,youarepermittedtoview,copy,printanddistributepublicationsanddocumentswithinthisWebsite(suchasFAQs,whitepapers,datasheets,pressreleasesandsoon),subjecttoyouragreementthat:a)youruseoftheinformationisforinformational,personal,andnon‐commercialpurposesonly,b)youwillnotmodifythedocuments,publicationsorgraphics,c)youwillnotcopyordistributegraphicsseparatefromtheiraccompanyingtextandyouwillnotquotematerialsoutoftheircontext,d)youwilldisplaythebelowcopyrightnoticeandotherproprietarynoticesoneverycopyyoumake,ande)youagreethatCoffeeCupmayrevokethispermissionatanytimeandyoushallimmediatelystopyouractivitiesrelatedtothispermissionuponnoticefromCoffeeCup.Useforanyotherpurposeisexpresslyprohibitedbylaw,andmayresultinseverecivilandcriminalpenalties.Violatorswillbeprosecutedtothemaximumextentpossible.Thepermissionabovetousedocumentsandpublicationsdoesnotincludepermissiontocopythedesignelements,lookandfeel,orlayoutofthisWebsite.ThoseelementsoftheWebsiteareprotectedbylaw,suchastradedress,trademark,unfaircompetition,andotherlawsandmaynotbecopiedorimitatedinwholeorinpart.Nologo,graphic,soundorimagefromtheWebsitemaybecopiedorretransmittedunlessexpresslypermittedbyCoffeeCup.EXCEPTASEXPRESSLYPROVIDEDOTHERWISE,COFFEECUPAND/ORITSRESPECTIVESUPPLIERSMAKENOREPRESENTATIONSABOUTTHESUITABILITYOFTHEINFORMATIONCONTAINEDINTHEDOCUMENTSANDPUBLICATIONSANDRELATEDGRAPHICSPUBLISHEDONTHEWEBSITEFORANYPURPOSE.EXCEPTASEXPRESSLYPROVIDEDOTHERWISE,ALLSUCHDOCUMENTSANDRELATEDGRAPHICSAREPROVIDED"ASIS"WITHOUTWARRANTYOFANYKIND.EXCEPTASEXPRESSLYPROVIDEDOTHERWISE,COFFEECUPAND/ORITSRESPECTIVESUPPLIERSHEREBYDISCLAIMALLWARRANTIESANDCONDITIONSWITHREGARDTOTHISINFORMATION,INCLUDINGALLWARRANTIESANDCONDITIONSOFMERCHANTABILITY,WHETHEREXPRESS,IMPLIEDORSTATUTORY,FITNESSFORAPARTICULARPURPOSE,TITLEANDNON‐INFRINGEMENT.INNOEVENTSHALLCOFFEECUPAND/ORITSRESPECTIVESUPPLIERSBELIABLEFORANYSPECIAL,INDIRECTORCONSEQUENTIALDAMAGESORANYDAMAGESWHATSOEVERRESULTINGFROMLOSSOFUSE,DATAORPROFITS,WHETHERINANACTIONOFCONTRACT,NEGLIGENCEOROTHER
385
![Page 386: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/386.jpg)
TORTIOUSACTION,ARISINGOUTOFORINCONNECTIONWITHTHEUSEORPERFORMANCEOFINFORMATIONAVAILABLEFROMTHEWEBSITE.THEDOCUMENTSANDRELATEDGRAPHICSPUBLISHEDONTHESERVICESCOULDINCLUDETECHNICALINACCURACIESORTYPOGRAPHICALERRORS.CHANGESAREPERIODICALLYADDEDTOTHEINFORMATIONHEREIN.COFFEECUPAND/ORITSRESPECTIVESUPPLIERSMAYMAKEIMPROVEMENTSAND/ORCHANGESINTHEPRODUCT(S)AND/ORTHEPROGRAM(S)DESCRIBEDHEREINATANYTIMEWITHOUTNOTICE.DisclaimersandOtherNoticesontheUseroftheWebsiteEXCEPTASEXPRESSLYPROVIDEDOTHERWISE,ALLINFORMATION,SOFTWARE,DOCUMENTATION,MATERIALS,SERVICESANDPUBLICATIONAREPROVIDED"AS‐IS"WITHOUTWARRANTYOFANYKINDANDCOFFEECUPHEREBYDISCLAIMSALLWARRANTIESEITHEREXPRESSEDORIMPLIED,INCLUDINGBUTNOTLIMITEDTO,IMPLIEDWARRANTIESOFMERCHANTABILITYORFITNESSFORAPARTICULARPURPOSE.INADDITION,EXCEPTASEXPRESSLYPROVIDEDOTHERWISE,CoffeeCupDISCLAIMSANYWARRANTIESOFNON‐INFRINGEMENT,TITLE,ORQUIETENJOYMENT.INNOEVENTSHALLCOFFEECUPAND/ORITSRESPECTIVESUPPLIERSBELIABLEFORANYSPECIAL,INDIRECTORCONSEQUENTIALDAMAGESORANYDAMAGESWHATSOEVERRESULTINGFROMLOSSOFUSE,DATAORPROFITS,WHETHERINANACTIONOFCONTRACT,NEGLIGENCEOROTHERTORTIOUSACTION,ARISINGOUTOFORINCONNECTIONWITHTHEUSEOFTHISWEBSITE,USEORPERFORMANCEOFSOFTWARE,DOCUMENTS,MATERIALS,PUBLICATIONS,PROVISIONOFORFAILURETOPROVIDESERVICES,ORINFORMATIONAVAILABLEFROMTHEWEBSITE.EXCEPTASEXPRESSLYPROVIDEDOTHERWISE,YOUASSUMEALLRISKSCONCERNINGTHESUITABILITYANDACCURACYOFTHEINFORMATIONWITHINTHEWEBSITE,MATERIALS,PUBLICATIONSANDDOCUMENTS.THEWEBSITE,MATERIALS,PUBLICATIONSANDDOCUMENTSMAYCONTAINTECHNICALINACCURACIESORTYPOGRAPHICALERRORS.COFFEECUPASSUMESNORESPONSIBILITYFORANDDISCLAIMSALLLIABILITYFORANYSUCHINACCURACIES,ERRORSOROMISSIONSINTHEWEBSITE,MATERIALS,PUBLICATIONSANDDOCUMENTSANDINANYOTHERREFERENCE.COFFEECUPMAYMAKECHANGESTOTHEWEBSITE,INFORMATION,SOFTWARE,WEBSITE,DOCUMENTS,PUBLICATIONS,PRICES,TECHNICALSPECIFICATIONS,PRODUCTOFFERINGSANDANYOTHERINFORMATIONANDMATERIALSONTHEWEBSITEATANYTIMEANDWITHOUTNOTICE.
386
![Page 387: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/387.jpg)
THEWEBSITE,DOCUMENTSANDPUBLICATIONSAREDISTRIBUTEDINTERNATIONALLYANDMAYCONTAINREFERENCESORCROSS‐REFERENCESTOCOFFEECUPPRODUCTS,PROGRAMS,ANDSERVICESTHATHAVENOTBEENANNOUNCEDORAVAILABLEINYOURCOUNTRY.SUCHREFERENCESDONOTIMPLYTHATCOFFEECUPINTENDSTOANNOUNCESUCHPRODUCTS,PROGRAMS,ORSERVICESINYOURCOUNTRY.THEWEBSITECONTAINSLINKSTOTHIRD‐PARTYSITESWHICHARENOTUNDERTHECONTROLOFCOFFEECUPANDCOFFEECUPISNOTRESPONSIBLEFORTHECONTENTSONANYLINKEDSITEORANYLINKCONTAINEDINALINKEDSITE,ORANYCHANGESORUPDATESTOSUCHSITES.COFFEECUPISNOTRESPONSIBLEFORWEBCASTINGORANYOTHERFORMOFTRANSMISSIONRECEIVEDFROMANYLINKEDSITE.COFFEECUPISPROVIDINGTHESELINKSTOYOUONLYASACONVENIENCE,ANDTHEINCLUSIONOFANYLINKDOESNOTIMPLYTHATCOFFEECUPENDORSESORACCEPTSANYRESPONSIBILITYFORTHECONTENTONSUCHTHIRD‐PARTYSITES.AccountsandSecurityIfanyoftheservicesontheWebsiterequiresyoutoopenanaccount,youmustcompletetheregistrationprocessbyprovidinguswithtrue,current,completeandaccurateinformationaspromptedbytheapplicableregistrationform,andyouwillmaintainandpromptlyupdatesuchinformationtokeepittrue,current,completeandaccurate.Youalsowillchooseapasswordandausername.Youareentirelyresponsibleformaintainingtheconfidentialityofyourpasswordandaccount.Furthermore,youareentirelyresponsibleforanyandallactivitiesthatoccurunderyouraccount.YouagreetonotifyCoffeeCupimmediatelyofanyunauthorizeduseofyouraccountoranyotherbreachofsecurity.CoffeeCupwillnotbeliableforanylossthatyoumayincurasaresultofsomeoneelseusingyourpasswordoraccount,eitherwithorwithoutyourknowledge.However,youcouldbeheldliableforlossesincurredbyCoffeeCuporanotherpartyduetosomeoneelseusingyouraccountorpassword.Youmaynotuseanyoneelse'saccountatanytime,withoutthepermissionoftheaccountholder.Youacknowledgeandagreethatcertainservicesmayprovidepassword‐restrictedaccesstocustomerinformationsuchasnamesandcertaintermsofyourcontracts.ByusingthisWebsiteandregisteringforsuchservices,youconsenttoCoffeeCup'sdisplayofsuchinformationviatheservicesandacceptallrisksofunauthorizedaccesstosuchinformation.Ifyouprovideanyinformationthatisfalse,inaccurate,outofdate,orincomplete,orCoffeeCuphasreasonablegroundstosuspectthatsuchinformationisfalse,inaccurate,notcurrent,orincomplete,CoffeeCupmaysuspendorterminateyouraccountandrefuseanyandallcurrentorfutureuseoftheservicesoranyportionthereof.Youareresponsibleforallcostsandcharges,includingwithoutlimitation,phonechargesandtelecommunicationsequipment,thatyouincurinordertousetheservices.
387
![Page 388: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/388.jpg)
NoUnlawfulorProhibitedUseAsaconditionofyouruseoftheWebsite,youwillnotusetheWebsiteforanypurposethatisunlawfulorprohibitedbytheseterms,conditions,andnotices.YoumaynotusetheServicesinanymannerthatcoulddamage,disable,overburden,orimpairanyCoffeeCupserver,orthenetwork(s)connectedtoanyCoffeeCupserver,orinterferewithanyotherparty'suseandenjoymentoftheWebsite.Youmaynotattempttogainunauthorizedaccesstoservices,materials,otheraccounts,computersystemsornetworksconnectedtoanyCoffeeCupserverortotheWebsite,throughhacking,passwordminingoranyothermeans.YoumaynotobtainorattempttoobtainanymaterialsorinformationthroughanymeansnotintentionallymadeavailablethroughtheWebsite.UseofServicesontheWebsiteTheWebsitemaycontaine‐mailservices,bulletinboardservices,chatareas,newsgroups,forums,communities,personalwebpages,calendars,photoalbumsand/orothermessageorcommunicationfacilitiesdesignedtoenableyoutocommunicatewithothers(eacha"CommunicationService"andcollectively"CommunicationServices").YouagreetousetheCommunicationServicesonlytopost,sendandreceivemessagesandmaterialthatareproperand,whenapplicable,relatedtotheparticularCommunicationService.Bywayofexample,andnotasalimitation,youagreethatwhenusingtheCommunicationServicesortheWebsite,youwillnot:
• Use the Communication Services or the Website in connection with surveys, contests, pyramid schemes, chain letters, junk e-mail, spamming or any duplicative or unsolicited messages (commercial or otherwise).
• Defame, abuse, harass, stalk, threaten or otherwise violate the legal rights (such as rights of privacy and publicity) of others.
• Publish, post, upload, distribute or disseminate any inappropriate, profane, defamatory, obscene, obscene as to minors, child pornography, racist, lewd, lascivious, filthy, excessively violent, harassing, indecent, unlawful, or otherwise objectionable topic, name, material or information.
• Upload, or otherwise make available, files that contain images, photographs, software or other material protected by intellectual property laws, including, by way of example, and not as limitation, copyright or trademark laws (or by rights of privacy or publicity) unless you own or control the rights thereto or have received all necessary consent to do the same.
• Use any material or information, including images or photographs, which are made available through the Website in any manner that infringes any copyright, trademark, patent, trade secret, or other proprietary right of any party.
• Upload files that contain viruses, Trojan horses, worms, time bombs, cancelbots, corrupted files, or any other similar software or programs that may damage the operation of another's computer or property of another.
388
![Page 389: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/389.jpg)
• Advertise or offer to sell or buy any goods or services for any business purpose, unless such Communication Services specifically allows such messages.
• Download any file posted by another user of a Communication Service that you know, or reasonably should know, cannot be legally reproduced, displayed, performed, and/or distributed in such manner.
• Falsify or delete any copyright management information, such as author attributions, legal or other proper notices or proprietary designations or labels of the origin or source of software or other material contained in a file that is uploaded.
• Restrict or inhibit any other user from using and enjoying the Communication Services.
• Violate any code of conduct or other guidelines which may be applicable for any particular Communication Service.
• Harvest or otherwise collect information about others, including e-mail addresses. • Violate any applicable laws or regulations. • Create a false identity for the purpose of misleading others. • Use, download or otherwise copy, or provide (whether or not for a fee) to a
person or entity any directory of users of the Communication Services or other user or usage information or any portion thereof.
• Use any CoffeeCup domain name as a pseudonymous return e-mail address for any communications that you transmit from another location or through another service.
• Transmit unsolicited or bulk communications to any CoffeeCup account holder or to any CoffeeCup.com or affiliated e-mail address (regardless of whether you use the Website to transmit any such communication).
• Disrupt the normal flow of dialogue, cause a screen to "scroll" faster than other users of the Website are able to type, or otherwise act in a manner that negatively affects other users' ability to engage in real time exchanges.
CoffeeCuphasnoobligationtomonitortheCommunicationServices.However,CoffeeCupreservestherighttoreviewmaterialspostedtotheCommunicationServicesandtoremoveand/oreditanymaterialsinitssolediscretion.CoffeeCupreservestherighttoterminateyouraccesstoanyoralloftheCommunicationServicesatanytime,withoutnotice,foranyreasonwhatsoever.CoffeeCupreservestherightatalltimestodiscloseanyinformationasCoffeeCupdeemsnecessarytosatisfyanyapplicablelaw,regulation,legalprocessorgovernmentalrequest,ortoedit,refusetopostortoremoveanyinformationormaterials,inwholeorinpart,inCoffeeCup'ssolediscretion.AlwaysusecautionwhengivingoutanypersonallyidentifiableinformationaboutyourselforyourchildreninanyCommunicationServices.CoffeeCupdoesnotcontrolorendorsethecontent,messagesorinformationfoundinanyCommunicationServicesand,therefore,CoffeeCupspecificallydisclaimsanyliabilitywithregardtotheCommunicationServicesandanyactionsresultingfrom
389
![Page 390: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/390.jpg)
yourparticipationinanyCommunicationServices.ManagersandhostsarenotauthorizedCoffeeCupspokespersons,andtheirviewsdonotnecessarilyreflectthoseofCoffeeCup.MaterialsuploadedtotheCommunicationServicesmaybesubjecttopostedlimitationsonusage,reproductionand/ordissemination;youareresponsibleforadheringtosuchlimitationsifyoudownloadthematerials.NoticesandProceduresforMakingClaimsofCopyrightInfringementCoffeeCupwillinvestigatenoticesofcopyrightinfringementandtakeappropriateactionsundertheDigitalMillenniumCopyrightAct,Title17,UnitedStatesCode,Section512(c)(2)("DMCA").PursuanttotheDMCA,writtennotificationofclaimedcopyrightinfringementmustbesubmittedtothefollowingDesignatedAgentforthisWebsite:Serviceprovider(s):CoffeeCupSoftware,Inc.Nameofagentdesignatedtoreceivenotificationofclaimedinfringement:J.CorneliusFulladdressofdesignatedagenttowhichnotificationshouldbesent:165CourtlandStreetSuiteA,Box312Atlanta,GA30303
Telephonenumberofdesignatedagent:(678)495‐3480Facsimilenumberofdesignatedagent:(678)495‐3481E‐mailaddressofdesignatedagent:[email protected]
Tobeeffective,theNotificationmustincludethefollowing:
1. A physical or electronic signature of a person authorized to act on behalf of the owner of an exclusive right that is allegedly infringed.
2. Identification of the copyrighted work claimed to have been infringed, or if multiple copyrighted works at a single online site are covered by a single notification, a representative list of such works at that site.
3. Identification of the material that is claimed to be infringing or to be the subject of infringing activity and that is to be removed or access to which is to be disabled, and information reasonably sufficient to permit the service provider to locate the material. Information reasonably sufficient to permit the service provider to contact the complaining party, such as an address, telephone number, and if available, an electronic mail address at which the complaining party may be contacted.
390
![Page 391: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/391.jpg)
4. A statement that the complaining party has a good faith belief that use of the material in the manner complained of is not authorized by the copyright owner, its agent, or the law.
5. A statement that the information in the notification is accurate, and under penalty of perjury, that the complaining party is authorized to act on behalf of the owner of an exclusive right that is allegedly infringed.
SpamE‐mailandPostings YouagreethatCoffeeCupwouldbeirreparablyharmedbytheuse,byyouorothers,oftheWebsiteorfacilitiesinconnectionwiththetransmissionofspamnewsgrouppostingsorunsolicitede‐mailinviolationoftheseTermsofUse,andthatCoffeeCupisentitledtoobtaininjunctivereliefagainstanysuchtransmission(inadditiontoallotherremediesavailableatlaworinequity).CoffeeCupreservestherighttoblock,filterordeleteunsolicitede‐mail.IndemnityYouagreetoindemnify,defendandholdCoffeeCup,anditssubsidiaries,affiliates,officers,agents,co‐branders,partners,andemployees,harmlessfromanyclaimordemand,includingreasonableattorneys'fees,madebyanythirdpartyduetoorarisingoutofyourSubmissions,youruseoftheWebsite,includinganyusebyyouremployees,yourconnectiontotheWebsite,yourviolationoftheTermsofUse,oryourviolationofanyrightsofanother.AdvertisementsandPromotionsCoffeeCupmayrunadvertisementsandpromotionsfromthirdpartiesontheWebsite.Themanner,modeandextentofadvertisingbyCoffeeCupissubjecttochange.Yourcorrespondenceorbusinessdealingswith,orparticipationinpromotionsof,advertisersotherthanCoffeeCupfoundonorthroughtheWebsite,includingpaymentanddeliveryofrelatedgoodsorservices,andanyotherterms,conditions,warrantiesorrepresentationsassociatedwithsuchdealings,aresolelybetweenyouandsuchadvertiser.CoffeeCupisnotresponsibleorliableforanylossordamageofanykindincurredastheresultofanysuchdealingsorastheresultofthepresenceofsuchnon‐CoffeeCupadvertisersontheWebsite.CopyrightandTrademarkInformation1.COPYRIGHTNOTICE:Copyright©1996‐2004CoffeeCupSoftware,Inc.,711N.CarancahuaStreet,CorpusChristi,TX78475USA.AllRightsReserved.Use,duplication,ordisclosurebytheUnitedStatesGovernmentissubjecttotherestrictionssetforthinDFARS252.227‐7013(c)(1)(ii)andFAR52.227‐19.
391
![Page 392: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/392.jpg)
TheTermsofUseconstitutetheentireagreementbetweenyouandCoffeeCupandgovernyouruseoftheWebsite,supersedinganyprioragreementsbetweenyouandCoffeeCuponthesubjectmatter(including,butnotlimitedto,anypriorversionsoftheTermsofUse).Notwithstandingthepriorprovision,totheextent,andonlytotheextent,thatanytermssetforthinthisTermsofUseexpresslycontradictsanytermsofapriorwrittenagreementbetweenyouandCoffeeCupineffectasofthedateofyouruseoftheWebsiteandspecificallyregardingyouruseoftheWebsite("ExecutedAgreement"),suchcontradictorytermssetforthintheExecutedAgreementshallgovern.YoualsomaybesubjecttoadditionaltermsandconditionsthatmayapplywhenyouuseotherCoffeeCupservices,third‐partycontentorthird‐partysoftware.YoumustnotassignorotherwisetransfertheTermsofUsenoranyrightgrantedhereunder.TexaslawandcontrollingU.S.federallawgovernanyactionrelatedtotheTermsofUse,withoutregardtotheprinciplesofchoiceoflaw.ThepartiesspecificallydisclaimtheU.N.ConventiononContractsfortheInternationalSaleofGoods.CoffeeCupcontrolsandoperatesthisWebsitefromitsheadquartersinvariouslocationsintheUnitedStatesofAmericaandmakesnorepresentationthatthisWebsiteisappropriateoravailableforuseinotherlocations.IfyouusethisWebsitefromotherlocations,youareresponsibleforcompliancewithapplicablelocallawsincludingbutnotlimitedtotheexportandimportregulationsofothercountries.YouacknowledgeandagreethatmaterialonthisWebsiteissubjecttotheU.S.ExportAdministrationLawsandRegulations.DiversionofsuchmaterialcontrarytoU.S.lawisprohibited.YouagreethatnoneofthematerialonthisWebsite,noranydirectproducttherefrom,isbeingorwillbeacquiredfor,shipped,transferred,orre‐exported,directlyorindirectly,toproscribedorembargoedcountriesortheirnationals,norbeusedfornuclearactivities,chemicalbiologicalweapons,ormissileprojectsunlessauthorizedbytheU.S.Government.ProscribedcountriesaresetforthintheU.S.ExportAdministrationRegulations.CountriessubjecttoU.S.embargoare:Cuba,Iran,Libya,NorthKorea,Syria,andSudan.ThislistissubjecttochangewithoutfurthernoticefromCoffeeCup,andyoumustcomplywiththelistasitexistsinfact.YoucertifythatyouarenotontheU.S.DepartmentofCommerce'sDeniedPersonsListoraffiliatedlistsorontheU.S.DepartmentofTreasury'sSpeciallyDesignatedNationalsList.YouagreetocomplystrictlywithallU.S.exportlawsandassumesoleresponsibilityforobtaininglicensestoexportorre‐exportasmayberequired.2.ThefailureofCoffeeCuptoexerciseorenforceanyrightorprovisionoftheTermsofUsedoesnotconstituteawaiverofsuchrightorprovision.IfacourtofcompetentjurisdictionfindsanyprovisionoftheTermsofUsetobeinvalid,thepartiesneverthelessagreethatthecourtshouldendeavortogiveeffecttothe
392
![Page 393: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/393.jpg)
parties'intentionsasreflectedintheprovision,andtheotherprovisionsoftheTermsofUseremaininfullforceandeffect.Regardlessofanystatuteorlawtothecontrary,anyclaimorcauseofactionarisingoutoforrelatedtouseoftheWebsiteortheTermsofUsemustbefiledwithinone(1)yearaftersuchclaimorcauseofactionaroseorbeforeverbarred.ThesectiontitlesintheTermsofUseareforconvenienceonlyandhavenolegalorcontractualeffect.
393
![Page 394: CoffeeCup-HTML-Editor-Manual](https://reader034.fdocuments.us/reader034/viewer/2022052321/543dc4d5b1af9f3d0a8b4a57/html5/thumbnails/394.jpg)
SoftwarePrivacyPolicyHereatCoffeeCupSoftware,weunderstandtheimportanceofyourprivacy.CoffeeCupSoftware,Inc.willneverwillfullydiscloseindividuallyidentifiableinformationaboutitscustomerstoanythirdpartywithoutfirstreceivingthatcustomer'spermission.Youcansleepwellknowingyourinformationwillnotleaveouroffices.
1.WillCoffeeCupeversendspamtomye‐mailaddress?Wedonotsendspam.Byenteringyoure‐mailaddress,youagreetoreceivee‐mailfromusaboutproductupdatesandspecialdeals.Weusuallysendonlyonemessageeachmonth.Ifyoudonotwishtoreceivethesemessages,youcanremoveyoure‐mailaddressfromourlistatanytimebyvisitingthispage:http://www.coffeecup.com/help/myprofile/mysubscriptions/.
2.Whydowecollectuserinformationwhenyoudownload?Whenyoudownloadapieceofsoftwarefromus,welogyourname,e‐mailaddress,andIPaddress.Wedothistohelpdetectillegaldownloadsandsoftwarepiracy.Oursoftwareisquitepopularandbelieveitornot,therearesomecrookedpeopleouttherewhotrytostealit.
3.Howistheinformationwecollectused?Wekeepadatabaseofourusers’namesande‐mailaddressesforproductupdateandupgradenotifications.Whenwereleaseanewversionofanyofoursoftwaretitles,wesendamessagetoallourregistereduserstoletthemknow.Otherthanthat,weliketotelloursharewareusersaboutnewandexcitingproducts.
4.Willthispersonalinformationeverbeusedforanyotherpurpose?Theonlytimewewouldeveruseyourpersonalinformationforanyotherreasonistoaidtheproperauthoritiesinfindingfraudulentcreditcardchargesorinfindingthoseresponsibleforillegaldistributionorpiracyofoursoftware.
5.WillCoffeeCupeversellthisinformationtoathirdpartyforadvertising?Areyoukidding?Nope.Never.Notachance.Ifyouhaveanyadditionalquestionsaboutourusageofyourpersonalinformation,pleasecontactusat:CoffeeCupSoftware165CourtlandStreetSuiteA,Box312Atlanta,GA30303USA
394