CoffeeCup-HTML-Editor-Manual

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

http://www.coffeecup.com/html-editor/help/

ProgramOverviewLearnaboutthetoolsandfeaturesavailablewithintheprogram.

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

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

2

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

FrequentlyAskedQuestionsGotaquestionaboutthesoftware?Findyouranswerhere.

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

• Keyboard shortcuts • Glossary

4

CoffeeCupInformationLearnmoreaboutCoffeeCupSoftwareandreviewallthelegalgobbledygook.

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

5

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

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

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

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

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

OpeningtheProgramWhenyoufirstopentheHTMLEditor,twowindowsappear:theTipoftheDaywindowandtheWelcomewindow.

TipoftheDayWindowDisplayshelpfultipsforworkingwiththeprogram.

Tonavigatethetips,usethePreviousandNextbuttons.Ifyoudonotwanttoseethesetipsonstartup,uncheckthecheckboxnexttoShowtipofthedayonstartup.

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

WelcomeWindowContainslinkstocommonlyusedprogramfunctions.

11

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

NewWebsiteProjectOpenstheWebsiteProjectSettingswindow,whichletsyoucreateablankWebsiteProjectortocreateaWebsiteProjectfromexistingfiles.Youcanalsoenteradditionalinformation,suchasyourserversettings,andselectyourfileuploadoptions.

StartWithaThemeOpensawindowthatallowsyoutochoosefromseveralWebpagethemes.

12

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

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

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

AlayoutincludestheHTMLforabasicpagestructure.Youprovidethecontent.Ifyouprefertoworkwithapagedesign,gotoFile>NewFromTheme.Formoreinformationaboutthedifferencebetweenlayoutsand

themes,readWhatisthedifferencebetweenalayoutandatheme?

NewFromTheme…OpensawindowthatallowsyoutochoosefromseveralWebpagethemes.

16


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

AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCodeSnippetstab.Foradetailedtutorialaboutworkingwithsnippets,readHowtoUseSnippets.

UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.

PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.

18

AddorEditServers…OpenstheServerConfigurationwindow,whichallowsyoutoconfigureaneworexistingserverprofile.

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

PrintPreview…Opensawindowthatallowsyoutopreviewthecurrentfileforprintinginwhateverviewyouhaveselected(CodeEditor,VisualEditor,orPreview).

19

PageSetup…OpensthePrintSetupwindow,whichallowsyoutoadjusttheprintingsettingsforthecurrentfile.

ExitClosestheprogram.

20

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

ForadetailedtutorialaboutusingtheQuickStartwindow,readCreatingaNewWebpage.

YoucanpreviewthesettingsyouchooseinthePagePreviewpaneinthemiddleofthewindow.

PageTitleThetextdisplayedonthebrowser'stitlebarthatalsoappearsinsearchresults.Agoodpagetitlesuccinctlydescribesthecontentonthepage.

21

BackgroundImageToselectabackgroundimageforyourpage,enterthefilepathinthisfieldorclicktheBrowseicontobrowseyourcomputerfortheimageyouwishtouse.Toremoveabackgroundimage,clicktheredXicon.

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

Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

22

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

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

http://www.coffeecup.com/direct-ftp/

http://www.coffeecup.com/free-ftp/

OptionsTabChoosewhereyouwouldliketodownloadthefileandwhatpartsofthepageyouwouldliketodownload.

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

TosaveanHTMLpageyouhavedownloadedusingthisoption,gotoFile>Save.

SavetoDiskThisoptionsavesthepagetoalocationyouspecifyonyourcomputer.Tospecifyalocation,clicktheBrowseiconandchoosethefolderwhereyouwantthefilesaved.Ifyouchoosetosavetodisk,youcanalsousetheprovidedcheckboxesto:

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

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

25

Ifyouareunsureofanyofthisinformation,contactyourhostingprovider.Ifyouarenotsurewhetheryoushouldusethisinformation,chancesareyoudonothaveto.

26

ServerConfigurationWindowTheServerConfigurationwindowallowsyoutoconfigureaneworexistingserverprofile.

ClickingtheDeletebuttondeletestheselectedserverprofile.ClickingtheAddorEditbuttonopenstheServerConfiguration–AddandEditwindows,respectively.TheseallowyoutosetupanFTPprofileyoucanusetouploadyourworktoyourserver.

Foradetailedtutorialaboutuploadingyourwork,readtheUploadingYourWebsiteProjectportionofWorkingWithWebsiteProjects.

27

ServerConfiguration–Add/EditWindowTheServerConfiguration–AddandEditwindows,allowyoutosetupanFTPprofileyoucanusetouploadyourworktoyourserver.

Putthefollowinginformationintheprovidedfields.

Ifyouareunsureofanyofthisinformation,contactyourhostingprovider.

NicknameApersonalreminderyoucanusetotellyourserversapart.Youcannameyourserversanythingyouwant.

UsernameTheFTPusernameassignedtoyoubyyourWebhostingcompany.Besuretoentertheinformationexactlyhowitwasgiventoyoubyyourprovider.Usernamesare

28

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

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

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

ExtendedFindWindowTheExtendedFindwindowallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm.

FindEnterthetextorcodeyouwouldliketosearchforinthisfield.

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

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

32

ExtendedFindandReplaceWindowTheExtendedFindandReplacewindowallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm,andthenreplaceitwithtextofyourchoosing.

Foradetailedtutorialaboutusingthisfunction,readHowtoUseExtendedFindandReplace.

TheSearchResultstabdisplaysacompletelistofthefileswherethesearchtermappears.Toenableit,gotoView>ExtendedFindResults.

FileThepathtothefilewherethetermwasfound.

PositionThenumberofcharactersinthedocumentthatprecedetheterm.

33

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

EditXHTMLTagsWindowTheEditXHTMLTagswindowallowsyoutoviewandedittheattributesandattributevaluesoftheavailableXHTMLtags.ThechangesyoumakeherewillappearintheTagstabwhenHTMLTagsisselected,andinthecodecompletiondrop‐downlistwhenyouareworkingintheCodeEditor.

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

TagStartandTagEndThebeginningandendofthetag.

TagsThisisalistoftheavailableXHTMLtags.YoucanaddcustomXHTMLtagsbyclickingthegreenplussigniconatthebottomofthelist.YoucandeletetagsbyclickingtheredXicon,andyoucanrenamethembyclickingtheEditTagNameicon.

35

SelectedTagAttributesThisisalistoftheattributesthatcanbeusedwiththeselectedtag.YoucanaddcustomXHTMLattributesbyclickingthegreenplussigniconatthebottomofthelist.YoucandeleteattributesbyclickingtheredXicon,andyoucanrenamethembyclickingtheEditAttributeNameicon.

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

36

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

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

Toviewyourworkinotherbrowsers,usethePreviewtool.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.Themostpopularbrowsersare

Firefox,InternetExplorer,Opera,GoogleChrome,andSafari.

ToggleGutterEnablesthegutter,whichisabartotheleftofthecodewherelinenumbers,bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.

38

ToggleWordWrapSelectthisoptionifyouwouldlikeyourtexttoautomaticallywraptofittheCodeEditorworkspace.

ToggleLineNumbersTurnsonlinenumbersinthegutter.

ExtendedFindResultsDisplaystheSearchResultstabatthebottomoftheprogram.

39

SearchResultsandDocumentDependenciesTabsThisareacontainstwotabs,SearchResultsandDocumentDependencies.TheSearchResultstabdisplaysthefileswherethesearchtermspecifiedintheExtendedFindorExtendedFindandReplacewindowswasfound.TheDocumentDependenciestabdisplaysthelinksandexternalfilesreferencedintheopenWebsiteProjectthathavenotbeencopiedormovedtooneoftheWebsiteProjectfolders.

Toexitthisarea,clicktheredXinitsupperright‐handcorner.

• Search Results tab • Document Dependencies tab

40

SearchResultsTabTheSearchResultstabdisplaysthefileswherethesearchtermspecifiedintheExtendedFindorExtendedFindandReplacewindowswasfound.

FileThepathtothefilewherethetermwasfound.

PositionThenumberofcharactersinthedocumentthatprecedetheterm.

41

DocumentDependenciesTabTheDocumentDependenciestabdisplaysthelinksandexternalfilesreferencedintheopenWebsiteProjectthathavenotbeencopiedormovedtooneoftheWebsiteProjectfolders.

MissingLocalFileThepathtothefilethathasnotbeenaddedtotheWebsiteProject.

WebsiteProjectFileThepathtotheWebsiteProjectfilethatcontainsthemissinglocalfile.

PositionThenumberofcharactersintheWebsiteProjectfilethatprecedetheterm.

42

DocumentDependenciesRight‐ClickMenuRight‐clickingthedependenciesopensamenuthatallowsyoutoworkwiththeselecteddependencyandWebsiteProject.

EditReferenceBringsyoutothereferenceintheWebsiteProjectfilesoyoucanworkwiththeHTML.

IgnoreWarning(Remove)RemovesthewarningaboutthisdependencyfromtheDocumentDependencieslist.

FindandCopyFiletoProjectOpensawindowthatallowsyoutobrowseyourcomputertofindandcopythemissingfiletoyourWebsiteProject.

43

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

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

WebsiteProjectSettingsWindowTheWebsiteProjectSettingswindowallowsyoutoaddoreditthesettingsforaneworexistingWebsiteProject.

WebsiteProjectNameThenameofyourWebsiteProject.Itisapersonalreminder,soyoucannameitanythingyouwant.

WebsiteProjectLocationThelocationwhereyourWebsiteProjectisstoredonyourcomputer.UsetheBrowseicontobrowseyourcomputerforthedesiredlocation.

ServerTheserverwhereyouwilluploadyourWebsiteProjectfiles.YoucanselectoneoftheserversyouhavealreadydefinedordefineoneusingthefieldsintheServerConfigurationwindow.

46





ConfigureServersOpenstheServerConfigurationwindow,whichallowsyoutoconfigureaneworexistingserverprofile.

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

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


CheckDependenciesBeforeUploadingFilesChecksthedependenciesbeforeuploadingyourfilestoyourservertoensuretheyarereferencedcorrectly.WebsiteProjectdependenciesarelinksandexternalfiles,suchasstylesheets,images,etc.

47

IfDependenciesAreMissingFromLocalSystem,CancelFileUploadCancelsthefileuploadifanyofthedocumentdependenciesarenotlocatedintherightplaceinyourWebsiteProject.

WhenUploadingFilesYoucanchoosetoalwaysuploaddependentfileslikeimagesandstylesheets,neveruploadthem,orhavetheprogramconfirmwithyoubeforeuploadingthem.

48

DocumentMenuTheDocumentmenuallowsyoutoworkwithdocumentpropertiesandbookmarks,andtovalidateyourHTML.

DocumentWeight…OpenstheDocumentWeightwindow,whichcontainsinformationaboutthesizeofthecurrentlyopendocumentandhowlongitwilltaketodownloadtoacomputeronseveraldifferentconnections.

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

49

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

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

DocumentWeightWindowTheDocumentWeightwindowcontainsinformationaboutthesizeofthecurrentlyopendocumentandhowlongitwilltaketodownloadtoacomputeronseveraldifferentconnections.

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

EstimatedDownloadTimeThisarealiststheestimatedtimeitwilltakeforyourpagetoloadonacomputerbasedonitsconnectionspeed.

52

DocumentPropertiesWindowTheDocumentPropertieswindowletsyouchangethepagetitle,characterset,backgroundimageorcolor,linkcolor,andcolorscheme.

PageTitleThetextdisplayedonthebrowser'stitlebarthatalsoappearsinsearchresults.Agoodpagetitlesuccinctlydescribesthecontentonthepage.

BackgroundImageToselectabackgroundimageforyourpage,enterthefilepathinthisfieldorclicktheBrowseicontobrowseyourcomputerfortheimageyouwishtouse.Toremoveabackgroundimage,clicktheredXicon.

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

53


ColorSchemeDrop‐DownListIfyouwouldliketouseacolorscheme,selectonefromthisdrop‐downlist.

SaveClickthisbuttonifyouhavemadechangestoaschemethatyouwouldliketosave.

54

SaveAs…Clickthisbuttonifyouhavecreatedacolorschemeyouwouldliketouseagain.Thisopensawindowthatallowsyoutoenteranameforyournewscheme.

AfteryouclickOK,theschemewillbeavailableunderthedrop‐downlist.

DeleteClickthisbuttontodeletetheselectedscheme.

Don’tUnderlineLinksCheckthisboxifyouwouldliketoremovetheautomaticunderlinefromyourlinks.


55

InsertMenuTheInsertmenuallowsyoutoinsertvariouselementsintoyourpage.

Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallowsyoutoinsertalinkandanyassociatedattributes.

56

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

Foradetailedtutorialaboutusinglinksandtargets,readLinkingtoDifferentPartsoftheSamePage.

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

