coffeecup html editor manual
TRANSCRIPT
HTMLEditorHelpAugust2009
GotquestionsaboutthefeaturesinHTMLEditor?Wanttocheckoutsomehelpfultutorialstogetyouuptospeedonusingtheprogram?You’vecometotherightplace!ProgramOverviewLearnaboutthetoolsandfeaturesavailablewithintheprogram.TutorialsStep‐by‐stepinstructionsforthemostcommonlyusedfeaturesoftheprogram.FrequentlyAskedQuestionsGotaquestionaboutthesoftware?Findyouranswerhere.CoffeeCupInformationLearnmoreaboutCoffeeCupandreviewallthelegalgobbledygook.StillCan’tFindYourAnswer?
Visitouruserforums(http://www.coffeecup.com/forums/),checkoutthearticlesandvideotutorialsinouronlineKnowledgebase(http://www.coffeecup.com/html‐editor/help/)orcontactourfabuloustechsupportteam(http://www.coffeecup.com/help/)!
1
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
Athemeincludesthreepages(index.html,about‐us.html,andcontact‐us.html)thatincludetheHTMLandimagesforabasicdesign.Youcanreplacetheimagesandtextwithyourowncontent.Ifyouprefertowork
withapagestructure,gotoFile>NewFromLayout.Formoreinformationaboutthedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetweenalayoutandatheme?
Open…(Ctrl+O)Allowsyoutoopenandworkwithapreviouslycreatedfile.
OpenFromWeb…OpenstheOpenFromWebwindow,whichallowsyoutoimportanHTMLpageontheInternetintotheHTMLEditor.ThisoptionworksbestwithHTMLpagesthatdonotcontainPHPorSSI.Thesescriptsarestoredontheserver,andsometimesaddcodetoaWebpagethatcannotbeimportedintotheHTMLEditor.
RecentFilesDisplaysalistoffilesyouhaveworkedwithrecently,whichallowsyoutoaccessthemmorequickly.
CloseClosesthecurrentfileyouhaveopen,butleavestheprogramopen.
CloseAllClosesalltheopenfiles,butleavestheprogramopen.
Save(Ctrl+S)Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
SaveAs…(Shift+Ctrl+S)Savesthecurrentfileunderadifferentname.Thiswillnotoverwritethefileyouarecurrentlyworkingon;instead,itwillcreateanewfilethatyoucangiveadifferentname.
SaveAllSavesalltheopenfiles.
SaveSelectedTextasSnippet…OpenstheSaveSnippetwindow,whichallowsyoutonameandsavethehighlightedtextasasnippet.
17
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
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
YoucanonlyassignoneserverperWebsiteProject.IfyouwanttouploadanyorallofyourWebsiteProjectfilestoadifferentserverthantheonespecifiedinthisfield,youhavetwooptions:
1. Go to My Websites > Website Project Settings, switch the server, and then
upload the file(s). 2. Go to the My Computer tab, right-click the file(s) you want to publish, and
select the server and folder where you want to upload them. If any of your published documents reference these files, the path to the files you are uploading must match the path specified in your HTML code.
ConfigureServersOpenstheServerConfigurationwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
RemoteRootFolderTherootfolderwhereyourWebsitefilesarestoredonyourserver.Commonnamesincludewww,public_html,orweb.Ifyouarenotsureofthisinformation,contactyourhostingprovider.
ServerURLTheTCP/IPhostnameofyourFTPserver.ItshouldbeintheformofanIPaddress,yourdomainname(e.g.yourdomain.com),oryourdomainnameprecededbyftp.(e.g.ftp.yourdomain.com).Donotincludeftp://oranydirectorynamesuchasftp.yourdomain.com/mysite,becausetheseareinvalidTCP/IPhostnames.ItisuptoyourWebhostingcompanytoassignyourFTPserverhostname,soyouwillneedtofindoutfromthemwhatitis.
ExamplesofvalidWebserveraddressesftp.mysite.com24.24.100.100mysite.comExamplesofinvalidWebserveraddressesftp://ftp.mysite.comftp.mysite.com/mysitehttp://www.mysite.com
CheckDependenciesBeforeUploadingFilesChecksthedependenciesbeforeuploadingyourfilestoyourservertoensuretheyarereferencedcorrectly.WebsiteProjectdependenciesarelinksandexternalfiles,suchasstylesheets,images,etc.
47
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
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
ColorSchemeDrop‐DownListIfyouwouldliketouseacolorscheme,selectonefromthisdrop‐downlist.
SaveClickthisbuttonifyouhavemadechangestoaschemethatyouwouldliketosave.
54
SaveAs…Clickthisbuttonifyouhavecreatedacolorschemeyouwouldliketouseagain.Thisopensawindowthatallowsyoutoenteranameforyournewscheme.
AfteryouclickOK,theschemewillbeavailableunderthedrop‐downlist.
DeleteClickthisbuttontodeletetheselectedscheme.
Don’tUnderlineLinksCheckthisboxifyouwouldliketoremovetheautomaticunderlinefromyourlinks.
CharsetSelectyourpreferredcharactersetfromthisdrop‐downlist.
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
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.
FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.
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.
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
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.
FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.
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
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
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.
Undo(Ctrl+Z)Undoesthelastactionyouhaveperformed.
Redo(Ctrl+Q)Redoesthelastaction.TheRedofunctioncomesinhandywhenyouaccidentallyusetheUndofunctionorchangeyourmindaboutundoinganaction.
Cut(Ctrl+X)RemovestheselectedobjectortextfromthescreenandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.
Copy(Ctrl+C)MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindowsclipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.
Paste(Ctrl+V)TakestheobjectstoredontheWindowsclipboardandplacesitonthepage.Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesameobjectasmanytimesasyouneed.
PasteSpecial…Allowsyoutochoosetheformatofthepastedinformation.
88
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.
Undo(Ctrl+Z)Undoesthelastactionyouhaveperformed.
Redo(Ctrl+Q)Redoesthelastaction.TheRedofunctioncomesinhandywhenyouaccidentallyusetheUndofunctionorchangeyourmindaboutundoinganaction.
Cut(Ctrl+X)RemovestheselectedobjectortextfromthescreenandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.
98
Copy(Ctrl+C)MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindowsclipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.
Paste(Ctrl+V)TakestheobjectstoredontheWindowsclipboardandplacesitonthepage.Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesameobjectasmanytimesasyouneed.
InsertImageOpensawindowthatallowsyoutobrowseyourcomputerfortheimageyouwouldliketoaddtoyourtable.
BoldBoldstheselectedtextor,ifnotextisselected,appliesboldformattingtoanytexttypedafterthelocationofthecursor.
ItalicItalicizestheselectedtextor,ifnotextisselected,appliesitalicformattingtoanytexttypedafterthelocationofthecursor.
UnderlineUnderlinestheselectedtextor,ifnotextisselected,appliesunderlineformattingtoanytexttypedafterthelocationofthecursor.
FontOpenstheFontwindow,whichallowsyoutoselectthefont,style,effects,size,andcolorofyourtabletext.
99
Fill(Background)ColorOpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.
100
Youcanchoosetoapplythecolortothetext,theparagraph,ortheentiretable.Toselectmorecolors,clicktheMoreColorsbutton.ThisopenstheColorwindow,whichallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
Tochangetheparagraphpadding,clickthePaddingbutton.ThisopensthePaddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingistheamountofspacethatappearsbetweentheparagraphandtheborderofthecell.
101
InsertTableOpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.
TablePropertiesOpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.
ModifyTableCellsThisexpandstoshowsomeoptionsyoucanuseformodifyingthecellsinyourtable.
InsertColumnLeftInsertsacolumntotheleftofwherethecursorispositioned.
InsertColumnRightInsertsacolumntotherightofwherethecursorispositioned.
102
InsertRowAboveInsertsarowabovewherethecursorispositioned.
InsertRowBelowInsertsarowbelowwherethecursorispositioned.
DeleteRow(s)Deletestherowwherethecursorispositionedortheselectedrow(s).
DeleteColumn(s)Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).
MergeCellsMergesthecontentsofthecellsintoonecell.
SplitCells…OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.
Youcanchoosetosplitthecellintoanumberofrowsandcolumnsthatyouspecify,orifyouareworkingwithacellthatyoupreviouslymerged,youcansplitthecellsbackintotheiroriginalconfiguration.Ifyouwanttomergethecontentsofthecellbeforeyousplitthem,whichconsolidatesallyourcontentintoonecellandthensplitsitintomultiplecells,checktheMergebeforesplittingcheckbox.
103
TableDesignerRight‐ClickMenuTheright‐clickmenuallowsyoutoaccesscommonlyusedfeaturesintheTableDesigner.
Undo(Ctrl+Z)Undoesthelastactionyouhaveperformed.
Redo(Ctrl+Q)Redoesthelastaction.TheRedofunctioncomesinhandywhenyouaccidentallyusetheUndofunctionorchangeyourmindaboutundoinganaction.
Cut(Ctrl+X)RemovestheselectedobjectortextfromthescreenandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.
Copy(Ctrl+C)MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindowsclipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.
Paste(Ctrl+V)TakestheobjectstoredontheWindowsclipboardandplacesitonthepage.Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesameobjectasmanytimesasyouneed.
PasteSpecial…Allowsyoutochoosetheformatofthepastedinformation.
104
Font…OpenstheFontwindow,whichallowsyoutoselectthefont,style,effects,size,andcolorofyourtabletext.
105
Fill(Background)Color…OpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandsetparagraphpadding.
Youcanchoosetoapplythecolortothetext,theparagraph,ortheentiretable.Toselectmorecolors,clicktheMoreColorsbutton.ThisopenstheColorwindow,whichallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
106
Tochangetheparagraphpadding,clickthePaddingbutton.ThisopensthePaddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingistheamountofspacethatappearsbetweentheparagraphandtheborderofthecell.
BoldBoldstheselectedtextor,ifnotextisselected,appliesboldformattingtoanytexttypedafterthelocationofthecursor.
ItalicItalicizestheselectedtextor,ifnotextisselected,appliesitalicformattingtoanytexttypedafterthelocationofthecursor.
UnderlineUnderlinestheselectedtextor,ifnotextisselected,appliesunderlineformattingtoanytexttypedafterthelocationofthecursor.
TableExpandstodisplayoptionsforcreatingoreditingatable.
107
InsertTable…OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutosetupatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexistingtablesintheTableDesigntab.
TableProperties…OpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.
108
InsertColumnLeftInsertsacolumntotheleftofwherethecursorispositioned.
InsertColumnRightInsertsacolumntotherightofwherethecursorispositioned.
InsertRowAboveInsertsarowabovewherethecursorispositioned.
InsertRowBelowInsertsarowbelowwherethecursorispositioned.
DeleteRow(s)Deletestherowwherethecursorispositionedortheselectedrow(s).
DeleteColumn(s)Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).
SelectAllowsyoutoselecttheentiretable,arow,acolumn,oracell.
109
AlignCellContentsAllowsyoutochoosethealignmentofthecontentintheselectedcell:top,middle,bottom,ordefaultcellverticalalignment.
SplitCells…OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.
110
Youcanchoosetosplitthecellintoanumberofrowsandcolumnsthatyouspecify,orifyouareworkingwithacellthatyoupreviouslymerged,youcansplitthecellsbackintotheiroriginalconfiguration.Ifyouwanttomergethecontentsofthecellbeforeyousplitthem,whichconsolidatesallyourcontentintoonecellandthensplitsitintomultiplecells,checktheMergebeforesplittingcheckbox.
MergeCellsMergesthecontentsofthecellsintoonecell.
111
InsertFormWindowTheInsertFormwindowallowsyoutosettheformmethod,MIMEpostmethod,andURLwheretheformresultswillbedirected.Thisinformationisimportantifyouwantyourformtoworkproperly!
ForcomprehensiveinformationaboutcreatingandmodifyingHTMLforms,readtheW3SchoolstutorialHTMLFormsandInput(http://www.w3schools.com/html/html_forms.asp).
FormMethodChoosehowyouwanttotransfertheformdata.Postsendsittotheserverandgetpullsitfromtheserver.
MIMEPostMethod(Enctype)Selectthetypeofapplicationthatwillprocesstheformdata.
FormContentsGototheFollowingURLTheURLofthescriptthatactuallyprocessestheform.Formoreinformationaboutformscriptsandtodownloadfreeformprocessingscripts,visithttp://www.hotscripts.com.
112
StyleSheetWizardTheStyleSheetWizardallowsyoutosetthevariouspropertiesofyourstylesheet.
Forcomprehensiveinformationaboutcreatingandmodifyingstylesheets,readtheW3SchoolstutorialCSSIntroduction(http://www.w3schools.com/css/css_intro.asp).
• Font tab • Color and Background tab • Alignment tab • Margins tab • Padding tab • Border tab
113
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
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
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
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
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
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
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
Times New Roman Comic Sans MS Georgia
Impact Trebuchet MS Verdana
139
EffectsSelectfrombold,italic,strikethrough,orunderline.
TextPositionSelectwhetheryourtextwillappearnormallyorasasubscriptorsuperscript.
SizeSelectafontsizefrom1(8pt)to7(36pt).
ColorToselectacolorforyourtext,clicktheassociatedcolorswatch.Thisopensadrop‐downlistof40basiccolors.
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
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.
CharsetSelectyourpreferredcharactersetfromthisdrop‐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
Tonavigatethetips,usethePreviousandNextbuttons.Ifyoudonotwanttoseethesetipsonstartup,uncheckthecheckboxnexttoShowtipofthedayonstartup.
Tore‐enabletheTipoftheDaywindow,gotoHelp>TipoftheDayorusetheoptionsunderTools>Preferences>Generaltab.
AboutThisSoftware…OpensawindowthatprovidesbasicinformationabouttheprogramandCoffeeCupSoftware.
181
ToolbarTheToolbarislocatedacrossthetopoftheprogramandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedprogramfeatures.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
NewExpandstodisplayalistofoptionsforcreatingnewWebpages.
FordetailedtutorialscoveringthefourdifferentwaystocreateanewWebpage,readCreatingaNewWebpage.
NewFromQuickStart…OpenstheQuickStartwindow,whichallowsyoutodefinesettingsforyournewpage,includingthepagetitle,colorscheme,metainformation,andcharacterset.
NewBlankPage(Ctrl+N)Createsanewpageforyoutoeditfromscratch.Bydefault,newpagesincludesomebasicHTMLtohelpgetyoustarted.ThisincludestheDOCTYPE,html,head,title,meta,andbodytags,aswellasanHTMLcommentstatingthatthepagewascreatedwithCoffeeCupHTMLEditor.
NewFromLayout…OpensawindowthatallowsyoutochoosefromseveralWebpagelayouts.
182
AlayoutincludestheHTMLforabasicpagestructure.Youprovidethecontent.Ifyouprefertoworkwithapagedesign,selectNewFromTheme.Formoreinformationaboutthedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetweenalayoutandatheme?
NewFromTheme…OpensawindowthatallowsyoutochoosefromseveralWebpagethemes.
183
Athemeincludesthreepages(index.html,about‐us.html,andcontact‐us.html)thatincludetheHTMLandimagesforabasicdesign.Youcanreplacetheimagesandtextwithyourowncontent.Ifyouprefertowork
withapagestructure,selectNewFromLayout.Formoreinformationaboutthedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetweenalayoutandatheme?
SaveExpandstodisplayalistofoptionsforsavingyourwork.
Save(Ctrl+S)Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequently
topreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
SaveAs…(Ctrl+Shift+S)Savesthecurrentfileunderadifferentname.Thiswillnotoverwritethefileyouarecurrentlyworkingon;instead,itwillcreateanewfilethatyoucangiveadifferentname.
SaveAllSavesalltheopenfiles.
SaveSelectedTextasSnippet…OpenstheSaveSnippetwindow,whichallowsyoutonameandsavethehighlightedtextasasnippet.
184
AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCodeSnippetstab.Foradetailedtutorialaboutworkingwithsnippets,readHowtoUseSnippets.
OpenExpandstodisplayalistofoptionsforopeningpreviouslycreatedwork.
Open…(Ctrl+O)Allowsyoutoopenandworkwithapreviouslycreatedfile.
OpenFromWeb…OpenstheOpenFromWebwindow,whichallowsyoutoimportanHTMLpageontheInternetintotheHTMLEditor.ThisoptionworksbestwithHTMLpagesthatdonotcontainPHPorSSI.Thesescriptsarestoredontheserver,andsometimesaddcodetoaWebpagethatcannotbeimportedintotheHTMLEditor.
RecentFilesDisplaysalistoffilesyouhaveworkedwithrecently,whichallowsyoutoaccessthemmorequickly.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthen
selectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
185
AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
Undo(Ctrl+Z)Undoesthelastactionyouhaveperformed.
Redo(Ctrl+Q)Redoesthelastaction.TheRedofunctioncomesinhandywhenyouaccidentallyusetheUndofunctionorchangeyourmindaboutundoinganaction.
Cut(Ctrl+X)RemovestheselectedobjectortextfromthescreenandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.
Copy(Ctrl+C)MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindowsclipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.
Paste(Ctrl+V)TakestheobjectstoredontheWindowsclipboardandplacesitonthepage.Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesameobjectasmanytimesasyouneed.
FindandReplaceExpandstodisplaythefindandreplaceoptions.
Find…(Ctrl+F)OpenstheExtendedFindwindow,whichallowsyoutosearchthecurrentdocument,
allopendocuments,orallthedocumentsinagivenfolderforasearchterm.
Replace…(Ctrl+H)OpenstheExtendedFindandReplacewindow,whichallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm,andthenreplaceitwithtextofyourchoosing.
186
ExtendedFindResultsDisplaystheSearchResultstabatthebottomoftheprogram.
SpellingandThesaurusExpandstodisplaythespellingandthesaurusoptions.
CheckSpelling…Checksthespellinginyourdocument.Iftherearenospellingerrors,youwillseeawindowthat
says,“Thespellingcheckiscomplete.”
Iftherearemisspelledwords,theSpellingwindowopens,allowingyoutoreviewandchangethespellingerrors,andtoadjustspellingoptions.
AutoSpellCheckPutsaredunderlineunderanymisspelledwords.
Thesaurus…OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselectedword.
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:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
Image(Ctrl+M)OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
LinksExpandstodisplaylinkoptions.
Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallows
youtoinsertalinkandanyassociatedattributes.
E‐mailLink…(Ctrl+E)OpenstheInsertE‐mailLinkwindow,whichallowsyoutoinsertane‐maillinkandanyassociatedattributes.
192
FontsExpandstodisplayfontoptions.
FontWizard…OpenstheFontWizard,whichallowsyoutochoosetheattributesforafonttag.
FontSizesSelectfromfontsizes1(8pt)to7(36pt)oradjustthesizeupordownoneincrement.
FontColor…OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.
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
Dragyourmouseoverthesquarestopickhowmanycolumnsandrowsareinyourtable.Clickwhenyouhavespecifiedthedesireddimensions,andthecodewillbeinsertedonyourpage.
FormItemsExpandstodisplayformoptions.
ForcomprehensiveinformationaboutcreatingandmodifyingHTMLforms,readtheW3SchoolstutorialHTMLFormsandInput(http://www.w3schools.com/html/html_forms.asp).
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
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.
Forcomprehensiveinformationaboutcreatingandmodifyingstylesheets,readtheW3SchoolstutorialCSSIntroduction(http://www.w3schools.com/css/css_intro.asp).
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.
TestWithDefaultBrowser(Ctrl+F9)OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.ThisisdoneoutsideoftheHTMLEditor.
TestwithFavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.
AdditionalBrowsersExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.
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.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
205
AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
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:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
InsertandMoveTextInsertsthewords“YourTextHere”intotheVisualEditor.Youcanreplacethismessagewithyourowntext.
EditElementSourceOpenstheEditElementSourcewindow,whichallowsyoutoworkwiththeHTMLfortheselectedobject.
210
MoveandUnlockObjectUnlockstheobjectfromitscurrentposition,whichallowsyoutodraganddropittothedesiredlocationonthepage.
Image(Ctrl+M)OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
LinksExpandstodisplaylinkoptions.
Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallows
youtoinsertalinkandanyassociatedattributes.
E‐mailLink…(Ctrl+E)OpenstheInsertE‐mailLinkwindow,whichallowsyoutoinsertane‐maillinkandanyassociatedattributes.
FontsExpandstodisplayfontoptions.
FontWizard…OpenstheFontWizard,whichallowsyoutochoosetheattributesforafonttag.
FontSizesSelectfromfontsizes1(8pt)to7(36pt)oradjustthesizeupordownoneincrement.
FontColor…OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.
211
FontEffectsAllowsyoutoapplyoneoftheprovidedeffectstoyourfont.
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
Dragyourmouseoverthesquarestopickhowmanycolumnsandrowsareinyourtable.Clickwhenyouhavespecifiedthedesireddimensions,andthecodewillbeinsertedonyourpage.
ToggleInvisibleGridLinesDisplaystablebordersiftheyaresetto0.ThisispurelyfordesignpurposesandwillnotberenderedinaWebbrowser.
InsertColumnInsertsacolumnintothetable.
InsertRowInsertsarowintothetable.
DeleteColumnDeletesthecolumnwherethecursorispositionedortheselectedcolumn(s).
DeleteRowDeletestherowwherethecursorispositionedortheselectedrow(s).
MergeCellsThisoptionisonlyavailableintheTableDesigner.
SplitCellSplitsthecellinhalf.
PreviewExpandstodisplaypreviewoptions.
215
TestWithDefaultBrowser(Ctrl+F9)OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.ThisisdoneoutsideoftheHTMLEditor.
TestwithFavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtabinthePreferenceswindow.
AdditionalBrowsersExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.
Toconfigureadditionalbrowsers,gotoTools>Preferences>BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
216
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
ColorThisbuttonisonlyenabledintheCodeEditor.
217
CodeandVisualEditorRight‐ClickMenuTheright‐clickmenuallowsyoutoaccesscommonlyusedfeaturesintheCodeandVisualeditors.
Cut(Ctrl+X)RemovestheselectedobjectortextfromthescreenandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.
Copy(Ctrl+C)MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindowsclipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.
Paste(Ctrl+V)TakestheobjectstoredontheWindowsclipboardandplacesitonthepage.Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesameobjectasmanytimesasyouneed.
SelectAll(Ctrl+A)Selectseverythingintheworkspace.Thisishelpfulifyouwanttocopy,cut,ordeletemanyobjectsatatimeinsteadofhavingtoselectthemallindividually.
218
MoveText(VisualEditorOnly)Movesanyselectedtextintoitsowntextbox,whichallowsyoutodraganddropittoanotherlocation.
MoveandUnlockObject(VisualEditorOnly)Unlockstheobjectfromitscurrentposition,whichallowsyoutodraganddropittothedesiredlocationonthepage.
EditElementSource…(VisualEditorOnly)OpenstheEditElementSourcewindow,whichallowsyoutoworkwiththeHTMLfortheselectedobject.
Find…(Ctrl+F)OpenstheExtendedFindwindow,whichallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm.
Replace…(Ctrl+H)OpenstheExtendedFindandReplacewindow,whichallowsyoutosearchthecurrentdocument,allopendocuments,orallthedocumentsinagivenfolderforasearchterm,andthenreplaceitwithtextofyourchoosing.
Undo(Ctrl+Z)Undoesthelastactionyouhaveperformed.
219
Redo(Ctrl+Q)Redoesthelastaction.TheRedofunctioncomesinhandywhenyouaccidentallyusetheUndofunctionorchangeyourmindaboutundoinganaction.
Save(Ctrl+S)Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequentlytopreventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
SaveAs…(Shift+Ctrl+S)Savesthecurrentfileunderadifferentname.Thiswillnotoverwritethefileyouarecurrentlyworkingon;instead,itwillcreateanewfilethatyoucangiveadifferentname.
SaveSelectedTextasSnippet…OpenstheSaveSnippetwindow,whichallowsyoutonameandsavethehighlightedtextasasnippet.
AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCodeSnippetstab.Foradetailedtutorialaboutworkingwithsnippets,readHowtoUseSnippets.
TestinBrowserExpandstodisplaybrowser‐testingoptions.
220
TestWithDefaultBrowser(Ctrl+F9)OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.ThisisdoneoutsideoftheHTMLEditor.
TestwithFavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.
AdditionalBrowsersExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.
Toconfigureadditionalbrowsers,gotoTools>Preferences>BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
221
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
FontExpandstodisplayfontoptions.
FontWizard…OpenstheFontWizard,whichallowsyoutochoosetheattributesforafonttag.
FontSizesSelectfromfontsizes1(8pt)to7(36pt)oradjustthesizeupordownoneincrement.
222
FontColor…OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.
FontEffectsAllowsyoutoapplyoneoftheprovidedeffectstoyourfont.
HeaderSizesSelectaheadertag(h1‐h6),anditwillbeinsertedintoyourdocumentorappliedtoanyselectedtext.
223
LinksExpandstodisplaylinkoptions.
Link…(Ctrl+L)OpenstheInsertLinkwindow,whichallowsyoutoinsertalinkandanyassociatedattributes.
E‐mailLink…(Ctrl+E)OpenstheInsertE‐mailLinkwindow,whichallowsyoutoinsertane‐maillinkandanyassociatedattributes.
Image…OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandanyassociatedattributes,aswellascreateathumbnailversionoftheimage.
YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
Color…ThisbuttonopenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfromtherainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursorispositionedonthepage.
224
SpellingandThesaurusExpandstodisplayspellingandthesaurusoptions.
CheckSpelling…Checksthespellinginyourdocument.Iftherearenospellingerrors,youwillseeawindowthatsays,“Thespellingcheckiscomplete.”
225
Iftherearemisspelledwords,theSpellingwindowopens,allowingyoutoreviewandchangethespellingerrors,andtoadjustspellingoptions.
SpellCheckerOptions…OpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspellingoptionsandaddcustomdictionaries.
AutoSpellCheckPutsaredunderlineunderanymisspelledwords.
Thesaurus…OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselectedword.
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.
Toconfigureadditionalbrowsers,gotoTools>Preferences>BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.
SincethePreviewtabispoweredbyInternetExplorer,itsright‐clickmenuisthesameastheright‐clickmenuforthebrowser.Formoreinformationabouthowtousetheoptionsintheright‐clickmenu,consultInternetExplorer’sdocumentation
(http://windowshelp.microsoft.com/Windows/en‐US/internet‐explorer.mspx).
• Preview toolbar
229
PreviewToolbarThePreviewtoolbarislocatedacrossthetopofthePreviewtabandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
BackTakesyoutothepreviouslyviewedpage.
ForwardTakesyoutothepageyounavigatedbackfrom.
StopStopsthepagefromloading.
RefreshReloadsthecontentofthepage.
230
TestinBrowserExpandstodisplaybrowser‐testingoptions.
TestWithDefaultBrowser(Ctrl+F9)OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.ThisisdoneoutsideoftheHTMLEditor.
TestwithFavoriteBrowser(Ctrl+F5)OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.
AdditionalBrowsersExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.
Toconfigureadditionalbrowsers,gotoTools>Preferences>BrowserTestingtab.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferentbrowserstoensurecross‐browsercompatibility.ThemostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.
231
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.
FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.
• 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.
YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
OpeninAssociatedApplicationOpenstheselectedfileintheassociatedapplication.Forinstance,ifyouselectedaPDF,itwouldopeninAdobeAcrobat.
EditOpenstheselectedfileinanewtab.
RenameAllowsyoutorenametheselectedfile.
Delete…Deletestheselectedfile.
238
CreateFolderCreatesanewfolder.
MoveFile/FoldertoWebsiteProjectAllowsyoutomovetheselectedfiletoadifferentlocationwithintheWebsiteProject.
UploadSelectedFilesUploadstheselectedfiletotheserverspecifiedintheWebsiteProjectSettingswindow.
YoucanonlyassignoneserverperWebsiteProject.IfyouwanttouploadanyorallofyourWebsiteProjectfilestoadifferentserverthantheonespecifiedinthisfield,youhavetwooptions:
1. Go to My Websites > Website Project Settings, switch the server, and then
upload the file(s). 2. Go to the My Computer tab, right-click the file(s) you want to publish, and
select the server and folder where you want to upload them. If any of your published documents reference these files, the path to the files you are uploading must match the path specified in your HTML code.
FileProperties…OpenstheWindowspropertieswindowfortheselectedfile,whichprovidesbasicinformationaboutthefile.
239
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.
RenameAllowsyoutorenametheselectedfile.
Delete…Deletestheselectedfile.
CreateFolderCreatesanewfolder.
FileProperties…Opensawindowthatprovidesbasicinformationaboutthefile,includingitsname,size,anddateitwasfirstcreated.
242
MyWebsitesToolbarTheMyWebsitestoolbarislocatedacrossthetopoftheMyWebsitestabandcontainsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
WebsiteProjectsExpandstodisplayWebsiteProjectoptions.
NewWebsiteProject…OpenstheWebsiteProjectSettingswindow,whichletsyoucreateablankWebsiteProjectortocreateaWebsiteProjectfromexistingfiles.Youcanalsoenteradditionalinformation,suchasyourserversettings,andselectyourfileuploadoptions.
OpenWebsiteProject…AllowsyoutoopenandworkwithapreviouslycreatedWebsiteProject.
CloseWebsiteProjectClosesthecurrentWebsiteProjectyouhaveopen,butleavestheprogramopen.
AllWebsiteProjectsOpensalistofalltheWebsiteProjectsyouhavecreated,whichallowsyoutoaccesstheseWebsiteProjectsmorequickly.
243
RemoveWebsiteProjectRemovestheselectedWebsiteProjectfromtheHTMLEditor.Thefilewillnotbedeletedfromyourcomputer.
WebsiteProjectSettings…OpenstheWebsiteProjectSettingswindow,whichallowsyoutoeditthesettingsforthecurrentWebsiteProject.
ToolsExpandstodisplayuploadanddependenciesoptions.
YoucanonlyassignoneserverperWebsiteProject.IfyouwanttouploadanyorallofyourWebsiteProjectfilestoadifferentserverthantheonespecifiedinthisfield,youhavetwooptions:
1. Go to My Websites > Website Project Settings, switch the server, and then
upload the file(s). 2. Go to the My Computer tab, right-click the file(s) you want to publish, and
select the server and folder where you want to upload them. If any of your published documents reference these files, the path to the files you are uploading must match the path specified in your HTML code.
UploadEntireWebsiteProjectUploadstheentireWebsiteProjecttoyourserver.Youwillneedtosetupaserverprofileinordertoperformthisaction.
UploadSelectedFilesUploadsthecurrentlyselectedWebsiteProjectfilestoyourserver.Thefilestructureispreservedduringtheupload.Forexample,ifyouuploadanimagecalledimage.pngthatislocatedinafoldercalledimages,image.pngwillbeuploadedintotheimagesfolderontheserver.Ifthereisnoimagesfolderontheserver,itwillbecreatedduringtheuploadprocess.YouwillneedtosetupaserverprofileintheWebsiteProjectSettingswindowinordertouploadyourfiles.
CheckWebsiteProjectDependenciesDisplaystheDocumentDependenciestabatthebottomoftheprogram.
244
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:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
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.
YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMyComputertabintotheCodeorVisualeditor.
InsertSoundIntoCurrentDocumentInsertstheselectedsoundintothecurrentdocumentwitha<bgsound>tag.Theprogramusesarelativelink,soifthefileisnotlocatedinyourWebsiteProjectorWorkingfolder,itmaynotdisplaycorrectlyonyourWebsite.
CopyFiletoProjectExpandstodisplayalistoffoldersinthecurrentlyopenWebsiteProject.
248
Selectthefolderwhereyouwouldlikethefiletobestored,andacopyofthefilewillbecreatedinthatfolder.
OpeninEditorOpenstheselectedfileinanewtabintheEditor.
ConvertImageFormat…Allowsyoutoconverttheformatoftheimage.Werecommendusing.gif,.jpg,or.pngimagefiles.
OpeninAssociatedApplicationOpenstheselectedfileintheassociatedapplication.Forinstance,ifyouselectedaPDF,itwouldopeninAdobeAcrobat.
UploadFiletoServerExpandstodisplayalistofoptionsforuploadingyourwork.
PreviouslyConfiguredServersSelectapreviouslyconfiguredserverandthenselectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUploadFiletoServerwindow,whichdisplaysthestatusoftheuploadandclosesautomaticallywhentheuploadiscomplete.
249
AddorEditServers…OpenstheServerConfiguration–Add/Editwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
CopyMakesacopyoftheselectedfileandstoresthatcopyontheWindowsclipboard.Thefileisnowavailabletobepasteduntilanotherobjectiscutorcopiedtotheclipboard.
CutRemovestheselectedfileandstoresitontheWindowsclipboard.Itisthenavailabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.
DeleteRemovestheselectedfile(s).
PasteTakesthefilestoredontheWindowsclipboardandplacesitinthefolder.Pastingafiledoesnotremoveitfromtheclipboard,soyoucanpastethesamefileasmanytimesasyouneed.Inorderforthisfunctiontowork,youmustclickinanareaoutsideofanyotherfiles.
MoveOpensawindowthatallowsyoutomovethefiletoadifferentlocationyourcomputer.
250
RenameAllowsyoutorenametheselectedfile.
CreateFolderCreatesanewfolder.
ViewsDisplaysalistofoptionsforhowthefilesundertheMyComputertabintheResourcebrowsercanbedisplayed:asicons,alist,details,smallicons,orthumbnails.Thefollowingkeyboardshortcutscanbeusedtoaccesstheseoptions:
• Icons – Shift+Ctrl+F4 • List – Shift+Ctrl+F5 • Details – Shift+Ctrl+F7 • Small Icons – Shift+Ctrl+F8 • Thumbnails – Shift+Ctrl+F9
251
CodeSnippetsTabTheCodeSnippetstabcontainsthepredefinedcodesnippetsthatcomewiththeprogram,aswellasanysnippetsyoumayhaveadded.
Toaddasnippettoyourpage,double‐clickitordraganddropitintotheCodeEditor.
• Code Snippets toolbar • Code Snippets and Tags right-click menu
252
CodeSnippetsToolbarTheCodeSnippetstoolbarcontainsbuttonsthatyoucanclicktoperformcertaincommonlyusedactionsquickly.Right‐clickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
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:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted)removesitfromtheworkspace.Itcanbere‐addedbycheckingitagain.SelectingCustomize…openstheCustomizewindow,whichallowsyoutocustomizethemaintoolbarorcreateyourown.
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
YoucanonlyassignoneserverperWebsiteProject.IfyouwanttouploadanyorallofyourWebsiteProjectfilestoadifferentserverthantheonespecifiedinthisfield,youhavetwooptions:
1. Go to My Websites > Website Project Settings, switch the server, and then
upload the file(s). 2. Go to the My Computer tab, right-click the file(s) you want to publish, and
select the server and folder where you want to upload them. If any of your published documents reference these files, the path to the files you are uploading must match the path specified in your HTML code.
ConfigureServersThisopenstheServerConfigurationwindow,whichallowsyoutoconfigureaneworexistingserverprofile.
RemoteRootFolderThisistherootfolderwhereyourWebsitefilesarestoredonyourserver.Commonnamesincludewww,public_html,orweb.Ifyouarenotsureofthisinformation,contactyourhostingprovider.
ServerURLThisistheTCP/IPhostnameofyourFTPserver.ItshouldbeintheformofanIPaddress,yourdomainname(e.g.yourdomain.com),oryourdomainnameprecededbyftp.(e.g.ftp.yourdomain.com).Donotincludeftp://oranydirectorynamesuchasftp.yourdomain.com/mysite,becausetheseareinvalidTCP/IPhostnames.ItisuptoyourWebhostingcompanytoassignyourFTPserverhostname,soyouwillneedtofindoutfromthemwhatitis.
ExamplesofvalidWebserveraddressesftp.mysite.com24.24.100.100mysite.comExamplesofinvalidWebserveraddressesftp://ftp.mysite.comftp.mysite.com/mysitehttp://www.mysite.com
CheckDependenciesBeforeUploadingFilesThischecksyourdocumentdependenciesbeforeuploadingyourfilestoyourservertomakesuretheyarereferencedcorrectly.WebsiteProjectdependenciesarelinksandexternalfiles,suchasstylesheets,images,etc.—basicallyanythingthatyourHTMLfilelinksto.Ifoneormoreofyourdocumentdependenciesaren’treferencedcorrectly,youwillreceiveinformationabouttheincorrectlyreferenceddependency.
261
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.
Carefulwhereyoulink!Ifthefileyoulinktoisn’tlocatedinyourWorkingfolderoryourWebsiteProject,itmaynotbereferencedcorrectly—meaningthelinkwon’twork.Needmoreinformationabout
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
Times New Roman Comic Sans MS Georgia
Impact Trebuchet MS Verdana
So,ifWeb‐safefontsareso,well,safe,thenwhydoesn'teveryoneusethem?Frankly,becausethey'rekindofboring.Fortunately,theHTMLEditorgivesyouthreechoices.ForFont1,useyourfirst‐choicefont.Goasfunkyandcrazyasyouwant,andifthefonthappenstobeinstalledonyouruser'scomputer,awesome!Ifnot,thebrowsercanjustlookforthesecondfontyouspecified.MakeFont2andFont3Websafe,andyou’llbegolden.Forextrasecurity,youcanalsoselectagenericfont,whichalwaysdisplayscorrectly,fromtheGenericdrop‐downlist.Genericfontsaretotallyno‐frills,butyoucanrestassuredthatthey’llalwayswork,eveninthevery,veryrareinstancewhenaWeb‐safefontmightnot.Byspecifyingmultiplefonts,youcantellthebrowsertofirsttryafancy,non‐Web‐safefont.Thatway,youcanmakesurethatyourWebsitewilllookgoodwhetheryou'reusingacool,customfontorasecure,Web‐safefont.
EffectsSelectfrombold,italic,strikethrough,orunderline.
TextPositionSelectwhetheryourtextwillappearnormallyorasasubscriptorsuperscript.
Size
Selectafontsizefrom1(8pt)to7(36pt).
ColorToselectacolorforyourtext,clickthecolorswatch.Thisopensadrop‐downlistof40basiccolors.
293
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.
FormoreinformationaboutusingWebsiteProjects,readWorkingWithWebsiteProjects.
TargetThisistheframeyouwantthelinktoopenin,andisonlynecessaryifyouareusingframesorifyouwanttoopenthelinkinanewwindow.Toopenthelinkinanewwindow,selectNewBrowserWindow(target="_blank").
Foradetailedtutorialaboutusingframes,readHowtoUsetheFrameDesigner.
TitleThisisadescriptionofthelinkthatappearsasatooltipwhenyouruserholdstheirmouseoverthelink.It’stotallyoptional,butitisanicesourceofinformationforyourusers.
ShowStatusbarMessageonMouseoverIfyoucheckthisbox,adescriptionofthelinkwilldisplayintheStatusbaratthebottomoftheWebbrowserscreenwhenyouruserholdstheirmouseoverthelink.ThisoptionisonlyenabledinInternetExplorer,soit’sbesttouseatitleinsteadifyouwanttoprovidethisadditionalinformation.
WebBrowserWindowMessageIfyoudodecidetouseaStatusbarmessage,typeitinthisfield.Whenyou’redonefillingoutallthisinformation,clickOK.Thecodewillautomaticallybeinsertedwhereveryourcursorwaspositionedonyourpage.Youcanmoveitaroundbyselectingitanddraggingittothedesiredlocationonthepage.
299
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.
Carefulwhereyoulink!Ifthefileyoulinktoisn’tlocatedinyourWorkingfolderoryourWebsiteProject,itmaynotbereferencedcorrectly—meaningthelinkwon’twork.Needmoreinformationabout
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
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
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
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