QuickLinktoOpenDocumentExpandstodisplayalistofdocumentsthatareopenintheHTMLEditor.Mousingoveradocumentnameexpandsthemenutodisplayalistoftheanchorswithinthedocument.

Selectingadocumentandalocationwithinthedocumentinsertsarelativelinktothedocumentandtheselectedanchorintothecurrentlyopenfile.

QuickLinktoRelativeFileExpandstodisplayalistofthefilesandfolderslocatedinthesamefolderasthecurrentlyopendocument,aswellasanoptiontomoveuponefolder.

57

Selectingafilefromthislistinsertsarelativelinktothatfileinthecurrentlyopendocument.

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

workingwithWebsiteProjects?Checkoutthistutorial:WorkingWithWebsiteProjects.

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

YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.

Sound…OpenstheInsertSoundwindow,whichyoucanusetobrowseyourcomputerforasoundtoplayonyourWebpage.

58

YoucanalsoaddasoundbydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.

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

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

59

HorizontalRule…OpenstheInsertHorizontalRulewindow,whichallowsyoutodesignahorizontalruleandaddittoyourpage.

Color…OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursorispositionedonthepage.

60

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

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

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

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

62

http://www.coffeecup.com/form-builder/

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

ListBox…OpenstheInsertListBoxwindow,whichallowsyoutoconfigurethecontentsofalistbox.

63

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

RadioButtonGroup…OpenstheInsertRadioButtonGroupwindow,whichallowsyoutoconfigurearadiobuttongroup.Radiobuttonsmustbegroupedinordertoworkcorrectly.

64

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

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

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

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

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

Formoreinformationaboutmetainformation,readNewFromQuickStart.

68

InsertLinkWindowTheInsertLinkwindowallowsyoutoinsertalinkandanyassociatedattributes.

Foradetailedtutorialaboutinsertinglinks,readAddingaLinktoYourPage.

LinkTextThetextyouruserwillclick.Bydefault,linktextisblueandunderlined.

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

69

FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.

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

TitleAdescriptionofthelinkthatwillappearasatooltipwhentheuserholdstheirmouseoverthelink.

ShowStatusbarMessageonMouseoverCheckingthisboxdisplaysadescriptionofthelinkintheStatusbaratthebottomoftheWebbrowserscreen.ThisoptionisonlyenabledinInternetExplorer.

WebBrowserWindowMessageEntertheStatusbarmessagehere.

70

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

ShowStatusbarMessageonMouseoverCheckingthisboxdisplaysadescriptionofthelinkintheStatusbaratthebottomoftheWebbrowserscreen.ThisoptionisonlyenabledinInternetExplorer.

WebBrowserWindowMessageEntertheStatusbarmessagehere.

72

InsertImageWindowTheInsertImagewindowallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.Usetheareaontheleft‐handsideofthewindowtobrowseyourcomputerforthedesiredimage.TheimageshouldbelocatedinyourWorkingfolderorWebsiteProjectinordertodisplaycorrectly.

YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.Foradetailedtutorialaboutaddingimages,readAddinganImagetoYourPage.

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

Afteryouhaveselectedanimageandconfiguredanyadditionalattributes,clickOK.ThisopenstheCopytoProjectwindow,whichpromptsyoutosaveyourimagetoyourWebsiteProjectorWorkingfolder.

73

YoucansavetheimagetoanyofthepreexistingfoldersinyourWebsiteProjectorclickCreateFoldertocreateanewfolderforyourimage.Whenyouhaveselectedthefolderwhereyourimagewillbestored,clickOK.

GeneralTabThisiswhereyouinsertthepathtotheimageanditsattributes.

74

ImageEntertheimagepathhere.Ifyouselectanimageusingthetoolsontheleft‐handsideofthewindow,thepathwillappearinthisfield.

AltAdescriptionoftheimagedisplayedwhentheimagecannotbeshown,suchasinatext‐onlyorspeechbrowser,orifauserhasaslowconnection.YoushouldalwaysusedetailedalttextforallprominentorcontextuallyimportantimagesonyourWebpage

TitleAdescriptionoftheimagethatappearsasatooltipwhentheuserholdstheirmouseovertheimage.

AlignSelectthedesiredalignmentfromthisdrop‐downlist.

BorderEnterthewidthoftheborderinpixelsinthisfield.Ifyoudonotwantaborder,enter0.

WidthandHeightThesefieldsdisplaythewidthandheightofyourimageandcanalsobeusedtoresizeit.Providingthisinformationallowsthepagestructuretoloadcorrectlybeforetheimageloads.Ifyoudonotwanttoincludethesevalues,unchecktheIncludesizecheckbox.

75

Theimageresizefeatureshouldonlybeusedtomakeminoradjustments,sincesignificantadjustmentsmaydistorttheimage.Ifyouneedtomakeadvancedchangestoyourimage,useanimage‐editingprogram.

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


ThumbnailTabThisiswhereyoucancreateanoptionalimagethumbnail,whichisasmallerversionoftheimage.Thumbnailsareoftenusedaslinkstotheoriginalversionoftheimage.

CreateandInsertImageasThumbnailSelectthischeckboxifyouwouldliketousetheimageasathumbnail.

LinktoOriginalImageSelectthischeckboxifyouwouldlikethethumbnailtolinktotheoriginalimage.

76

ThumbnailFilenamePrefixThisdifferentiatesthethumbnailversionoftheimagefromtheoriginal.Bydefault,itissettotn_,butyoucanchangeittowhateveryouwant.

ThumbnailWidthandHeightEnterthewidthandheightofthethumbnailhere.Theaspectratioismaintainedsotheimagewillnotbedistorted.

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

77

InsertListWindowTheInsertListwindowallowsyoutoinsertoneoffourdifferentkindsoflists.YoucanalsoimportalistclickingtheImportListbutton.

Foradetailedexplanationofhowtouselists,readHowtoCreateaList.

ListTypeChoosefromthefourdifferentliststyles:bulleted,numbered,definition,orlistitems.

BulletStyleChoosefromthedifferentbulletstyles.Thisonlyappliesifyouareusingabulletedornumberedlist.

ListHeaderTextEnteryourlistheaderhere.Alistheaderappearsabovethelistasalabel.

ListItemFieldEnterthelistitemsinthisfield.Puteachlistitemonitsownline.

78

InsertHorizontalRuleWindowTheInsertHorizontalRulewindowallowsyoutoconfigurethesettingsofahorizontalrulethatisthenaddedtoyourpage.YoucanpreviewthechangesyoumakeinthePreviewarea.

Formoreinformationabouthorizontalrules,readWhatIsaHorizontalRule?

AlignmentChoosethealignmentofyourhorizontalrule:left,right,orcentered.

WidthChoosethelinewidthandwhetheritismeasuredasapercentageofthecontainingelement(suchasthepageora<div>tag)orinpixels.

ThicknessChoosethelinethickness,with1beingthethinnestand10beingthethickest.

79

ShadingChoosewhethertoapplya3Deffecttotheline.

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


80

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

Foradetailedtutorialabouthowtousethistool,readHowtoUsetheFrameDesigner.

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

FrameWidthandHeightUsethesedrop‐downmenustosetthewidthandheightoftheselectedframe.Toselectaframe,clickit,anditwillturnblue.

81

Thewidthandheightaremeasuredinthepercentageofthepagetheframeoccupies.Iftheselectedframetakesuptheentireheightorwidthofthepagebydefault,youwillnotbeabletoadjustthatattribute.

FrameScrollingChoosewhetheryouruserscanscrollwithintheframe.Autoaddsascrollbarwhennecessary,Yesaddsascrollbaratalltimes,andNowillnotaddascrollbaratanytime.

AllowFrameResizeSelectthischeckboxifyouwantyouruserstobeabletoresizetheframes.

FrameBorderSelectthischeckboxtoenableaframeborder,andthenenterthewidthoftheborderinthenumberfield.0isthethinnestborderand50isthelargest.

FrameNameEnteranamefortheframehere.Youshoulduseanamethatrelatestotheframe’sfunction.

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


82

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

InsertNewTableWindowTheInsertNewTablewindowopenswhenyouopentheTableDesignerandcontainstoolsthatallowyoutosetupatable.

NumberofRowsandColumnsEnterthenumberofrowsandcolumnsintothesefields.

BackgroundandBorderColorTochangethebackgroundand/orbordercolorofthetable,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.

84


TableWidthEnterthewidthofthetableinthisfield.Youcanchoosefromapercentageofthepageorafixedsizeinpixels.

CellSpacingEnterthespaceinpixelsthatwillappearbetweeneachcell.

CellPaddingEnterthespaceinpixelsthatwillappearbetweentheborderofthecellanditscontents.

BorderWidthEnterthewidthinpixelsoftheborderbetweenthecells.

85

TableDesignerMenuBarTheTableDesignermenubarislocatedatthetopofthewindow.Itgivesyouaccesstoallthetoolsformodifyingyourtable,aswellasoptionslikeopening,saving,andpreviewingyourwork.

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

86

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

EditMenuTheEditmenuallowsyoutoundoorredoyouractionsandtocut,copy,paste,select,anddeleteobjects.






PasteSpecial…Allowsyoutochoosetheformatofthepastedinformation.

88

Delete(Ctrl+Del)Removestheselectedobject(s).

89

InsertMenuTheInsertmenuallowsyoutoinsertanimageintoyourtable.

InsertImage…Opensawindowthatallowsyoutobrowseyourcomputerfortheimageyouwouldliketoaddtoyourtable.

90

FormatMenuTheFormatmenuallowsyoutoformatthestyleandfontofyourtextandtosetthebackgroundcolorofyourtable.

BoldBoldstheselectedtextor,ifnotextisselected,appliesboldformattingtoanytexttypedafterthelocationofthecursor.

ItalicItalicizestheselectedtextor,ifnotextisselected,appliesitalicformattingtoanytexttypedafterthelocationofthecursor.

UnderlineUnderlinestheselectedtextor,ifnotextisselected,appliesunderlineformattingtoanytexttypedafterthelocationofthecursor.

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

91

Fill(Background)Color…OpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.

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

92

Tochangetheparagraphpadding,clickthePaddingbutton.ThisopensthePaddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingistheamountofspacethatappearsbetweentheparagraphandtheborderofthecell.

93

TableMenuTheTablemenuallowsyoutoinserttables,adjustthetableproperties,andworkwithrows,columns,andcellcontents.

InsertTable…OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.

TableProperties…OpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.

94

InsertColumnLeftInsertsacolumntotheleftofwherethecursorispositioned.

InsertColumnRightInsertsacolumntotherightofwherethecursorispositioned.

InsertRowAboveInsertsarowabovewherethecursorispositioned.

InsertRowBelowInsertsarowbelowwherethecursorispositioned.

DeleteRow(s)Deletestherowwherethecursorispositionedortheselectedrow(s).

DeleteColumn(s)Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).

SelectAllowsyoutoselecttheentiretable,arow,acolumn,oracell.

95

AlignCellContentsAllowsyoutochoosethealignmentofthecontentintheselectedcell:top,middle,bottom,ordefaultcellverticalalignment.

SplitCells…OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.

96

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

MergeCellsMergesthecontentsofthecellsintoonecell.

97

TableDesignerToolbarTheTableDesignertoolbarcontainsbuttonsthatyoucanclicktoperformcertaincommonlyusedactionsquickly.Right‐clickingthetoolbaropensthismenu:

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

NewCreatesanewblanktableforyoutoeditfromscratch.

OpenAllowsyoutoopenandworkwithapreviouslycreatedtable.

SaveSavesthetableyouarecurrentlyworkingon.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.




98



InsertImageOpensawindowthatallowsyoutobrowseyourcomputerfortheimageyouwouldliketoaddtoyourtable.




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

99

Fill(Background)ColorOpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.

100



101

InsertTableOpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.

TablePropertiesOpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.

ModifyTableCellsThisexpandstoshowsomeoptionsyoucanuseformodifyingthecellsinyourtable.



102








103

TableDesignerRight‐ClickMenuTheright‐clickmenuallowsyoutoaccesscommonlyusedfeaturesintheTableDesigner.






PasteSpecial…Allowsyoutochoosetheformatofthepastedinformation.

104

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

105

Fill(Background)Color…OpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.


106





TableExpandstodisplayoptionsforcreatingoreditingatable.

107

InsertTable…OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.

TableProperties…OpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.

108







SelectAllowsyoutoselecttheentiretable,arow,acolumn,oracell.

109

AlignCellContentsAllowsyoutochoosethealignmentofthecontentintheselectedcell:top,middle,bottom,ordefaultcellverticalalignment.


110



111

InsertFormWindowTheInsertFormwindowallowsyoutosettheformmethod,MIMEpostmethod,andURLwheretheformresultswillbedirected.Thisinformationisimportantifyouwantyourformtoworkproperly!


FormMethodChoosehowyouwanttotransfertheformdata.Postsendsittotheserverandgetpullsitfromtheserver.

MIMEPostMethod(Enctype)Selectthetypeofapplicationthatwillprocesstheformdata.

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

112

StyleSheetWizardTheStyleSheetWizardallowsyoutosetthevariouspropertiesofyourstylesheet.


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

113

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

FontSizeSelectthesizeofyourfontusingoneoffourmeasurements:absolute,relativetothecontainingelement,pixels,orapercentageofthecontainingelement.

WeightThelightnessordarknessofyourfont,with100beingthelightestand900beingthedarkest.

StyleSelectthefontstyle:normal,italic,oroblique.

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

TransformChoosewhethertoapplycapitalization,uppercaseorlowercaseletters,ornone.

VariantSelectthevariant:normalorsmallcaps.

115

ColorandBackgroundTabTheColorandBackgroundtaballowsyoutosetthetextandbackgroundcolorfortheclassorHTMLtagyouaremodifyingforyourstylesheet.

TextandBackgroundColorTochangethetextorbackgroundcolor,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.

116


BackgroundImageClickthefoldericontobrowseyourcomputerforthedesiredbackgroundimage.

117

RepeatIfyouaddabackgroundimage,youcanrepeatithorizontallyand/orvertically.

AttachmentSelectscrollifyouwanttheimagetoalwaysappearinthesameplaceevenwhenthepageisscrolledupordown.Selectfixedifyouwanttheimagetoappearinafixedplaceonthepage.

AlignmentUsethesefieldstospecifytheexactalignmentoftheimage.Youcansetittothedefaultlocation,oruseapercentage,anabsolutepixellocation,orkeywords.

118

AlignmentTabTheAlignmenttaballowsyoutosetthealignmentfortheclassorHTMLtagyouaremodifyingforyourstylesheet.

IndentationThespacebetweenwhereyourelementstartsandtheleftedgeofthepage.Youcansetittothedefaultoradjusttheindentationinpixelsorapercentage.

LineHeightTheverticalspacebetweentwolinesoftext.Youcansetittothedefaultoradjusttheheightinpixelsorapercentage.

119

AlignmentUsetheseoptionstosetwherethecontentintheclassortagappearsonthepage.Settheverticaland/orhorizontalalignmentbykeywordorpercentage.Ifyouusetheseoptionstosetthealignment,youcannotusethefloatproperty.

WordandLetterSpacingTheamountofspaceinpixelsbetweenwordsandletters.

FloatChoosewhetherthecontentintheclassortagfloatstotherightorleft,ordoesnotfloatatall.Ifyouusethisoptiontosetthealignment,youcannotusethealignmentproperties.

ClearChoosethesideofthefloatedelementwhereotherfloatingelementswillnotappear.Forinstance,ifyouselectleft,nofloatedelementswillappeartotheleftofthespecifiedfloatedelement.

120

MarginsTabTheMarginstaballowsyoutosetthemargins,width,andheightinpixelsorapercentageofthecontainingelementfortheclassorHTMLtagyouaremodifyingforyourstylesheet.

“Margin”referstothewhitespacesurroundinganelement.Whenthemarginisincreasedforaselectedelement,morespacewillappearbetweentheelementandtheobjectssurroundingit.

121

PaddingTabThePaddingtabletsyousetthepaddinginpixelsorapercentageofthecontainingelementfortheleft,right,top,andbottomoftheclassorHTMLtagyouaremodifyingforyourstylesheet.

“Padding”referstothewhitespacewithinanelement.Whenpaddingisincreasedforaselectedelement,morespacewillappearbetweenitsouteredgesandtheobjectscontainedwithinit.

122

BorderTabTheBordertaballowsyoutosetthebordersfortheclassorHTMLtagyouaremodifyingforyourstylesheet.

SizeThesizeoftheborderinpixelsorapercentageofthecontainingelement.

StyleChoosefromeightborderstyles.

ColorTochangethetextorbackgroundcolor,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.

123


124

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

<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

Thiswindowremindsyouthatyoumustremoveallyouroldmenucodebeforeinsertingnewcode.

Thisstepisveryimportant!Ifyoudonotremoveyouroldmenucode,yourmenuwillnotworkcorrectly.

Toexitthiswindow,clickOK.ThisopenstheSaveMenuwindow,whichallowsyoutosaveyourmenutoworkwithitlater.

127

Weonlyrecommendsavingyourmenuifyouhavealreadyremovedyouroldmenucode.ClickingSaveopensawindowthatallowsyoutochoosethelocationwhereyouwouldliketosaveyourmenu.

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

CancelClickthisbuttontoabandonanyunsavedchangestoyourmenuandexittheCSSMenuDesigner.FormoreinformationaboutthedifferentsectionsoftheCSSMenuDesigner,clickoneoftheselinks:

• Menu Designer tab • Menu Colors tab • Options tab

128

MenuDesignerTabTheMenuDesignertaballowsyoutoaddandconfiguremenuitems.

YourMenuAllowsyoutopreviewthestructureofyourmenu.

AddRootItemAddsarootitemtoyourmenu.Rootitemsmakeupthemainpartofthemenuthatappearsatalltimes.

AddSubitemAddsasubitemtotheselectedrootitem.Asubitemappearswhenyouclickormouseovertherootitem.Youcanadduptothreelevelsofsubitems.

AddSiblingAddsanotheritemonthesamelevelastheselecteditem.

DeleteItemDeletestheselecteditem.

TextEnterthetextyouwouldliketoappearontheselectediteminthisfield.

129

LinkEnterthelinkyouwouldlikethecurrentlyselecteditemtopointtointhisfield.

130

MenuColorsTabTheMenuColorstaballowsyoutosetthecolorsforyourmenu.YoucanpreviewanychangesyoumakeintheMenuColorSamplearea.

Tochangethetextorbackgroundcolor,enterahexcodeorclicktheassociatedcolorswatch.Thisopensadrop‐downlistof65basiccolors.

131


BackgroundColorThebackgroundcolorofthemenu.

MouseoverBackgroundColorThebackgroundcolorofthemenuwhentheuserholdstheirmouseoverit.

FontColorThecolorofthemenutext.

MouseoverFontColorThecolorofthemenutextwhentheuserholdstheirmouseoverit.

132

BorderColorThecolorofthemenuborder.

UseMainMenuColorsClickthisbuttonifyouwantthesubmenuitemstohavethesamecolorschemeasthemainmenuitems.

133

OptionsTabTheOptionstaballowsyoutoworkwithmenuoptionsnotpertainingtotheitemsandthecolors.

OrientationChoosebetweenahorizontalandverticallayout.

MarginTopandLeftSetthetopandleftmargininpixelsinthesefields.“Margin”referstotheblankspacesurroundingthemenu.Whenthemarginisincreased,morespacewillappearbetweenthemenuandtheobjectssurroundingit.

BorderWidthEnterthewidthofthemenuborderinpixelsinthisfield.

FontFace,Size,andStyleChoosethefontandsizeofthemenuitemtext,aswellaswhetheritisboldoritalicized.

MenuandSubmenuTextAlignmentChoosehowyouwantthetextinthemenutobealigned:totheleft,right,orcenter.

134

TopandLeftPaddingSetthetopandleftpaddinginpixelsinthesefields.“Padding”referstotheblankspacewithinthemenu.Whenthepaddingisincreased,morespacewillappearbetweenthemenutextandtheouteredges.

UseFixedWidthforMenuItemsSelectthischeckboxifyouwouldliketouseafixedwidthforthemenuitems.

ItemWidthSetthefixeditemwidthinpixelshere.

135

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

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

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

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

BreakInsertsabreaktag(<br />).

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

138

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



139

EffectsSelectfrombold,italic,strikethrough,orunderline.

TextPositionSelectwhetheryourtextwillappearnormallyorasasubscriptorsuperscript.

SizeSelectafontsizefrom1(8pt)to7(36pt).

ColorToselectacolorforyourtext,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.


140

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

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

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

SearchforUndocumentedCharacters…Checksyourdocumentforanyundocumentedspecialcharacters.

Ifitdiscoversanundocumentedcharacter,itgivesyoutheoptiontoreplaceitwiththeproperHTMLentity.Whenitisfinished,youwillseeamessagethatsays“Finished!”

Toaddcharacterentitiesforanyspecialcharacters,usetheCharacterstabintheResourcebrowserontheleft‐handsideoftheprogram.

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

143

Iftherearemisspelledwords,theSpellingwindowopens,allowingyoutoreviewandchangethespellingerrors,andtoadjustspellingoptions.

AutoSpellCheckPutsaredunderlineunderanymisspelledwords.

SpellCheckerOptions…OpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.

Thesaurus…OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselectedword.

ToolbarsandMenusExpandstodisplayoptionsforcustomizingthetoolbarsandmenuswithintheprogram.

Foradetailedtutorialaboutcreatingacustomtoolbar,readHowtoCreateaCustomToolbar.

144

Customize…OpenstheCustomizewindow,whichallowsyoutocustomizetheprogramtoolbars.

SaveCurrentConfigurationAs…Allowsyoutosavethecurrenttoolbarandmenuconfiguration.Thisisusefulifyouhavecreatedacustomconfigurationyoumaywishtouselater.Whenyousaveaconfiguration,itwillappearbeneathDefaultinthismenu.

DefaultSelectthistoswitchtothedefaulttoolbarandmenuconfiguration.

DocumentDisplayPropertiesOpenstheCustomizationtabofthePreferenceswindow,whichallowsyoutocustomizehighlightingandtoolbaroptions.

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

145

CoffeeCupWebsiteSpiderCoffeeCupWebsiteSpidercontainsvarioustoolsandutilitiesthatprovideinformationyoucanusetooptimizeyourWebsite.

FormoreinformationonhowtousetheWebsiteSpider,refertoitsdocumentation,availableunderHelp>HelpContents….

146

CodeCleanerTheCodeCleanerallowsyoutosetyourpreferencesforhowyouwouldlikeyourcodetobeformatted,andthenrunsthecodecleaner.YoucanundoanychangesmadeduringthecodecleaningusingtheUndooption.Mouseovereachfunctionforadetaileddescriptionofwhatitdoes.Thedescriptionappearsintheyellowpaneatthebottomofthewindow.

ForadetailedtutorialaboutusingtheCodeCleaner,readHowtoUsetheCodeCleaner.

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

147

DocumentTabTheDocumenttaballowsyoutoworkwiththeDOCTYPEandcharacterencoding.Holdingyourmouseoveranoptionopensadescriptionintheyellowpaneatthebottomofthewindow.

148

ASPandXMLTabTheASPandXMLtaballowsyoutosetoptionspertainingtoASP,HTML,andXML.Holdingyourmouseoveranoptionopensadescriptionintheyellowpaneatthebottomofthewindow.

149

WebsiteColorSchemerTheWebsiteColorSchemerisusedtogenerateanattractivecolorschemeforyourWebsite.

FormoreinformationonhowtousetheWebsiteColorSchemer,refertoitsdocumentation,availableunderHelp>HelpContents(F1).

150

ImageMapperTheImageMapperisusedtocreateaninteractiveimagemap.

FormoreinformationonhowtousetheImageMapper,refertoitsdocumentation,availableunderHelp>HelpContents.

151

SpellingWindowTheSpellingwindowallowsyoutoreviewandchangethespellingerrors,andtoadjustspellingoptions.

NotFoundAwordnotfoundinthedictionary.

ReplaceWithTypethereplacementwordinthisfieldorselectawordfromtheSuggestionarea.ClickChangeorChangeAlltoreplacethemisspelledwordwiththewordinthisfield.

SuggestionsSpellingsuggestionsforthemisspelledword.

UndoUndoesthelastchangeyouhaveperformed.

OptionsOpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.

IgnoreIgnoresthemisspelledwordanddisplaysthenextwordnotfoundinthedictionary.

IgnoreAllIgnoresallinstancesofthemisspelledwordanddisplaysthenextwordnotfoundinthedictionary.

152

ChangeReplacesthemisspelledwordwiththewordintheReplaceWithfield.

ChangeAllReplacesallinstancesofthemisspelledwordwiththewordintheReplaceWithfield.

AddAddsthewordintheNotFoundfieldtothedictionary.

Auto‐CorrectAddsthewordsintheNotFoundandReplaceWithfieldstotheAuto‐Correctdictionary.IftheAutoSpellCheckoptionisenabled,themisspellingwillautomaticallybereplacedwiththereplacementwordwhenyouruntheCheckSpellingfunction.

ToenableAuto‐Correct,gotoTools>AutoSpellCheck.

153

SpellingOptionsWindowTheSpellingOptionswindowallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.

OptionsSelecttheoptionsyouwouldliketoenablewhencheckingthespellinginyourdocument.

DictionariesListstheavailabledictionaries.Bydefault,11languagedictionariesareincludedintheprogram.Youmayselectasmanyasyouwant.

LocateDictionariesSelectingthisoptionopensawindowthatallowsyoutobrowseyourcomputerforanotherdictionaryfile.

FormoreinformationabouthowtoadddictionaryfilestotheHTMLEditor,readHowdoIimportanotherlanguagedictionaryintotheHTMLEditor?

154

CustomDictionaryIfyouhaveaddedacustomdictionaryandwouldliketouseitinsteadoforinadditiontothedictionaryordictionariesselectedintheDictionariesarea,selectitfromthisdrop‐downlist.

Dictionaries…OpenstheDictionarieswindow,whichallowsyoutoadd,edit,anddeletecustomdictionaries.

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

DeleteDeletestheselecteddictionary.

NewOpenstheNewCustomDictionarywindow,whichallowsyoutoenterthenameofanotherdictionaryfileyouwouldliketoaddtoyourcustomdictionaries.

FormoreinformationabouthowtoadddictionaryfilestotheHTMLEditor,readHowdoIimportanotherlanguagedictionaryintotheHTMLEditor?

ResetDefaultsResetstheDictionariesareatoincludeonlythe11defaultdictionaries.

155

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

AddedWordsTabAllowsyoutoaddwordstothedictionaryfileordeletecustomwordsyouhaveadded.

156

Auto‐CorrectPairsTabAllowsyoutoaddauto‐correctpairstothedictionaryfileordeletecustomauto‐correctpairsyouhaveadded.

IftheAutoSpellCheckoptionisenabled,thewordintheReplacecolumnwillautomaticallybereplacedwithwordintheWithcolumnwhenyouruntheCheckSpellingfunction.

ToenableAuto‐Correct,gotoTools>AutoSpellCheck.

157

ExcludedWordsTabAllowsyoutoaddwordsthatwillalwaysbeconsideredincorrectwhenrunningspellcheck,ortodeleteanyexcludedwordsyouhaveadded.

158

CustomizeWindowTheCustomizewindowallowsyoutocustomizetheprogramtoolbars.

Foradetailedtutorialaboutcreatingacustomtoolbar,readHowtoCreateaCustomToolbar.

• Toolbars tab • Commands tab • Options tab

159

ToolbarsTabTheToolbarstaballowsyoutoaddoreditprogramtoolbars.Thegrayed‐outtoolbarsarenotavailabletobeedited.

ToolbarsDisplaysalistofthetoolbarsavailableintheprogram.SelectingthecheckboxforatoolbardisplaysitintheHTMLEditorworkspace,anddeselectingthecheckboxremovesit.

NewOpenstheAddToolbarwindow,whichallowsyoutonamethenewtoolbar.

160

Whenyoucreateanewtoolbar,itopensintheHTMLEditorworkspace.

RenameOpenstheRenameToolbarwindow,whichallowsyoutorenametheselectedtoolbar.

DeleteDeletestheselectedtoolbar.

Reset(MainToolbarOnly)Resetsthemaintoolbartoitsdefaultconfiguration.

161

CommandsTabTheCommandstaballowsyoutoviewandaddcommandstoyourcustomtoolbarortothemaintoolbar.Toaddacommand,dragitfromtheCommandslisttothedesiredtoolbaranddropitthere.

CategoriesBroadcategoriestowhichindividualcommandsbelong.Categoriescannotbeaddedtoatoolbar.

CommandsIndividualcommandsthatcanbeaddedtoatoolbar.Toaddacommand,dragittothedesiredtoolbaranddropitthere.

162

OptionsTabTheOptionstaballowsyoutocustomizeotheraspectsofyourtoolbars.

MenusShowRecentlyUsedCommandsFirstSelectthischeckboxifyouwantthemostrecentlyusedcommandstoappearatthebeginningofyourcustommenuortoolbar.

ShowFullMenusAfteraShortDelaySelectthischeckboxifyouwantdrop‐downmenusinyourcustommenuortoolbartoappearafterashortdelay.

ResetMyUsageDataResetsyourusagedatasoyourcommandsappearintheorderyouspecifiedinsteadofbeingrankedinorderofuse.

163

LargeIconsIncreasesthesizeofthemenuicons.

ShowTooltipsonToolbarsSelectthischeckboxtodisplaytooltipswhenyoumouseovertoolbaricons.

ShowShortcutKeysinTooltipsSelectthischeckboxtodisplaykeyboardshortcutsinthetoolbartooltips.

MenuAnimationsSelectthedesiredmenuanimationfromthisdrop‐downlist.

164

PreferencesWindowThePreferenceswindowallowsyoutoadjustoptionsforworkingwiththeprogramandyourcode.

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

165

GeneralTabTheGeneraltaballowsyoutosetdisplayandfunctionalpreferencesfortheHTMLEditor.

ApplicationStartupSelectwhetheryouwouldlikeaspecificdocumenttoopenautomaticallyintheEditoronstartup.YoucanalsochoosewhethertheMyWebsitesorMyComputertabwillbeopenintheResourcebrowser.Finally,youcanspecifywhetherthetipofthedayandtheWelcomewindowwillappear.

InitialDocumentModeSelectwhetheryouwanttheVisualorCodeeditortoopenautomaticallyonstartup.YoucanalsochoosewhethertoshoworhidetheVisualEditorand/orPreviewtab.

InitialDocumentTypeSelecttheinitialdocumenttypethatwillbeusedonstartupandwhenyoucreateanewpagefromthisdrop‐downlist.

ProperCaseConversionWhenconvertingtopropercase,anylettersafterthecharactersenteredinthisfieldwillbecapitalized.

166

Toconvertyourdocumentoraselectionoftextandcodetopropercase,gotoEdit>ConverttoProperCase.

MiscellaneousSelectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapply.

WhenStartingaNewWebsiteProjectSelectwhatyouwouldliketheprogramtodowhenyoucreateanewWebsiteProject.

167

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

FileExtensionsSpecifythevalidfileextensionsyouwouldliketoopenandeditintheEditorinthesefields.Toresetthembacktotheprogramdefaults,clicktheResetbutton.

UnixFilesSpecifyanyfileextensionsyouwouldliketosaveasUnixfiles.

FileExtensionsThatWillNotBeOpenedinVisualEditorSwitchingtotheVisualEditormaycauseunwantedformattinginsomedocumenttypes.UsethisfieldtospecifyanyfileextensionsyoudonotwanttoopenintheVisualEditor.Thisensuresthatyouwillnotaccidentallyopenthemandlosetheformattingofyourcode.

168

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

Toaccessanybrowsersyouadd,gotoTools>AdditionalBrowsers.

SelectaBrowserSelecttheslotunderTools>AdditionalBrowserswhereyouwouldlikethebrowsertoappear.AdditionalBrowser1canbeaccessedusingthekeyboardshortcutCtrl+F5.

DisplayNameEnterthedesireddisplaynameforthebrowser.

ApplicationLocationUsetheBrowseicontobrowseyourcomputerforthe.exefileforthebrowseryouwanttoadd.Toremoveabrowser,clicktheRemoveicon.

169

ApplicationsTabTheApplicationstaballowsyoutoaddexternalapplicationsthatcanbeopenedfromwithintheHTMLEditor.

Toaccessanyapplicationsyouhaveadded,gotoTools>Applications.

DescriptionAcustomdescriptionoftheapplicationthatwillappearunderTools>Applications.Thisisapersonalreminder,soyoucannameitanythingyouwant.

CustomApplication.exeUsetheBrowseicontobrowseyourcomputerforthe.exefilefortheapplicationyouwanttoadd.Toremoveanapplication,clicktheRemoveicon.

170

FoldersTabTheFolderstaballowsyoutoselectdefaultfoldersusedwithintheHTMLEditor.

DefaultWebsiteProjectsFolderClicktheBrowseicontoselectthedefaultfolderwhereyourWebsiteProjectsaresaved.

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

DefaultImageFolderClicktheBrowseicontoselectthedefaultImagefolder.WhicheverfolderyouselectwillbeopenbydefaultintheInsertImagewindow.

DefaultBackgroundImageFolderClicktheBrowseicontoselectthedefaultBackgroundImagefolder.WhicheverfolderyouselectwillbeopenbydefaultinthewindowthatappearswhenyouaddabackgroundimageintheDocumentPropertieswindow.

171

DefaultSoundsFolderClicktheBrowseicontoselectthedefaultSoundsfolder.WhicheverfolderyouselectwillbeopenbydefaultintheInsertSoundwindow.

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

172

CustomizationTabTheCustomizationtaballowsyoutocustomizehighlightingandtoolbaroptions.

DocumentsSelectthedocumenttypewhosehighlightingschemeyouwanttomodifyfromthisdrop‐downlist.

ModifyHighlightingOpenstheHighlightingOptionswindow,whichallowsyoutomodifythehighlightingschemefortheselecteddocumenttype.ThisschemeappliesonlytothecodeintheEditorasapersonalreminder,andwillnotberenderedbyWebbrowsers.

ModifyOptionsOpenstheEditorOptionswindow,whichallowsyoutosetdisplaypreferencesfortheCodeEditor.

ToolbarCustomizationListsthecustomtoolbarsyouhaveconfiguredandallowsyoutodeleteorrenamethem.

Tocreateacustomtoolbar,gotoTools>ToolbarsandMenus>Customize.

173

HighlightingOptionsWindowTheHighlightingOptionswindowallowsyoutomodifythehighlightingschemeforthedocumenttypeselectedintheCustomizationtabofthePreferenceswindow.ThisschemeappliesonlytothecodeintheEditorasapersonalreminder,andwillnotberenderedbyWebbrowsers.

Formoreinformationaboutworkingwithhighlightingoptions,readAdjustingCodeHighlightingOptions.

CurrentLanguageStyleDisplaysthedocumenttypeyouareediting.

174

ElementListsthedifferentelementsofthecurrentlanguage.Selectanelementtoadjustitshighlightingoptions.SelectingDefaultTextgivesyoutheoptiontoapplythedefaultsettingstootherelements.

ForegroundandBackgroundColorTochangethecolorofeitheroftheseelements,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof20basiccolors.

Tobrowseevenmorecolors,clickOther.ThisopenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.

175

TextAttributesChoosefrombold,italic,orunderline.

UseDefaultsForSelecttheForegroundorBackgroundcheckboxesifyouwanttoapplytheDefaultTextsettingstotheselectedelement.

FontSelectthedesiredfontfacefromthisdrop‐downlist.

SizeSelectthedesiredsizefromthisdrop‐downlist.


176

EditorOptionsWindowTheEditorOptionswindowallowsyoutosetdisplaypreferencesfortheCodeEditor.

PrintOptionsSelectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapplywhenprintingadocument.

GeneralOptionsSelectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapplyintheCodeEditor.

VisibleRightMarginSelectwhethertodisplayavisiblerightmarginandthenspecifyitswidthinpixels.

177

VisibleGutterSelectwhethertodisplayavisiblegutterandthenspecifyitswidthinpixels.Agutterisabartotheleftofthecodewherelinenumbers,bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.

BlockIndentStepSizeNumberofspacesautomaticallyusedtoindentthenextlineofcodewhennestingelements.

WordWrapColumnThecolumnatwhichwordwrappingoccurs.Enter0ifyouwantthewordwraptobesettothewidthofthewindow.

ShowWordWrapColumnSelectthischeckboxifyouwanttodisplaythewordwrapcolumn.

TabColumnThetabstopswithintheeditingenvironment.

TabStopThenumberofspacesthecursormoveswhenyouclicktheTabkey.

178

WindowMenuTheWindowmenuallowsyoutoswitchbetweentheopenfiles.Selectingoneofthefilesopensitinwhichevereditor(CodeorVisual)isopen.

YoucanalsoswitchbetweenopenfilesusingthetabsintheStatusbaratthebottomoftheprogram.

179

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

http://www.coffeecup.com/html-editor/help/

Tonavigatethetips,usethePreviousandNextbuttons.Ifyoudonotwanttoseethesetipsonstartup,uncheckthecheckboxnexttoShowtipofthedayonstartup.

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

AboutThisSoftware…OpensawindowthatprovidesbasicinformationabouttheprogramandCoffeeCupSoftware.

181

ToolbarTheToolbarislocatedacrossthetopoftheprogramandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedprogramfeatures.Right‐clickingthetoolbaropensthismenu:


NewExpandstodisplayalistofoptionsforcreatingnewWebpages.

FordetailedtutorialscoveringthefourdifferentwaystocreateanewWebpage,readCreatingaNewWebpage.

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

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

NewFromLayout…OpensawindowthatallowsyoutochoosefromseveralWebpagelayouts.

182

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

NewFromTheme…OpensawindowthatallowsyoutochoosefromseveralWebpagethemes.

183


withapagestructure,selectNewFromLayout.Formoreinformationaboutthedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetweenalayoutandatheme?

SaveExpandstodisplayalistofoptionsforsavingyourwork.

Save(Ctrl+S)Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequently

topreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.

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

SaveAllSavesalltheopenfiles.


184


OpenExpandstodisplayalistofoptionsforopeningpreviouslycreatedwork.

Open…(Ctrl+O)Allowsyoutoopenandworkwithapreviouslycreatedfile.

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

RecentFilesDisplaysalistoffilesyouhaveworkedwithrecently,whichallowsyoutoaccessthemmorequickly.


PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthen

selectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.

185

AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.






FindandReplaceExpandstodisplaythefindandreplaceoptions.

Find…(Ctrl+F)OpenstheExtendedFindwindow,whichallowsyoutosearchthecurrentdocument,

allopendocuments,orallthedocumentsinagivenfolderforasearchterm.

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

186

ExtendedFindResultsDisplaystheSearchResultstabatthebottomoftheprogram.

SpellingandThesaurusExpandstodisplaythespellingandthesaurusoptions.

CheckSpelling…Checksthespellinginyourdocument.Iftherearenospellingerrors,youwillseeawindowthat

says,“Thespellingcheckiscomplete.”




187

DocumentExpandstodisplaydocumentoptions.

DocumentWeight…OpenstheDocumentWeightwindow,whichcontainsinformationaboutthesizeofthecurrentlyopendocumentandhowlongitwilltaketo

downloadtoacomputeronseveraldifferentconnections.

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

188

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

ApplicationsExpandstoshowalistofotherapplicationsyoucanopenfromwithintheHTMLEditor.Toaddexternalapplications,gotoTools>Preferences>Applicationstab.

SearchAllowsyoutoenterasearchtermandsearchforitintheopendocument.Usetheupanddownarrowstoviewthepreviousandnextiterationsofthesearchterm.

190

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

CodeEditorToolbarTheCodeEditortoolbarislocatedacrossthetopoftheCodeEditorandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:


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

LinksExpandstodisplaylinkoptions.

Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallows

youtoinsertalinkandanyassociatedattributes.


192

FontsExpandstodisplayfontoptions.




FontEffectsAllowsyoutoapplyoneoftheprovidedeffectstoyourfont.

193

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

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


FormItemsExpandstodisplayformoptions.


196

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

http://www.coffeecup.com/form-builder/

ListBox…OpenstheInsertListBoxwindow,whichallowsyoutoconfigurethecontentsofalistbox.

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

198

RadioButtonGroup…OpenstheInsertRadioButtonGroupwindow,whichallowsyoutoconfigurearadiobuttongroup.Radiobuttonsmustbegroupedinordertoworkcorrectly.

EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevaluesyouwouldliketoappearintheformresultsintheValuefield.TheNameappearsintheformresults,andtheAlignmentoptionscontrolwheretheelementappearsonthepage.

CheckboxInsertsthecodeforacheckbox,whichisasquareboxthatcanbeselectedanddeselected,andisbestsuitedforlistsinwhichyourusercanselectoneormoreanswers.Acheckboxlookslikethis:

RadioButtonInsertsthecodeforaradiobutton,whichisaroundbuttonthatyourusercanselectbutonlydeselectbyselectinganotheroption.Theyarebestsuitedforlistsinwhichyourusercanonlyselectoneanswer.Aradiobuttonlookslikethis:

199

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

SubmitButtonInsertsthecodeforasubmitbutton.

ResetButtonInsertsthecodeforaresetbutton.

ListOpenstheInsertListwindow,whichallowsyoutoinsertorimportoneoffourdifferentkindsoflists:bulleted,numbered,definition,orunformatted.

StyleSheetItemsDisplaysalistofoptionsthatletyouinsertvariousstylesheetitems.


StyleSheetWizard…OpenstheStyleSheetwindow,whichallowsyoutochoosebetweencreatinganewstylesheetclassandapplyingastylesheettoapreexistingHTMLtag.

Afteryoumakeyourchoice,youwillbetakentotheStyleSheetWizard,whichallowsyoutosetthevariousoptionsforyourstylesheet.

StyleSheetAttributeWizard…OpenstheStyleSheetWizard,whichallowsyoutosetthevariousoptionsforyourstylesheet.

CSSMenuDesignerOpenstheCoffeeCupCSSMenuDesigner,whichallowsyoutodesignaCSSmenu.

201

ColorThisbuttonopenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursorispositionedonthepage.

EditDisplayExpandstodisplayprogramdisplayoptions.

ToggleWordWrapSelectthisoptionifyouwouldlikeyourtexttoautomaticallywraptofittheCodeEditorworkspace.

ToggleGutterEnablesthegutter,whichisabartotheleftofthecodewherelinenumbers,bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.

202

ToggleLineNumbersTurnsonlinenumbersinthegutter.

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

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

203

TestinBrowserExpandstodisplaybrowser‐testingoptions.


TestwithFavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.


Toconfigureadditionalbrowsers,gotoTools>Preferences>BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google

Chrome,andSafari.

204

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

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



205


206

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

Thisiscalledsyntaxhighlighting,anditisausefulwaytotelldifferenttags,tagattributes,andtagvaluesapart.Forexample,itmaybedifficultortime‐consumingtotrytofindeveryinstanceofan<img>tag,butifyousetyourhighlightingoptionstomakeall<img>tagsred,thenallyou’dhavetodoislookforthecolorred.

Tocustomizeyoursyntaxhighlightingoptions,gotoTools>DocumentDisplayProperties.Selectthelanguagewhosesyntaxhighlightingcolorschemeyouwanttochange,andthenclicktheModifyHighlightingbutton.ThisopenstheHighlightingOptions

window,whichallowsyoutocreateormodifythehighlightingcolorscheme.

208

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

VisualEditorToolbarTheVisualEditortoolbarislocatedacrossthetopoftheVisualEditorandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:


InsertandMoveTextInsertsthewords“YourTextHere”intotheVisualEditor.Youcanreplacethismessagewithyourowntext.

EditElementSourceOpenstheEditElementSourcewindow,whichallowsyoutoworkwiththeHTMLfortheselectedobject.

210

MoveandUnlockObjectUnlockstheobjectfromitscurrentposition,whichallowsyoutodraganddropittothedesiredlocationonthepage.

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


Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallows

youtoinsertalinkandanyassociatedattributes.


FontsExpandstodisplayfontoptions.




211


HeaderSizesSelectaheadersize(1‐6)anditwillappliedtotheselectedtextoranytexttypedafterthecurrentcursorposition.

212

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

VisualTableElementsExpandstodisplayvisualtableoptions.

TableDesigner…OpenstheTableDesigner,whichallowsyoutocreateatable.Atablecanbeusedtodisplayinformationorasyourpagelayout.

QuickTable…OpenstheQuickTablewindow,whichallowsyoutodesignatable.

214


ToggleInvisibleGridLinesDisplaystablebordersiftheyaresetto0.ThisispurelyfordesignpurposesandwillnotberenderedinaWebbrowser.

InsertColumnInsertsacolumnintothetable.

InsertRowInsertsarowintothetable.

DeleteColumnDeletesthecolumnwherethecursorispositionedortheselectedcolumn(s).

DeleteRowDeletestherowwherethecursorispositionedortheselectedrow(s).

MergeCellsThisoptionisonlyavailableintheTableDesigner.

SplitCellSplitsthecellinhalf.

PreviewExpandstodisplaypreviewoptions.

215


TestwithFavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtabinthePreferenceswindow.



Chrome,andSafari.


216



ColorThisbuttonisonlyenabledintheCodeEditor.

217

CodeandVisualEditorRight‐ClickMenuTheright‐clickmenuallowsyoutoaccesscommonlyusedfeaturesintheCodeandVisualeditors.




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

218

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.


219


Save(Ctrl+S)Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.

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




220





Chrome,andSafari.


221



FontExpandstodisplayfontoptions.



222



HeaderSizesSelectaheadertag(h1‐h6),anditwillbeinsertedintoyourdocumentorappliedtoanyselectedtext.

223


Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallowsyoutoinsertalinkandanyassociatedattributes.


Image…OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.


Color…ThisbuttonopenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursorispositionedonthepage.

224

SpellingandThesaurusExpandstodisplayspellingandthesaurusoptions.

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

225


SpellCheckerOptions…OpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.



CloseClosesthecurrentfileyouhaveopen,butleavestheprogramopen.

226

WorkingWithTablesintheVisualEditorWhenyouselectatableintheVisualEditor,apaneappearsatthebottomofthescreendisplayingoptionsformodifyingyourtable.

YoucanalsodesignatableusingtheTableDesigner.Toaccessit,gotoInsert>TableDesigner.

HorizontalandVerticalAlignmentSelectthehorizontalandverticalalignmentforthetextintheselectedcell.

WidthandHeightEnterthewidthandheightinpixelsoftheselectedcell.

NoWrapSelectthischeckboxifyoudonotwantthetextintheselectedcelltoautomaticallywraptofitthewidthofthecell.

BGColorOpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.

227

NoBGColorRemovesthebackgroundcolor.

BorderColorOpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursorispositionedonthepage.

NoBorderColorRemovesthebordercolor.

228

PreviewTabThePreviewtabisabuilt‐inbrowser(InternetExplorer)youcanusetopreviewyourWebsite.


Chrome,andSafari.

SincethePreviewtabispoweredbyInternetExplorer,itsright‐clickmenuisthesameastheright‐clickmenuforthebrowser.Formoreinformationabouthowtousetheoptionsintheright‐clickmenu,consultInternetExplorer’sdocumentation

(http://windowshelp.microsoft.com/Windows/en‐US/internet‐explorer.mspx).

• Preview toolbar

229

http://windowshelp.microsoft.com/Windows/en-US/internet-explorer.mspx

PreviewToolbarThePreviewtoolbarislocatedacrossthetopofthePreviewtabandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:


BackTakesyoutothepreviouslyviewedpage.

ForwardTakesyoutothepageyounavigatedbackfrom.

StopStopsthepagefromloading.

RefreshReloadsthecontentofthepage.

230






Chrome,andSafari.

231

StatusbarTheStatusbarislocatedatthebottomoftheprogram,andallowsyoutoswitchbetweenopendocumentsandviewbasicinformationabouttheopenfile.

FileTabsToswitchbetweenopendocuments,clickthetabwiththefilenameofthedesireddocument.

Tocloseafilefromoneofthesetabs,right‐clickit.Thisopensaright‐clickmenuthatallowsyoutoclosethetab.

FilePathHoldingyourmouseoverafileintheMyComputertabdisplaysthefullfilepathintheStatusbar.

Line,Column,andSaveStatusTheright‐handsideoftheStatusbardisplaysthelineandcolumnwherethecursoriscurrentlypositioned.Italsoletsyouknowifyourfileissavedorunsaved.

232

TagInformationWhenyourcursorispositionedwithinan(X)HTMLtagorCSSproperty,alistofvalidattributeswillappearintheStatusbar.

Toaccesstheseattributes,starttypingtheoneyouwanttouse,ortypeaspace.ThisopenstheCodeCompletionlist,whichcontainstheavailableattributesyoucanuse.

233

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

MyWebsitesTabTheMyWebsitestabiswhereyouorganizeandworkwithyourWebsiteProjects.


• Local Disk tab Local Disk right-click menu

• Server tab Server right-click menu

• My Websites toolbar

235

LocalDiskTabTheLocalDisktabiswhereyouworkwiththeWebsiteProjectfilessavedonyourcomputer.YoucanviewthestructureofyourWebsiteProjectandeditthefilesusingtheMyWebsitestoolbarortheLocalDiskright‐clickmenu.

TochangewhichtypesoffilesdisplayintheLocalDisktab,selectthedesiredfiletypefromthedrop‐downlistatthebottom.

236

AnotherfeaturethatappearsatthebottomofthetabisanimagepreviewthatappearswhenanimageisselectedintheLocalDisktab.

• Local Disk right-click menu • My Websites toolbar

237

LocalDiskRight‐ClickMenuRight‐clickingtheLocalDisktabopensamenuthatallowsyoutoworkwiththeWebsiteProjectortheselectedfile.

InsertasLinkIntoCurrentDocumentInsertstheselectedfileintothecurrentdocumentasarelativelink.

Youcanalsoaddalinktoadocumentbydraggingthedocumentfromthe

MyWebsitesorMyComputertabintotheCodeorVisualeditor.Thisopensawindowaskingifyouwanttoinsertthedocumentorpageasalinkorifyouwanttoopenitinanothertabforediting.

InsertImageIntoCurrentDocumentInsertstheselectedimageintothecurrentdocumentwithan<img>tag.


OpeninAssociatedApplicationOpenstheselectedfileintheassociatedapplication.Forinstance,ifyouselectedaPDF,itwouldopeninAdobeAcrobat.

EditOpenstheselectedfileinanewtab.

RenameAllowsyoutorenametheselectedfile.

Delete…Deletestheselectedfile.

238

CreateFolderCreatesanewfolder.

MoveFile/FoldertoWebsiteProjectAllowsyoutomovetheselectedfiletoadifferentlocationwithintheWebsiteProject.

UploadSelectedFilesUploadstheselectedfiletotheserverspecifiedintheWebsiteProjectSettingswindow.





FileProperties…OpenstheWindowspropertieswindowfortheselectedfile,whichprovidesbasicinformationaboutthefile.

239

240

ServerTabTheServertabiswhereyouworkwiththeWebsiteProjectfilessavedonyourserver.YoucanviewthestructureofyourWebsiteProjectandeditthefilesusingtheMyWebsitestoolbarortheServerright‐clickmenu.

Additionally,youcanclicktheShowFTPLoglinkatthebottomtoviewalogofyourFTPactivityintheCodeEditor.Thisinformationcanbeusefulifyouexperienceissueswhenconnectingoruploading.

• Server right-click menu • My Websites toolbar

241

ServerRight‐ClickMenuRight‐clickingafileintheServertabopensamenuthatallowsyoutoworkwiththeselectedfile.

EditOpenstheselectedfileinanewtab.Savingthefilesavesitdirectlytotheserver.

Downloadto[WebsiteProjectPath]DownloadstheselectedfiletothemainfolderinyourWebsiteProject.Onceyouhavedownloadedit,youcanmoveittothedesiredfolder.


Delete…Deletestheselectedfile.


FileProperties…Opensawindowthatprovidesbasicinformationaboutthefile,includingitsname,size,anddateitwasfirstcreated.

242

MyWebsitesToolbarTheMyWebsitestoolbarislocatedacrossthetopoftheMyWebsitestabandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:


WebsiteProjectsExpandstodisplayWebsiteProjectoptions.

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

OpenWebsiteProject…AllowsyoutoopenandworkwithapreviouslycreatedWebsiteProject.

CloseWebsiteProjectClosesthecurrentWebsiteProjectyouhaveopen,butleavestheprogramopen.

AllWebsiteProjectsOpensalistofalltheWebsiteProjectsyouhavecreated,whichallowsyoutoaccesstheseWebsiteProjectsmorequickly.

243

RemoveWebsiteProjectRemovestheselectedWebsiteProjectfromtheHTMLEditor.Thefilewillnotbedeletedfromyourcomputer.

WebsiteProjectSettings…OpenstheWebsiteProjectSettingswindow,whichallowsyoutoeditthesettingsforthecurrentWebsiteProject.

ToolsExpandstodisplayuploadanddependenciesoptions.





UploadEntireWebsiteProjectUploadstheentireWebsiteProjecttoyourserver.Youwillneedtosetupaserverprofileinordertoperformthisaction.

UploadSelectedFilesUploadsthecurrentlyselectedWebsiteProjectfilestoyourserver.Thefilestructureispreservedduringtheupload.Forexample,ifyouuploadanimagecalledimage.pngthatislocatedinafoldercalledimages,image.pngwillbeuploadedintotheimagesfolderontheserver.Ifthereisnoimagesfolderontheserver,itwillbecreatedduringtheuploadprocess.YouwillneedtosetupaserverprofileintheWebsiteProjectSettingswindowinordertouploadyourfiles.

CheckWebsiteProjectDependenciesDisplaystheDocumentDependenciestabatthebottomoftheprogram.

244

MyComputerTabTheMyComputertaballowsyoutoviewandeditfilesonyourcomputer,addthemtoyourWebsiteProjectorWorkingfolder,andeditthemintheEditor.Itisdividedintotwosections.Thetopsectionallowsyoutobrowsefilesandfoldersonyourcomputer.YoucandosobyclickingthroughfoldersandusingtheoptionsintheMyComputertoolbar.Selectingafolderopensitscontentsinthebottomsection.YoucanworkwiththesefilesusingtheMyComputerright‐clickmenu.

TochangewhichtypesoffilesdisplayintheMyComputertab,selectthedesiredfiletypefromthedrop‐downlistatthebottom.

245

• My Computer toolbar • My Computer right-click menu

246

MyComputerToolbarTheMyComputertoolbarislocatedacrossthetopoftheMyComputertabandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeaturesintheMyComputertab.Right‐clickingthetoolbaropensthismenu:


DesktopOpenstheDesktopinthefilebrowser.

UpOneFolderMovesuponefolderfromtheselectedfolderinthefilebrowser.

RefreshRefreshesthecontentintheMyComputertab.Ifyouhaverecentlyaddedafileanditdoesnotappear,tryrefreshingthisarea.

GotoWorkingFolderOpensyourWorkingfolderinthefilebrowser.IfyouareusingaWebsiteProject,bydefault,theWorkingfolderisthesameastheWebsiteProjectsfolder.Otherwise,theWorkingfolderiswhereyousaveyourWebsitefiles.

247

MyComputerRight‐ClickMenuRight‐clickingafileinthebottomsectionoftheMyComputertabopensamenuthatallowsyoutoworkwiththeselectedfile.

InsertasLinkIntoCurrentDocumentInsertstheselectedfileintothecurrentdocumentasarelativelink.

YoucanalsoaddalinktoadocumentbydraggingthedocumentfromtheMyWebsites

orMyComputertabintotheCodeorVisualeditor.Thisopensawindowaskingifyouwanttoinsertthedocumentorpageasalinkorifyouwanttoopenitinanothertabforediting.

InsertImageIntoCurrentDocumentInsertstheselectedimageintothecurrentdocumentwithan<img>tag.Theprogramusesarelativelink,soifthefileisnotlocatedinyourWebsiteProjectorWorkingfolder,itmaynotdisplaycorrectlyonyourWebsite.


InsertSoundIntoCurrentDocumentInsertstheselectedsoundintothecurrentdocumentwitha<bgsound>tag.Theprogramusesarelativelink,soifthefileisnotlocatedinyourWebsiteProjectorWorkingfolder,itmaynotdisplaycorrectlyonyourWebsite.

CopyFiletoProjectExpandstodisplayalistoffoldersinthecurrentlyopenWebsiteProject.

248

Selectthefolderwhereyouwouldlikethefiletobestored,andacopyofthefilewillbecreatedinthatfolder.

OpeninEditorOpenstheselectedfileinanewtabintheEditor.

ConvertImageFormat…Allowsyoutoconverttheformatoftheimage.Werecommendusing.gif,.jpg,or.pngimagefiles.

OpeninAssociatedApplicationOpenstheselectedfileintheassociatedapplication.Forinstance,ifyouselectedaPDF,itwouldopeninAdobeAcrobat.



249


CopyMakesacopyoftheselectedfileandstoresthatcopyontheWindowsclipboard.Thefileisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.

CutRemovestheselectedfileandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.

DeleteRemovestheselectedfile(s).

PasteTakesthefilestoredontheWindowsclipboardandplacesitinthefolder.Pastingafiledoesnotremoveitfromtheclipboard,soyoucanpastethesamefileasmanytimesasyouneed.Inorderforthisfunctiontowork,youmustclickinanareaoutsideofanyotherfiles.

MoveOpensawindowthatallowsyoutomovethefiletoadifferentlocationyourcomputer.

250



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

CodeSnippetsTabTheCodeSnippetstabcontainsthepredefinedcodesnippetsthatcomewiththeprogram,aswellasanysnippetsyoumayhaveadded.

Toaddasnippettoyourpage,double‐clickitordraganddropitintotheCodeEditor.

• Code Snippets toolbar • Code Snippets and Tags right-click menu

252

CodeSnippetsToolbarTheCodeSnippetstoolbarcontainsbuttonsthatyoucanclicktoperformcertaincommonlyusedactionsquickly.Right‐clickingthetoolbaropensthismenu:


RefreshRefreshesthecontentintheCodeSnippetstab.Ifyouhaverecentlyaddedasnippetanditdoesnotappear,tryrefreshingthisarea.

InsertItemIntoCurrentDocumentInsertstheselectedcodesnippetintotheCodeEditor.Youcanalsoaddasnippetbydouble‐clickingitordragginganddroppingitintotheCodeEditor.

EditSnippetOpensthecodesnippetinitsowntabintheHTMLEditorworkspace,whichallowsyoutoeditit.

NewSnippetOpensanewblanktabintheHTMLEditorworkspace,whichallowsyoutoenterthecodeforanewsnippet.

253

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

TagsToolbarTheTagstoolbarallowsyoutoselectwhichgroupoftagsisdisplayed.Right‐clickingthetoolbaropensthismenu:


HTMLTagsDisplaysalistofthemostcommonlyusedHTMLtags.

PHPTagsDisplaysalistofthemostcommonlyusedPHPtags.

CSSTagsDisplaysalistofthemostcommonlyusedCSStags.

255

CodeSnippetsandTagsRight‐ClickMenuRight‐clickingtheCodeSnippetsorTagstabopensamenuthatallowsyoutoworkwiththeselectedtagorcodesnippet.

OnlytheInsertItemIntoCurrentDocumentoptionworksinbothtabs.

NewSnippet(CodeSnippetTabOnly)OpensanewblanktabintheHTMLEditorworkspace,whichallowsyoutoenterthecodeforanewsnippet.

DeleteSnippet(CodeSnippetTabOnly)Deletestheselectedsnippet.

InsertItemIntoCurrentDocumentInsertstheselectedtagorcodesnippetintotheCodeEditor.

Youcanalsoaddatagtoyourpagebydouble‐clickingitordragginganddroppingitintotheCodeEditor.

OpeninNewWindow(CodeSnippetTabOnly)OpensthecodesnippetinitsowntabintheHTMLEditorworkspace,whichallowsyoutovieworeditit.

256

CharactersTabTheCharacterstabdisplaysalistofHTMLentitiesforcommonlyusedspecialcharacters.

ToaddanHTMLentitytoyourpage,double‐clickitordraganddropitintotheCodeEditor.

257

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

Here’swhatgoesintheprovidedfields:

WebsiteProjectNameThisisthenameofyourWebsiteProject.Sinceit’sjustapersonalreminder,youcannameitanythingyouwant.Ourrecommendation,justtokeepthingssimple,istogiveyourWebsiteProjectthesamenameasyourWebsite.

WebsiteProjectLocationThisisthelocationwhereyourWebsiteProjectfileswillbesaved.UsetheBrowseicontobrowseyourcomputerforthedesiredlocation.

259

IfyouwanttocreateaWebsiteProjectusingpreexistingfiles,selectthefolderthatcontainsthefilesyouwanttouse.Ifyouarestartingfromscratch,youwillneedtocreateablankfolderwhereyourWebsiteProjectfileswillbestored.Todothis,browseyourcomputerfortheplacewhereyouwouldliketostorethisfolder,andthenclickCreateFolder.Givethefolderaname,makesureitisselected,andthenclickOK.

ServerThisistheserverwhereyourWebsitefileswillbestored.YoucanselectoneoftheserversyouhavealreadydefinedordefineoneusingthefieldsintheServerConfigurationwindow.

260





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.


CheckDependenciesBeforeUploadingFilesThischecksyourdocumentdependenciesbeforeuploadingyourfilestoyourservertomakesuretheyarereferencedcorrectly.WebsiteProjectdependenciesarelinksandexternalfiles,suchasstylesheets,images,etc.—basicallyanythingthatyourHTMLfilelinksto.Ifoneormoreofyourdocumentdependenciesaren’treferencedcorrectly,youwillreceiveinformationabouttheincorrectlyreferenceddependency.

261

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

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

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

ChooseCurrentProject.ThethemefileswillappearintheMyWebsitestab.

Step3:AddingFolderstoYourWebsiteProjectAnorganized,intuitivestructureisareallyimportantaspectofawell‐designedWebsite.OneofthefirstthingsyoucandotohelporganizeyourWebsitefilesistocreatefoldersforspecificpageelements.TakealookattheWebsiteProjectcreatedfromatheme.SeethosesubfoldersofthemainWebsite—css,images,

265

andjs?Eachofthosefoldersisclearlylabeledwiththenameofthetypeoffileitcontains.Thissystemhelpskeepeverythinginitsownplace.Let’semulatethisstructureinourblankWebsiteProject.(Ofcourse,youcanalsoaddfolderstoaWebsiteProjectcreatedwithatheme.)Tocreateafolder,right‐clickanywhereintheMyWebsitestab.Thisopensaright‐clickmenuthatcontainsoptionsforworkingwithyourWebsiteProject:

SelectCreateFolder.Thiscreatesanewfolder.Bydefault,itwillbenamedNewFolder1,butyoucangiveitanynameyouwant.Forthistutorial,let’scallthisfileimagesanduseittostore—youguessedit—images.

266

Step4:AddingOtherFilestoYourWebsiteProjectNext,let’saddsomeimagestoourimagesfolder.Todothis,switchovertotheMyComputertab.

Usetheareaatthetoptobrowseyourcomputerfortheimageyouwanttoaddtoyourpage.Selectingafolderinthetopareaopensallitsfilesinthebottomarea.Let’stakealookinsidePublicPictures>SamplePictures.

267

Whenyoufindtheimageyouwanttouse—inthiscase,let’sgowithTocoToucan—right‐clickit.Thisopensanotherright‐clickmenuwithoptionsforworkingwiththefilesonyourcomputer.SelectCopyFiletoFolder.ThisexpandstodisplayalistofthefoldersinyourWebsiteProject.

268

Sincethisisanimage,we’lladdittoimages>[Here].ThisopensawindowthatconfirmswhetheryouwouldliketocopythefiletoyourWebsiteproject.

Next,returntoyourWebsiteProjectbyclickingtheMyWebsitestab.Expandtheimagesfolderbyclickingthelittleplussigntotheleftofit.There,you’llseeyournewlyaddedimage.

269

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

<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

Okay,admittedlyit’sprobablynottheWebsiteofyourdreams,butit’sastart.Yourimagedisplayscorrectly,andyourlinkpointstoyourAboutUspage.

Foradetailedtutorialaboutthemanydifferentwaysyoucanpreviewyourwork,readPreviewingYourWork.

Step8:UploadingYourWebsiteProjectEventhoughyourWebsiteisn’tquitedoneyet,let’sstillwalkthroughthestepsinvolvedinuploadingit.It’sprettysimple—justclicktheToolsiconatthetopoftheWebsiteProjectstabandselectUploadEntireWebsiteProject.ThisopenstheUploadFilestoServerwindow,whichdisplaysthestatusofyourfileupload.

272

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

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

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

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

Clickwhichevercoloryouwouldliketoapply.Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

Toselectoneofthesecolors,clickthecoloryouwanttouse,andthenadjustthesliderontheright‐handsidetochangethebrightness.

ColorSchemeDrop‐DownListIfyouwouldliketouseapredefinedcolorschemeforthesecoloroptions,youcanselectonefromtheColorSchemedrop‐downlist.

277

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

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

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

IfyoualreadyhavetheEditoropen,opentheThemeChooserusingoneoftheseoptions:

• Go to File > New From Theme • Click the New Items toolbar icon and select New From Theme.

Step2SelectthedesiredthemefromtheThemeChooser.

281

YoucanpreviewhowthedifferentthemeslookinthePreviewarea.

Step3Whenyoufindathemeyoulike,clickOK.Thecodewillbeinsertedintoyourpageforyou.Oncethecodeisinserted,youcanreplacethegenerictextandimageswithyourown,tweakelementsofthecode,anddowhateverelseyougottadotocompleteyourWebpage!

282

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

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

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

adjustments,sincetheHTMLEditordoesn’tmaintaintheaspectratio.Thismeansthatunlessyouknowtheexactratioofthewidthtotheheight,yourimagewilllikelyendupdistorted.Ifyouneedtomakechangestothesizeofyourimage,saveyourselfaheadacheanduseanimage‐editingprogram.

URLtoLinkToIfyouwouldliketomaketheimageintoaclickablelink,usethisfieldtoentertheURLwhereyouruserwillbetakenwhentheyclicktheimage.IfyouarelinkingtoanexternalWebsite,besuretoincludethefullWebaddress,includingthehttp://wwwbit.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelinkbyclickingthefileicontobrowseyourcomputerforthefileyouwanttolinkto.


workingwithWebsiteProjects?Checkoutthistutorial:WorkingWithWebsiteProjects.

Step3:CreateaThumbnailThisstepistotallyoptional.Thumbnailsareusuallyusedtolinktothelargeroriginalversionoftheimage.Thisgivesyouabitmoredesignfreedom,sinceyoudon’thavetoworkaroundtonsoflargeimages,andusersonslowconnectionswillthankyoufornotincreasingdownloadtimeswithtonsoflargefiles.Ifyou’rejustaddingaregularol’imagetoyourpage,youcanskipthispartandgostraighttoStep4.Butifthissoundsuseful,switchovertotheThumbnailtabandfollowalong!

286

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

Wecan’tstressenoughhowimportantitistosaveyourimagestoyourWebsiteProjectorWorkingFolder!Ifyoudon’t,theymaynotbeuploadedtoyourserver,whichmeanstheywon’tshowuponyourWebsite.Instead,you’llgetthoseannoyingredX’s—nottomentiona

hugeheadache.

Method2:ResourceBrowserUsingthismethod,youcansimplydraganimagefromtheResourcebrowserontheleft‐handsideofthescreentoyourpage.Here’sthestep‐by‐stepversion:

288

Step1OpentheMyComputertabintheResourcebrowserontheleft‐handsideoftheprogram.

Step2Usetheareaatthetoptobrowseyourcomputerfortheimageyouwanttouse.Selectingafolderinthetopareaopensallitsfilesinthebottomarea.

Step3Whenyouhavefoundtheimageyouwanttoadd,useyourmousetodragittoyourWebpage.ThisopensawindowthatasksifyouwanttocopyyourimagefiletoyourWebsiteProject.

289

Wecan’tstressenoughhowimportantitistosaveyourimagestoyourWebsiteProjectorWorkingFolder!Ifyoudon’t,theymaynotbeuploadedtoyourserver,whichmeanstheywon’tshowuponyour

Website.Instead,you’llgetthoseannoyingredX’s—nottomentionahugeheadache.

Step4Theimagewillnowappearonyourpagewithoutanyspecialformatting.Ifyouneedtoworkwiththealignment,bordersettings,alttext,oranyotherassociatedattributes,switchtotheCodeEditorifyouaren’ttherealready,andtheneditthecodedirectly.

290

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

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

defaultstoadefaulttoagenericfont(usuallyArialorsomethingsimilar).ThiscanmessuptheappearanceofyourWebsite,withwordsrunningoutofboxes,elementsgettingpushedoutofthewayofmaraudingtext,andothersuchchaosthatbasicallymessesupyourentireWebsite.Yikes!YoucanavoidthismessbyusingWeb‐safefonts.Thesearefontsthatareinstalledoneverycomputerbydefault,whichmeansthattheywillalwaysdisplaycorrectlyoneverycomputer.Theyincludesuchtimelessclassicsas:Arial Arial Black Courier New



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

Ifyouseeacoloryoulike,clickit.Ifyouwanttoseeevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

Step4Whenyou'redoneformattingyourtextoptions,clickOK.Allthecodewillautomaticallybeaddedtoyourpageforyou!

294

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

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

<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

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

URLThisisthelocationwhereyouruserwillbetakenwhentheyclickthelinktext.IfyouarelinkingtoanexternalWebsite,youmustincludethefulllink,includinghttp://andwww,ifapplicable.TheexampleabovelinkstoanexternalWebsite,http://www.coffeecup.com.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelativelinkbyclickingthefileicontobrowseyourcomputerforthedesiredpage.YoushouldmakesurethefileislocatedinyourWorkingfolderoryourWebsiteProjecttomakesureitisreferencedcorrectly.


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

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

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

Step2:AddingtheFiletoYourWebsiteProjectRight‐clickthefileyouwanttoaddtoyourprojectandselectCopyFiletoProject>[Folder],whereFolderisthefolderwhereyouwanttostorethefile.Inthistutorial,we’lladdthefiletotheWebsiteProjectrootfolder,butyoumaywanttostoreyourdownloadablefilesinaspecialsubfolder.

302

ThisopensawindowconfirmingwhetheryouwanttocopythefiletoyourWebsiteProjectFolder.ClickYes.

303

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

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

<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

Whenyou’redone,clickOK.Thisinsertsthelinkcodeinyourpage,which,inourexample,wouldlooklikethis:

<a href=”#jsmith”>Learn more about John Smith</a> Andthat’sit!NowyoucanswitchovertothePreviewtabtoseeyourlinkandtargetinaction.

307

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

BulletStyleThisoptionisonlyavailableifyoucreateabulletedornumberedlist,anditallowsyoutochoosethestyleofthebulletsornumbers.Here’showthedifferentbulletsandnumberslook:

ListHeaderTextThisisthetitleofyourlist,anditisonlyavailableifyoucreateabulletedornumberedlist.

ListItemFieldThisiswhereyouenteryourlistitems.Puteachseparatelistitemonitsownline.

309

Ifyouarecreatingadefinitionlist,eachitemyoutypeisadefinitiontitle(e.g.“Thisisadefinitionlist”intheexampleabove).Toadddefinitions,switchtotheCodeEditorandtypethembetweenthe

corresponding<dd></dd>tags.

ImportListIfyouhavealreadyformattedalistandjustwanttoimportitscontents,clickthisbutton.Thisopensawindowthatallowsyoutobrowseyourcomputerforatextfilecontainingyourlist.Youcanonlyimportlistsin.txtformat.

Whenyoufindthefileyouwanttoimport,selectitandclickOpen.ThecontentswillbeinsertedintheListItemfield.

Step3Whenyouaredoneconfiguringyourlistitemsandoptions,clickOK.Thecodewillbeinsertedinthepageforyou.

310

HowtoUseSnippetsIfyou'veeverbeenfrustratedathavingtotypethesamepieceofcodeoverandover,you'lllovesnippets.AsnippetisapieceofcodestoredintheHTMLEditorthatcanbeusedandreusedasmanytimesasyouneed.YoucansavesnippetsofHTML,JavaScript,DHTML,Perl,oranyotherscriptinglanguage.TheHTMLEditorcomeswithseveralbuilt‐insnippetsandgivesyoutheoptiontocreateyourown.

ViewingSnippetsToseealistofavailablesnippets,opentheCodeSnippetstabintheResourcebrowserontheleft‐handsideoftheprogram.Whenyouselectasnippetnamefromthetoppane,thecodewillappearinthebottompane.Allthebuilt‐insnippetscomewithadetailedHTMLcommentexplainingwhatthecodedoes.

311

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

EditingSnippetsToeditanexistingsnippet,selectitandclicktheEditSnippeticonintheCodeSnippetstoolbar.ThisopensthesnippetcodeinatabintheHTMLEditorworkspace.Edititandthensaveitnormally.

DeletingSnippetsTodeleteanexistingsnippet,right‐clickitandselectDeleteSnippet,orusethekeyboardshortcutDelkey.Thisopensawindowaskingifyouaresureyouwanttodeletethesnippet.Ifyouchangeyourmindaboutdeletingthesnippet,clickNo.

RefreshingtheCodeSnippetsTabIfyouhaveadded,edited,ordeletedasnippetbuthaven’tseenthechangesintheCodeSnippetstab,clicktheRefreshiconintheCodeSnippetstoolbar.Thisrefreshestheareasoyoucanseethemostup‐to‐datesnippets.

313

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

Step3OpentheHTMLEditorpagewhereyouwanttheFlash™objecttoappear,andpastethecodebetweenthe<body>and</body>tags.

Step4Uploadyourchangestoyourserver,makingsureyouincludethefilesassociatedwithyourFlash™elementaswellasthepagecontainingthecode.

315

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

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.


workingwithWebsiteProjects?Checkoutthistutorial:WorkingWithWebsiteProjects.Onceyouhaveenteredtherequiredinformation,clickOK.Thecodewillautomaticallybeaddedtothepageforyou.IfyouhavealreadycreatedtheHTMLfilesthatwillbeusedasthesourceforeachframe,clickthePreviewbuttonintheToolbar,andyou'llbeabletoviewyourpage,framesandall!

317

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

Step2:OpeningtheCSSMenuDesignerNowthatyouhaveremovedyouroldmenucode,thenextstepistoworkwiththemenuyouwanttoinsertinitsplace.First,openuptheCSSMenuDesignerbygoingtoInsert>CSSMenuDesigner…

Theoptionsatthebottomofthiswindowappearnomatterwhichtabisselected.Here’swhattheydo:

OpenMenuClickthisbuttontoopenanexistingmenu.

SaveMenuClickthisbuttontosaveyourmenu.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.

PreviewClickthisbuttontopreviewyourmenuinyourdefaultWebbrowser.

OKClickthisbuttontoinsertyourmenucodeintothecurrentdocument.We’lltalkmoreaboutthisoptioninStep5.

CancelClickthisbuttontoabandonanyunsavedchangestoyourmenuandexittheCSSMenuDesigner.

319

Thenextstepgoesovertheprocessofopeningapreexistingmenu.Ifthisisyourfirstmenu,skipaheadtoStep4.

Step3:OpeningaPreviouslyDesignedMenuIfyouhavealreadydesignedamenuintheCSSMenuDesignerortheDHTMLMenuBuilderandwanttomakeeditstoit,clicktheOpenMenubutton.Thisopensawindowthatallowsyoutobrowseyourcomputerforthe.mnufileforyourexistingmenu.

Whenyoufindthefileyouwanttoopen,selectitandclickOK.ThisopensthemenuintheCSSMenuDesigner.

YoucanopenamenucreatedintheDHTMLMenuBuilderintheCSSMenuDesigner!Justfindandopenthe.mnufileforyourDHTMLmenu.Youcanthenedititnormally.Whenyousaveorinsertyourmenucode,itwillbeconvertedtoCSS.

Step4:DesigningaMenuNowthatwe’vecoveredthenutsandboltsofopeningamenu,let’sgetdowntobusiness:designingit!

320

TheCSSMenuDesignerisbrokenupintothreetabs:MenuDesigner,MenuColors,andOptions.TheMenuDesignertabiswhereyouworkwiththestructureofyourmenu;theMenuColorstabiswhereyoupickoutyourmenucolorscheme;andtheOptionstabissortofthecatchallsection,whereyoucanconfiguretherestofyourmenuoptions.Let’sgothrougheachoftheseoptionsanddesignourmenu!

MenuDesignerTab

First,takealookattheYourMenusection.Thisiswhereyoucankeepaneyeonthestructureofyourmenu.First,let’saddarootitem,whichisabuttoninthemainpartofthemenu.ClickingtheAddRootItembuttoninsertsabuttoncalled,bydefault,Untitled1.

321

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

Let’saddanothersubitemtotheLearnMoreitem.YoucouldselectLearnMoreandclicktheAddSubitembutton,oryoucoulduseadifferentmethodandclickAboutUsandclicktheAddSiblingbutton.Thisaddsanotheritemonthesamelevelastheselecteditem.Let’snamethisnewsubitemPrivacyPolicyandlinkittoprivacy.html.Here’showtheMenuDesignertablooksafterallthesechanges:

Let’sswitchovertotheMenuColorstabandcustomizeourmenucolors.

323

MenuColorsTab

First,takealookattheMenuColorSamplearea.Thisiswhereyoucankeepaneyeonyourmenucolorscheme.Next,let’stakealookatwhateachoftheseoptionsdoes.

BackgroundColorThebackgroundcolorofthemenu.

MouseoverBackgroundColorThebackgroundcolorofthemenuwhentheuserholdstheirmouseoverit.

FontColorThecolorofthemenutext.

MouseoverFontColorThecolorofthemenutextwhentheuserholdstheirmouseoverit.

BorderColorThecolorofthemenuborder.Okay,nowthatweknowwhateverythingdoes,let’spickoutsomecolors!Howaboutaprettydarkgreenforthemenubackground?Tochangethis,clickthecolorswatchnexttowhereitsaysBackgroundColor,andselectthedarkgreenshadeyouwant:

324

Hmm,lookslikethereisn’tmuchchoiceintermsofdarkgreens,solet’sclickCustomColor.Thisopensarainbowgradientwherewecanbrowseevenmorecolorsandadjustbrightness.

Perfect!Next,let’susethesameprocesstopickalightgreenforthemouseovercolor.Therestofthecolorslookgoodasis,butlet’schangethesubmenucolorsto

325

matchourmainmenucolors.Todothis,clicktheUseMainMenuColorsbutton.Rightnow,theMenuColorstablookslikethis:

Awesome!Let’sswitchonovertotheOptionstabtomakeafewmorechangestoourmenu.

OptionsTab

326

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

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

Andthat’sitforcustomization!Let’sinsertourmenu,shallwe?

Step5:InsertingYourMenuToinsertyourmenu,clickOK.Thisopenstwowindowscontaininginformationaboutyourmenucode:

Thiswindowremindsyouthatyoumustremoveallyouroldmenucodebeforeinsertingnewcode.IfyoufollowedtheinstructionsinStep1,youdon’tneedto

329

worryaboutthiswindow.ClickOK.ThisopenstheSaveMenuwindow,whichallowsyoutosaveyourmenutoworkwithitlater.

GoaheadandclickSave—youwouldn’twanttoloseallthechangesyoujustmade,right?Thisopensawindowthatallowsyoutochoosethefolderwhereyourmenufilesaresaved.Bydefault,itwillbesavedintoyourWorkingfolderoryourWebsiteProject.

330

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

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

</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

Nowwheneveryouwanttoinsertyourmenuintoanotherpage,justgototheCodeSnippetstabandinsertthesnippetsintothecorrectlocationsinyourpage.

FormoreinformationabouthowtouseCodeSnippets,readHowtoUseSnippets.

334

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

http://www.coffeecup.com/direct-ftp/

http://www.coffeecup.com/free-ftp/

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

ThelaststepistoswitchovertotheProxySettingstab,whereyoucanenterproxyinformationifnecessary.

Tobehonest,ifyouaren’tsurewhetheryoushouldusethisinformation,chancesarereallygoodthatyoudonothaveto.Ifyouwanttobeextra‐sure,contactyourhostingprovider,andthey’llbeabletogiveyouadefinitiveanswer.

Onceyou’veconfiguredallyoursettings,goaheadandclickOpen.YoucantracktheprogressofyourdownloadintheDownloadStatusareaatthebottomofthewindow.Whenit’sdone,edityournewlydownloadedfilesnormally.

337

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

Thesecondmethodistoclearallyourbookmarksatonce.Todothis,gotoDocument>ClearAllBookmarks.

339

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

Step3Selectalltheattributesyouwouldliketoapplytoyourcode,andwhenyou'redone,clickOK.Thisstartsthecodecleaningprocess.IfyouchangeyourmindabouttheeditstheCodeCleanermade,youcanundothembygoingtoEdit>Undo.YoucanalwaysreruntheCodeCleanerusingdifferentsettingsuntilyouaresatisfiedwiththeresults.

341

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

Step3Specifywherethechangesneedtobemade.ChooseCurrentDocumentifyouonlywantthechangestoapplytothedocumentcurrentlyopenintheHTMLEditor,andchooseAllOpenDocumentsifyouwantthechangestoapplytoallthedocumentscurrentlyopenintheHTMLEditor.Ifyouwanttochangeallthefilesinagivenfolder,chooseLookinFolderandthenclickthefoldericontobrowseyourcomputerforthedesiredfolder.

UsetheLookinFolderoptionwithcaution,becauseyouwon'tbewarnedbeforechangesaremadetoyourcode.Tobesafe,makebackupsofallyourfilesbeforeyoumakethesechanges.Alsonotethatthis

featurewillonlyworkonfilesthathavepreviouslybeenopenedintheHTMLEditor.

Step4ClickReplaceAll,andlettheHTMLEditordotherest!

343

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

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

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

SwitchingBetweenOpenFilesThereareacoupleofdifferentoptionsforswitchingbetweenopenfilesintheHTMLEditor.

WindowMenuTheWindowmenuallowsyoutoseeallthefilesopenintheEditor.Clickafiletoopenitforediting.

StatusbarTabsTheStatusbar,locatedatthebottomoftheprogram,displaystabsforeachoftheopendocumentsintheEditor.Toswitchbetweenopendocuments,clickthetabforthefileyouwanttoedit.

347

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

Step3SelecttheelementwhosecoloryouwanttochangefromtheElementlist.Inthistutorial,we’llchangeHTMLAttributes,soselectthatoptionfromthelist.

Step4Applythecolorand/orstylechangesyouwanttoappearinthecodesyntax.Youcanpreviewthemintheareaatthebottomofthewindow.Forthisexample,let’schangeHTMLattributestobemagentaandbold.Tochangethetextcolor,selectitfromtheForegroundcolorswatch.

349

Andtomakeitbold,selecttheBoldcheckbox.Aftermakingthesechanges,you’realldone!ClickOKtoclosethiswindow,andthenreturntotheCodeEditor,whereyou’llgettoseeyourcustomcodesyntaxhighlightinginaction.

350

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

Step2:CreateaNewToolbarClickNew.ThisopenstheAddToolbarwindow.Typeanameforyournewtoolbar.Inthistutorial,we’llcalloursMyToolbar.

.Whenyou’redone,clickOK.ThenewtoolbarwillbeaddedtotheToolbarslist.

You’llalsoseeatiny,blanktoolbarjusttotheleftoftheCustomizewindow.

352

Thenextstepwillshowyouhowtofillthattoolbarupwithhelpfulicons!

Step3:AddIconstoYourToolbarToaddbuttonstoyourtoolbar,switchovertotheCommandstab.

TheCategorieslistcontainsbroadcategoriesofindividualcommands.Youcan’taddthesetoatoolbar,butyoucanselectthemtoviewthecommandstheycontain.Forourtoolbar,let’saddsomebasiccommandsfromtheFilemenu.ClickFiletodisplaythesecommandsintheCommandslist.

353

Let’saddNewBlankPagetoourtoolbar.Todothis,justclickanddragNewBlankPageontothetoolbar.Whenyouseethelittleplussign,letgoofthemouse.Thisaddstheicontothetoolbar.

Awesome!Let’saddafewmoreicons—howaboutOpen,Close,andSave?

Looksgood!

354

Step4:ChangingtheOrientationoftheToolbarSayyouwantedyourtoolbartobehorizontalinsteadofvertical.Nosweat!—justclickoneofthesideswithyourmouseanddragfurthertotheside,orclickthebottomanddragthebottomofthetoolbarup.

Youcanhaveyouriconsstackedorallinaline—it’suptoyou!YoumaynoticethatMyToolbardoesn’tdisplayfully.That’sbecauseyourcustomtoolbarsonlytakeupasmuchspaceastheyneed,whichhelpsconservespace.

Step5:AdjustingAdditionalToolbarOptionsIfyouwanttoworkwithmoretoolbaroptions,switchovertotheOptionstab.

355

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

location.Onceyouhavedockedit,youcanchangeitspositionbyclickinganddraggingthesolidordashedlinesinthetoolbar.

Step7:FurtherCustomizingYourToolbarYoualsohavetheoptiontoaddorremovebuttonsrightfrominsidethetoolbar.Todothis,clickthedownward‐facingarrow:

Uncheckaselectiontoremoveitfromyourmenu.Youcanalwaysre‐additbyreselectingitfromthelist.

Step8:RemovingYourToolbarIfyoudecideyoudon’twantyourtoolbartodisplayinyourworkspace,butyoudon’twanttodelete,it,youcanremoveitbyclickingtheXintheupperright‐handcorner.

357

CustomizingCodeCompletionTagsHaveyoueverwantedtoknowhowtoaddyourowncustomtags,tagattributes,orattributevaluestotheCodeCompletionlistintheHTMLEditor?It'sactuallyprettyeasy.Forexample,let'ssayyouwantedtoaddacustomattributeforthe<img>tag.Here’showyou’dgoaboutdoingthis:

Step1GoEdit>EditXHTMLTags.ThisopenstheEditXHTMLTagswindow.

358

Step2SelectIMGfromtheTagslistontheleft‐handsideofthewindow.Whenyoudo,alltheavailableattributeswillappearintheSelectedTagAttributeslist.

Step3AtthebottomoftheSelectedTagAttributeslist,you’llseeagreenplussignicon.Clickthisicontoaddanewattributetothelist.Bydefault,itiscalledAttribute1.

359

Step4MakesureAttribute1isselected,andthenclicktheEditAttributeNameicon,whichisalsolocatedatthebottomoftheSelectedTagAttributeslist.Inthistutorial,we’llchangethenametoLONGDESC,butnaturally,youcangiveyourattributesanynamesyouwant.Andthat’sit!ClickClose.Nowwheneveryouaddan<img>tagtoyourHTMLdocument,theLONGDESCattributewillshowupintheCodeCompletionlist.ItwillalsoappearintheTagstabontheleft‐handsideoftheprogramwhenHTMLTagsisselected.

360

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

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

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

http://www.coffeecup.com/free-dhtml/

http://www.coffeecup.com/help/articles/how-do-i-add-custom-dictionaries-to-the-html-editor/

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

http://support.microsoft.com/default.aspx?scid=kb;en-us;259403

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

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

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

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

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

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

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

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

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

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

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

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

Inthelast10yearswehavemovedtoalargeroffice,startedaWebhostingcompany,asearchenginesubmissionservice,andcreatedover25othersoftwareprogramssothatotherscouldfulfilltheirdreamsofWebdesign,too.Nowwithmorethan29,905,323usersworldwide,andsoftwaresoldinover87countries,CoffeeCupSoftwarehasgrownbeyondourwildestdreams.Wehavewonlotsofawards,includingbeingNo.400intheInteractive500,arankingofthebestInternetandE‐Commercecompanies.Westillrememberthegoodolddaysthough,whenwewerejustasmallcoffeehouse.Westrivetokeepthatsamelevelofpersonalservicewithasmilethatwentwitheverycupofsteaminghotcappuccino.

377

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

ThankYouToallourusers—youknowwhoyouare...Withoutthesupportandfeedbackofthosewhodownloadandbuyoursoftware,wewouldn'tbehere.Weareveryluckytohavehadsomanypeopleovertheyearsthinkoursoftwareisgreat,andweareproudthatyoustilldo.

ThankYouEveryone!

379

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

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

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

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

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

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

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

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

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

• 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

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

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

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

parties'intentionsasreflectedintheprovision,andtheotherprovisionsoftheTermsofUseremaininfullforceandeffect.Regardlessofanystatuteorlawtothecontrary,anyclaimorcauseofactionarisingoutoforrelatedtouseoftheWebsiteortheTermsofUsemustbefiledwithinone(1)yearaftersuchclaimorcauseofactionaroseorbeforeverbarred.ThesectiontitlesintheTermsofUseareforconvenienceonlyandhavenolegalorcontractualeffect.

393

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

ATTN:[email protected]

395