CoffeeCup HTML Editor Manual

HTMLEditorHelp
GotquestionsaboutthefeaturesinHTMLEditor?Wanttocheckoutsomehelpful tutorialstogetyouuptospeedonusingtheprogram?Youvecometotheright place! August2009
ProgramOverview Tutorials
Learnaboutthetoolsandfeaturesavailablewithintheprogram. Stepbystepinstructionsforthemostcommonlyusedfeaturesoftheprogram.
FrequentlyAskedQuestions CoffeeCupInformation
Gotaquestionaboutthesoftware?Findyouranswerhere. LearnmoreaboutCoffeeCupandreviewallthelegalgobbledygook.
StillCantFindYourAnswer?
Visitouruserforums(http://www.coffeecup.com/forums/),checkout thearticlesandvideotutorialsinouronlineKnowledgebase (http://www.coffeecup.com/htmleditor/help/)orcontactourfabulous techsupportteam(http://www.coffeecup.com/help/)!
ProgramOverview
Learnaboutthetoolsandfeaturesavailablewithintheprogram. What is the HTML Editor? How to use this manual Whats 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
Tutorials
Stepbystepinstructionsforthemostcommonlyusedfeaturesoftheprogram.
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
FrequentlyAskedQuestions
Gotaquestionaboutthesoftware?Findyouranswerhere. Frequently asked questions o Features, tools, and functionality o Customization o Error messages and troubleshooting o Miscellaneous Keyboard shortcuts Glossary
CoffeeCupInformation
LearnmoreaboutCoffeeCupSoftwareandreviewallthelegalgobbledygook. About CoffeeCup Software Contact us Thank you End User License Agreement Notice of copyright Software privacy policy
WhatistheHTMLEditor?
TheHTMLEditorisafullfeaturedWebdesigntoolforbeginnersandexperts alike.AhostofusefulfeatureshelpyoucreateandmodifyWebpagesquicklyand efficiently,revealtheinsandoutsofHTML,andgiveyoucompletecontrolover thedesignandstructureofyourWebsite. SinceaWebsiteisfarmorethanjustthefilesthatmakeitup,theHTMLEditor alsocontainsWebsiteProjects,acomprehensivesystemthatkeepsyourwork organized.Itmaysoundhardtobelieve,butyoullneverhavetoworryaboutan incorrectlyreferencedlinksorimagesagain!Andwithimprovedvalidation,you canrestassuredthatyourWebsitewillalwaysperformreliably. SweetaddonslikeabuiltinCSSmenudesigner,colorschemegenerator,and imagemappingtoolnottomentiontheabilitytoopenexternalapplications fromwithintheprogramputalltheessentialWebdesigntoolsinoneplace. AndsincenoWebsiteiscompleteuntilitspublishedtotheWeb,weincludeda builtinFTPclientandserveraccess,allowingyoutouploadworkeasilyandedit documentsdirectlyonyourserver.
WelcometotheCoffeeCupHTMLEditorPDFHelpmanual!Thisistheplacetogo tolearntheinsandoutsofthisprogram. Youcannavigatethroughthismanualusingthetableofcontentsontheleftorby justreadingitstraightthrough.Ifyourewonderingaboutacertainterm,youcan searchforitintheboxuptop.Theresalsoaglossarythatcoverscommonlyused (andcommonlymisunderstood)terms. Youmayhavenoticedthatglossaryisboldandredinthepreviousparagraph. Thatsbecauseitsalinkthat,whenclicked,takesyoutotheGlossary.Thismanual containstonsoflinksformattedinboldredtextand bulleted lists like this one. YoullalsoseelinkstoWebpagescontainingadditionalinformationformattedlike this:http://www.coffeecup.com.Justclickthem,andyourdefaultWebbrowser willopenthepage. Weveincludedsomehandyiconstohelphighlightimportantinformation.
HowtoUseThisManual
ForMoreInformation OnlineResource
Linksyoutoatutorialorfrequentlyaskedquestionthatexplainsthetool orfunctioninmoredetail. LinksyoutoaWebsitecontaininginformationthatmaybebeyondthe scopeofthismanual.
UseThisToolWith
Linkstoanothertoolorfunctionthatcanbeusedwiththetoolor functionbeingdescribed.
WatchOut!
Lookforthisicontoseecommonusererrorsthatmayoccurwhenusing thetoolorfunction.
Youllalsonoticethatthemanualisdividedintodifferentsections.TheProgram Overviewportionexplainswhatallthedifferentmenus,buttons,andcommands do.Ifyouhaveaquestionaboutwhatabuttonormenuoptiondoes,youllfind youranswerhere. Ifyouwanttolearnhowtoperformataskintheprogram,checkouttheTutorials section.Itwalksyouthroughcommontasksusingsimple,stepbystep instructions. Haveaquestion?VisittheFAQ.Wevekepttrackofthequestionswehearmost oftenfromourusersandgatheredthemtogetherinthissection. Wehopethishelps!Ifyouhaveanyquestions,comments,orsuggestionsabout howthismanualcanbeimproved,wedlovetohearthem.Shootusanemailat wordnerd@coffeecup.com. Anytechnicalsupportrequestsshouldstillgoto http://www.coffeecup.com/help/myroom/.
WhatsNew
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
SystemRequirements
Torunthesoftwareefficiently,yourcomputersystemshouldmeetthefollowing requirements: Operating System XP, Vista 32-bit Disk Space 30 MB RAM 120 MB
Ifyouareinstallingtheregisteredversionofthesoftware,itishighly recommendedthatyouuninstallthetrialversionbeforeinstallingtheregistered version,andthenrestartyourcomputer.Ifyouhavecreatedanyprojectswiththe trialversion,itisrecommendedthatyoubackthemuptopreventloss. Ifyouhaven'talreadydownloadedyoursoftware,youcanlogintoyourCoffeeCup useraccount(http://www.coffeecup.com/login/)usingtheemailaddressand passwordyouusedwhenpurchasingthesoftware.Onceyouhavedownloadedthe software,doubleclickthe.exefiletostartthesetupprocess.Asyouproceed throughthesetup,youcanlettheprograminstallwiththedefaultsettings,oryou canchoosewhereyouwouldlikeitinstalled.Werecommendyoustickwiththe defaultsettings.
InstallingtheSoftware
InstallingCoffeeCupSoftwareonMacOSX
Whenupgradingyoursoftware,youwillneedtologintoyourCoffeeCupuser account(http://www.coffeecup.com/login/)justasyoudidtodownloadthe registeredversionofthesoftware.Whenyoudownloadtheupgrade,itwillbea newfullversionandnotjustanupgradetotheexistingsoftwareonyoursystem. Toinstallanupgrade,werecommendthatyouuninstallthepreviousversionof thesoftwareandrestartyourcomputer.Thisisbecauseinstallingoverapreviously installedversioncancausesomefunctionstonotworkcorrectly.Therefore,itis besttoinstallafreshcopy.
UpgradingtheSoftware
CoffeeCupSoftwareisdesignedforinstallationunderWindowsonly. However,youcaninstallandusethesoftwareonMacOSXwiththe correctutilities.CrossOver(http://www.codeweavers.com/),developed byCodeWeavers,andVMware(http://www.vmware.com),developedby VMware,Inc.,bothallowyoutoemulateoursoftwareonMacOSX.
UninstallingtheSoftware
Touninstalltheprogram,youwillneedtousetheAdd/RemovePrograms featureunderyourcontrolpanelsettingsinWindows.Youcanaccessthisby clickingStart>Settings>ControlPanel>AddorRemovePrograms. Theuninstallfeaturemaynotremoveallfilesfromyoursystem.Youmay needtoremovesomefilesandfoldersmanually.Also,ifyouhave previouslycreatedprojects,makesuretobackthemuptopreventloss.
10
OpeningtheProgram
WhenyoufirstopentheHTMLEditor,twowindowsappear:theTipoftheDay windowandtheWelcomewindow.
TipoftheDayWindow
Displayshelpfultipsforworkingwiththeprogram.
Tonavigatethetips,usethePreviousandNextbuttons.Ifyoudonotwanttosee thesetipsonstartup,uncheckthecheckboxnexttoShowtipofthedayon startup. ToreenabletheTipoftheDaywindow,gotoHelp>TipoftheDayor usetheoptionsunderTools>Preferences>Generaltab.
WelcomeWindow
Containslinkstocommonlyusedprogramfunctions.
11

OpenstheQuickStartwindow,whichallowsyoutodefinesettingsforyournew page,includingthepagetitle,colorscheme,metainformation,andcharacterset.
NewBlankPage
NewWebsiteProject
OpenstheWebsiteProjectSettingswindow,whichletsyoucreateablank WebsiteProjectortocreateaWebsiteProjectfromexistingfiles.Youcanalso enteradditionalinformation,suchasyourserversettings,andselectyourfile uploadoptions.
StartWithaTheme
OpensawindowthatallowsyoutochoosefromseveralWebpagethemes.
12
Athemeincludesthreepages(index.html,aboutus.html,andcontact us.html)thatincludetheHTMLandimagesforabasicdesign.Youcan replacetheimagesandtextwithyourowncontent.Ifyouprefertowork withapagestructure,gotoFile>NewFromLayout.Formoreinformationabout thedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetween alayoutandatheme? Fordetailedtutorialscoveringeachoftheseoptionsforcreatinganew page,readCreatingaNewWebpage.
OpenExistingFiles
Allowsyoutoopenandworkwithapreviouslycreatedfile.
OpenaWebsiteProject
AllowsyoutoopenandworkwithapreviouslycreatedWebsiteProject.
WhatsaWebsiteProjectAnyway?
OpenstheWhatisaWebsiteProject?WebsiteProject,whichgivesstepbystep instructionsforhowtoworkwithWebsiteProjects.
13
MenuBar
TheMenubarislocatedatthetopoftheprogram.Itgivesyouaccesstoallthe programtools,aswellasoptionslikechanginghowtheprogramlooks,opening andclosingpages,etc. Theoptionsundereachcategorychangedependingwhetheryouareusingthe CodeorVisualeditor.Inthismanual,wehavedescribedtheviewfromtheCode Editor,becauseitcontainsalltheavailableoptions. File menu Edit menu View menu My Websites menu Document menu Insert menu Format menu Tools menu Window menu Help menu
14
FileMenu
TheFilemenucontainsoptions thatallowyoutocreate,open, close,andsavepages,upload andprintyourwork,andexitthe program. Fordetailedtutorials coveringthefour differentwaystocreate anewWebpage,readCreatinga NewWebpage.
NewFromQuick Start
OpenstheQuickStartwindow, whichallowsyoutodefine settingsforyournewpage, includingthepagetitle,color scheme,metainformation,and characterset.
NewBlankPage (Ctrl+N)
Createsanewpageforyouto editfromscratch.Bydefault, newpagesincludesomebasic HTMLtohelpgetyoustarted. ThisincludestheDOCTYPE, html,head,title,meta,andbody tags,aswellasanHTML commentstatingthatthepage wascreatedwithCoffeeCup HTMLEditor.
NewFromLayout
OpensawindowthatallowsyoutochoosefromseveralWebpagelayouts.
15
AlayoutincludestheHTMLforabasicpagestructure.Youprovidethe content.Ifyouprefertoworkwithapagedesign,gotoFile>NewFrom Theme.Formoreinformationaboutthedifferencebetweenlayoutsand themes,readWhatisthedifferencebetweenalayoutandatheme?
NewFromTheme
16
Athemeincludesthreepages(index.html,aboutus.html,andcontact us.html)thatincludetheHTMLandimagesforabasicdesign.Youcan replacetheimagesandtextwithyourowncontent.Ifyouprefertowork withapagestructure,gotoFile>NewFromLayout.Formoreinformationabout thedifferencebetweenlayoutsandthemes,readWhatisthedifferencebetween alayoutandatheme?
Open(Ctrl+O)
Allowsyoutoopenandworkwithapreviouslycreatedfile.
OpenFromWeb
OpenstheOpenFromWebwindow,whichallowsyoutoimportanHTMLpage ontheInternetintotheHTMLEditor.ThisoptionworksbestwithHTMLpages thatdonotcontainPHPorSSI.Thesescriptsarestoredontheserver,and sometimesaddcodetoaWebpagethatcannotbeimportedintotheHTMLEditor.
RecentFiles
Displaysalistoffilesyouhaveworkedwithrecently,whichallowsyoutoaccess themmorequickly.
Close
Closesthecurrentfileyouhaveopen,butleavestheprogramopen.
CloseAll
Closesalltheopenfiles,butleavestheprogramopen.
Save(Ctrl+S)
Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequentlyto preventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
SaveAs(Shift+Ctrl+S)
Savesthecurrentfileunderadifferentname.Thiswillnotoverwritethefileyou arecurrentlyworkingon;instead,itwillcreateanewfilethatyoucangivea differentname.
SaveAll
Savesalltheopenfiles.
SaveSelectedTextasSnippet
OpenstheSaveSnippetwindow,whichallowsyoutonameandsavethe highlightedtextasasnippet.
17
AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCode Snippetstab.Foradetailedtutorialaboutworkingwithsnippets,read HowtoUseSnippets.
UploadFiletoServer
Expandstodisplayalistofoptionsforuploadingyourwork.
PreviouslyConfiguredServers
Selectapreviouslyconfiguredserverandthenselectthefolderwhereyouwould liketouploadyourfile.ThisopenstheUploadFiletoServerwindow,which displaysthestatusoftheuploadandclosesautomaticallywhentheuploadis complete.
18

OpenstheServerConfigurationwindow,whichallowsyoutoconfigureanewor existingserverprofile.
AddorEditServers
Print(Ctrl+P)
Printsthecurrentfileinwhateverviewyouhaveselected(CodeEditor,Visual Editor,orPreview).
PrintPreview
Opensawindowthatallowsyoutopreviewthecurrentfileforprintingin whateverviewyouhaveselected(CodeEditor,VisualEditor,orPreview).
19
PageSetup
OpensthePrintSetupwindow,whichallowsyoutoadjusttheprintingsettings forthecurrentfile.
Exit
Closestheprogram.
20
QuickStartWindow
TheQuickStartwindowallowsyoutodefinesettingsforyournewpage,including thepagetitle,colorscheme,DOCTYPE,characterset,andmetainformation. ForadetailedtutorialaboutusingtheQuickStartwindow,read CreatingaNewWebpage.
YoucanpreviewthesettingsyouchooseinthePagePreviewpaneinthemiddle ofthewindow.
PageTitle
Thetextdisplayedonthebrowser'stitlebarthatalsoappearsinsearchresults.A goodpagetitlesuccinctlydescribesthecontentonthepage.
21
BackgroundImage
Toselectabackgroundimageforyourpage,enterthefilepathinthisfieldorclick theBrowseicontobrowseyourcomputerfortheimageyouwishtouse.To removeabackgroundimage,clicktheredXicon.
Colors
Therearefivecoloroptionsavailable:pagebackground,text,andunvisited, visited,andactivelinks.Tochangethecolorofanyoftheseelements,clickthe associatedcolorswatch.Thisopensadropdownlistof40basiccolors.
Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradient thatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
22
ColorSchemeDropDownList
Ifyouwouldliketouseacolorscheme,selectonefromthisdropdownlist.
Save
Clickthisbuttonifyoumadechangestoaschemethatyouwouldliketosave.
SaveAs
Clickthisbuttonifyouhavecreatedacolorschemeyouwouldliketouseagain. Thisopensawindowthatallowsyoutoenteranameforyournewscheme.
AfteryouclickOK,theschemewillbeavailableunderthedropdownlist.
Delete
Clickthisbuttontodeletetheselectedscheme.
DontUnderlineLinks
Checkthisboxifyouwanttoremovetheautomaticunderlinefromyourlinks.
DOCTYPE
SelectthedesiredDOCTYPEfromthisdropdownlist.
Charset
Selectyourpreferredcharactersetfromthisdropdownlist.
MetaDescription
ThisisashortdescriptionofyourWebsite.Itshouldbenolongerthan50words.
MetaKeywords
ThesearewordsthatdescribeyourWebpage.Theymusteachbeseparatedbya commaandaspace. FormoreinformationaboutDOCTYPEs,charactersets,andmeta information,readNewFromQuickStart.
23
TheOpenFromWebwindowallowsyoutoimportanHTMLpagefromthe InternetintotheHTMLEditor.Tousethistool,entertheURLforthepageyou wanttoopenintheURLtoOpenFromtheWebfieldatthetopofthewindow, andthenclickOpen.TheDownloadStatusareaatthebottomofthewindow willtellyouthestatusofyourdownload. Foradetailedtutorialabouthowtousethisfunction,readHowtoUse theOpenFromWebfunction.
OpenFromWebWindow
TheOpenFromWebfunctionworksbestwithHTMLpagesthatdonot containPHPorSSI.Thesescriptsarestoredontheserver,and sometimesaddcodetoapagethatcannotbeimportedintotheHTML Editor.Additionally,thisfunctioncannotdownloadallthepagesinagiven Website.Todothis,youshoulduseanexternalFTPclientsuchasDirectFTP (http://www.coffeecup.com/directftp/)orFreeFTP (http://www.coffeecup.com/freeftp/).
24
OptionsTab
Choosewhereyouwouldliketodownloadthefileandwhatpartsofthepageyou wouldliketodownload.
DownloadOnlytheHTMLPage(WithoutImagesorOther RequiredFiles)andOpenitintheEditor
ThisoptiondownloadstheHTMLfromthepage,butdoesnotincludethe associatedimagesorotherfiles,likeCSSorscripts.ItopensthefileintheEditor, butdoesnotsaveittoyourcomputer. TosaveanHTMLpageyouhavedownloadedusingthisoption,goto File>Save.
SavetoDisk
Thisoptionsavesthepagetoalocationyouspecifyonyourcomputer.Tospecifya location,clicktheBrowseiconandchoosethefolderwhereyouwantthefile saved.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.
ProxySettingsTab
Entertheproxyhostname,login,password,port,andtypeintheprovidedfields, andthenpressOK.
25
Ifyouareunsureofanyofthisinformation,contactyourhosting provider.Ifyouarenotsurewhetheryoushouldusethisinformation, chancesareyoudonothaveto.
26
ServerConfigurationWindow
TheServerConfigurationwindowallowsyoutoconfigureaneworexistingserver profile.
ClickingtheDeletebuttondeletestheselectedserverprofile.ClickingtheAddor EditbuttonopenstheServerConfigurationAddandEditwindows, respectively.TheseallowyoutosetupanFTPprofileyoucanusetouploadyour worktoyourserver. Foradetailedtutorialaboutuploadingyourwork,readtheUploading YourWebsiteProjectportionofWorkingWithWebsiteProjects.
27
ServerConfigurationAdd/EditWindow
TheServerConfigurationAddandEditwindows,allowyoutosetupanFTP profileyoucanusetouploadyourworktoyourserver.
Putthefollowinginformationintheprovidedfields. Ifyouareunsureofanyofthisinformation,contactyourhosting provider.
Nickname
Apersonalreminderyoucanusetotellyourserversapart.Youcannameyour serversanythingyouwant.
Username
TheFTPusernameassignedtoyoubyyourWebhostingcompany.Besuretoenter theinformationexactlyhowitwasgiventoyoubyyourprovider.Usernamesare
28
casesensitive,soiftherearecapitallettersinyourusername,youmustenterit thatway.
Password
TheFTPpasswordassignedtoyoubyyourWebhostingcompany.Besuretoenter theinformationexactlyhowitwasgiventoyoubyyourprovider.Passwordsare casesensitive,soiftherearecapitallettersinyourpassword,youmustenterit thatway.
Port
Aportdefineshowtheserverrespondstoacertainprotocol.Thisnumberis usually21,andunlessyourhostingproviderhastoldyouotherwise,youshouldnot changeit.
UsePassiveMode
Checkingthisboxactivatespassivemode.Enablepassivemodeifyouexperience troubleconnecting.
HostName
TheTCP/IPhostnameofyourFTPserver.ItshouldbeintheformofanIPaddress, yourdomainname(e.g.yourdomain.com),oryourdomainnameprecededby ftp.(e.g.ftp.yourdomain.com).Donotincludeftp://oranydirectorynamesuch asftp.yourdomain.com/mysite,becausetheseareinvalidTCP/IPhostnames.It isuptoyourWebhostingcompanytoassignyourFTPserverhostname,soyou willneedtofindoutfromthemwhatitis. ExamplesofvalidWebserveraddresses ftp.mysite.com 24.24.100.100 mysite.com ExamplesofinvalidWebserveraddresses ftp://ftp.mysite.com ftp.mysite.com/mysite http://www.mysite.com
RemoteFolders
FoldersonyourserverwhereyourWebsitefilesarestored.Commonnamesforthe remoterootfolderincludewww,public_html,orweb.Youcanalsousethis spacetoconfiguresubfoldersonyourserverwhereyoumaywanttodirectly uploadyourfiles.
TestSettings
Clickthisbuttontotesttheserversettings.
29
EditMenu
TheEditmenucontains optionsthatallowyoutoundo orredoyouractions,cut,copy, paste,select,anddelete objects,convertyourcode case,runafindandreplace, andedityourXHTMLtags.
Undo(Ctrl+Z)
Undoesthelastactionyou haveperformed.
Redo(Ctrl+Q)
Redoesthelastaction.The Redofunctioncomesinhandy whenyouaccidentallyusethe Undofunctionorchangeyour mindaboutundoinganaction.
Cut(Ctrl+X)
Removestheselectedobjector textfromthescreenandstores itontheWindowsclipboard.It isthenavailabletobepasted untilsomethingelseiscutorcopiedtotheclipboard.
Copy(Ctrl+C)
MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindows clipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutor copiedtotheclipboard.
Paste(Ctrl+V)
TakestheobjectstoredontheWindowsclipboardandplacesitonthepage. Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesame objectasmanytimesasyouneed.
PasteLinesasTable
TakestheobjectstoredontheWindowsclipboardandplacesitinatable.Multiple linesareplacedintheirownrows.
30
Delete
Removestheselectedobject(s).
SelectAll(Ctrl+A)
Selectseverythingintheworkspace.Thisishelpfulifyouwanttocopy,cut,or deletemanyobjectsatatimeinsteadofhavingtoselectthemallindividually.
ConverttoUPPERCASE(Shift+Ctrl+U)
Convertstheselectedtextandtagstouppercase.
Converttolowercase(Shift+Ctrl+L)
Convertstheselectedtextandtagstolowercase.
ConverttoProperCase
Convertstheselectedtextandtagstopropercase.Propercasecapitalizesthefirst letterofeachword.
Find(Ctrl+F)
OpenstheExtendedFindwindow,whichallowsyoutosearchthecurrent document,allopendocuments,orallthedocumentsinagivenfolderforasearch term.
Replace(Ctrl+H)
OpenstheExtendedFindandReplacewindow,whichallowsyoutosearchthe currentdocument,allopendocuments,orallthedocumentsinagivenfolderfora search
FindNext(F3)
FindsthenextinstanceofthesearchtermenteredintheExtendedFindwindow.
EditXHTMLTags
OpenstheEditXHTMLTagswindow,whichallowsyoutoviewandeditthe attributesandattributevaluesoftheavailableXHTMLtags.
31
ExtendedFindWindow
TheExtendedFindwindowallowsyoutosearchthecurrentdocument,allopen documents,orallthedocumentsinagivenfolderforasearchterm.
Find
Enterthetextorcodeyouwouldliketosearchforinthisfield.
MatchCase
Selectthisoptionifyouonlywanttoseeresultswiththesamecapitaland lowercaselettersasenteredintheFindfield.Forexample,ifyouselectthisoption andsearchforthephraseWelcometomyWebsite,theprogramwillnot recognizethephrasewelcometomywebsiteasamatch.
FindIn
Thisareaallowsyoutochoosewhichdocumentstosearch.Youcanlookinthe currentdocument,inallopendocuments,orinallthedocumentsinagiven folder.Ifyouwanttouseafolder,clicktheBrowseicontobrowseyourcomputer forthedesiredfolder.Youcanalsoselectwhichfiletypesyouwouldliketoreturn, andchoosewhethertosearchinthesubfoldersofthegivenfolder.
32
ExtendedFindandReplaceWindow
TheExtendedFindandReplacewindowallowsyoutosearchthecurrent document,allopendocuments,orallthedocumentsinagivenfolderforasearch term,andthenreplaceitwithtextofyourchoosing. Foradetailedtutorialaboutusingthisfunction,readHowtoUse ExtendedFindandReplace.
TheSearchResultstabdisplaysacompletelistofthefileswherethe searchtermappears.Toenableit,gotoView>ExtendedFindResults.
File
Thepathtothefilewherethetermwasfound.
Position
Thenumberofcharactersinthedocumentthatprecedetheterm.
33
Find
Enterthetextorcodeyouwouldliketosearchforinthisfield.
ReplaceWith
Enterthetextorcodeyoutoreplacethesearchterminthisfield.
MatchCase
Selectthisoptionifyouonlywanttoseeresultswiththesamecapitaland lowercaselettersasenteredintheFindfield.Forexample,ifyouselectthisoption andsearchforthephraseWelcometomyWebsite,theprogramwillnot recognizethephrasewelcometomywebsiteasamatch.
FindIn
Thisareaallowsyoutochoosewhichdocumentstosearch.Youcanlookinthe currentdocument,inallopendocuments,orinallthedocumentsinagiven folder.Ifyouwanttouseafolder,clicktheBrowseicontobrowseyourcomputer forthedesiredfolder.Youcanalsoselectwhichfiletypesyouwouldliketoreturn, andchoosewhethertosearchinthesubfoldersofthegivenfolder. Whenrunningafind/replaceinafolder,theHTMLEditorwillnot confirmchangeswithyou.Forthisreason,youmaywishtobackupyour filesbeforeperformingthisaction.
FindNext
Clickthisbuttontofindthenextinstanceofthesearchterm.Thiswillnotreplace anything.
Replace
Clickthisbuttontoreplacethecurrentinstanceofthesearchterm.
ReplaceAll
Clickthisbuttontoreplaceallinstancesofthesearchterm.
34
EditXHTMLTagsWindow
TheEditXHTMLTagswindowallowsyoutoviewandedittheattributesand attributevaluesoftheavailableXHTMLtags.Thechangesyoumakeherewill appearintheTagstabwhenHTMLTagsisselected,andinthecodecompletion dropdownlistwhenyouareworkingintheCodeEditor. FormoreinformationaboutworkingwithXHTML,checkoutthe W3SchoolsXHTMLTutorial(http://www.w3schools.com/Xhtml/).
TagStartandTagEnd
Thebeginningandendofthetag.
Tags
ThisisalistoftheavailableXHTMLtags.YoucanaddcustomXHTMLtagsby clickingthegreenplussigniconatthebottomofthelist.Youcandeletetagsby clickingtheredXicon,andyoucanrenamethembyclickingtheEditTagName icon.
35
SelectedTagAttributes
Thisisalistoftheattributesthatcanbeusedwiththeselectedtag.Youcanadd customXHTMLattributesbyclickingthegreenplussigniconatthebottomof thelist.YoucandeleteattributesbyclickingtheredXicon,andyoucanrename thembyclickingtheEditAttributeNameicon.
CustomAttributeValues
Thisisalistofthevaluesthatcanbeusedwiththeselectedattribute.Youcan selectthevaluetypefromtheAttributeTypedropdownlist.Youcanaddcustom valuesbyclickingthegreenplussignicontotherightofthelist.Youcandelete valuesbyclickingtheredXicon,andyoucanrenamethembyclickingtheEdit AttributeNameicon.
36
ViewMenu
TheViewmenucontainsoptionsthat allowyoutochangehowthings appearintheprogram.
Views
Displaysalistofoptionsforhowthe filesundertheMyComputertabin theResourcebrowsercanbe displayed:asicons,alist,details, smallicons,orthumbnails.The followingkeyboardshortcutscanbe usedtoaccesstheseoptions: Icons Shift+Ctrl+F4 List Shift+Ctrl+F5 Details Shift+Ctrl+F7 Small Icons Shift+Ctrl+F8 Thumbnails Shift+Ctrl+F9
MyWebsitesTab
OpenstheMyWebsitestabinthe Resourcebrowser.
MyComputerTab
OpenstheMyComputertabinthe Resourcebrowser.
CodeSnippetsTab
OpenstheCodeSnippetstabintheResourcebrowser.
XHTMLTagsTab
OpenstheXHTMLsectionoftheTagstabintheResourcebrowser.
PHPTagsTab
OpensthePHPsectionoftheTagstabintheResourcebrowser.
CSSTagsTab
OpenstheCSSsectionoftheTagstabintheResourcebrowser.
CharactersTab
OpenstheCharacterstabintheResourcebrowser.
37
SplitScreenPreview(F12)
Enablessplitscreenpreview,whichallowsyoutopreviewyourworkinabrowser areabelowtheCodeEditor.
Toviewyourworkinotherbrowsers,usethePreviewtool.It'sgood WebdesignpracticetotestyourWebsiteinseveraldifferentbrowsersto ensurecrossbrowsercompatibility.Themostpopularbrowsersare Firefox,InternetExplorer,Opera,GoogleChrome,andSafari.
ToggleGutter
Enablesthegutter,whichisabartotheleftofthecodewherelinenumbers, bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.
38
ToggleWordWrap
SelectthisoptionifyouwouldlikeyourtexttoautomaticallywraptofittheCode Editorworkspace.
ToggleLineNumbers
Turnsonlinenumbersinthegutter.
ExtendedFindResults
DisplaystheSearchResultstabatthebottomoftheprogram.
39
SearchResultsandDocumentDependenciesTabs
Thisareacontainstwotabs,SearchResultsandDocumentDependencies.The SearchResultstabdisplaysthefileswherethesearchtermspecifiedinthe ExtendedFindorExtendedFindandReplacewindowswasfound.The DocumentDependenciestabdisplaysthelinksandexternalfilesreferencedinthe openWebsiteProjectthathavenotbeencopiedormovedtooneoftheWebsite Projectfolders.
Toexitthisarea,clicktheredXinitsupperrighthandcorner. Search Results tab Document Dependencies tab
40
SearchResultsTab
TheSearchResultstabdisplaysthefileswherethesearchtermspecifiedinthe ExtendedFindorExtendedFindandReplacewindowswasfound.
File
Thepathtothefilewherethetermwasfound.
Position
Thenumberofcharactersinthedocumentthatprecedetheterm.
41
DocumentDependenciesTab
TheDocumentDependenciestabdisplaysthelinksandexternalfilesreferencedin theopenWebsiteProjectthathavenotbeencopiedormovedtooneofthe WebsiteProjectfolders.
MissingLocalFile
ThepathtothefilethathasnotbeenaddedtotheWebsiteProject.
WebsiteProjectFile
ThepathtotheWebsiteProjectfilethatcontainsthemissinglocalfile.
Position
ThenumberofcharactersintheWebsiteProjectfilethatprecedetheterm.
42
DocumentDependenciesRightClickMenu
Rightclickingthe dependenciesopensamenu thatallowsyoutoworkwith theselecteddependencyand WebsiteProject.
EditReference
BringsyoutothereferenceintheWebsiteProjectfilesoyoucanworkwiththe HTML.
IgnoreWarning(Remove)
RemovesthewarningaboutthisdependencyfromtheDocumentDependencies list.
FindandCopyFiletoProject
Opensawindowthatallowsyoutobrowseyourcomputertofindandcopythe missingfiletoyourWebsiteProject.
43
MyWebsitesMenu
TheMyWebsitesmenuis whereyoucanworkwith WebsiteProjectsinthe program. Formore informationabout usingWebsite Projects,readWorkingWith WebsiteProjects.
NewWebsite Project
OpenstheWebsiteProject Settingswindow,whichlets youcreateablankWebsite ProjectortocreateaWebsite Projectfromexistingfiles.Youcanalsoenteradditionalinformation,suchasyour serversettings,andselectyourfileuploadoptions.
OpenWebsiteProject
CloseWebsiteProject
ClosesthecurrentWebsiteProjectyouhaveopen,butleavestheprogramopen.
AllWebsiteProjects
OpensalistofalltheWebsiteProjectsyouhavecreated,whichallowsyouto accesstheseWebsiteProjectsmorequickly.
RemoveWebsiteProject
RemovestheselectedWebsiteProjectfromtheHTMLEditor.Thefilewillnotbe deletedfromyourcomputer.
WebsiteProjectSettings
OpenstheWebsiteProjectSettingswindow,whichallowsyoutoeditthe settingsforthecurrentWebsiteProject.
UploadSelectedFiles
UploadsthecurrentlyselectedWebsiteProjectfilestoyourserver.Thefile structureispreservedduringtheupload.Forexample,ifyouuploadanimage
44
calledimage.pngthatislocatedinafoldercalledimages,image.pngwillbe uploadedintotheimagesfolderontheserver.Ifthereisnoimagesfolderonthe server,itwillbecreatedduringtheuploadprocess. YouwillneedtosetupaserverprofileintheWebsiteProjectSettingswindow inordertouploadyourfiles. YoucanonlyassignoneserverperWebsiteProject.Ifyouwantto uploadanyorallofyourWebsiteProjectfilestoadifferentserverthan theonespecifiedinthisfield,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.
UploadEntireWebsiteProject
UploadstheentireWebsiteProjecttoyourserver.Youwillneedtosetupaserver profileinordertoperformthisaction.
CheckWebsiteProjectDependencies
DisplaystheDocumentDependenciestabatthebottomoftheprogram.
45
WebsiteProjectSettingsWindow
TheWebsiteProjectSettingswindowallowsyoutoaddoreditthesettingsfora neworexistingWebsiteProject.
WebsiteProjectName
ThenameofyourWebsiteProject.Itisapersonalreminder,soyoucannameit anythingyouwant.
WebsiteProjectLocation
ThelocationwhereyourWebsiteProjectisstoredonyourcomputer.Usethe Browseicontobrowseyourcomputerforthedesiredlocation.
Server
TheserverwhereyouwilluploadyourWebsiteProjectfiles.Youcanselectoneof theserversyouhavealreadydefinedordefineoneusingthefieldsintheServer Configurationwindow.
46
YoucanonlyassignoneserverperWebsiteProject.Ifyouwantto uploadanyorallofyourWebsiteProjectfilestoadifferentserverthan theonespecifiedinthisfield,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.
ConfigureServers
OpenstheServerConfigurationwindow,whichallowsyoutoconfigureanewor existingserverprofile.
RemoteRootFolder
TherootfolderwhereyourWebsitefilesarestoredonyourserver.Common namesincludewww,public_html,orweb.Ifyouarenotsureofthisinformation, contactyourhostingprovider.
ServerURL
TheTCP/IPhostnameofyourFTPserver.ItshouldbeintheformofanIPaddress, yourdomainname(e.g.yourdomain.com),oryourdomainnameprecededby ftp.(e.g.ftp.yourdomain.com).Donotincludeftp://oranydirectorynamesuch asftp.yourdomain.com/mysite,becausetheseareinvalidTCP/IPhostnames.It isuptoyourWebhostingcompanytoassignyourFTPserverhostname,soyou willneedtofindoutfromthemwhatitis. ExamplesofvalidWebserveraddresses ftp.mysite.com 24.24.100.100 mysite.com ExamplesofinvalidWebserveraddresses ftp://ftp.mysite.com ftp.mysite.com/mysite http://www.mysite.com
CheckDependenciesBeforeUploadingFiles
Checksthedependenciesbeforeuploadingyourfilestoyourservertoensurethey arereferencedcorrectly.WebsiteProjectdependenciesarelinksandexternalfiles, suchasstylesheets,images,etc.
47
IfDependenciesAreMissingFromLocalSystem,Cancel FileUpload WhenUploadingFiles
Cancelsthefileuploadifanyofthedocumentdependenciesarenotlocatedinthe rightplaceinyourWebsiteProject. Youcanchoosetoalwaysuploaddependentfileslikeimagesandstylesheets, neveruploadthem,orhavetheprogramconfirmwithyoubeforeuploadingthem.
48
DocumentMenu
TheDocumentmenuallowsyou toworkwithdocument propertiesandbookmarks,and tovalidateyourHTML.
DocumentWeight
OpenstheDocumentWeight window,whichcontains informationaboutthesizeofthe currentlyopendocumentand howlongitwilltaketo downloadtoacomputeron severaldifferentconnections.
Document Dependencies
OpenstheDocument Dependencieswindow,which liststhebackgroundimages,items,andexternallinksinyourdocument.Youcan usethisinformationtokeeptrackofyourdependenciesandpreventissueslike brokenlinksandimages.
49
DocumentProperties
OpenstheDocumentPropertieswindow,whichletsyouchangethepagetitle, characterset,backgroundimageorcolor,linkcolors,andcolorscheme.
SetHighlighterFileType
Displaysalistoffourfiletypes:text,HTML,CSS,andPerl.Thehighlightingstyle inthedocumentwillchangeaccordingtowhichoptionyouchoose. Tochangethehighlightingcolorscheme,gotoTools>Preferences> Customizationtab,andthenclicktheModifyHighlightingbutton.
SetBookmark(Shift+Ctrl+[09])
Displaysalistof10bookmarkslotslabeledBookmark09.Selectingoneofthese optionssetsabookmarkatthelocationofthecursor.Ifyousetabookmarkina slotthatalreadycontainsabookmark,itwillberesettothenewlocation.
50
Foradetailedtutorialaboutworkingwithbookmarks,readHowtoUse Bookmarks.
GotoBookmark(Ctrl+[09])
Displaysalistofbookmarksthathavebeenset.Selectingoneoftheseoptions takesyoutothelocationofthebookmark.
ClearAllBookmarks
Clearsallthebookmarksthathavebeenset.
GotoLineNumber(Ctrl+G)
OpenstheGotoLineNumberwindow,whichallowsyoutoenteralinenumber youwouldliketobetakento.
ValidateHTML
Openshttp://validator.w3.org/inyourdefaultWebbrowser.Youcan validatetheHTMLofpagesyouhavealreadypublishedtoyourserver,or youcanuploadthefilestothissiteandcheckthembeforeuploading. Formoreinformationaboutusingthistool,refertothesites documentation(http://validator.w3.org/about.html).
51
DocumentWeightWindow
TheDocumentWeightwindowcontainsinformationaboutthesizeofthe currentlyopendocumentandhowlongitwilltaketodownloadtoacomputeron severaldifferentconnections.
Weight(FileSize)
Thisareadisplaystheweight(filesize)ofthecurrentdocumentandofany dependencies(backgroundimages,externallinks,etc.).Italsoliststhetotal weightofthedocument.
EstimatedDownloadTime
Thisarealiststheestimatedtimeitwilltakeforyourpagetoloadonacomputer basedonitsconnectionspeed.
52
DocumentPropertiesWindow
TheDocumentPropertieswindowletsyouchangethepagetitle,characterset, backgroundimageorcolor,linkcolor,andcolorscheme.
PageTitle
Thetextdisplayedonthebrowser'stitlebarthatalsoappearsinsearchresults.A goodpagetitlesuccinctlydescribesthecontentonthepage.
BackgroundImage
Toselectabackgroundimageforyourpage,enterthefilepathinthisfieldorclick theBrowseicontobrowseyourcomputerfortheimageyouwishtouse.To removeabackgroundimage,clicktheredXicon.
Colors
Therearefivecoloroptionsavailable:pagebackground,text,andunvisited, visited,andactivelinks.Tochangethecolorofanyoftheseelements,clickthe associatedcolorswatch.Thisopensadropdownlistof40basiccolors.
53
Ifyouwouldliketouseacolorscheme,selectonefromthisdropdownlist.
Save
Clickthisbuttonifyouhavemadechangestoaschemethatyouwouldliketo save.
54
SaveAs
Clickthisbuttonifyouhavecreatedacolorschemeyouwouldliketouseagain. Thisopensawindowthatallowsyoutoenteranameforyournewscheme.
AfteryouclickOK,theschemewillbeavailableunderthedropdownlist.
Delete
Clickthisbuttontodeletetheselectedscheme.
DontUnderlineLinks
Checkthisboxifyouwouldliketoremovetheautomaticunderlinefromyour links.
Charset
55
InsertMenu
TheInsertmenuallowsyoutoinsertvariouselementsintoyourpage.
Link(Ctrl+L)
OpenstheInsertLinkwindow,whichallowsyoutoinsertalinkandany associatedattributes.
56
Target(Ctrl+T)
OpenstheInsertTargetwindow,whichallowsyoutoinsertatarget.Targetsand linksareusedtocreatelinkstodifferentpartsofthesamepage.
Foradetailedtutorialaboutusinglinksandtargets,readLinkingto DifferentPartsoftheSamePage.
EmailLink(Ctrl+E)
OpenstheInsertEmailLinkwindow,whichallowsyoutoinsertanemaillink andanyassociatedattributes.
QuickLinktoOpenDocument
ExpandstodisplayalistofdocumentsthatareopenintheHTMLEditor.Mousing overadocumentnameexpandsthemenutodisplayalistoftheanchorswithin thedocument.
Selectingadocumentandalocationwithinthedocumentinsertsarelativelinkto thedocumentandtheselectedanchorintothecurrentlyopenfile.
QuickLinktoRelativeFile
Expandstodisplayalistofthefilesandfolderslocatedinthesamefolderasthe currentlyopendocument,aswellasanoptiontomoveuponefolder.
57
Selectingafilefromthislistinsertsarelativelinktothatfileinthecurrentlyopen document. Carefulwhereyoulink!Ifthefileyoulinktoisntlocatedinyour WorkingfolderoryourWebsiteProject,itmaynotbereferenced correctlymeaningthelinkwontwork.Needmoreinformationabout workingwithWebsiteProjects?Checkoutthistutorial:WorkingWithWebsite Projects.
Image(Ctrl+M)
OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandany associatedattributes,andtocreateathumbnailversionoftheimage. YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMy ComputertabintotheCodeorVisualeditor.
Sound
OpenstheInsertSoundwindow,whichyoucanusetobrowseyourcomputerfor asoundtoplayonyourWebpage.
58
YoucanalsoaddasoundbydraggingitfromtheMyWebsitesorMy ComputertabintotheCodeorVisualeditor.
List
OpenstheInsertListwindow,whichallowsyoutoinsertorimportoneoffour differentkindsoflists:bulleted,numbered,definition,orunformatted.
Comment(Shift+Ctrl+C)
OpenstheInsertCommentwindow,whichallowsyoutoinsertacomment. CommentsarenotrenderedbyWebbrowsersandcanbeusedtoleavenotesfor yourselforforanyoneelsewhomayviewyourcode.
59
HorizontalRule
OpenstheInsertHorizontalRulewindow,whichallowsyoutodesigna horizontalruleandaddittoyourpage.
Color
OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfrom therainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththe desiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursoris positionedonthepage.
60
FrameDesigner
OpenstheFrameDesigner,whichallowsyoutocreateaframesbasedlayout.
TableDesigner
OpenstheCoffeeCupTableDesigner,whichallowsyoutocreateatable.Atable canbeusedtodisplayinformationorasyourpagelayout.
QuickTable
OpenstheQuickTablewindow,whichallowsyoutodesignabasictable.
Dragyourmouseoverthesquarestopickhowmanycolumnsandrowsareinyour table.Clickwhenyouhavespecifiedthedesireddimensions,andthecodewillbe insertedonyourpage.
FormItems
Opensasubmenuthatallowsyoutoinsertvariousformitems. ForcomprehensiveinformationaboutcreatingandmodifyingHTML forms,readtheW3SchoolstutorialHTMLFormsandInput (http://www.w3schools.com/html/html_forms.asp).
61
GetCoffeeCupFormBuilder
OpenstheCoffeeCupWebFormBuilderpage (http://www.coffeecup.com/formbuilder/)inyourdefaultWebbrowser. ThisprogramsimplifiestheprocessofaddingWebformstoyour Website.
InsertForm
OpenstheInsertFormwindow,whichallowsyoutosettheformmethod,MIME postmethod,andURLwheretheformresultswillbedirected.Thisinformationis importantifyouwantyourformtoworkproperly!
DropDownList
OpenstheInsertDropDownListwindow,whichallowsyoutoconfigurethe contentsofadropdownlist.
62
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevalues youwouldliketoappearintheformresultsintheValuefield.TheNameappears intheformresults,andtheAlignmentoptionscontrolwheretheelementappears onthepage. Adropdownlistisabarwithanarrowthatexpandstoshowalistwhenclicked.It isbestsuitedforlistsinwhichyourusercanonlyselectoneoption.Thedrop downlistconfiguredaboverenderslikethis:
ListBox
OpenstheInsertListBoxwindow,whichallowsyoutoconfigurethecontentsof alistbox.
63
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevalues youwouldliketoappearintheformresultsintheValuefield.TheNameappears intheformresults,andtheAlignmentoptionscontrolwheretheelementappears onthepage. Alistisatextboxcontainingalistofitemsthatyourusercanselect,andisbest suitedforlistsinwhichyourusercanselectseveraloptions.Thelistbox configuredaboverenderslikethis:
RadioButtonGroup
OpenstheInsertRadioButtonGroupwindow,whichallowsyoutoconfigurea radiobuttongroup.Radiobuttonsmustbegroupedinordertoworkcorrectly.
64
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevalues youwouldliketoappearintheformresultsintheValuefield.TheNameappears intheformresults,andtheAlignmentoptionscontrolwheretheelementappears onthepage.
Checkbox
Insertsthecodeforacheckbox,whichisasquareboxthatcanbeselectedand deselected,andisbestsuitedforlistsinwhichyourusercanselectoneormore answers.Acheckboxlookslikethis:
RadioButton
Insertsthecodeforaradiobutton,whichisaroundbuttonthatyourusercan selectbutonlydeselectbyselectinganotheroption.Theyarebestsuitedforlistsin whichyourusercanonlyselectoneanswer.Aradiobuttonlookslikethis:
Insertsthecodeforaformimage.Thisisparticularlyhelpfulifyouwanttoadd custombuttonstoyourform.
Image
TextBox
Insertsthecodeforatextbox,whichisaonelinefieldwhereyourusercantype information,andisbestsuitedforshortanswers,suchasname,emailaddress, phonenumber,etc.Atextboxlookslikethis:
65
PasswordTextBox
Insertsthecodeforapasswordtextbox,whichisaonelinefieldwhereyouruser cantypeapassword.Allthecharactersaredisguised.
HiddenText
Insertsthecodeforhiddentext,whichappearsinyourcopyoftheformresults andcanbeusedforsortingandfilteringinformation.
FileBrowseTextBox
Insertsthecodeforafilebrowsetextbox,whichisusedtobrowseyourcomputer forafile.Thisfilewillbeuploadedwhentheformissubmitted.
TextArea
Insertsthecodeforatextarea,whichisamultiplelinefieldwhereyourusercan typeinformation,andisbestsuitedforlongeranswers,suchasmessages, feedback,etc.Atextarealookslikethis:
InsertsthecodeforagenericSubmitQuerybutton,whichsubmitsthe informationtotheURLspecifiedintheInsertFormwindow.
Button
SubmitButton ResetButton
Insertsthecodeforasubmitbutton. Insertsthecodeforaresetbutton.
StyleSheetItems
Displaysalistofoptionsthatletyouinsertvariousstylesheetitems.
66
Forcomprehensiveinformationaboutcreatingandmodifyingstyle sheets,readtheW3SchoolstutorialCSSIntroduction (http://www.w3schools.com/css/css_intro.asp). OpenstheStyleSheetwindow,whichallowsyoutochoosebetweencreatinga newstylesheetclassandapplyingastylesheettoapreexistingHTMLtag.
StyleSheetWizard
Afteryoumakeyourchoice,youwillbetakentotheStyleSheetWizard,which allowsyoutosetthevariousoptionsforyourstylesheet.
StyleSheetAttributeWizard
OpenstheStyleSheetWizard,whichallowsyoutosetthevariousoptionsfor yourstylesheet.
CSSMenuDesigner
OpenstheCoffeeCupCSSMenuDesigner,whichallowsyoutodesignaCSS menu.
Head
Insertsthe<head></head>HTMLtags.Putheaderinformationsuchasmeta tagsandtitlesbetweenthesetags.Yourheadtagsshouldcomeafteryour<html> tagandbeforeyour<body></body>tags.
Title
Insertsthe<title></title>HTMLtagsbetweenthe<head></head>tags. Putyourpagetitlebetweenthesetags.Apagetitleisusedonthebrowser'stitle barandwillappearinsearchresults.Agoodpagetitlesuccinctlydescribesthe contentonthepage.
67
MetaDescription
InsertsthemetadescriptionHTMLcodebetweenthe<head></head>tags.Put yourmetadescriptionwithinthistag.ThisisashortdescriptionofyourWebsite. Itshouldbenolongerthan50words.
MetaKeywords
ThisinsertsthemetakeywordHTMLcodebetweenthe<head></head>tags. Putyourmetakeywordswithinthistag.Thesearewordsthatdescribeyour Webpage.Theymusteachbeseparatedbyacommaandaspace. Formoreinformationaboutmetainformation,readNewFromQuick Start.
68
InsertLinkWindow
TheInsertLinkwindowallowsyoutoinsertalinkandanyassociatedattributes. Foradetailedtutorialaboutinsertinglinks,readAddingaLinktoYour Page.
LinkText
Thetextyouruserwillclick.Bydefault,linktextisblueandunderlined.
URL
Thelocationwhereyouruserwillbetakenwhentheyclickthelinktext.Ifyouare linkingtoanexternalWebsite,youmustincludethefulllink,includinghttp:// andwww,ifapplicable.IfyouarelinkingtoapageordocumentinyourWebsite, youcanusearelativelinkbyclickingthefileicontobrowseyourcomputerfor thedesiredpage.YoushouldmakesurethefileislocatedinyourWorkingfolder oryourWebsiteProjecttomakesureitisreferencedcorrectly.
69
FormoreinformationaboutusingWebsiteProjects,readWorkingWith WebsiteProjects.
Target
Theframeyouwantthelinktoopenin.Thisfieldisonlynecessaryifyouareusing framesorifyouwanttoopenthelinkinanewwindow.Toopenthelinkinanew window,selectNewBrowserWindow(target="_blank").
Title
Adescriptionofthelinkthatwillappearasatooltipwhentheuserholdstheir mouseoverthelink.
ShowStatusbarMessageonMouseover
CheckingthisboxdisplaysadescriptionofthelinkintheStatusbaratthebottom oftheWebbrowserscreen.ThisoptionisonlyenabledinInternetExplorer.
WebBrowserWindowMessage
EntertheStatusbarmessagehere.
70
InsertEmailLinkWindow
TheInsertEmailLinkwindowallowsyoutoinsertanemaillinkandany associatedattributes.Whenyouruserclicksonthislink,theirdefaultemailclient (Thunderbird,OutlookExpress,etc.)willopenwiththisemailaddressintheTo: field. Foradetailedtutorialaboutusingemaillinks,readAddinganEmail LinktoYourPage.
LinkText
Thetextyouruserwillclick.Bydefault,linktextisblueandunderlined.
EmailAddresstoLinkTo
Theemailaddressthatwillappearintheusersdefaultemailclientwhenthey clickthelinktext.
Subject
Thesubjectoftheemail.
71
CheckingthisboxdisplaysadescriptionofthelinkintheStatusbaratthebottom oftheWebbrowserscreen.ThisoptionisonlyenabledinInternetExplorer.
EntertheStatusbarmessagehere.
72
TheInsertImagewindowallowsyoutoinsertanimageandanyassociated attributes,aswellascreateathumbnailversionoftheimage.Usetheareaonthe lefthandsideofthewindowtobrowseyourcomputerforthedesiredimage.The imageshouldbelocatedinyourWorkingfolderorWebsiteProjectinorderto displaycorrectly. YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMy ComputertabintotheCodeorVisualeditor.Foradetailedtutorial aboutaddingimages,readAddinganImagetoYourPage. IfyouwantmoreWebgraphicstochoosefrom,clicktheGetMore GreatWebGraphicsHerebuttontocheckouttheCoffeeCupGraphics Shopathttps://www.coffeecup.com/store/graphics/.
InsertImageWindow
Afteryouhaveselectedanimageandconfiguredanyadditionalattributes,click OK.ThisopenstheCopytoProjectwindow,whichpromptsyoutosaveyour imagetoyourWebsiteProjectorWorkingfolder.
73
YoucansavetheimagetoanyofthepreexistingfoldersinyourWebsiteProjector clickCreateFoldertocreateanewfolderforyourimage.Whenyouhaveselected thefolderwhereyourimagewillbestored,clickOK.
GeneralTab
Thisiswhereyouinsertthepathtotheimageanditsattributes.
74

Entertheimagepathhere.Ifyouselectanimageusingthetoolsonthelefthand sideofthewindow,thepathwillappearinthisfield.
Image
Alt
Adescriptionoftheimagedisplayedwhentheimagecannotbeshown,suchasin atextonlyorspeechbrowser,orifauserhasaslowconnection.Youshould alwaysusedetailedalttextforallprominentorcontextuallyimportantimageson yourWebpage
Title
Adescriptionoftheimagethatappearsasatooltipwhentheuserholdstheir mouseovertheimage.
Align
Selectthedesiredalignmentfromthisdropdownlist.
Border
Enterthewidthoftheborderinpixelsinthisfield.Ifyoudonotwantaborder, enter0.
WidthandHeight
Thesefieldsdisplaythewidthandheightofyourimageandcanalsobeusedto resizeit.Providingthisinformationallowsthepagestructuretoloadcorrectly beforetheimageloads.Ifyoudonotwanttoincludethesevalues,uncheckthe Includesizecheckbox.
75
Theimageresizefeatureshouldonlybeusedtomakeminor adjustments,sincesignificantadjustmentsmaydistorttheimage.Ifyou needtomakeadvancedchangestoyourimage,useanimageediting program.
URLtoLinkTo
Ifyouwouldliketousetheimageasalink,usethisfieldtoenterthelocation whereyouruserwillbetakenwhentheyclicktheimage.Ifyouarelinkingtoan externalWebsite,youmustincludethefulllink,includinghttp://andwww,if applicable.IfyouarelinkingtoapageordocumentinyourWebsite,youcanusea relativelinkbyclickingthefileicontobrowseyourcomputerforthedesiredpage. YoushouldmakesurethefileislocatedinyourWorkingfolderoryourWebsite Projecttomakesureitisreferencedcorrectly. FormoreinformationaboutusingWebsiteProjects,readWorkingWith WebsiteProjects.
ThumbnailTab
Thisiswhereyoucancreateanoptionalimagethumbnail,whichisasmaller versionoftheimage.Thumbnailsareoftenusedaslinkstotheoriginalversionof theimage.
CreateandInsertImageasThumbnail LinktoOriginalImage
Selectthischeckboxifyouwouldliketousetheimageasathumbnail. Selectthischeckboxifyouwouldlikethethumbnailtolinktotheoriginalimage.
76
ThumbnailFilenamePrefix
Thisdifferentiatesthethumbnailversionoftheimagefromtheoriginal.By default,itissettotn_,butyoucanchangeittowhateveryouwant.
ThumbnailWidthandHeight
Enterthewidthandheightofthethumbnailhere.Theaspectratioismaintained sotheimagewillnotbedistorted. Choosethedesiredimagefileformat(.gifor.jpg)andquality.Highqualityimages displaybetter,butarealsolarger,whichmakesforlongerdownloadtimes.
ThumbnailFormatandQuality
77
TheInsertListwindowallowsyoutoinsertoneoffourdifferentkindsoflists.You canalsoimportalistclickingtheImportListbutton. Foradetailedexplanationofhowtouselists,readHowtoCreatea List.
InsertListWindow
ListType
Choosefromthefourdifferentliststyles:bulleted,numbered,definition,orlist items.
BulletStyle
Choosefromthedifferentbulletstyles.Thisonlyappliesifyouareusingabulleted ornumberedlist.
ListHeaderText
Enteryourlistheaderhere.Alistheaderappearsabovethelistasalabel.
ListItemField
Enterthelistitemsinthisfield.Puteachlistitemonitsownline.
78
InsertHorizontalRuleWindow
TheInsertHorizontalRulewindowallowsyoutoconfigurethesettingsofa horizontalrulethatisthenaddedtoyourpage.Youcanpreviewthechangesyou makeinthePreviewarea. Formoreinformationabouthorizontalrules,readWhatIsa HorizontalRule?
Alignment Width
Choosethelinewidthandwhetheritismeasuredasapercentageofthe containingelement(suchasthepageora<div>tag)orinpixels. Choosethealignmentofyourhorizontalrule:left,right,orcentered.
Thickness
Choosethelinethickness,with1beingthethinnestand10beingthethickest.
79
Shading
Choosewhethertoapplya3Deffecttotheline.
Color
CheckingtheIncludecolorcheckboxallowsyoutochangethecoloroftheline. ThiseffectonlyappearsinInternetExplorer.Toselectacolor,clickthecolor swatch.Thisopensadropdownlistof40basiccolors.
80
FrameDesigner
TheFrameDesignerallowsyoutocreateaframesbasedlayout.Selectyour preferencesusingtheprovidedtools,andthedesignerwillautomaticallyinsertthe codeforyou.YoucanpreviewhowyourdesignwilllookusingthePreviewpane onthelefthandsideofthewindow. Foradetailedtutorialabouthowtousethistool,readHowtoUsethe FrameDesigner.
FrameStyle
Choosefromanumberofpredefinedframestyles.Thesestylesincludethenumber offrames,wheretheyarelocated,andwhatfunctiontheyperform.Forexample, HeaderTwoFramecontainstwoframes,oneintendedforuseasaheaderand anotherlargeronewherethebodycontentgoes.
FrameWidthandHeight
Usethesedropdownmenustosetthewidthandheightoftheselectedframe.To selectaframe,clickit,anditwillturnblue.
81
Thewidthandheightaremeasuredinthepercentageofthepagetheframe occupies.Iftheselectedframetakesuptheentireheightorwidthofthepageby default,youwillnotbeabletoadjustthatattribute.
FrameScrolling
Choosewhetheryouruserscanscrollwithintheframe.Autoaddsascrollbar whennecessary,Yesaddsascrollbaratalltimes,andNowillnotaddascrollbar atanytime.
AllowFrameResize
Selectthischeckboxifyouwantyouruserstobeabletoresizetheframes.
FrameBorder
Selectthischeckboxtoenableaframeborder,andthenenterthewidthofthe borderinthenumberfield.0isthethinnestborderand50isthelargest.
FrameName
Enteranamefortheframehere.Youshoulduseanamethatrelatestotheframes function.
SourceURL
EntertheURLofthepageyouwanttoappearintheframehere.Ifyouarelinking toanexternalWebsite,youmustincludethefulllink,includinghttp://andwww, ifapplicable.IfyouarelinkingtoapageordocumentinyourWebsite,youcanuse arelativelink.YoushouldmakesurethefileislocatedinyourWorkingfolderor yourWebsiteProjecttomakesureitisreferencedcorrectly. FormoreinformationaboutusingWebsiteProjects,readWorkingWith WebsiteProjects.
82
CoffeeCupTableDesigner
TheCoffeeCupTableDesignerallowsyoutodesignatable.Whenyouarereadyto applyyourtablecodetoyourpage,clickOK.
TheTableDesignerissplitintotwotabs,theTableDesigntabandtheIE Previewtab.TheTableDesigntaballowsyoutoaddcontentandworkwithyour table,andtheIEPreviewtaballowsyoutoseehowyourworklooksaWeb browser. Totestyourtableinotherbrowsers,addthecodetoyourpageandthen usethePreviewtool.It'sgoodWebdesignpracticetotestyourWebsite inseveraldifferentbrowserstoensurecrossbrowsercompatibility.The mostpopularbrowsersareFirefox,InternetExplorer,Opera,Google Chrome,andSafari. Insert New Table window Table Designer menu bar Table Designer toolbar Table Designer right-click menu
83
InsertNewTableWindow
TheInsertNewTablewindowopenswhenyouopentheTableDesignerand containstoolsthatallowyoutosetupatable.
NumberofRowsandColumns
Enterthenumberofrowsandcolumnsintothesefields.
BackgroundandBorderColor
Tochangethebackgroundand/orbordercolorofthetable,clicktheassociated colorswatch.Thisopensadropdownlistof40basiccolors.
84
TableWidth
Enterthewidthofthetableinthisfield.Youcanchoosefromapercentageofthe pageorafixedsizeinpixels.
CellSpacing
Enterthespaceinpixelsthatwillappearbetweeneachcell.
CellPadding
Enterthespaceinpixelsthatwillappearbetweentheborderofthecellandits contents.
BorderWidth
Enterthewidthinpixelsoftheborderbetweenthecells.
85
TableDesignerMenuBar
TheTableDesignermenubarislocatedatthetopofthewindow.Itgivesyou accesstoallthetoolsformodifyingyourtable,aswellasoptionslikeopening, saving,andpreviewingyourwork. File menu Edit menu Insert menu Format menu Table menu
86
FileMenu
TheFilemenuallowsyoutoworkwithbasicaspects oftheTableDesigner,includingcreating,opening, saving,andpreviewingtables,aswellasclosingthe designer.
New
Createsanewblanktableforyoutoeditfrom scratch.
Open
Allowsyoutoopenandworkwithapreviously createdtable.
Save
Savesthetableyouarecurrentlyworkingon.Werecommendyousavefrequently topreventlossincasesomethinghappenstoyourcomputerwhileyouare working.
SaveAs
Allowsyoutosavethecurrenttableunderadifferentname.Thiswillnot overwritethetableyouarecurrentlyworkingon;instead,itwillcreateanewtable thatyoucangiveadifferentname.
Preview
SwitchestheviewtotheIEPreviewtab,whichallowsyoutoseehowyourwork looksaWebbrowser. Totestyourtableinotherbrowsers,addthecodetoyourpageandthen usethePreviewtool.It'sgoodWebdesignpracticetotestyourWebsite inseveraldifferentbrowserstoensurecrossbrowsercompatibility.The mostpopularbrowsersareFirefox,InternetExplorer,Opera,Google Chrome,andSafari.
Exit
ClosestheTableDesigner.
87
EditMenu
TheEditmenuallowsyoutoundoorredoyour actionsandtocut,copy,paste,select,anddelete objects.
Undo(Ctrl+Z)
Undoesthelastactionyouhaveperformed.
Redo(Ctrl+Q)
Redoesthelastaction.TheRedofunctioncomes inhandywhenyouaccidentallyusetheUndo functionorchangeyourmindaboutundoingan action.
Cut(Ctrl+X)
Removestheselectedobjectortextfromthe screenandstoresitontheWindowsclipboard.Itisthenavailabletobepasted untilsomethingelseiscutorcopiedtotheclipboard.
Copy(Ctrl+C)
Paste(Ctrl+V)
PasteSpecial
Allowsyoutochoosetheformatofthepastedinformation.
88

Removestheselectedobject(s).
Delete(Ctrl+Del)
89
InsertMenu
TheInsertmenuallowsyoutoinsertanimageinto yourtable.
InsertImage
Opensawindowthatallowsyoutobrowseyour computerfortheimageyouwouldliketoaddtoyour table.
90
FormatMenu
TheFormatmenuallowsyoutoformatthe styleandfontofyourtextandtosetthe backgroundcolorofyourtable.
Bold
Boldstheselectedtextor,ifnotextis selected,appliesboldformattingtoany texttypedafterthelocationofthecursor.
Italic
Italicizestheselectedtextor,ifnotextis selected,appliesitalicformattingtoanytexttypedafterthelocationofthecursor.
Underline
Underlinestheselectedtextor,ifnotextisselected,appliesunderlineformatting toanytexttypedafterthelocationofthecursor.
Font
OpenstheFontwindow,whichallowsyoutoselectthefont,style,effects,size, andcolorofyourtabletext.
91
Fill(Background)Color
OpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandset paragraphpadding.
Youcanchoosetoapplythecolortothetext,theparagraph,ortheentiretable.To selectmorecolors,clicktheMoreColorsbutton.ThisopenstheColorwindow, whichallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
92
Tochangetheparagraphpadding,clickthePaddingbutton.Thisopensthe Paddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingis theamountofspacethatappearsbetweentheparagraphandtheborderofthe cell.
93
TableMenu
TheTablemenuallowsyoutoinserttables,adjustthetableproperties,andwork withrows,columns,andcellcontents.
InsertTable
OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutoset upatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexisting tablesintheTableDesigntab.
TableProperties
OpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsert NewTablewindow.Useittoeditthesettingsfortheexistingtable.
94
InsertColumnLeft
Insertsacolumntotheleftofwherethecursorispositioned.
InsertColumnRight
Insertsacolumntotherightofwherethecursorispositioned.
InsertRowAbove
Insertsarowabovewherethecursorispositioned.
InsertRowBelow
Insertsarowbelowwherethecursorispositioned.
DeleteRow(s)
Deletestherowwherethecursorispositionedortheselectedrow(s).
DeleteColumn(s)
Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).
Select
Allowsyoutoselecttheentiretable,arow,acolumn,oracell.
95
AlignCellContents
Allowsyoutochoosethealignmentofthecontentintheselectedcell:top,middle, bottom,ordefaultcellverticalalignment.
SplitCells
OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.
96
Youcanchoosetosplitthecellintoanumberofrowsandcolumnsthatyou specify,orifyouareworkingwithacellthatyoupreviouslymerged,youcansplit thecellsbackintotheiroriginalconfiguration.Ifyouwanttomergethecontents ofthecellbeforeyousplitthem,whichconsolidatesallyourcontentintoonecell andthensplitsitintomultiplecells,checktheMergebeforesplittingcheckbox.
MergeCells
Mergesthecontentsofthecellsintoonecell.
97
TableDesignerToolbar
TheTableDesignertoolbarcontainsbuttonsthatyoucanclicktoperformcertain commonlyusedactionsquickly.Rightclickingthetoolbaropensthismenu:
UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted) removesitfromtheworkspace.Itcanbereaddedbycheckingitagain.Selecting CustomizeopenstheCustomizewindow,whichallowsyoutocustomizethe maintoolbarorcreateyourown.
New
Createsanewblanktableforyoutoeditfromscratch.
Open
Allowsyoutoopenandworkwithapreviouslycreatedtable.
Save
Savesthetableyouarecurrentlyworkingon.Werecommendyousave frequentlytopreventlossincasesomethinghappenstoyourcomputer whileyouareworking.
Undo(Ctrl+Z)
Redo(Ctrl+Q)
Redoesthelastaction.TheRedofunctioncomesinhandywhenyou accidentallyusetheUndofunctionorchangeyourmindaboutundoingan action.
Cut(Ctrl+X)
Removestheselectedobjectortextfromthescreenandstoresitonthe Windowsclipboard.Itisthenavailabletobepasteduntilsomethingelseis cutorcopiedtotheclipboard.
98
Copy(Ctrl+C)
Makesacopyoftheselectedobjectortextandstoresthatcopyonthe Windowsclipboard.Theobjectisnowavailabletobepasteduntilanother objectiscutorcopiedtotheclipboard.
Paste(Ctrl+V)
TakestheobjectstoredontheWindowsclipboardandplacesitonthe page.Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucan pastethesameobjectasmanytimesasyouneed.
InsertImage
Opensawindowthatallowsyoutobrowseyourcomputerfortheimage youwouldliketoaddtoyourtable.
Bold
Boldstheselectedtextor,ifnotextisselected,appliesboldformattingto anytexttypedafterthelocationofthecursor.
Italic
Italicizestheselectedtextor,ifnotextisselected,appliesitalicformatting toanytexttypedafterthelocationofthecursor.
Underline
Underlinestheselectedtextor,ifnotextisselected,appliesunderline formattingtoanytexttypedafterthelocationofthecursor.
Font
OpenstheFontwindow,whichallowsyoutoselectthefont,style,effects, size,andcolorofyourtabletext.
99
OpenstheFillColorwindow,whichallowsyoutochoosethefillcolorand setparagraphpadding.
100
Youcanchoosetoapplythecolortothetext,theparagraph,ortheentire table.Toselectmorecolors,clicktheMoreColorsbutton.Thisopensthe Colorwindow,whichallowsyoutoadjustbrightnessandselectfroma widerrangeofcolors.
Tochangetheparagraphpadding,clickthePaddingbutton.Thisopens thePaddingwindow,whichallowsyoutosetthepaddinginpixels.The paddingistheamountofspacethatappearsbetweentheparagraphand theborderofthecell.
101
InsertTable
OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyou tosetupatable.WhenyouclickOK,thetablewillbeaddedaboveany preexistingtablesintheTableDesigntab.
TableProperties
OpenstheTablePropertieswindow,whichcontainsthesametoolsasthe InsertNewTablewindow.Useittoeditthesettingsfortheexistingtable.
ModifyTableCells
Thisexpandstoshowsomeoptionsyoucanusefor modifyingthecellsinyourtable.
InsertColumnLeft
Insertsacolumntotheleftofwherethecursoris positioned.
InsertColumnRight
Insertsacolumntotherightofwherethecursoris positioned.
102
InsertRowAbove
Insertsarowabovewherethecursorispositioned.
InsertRowBelow DeleteRow(s)
Insertsarowbelowwherethecursorispositioned. Deletestherowwherethecursorispositionedortheselectedrow(s).
DeleteColumn(s)
MergeCells SplitCells
Mergesthecontentsofthecellsintoonecell. OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.
103
TableDesignerRightClickMenu
Therightclickmenuallowsyoutoaccess commonlyusedfeaturesintheTableDesigner.
Undo(Ctrl+Z)
Redo(Ctrl+Q)
Redoesthelastaction.TheRedofunction comesinhandywhenyouaccidentallyusethe Undofunctionorchangeyourmindabout undoinganaction.
Cut(Ctrl+X)
Removestheselectedobjectortextfromthe screenandstoresitontheWindowsclipboard. Itisthenavailabletobepasteduntil somethingelseiscutorcopiedtothe clipboard.
Copy(Ctrl+C)
Paste(Ctrl+V)
PasteSpecial
Allowsyoutochoosetheformatofthepastedinformation.
104
Font
OpenstheFontwindow,whichallowsyoutoselectthefont,style,effects,size, andcolorofyourtabletext.
105
OpenstheFillColorwindow,whichallowsyoutochoosethefillcolorandset paragraphpadding.
Youcanchoosetoapplythecolortothetext,theparagraph,ortheentiretable.To selectmorecolors,clicktheMoreColorsbutton.ThisopenstheColorwindow, whichallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.
106
Tochangetheparagraphpadding,clickthePaddingbutton.Thisopensthe Paddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingis theamountofspacethatappearsbetweentheparagraphandtheborderofthe cell.
Bold
Boldstheselectedtextor,ifnotextisselected,appliesboldformattingtoanytext typedafterthelocationofthecursor.
Italic
Italicizestheselectedtextor,ifnotextisselected,appliesitalicformattingtoany texttypedafterthelocationofthecursor.
Underline
Underlinestheselectedtextor,ifnotextisselected,appliesunderlineformatting toanytexttypedafterthelocationofthecursor.
Table
Expandstodisplayoptionsforcreatingoreditingatable.
107

OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutoset upatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexisting tablesintheTableDesigntab. OpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsert NewTablewindow.Useittoeditthesettingsfortheexistingtable.
InsertTable
TableProperties
108

Insertsacolumntotheleftofwherethecursorispositioned.
InsertColumnLeft
InsertColumnRight InsertRowAbove
Insertsacolumntotherightofwherethecursorispositioned. Insertsarowabovewherethecursorispositioned.
InsertRowBelow DeleteRow(s)
Insertsarowbelowwherethecursorispositioned. Deletestherowwherethecursorispositionedortheselectedrow(s).
DeleteColumn(s)
Select
Allowsyoutoselecttheentiretable,arow,acolumn,oracell.
109
AlignCellContents
Allowsyoutochoosethealignmentofthecontentintheselectedcell:top,middle, bottom,ordefaultcellverticalalignment.
SplitCells
OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.
110
MergeCells
Mergesthecontentsofthecellsintoonecell.
111
InsertFormWindow
TheInsertFormwindowallowsyoutosettheformmethod,MIMEpostmethod, andURLwheretheformresultswillbedirected.Thisinformationisimportantif youwantyourformtoworkproperly! ForcomprehensiveinformationaboutcreatingandmodifyingHTML forms,readtheW3SchoolstutorialHTMLFormsandInput (http://www.w3schools.com/html/html_forms.asp).
FormMethod
Choosehowyouwanttotransfertheformdata.Postsendsittotheserverandget pullsitfromtheserver.
MIMEPostMethod(Enctype)
Selectthetypeofapplicationthatwillprocesstheformdata.
FormContentsGototheFollowingURL
TheURLofthescriptthatactuallyprocessestheform.Formore informationaboutformscriptsandtodownloadfreeformprocessing scripts,visithttp://www.hotscripts.com.
112
StyleSheetWizard
TheStyleSheetWizardallowsyoutosetthevariouspropertiesofyourstylesheet. Forcomprehensiveinformationaboutcreatingandmodifyingstyle sheets,readtheW3SchoolstutorialCSSIntroduction (http://www.w3schools.com/css/css_intro.asp).
Font tab Color and Background tab Alignment tab Margins tab Padding tab Border tab
113
FontTab
TheFonttaballowsyoutosetpreferencesforthefontoftheclassorHTMLtag youaremodifyingforyourstylesheet.
FontFamily
Selectthedesiredfontfamilyfromthesetwodropdownmenus.Firstisthe preferredfont,andcantechnicallybeanyfontyouwant.However,ifyoudonot chooseaWebsafefont,itmaynotdisplaycorrectlyonallcomputers.We recommendmakingSecondaWebsafefont.Youcanalsoselectagenericfont, whichalwaysdisplayscorrectly,fromtheGenericdropdownlist. Websafefontsinclude: Times New Roman Arial Impact Trebuchet MS Arial Black Comic Sans MS Verdana Courier New Georgia
114
FontSize
Selectthesizeofyourfontusingoneoffourmeasurements:absolute,relativeto thecontainingelement,pixels,orapercentageofthecontainingelement.
Weight
Thelightnessordarknessofyourfont,with100beingthelightestand900being thedarkest.
Style
Selectthefontstyle:normal,italic,oroblique.
Decoration
Selectthefontdecoration:none,underline,overline,strikethrough,orblink.
Transform
Choosewhethertoapplycapitalization,uppercaseorlowercaseletters,ornone.
Variant
Selectthevariant:normalorsmallcaps.
115
ColorandBackgroundTab
TheColorandBackgroundtaballowsyoutosetthetextandbackgroundcolorfor theclassorHTMLtagyouaremodifyingforyourstylesheet.
TextandBackgroundColor
Tochangethetextorbackgroundcolor,clicktheassociatedcolorswatch.This opensadropdownlistof40basiccolors.
116
BackgroundImage
Clickthefoldericontobrowseyourcomputerforthedesiredbackgroundimage.
117
Repeat
Ifyouaddabackgroundimage,youcanrepeatithorizontallyand/orvertically.
Attachment
Selectscrollifyouwanttheimagetoalwaysappearinthesameplaceevenwhen thepageisscrolledupordown.Selectfixedifyouwanttheimagetoappearina fixedplaceonthepage.
Alignment
Usethesefieldstospecifytheexactalignmentoftheimage.Youcansetittothe defaultlocation,oruseapercentage,anabsolutepixellocation,orkeywords.
118
AlignmentTab
TheAlignmenttaballowsyoutosetthealignmentfortheclassorHTMLtagyou aremodifyingforyourstylesheet.
Indentation
Thespacebetweenwhereyourelementstartsandtheleftedgeofthepage.You cansetittothedefaultoradjusttheindentationinpixelsorapercentage.
LineHeight
Theverticalspacebetweentwolinesoftext.Youcansetittothedefaultoradjust theheightinpixelsorapercentage.
119
Alignment
Usetheseoptionstosetwherethecontentintheclassortagappearsonthepage. Settheverticaland/orhorizontalalignmentbykeywordorpercentage.Ifyouuse theseoptionstosetthealignment,youcannotusethefloatproperty.
WordandLetterSpacing
Theamountofspaceinpixelsbetweenwordsandletters.
Float
Choosewhetherthecontentintheclassortagfloatstotherightorleft,ordoes notfloatatall.Ifyouusethisoptiontosetthealignment,youcannotusethe alignmentproperties.
Clear
Choosethesideofthefloatedelementwhereotherfloatingelementswillnot appear.Forinstance,ifyouselectleft,nofloatedelementswillappeartotheleftof thespecifiedfloatedelement.
120
MarginsTab
TheMarginstaballowsyoutosetthemargins,width,andheightinpixelsora percentageofthecontainingelementfortheclassorHTMLtagyouaremodifying foryourstylesheet.
Marginreferstothewhitespacesurroundinganelement.Whenthemarginis increasedforaselectedelement,morespacewillappearbetweentheelementand theobjectssurroundingit.
121
PaddingTab
ThePaddingtabletsyousetthepaddinginpixelsorapercentageofthe containingelementfortheleft,right,top,andbottomoftheclassorHTMLtag youaremodifyingforyourstylesheet.
Paddingreferstothewhitespacewithinanelement.Whenpaddingisincreased foraselectedelement,morespacewillappearbetweenitsouteredgesandthe objectscontainedwithinit.
122
BorderTab
TheBordertaballowsyoutosetthebordersfortheclassorHTMLtagyouare modifyingforyourstylesheet.
Size
Thesizeoftheborderinpixelsorapercentageofthecontainingelement.
Style
Choosefromeightborderstyles.
Color
Tochangethetextorbackgroundcolor,clicktheassociatedcolorswatch.This opensadropdownlistof40basiccolors.
123
124
TheCSSMenuDesignerallowsyoutocreateaCSSnavigationmenu. ForadetailedtutorialabouthowtoaddamenuusingtheCSSMenu Designer,readHowtoUsetheCSSMenuDesigner.Ifyoure wonderingwhathappenedtotheDHTMLMenuBuilder,readWhat happenedtotheDHTMLMenuBuilder?
CSSMenuDesigner
Itisextremelyimportanttoremoveanyoldmenucodefromyour documentbeforeinsertinganewmenu.Ifyoudont,yourmenuwillnot work.Toremoveyouroldcode,clickSaveMenutosaveanychangesto yourmenuthatyouhavemade,andthenclickCancel. IfyouhavealreadyinsertedaCSSmenu,removethefollowingcodefrombetween your<head></head>tags: <link rel="stylesheet" type="text/css" href="css/menumenu.css" media="screen"> css/menumenu.cssisthedefaultnameandlocationofthemenustylesheet.If youhavechangedthenameorlocationofthisstylesheet,thisfilepathwillreflect yourchanges.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.Be suretoremovethe<ul class...></ul> tagsandallthecodebetweenthem. menumenuisthedefaultnameforthemenuclass.Ifyouhavechangedthe nameofthemenu,thenameyouspecifiedwillappearhereinstead.page1.html andpage2.htmlarethelinksyouspecifiedforthemenuitems.MenuItem1and MenuItem2arethenamesyouspecifiedforthemenuitems. IfyouneedtoreplaceaDHTMLmenu,removethecodebetween<script type='text/javascript'>and</script>.Thiscodeshouldbelocatedjust belowthe<body>tag. Onceyouhaveremovedyouroldmenucode,reopentheCSSMenuDesigner, openyoursavedmenu,andtheninsertitintoyourpagebyclickingOK.
OpenMenu
Clickthisbuttontoopenapreviouslycreatedmenu.
SaveMenu
Clickthisbuttontosaveyourmenu.Werecommendyousavefrequentlyto preventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
Preview
Clickthisbuttontopreviewyourmenuinyourdefaultbrowser.
OK
Clickthisbuttontoinsertyourmenucodeintothecurrentdocument.Thisopens twowindowscontaininginformationaboutyourmenucode:
126
Thiswindowremindsyouthatyoumustremoveallyouroldmenucodebefore insertingnewcode. Thisstepisveryimportant!Ifyoudonotremoveyouroldmenucode, yourmenuwillnotworkcorrectly. Toexitthiswindow,clickOK.ThisopenstheSaveMenuwindow,whichallows youtosaveyourmenutoworkwithitlater.
127
Weonlyrecommendsavingyourmenuifyouhavealreadyremovedyourold menucode.ClickingSaveopensawindowthatallowsyoutochoosethelocation whereyouwouldliketosaveyourmenu.
Onceyouhavesavedyourmenu,thecodewillautomaticallybeinsertedintoyour page. Ifyouhaventremovedyouroldmenucode,clickCancel.Thisbringsyoubackto theCSSMenuDesigner.Fromhere,youcansaveyourmenuwithout automaticallyinsertingthecodeintoyourdocument.Fordetailedinformation aboutthisprocess,refertotheinstructionsabove.
Cancel
ClickthisbuttontoabandonanyunsavedchangestoyourmenuandexittheCSS MenuDesigner. FormoreinformationaboutthedifferentsectionsoftheCSSMenuDesigner,click oneoftheselinks: Menu Designer tab Menu Colors tab Options tab
128
MenuDesignerTab
TheMenuDesignertaballowsyoutoaddandconfiguremenuitems.
YourMenu
Allowsyoutopreviewthestructureofyourmenu.
AddRootItem
Addsarootitemtoyourmenu.Rootitemsmakeupthemainpartofthemenu thatappearsatalltimes.
AddSubitem
Addsasubitemtotheselectedrootitem.Asubitemappearswhenyouclickor mouseovertherootitem.Youcanadduptothreelevelsofsubitems.
AddSibling
Addsanotheritemonthesamelevelastheselecteditem.
DeleteItem
Deletestheselecteditem.
Text
Enterthetextyouwouldliketoappearontheselectediteminthisfield.
129
Link
Enterthelinkyouwouldlikethecurrentlyselecteditemtopointtointhisfield.
130
MenuColorsTab
TheMenuColorstaballowsyoutosetthecolorsforyourmenu.Youcanpreview anychangesyoumakeintheMenuColorSamplearea.
Tochangethetextorbackgroundcolor,enterahexcodeorclicktheassociated colorswatch.Thisopensadropdownlistof65basiccolors.
131
BackgroundColor
Thebackgroundcolorofthemenu.
MouseoverBackgroundColor
Thebackgroundcolorofthemenuwhentheuserholdstheirmouseoverit.
FontColor
Thecolorofthemenutext.
MouseoverFontColor
Thecolorofthemenutextwhentheuserholdstheirmouseoverit.
132
BorderColor
Thecolorofthemenuborder.
UseMainMenuColors
Clickthisbuttonifyouwantthesubmenuitemstohavethesamecolorschemeas themainmenuitems.
133
OptionsTab
TheOptionstaballowsyoutoworkwithmenuoptionsnotpertainingtotheitems andthecolors.
Orientation
Choosebetweenahorizontalandverticallayout.
MarginTopandLeft
Setthetopandleftmargininpixelsinthesefields.Marginreferstotheblank spacesurroundingthemenu.Whenthemarginisincreased,morespacewill appearbetweenthemenuandtheobjectssurroundingit.
BorderWidth
Enterthewidthofthemenuborderinpixelsinthisfield.
FontFace,Size,andStyle
Choosethefontandsizeofthemenuitemtext,aswellaswhetheritisboldor italicized.
MenuandSubmenuTextAlignment
Choosehowyouwantthetextinthemenutobealigned:totheleft,right,or center.
134
TopandLeftPadding
Setthetopandleftpaddinginpixelsinthesefields.Paddingreferstotheblank spacewithinthemenu.Whenthepaddingisincreased,morespacewillappear betweenthemenutextandtheouteredges.
UseFixedWidthforMenuItems
Selectthischeckboxifyouwouldliketouseafixedwidthforthemenuitems.
ItemWidth
Setthefixeditemwidthinpixelshere.
135
FormatMenu
TheFormatmenuallowsyoutoformat yourtext.Ifyouhaveselectedtext,the tagswillbeappliedtotheselectedtext. Otherwise,theywillbeinsertedonthe page.
FontWizard
OpenstheFontWizard,whichallows youtochoosetheattributesforafont tag.
FontSizes
Selectfromfontsizes1(8pt)to7(36pt) oradjustthesizeupordownone increment.
FontColor
OpenstheColorwindow,whichallows youtochooseacolorbyselectingitfrom therainbowgradientorbymanually enteringvariousvaluesassociatedwith thedesiredcolor.
HeaderSizes
Insertsheadertags(<h1></h1> <h6></h6>)orappliesthemtoselected text.
Bold(Ctrl+B)
Insertsboldtags(<b></b>)orapplies themtoselectedtext.
Italic(Ctrl+I)
Insertsitalictags(<i></i>)orapplies themtoselectedtext.
Underline(Ctrl+U)
Insertsunderlinetags(<u></u>)or appliesthemtoselectedtext.
136
Strikethrough
Insertsstrikethroughtags(<strike></strike>)orappliesthemtoselected text.
Strong
Insertsstrongtags(<strong></strong>)orappliesthemtoselectedtext.
Emphasis
Insertsemphasistags(<em></em>)tagsorappliesthemtoselectedtext.
Subscript
Insertssubscripttags(<sub></sub>)tagsorappliesthemtoselectedtext.
Superscript
Insertssuperscripttags(<sup></sup>)tagsorappliesthemtoselectedtext.
Preformatted
Insertspretags(<pre></pre>)tagsorappliesthemtoselectedtext.Pretags preservetheformattingofthetexttheysurround,includingextraspacesand indenting.
Left
Insertsadivtagwiththealignattributesettoleft(<div align=left></div>)orappliesittotheselectedtext.
Center
Insertsadivtagwiththealignattributesettocenter(<div align=center></div>)orappliesittotheselectedtext.
Right
Insertsadivtagwiththealignattributesettoright(<div align=right></div>)orappliesittotheselectedtext.
Justify
Insertsadivtagwiththealignattributesettojustify(<div align=justify></div>)orappliesittotheselectedtext.Thisalignsyour textsoeachlineisthesamelength.
Indent(Shift+Ctrl+.)
Indentsyourcodestartingwherethecursorispositioned.Thischangeappears onlyintheCodeEditorandwillnotberenderedbyabrowser.Itisusedtohelp organizeyourcode.
137
Unindent(Shift+Ctrl+,)
Unindentsyourindentedcodestartingwherethecursorispositioned.Thischange appearsonlyintheCodeEditorandwillnotberenderedbyabrowser.Itisused tohelporganizeyourcode.
Paragraph(Ctrl+Enter)
Insertsparagraphtags(<p></p>)tagsorappliesthemtoselectedtext.
Break
Insertsabreaktag(<br />).
NonBreakingSpace
Insertsanonbreakingspacecharacterentity( ),whichisrenderedby browsersasaspace.Thiscanbeusedtoinsertextraspaces,sinceHTMLonly allowsforonespacebetweeneachword.
138
FontWizard
TheFontWizardallowsyoutocreateafonttagwithdetailedattributes.Youcan previewhowyourtextlooksinthePreviewTextarea. Foradetailedtutorialabouthowtousetheseoptions,readHowto ChangetheAppearanceofText.
Fonts
Selectthedesiredfontfamilyfromtheprovidedlistandapplythemtothefonttag byclickingAddasFont1,2,or3.Font1isthepreferredfont,andcantechnically beanyfontyouwant.However,ifyoudonotchooseaWebsafefont,itmaynot displaycorrectlyonallcomputers.WerecommendmakingFont2and/orFont3a Websafefont.Youcanalsoselectagenericfont,whichalwaysdisplayscorrectly, fromtheGenericdropdownlist. Websafefontsinclude: Times New Roman Arial Impact Trebuchet MS Arial Black Comic Sans MS Verdana Courier New Georgia
139
Effects
Selectfrombold,italic,strikethrough,orunderline.
TextPosition
Selectwhetheryourtextwillappearnormallyorasasubscriptorsuperscript.
Size
Selectafontsizefrom1(8pt)to7(36pt).
Color
Toselectacolorforyourtext,clicktheassociatedcolorswatch.Thisopensadrop downlistof40basiccolors.
140
ToolsMenu
TheToolsmenucontainstools youcanusetoworkwithyour Webpageandtheprogram.
TestWithDefault Browser(Ctrl+F9)
OpensyourWebsiteinthe browseryouhavesetasyour defaultbrowser.Thisisdone outsideoftheHTMLEditor.
AdditionalBrowsers
Expandstoshowalistofother browsersyoucanusetopreview yourWebsite. Toconfigure additionalbrowsers,go toTools> Preferences> BrowserTestingtab.It'sgood Webdesignpracticetotestyour Websiteinseveraldifferent browserstoensurecross browsercompatibility.Themost popularbrowsersareFirefox,InternetExplorer,Opera,GoogleChrome,andSafari.
FavoriteBrowser(Ctrl+F5)
OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.
Applications
Expandstoshowalistofexternalapplicationsyoucanopenfromwithinthe HTMLEditor. Toaddexternalapplications,gotoTools>Preferences>Applications tab.
OtherSoftwareandServices
ExpandstodisplayalistofothersoftwareandservicesofferedbyCoffeeCup Software.
141
FreshIngredientsforYourWebsite
OpenstheHTMLEditorThemeShop (https://www.coffeecup.com/store/themes/htmleditor/)inyourdefault Webbrowser. OpenstheCoffeeCupGraphicsShop (https://www.coffeecup.com/store/graphics/)inyourdefaultWeb browser. OpenstheCoffeeCupSoftwarepage (http://www.coffeecup.com/software/)inyourdefaultWebbrowser.
GetMoreGraphics
GetMoreWebsiteSoftware
SiteSpider
OpensCoffeeCupWebsiteSpider,whichcontainsvarioustoolsandutilitiesthat provideinformationyoucanusetooptimizeyourWebsite.
CodeCleaner
OpenstheCodeCleaner,whichallowsyoutosetyourpreferencesforhowyou wouldlikeyourcodetobeformatted,andthenrunsthecodecleaner. Youcanundoanychangesmadeduringthecodecleaningusingthe Undofunction.
WebsiteColorSchemer
OpensthebuiltincopyofWebsiteColorSchemer,whichallowsyoutoselecta colorschemeforyourWebsite.FormoreinformationabouthowtouseWebsite ColorSchemer,consultitsdocumentation.
142
ImageMap
OpensthebuiltincopyofImageMapper,whichallowsyoutocreateanimage mapforyourWebsite.FormoreinformationabouthowtouseImageMapper, consultitsdocumentation.
SearchforUndocumentedCharacters
Checksyourdocumentforanyundocumentedspecialcharacters.
Ifitdiscoversanundocumentedcharacter,itgivesyoutheoptiontoreplaceit withtheproperHTMLentity.Whenitisfinished,youwillseeamessagethatsays Finished! Toaddcharacterentitiesforanyspecialcharacters,usetheCharacters tabintheResourcebrowseronthelefthandsideoftheprogram.
CheckSpelling
Checksthespellinginyourdocument.Iftherearenospellingerrors,awindow appearsthatreads,Thespellingcheckiscomplete.
143
Iftherearemisspelledwords,theSpellingwindowopens,allowingyoutoreview andchangethespellingerrors,andtoadjustspellingoptions.
AutoSpellCheck
Putsaredunderlineunderanymisspelledwords.
SpellCheckerOptions
OpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspelling optionsandaddcustomdictionaries.
Thesaurus
OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselected word.
ToolbarsandMenus
Expandstodisplayoptionsforcustomizingthetoolbarsandmenuswithinthe program. Foradetailedtutorialaboutcreatingacustomtoolbar,readHowto CreateaCustomToolbar.
144
Customize
OpenstheCustomizewindow,whichallowsyoutocustomizetheprogram toolbars.
SaveCurrentConfigurationAs
Allowsyoutosavethecurrenttoolbarandmenuconfiguration.Thisisusefulif youhavecreatedacustomconfigurationyoumaywishtouselater.Whenyousave aconfiguration,itwillappearbeneathDefaultinthismenu.
Default
Selectthistoswitchtothedefaulttoolbarandmenuconfiguration.
DocumentDisplayProperties
OpenstheCustomizationtabofthePreferenceswindow,whichallowsyouto customizehighlightingandtoolbaroptions.
Preferences
OpensthePreferenceswindow,whichallowsyoutoadjusttheprogram preferences,includingworkingwiththeappearanceandfunctionoftheprogram, settingfiletypestheprogramcanopen,addingbrowsersandexternalapplications, settingdefaultfolders,andcustomizinghighlightingandtoolbaroptions.
145
CoffeeCupWebsiteSpider
CoffeeCupWebsiteSpidercontainsvarioustoolsandutilitiesthatprovide informationyoucanusetooptimizeyourWebsite.
FormoreinformationonhowtousetheWebsiteSpider,refertoits documentation,availableunderHelp>HelpContents.
146
CodeCleaner
TheCodeCleanerallowsyoutosetyourpreferencesforhowyouwouldlikeyour codetobeformatted,andthenrunsthecodecleaner.Youcanundoanychanges madeduringthecodecleaningusingtheUndooption. Mouseovereachfunctionforadetaileddescriptionofwhatitdoes.The descriptionappearsintheyellowpaneatthebottomofthewindow. ForadetailedtutorialaboutusingtheCodeCleaner,readHowtoUse theCodeCleaner.
LayOut,Fix,andConvertTab
TheLayOut,Fix,andConverttaballowsyoutoadjustthelayoutandformatof yourcode.Holdingyourmouseoveranoptionopensadescriptionintheyellow paneatthebottomofthewindow.
147
DocumentTab
TheDocumenttaballowsyoutoworkwiththeDOCTYPEandcharacterencoding. Holdingyourmouseoveranoptionopensadescriptionintheyellowpaneatthe bottomofthewindow.
148
ASPandXMLTab
TheASPandXMLtaballowsyoutosetoptionspertainingtoASP,HTML,and XML.Holdingyourmouseoveranoptionopensadescriptionintheyellowpane atthebottomofthewindow.
149
WebsiteColorSchemer
TheWebsiteColorSchemerisusedtogenerateanattractivecolorschemeforyour Website.
FormoreinformationonhowtousetheWebsiteColorSchemer,refertoits documentation,availableunderHelp>HelpContents(F1).
150
ImageMapper
TheImageMapperisusedtocreateaninteractiveimagemap.
FormoreinformationonhowtousetheImageMapper,refertoits documentation,availableunderHelp>HelpContents.
151
SpellingWindow
TheSpellingwindowallowsyoutoreviewandchangethespellingerrors,andto adjustspellingoptions.
NotFound
Awordnotfoundinthedictionary.
ReplaceWith
TypethereplacementwordinthisfieldorselectawordfromtheSuggestionarea. ClickChangeorChangeAlltoreplacethemisspelledwordwiththewordinthis field.
Suggestions
Spellingsuggestionsforthemisspelledword.
Undo
Undoesthelastchangeyouhaveperformed.
Options
Ignore
Ignoresthemisspelledwordanddisplaysthenextwordnotfoundinthe dictionary.
IgnoreAll
Ignoresallinstancesofthemisspelledwordanddisplaysthenextwordnotfound inthedictionary.
152
Change
ReplacesthemisspelledwordwiththewordintheReplaceWithfield.
ChangeAll
ReplacesallinstancesofthemisspelledwordwiththewordintheReplaceWith field.
Add
AddsthewordintheNotFoundfieldtothedictionary.
AutoCorrect
AddsthewordsintheNotFoundandReplaceWithfieldstotheAutoCorrect dictionary.IftheAutoSpellCheckoptionisenabled,themisspellingwill automaticallybereplacedwiththereplacementwordwhenyouruntheCheck Spellingfunction. ToenableAutoCorrect,gotoTools>AutoSpellCheck.
153
SpellingOptionsWindow
TheSpellingOptionswindowallowsyoutoadjustyourspellingoptionsandadd customdictionaries.
Options
Selecttheoptionsyouwouldliketoenablewhencheckingthespellinginyour document.
Dictionaries
Liststheavailabledictionaries.Bydefault,11languagedictionariesareincludedin theprogram.Youmayselectasmanyasyouwant.
LocateDictionaries
Selectingthisoptionopensawindowthatallowsyoutobrowseyourcomputerfor anotherdictionaryfile. FormoreinformationabouthowtoadddictionaryfilestotheHTML Editor,readHowdoIimportanotherlanguagedictionaryintothe HTMLEditor?
154
CustomDictionary
Ifyouhaveaddedacustomdictionaryandwouldliketouseitinsteadoforin additiontothedictionaryordictionariesselectedintheDictionariesarea,select itfromthisdropdownlist.
Dictionaries
OpenstheDictionarieswindow,whichallowsyoutoadd,edit,anddeletecustom dictionaries.
Edit
OpenstheEdit.aduwindowfortheselecteddictionaryfile,whichallowsyouto addwords,autocorrectpairs,andexcludedwords.
Delete New
Deletestheselecteddictionary. OpenstheNewCustomDictionarywindow,whichallowsyoutoenterthename ofanotherdictionaryfileyouwouldliketoaddtoyourcustomdictionaries. FormoreinformationabouthowtoadddictionaryfilestotheHTML Editor,readHowdoIimportanotherlanguagedictionaryintothe HTMLEditor?
ResetDefaults
ResetstheDictionariesareatoincludeonlythe11defaultdictionaries.
155
Edit.aduWindow
TheEdit.aduwindowallowsyoutoaddwords,autocorrectpairs,andexcluded wordstotheselecteddictionaryfile.
AddedWordsTab
Allowsyoutoaddwordstothedictionaryfileordeletecustomwordsyouhave added.
156
AutoCorrectPairsTab
Allowsyoutoaddautocorrectpairstothedictionaryfileordeletecustomauto correctpairsyouhaveadded.
IftheAutoSpellCheckoptionisenabled,thewordintheReplacecolumnwill automaticallybereplacedwithwordintheWithcolumnwhenyouruntheCheck Spellingfunction. ToenableAutoCorrect,gotoTools>AutoSpellCheck.
157
ExcludedWordsTab
Allowsyoutoaddwordsthatwillalwaysbeconsideredincorrectwhenrunning spellcheck,ortodeleteanyexcludedwordsyouhaveadded.
158
CustomizeWindow
TheCustomizewindowallowsyoutocustomizetheprogramtoolbars. Foradetailedtutorialaboutcreatingacustomtoolbar,readHowto CreateaCustomToolbar.
Toolbars tab Commands tab Options tab
159
ToolbarsTab
TheToolbarstaballowsyoutoaddoreditprogramtoolbars.Thegrayedout toolbarsarenotavailabletobeedited.
Toolbars
Displaysalistofthetoolbarsavailableintheprogram.Selectingthecheckboxfora toolbardisplaysitintheHTMLEditorworkspace,anddeselectingthecheckbox removesit.
New
OpenstheAddToolbarwindow,whichallowsyoutonamethenewtoolbar.
160
Whenyoucreateanewtoolbar,itopensintheHTMLEditorworkspace.
Rename
OpenstheRenameToolbarwindow,whichallowsyoutorenametheselected toolbar.
Delete
Deletestheselectedtoolbar.
Reset(MainToolbarOnly)
Resetsthemaintoolbartoitsdefaultconfiguration.
161
TheCommandstaballowsyoutoviewandaddcommandstoyourcustomtoolbar ortothemaintoolbar.Toaddacommand,dragitfromtheCommandslisttothe desiredtoolbaranddropitthere.
CommandsTab
Categories
Broadcategoriestowhichindividualcommandsbelong.Categoriescannotbe addedtoatoolbar.
Commands
Individualcommandsthatcanbeaddedtoatoolbar.Toaddacommand,dragit tothedesiredtoolbaranddropitthere.
162
OptionsTab
TheOptionstaballowsyoutocustomizeotheraspectsofyourtoolbars.
Selectthischeckboxifyouwantthemostrecentlyusedcommandstoappearat thebeginningofyourcustommenuortoolbar.
MenusShowRecentlyUsedCommandsFirst
ShowFullMenusAfteraShortDelay
Selectthischeckboxifyouwantdropdownmenusinyourcustommenuor toolbartoappearafterashortdelay.
ResetMyUsageData
Resetsyourusagedatasoyourcommandsappearintheorderyouspecified insteadofbeingrankedinorderofuse.
163
LargeIcons
Increasesthesizeofthemenuicons.
ShowTooltipsonToolbars
Selectthischeckboxtodisplaytooltipswhenyoumouseovertoolbaricons.
ShowShortcutKeysinTooltips
Selectthischeckboxtodisplaykeyboardshortcutsinthetoolbartooltips.
MenuAnimations
Selectthedesiredmenuanimationfromthisdropdownlist.
164
PreferencesWindow
ThePreferenceswindowallowsyoutoadjustoptionsforworkingwiththe programandyourcode. General tab Files tab Browser Testing tab Applications tab Folders tab Customization tab
165
GeneralTab
TheGeneraltaballowsyoutosetdisplayandfunctionalpreferencesfortheHTML Editor.
ApplicationStartup
Selectwhetheryouwouldlikeaspecificdocumenttoopenautomaticallyinthe Editoronstartup.YoucanalsochoosewhethertheMyWebsitesorMy ComputertabwillbeopenintheResourcebrowser.Finally,youcanspecify whetherthetipofthedayandtheWelcomewindowwillappear.
InitialDocumentMode
SelectwhetheryouwanttheVisualorCodeeditortoopenautomaticallyon startup.YoucanalsochoosewhethertoshoworhidetheVisualEditorand/or Previewtab.
InitialDocumentType
Selecttheinitialdocumenttypethatwillbeusedonstartupandwhenyoucreatea newpagefromthisdropdownlist.
ProperCaseConversion
Whenconvertingtopropercase,anylettersafterthecharactersenteredinthis fieldwillbecapitalized.
166
Toconvertyourdocumentoraselectionoftextandcodetopropercase,goto Edit>ConverttoProperCase.
Miscellaneous
Selectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapply.
WhenStartingaNewWebsiteProject
SelectwhatyouwouldliketheprogramtodowhenyoucreateanewWebsite Project.
167
FilesTab
TheFilestaballowsyoutospecifythefileextensionsyoucanopenandeditinthe HTMLEditor.Formatyourentrieswithanasteriskfollowedbyaperiodanda validextension(e.g.*.html,*.css,*.php,etc.)
FileExtensions
SpecifythevalidfileextensionsyouwouldliketoopenandeditintheEditorin thesefields.Toresetthembacktotheprogramdefaults,clicktheResetbutton.
UnixFiles
SpecifyanyfileextensionsyouwouldliketosaveasUnixfiles.
FileExtensionsThatWillNotBeOpenedinVisualEditor
SwitchingtotheVisualEditormaycauseunwantedformattinginsomedocument types.Usethisfieldtospecifyanyfileextensionsyoudonotwanttoopeninthe VisualEditor.Thisensuresthatyouwillnotaccidentallyopenthemandlosethe formattingofyourcode.
168
BrowserTestingTab
TheBrowserTestingtaballowsyoutoaddbrowsersyoucanusetopreviewyour work.It'sgoodWebdesignpracticetotestyourWebsiteinseveraldifferent browserstoensurecrossbrowsercompatibility.Themostpopularbrowsersare Firefox,InternetExplorer,Opera,GoogleChrome,andSafari. Toaccessanybrowsersyouadd,gotoTools>AdditionalBrowsers.
SelectaBrowser
SelecttheslotunderTools>AdditionalBrowserswhereyouwouldlikethe browsertoappear.AdditionalBrowser1canbeaccessedusingthekeyboard shortcutCtrl+F5.
DisplayName
Enterthedesireddisplaynameforthebrowser.
ApplicationLocation
UsetheBrowseicontobrowseyourcomputerforthe.exefileforthebrowseryou wanttoadd.Toremoveabrowser,clicktheRemoveicon.
169
ApplicationsTab
TheApplicationstaballowsyoutoaddexternalapplicationsthatcanbeopened fromwithintheHTMLEditor. Toaccessanyapplicationsyouhaveadded,gotoTools>Applications.
Description
AcustomdescriptionoftheapplicationthatwillappearunderTools> Applications.Thisisapersonalreminder,soyoucannameitanythingyouwant.
CustomApplication.exe
UsetheBrowseicontobrowseyourcomputerforthe.exefilefortheapplication youwanttoadd.Toremoveanapplication,clicktheRemoveicon.
170
FoldersTab
TheFolderstaballowsyoutoselectdefaultfoldersusedwithintheHTMLEditor.
DefaultWebsiteProjectsFolder
ClicktheBrowseicontoselectthedefaultfolderwhereyourWebsiteProjectsare saved.
DefaultWorkingFolder
ClicktheBrowseicontoselectthedefaultWorkingfolder.Ifyouareusinga WebsiteProject,bydefault,theWorkingfolderisthesameastheWebsiteProjects folder.Otherwise,theWorkingfolderiswhereyousaveyourWebsitefiles.
DefaultImageFolder
ClicktheBrowseicontoselectthedefaultImagefolder.Whicheverfolderyou selectwillbeopenbydefaultintheInsertImagewindow.
DefaultBackgroundImageFolder
ClicktheBrowseicontoselectthedefaultBackgroundImagefolder.Whichever folderyouselectwillbeopenbydefaultinthewindowthatappearswhenyouadd abackgroundimageintheDocumentPropertieswindow.
171
DefaultSoundsFolder
ClicktheBrowseicontoselectthedefaultSoundsfolder.Whicheverfolderyou selectwillbeopenbydefaultintheInsertSoundwindow.
OptionalPrompts
Theseoptionspromptyouwhenyouaddanimageorinsertapageanditisnot locatedinyourWorkingfolder.IfyouareusingaWebsiteProject,bydefault,the WorkingfolderisthesameastheWebsiteProjectsfolder.Otherwise,theWorking folderiswhereyousaveyourWebsitefiles.
172
CustomizationTab
TheCustomizationtaballowsyoutocustomizehighlightingandtoolbaroptions.
Documents
Selectthedocumenttypewhosehighlightingschemeyouwanttomodifyfrom thisdropdownlist.
ModifyHighlighting
OpenstheHighlightingOptionswindow,whichallowsyoutomodifythe highlightingschemefortheselecteddocumenttype.Thisschemeappliesonlyto thecodeintheEditorasapersonalreminder,andwillnotberenderedbyWeb browsers.
ModifyOptions
OpenstheEditorOptionswindow,whichallowsyoutosetdisplaypreferences fortheCodeEditor.
ToolbarCustomization
Liststhecustomtoolbarsyouhaveconfiguredandallowsyoutodeleteorrename them. Tocreateacustomtoolbar,gotoTools>ToolbarsandMenus> Customize.
173
HighlightingOptionsWindow
TheHighlightingOptionswindowallowsyoutomodifythehighlightingscheme forthedocumenttypeselectedintheCustomizationtabofthePreferences window.ThisschemeappliesonlytothecodeintheEditorasapersonalreminder, andwillnotberenderedbyWebbrowsers. Formoreinformationaboutworkingwithhighlightingoptions,read AdjustingCodeHighlightingOptions.
CurrentLanguageStyle
Displaysthedocumenttypeyouareediting.
174
Element
Liststhedifferentelementsofthecurrentlanguage.Selectanelementtoadjustits highlightingoptions.SelectingDefaultTextgivesyoutheoptiontoapplythe defaultsettingstootherelements.
ForegroundandBackgroundColor
Tochangethecolorofeitheroftheseelements,clicktheassociatedcolorswatch. Thisopensadropdownlistof20basiccolors.
Tobrowseevenmorecolors,clickOther.ThisopenstheColorwindow,which allowsyoutochooseacolorbyselectingitfromtherainbowgradientorby manuallyenteringvariousvaluesassociatedwiththedesiredcolor.
175
TextAttributes
Choosefrombold,italic,orunderline.
UseDefaultsFor
SelecttheForegroundorBackgroundcheckboxesifyouwanttoapplythe DefaultTextsettingstotheselectedelement.
Font
Selectthedesiredfontfacefromthisdropdownlist.
Size
Selectthedesiredsizefromthisdropdownlist.
Charset
176
EditorOptionsWindow
TheEditorOptionswindowallowsyoutosetdisplaypreferencesfortheCode Editor.
PrintOptions
Selectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapply whenprintingadocument.
GeneralOptions
Selectthecheckboxesforanyofthedisplaypreferencesyouwouldliketoapplyin theCodeEditor.
VisibleRightMargin
Selectwhethertodisplayavisiblerightmarginandthenspecifyitswidthinpixels.
177
VisibleGutter
Selectwhethertodisplayavisiblegutterandthenspecifyitswidthinpixels.A gutterisabartotheleftofthecodewherelinenumbers,bookmarks,and charactersthatrepresentlinebreaksaredisplayed.
BlockIndentStepSize
Numberofspacesautomaticallyusedtoindentthenextlineofcodewhennesting elements.
WordWrapColumn
Thecolumnatwhichwordwrappingoccurs.Enter0ifyouwantthewordwrapto besettothewidthofthewindow.
ShowWordWrapColumn
Selectthischeckboxifyouwanttodisplaythewordwrapcolumn.
TabColumn
Thetabstopswithintheeditingenvironment.
TabStop
ThenumberofspacesthecursormoveswhenyouclicktheTabkey.
178
TheWindowmenuallowsyoutoswitchbetweentheopenfiles.Selectingoneof thefilesopensitinwhichevereditor(CodeorVisual)isopen. YoucanalsoswitchbetweenopenfilesusingthetabsintheStatusbar atthebottomoftheprogram.
WindowMenu
179
HelpMenu
TheHelpmenuallowsyoutoaccessthe differenthelpoptionsavailableinthe program.ThisincludesopeningthePDF Helpfile,accessinginformationabout CoffeeCupSoftware,andgettingsupport fromourfabuloustechnicalsupportcrew.
ViewHelpFile(F1)
OpenstheHelpfile.Thisisyourgoto sourceforeverythingrelatedtotheHTML Editor.
HTMLEditorHelpOnline
OpenstheHTMLEditorHelppage(http://www.coffeecup.com/html editor/help/)inyourdefaultWebbrowser.Fromhere,youcanwatch videotutorialsorreadknowledgebasearticlesthatanswercommonly askedquestionsabouttheprogram.
GetSupport
OpenstheCoffeeCupSoftwareSupportCenter (http://www.coffeecup.com/help/)inyourdefaultWebbrowser.From here,youcangetintouchwiththeCoffeeCuptechnicalsupportteam, whowillbehappytohelpyouwithanyissuesyoumayhave.
TipoftheDay
OpenstheTipoftheDaywindow,whichdisplayshelpfultipsforworkingwith theprogram.
180
Tonavigatethetips,usethePreviousandNextbuttons.Ifyoudonotwanttosee thesetipsonstartup,uncheckthecheckboxnexttoShowtipofthedayon startup. ToreenabletheTipoftheDaywindow,gotoHelp>TipoftheDayor usetheoptionsunderTools>Preferences>Generaltab.
AboutThisSoftware
Opensawindowthatprovidesbasicinformationabouttheprogramand CoffeeCupSoftware.
181
TheToolbarislocatedacrossthetopoftheprogramandcontainsbuttonsthat allowyoutoquicklyaccesscommonlyusedprogramfeatures.Rightclickingthe toolbaropensthismenu:
Toolbar
New
Expandstodisplayalistofoptionsfor creatingnewWebpages. Fordetailedtutorialscovering thefourdifferentwaystocreate anewWebpage,readCreating aNewWebpage.
NewFromQuickStart
OpenstheQuickStartwindow,whichallowsyoutodefinesettingsforyournew page,includingthepagetitle,colorscheme,metainformation,andcharacterset.
NewBlankPage(Ctrl+N)
Createsanewpageforyoutoeditfromscratch.Bydefault,newpagesinclude somebasicHTMLtohelpgetyoustarted.ThisincludestheDOCTYPE,html, head,title,meta,andbodytags,aswellasanHTMLcommentstatingthatthe pagewascreatedwithCoffeeCupHTMLEditor.
NewFromLayout
OpensawindowthatallowsyoutochoosefromseveralWebpagelayouts.
182
AlayoutincludestheHTMLforabasicpagestructure.Youprovidethe content.Ifyouprefertoworkwithapagedesign,selectNewFrom Theme.Formoreinformationaboutthedifferencebetweenlayoutsand themes,readWhatisthedifferencebetweenalayoutandatheme?
NewFromTheme
183
Athemeincludesthreepages(index.html,aboutus.html,andcontact us.html)thatincludetheHTMLandimagesforabasicdesign.Youcan replacetheimagesandtextwithyourowncontent.Ifyouprefertowork withapagestructure,selectNewFromLayout.Formoreinformationaboutthe differencebetweenlayoutsandthemes,readWhatisthedifferencebetweena layoutandatheme?
Save
Expandstodisplayalistofoptionsfor savingyourwork. Savesthefileyouarecurrentlyworking on.Werecommendyousavefrequently topreventlossincasesomethinghappenstoyourcomputerwhileyouare working.
Save(Ctrl+S)
SaveAs(Ctrl+Shift+S)
SaveAll
Savesalltheopenfiles.
184
Open
Expandstodisplayalistofoptionsforopening previouslycreatedwork.
Open(Ctrl+O)
Allowsyoutoopenandworkwithapreviously createdfile.
OpenFromWeb
OpenstheOpenFromWebwindow,whichallowsyoutoimportanHTMLpage ontheInternetintotheHTMLEditor.ThisoptionworksbestwithHTMLpages thatdonotcontainPHPorSSI.Thesescriptsarestoredontheserver,and sometimesaddcodetoaWebpagethatcannotbeimportedintotheHTMLEditor.
RecentFiles
Displaysalistoffilesyouhaveworkedwithrecently,whichallowsyoutoaccess themmorequickly.
UploadFiletoServer
Expandstodisplayalistofoptionsfor uploadingyourwork.
Selectapreviouslyconfiguredserverandthen selectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUpload FiletoServerwindow,whichdisplaysthestatusoftheuploadandcloses automaticallywhentheuploadiscomplete.
185
AddorEditServers
OpenstheServerConfigurationAdd/Editwindow,whichallowsyouto configureaneworexistingserverprofile.
Undo(Ctrl+Z)
Redo(Ctrl+Q)
Redoesthelastaction.TheRedofunctioncomesinhandywhenyou accidentallyusetheUndofunctionorchangeyourmindaboutundoingan action.
Cut(Ctrl+X)
Removestheselectedobjectortextfromthescreenandstoresitonthe Windowsclipboard.Itisthenavailabletobepasteduntilsomethingelseis cutorcopiedtotheclipboard.
Copy(Ctrl+C)
Makesacopyoftheselectedobjectortextandstoresthatcopyonthe Windowsclipboard.Theobjectisnowavailabletobepasteduntilanother objectiscutorcopiedtotheclipboard.
Paste(Ctrl+V)
TakestheobjectstoredontheWindowsclipboardandplacesitonthe page.Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucan pastethesameobjectasmanytimesasyouneed.
FindandReplace
Expandstodisplaythefindandreplace options. OpenstheExtendedFindwindow,which allowsyoutosearchthecurrentdocument, allopendocuments,orallthedocumentsinagivenfolderforasearchterm. OpenstheExtendedFindandReplacewindow,whichallowsyoutosearchthe currentdocument,allopendocuments,orallthedocumentsinagivenfolderfora searchterm,andthenreplaceitwithtextofyourchoosing.
Find(Ctrl+F)
Replace(Ctrl+H)
186
ExtendedFindResults
DisplaystheSearchResultstabatthebottomoftheprogram.
SpellingandThesaurus
Expandstodisplaythespellingandthesaurus options.
CheckSpelling
Checksthespellinginyourdocument.Ifthere arenospellingerrors,youwillseeawindowthat says,Thespellingcheckiscomplete.
AutoSpellCheck Thesaurus
Putsaredunderlineunderanymisspelledwords. OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselected word.
187
Document
Expandstodisplaydocumentoptions. OpenstheDocumentWeight window,whichcontainsinformation aboutthesizeofthecurrentlyopen documentandhowlongitwilltaketo downloadtoacomputeronseveraldifferentconnections.
DocumentWeight
DocumentDependencies
OpenstheDocumentDependencieswindow,whichliststhebackground images,items,andexternallinksinyourdocument.Youcanusethisinformation tokeeptrackofyourdependenciesandpreventissueslikebrokenlinksand images.
188
DocumentProperties
OpenstheDocumentPropertieswindow,whichletsyouchangethepagetitle, characterset,backgroundimageorcolor,linkcolors,andcolorscheme.
ValidateHTML
Openshttp://validator.w3.org/inyourdefaultWebbrowser.Youcan validatetheHTMLofpagesyouhavealreadypublishedtoyourserver, oryoucanuploadthefilestothissiteandcheckthembeforeuploading. Formoreinformationaboutusingthistool,refertothesites documentation(http://validator.w3.org/about.html).
Preferences
OpensthePreferenceswindow,whichallowsyoutoworkwiththe programpreferences,includingworkingwiththeappearanceand functionoftheprogram,settingfiletypestheprogramcanopen,adding browsersandexternalapplications,settingdefaultfolders,and customizinghighlightingandtoolbaroptions.
189
Applications
Expandstoshowalistofotherapplicationsyoucanopenfromwithin theHTMLEditor. Toaddexternalapplications,gotoTools>Preferences>Applications tab.
Search
Allowsyoutoenterasearchtermandsearchforitintheopendocument.Usethe upanddownarrowstoviewthepreviousandnextiterationsofthesearchterm.
190
TheCodeEditorallowsyoutoviewandeditthecodethatmakesupyourpage.It canbeusedtoeditHTML,serverfilessuchasPHPandCSS,andtext.Fora completelistoffiletypestheprogramcanopenandtoenteradditionalfiletypes, gotoTools>Preferences>Filestab.
CodeEditor
Toaddoreditcode,justtypeitin!Therearealsoanumberofusefultoolstohelp youcodeyourpagemorequicklyandefficiently.Theycanbeaccessedinthe MenuBarorusingeitherofthefollowingoptions: Code Editor toolbar Code and Visual Editor right-click menu Special features in the Code Editor
191
CodeEditorToolbar
TheCodeEditortoolbarislocatedacrossthetopoftheCodeEditorandcontains buttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Rightclicking thetoolbaropensthismenu:
Image(Ctrl+M)
OpenstheInsertImagewindow,whichallowsyoutoinsertanimage andanyassociatedattributes,aswellascreateathumbnailversionof theimage. YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMy ComputertabintotheCodeorVisualeditor.
Links
Expandstodisplaylinkoptions. OpenstheInsertLinkwindow,whichallows youtoinsertalinkandanyassociatedattributes. OpenstheInsertEmailLinkwindow,whichallowsyoutoinsertanemaillink andanyassociatedattributes.
Link(Ctrl+L)
EmailLink(Ctrl+E)
192
Fonts
Expandstodisplayfontoptions.
FontWizard
OpenstheFontWizard,whichallowsyouto choosetheattributesforafonttag.
FontSizes
Selectfromfontsizes1(8pt)to7(36pt)oradjust thesizeupordownoneincrement.
FontColor
OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfrom therainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththe desiredcolor.
FontEffects
Allowsyoutoapplyoneoftheprovidedeffectstoyourfont.
193
HeaderSizes
Selectaheadertag(<h1><h6>),anditwillbeinsertedintoyourdocumentor appliedtoanyselectedtext.
Insertsparagraphtags(<p></p>)tagsorappliesthemtoselectedtext.
Break
Insertsabreaktag(<br />).
NonBreakingSpace
Insertsanonbreakingspacecharacterentity( ),whichisrendered bybrowsersasaspace.Thiscanbeusedtoinsertextraspaces,since HTMLonlyallowsforonespacebetweeneachword.
Bold(Ctrl+B)
Insertsboldtags(<b></b>)orappliesthemtoselectedtext.
Italic(Ctrl+I)
Insertsitalictags(<i></i>)orappliesthemtoselectedtext.
Underline(Ctrl+U)
Insertsunderlinetags(<u></u>)orappliesthemtoselectedtext.
Left
Insertsadivtagwiththealignattributesettoleft(<div align=left></div>)orappliesittotheselectedtext.
194
Center
Insertsadivtagwiththealignattributesettocenter(<div align=center></div>)orappliesittotheselectedtext.
Right
Insertsadivtagwiththealignattributesettoright(<div align=right></div>)orappliesittotheselectedtext.
Justify
Insertsadivtagwiththealignattributesettojustify(<div align=justify></div>)orappliesittotheselectedtext.This alignsyourtextsoeachlineisthesamelength.
HorizontalRule
TableItems
Expandstodisplaytableoptions.
TableDesigner
OpenstheTableDesigner,whichallowsyoutocreateatable.Atablecanbeused todisplayinformationorasyourpagelayout.
QuickTable
OpenstheQuickTablewindow,whichallowsyoutodesignatable.
195
FormItems
Expandstodisplayformoptions. ForcomprehensiveinformationaboutcreatingandmodifyingHTML forms,readtheW3SchoolstutorialHTMLFormsandInput (http://www.w3schools.com/html/html_forms.asp).
196
GetCoffeeCupFormBuilder
OpenstheCoffeeCupWebFormBuilderpage (http://www.coffeecup.com/formbuilder/)inyourdefaultWebbrowser. ThisprogramsimplifiestheprocessofaddingWebformstoyour Website.
InsertForm
OpenstheInsertFormwindow,whichallowsyoutosettheformmethod,MIME postmethod,andURLwheretheformresultswillbedirected.Thisinformationis importantifyouwantyourformtoworkproperly!
DropDownList
OpenstheInsertDropDownListwindow,whichallowsyoutoconfigurethe contentsofadropdownlist.
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevalues youwouldliketoappearintheformresultsintheValuefield.TheNameappears intheformresults,andtheAlignmentoptionscontrolwheretheelementappears onthepage. Adropdownlistisabarwithanarrowthatexpandstoshowalistwhenclicked.It isbestsuitedforlistsinwhichyourusercanonlyselectoneoption.Thedrop downlistconfiguredaboverenderslikethis:
197
ListBox
OpenstheInsertListBoxwindow,whichallowsyoutoconfigurethecontentsof alistbox.
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevalues youwouldliketoappearintheformresultsintheValuefield.TheNameappears intheformresults,andtheAlignmentoptionscontrolwheretheelementappears onthepage. Alistisatextboxcontainingalistofitemsthatyourusercanselect,andisbest suitedforlistsinwhichyourusercanselectseveraloptions.Thelistbox configuredaboverenderslikethis:
198
RadioButtonGroup
OpenstheInsertRadioButtonGroupwindow,whichallowsyoutoconfigurea radiobuttongroup.Radiobuttonsmustbegroupedinordertoworkcorrectly.
EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevalues youwouldliketoappearintheformresultsintheValuefield.TheNameappears intheformresults,andtheAlignmentoptionscontrolwheretheelementappears onthepage.
Checkbox
Insertsthecodeforacheckbox,whichisasquareboxthatcanbeselectedand deselected,andisbestsuitedforlistsinwhichyourusercanselectoneormore answers.Acheckboxlookslikethis:
RadioButton
Insertsthecodeforaradiobutton,whichisaroundbuttonthatyourusercan selectbutonlydeselectbyselectinganotheroption.Theyarebestsuitedforlistsin whichyourusercanonlyselectoneanswer.Aradiobuttonlookslikethis:
199
Image
Insertsthecodeforaformimage.Thisisparticularlyhelpfulifyouwanttoadd custombuttonstoyourform. Insertsthecodeforatextbox,whichisaonelinefieldwhereyourusercantype information,andisbestsuitedforshortanswers,suchasname,emailaddress, phonenumber,etc.Atextboxlookslikethis:
TextBox
PasswordTextBox
Insertsthecodeforapasswordtextbox,whichisaonelinefieldwhereyouruser cantypeapassword.Allthecharactersaredisguisedasasterisks.
HiddenText
Insertsthecodeforhiddentext,whichappearsinyourcopyoftheformresults andcanbeusedforsortingandfilteringinformation.
FileBrowseTextBox
Insertsthecodeforafilebrowsetextbox,whichisusedtobrowseyourcomputer forafile.Thisfilewillbeuploadedwhentheformissubmitted.
TextArea
Insertsthecodeforatextarea,whichisamultiplelinefieldwhereyourusercan typeinformation,andisbestsuitedforlongeranswers,suchasmessages, feedback,etc.Atextarealookslikethis:
Button
InsertsthecodeforagenericSubmitQuerybutton.
200
SubmitButton
Insertsthecodeforasubmitbutton.
ResetButton
Insertsthecodeforaresetbutton.
List
OpenstheInsertListwindow,whichallowsyoutoinsertorimportoneoffour differentkindsoflists:bulleted,numbered,definition,orunformatted.
StyleSheetItems
Displaysalistofoptionsthatletyouinsertvariousstylesheetitems. Forcomprehensiveinformationaboutcreatingandmodifyingstyle sheets,readtheW3SchoolstutorialCSSIntroduction (http://www.w3schools.com/css/css_intro.asp).
StyleSheetWizard
OpenstheStyleSheetwindow,whichallowsyoutochoosebetweencreatinga newstylesheetclassandapplyingastylesheettoapreexistingHTMLtag.
Afteryoumakeyourchoice,youwillbetakentotheStyleSheetWizard,which allowsyoutosetthevariousoptionsforyourstylesheet.
StyleSheetAttributeWizard
OpenstheStyleSheetWizard,whichallowsyoutosetthevariousoptionsfor yourstylesheet.
CSSMenuDesigner
OpenstheCoffeeCupCSSMenuDesigner,whichallowsyoutodesignaCSS menu.
201
Color
ThisbuttonopenstheColorwindow,whichallowsyoutochooseacolorby selectingitfromtherainbowgradientorbymanuallyenteringvariousvalues associatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeadded whereverthecursorispositionedonthepage.
EditDisplay
Expandstodisplayprogramdisplay options.
ToggleWordWrap
Selectthisoptionifyouwouldlikeyour texttoautomaticallywraptofitthe CodeEditorworkspace.
ToggleGutter
Enablesthegutter,whichisabartotheleftofthecodewherelinenumbers, bookmarks,andcharactersthatrepresentlinebreaksaredisplayed.
202
ToggleLineNumbers
Turnsonlinenumbersinthegutter.
Enablessplitscreenpreview,whichallowsyoutopreviewyourworkinanInternet ExplorerbrowserareabelowtheCodeEditor.
203
TestinBrowser
Expandstodisplaybrowsertestingoptions.
TestWithDefaultBrowser(Ctrl+F9)
OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.Thisis doneoutsideoftheHTMLEditor.
TestwithFavoriteBrowser(Ctrl+F5) AdditionalBrowsers
OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab. ExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite. Toconfigureadditionalbrowsers,gotoTools>Preferences>Browser Testingtab.It'sgoodWebdesignpracticetotestyourWebsitein severaldifferentbrowserstoensurecrossbrowsercompatibility.The mostpopularbrowsersareFirefox,InternetExplorer,Opera,Google Chrome,andSafari.
204
Enablessplitscreenpreview,whichallowsyoutopreviewyourworkinabrowser areabelowtheCodeEditor.
UploadFiletoServer
205
AddorEditServers
206
SpecialFeaturesintheCodeEditor
ThereareafewspecialfeaturesintheCodeEditorthathelpmakeiteasiertocode yourdocumentsbyhand.
CodeCompletion
Typingatag,tagattribute,orattributevalueopensalistof(X)HTMLentitiesthat matchthelettersyouhavetyped.
Youcanuseyourmouseorthearrowkeysonyourkeyboardtoselectthetag,tag attribute,orattributevalueyouwanttouse,anditwillbeinsertedintoyour document.Selectingataginsertstheopeningandclosingtags,whichprevents unclosedtags. Tocustomizewhich(X)HTMLentitiesappearintheCodeCompletion list,gotoEdit>EditXHTMLTags.ThisopenstheEditXHTMLTags window,whichallowsyoutoadd,modify,ordelete(X)HTMLtags, attributes,andattributevalues.Foradetailedtutorialthatoutlinesthis process,readCustomizingCodeCompletionTags.
SyntaxHighlighting
WhenyoulookattheCodeEditorworkspace,youwillnoticethatdifferentparts ofthecodearedifferentcolors.
207
Thisiscalledsyntaxhighlighting,anditisausefulwaytotelldifferenttags,tag attributes,andtagvaluesapart.Forexample,itmaybedifficultortimeconsuming totrytofindeveryinstanceofan<img>tag,butifyousetyourhighlighting optionstomakeall<img>tagsred,thenallyoudhavetodoislookforthecolor red. Tocustomizeyoursyntaxhighlightingoptions,gotoTools> DocumentDisplayProperties.Selectthelanguagewhosesyntax highlightingcolorschemeyouwanttochange,andthenclickthe ModifyHighlightingbutton.ThisopenstheHighlightingOptions window,whichallowsyoutocreateormodifythehighlightingcolorscheme.
208
VisualEditor
TheVisualEditorallowsyoutoworkdirectlywiththeelementsinyourpageina WYSIWYG(WhatYouSeeIsWhatYouGet)environment.
Toworkwithyourpageelements,simplyselectthemwithyourmouseanddrag anddropthemtothedesiredlocation.(YoumayneedtousetheMoveand UnlockObjecticontoenablethisfeature.)Therearealsoanumberofuseful toolstohelpyouworkwithyourpagemorequicklyandefficiently.Theycanbe accessedintheMenuBarorusingeitherofthefollowingoptions: Visual Editor toolbar Code and Visual Editor right-click menu Working with tables in the Visual Editor IfyoucannotseetheVisualEditor,itmaynotbeenabled.Toturniton, gotoTools>Preferences>GeneraltabandunselecttheHideVisual Editortabcheckbox.
209
VisualEditorToolbar
TheVisualEditortoolbarislocatedacrossthetopoftheVisualEditorand containsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right clickingthetoolbaropensthismenu:
InsertandMoveText
InsertsthewordsYourTextHereintotheVisualEditor.Youcan replacethismessagewithyourowntext.
EditElementSource
OpenstheEditElementSourcewindow,whichallowsyoutowork withtheHTMLfortheselectedobject.
210
MoveandUnlockObject
Unlockstheobjectfromitscurrentposition,whichallowsyoutodrag anddropittothedesiredlocationonthepage.
Image(Ctrl+M)
OpenstheInsertImagewindow,whichallowsyoutoinsertanimage andanyassociatedattributes,aswellascreateathumbnailversionof theimage. YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMy ComputertabintotheCodeorVisualeditor.
Links
Expandstodisplaylinkoptions.
Link(Ctrl+L)
OpenstheInsertLinkwindow,whichallows youtoinsertalinkandanyassociatedattributes.
EmailLink(Ctrl+E)
OpenstheInsertEmailLinkwindow,whichallowsyoutoinsertanemaillink andanyassociatedattributes.
Fonts
FontWizard
OpenstheFontWizard,whichallowsyoutochoose theattributesforafonttag.
FontSizes
Selectfromfontsizes1(8pt)to7(36pt)oradjustthe sizeupordownoneincrement.
FontColor
211
FontEffects
HeaderSizes
Selectaheadersize(16)anditwillappliedtotheselectedtextoranytexttyped afterthecurrentcursorposition.
212
Createsanewparagraph.
Break
Insertsalinebreak.
Bold(Ctrl+B)
Boldstheselectedtextoranytexttypedafterthecurrentcursorposition.
Italic(Ctrl+I)
Italicizestheselectedtextoranytexttypedafterthecurrentcursor position.
Underline(Ctrl+U)
Underlinestheselectedtextoranytexttypedafterthecurrentcursor position.
Left
Leftalignstheselectedtextoranytexttypedafterthecurrentcursor position.
Center
Centerstheselectedtextoranytexttypedafterthecurrentcursor position.
Right
Rightalignstheselectedtextoranytexttypedafterthecurrentcursor position.
Justify
Justifiestheselectedtextoranytexttypedafterthecurrentcursor position.Thisalignsyourtextsoeachlineisthesamelength.
HorizontalRule
List
OpenstheInsertListwindow,whichallowsyoutoinsertorimportoneof fourdifferentkindsoflists:bulleted,numbered,definition,or unformatted.
213
VisualTableElements
Expandstodisplayvisualtableoptions.
TableDesigner
OpenstheTableDesigner,whichallowsyoutocreateatable.Atablecanbeused todisplayinformationorasyourpagelayout.
QuickTable
OpenstheQuickTablewindow,whichallowsyoutodesignatable.
214
ToggleInvisibleGridLines
Displaystablebordersiftheyaresetto0.Thisispurelyfordesignpurposesand willnotberenderedinaWebbrowser.
InsertColumn
Insertsacolumnintothetable.
InsertRow
Insertsarowintothetable.
DeleteColumn
DeleteRow
Deletestherowwherethecursorispositionedortheselectedrow(s).
MergeCells SplitCell
ThisoptionisonlyavailableintheTableDesigner. Splitsthecellinhalf.
Preview
Expandstodisplaypreviewoptions.
215
TestwithFavoriteBrowser(Ctrl+F5)
OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab inthePreferenceswindow.
AdditionalBrowsers
ExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite. Toconfigureadditionalbrowsers,gotoTools>Preferences>Browser Testingtab.It'sgoodWebdesignpracticetotestyourWebsitein severaldifferentbrowserstoensurecrossbrowsercompatibility.The mostpopularbrowsersareFirefox,InternetExplorer,Opera,Google Chrome,andSafari.
UploadFiletoServer
216
AddorEditServers
Color
ThisbuttonisonlyenabledintheCodeEditor.
217
CodeandVisualEditorRightClickMenu
Therightclickmenuallows youtoaccesscommonlyused featuresintheCodeand Visualeditors.
Cut(Ctrl+X)
Removestheselectedobject ortextfromthescreenand storesitontheWindows clipboard.Itisthenavailable tobepasteduntilsomething elseiscutorcopiedtothe clipboard.
Copy(Ctrl+C)
Makesacopyoftheselected objectortextandstoresthat copyontheWindows clipboard.Theobjectisnow availabletobepasteduntil anotherobjectiscutorcopied totheclipboard.
Paste(Ctrl+V)
Takestheobjectstoredonthe Windowsclipboardand placesitonthepage.Pasting anobjectdoesnotremoveit fromtheclipboard,soyoucan pastethesameobjectasmany timesasyouneed.
SelectAll(Ctrl+A)
Selectseverythinginthe workspace.Thisishelpfulif youwanttocopy,cut,or deletemanyobjectsatatime insteadofhavingtoselect themallindividually.
218
MoveText(VisualEditorOnly)
Movesanyselectedtextintoitsowntextbox,whichallowsyoutodraganddropit toanotherlocation.
MoveandUnlockObject(VisualEditorOnly)
Unlockstheobjectfromitscurrentposition,whichallowsyoutodraganddropit tothedesiredlocationonthepage.
EditElementSource(VisualEditorOnly)
OpenstheEditElementSourcewindow,whichallowsyoutoworkwiththe HTMLfortheselectedobject.
Find(Ctrl+F)
OpenstheExtendedFindwindow,whichallowsyoutosearchthecurrent document,allopendocuments,orallthedocumentsinagivenfolderforasearch term.
Replace(Ctrl+H)
OpenstheExtendedFindandReplacewindow,whichallowsyoutosearchthe currentdocument,allopendocuments,orallthedocumentsinagivenfolderfora searchterm,andthenreplaceitwithtextofyourchoosing.
Undo(Ctrl+Z)
219
Redo(Ctrl+Q)
Redoesthelastaction.TheRedofunctioncomesinhandywhenyouaccidentally usetheUndofunctionorchangeyourmindaboutundoinganaction.
Save(Ctrl+S)
Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequentlyto preventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
SaveAs(Shift+Ctrl+S)
TestinBrowser
Expandstodisplaybrowsertestingoptions.
220

TestwithFavoriteBrowser(Ctrl+F5)
OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.
AdditionalBrowsers
UploadFiletoServer
221
AddorEditServers
Font
FontWizard FontSizes
OpenstheFontWizard,whichallowsyoutochoosetheattributesforafonttag. Selectfromfontsizes1(8pt)to7(36pt)oradjustthesizeupordownone increment.
222
FontColor
FontEffects
HeaderSizes
Selectaheadertag(h1h6),anditwillbeinsertedintoyourdocumentorapplied toanyselectedtext.
223
Links
Expandstodisplaylinkoptions.
Link(Ctrl+L)
OpenstheInsertLinkwindow,whichallowsyoutoinsertalinkandany associatedattributes. OpenstheInsertEmailLinkwindow,whichallowsyoutoinsertanemaillink andanyassociatedattributes.
EmailLink(Ctrl+E)
Image
OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandany associatedattributes,aswellascreateathumbnailversionoftheimage. YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMy ComputertabintotheCodeorVisualeditor.
Color
ThisbuttonopenstheColorwindow,whichallowsyoutochooseacolorby selectingitfromtherainbowgradientorbymanuallyenteringvariousvalues associatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeadded whereverthecursorispositionedonthepage.
224
SpellingandThesaurus
Expandstodisplayspellingandthesaurusoptions.
CheckSpelling
Checksthespellinginyourdocument.Iftherearenospellingerrors,youwillseea windowthatsays,Thespellingcheckiscomplete.
225
SpellCheckerOptions
AutoSpellCheck
Putsaredunderlineunderanymisspelledwords.
Thesaurus
OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselected word.
Closesthecurrentfileyouhaveopen,butleavestheprogramopen.
Close
226
WorkingWithTablesintheVisualEditor
WhenyouselectatableintheVisualEditor,apaneappearsatthebottomofthe screendisplayingoptionsformodifyingyourtable. YoucanalsodesignatableusingtheTableDesigner.Toaccessit,goto Insert>TableDesigner.
HorizontalandVerticalAlignment
Selectthehorizontalandverticalalignmentforthetextintheselectedcell.
WidthandHeight
Enterthewidthandheightinpixelsoftheselectedcell.
NoWrap
Selectthischeckboxifyoudonotwantthetextintheselectedcellto automaticallywraptofitthewidthofthecell.
BGColor
227
NoBGColor
Removesthebackgroundcolor.
BorderColor
OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfrom therainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththe desiredcolor.Thehexcodeforthiscolorwillbeaddedwhereverthecursoris positionedonthepage.
NoBorderColor
Removesthebordercolor.
228
PreviewTab
ThePreviewtabisabuiltinbrowser(InternetExplorer)youcanusetopreview yourWebsite. Toconfigureadditionalbrowsers,gotoTools>Preferences>Browser Testingtab.It'sgoodWebdesignpracticetotestyourWebsitein severaldifferentbrowserstoensurecrossbrowsercompatibility.The mostpopularbrowsersareFirefox,InternetExplorer,Opera,Google Chrome,andSafari.
SincethePreviewtabispoweredbyInternetExplorer,itsrightclick menuisthesameastherightclickmenuforthebrowser.Formore informationabouthowtousetheoptionsintherightclickmenu, consultInternetExplorersdocumentation (http://windowshelp.microsoft.com/Windows/enUS/internetexplorer.mspx). Preview toolbar
229
PreviewToolbar
ThePreviewtoolbarislocatedacrossthetopofthePreviewtabandcontains buttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Rightclicking thetoolbaropensthismenu:
Back
Takesyoutothepreviouslyviewedpage.
Forward
Takesyoutothepageyounavigatedbackfrom.
Stop
Stopsthepagefromloading.
Refresh
Reloadsthecontentofthepage.
230
TestinBrowser
Expandstodisplaybrowsertesting options.
TestWithDefaultBrowser (Ctrl+F9)
OpensyourWebsiteinthebrowseryou havesetasyourdefaultbrowser.Thisis doneoutsideoftheHTMLEditor.
TestwithFavoriteBrowser (Ctrl+F5)
Opensthepageinthebrowserspecified thefirstslotintheBrowserTesting tab.
AdditionalBrowsers
231
Statusbar
TheStatusbarislocatedatthebottomoftheprogram,andallowsyoutoswitch betweenopendocumentsandviewbasicinformationabouttheopenfile.
FileTabs
Toswitchbetweenopendocuments,clickthetabwiththefilenameofthedesired document.
Tocloseafilefromoneofthesetabs,rightclickit.Thisopensarightclickmenu thatallowsyoutoclosethetab.
FilePath
HoldingyourmouseoverafileintheMyComputertabdisplaysthefullfilepath intheStatusbar.
Line,Column,andSaveStatus
TherighthandsideoftheStatusbardisplaysthelineandcolumnwherethecursor iscurrentlypositioned.Italsoletsyouknowifyourfileissavedorunsaved.
232
TagInformation
Whenyourcursorispositionedwithinan(X)HTMLtagorCSSproperty,alistof validattributeswillappearintheStatusbar.
Toaccesstheseattributes,starttypingtheoneyouwanttouse,ortypeaspace. ThisopenstheCodeCompletionlist,whichcontainstheavailableattributesyou canuse.
233
ResourceBrowser
TheResourcebrowserislocatedonthe lefthandsideoftheprogram.Itisused toaccessWebsiteProjects,code snippets,tags,andspecialcharacters. Youcanexpandorcollapseitusingthe arrowiconatthetop. My Websites tab Local Disk tab Local Disk rightclick 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
TheMyWebsitestabiswhereyouorganizeandworkwithyourWebsiteProjects. FormoreinformationaboutusingWebsiteProjects,readWorkingWith WebsiteProjects.
MyWebsitesTab
Local Disk tab Local Disk right-click menu Server tab Server right-click menu My Websites toolbar
235
TheLocalDisktabiswhereyouworkwiththeWebsiteProjectfilessavedonyour computer.YoucanviewthestructureofyourWebsiteProjectandeditthefiles usingtheMyWebsitestoolbarortheLocalDiskrightclickmenu.
LocalDiskTab
TochangewhichtypesoffilesdisplayintheLocalDisktab,selectthedesiredfile typefromthedropdownlistatthebottom.
236
Anotherfeaturethatappearsatthebottomofthetabisanimagepreviewthat appearswhenanimageisselectedintheLocalDisktab.
Local Disk right-click menu My Websites toolbar
237
LocalDiskRightClickMenu
RightclickingtheLocalDisk tabopensamenuthatallows youtoworkwiththeWebsite Projectortheselectedfile.
InsertasLinkInto CurrentDocument
Insertstheselectedfileinto thecurrentdocumentasa relativelink. Youcanalsoadda linktoadocument bydraggingthe documentfromthe MyWebsitesorMy ComputertabintotheCode orVisualeditor.Thisopensa windowaskingifyouwantto insertthedocumentorpage asalinkorifyouwanttoopenitinanothertabforediting.
InsertImageIntoCurrentDocument
Insertstheselectedimageintothecurrentdocumentwithan<img>tag. YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMy ComputertabintotheCodeorVisualeditor.
OpeninAssociatedApplication
Openstheselectedfileintheassociatedapplication.Forinstance,ifyouselecteda PDF,itwouldopeninAdobeAcrobat.
Edit
Openstheselectedfileinanewtab.
Rename
Allowsyoutorenametheselectedfile.
Delete
Deletestheselectedfile.
238
CreateFolder
Createsanewfolder.
MoveFile/FoldertoWebsiteProject
AllowsyoutomovetheselectedfiletoadifferentlocationwithintheWebsite Project.
UploadSelectedFiles
UploadstheselectedfiletotheserverspecifiedintheWebsiteProjectSettings window. YoucanonlyassignoneserverperWebsiteProject.Ifyouwantto uploadanyorallofyourWebsiteProjectfilestoadifferentserverthan theonespecifiedinthisfield,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,whichprovidesbasic informationaboutthefile.
239
240
ServerTab
TheServertabiswhereyouworkwiththeWebsiteProjectfilessavedonyour server.YoucanviewthestructureofyourWebsiteProjectandeditthefilesusing theMyWebsitestoolbarortheServerrightclickmenu.
Additionally,youcanclicktheShowFTPLoglinkatthebottomtoviewalogof yourFTPactivityintheCodeEditor.Thisinformationcanbeusefulifyou experienceissueswhenconnectingoruploading. Server right-click menu My Websites toolbar
241
ServerRightClickMenu
RightclickingafileintheServertabopensamenuthatallowsyoutoworkwith theselectedfile.
Edit
Openstheselectedfileinanewtab.Savingthefilesavesitdirectlytotheserver.
Downloadto[WebsiteProjectPath]
DownloadstheselectedfiletothemainfolderinyourWebsiteProject.Onceyou havedownloadedit,youcanmoveittothedesiredfolder.
Rename
Delete
Deletestheselectedfile.
CreateFolder
Createsanewfolder.
FileProperties
Opensawindowthatprovidesbasicinformationaboutthefile,includingitsname, size,anddateitwasfirstcreated.
242
MyWebsitesToolbar
TheMyWebsitestoolbarislocatedacrossthetopoftheMyWebsitestaband containsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right clickingthetoolbaropensthismenu:
WebsiteProjects
ExpandstodisplayWebsiteProject options.
NewWebsiteProject
OpenstheWebsiteProjectSettings window,whichletsyoucreateablank WebsiteProjectortocreateaWebsite Projectfromexistingfiles.Youcanalso enteradditionalinformation,suchas yourserversettings,andselectyour fileuploadoptions.
OpenWebsiteProject
CloseWebsiteProject AllWebsiteProjects
ClosesthecurrentWebsiteProjectyouhaveopen,butleavestheprogramopen. OpensalistofalltheWebsiteProjectsyouhavecreated,whichallowsyouto accesstheseWebsiteProjectsmorequickly.
243
RemoveWebsiteProject
RemovestheselectedWebsiteProjectfromtheHTMLEditor.Thefilewillnotbe deletedfromyourcomputer.
WebsiteProjectSettings
OpenstheWebsiteProjectSettingswindow,whichallowsyoutoeditthe settingsforthecurrentWebsiteProject.
Tools
Expandstodisplayupload anddependenciesoptions.
YoucanonlyassignoneserverperWebsiteProject.Ifyouwantto uploadanyorallofyourWebsiteProjectfilestoadifferentserverthan theonespecifiedinthisfield,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.
UploadEntireWebsiteProject
UploadstheentireWebsiteProjecttoyourserver.Youwillneedtosetupaserver profileinordertoperformthisaction.
UploadSelectedFiles
UploadsthecurrentlyselectedWebsiteProjectfilestoyourserver.Thefile structureispreservedduringtheupload.Forexample,ifyouuploadanimage calledimage.pngthatislocatedinafoldercalledimages,image.pngwillbe uploadedintotheimagesfolderontheserver.Ifthereisnoimagesfolderonthe server,itwillbecreatedduringtheuploadprocess. YouwillneedtosetupaserverprofileintheWebsiteProjectSettingswindow inordertouploadyourfiles.
CheckWebsiteProjectDependencies
DisplaystheDocumentDependenciestabatthebottomoftheprogram.
244
MyComputerTab
TheMyComputertaballowsyoutoviewandeditfilesonyourcomputer,add themtoyourWebsiteProjectorWorkingfolder,andeditthemintheEditor.Itis dividedintotwosections.Thetopsectionallowsyoutobrowsefilesandfolderson yourcomputer.Youcandosobyclickingthroughfoldersandusingtheoptionsin theMyComputertoolbar. Selectingafolderopensitscontentsinthebottomsection.Youcanworkwith thesefilesusingtheMyComputerrightclickmenu.
TochangewhichtypesoffilesdisplayintheMyComputertab,selectthedesired filetypefromthedropdownlistatthebottom.
245
My Computer toolbar My Computer right-click menu
246
TheMyComputertoolbarislocatedacrossthetopoftheMyComputertaband containsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeaturesinthe MyComputertab.Rightclickingthetoolbaropensthismenu:
MyComputerToolbar
Desktop
OpenstheDesktopinthefilebrowser.
UpOneFolder
Movesuponefolderfromtheselectedfolderinthefilebrowser.
Refresh
RefreshesthecontentintheMyComputertab.Ifyouhaverecentlyadded afileanditdoesnotappear,tryrefreshingthisarea.
GotoWorkingFolder
OpensyourWorkingfolderinthefilebrowser.IfyouareusingaWebsite Project,bydefault,theWorkingfolderisthesameastheWebsiteProjects folder.Otherwise,theWorkingfolderiswhereyousaveyourWebsitefiles.
247
MyComputerRightClickMenu
Rightclickingafileinthe bottomsectionoftheMy Computertabopensamenuthat allowsyoutoworkwiththe selectedfile.
InsertasLinkInto CurrentDocument
Insertstheselectedfileintothe currentdocumentasarelative link. Youcanalsoaddalink toadocumentby draggingthedocument fromtheMyWebsites orMyComputertabintothe CodeorVisualeditor.This opensawindowaskingifyou wanttoinsertthedocumentor pageasalinkorifyouwantto openitinanothertabfor editing.
InsertImageInto CurrentDocument
Insertstheselectedimageintothecurrentdocumentwithan<img>tag.The programusesarelativelink,soifthefileisnotlocatedinyourWebsiteProjector Workingfolder,itmaynotdisplaycorrectlyonyourWebsite. YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMy ComputertabintotheCodeorVisualeditor.
InsertSoundIntoCurrentDocument
Insertstheselectedsoundintothecurrentdocumentwitha<bgsound>tag.The programusesarelativelink,soifthefileisnotlocatedinyourWebsiteProjector Workingfolder,itmaynotdisplaycorrectlyonyourWebsite.
CopyFiletoProject
ExpandstodisplayalistoffoldersinthecurrentlyopenWebsiteProject.
248
Selectthefolderwhereyouwouldlikethefiletobestored,andacopyofthefile willbecreatedinthatfolder.
OpeninEditor
OpenstheselectedfileinanewtabintheEditor.
ConvertImageFormat
Allowsyoutoconverttheformatoftheimage.Werecommendusing.gif,.jpg,or .pngimagefiles.
OpeninAssociatedApplication
Openstheselectedfileintheassociatedapplication.Forinstance,ifyouselecteda PDF,itwouldopeninAdobeAcrobat.
UploadFiletoServer
249
AddorEditServers
Copy
MakesacopyoftheselectedfileandstoresthatcopyontheWindowsclipboard. Thefileisnowavailabletobepasteduntilanotherobjectiscutorcopiedtothe clipboard.
Cut
RemovestheselectedfileandstoresitontheWindowsclipboard.Itisthen availabletobepasteduntilsomethingelseiscutorcopiedtotheclipboard.
Delete
Removestheselectedfile(s).
Paste
TakesthefilestoredontheWindowsclipboardandplacesitinthefolder.Pasting afiledoesnotremoveitfromtheclipboard,soyoucanpastethesamefileasmany timesasyouneed.Inorderforthisfunctiontowork,youmustclickinanarea outsideofanyotherfiles.
Move
Opensawindowthatallowsyoutomovethefiletoadifferentlocationyour computer.
250
Rename
CreateFolder
Createsanewfolder.
Views
DisplaysalistofoptionsforhowthefilesundertheMyComputertabinthe Resourcebrowsercanbedisplayed:asicons,alist,details,smallicons,or thumbnails.Thefollowingkeyboardshortcutscanbeusedtoaccesstheseoptions: Icons Shift+Ctrl+F4 List Shift+Ctrl+F5 Details Shift+Ctrl+F7 Small Icons Shift+Ctrl+F8 Thumbnails Shift+Ctrl+F9
251
CodeSnippetsTab
TheCodeSnippetstabcontainsthepredefinedcodesnippetsthatcomewiththe program,aswellasanysnippetsyoumayhaveadded. Toaddasnippettoyourpage,doubleclickitordraganddropitintothe CodeEditor.
Code Snippets toolbar Code Snippets and Tags right-click menu
252
CodeSnippetsToolbar
TheCodeSnippetstoolbarcontainsbuttonsthatyoucanclicktoperformcertain commonlyusedactionsquickly.Rightclickingthetoolbaropensthismenu:
Refresh
RefreshesthecontentintheCodeSnippetstab.Ifyouhaverecently addedasnippetanditdoesnotappear,tryrefreshingthisarea.
InsertItemIntoCurrentDocument
InsertstheselectedcodesnippetintotheCodeEditor. Youcanalsoaddasnippetbydoubleclickingitordraggingand droppingitintotheCodeEditor.
EditSnippet
OpensthecodesnippetinitsowntabintheHTMLEditorworkspace, whichallowsyoutoeditit.
NewSnippet
OpensanewblanktabintheHTMLEditorworkspace,whichallowsyou toenterthecodeforanewsnippet.
253
TheTagstabcontainslistsofthemostcommonlyusedHTML,PHP,andCSStags. Toaddatagtoyourpage,doubleclickitordraganddropitintotheCodeEditor. Tocustomizewhich(X)HTMLentitiesappearintheCodeCompletion list,gotoEdit>EditXHTMLTags.ThisopenstheEditXHTMLTags window,whichallowsyoutoadd,modify,ordelete(X)HTMLtags, attributes,andattributevalues.Foradetailedtutorialthatoutlinesthisprocess, readCustomizingCodeCompletionTags.
TagsTab
Tags toolbar Code Snippets and Tags right-click menu
254
TagsToolbar
TheTagstoolbarallowsyoutoselectwhichgroupoftagsisdisplayed.Right clickingthetoolbaropensthismenu:
HTMLTags
DisplaysalistofthemostcommonlyusedHTMLtags.
PHPTags
DisplaysalistofthemostcommonlyusedPHPtags.
CSSTags
DisplaysalistofthemostcommonlyusedCSStags.
255
CodeSnippetsandTagsRightClickMenu
RightclickingtheCode SnippetsorTagstabopensa menuthatallowsyoutowork withtheselectedtagorcode snippet. OnlytheInsert ItemIntoCurrent Documentoptionworksinbothtabs.
NewSnippet(CodeSnippetTabOnly)
OpensanewblanktabintheHTMLEditorworkspace,whichallowsyoutoenter thecodeforanewsnippet.
DeleteSnippet(CodeSnippetTabOnly)
Deletestheselectedsnippet.
InsertItemIntoCurrentDocument
InsertstheselectedtagorcodesnippetintotheCodeEditor. Youcanalsoaddatagtoyourpagebydoubleclickingitordraggingand droppingitintotheCodeEditor.
OpeninNewWindow(CodeSnippetTabOnly)
OpensthecodesnippetinitsowntabintheHTMLEditorworkspace,which allowsyoutovieworeditit.
256
CharactersTab
TheCharacterstabdisplaysalistofHTMLentitiesforcommonlyusedspecial characters. ToaddanHTMLentitytoyourpage,doubleclickitordraganddropit intotheCodeEditor.
257
WorkingWithWebsiteProjects
WecannotstressenoughhowimportantWebsiteProjectsare.Ifusedcorrectly, thistoolcanmakebrokenlinksathingofthepast.Youllneverseethosepeskyred Xsinsteadofyourimagesagain.YourWebsitesstructurewillbeorganizedand intuitive.Youllruletheworld! Okay,youwontruletheworld,butyouwillsaveyourselfatonofheadaches.So, howexactlydoesthisawesometoolwork?Thisquestionactuallyhasareally lengthyanswer.Wellgooverthebasicshere,butyoushouldalsocheckouta valuableguidebuiltrightintotheHTMLEditor.GotoMyWebsites>All WebsiteProjects>WhatisaWebsiteProject.Thisopensacomprehensive documentthatwillanswerallyourquestionsaboutusingWebsiteProjects.Better yet,itactuallyisaWebsiteProject,soyoullgettoseefirsthandhowtheywork. Okay,letsdiverightin!
Step1:CreatingaWebsiteProject
TocreateanewWebsiteProject,useoneoftheseoptions: Go to My Websites > New Website Project In the My Websites tab, click the Website Projects icon and select New Website Project ThisopenstheWebsiteProjectSettingswindow,whichallowsyoutoconfigure settingsforyourWebsiteProject.
258
Hereswhatgoesintheprovidedfields:
WebsiteProjectName
ThisisthenameofyourWebsiteProject.Sinceitsjustapersonalreminder,you cannameitanythingyouwant.Ourrecommendation,justtokeepthingssimple, istogiveyourWebsiteProjectthesamenameasyourWebsite.
WebsiteProjectLocation
ThisisthelocationwhereyourWebsiteProjectfileswillbesaved.UsetheBrowse icontobrowseyourcomputerforthedesiredlocation.
259
IfyouwanttocreateaWebsiteProjectusingpreexistingfiles,selectthefolderthat containsthefilesyouwanttouse.Ifyouarestartingfromscratch,youwillneedto createablankfolderwhereyourWebsiteProjectfileswillbestored.Todothis, browseyourcomputerfortheplacewhereyouwouldliketostorethisfolder,and thenclickCreateFolder.Givethefolderaname,makesureitisselected,and thenclickOK.
Server
ThisistheserverwhereyourWebsitefileswillbestored.Youcanselectoneofthe serversyouhavealreadydefinedordefineoneusingthefieldsintheServer Configurationwindow.
260
YoucanonlyassignoneserverperWebsiteProject.Ifyouwantto uploadanyorallofyourWebsiteProjectfilestoadifferentserverthan theonespecifiedinthisfield,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.
ConfigureServers
ThisopenstheServerConfigurationwindow,whichallowsyoutoconfigurea neworexistingserverprofile.
RemoteRootFolder
ThisistherootfolderwhereyourWebsitefilesarestoredonyourserver.Common namesincludewww,public_html,orweb.Ifyouarenotsureofthisinformation, contactyourhostingprovider.
ServerURL
ThisistheTCP/IPhostnameofyourFTPserver.ItshouldbeintheformofanIP address,yourdomainname(e.g.yourdomain.com),oryourdomainname precededbyftp.(e.g.ftp.yourdomain.com).Donotincludeftp://orany directorynamesuchasftp.yourdomain.com/mysite,becausetheseareinvalid TCP/IPhostnames.ItisuptoyourWebhostingcompanytoassignyourFTP serverhostname,soyouwillneedtofindoutfromthemwhatitis. ExamplesofvalidWebserveraddresses ftp.mysite.com 24.24.100.100 mysite.com ExamplesofinvalidWebserveraddresses ftp://ftp.mysite.com ftp.mysite.com/mysite http://www.mysite.com
CheckDependenciesBeforeUploadingFiles
Thischecksyourdocumentdependenciesbeforeuploadingyourfilestoyour servertomakesuretheyarereferencedcorrectly.WebsiteProjectdependencies arelinksandexternalfiles,suchasstylesheets,images,etc.basicallyanything thatyourHTMLfilelinksto.Ifoneormoreofyourdocumentdependenciesarent referencedcorrectly,youwillreceiveinformationabouttheincorrectlyreferenced dependency.
261
IfDependenciesAreMissingFromLocalSystem,CancelFile Upload
Checkingthisboxcancelsthefileuploadifanyofthedocumentdependenciesare notlocatedintherightplaceinyourWebsiteProject.
WhenUploadingFiles
Youcanchoosetoalwaysuploaddependentfiles(likeimagesandstylesheets), neveruploadthem,orhavetheprogramconfirmwithyoubeforeuploadingthem. Whenyouredonefillingoutthesefields,clickOK.YournewWebsiteProjectwill appearintheMyWebsitestab.
YoucanalwaysreturntotheWebsiteProjectSettingswindowtomodifythese changeslaterusingoneoftheseoptions: Go to My Websites > Website Project Settings In the My Websites tab, click the Website Projects icon and Website Project Settings
262
Step2a:AddingIndividualPagestoYourWebsiteProject
ThenextthingwellcoverisaddingpagestoyourWebsiteProject.First,createa newpageusingoneofthefollowingoptions: 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,readCreatingaNew Webpage. Next,saveyourpageusingoneofthefollowingoptions: Go to File > Save Click the Save Items icon in the Toolbar and select Save Use the keyboard shortcut Ctrl+S Thisopensawindowthatallowsyoutochoosethelocationwhereyournewpage willbesaved.Bydefault,theprogramwillpromptyoutosaveyourpagetothe rootfolderofyourWebsiteProject.EnteranameforyourpageandclickOK. IfthispageisgoingtobeyourWebsitehomepage(frontpage),nameit index.html. YourfilewillappearintheMyWebsitestab.
Step2b:AddingThemestoYourWebsiteProject
AnalternativetoaddingindividualpagestoyourWebsiteProjectistostartwitha theme.Athemeincludesthreepages(index.html,aboutus.html,andcontact
263
us.html)thatincludetheHTMLandimagesforabasicdesign,whichmeansallthe hardworkisdoneforyou. Formoreinformationaboutthemes,readtheNewFromTheme sectionofCreatingaNewWebpage. Tochooseanewtheme,useoneofthefollowingoptions: Go to File > New From Theme Click the New Items icon in the Toolbar and select New From Theme ThisopenstheThemeChooserwindow,whichallowsyoutoselectathemeyou wouldliketouseasyourWebsite.
Selectthethemeyouwouldliketouse,andthenclickOK.Thisopensawindow promptingyoutochoosetheWebsiteProjectwhereyouwouldliketosaveyour theme.
264
ChooseCurrentProject.ThethemefileswillappearintheMyWebsitestab.
Step3:AddingFolderstoYourWebsiteProject
Anorganized,intuitivestructureisareallyimportantaspectofawelldesigned Website.OneofthefirstthingsyoucandotohelporganizeyourWebsitefilesis tocreatefoldersforspecificpageelements.TakealookattheWebsiteProject createdfromatheme.SeethosesubfoldersofthemainWebsitecss,images,
265
andjs?Eachofthosefoldersisclearlylabeledwiththenameofthetypeoffileit contains.Thissystemhelpskeepeverythinginitsownplace. LetsemulatethisstructureinourblankWebsiteProject.(Ofcourse,youcanalso addfolderstoaWebsiteProjectcreatedwithatheme.)Tocreateafolder,right clickanywhereintheMyWebsitestab.Thisopensarightclickmenuthat containsoptionsforworkingwithyourWebsiteProject:
SelectCreateFolder.Thiscreatesanewfolder.Bydefault,itwillbenamedNew Folder1,butyoucangiveitanynameyouwant.Forthistutorial,letscallthisfile imagesanduseittostoreyouguesseditimages.
266
Step4:AddingOtherFilestoYourWebsiteProject
Next,letsaddsomeimagestoourimagesfolder.Todothis,switchovertothe MyComputertab.
Usetheareaatthetoptobrowseyourcomputerfortheimageyouwanttoaddto yourpage.Selectingafolderinthetopareaopensallitsfilesinthebottomarea. LetstakealookinsidePublicPictures>SamplePictures.
267
Whenyoufindtheimageyouwanttouseinthiscase,letsgowithToco Toucanrightclickit.Thisopensanotherrightclickmenuwithoptionsfor workingwiththefilesonyourcomputer.SelectCopyFiletoFolder.Thisexpands todisplayalistofthefoldersinyourWebsiteProject.
268
Sincethisisanimage,welladdittoimages>[Here].Thisopensawindowthat confirmswhetheryouwouldliketocopythefiletoyourWebsiteproject.
Next,returntoyourWebsiteProjectbyclickingtheMyWebsitestab.Expandthe imagesfolderbyclickingthelittleplussigntotheleftofit.There,youllseeyour newlyaddedimage.
269
Now,anyonefamiliarwithWebsiteswillknowthatspacesinfilenamesareatotal nono.LetsrenamethisimagetosomethingmoreWebfriendly.Torenamethe image,rightclickitandselectRename.Nowenteranewnamefortheimagein thiscase,tocotoucanshouldworkjustfine.
Step5:LinkingtoFilesandPagesinYourWebsite Project
NowthatweveaddedanimagetoourWebsiteProject,letsaddittoourpage.To dothis,rightclicktheimageandselectInsertImageIntoCurrentDocument. ThisinsertstheHTMLforanimageintheplacewhereyourcursorwaspositioned intheCodeEditor.Thecodelookslikethis: <img src="/images/toco-toucan.jpg" width="1024" height="768" alt="" border="0"> Foradetailedtutorialaboutotherwaystoaddanimagetoyourpage, readAddinganImagetoYourPage. Next,letscreatealinktoanotherpageinyourWebsiteProject.Ofcourse,before wecandothis,wellhavetoaddanotherpage.Todothis,usethemethod describedinStep2a.Forthistutorial,nameyourpageaboutus.html. Switchovertoindex.htmlbyclickingtheindex.htmltabintheStatusbaratthe bottomoftheprogram. Next,rightclickaboutus.htmlandselectInsertasLinkIntoCurrent Document.ThisinsertstheHTMLforalinkintheplacewhereyourcursorwas positionedintheCodeEditor.Thecodelookslikethis:
270
<a href="about-us.html"></a> Next,letsentersomelinktext,whichisthetextyouruserwillclicktobetakento aboutus.html.Bydefault,linktextisblueandunderlined.Forthistutorial,well usethisasthelinktext:Learnmoreaboutus!Yourcodewilllooklikethisnow: <a href="about-us.html">Learn more about us!</a> Finally,justforthesakeofformatting,letsputthislinkinsomeparagraphtags. 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 Foradetaileddescriptionaboutotherwaysyoucanaddthemany differentkindsoflinkstoyourpage,readWorkingWithLinks.
Step7:PreviewingYourWebsiteProject
LetstakealookathowyourWebpagelooks!Todothis,clicktothePreviewtab atthetopoftheprogram.ThePreviewtabisabuiltinWebbrowser(Internet Explorer,tobeexact),soyoullgetachancetotestyourWebpageinitsnative environment.
271
Okay,admittedlyitsprobablynottheWebsiteofyourdreams,butitsastart. Yourimagedisplayscorrectly,andyourlinkpointstoyourAboutUspage. Foradetailedtutorialaboutthemanydifferentwaysyoucanpreview yourwork,readPreviewingYourWork.
Step8:UploadingYourWebsiteProject
EventhoughyourWebsiteisntquitedoneyet,letsstillwalkthroughthesteps involvedinuploadingit.ItsprettysimplejustclicktheToolsiconatthetopof theWebsiteProjectstabandselectUploadEntireWebsiteProject.Thisopens theUploadFilestoServerwindow,whichdisplaysthestatusofyourfileupload.
272
Thiswindowclosesautomaticallyoncetheuploadiscomplete.Nowyoucan switchovertotheServertabandcheckoutyourfilesonyourserver!
Youllnoticethatyourfilestructureisperfectlypreserved,whichmeansallyour linksandimageswillbereferencedcorrectly. WhatifyoudontwanttouploadyourentireWebsiteProject?Easy:Justselectthe file(s)youwanttoupload,andthenuseoneoftheseoptions: Click the Tools icon and select Upload Selected Files Right-click the selected file(s) and select Upload Selected Files ThecoolthingaboutWebsiteProjectsisthatevenwhenyoureuploading individualfiles,yourfilestructurewillstillbepreserved. Andthatsprettymuchit!Bynow,youshouldhaveaprettygoodideaofhowto useWebsiteProjects.Ifyouwantanyadditionalinformation,wehighly recommendcheckingoutthesampleWebsiteProjectincludedintheHTML Editor.Toaccessit,gotoMyWebsites>AllWebsiteProjects>Whatisa WebsiteProject.
273
CreatingaNewWebpage
TherearefourwaystocreateanewpageintheHTMLEditor:usingtheQuick StartWizard,startingfromscratch,usingalayout,orloadingatemplate.
NewBlankPage
ThisoptionisbestforpeoplewhowanttojumprightintocodingtheirWebsite.If thatsoundslikeyou,hereswhatyougottado:
Step1
OpentheHTMLEditorandselectNewBlankPagefromtheWelcomewindow.
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
Step2
AnewblankpagewillopenintheCodeEditor.Bydefault,newpagesinclude somebasicHTMLtohelpgetyoustarted.ThisincludestheDOCTYPE,html, head,title,meta,andbodytags,andanHTMLcommentstatingthatthepagewas createdwithCoffeeCupHTMLEditor. Andthatsallthereistoit!Letthecodingbegin.
274
NewFromQuickStart
Ifyouwanttocustomizeyourpagebeforeyougetstarted,thisisprobablythe optionforyou.TheQuickStartWizardletsyouspecifysomebasicpage properties,includingthetitle,DOCTYPE,characterset,metainformation, background,andcolorscheme.Whenyouredonespecifyingthisinformation,the correspondingcodeisautomaticallyaddedtoyourpage.Hereshowtogetstarted withtheQuickStartWizard:
Step1
OpentheHTMLEditorandclosetheWelcomewindow.
Step2
OpentheQuickStartwindowusingoneoftheseoptions: Go to File > New From Quick Start Click the New Items toolbar icon and select New From Quick Start.
Step3
EnterthefollowinginformationintheprovidedfieldsintheQuickStartwindow.
275
PageTitle
ThetextdisplayedinthebaracrossthetopofaWebbrowserandthatalso appearsinsearchresults.Agoodpagetitlesuccinctlydescribesthecontentonthe page.Forexample,letssayyourWebsiteisnamedMyHimalayanAdventures, andyouuseittoblogyouradventuresclimbingintheHimalayas.Ifthisparticular WebpagedescribesyourtripupK2,yourpagetitlecouldbeanyoneofthese: MyHimalayanAdventures|ConqueringK2 MyHimalayanAdventures|MyTripupK2 MyHimalayanAdventures|ClimbingK2:WhattheHellWasIThinking? YoumayhavenoticedthatthenameoftheWebsiteisincludedinallthesetitles, andtherestofthedescriptionisseparatedbythepipecharacter.Thisisnt required,butitlooksniceandkeepsthenameofyourWebsitefreshinyour visitorsminds.
BackgroundImage
Toselectabackgroundimageforyourpage,enterthefilepathinthisfieldorclick theBrowseicontobrowseyourcomputerfortheimageyouwishtouse.To removeabackgroundimage,clicktheredXicon. Ifyouchoosetouseabackgroundimage,itshouldbecleanandsimple.Flashy backgroundimagescanbedistractingorlookamateurish.TheHTMLEditor automaticallyrepeatsthebackgroundimagetofitthesizeofthepage,soyour imageshouldlooknaturalwhenrepeated.Whenyoubrowseforabackground image,thedefaultfoldercontainspredefinedbackgroundsthatcomewiththe HTMLEditor.YoucanuseanyoftheseinyourWebsite,orusethemasaguidefor whatyourcustombackgroundimageshouldlooklike.Forthistutorial,well browseforanimage,openthebeigefolder,andselectbasket.jpg.
Colors
Therearefivecoloroptionsavailable:pagebackground,text,andthreedifferent statesoflinks:visited,unvisited,andactive.Avisitedlinkisalinkthathasalready beenclickedbytheuser,andanunvisitedlinkhasnotbeenclickedbytheuser.A linkisactivewhileauserisclickingit. Tochangethecolorofanyoftheseelements,clickthecolorswatchnexttoit.This opensadropdownlistof40basiccolors.
276
Clickwhichevercoloryouwouldliketoapply.Tobrowseevenmorecolors,click MoreColors.Thisopensarainbowgradientthatallowsyoutoadjustbrightness andselectfromawiderrangeofcolors.
Toselectoneofthesecolors,clickthecoloryouwanttouse,andthenadjustthe sliderontherighthandsidetochangethebrightness.
Ifyouwouldliketouseapredefinedcolorschemeforthesecoloroptions,youcan selectonefromtheColorSchemedropdownlist.
277
Topreviewhowaschemelooks,selectitfromthelist.Youcanalwayscustomizeit orreturntothedefaultbyselecting(Default).Forthistutorial,wellstickwiththe defaultthemewhyrocktheboat?
Save
Ifyoudochoosetouseoneofthecolorschemes,butdecidetochangeoneor moreoftheoptions,clickthisbuttontosavethesechangestothescheme.This overwritesthedefaultscheme,somakesureyoureallywanttoreplaceitbefore yousaveoverit!
SaveAs
Ifyoucreateacustomcolorschemeorcustomizeoneoftheexistingthemesand dontwanttooverwriteit,clickthisbuttontosavethechangesunderanewname. Thisopensawindowthatallowsyoutoenteranameforyournewscheme.
AfteryouclickOK,theschemewillbeavailableundertheColorSchemedrop downlist.
Delete
Clickthisbuttontodeletetheselectedscheme.Thischangeispermanent,so makesureyoureallywanttodeleteitbeforeyougoaheadandclickthisbutton!
278
DontUnderlineLinks
Checkthisboxifyouwouldliketoremovetheautomaticunderlinefromyour links.Werecommendkeepingtheunderlineitsoneofthemainwaysyour visitorswillbeabletodistinguishyourlinksfromyournormaltext,sowhymake thingsmoredifficultforthem?
DOCTYPE
SelectthedesiredDOCTYPEfromthisdropdownlist.ADOCTYPEtellstheWeb browserthetypeandversionofthelanguagethepageiswrittenin.
Charset
Selectyourpreferredcharactersetfromthisdropdownlist.Acharactersetisthe setofcharactersavailabletobeusedinyourcodeandonyourWebsite.For example,ifyouwanttocreateaWebsiteusingCyrillic,thatwoulduseadifferent charactersetthanaWebsitethatusedtheLatinalphabet.
MetaDescription
ThisisashortdescriptionofyourWebsitethatsometimesappearsinsearch results.Itshouldbenolongerthan50words.
MetaKeywords
ThesearewordsthatdescribeyourWebpage.Theymusteachbeseparatedbya commaandaspace.
Step4
Whenyouredoneenteringthisinformation,clickOK.Thecodewillbeinserted intoyourpageforyou. Yourealldonegettingstartedtherestisinyourhands!
NewFromLayout
Thisoptionallowsyoutochooseabasiclayouttostartwith.Alayoutcontainsthe HTMLforabasicpagestructure.Thisisagoodstartingplaceforpeoplewhowant tostartwithabarebonesstructureandaddadesignfromthere.Hereshowtoget startedwithlayouts:
Step1
OpentheHTMLEditorandclosetheWelcomewindow.
Step2
OpentheLayoutChooserusingoneoftheseoptions: Go to File > New From Layout Click the New Items toolbar icon and select New From Layout.
279
Step3
SelectthedesiredlayoutfromtheLayoutChooser.
YoucanpreviewhowthedifferentlayoutslookinthePreviewarea.(FYI,liquid layoutsresizeautomaticallytofitthesizeoftheusersbrowser,whereasfixed layoutsalwaysstaythesamesize.)
Step4
Whenyoufindalayoutyoulike,clickOK.Thecodewillbeinsertedintoyour pageforyou. Oncethecodeisinserted,youcanreplacethegenerictextwithyourown,tweak elementsofthecode,addimages,andwhateverelseyouneedtocompleteyour Webpage!
NewFromTheme
Ifyoureatotalbeginnerandhavenoideawheretostart,thisistheplace.This optionisalsogreatifyouwanttoputtogetheraprofessionallookingWebsitewith aminimumofmuss,fuss,andtime.Athemeincludesthreepages(index.html, aboutus.html,andcontactus.html)thatincludetheHTMLandimagesforabasic designwhichbasicallymeansallthehardworkisdoneforyou!Hereshowyou getstartedwiththemes:
Step1
OpentheHTMLEditorandselectStartWithaThemefromtheWelcome window.
280
IfyoualreadyhavetheEditoropen,opentheThemeChooserusingoneofthese options: Go to File > New From Theme Click the New Items toolbar icon and select New From Theme.
Step2
SelectthedesiredthemefromtheThemeChooser.
281
YoucanpreviewhowthedifferentthemeslookinthePreviewarea.
Step3
Whenyoufindathemeyoulike,clickOK.Thecodewillbeinsertedintoyour pageforyou. Oncethecodeisinserted,youcanreplacethegenerictextandimageswithyour own,tweakelementsofthecode,anddowhateverelseyougottadotocomplete yourWebpage!
282
Therearetwodifferentmethodsofaddinganimagetoyourpage:UsingtheInsert ImagewindowandusingtheResourcebrowser.TheInsertImagewindowisa goodchoiceifyouwanttospecifyimageattributesand/orcreateathumbnail versionoftheimage.TheResourcebrowserisbestifyouwanttoskipallthat stuffandjustaddanimagetoyourpage.
AddinganImagetoYourPage
Method1:InsertImageWindow
Thismethodisagoodchoiceifyouwanttospecifyimageattributesand/orcreate athumbnailversionoftheimage.Thereareafewdifferentwaystoreachthe InsertImagewindow: 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,whichallowsyouto chooseanimageandspecifyadditionalinformation,likealttext,alignment, border,size,andotherfancystuff,likeaddingalinkorcreatingathumbnail.
283
Hereswhatyoudo:
Step1:LocateYourImage
Usethefilebrowseareaonthelefthandsideofthewindowtolookthroughyour computerfortheimageyouwanttouse.Whenyoufindtheimageyouwant,click itwithyourmouse.Fornow,theimagemaybelocatedanywhereonyour computeryoullgetachancetosaveitinyourWebsiteProjectorWorking folderinafewsteps. IfthephrasesWorkingfolderandWebsiteProjectleftyouscratching yourhead,takesometimetocheckoutthistutorial:WorkingWith WebsiteProjects.
Step2:EnterGeneralInformation
NowyoucanusethefieldsundertheGeneraltabtoentersomeadditional informationabouttheimage.Itsbynomeansnecessary,butitcanhelpyourpage loadmoreefficientlyandmakeyourpagemoreaccessibletodisabledusers.Well gothrougheachfieldstepbystep,andyoucandecidewhichyouwanttoinclude. Inthisexample,wehavechosenapictureofalandscapethatwillbefeatured prominentlyonourpage.
Image
Thisiswherethepathtotheimagegoes.Ifyouhaveselectedanimageusingthe filebrowsesectiononthelefthandsideofthewindow,thepathwillautomatically
284
appearinthisfieldforyou.Ifyoujusthappentoknowthefilepathoffthetopof yourhead,youcanalsoenteritmanually.
Alt
Thisfieldcontainswhatscalledalttext,whichisadescriptionoftheimagethat isdisplayedwhentheimagecannotbeshown.Thisismostcommonlyusedin textonlyorspeechbrowsers,whichtheblindusetoaccesstheInternet,butitalso appearsbeforetheimageloadsifsomeoneissurfingtheWebonaslow connection.Youshouldalwaysincludedetailedalttextforallprominentor contextuallyimportantimagesonyourWebpage,otherwiseyouruntheriskof someusersnotgettingthefullgistofyourWebpage.Sincetheimageweareusing isimportanttoourpage,wellusethealttextAdesertlandscape.
Title
Atitleisadescriptionoftheimagethatpopsupinatooltipwhentheuserholds theirmouseovertheimage.Thiscanbeusedtoprovideadditionalinformation abouttheimage.Forthistutorial,wellusethelocationofthelandscapeandthe datewhenwetookthepictureasourtitle.Itsnotnecessaryinformation,butsome usersmightfinditinteresting,sowhynotincludeit?
Align
Selectthealignmentoftheimagefromthisdropdownlist.Theoptions shouldbeprettyselfexplanatory,butincaseyourewonderingabout them,youcancheckoutahandyguideatHTMLCodeTutorial (http://www.htmlcodetutorial.com/images/_IMG_ALIGN.html).Well keepitsimpleandselectleftforourimage.
Border
Thisisablackborder,measuredinpixels,thatappearsaroundtheimage.The largerthenumber,thethickertheborder.Foratypicalborder,werecommend usinganumberbetween1and5.Ourimageisntgoingtouseaborder,sowell keepitsetto0.
WidthandHeight
Thesefieldsdisplaythewidthandheightofyourimage,andtheseattributesare includedintheHTMLforyourpage.Thisishelpfulbecauseittellsthebrowser howmuchspacetoallotfortheimage.IfauserisviewingyourWebpageonaslow connection,thiswillensurethatthetextisformattedproperlyevenbeforethe imageloads.Forthatreason,itsimportanttoincludethesizemeasurements.If youdecideyoudrathernot,justunchecktheIncludesizecheckbox.Wellleave itcheckedinthisexample. Youcanalsousethesefieldstoresizeyourimage,butbecarefulifyou do!Theimageresizefeatureshouldonlybeusedtomakeminor
285
adjustments,sincetheHTMLEditordoesntmaintaintheaspectratio.Thismeans thatunlessyouknowtheexactratioofthewidthtotheheight,yourimagewill likelyendupdistorted.Ifyouneedtomakechangestothesizeofyourimage,save yourselfaheadacheanduseanimageeditingprogram.
URLtoLinkTo
Ifyouwouldliketomaketheimageintoaclickablelink,usethisfieldtoenterthe URLwhereyouruserwillbetakenwhentheyclicktheimage.Ifyouarelinkingto anexternalWebsite,besuretoincludethefullWebaddress,includingthe http://wwwbit. IfyouarelinkingtoapageordocumentinyourWebsite,youcanusearelative linkbyclickingthefileicontobrowseyourcomputerforthefileyouwanttolink to. Carefulwhereyoulink!Ifthefileyoulinktoisntlocatedinyour WorkingfolderoryourWebsiteProject,itmaynotbereferenced correctlymeaningthelinkwontwork.Needmoreinformationabout workingwithWebsiteProjects?Checkoutthistutorial:WorkingWithWebsite Projects.
Step3:CreateaThumbnail
Thisstepistotallyoptional.Thumbnailsareusuallyusedtolinktothelarger originalversionoftheimage.Thisgivesyouabitmoredesignfreedom,sinceyou donthavetoworkaroundtonsoflargeimages,andusersonslowconnectionswill thankyoufornotincreasingdownloadtimeswithtonsoflargefiles. Ifyourejustaddingaregularolimagetoyourpage,youcanskipthispartandgo straighttoStep4.Butifthissoundsuseful,switchovertotheThumbnailtaband followalong!
286
CreateandInsertImageasThumbnail LinktoOriginalImage
Selectthischeckboxifyouwouldliketousetheimageasathumbnail. Selectthischeckboxifyouwouldlikethethumbnailtolinktotheoriginalimage.
ThumbnailFilenamePrefix
Thisisaprefixthatappearsatthebeginningofthethumbnailfilename.Sincethis featurecreatesanew,smallerversionoftheimageyouadded,itneedsanewname todifferentiateitfromtheoriginal.Thedefaultprefixistn_,butyoucanchangeit towhateveryouwant.
ThumbnailWidthandHeight
Enterthewidthandheightofthethumbnailhere.TheHTMLEditormaintainsthe aspectratioforthumbnails,whichmeansyourthumbnailwontendupdistorted.
ThumbnailFormatandQuality
Choosethedesiredimagefileformat(.gifor.jpg)andquality(6595).Keepin mindthathighqualityimageslookbetter,butarealsolarger,whichcanmakefor longerdownloadtimes.Intodaysdayandage,ahighqualityimageisntreally goingtoslowanyonedown,sodontfeelguiltyaboutsplurgingandgoingwitha qualityof95.
Step4:AddingYourImagetoYourWorkingFolderor WebsiteProject
Whenyouredoneenteringalltheadditionalinformation,clickOK.Thisopensa windowthatasksifyouwanttocopyyourimagefiletoyourWebsiteProject.
287
Wecantstressenoughhowimportantitistosaveyourimagestoyour WebsiteProjectorWorkingFolder!Ifyoudont,theymaynotbe uploadedtoyourserver,whichmeanstheywontshowuponyour Website.Instead,youllgetthoseannoyingredXsnottomentiona hugeheadache.
Method2:ResourceBrowser
Usingthismethod,youcansimplydraganimagefromtheResourcebrowseron thelefthandsideofthescreentoyourpage.Heresthestepbystepversion:
288
Step1
OpentheMyComputertabintheResourcebrowseronthelefthandsideofthe program.
Step2
Usetheareaatthetoptobrowseyourcomputerfortheimageyouwanttouse. Selectingafolderinthetopareaopensallitsfilesinthebottomarea.
Step3
Whenyouhavefoundtheimageyouwanttoadd,useyourmousetodragitto yourWebpage.Thisopensawindowthatasksifyouwanttocopyyourimagefile toyourWebsiteProject.
289
Wecantstressenoughhowimportantitistosaveyourimagestoyour WebsiteProjectorWorkingFolder!Ifyoudont,theymaynotbe uploadedtoyourserver,whichmeanstheywontshowuponyour Website.Instead,youllgetthoseannoyingredXsnottomentionahuge headache.
Step4
Theimagewillnowappearonyourpagewithoutanyspecialformatting.Ifyou needtoworkwiththealignment,bordersettings,alttext,oranyotherassociated attributes,switchtotheCodeEditorifyouarenttherealready,andtheneditthe codedirectly.
290
HowtoChangetheAppearanceofText
Unlikepeople,notalltextiscreatedequal.Sometextisboldoritalicized.Other textcanbedifferentcolors,suchasred,blue,ororange.Sometextis
enormous,whereasothertextisdownright
tiny.
Ifallthosedifferentformatsdidntinspireyoutochangethestyleofthetexton yourpage,nothingwill!Thereareacoupleofdifferentwaystochangethe appearanceofyourtextintheHTMLEditor.Totweakbasicattributes,suchas size,color,andeffectslikebold,italic,andunderline,thereareafewquickneasy toolsyoucanuse.OpenuptheFormatmenuandtakealookatthefirsthalfof theoptions:
Theseoptionsareprettyselfexplanatory.Tousethem,justhighlightthetextyou wanttochange,andthenselecttheattributeyouwanttoapply.Youcanalso accesstheseoptionswiththekeyboardshortcutsdisplayedintheFormatmenu, aswellasintheCodeandVisualEditorrightclickmenuandtoolbar. Tomakemoreindepthchangestoyourtext,usetheFontWizard.Hereshow:
Step1
Highlightthetextyouwanttochange.
291
Step2
OpentheFontWizardbygoingtoFormat>FontWizard,clickingtheFonticon intheCodeorVisualEditortoolbar,orrightclickingandselectingFont>Font Wizard
Step3
StartworkingwiththeoptionsintheFontWizard!Thistoolallowsyoutochange thetypeface,effects(bold,italic,strikethrough,orunderline),position(normal, subscript,orsuperscript),size,andcolorofthefont.Letstakeadeeperlookat theseoptions:
Fonts
Selectthefontyouwanttousefromthislist,andthenapplyittoyourtextusing oneofthethreeAddasFontbuttonstotheright. Whyaretherethreefontboxes?Well,justlikefonts,noteverycomputeriscreated equal.Yourcomputermighthavesomecrazyfunkyfreshfontinstalledthatlllook justperfectonyourWebsite,butthatsamefontmightnotbeinstalledon someoneelsescomputer.Whenthathappens,theotherpersonsWebbrowser
292
defaultstoadefaulttoagenericfont(usuallyArialorsomethingsimilar).Thiscan messuptheappearanceofyourWebsite,withwordsrunningoutofboxes, elementsgettingpushedoutofthewayofmaraudingtext,andothersuchchaos thatbasicallymessesupyourentireWebsite.Yikes! YoucanavoidthismessbyusingWebsafefonts.Thesearefontsthatare installedoneverycomputerbydefault,whichmeansthattheywillalwaysdisplay correctlyoneverycomputer.Theyincludesuchtimelessclassicsas: Times New Roman Arial Impact Trebuchet MS Arial Black Comic Sans MS Verdana Courier New Georgia So,ifWebsafefontsareso,well,safe,thenwhydoesn'teveryoneusethem? Frankly,becausethey'rekindofboring.Fortunately,theHTMLEditorgivesyou threechoices.ForFont1,useyourfirstchoicefont.Goasfunkyandcrazyasyou want,andifthefonthappenstobeinstalledonyouruser'scomputer,awesome!If not,thebrowsercanjustlookforthesecondfontyouspecified.MakeFont2and Font3Websafe,andyoullbegolden.Forextrasecurity,youcanalsoselecta genericfont,whichalwaysdisplayscorrectly,fromtheGenericdropdownlist. Genericfontsaretotallynofrills,butyoucanrestassuredthattheyllalwayswork, eveninthevery,veryrareinstancewhenaWebsafefontmightnot. Byspecifyingmultiplefonts,youcantellthebrowsertofirsttryafancy,nonWeb safefont.Thatway,youcanmakesurethatyourWebsitewilllookgoodwhether you'reusingacool,customfontorasecure,Websafefont.
Effects
Selectfrombold,italic,strikethrough,orunderline.
TextPosition Size
Selectwhetheryourtextwillappearnormallyorasasubscriptorsuperscript.
Selectafontsizefrom1(8pt)to7(
36pt
).
Color
Toselectacolorforyourtext,clickthecolorswatch.Thisopensadropdownlist of40basiccolors.
293
Ifyouseeacoloryoulike,clickit.Ifyouwanttoseeevenmorecolors,clickMore Colors.Thisopensarainbowgradientthatallowsyoutoadjustbrightnessand selectfromawiderrangeofcolors.
Step4
Whenyou'redoneformattingyourtextoptions,clickOK.Allthecodewill automaticallybeaddedtoyourpageforyou!
294
WorkingWithLinks
Howimportantarelinks?Wickedimportantitsnoexaggerationwhenwesay thatwithoutthem,theInternetasweknowitwouldntexist. Thissectionwillteachyouthebasicsaboutabsoluteandrelativelinks,andthen walkyouthroughtheprocessofaddinglinksyourpagesintheHTMLEditor.To skipaheadtothetutorials,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.RelativeLinks
OneofthemostcommonthingsnewcomerstoHTMLgetconfusedaboutis linkingtootherpagesandsites,especiallywhenabsoluteandrelativepathscome intoplay.Butworrynot!Creatinglinksrelativeandabsolutealikeisactually fairlyeasy.Readon,andbytheendofthisarticle,you'llknowthedifference betweenthesetwotypesoflinks,aswellaswhenandhowtousethem. WhenyoucreatelinksusingtheWebsiteProjectstool,itautomatically createsvalidrelativelinksforyouonelessthingtothinkabout!Of course,itsstillimportanttounderstandhowthisallworks,soreadon Firstoff,asyoumayormaynotknow,youwouldusethefollowingcodetocreate alinkinHTML: <a href=linkhere.html>Click Me</a> linkhere.htmlwouldbethepageyouwanttolinkto,andClickMewouldbethe blue,underlinedlinkthatthepagedisplays. Intheexampleabove,weusedarelativepath.Youcantellifalinkisrelativeifthe pathisn'tafullWebsiteaddress.(AfullWebsiteaddressincludeshttp://www.)As youmayhaveguessed,anabsolutepathdoesprovidethefullWebsiteaddress. Hereareafewexamplesofrelativeandabsolutepaths: RelativePaths index.html /graphics/image.png /help/articles/howdoisetupawebpage.html
295
AbsolutePaths http://www.mysite.com http://www.mysite.com/graphics/image.png http://www.mysite.com/help/articles/howdoisetupawebpage.html Thefirstdifferenceyou'llnoticebetweenthetwodifferenttypesoflinksisthat absolutepathsalwaysincludethedomainnameoftheWebsite,including http://www.,whereasrelativelinksonlypointtoafileorafilepath.Whenauser clicksarelativelink,thebrowsertakesthemtothatlocationonthecurrentsite. Forthatreason,youcanonlyuserelativelinkswhenlinkingtopagesorfiles withinyoursite,andyoumustuseabsolutelinksifyou'relinkingtoalocationon anotherWebsite. So,whenauserclicksarelativelink,howdoestheirbrowserknowwheretotake them?Well,itlooksforthelocationofthefilerelativetothepagewherethelink appears.(That'swherethenamecomesfrom!)Let'sgetbacktoourfirstexample: <a href=linkhere.html>Click Me</a> Thislinkpointstoafilename,withnopathprovided.Thismeansthat linkhere.htmlislocatedinthesamefolderasthepagewherethislinkappears.If bothfileswerelocatedintherootdirectoryoftheWebsite http://www.website.com,theactualWebsiteaddresstheuserwouldbetakento ishttp://www.website.com/linkhere.html.Ifbothfileswerelocatedina subfolderoftherootdirectorycalledfiles,theuserwouldbetakento http://www.website.com/files/linkhere.html. Howaboutanotherexample?Let'ssayweourhttp://www.website.comdomain hadasubfoldercalledpictures.Insidethepicturesfolderisafilecalled pictures.html.Thefullpathtothispagewouldbe http://www.website.com/pictures/pictures.html. Stillwithme?Good.Let'ssayinthispictures.htmlfile,wehavealink: <a href=morepictures.html>More Pictures</a> Ifsomeoneclickedthatlink,wheredoyouthinkitwouldtakethem?Ifyousaid http://www.website.com/pictures/morepictures.html,you'dberight!You probablyknowwhyitwouldtakethemthere:becausebothfilesaresavedinthe picturessubfolder. Now,whatifwewantedtousearelativelinktoshowapageinanotherfolder?If youwanttolinktoafileinasubfolderofthecurrentfolder,providethefilepath tothatfile,likeso:
296
<a href=/pictures/tahiti-vacation/tahiti.html>Read about my Tahiti vacation.</a> Inthisexample,you'retellingthebrowsertolookinthecurrentfolder(pictures) forasubfolder(tahitivacation)thatcontainsthefileyouwanttheusertakento (tahiti.html).Youcanlinktoasmanysubfoldersasyouneedusingthismethod. Whatifyouwanttolinktoafileinafolderabovethecurrentfolder?Youhaveto tellthebrowsertomoveuponefolderinyourrelativelinkbyputtingtwoperiods andaslash(../)infrontofthefilenameorpath: <a href=../about.html>Learn more about my Website.</a> Whenthebrowsersees../infrontofthefilename,itlooksinthefolderabovethe currentfolder.Youcanusethisasmanytimesasyouneedto. Youcanalsotellthebrowsertolookinasubfolderofthedirectoryabovethe currentone.UsingthesameexampleWebsitefromabove,let'ssaywewantedto createalinkthatwouldtaketheusertoapagecalledstories.htmllocatedin anotherfoldercalledstories.Thisfolderislocatedintherootdirectory,onefolder upfromthecurrentfolder,pictures.Here'showarelativelinktothisfilewould look: <a href=../stories/stories.html>Read Stories</a> Now,let'stalkaboutabsolutepaths.Likewementionedearlier,absolutepaths providethecompleteWebsiteaddresswhereyouwanttheusertogo.Anabsolute linkwouldlooklikethis: <a href=http://www.coffeecup.com>Click here to visit CoffeeCup Software.</a> YoumustuseabsolutepathswhenlinkingtoanotherWebsite,butyoucanalso useabsolutepathswithinyourownWebsite.Thispracticeisgenerallyfrowned upon,though.Relativelinksmakeiteasytodothingslikechangeyourdomain namewithouthavingtogothroughallyourHTMLpages,huntingdownlinksand changingthenames.Asanaddedbonus,theyforceyoutokeepyoursitestructure neatandorganized,whichisalwaysagoodidea.
297
AddingaLinktoYourPage
OpentheInsertLinkwindowusingoneoftheseoptions: 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,whichallowsyoutoinsertalinkand anyassociatedattributes.
Letsgooverwhateachofthesefieldsdoes. Thetextyouruserwillclick.Bydefault,linktextisblueandunderlined.Inthe exampleabove,thelinktextwouldlooklikethisonyourWebpage: Clickhereforgreatsoftware!
LinkText
298
URL
Thisisthelocationwhereyouruserwillbetakenwhentheyclickthelinktext.If youarelinkingtoanexternalWebsite,youmustincludethefulllink,including http://andwww,ifapplicable.TheexampleabovelinkstoanexternalWebsite, http://www.coffeecup.com.Ifyouarelinkingtoapageordocumentinyour Website,youcanusearelativelinkbyclickingthefileicontobrowseyour computerforthedesiredpage.Youshouldmakesurethefileislocatedinyour WorkingfolderoryourWebsiteProjecttomakesureitisreferencedcorrectly. FormoreinformationaboutusingWebsiteProjects,readWorkingWith WebsiteProjects.
Target
Thisistheframeyouwantthelinktoopenin,andisonlynecessaryifyouare usingframesorifyouwanttoopenthelinkinanewwindow.Toopenthelinkin anewwindow,selectNewBrowserWindow(target="_blank"). Foradetailedtutorialaboutusingframes,readHowtoUsetheFrame Designer.
Title
Thisisadescriptionofthelinkthatappearsasatooltipwhenyouruserholdstheir mouseoverthelink.Itstotallyoptional,butitisanicesourceofinformationfor yourusers.
Ifyoucheckthisbox,adescriptionofthelinkwilldisplayintheStatusbaratthe bottomoftheWebbrowserscreenwhenyouruserholdstheirmouseoverthe link.ThisoptionisonlyenabledinInternetExplorer,soitsbesttouseatitle insteadifyouwanttoprovidethisadditionalinformation.
IfyoudodecidetouseaStatusbarmessage,typeitinthisfield. Whenyouredonefillingoutallthisinformation,clickOK.Thecodewill automaticallybeinsertedwhereveryourcursorwaspositionedonyourpage.You canmoveitaroundbyselectingitanddraggingittothedesiredlocationonthe page.
299
AddinganEmailLinktoYourPage
OpentheInsertEmailLinkwindowusingoneoftheseoptions: 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 TheseoptionsopentheInsertEmailLinkwindow,whichallowsyoutoinsertan emaillinkandanyassociatedattributes.Whenyouruserclicksonthislink,their defaultemailclient(Thunderbird,OutlookExpress,etc.)willopenwiththise mailaddressintheTo:field
LinkText
Thisisthetextyouruserwillclick.Bydefault,linktextisblueandunderlined.In theexampleabove,thelinktextwouldlooklikethisonyourWebpage: Clickheretogetintouch.
300
EmailAddresstoLinkTo
Thisistheemailaddressthatwillappearintheusersdefaultemailclientwhen theyclickthelinktext.
Subject
WhatevertextyouenterinthisfieldwillautomaticallyappearintheSubjectfield inyourusersemailclient.
Ifyoucheckthisbox,adescriptionofthelinkwilldisplayintheStatusbaratthe bottomoftheWebbrowserscreenwhenyouruserholdstheirmouseoverthe link.ThisoptionisonlyenabledinInternetExplorer,soitsbesttouseatitle insteadifyouwanttoprovidethisadditionalinformation.
IfyoudodecidetouseaStatusbarmessage,typeitinthisfield. Whenyouredonefillingoutallthisinformation,clickOK.Thecodewill automaticallybeinsertedwhereveryourcursorwaspositionedonyourpage.You canmoveitaroundbyselectingitanddraggingittothedesiredlocationonthe page.
LinkingtoaDownloadableDocument
Followthesestepstoaddalinktoadownloadabledocumentonyourpage. ThistutorialassumesyouareworkingwithWebsiteProjects.Formore informationabouthowtouseWebsiteProjects,readWorkingWith WebsiteProjects. First,gototheMyComputertabandselectthefileyouwanttoaddtoyour WebsiteProject.Inthistutorial,welladdaPDFfile.
Step1:LocatingtheFile
301
Step2:AddingtheFiletoYourWebsiteProject
RightclickthefileyouwanttoaddtoyourprojectandselectCopyFileto Project>[Folder],whereFolderisthefolderwhereyouwanttostorethefile.In thistutorial,welladdthefiletotheWebsiteProjectrootfolder,butyoumaywant tostoreyourdownloadablefilesinaspecialsubfolder.
302
Thisopensawindowconfirmingwhetheryouwanttocopythefiletoyour WebsiteProjectFolder.ClickYes.
303
Step3a:LinkingtotheFileFromYourWebsiteProject
Therearetwomethodsyoucanusetolinktoyourfile.Thefirstisfrominsideyour WebsiteProject.Todothis,gobacktotheMyWebsitestab,whereyoullseethe fileyoujustaddedtoyourWebsiteProject.RightclickitandselectInsertas LinkIntoCurrentDocument.
ThisinsertstheHTMLcodeforalinktothisdocumentonyourpage.Inthiscase, thelinkwouldlooklikethis: <a href="newsletter.pdf"></a> Next,enterthelinktextyouwanttheusertoclickbetween>and</a>.Thefinal codemightlooklikethis: <a href="newsletter.pdf">Our PDF newsletter.</a>
Step3b:LinkingtotheFileUsingtheInsertLinkWindow
ThesecondmethodistousetheInsertLinkwindow.Followtheinstructions providedinAddingaLinktoYourPage,onlyinsteadofchoosingan.htmlfile, selectthefileyouaddedtoyourWebsiteProject.Inthiscase,itwillbethe newsletterPDF. Whenyouredonefillingoutallthisinformation,clickOK.Thecodewill automaticallybeinsertedwhereveryourcursorwaspositionedonyourpage.You canmoveitaroundbyselectingitanddraggingittothedesiredlocationonthe page.
304
AnoteaboutPDFsandotherdownloadablefilesyoumaywishtoadd: Mostofthetime,PDFfileswillopenautomatically.Thisisbecause almostallvisitorsalreadyhavetheAdobeAcrobatReaderinstalled,and, dependingonthebrowser,thePDFfilewilleitheropendirectlyinthebrowseror inaseparatereaderwindow.Additionally,anyonevisitingyoursitewithInternet ExplorerwillbeabletoopenfilescreatedinanyOfficeapplication(Word, PowerPoint,Excel,etc.)directlyinthebrowser. Ifyouwanttomakesureyourusersdownloadthefile,youcanalsoplaceasmall remindersomewhereonthepagethatsayssomethinglike,"Rightclickandselect SaveLinkAs...tosavethistoyourcomputer."
LinkingtoDifferentPartsoftheSamePage
You'vebeendesigningyoursiteandhavefiguredoutthatapagecanbeaslongas necessary.Thisisgreat,butitcanbeapainwhenyou'redealingwithlongerpages. Helpoutyourvisitorsbyprovidinglinksthatquicklytakethemtospecific locationsonthepage.Hereshow:
Step1:CreateaTarget
Thefirststepistosetatarget.Thetargetistheplaceonthepagewhereyouwant theusertobeabletojumpto.Toinsertatarget,gotoInsert>Target.Thisopens theInsertTargetwindow.
EnteranameforthetargetintheTargetNamefield,andthenclickOK.This insertsthecodeforthetargetonyourHTMLpage.Inthisexample,thetargetwill beanemployeeprofileforJohnSmithonourAboutUspage,sowellnamethe targetjsmith.Theresultingcodelookslikethis:
305
<a name=jsmith></a>
Step2:PositiontheTarget
SinceourtargetisassociatedwithJohnSmithsemployeeprofile,letsmoveitto thesamelocationashisprofileontheHTMLpage.Todothis,justclickanddrag thetargetcodetothedesiredlocation.
Step3:LinktotheTarget
Nowthatourtargetisinposition,letsreturntothetopofthepageandcreatea linktoit.Todothis,createanewlinkusingtheoptionsdescribedinAddinga LinktoYourPage. OnceintheInsertLinkwindow,insteadoflinkingtoaURLorapageinyour WebsiteProject,insteadenterthenameofyourtargetprecededbyapoundsign (#).Inkeepingwithourexample,wedtype#jsmithintheURLfieldandLearn moreaboutJohnSmithintheLinkTextfield.
306
Whenyouredone,clickOK.Thisinsertsthelinkcodeinyourpage,which,inour example,wouldlooklikethis: <a href=#jsmith>Learn more about John Smith</a> Andthatsit!NowyoucanswitchovertothePreviewtabtoseeyourlinkand targetinaction.
307
HowToCreateaList
Listsareagreatwaytopresentyourinformationinamoreorganized,eyecatching way.Sure,youcoulduseplaintexttogetyourpointacross,butlistsaremuch easierandfastertoread.Followthesestepstolearnhowtocreatealistinthe HTMLEditor:
Step1
OpentheInsertListwindowusingoneoftheseoptions: Go to Insert > List Click the List icon in the Code or Visual Editor toolbar
Step2
ThisopenstheInsertListwindow,whichallowsyoutoselectwhatkindoflist youwanttoaddandtoadditemsandatitletoit.
Letstakealookatwhateachoftheavailableoptionscando: Selectthetypeoflistyouwanttocreate.Youroptionsarebulleted,numbered, definition,andnone,whichisjustalistofitemswithnospecialformatting.Heres howeachofthedifferentlisttypeslook:
ListType
308
BulletStyle
Thisoptionisonlyavailableifyoucreateabulletedornumberedlist,anditallows youtochoosethestyleofthebulletsornumbers.Hereshowthedifferentbullets andnumberslook:
ListHeaderText
Thisisthetitleofyourlist,anditisonlyavailableifyoucreateabulletedor numberedlist.
ListItemField
Thisiswhereyouenteryourlistitems.Puteachseparatelistitemonitsownline.
309
Ifyouarecreatingadefinitionlist,eachitemyoutypeisadefinition title(e.g.Thisisadefinitionlistintheexampleabove).Toadd definitions,switchtotheCodeEditorandtypethembetweenthe corresponding<dd></dd>tags.
ImportList
Ifyouhavealreadyformattedalistandjustwanttoimportitscontents,clickthis button.Thisopensawindowthatallowsyoutobrowseyourcomputerforatext filecontainingyourlist.Youcanonlyimportlistsin.txtformat.
Whenyoufindthefileyouwanttoimport,selectitandclickOpen.Thecontents willbeinsertedintheListItemfield.
Step3
Whenyouaredoneconfiguringyourlistitemsandoptions,clickOK.Thecode willbeinsertedinthepageforyou.
310
Ifyou'veeverbeenfrustratedathavingtotypethesamepieceofcodeoverand over,you'lllovesnippets.AsnippetisapieceofcodestoredintheHTMLEditor thatcanbeusedandreusedasmanytimesasyouneed.Youcansavesnippetsof HTML,JavaScript,DHTML,Perl,oranyotherscriptinglanguage.TheHTML Editorcomeswithseveralbuiltinsnippetsandgivesyoutheoptiontocreateyour own.
HowtoUseSnippets
ViewingSnippets
Toseealistofavailablesnippets,opentheCodeSnippetstabintheResource browseronthelefthandsideoftheprogram.Whenyouselectasnippetname fromthetoppane,thecodewillappearinthebottompane.Allthebuiltin snippetscomewithadetailedHTMLcommentexplainingwhatthecodedoes.
311
InsertingSnippets
Useanyoneofthefollowingoptionstoinsertyoursnippetintoyourpage: 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.
CreatingSnippets
Tocreateasnippet,highlightthetextyouwouldliketosaveasasnippetanduse oneofthefollowingoptionstoopentheSaveSnippetwindow: Go to File > Save Selected Text as Snippet. Click the Save icon in the Toolbar and select Save Selected Text as Snippet.
NamethesnippetandclickOK.Thenewsnippetwillbeaddedtothelistinthe CodeSnippetstab. YoucanalsoaddanewsnippetusingtheoptionsintheCodeSnippetstab: Click the New Snippet icon in the Code Snippets toolbar. Right-click a snippet and select New Snippet. BothoftheseoptionsopenanewtabintheHTMLEditorworkspace.Whenyou aredoneenteringthesnippettext,savethedocumentnormally.Thisopensthe SaveSnippetwindow.
312
EditingSnippets
Toeditanexistingsnippet,selectitandclicktheEditSnippeticonintheCode Snippetstoolbar.ThisopensthesnippetcodeinatabintheHTMLEditor workspace.Edititandthensaveitnormally.
DeletingSnippets
Todeleteanexistingsnippet,rightclickitandselectDeleteSnippet,orusethe keyboardshortcutDelkey.Thisopensawindowaskingifyouaresureyouwantto deletethesnippet.Ifyouchangeyourmindaboutdeletingthesnippet,clickNo.
RefreshingtheCodeSnippetsTab
Ifyouhaveadded,edited,ordeletedasnippetbuthaventseenthechangesinthe CodeSnippetstab,clicktheRefreshiconintheCodeSnippetstoolbar.This refreshestheareasoyoucanseethemostuptodatesnippets.
313
HowtoAddaFlashElementCreatedwitha CoffeeCupFlashProgram
FollowthesestepbystepinstructionstoaddaFlashelementcreatedinoneof CoffeeCupSoftwaresFlashapplications(PhotoGallery,WebFormBuilder,Web JukeBox,etc.)toapagecreatedintheHTMLEditor.Youshouldhaveboth applicationsopen. Inthistutorial,wewilladdaformcreatedinWebFormBuildertotheHTML Editorpage,buttheprocessisthesameforallourFlashapplications.
Step1
SaveyourFlashelementtothesamefolderwheretheHTMLpageitwillappear onissaved.ThisshouldbeintheWorkingfolderorWebsiteProjectsfolderyou specifiedintheHTMLEditor. Thisstepisveryimportant!Ifyoudontsavethefilesassociatedwith yourFlashelementinthesamefolderastheHTMLfilewhereit appears,theelementwillnotdisplaycorrectlyoratall.
Step2
SavingopenstheFileswindow,whichliststhefilesyoumustuploadinorderfor yourFlashobjecttodisplaycorrectly,aswellastheHTMLcodeyoumustpaste oneverypagewhereyouwanttheobjecttoappear.Copythiscodetoyour WindowsclipboardbyclickingtheCopytoClipboardbutton.
314
Step3
OpentheHTMLEditorpagewhereyouwanttheFlashobjecttoappear,and pastethecodebetweenthe<body>and</body>tags.
Step4
Uploadyourchangestoyourserver,makingsureyouincludethefilesassociated withyourFlashelementaswellasthepagecontainingthecode.
315
HowtoUsetheFrameDesigner
So,you'rereadytoputyourcodingexperiencetothetestbycreatingapagewith frames?TheHTMLEditorcangiveyouaboostwithitsFrameDesigner.Heres howyouworkwithit: ToopentheFrameDesigner,gotoInsert>FrameDesigner.
Asyoucreateyourframesbasedlayout,youcankeepaneyeonhowyourdesign willlookusingthePreviewpaneonthelefthandsideofthewindow.Youcan alsousethisareatoselectframesforindividualediting.Justclickaframetoeditit. Youcantellwhichframeisselected,becauseitwillbeblue. Hereshowyouuseeachoftheoptionsinthiswindow:
FrameStyle
Choosefromanumberofpredefinedframestyles.Thesestylesincludethenumber offrames,wheretheyarelocated,andwhatfunctiontheyperform.Forexample, HeaderTwoFramecontainstwoframes,oneintendedforuseasaheaderand anotherlargeronewherethebodycontentgoes.
316
FrameWidthandHeight
Usethesedropdownmenustosetthewidthandheightoftheselectedframe.The widthandheightaremeasuredinthepercentageofthepagetheframetakesup.If theselectedframetakesuptheentireheightorwidthofthepagebydefault,you willnotbeabletoadjustthatattribute.Forexample,lookattheheaderframein theimageabove.Becauseitautomaticallytakesup100%ofthewidthofthe screen,youcannotadjustthewidth.Otherwise,whatwouldgointhespaceitleft behind?
FrameScrolling
Choosewhetheryouruserscanscrollwithintheframe.Autoaddsascrollbar whennecessary,Yesaddsascrollbaratalltimes,andNowillnotaddascrollbar atanytime.
AllowFrameResize
Selectthischeckboxifyouwantyouruserstobeabletoresizetheframes.
FrameBorder
Selectthischeckboxtoenableaframeborder,andthenenterthewidthofthe borderinthenumberfield.0pixelsisthethinnestborderand50pixelsisthe largest.Werecommendkeepingtheborderbetween1and5pixels.
FrameName
Enteranamefortheframehere.Youshoulduseanamethatrelatestotheframes function.
SourceURL
EntertheURLofthepageyouwanttoappearintheframehere.Ifyouarelinking toanexternalWebsite,youmustincludethefulllink,includingthehttp://www bit.IfyouarelinkingtoanexternalWebsite,besuretoincludethefullWeb address,includingthehttp://wwwbit.Ifyouarelinkingtoapageordocumentin yourWebsite,youcanusearelativelink. Carefulwhereyoulink!Ifthefileyoulinktoisntlocatedinyour WorkingfolderoryourWebsiteProject,itmaynotbereferenced correctlymeaningthelinkwontwork.Needmoreinformationabout workingwithWebsiteProjects?Checkoutthistutorial:WorkingWithWebsite Projects. Onceyouhaveenteredtherequiredinformation,clickOK.Thecodewill automaticallybeaddedtothepageforyou.IfyouhavealreadycreatedtheHTML filesthatwillbeusedasthesourceforeachframe,clickthePreviewbuttoninthe Toolbar,andyou'llbeabletoviewyourpage,framesandall!
317
HowtoUsetheCSSMenuDesigner
TheCSSMenuDesignerisanewadditiontotheHTMLEditor.Itsanawesome toolthatcreatesasophisticatednavigationmenuforyourWebsite.Readonto learnhowtouseit!
Step1:BeforeYouGetStarted
Itisextremelyimportanttoremoveanyoldmenucode(DHTMLorCSS)from yourdocumentbeforeinsertinganewmenu.Ifyoudont,yourmenuwontwork! Ifyouarecreatingyourfirstmenu,theseinstructionsdontapply,soyoucanskip aheadtoStep2. Toremoveyouroldcode,firstopentheCodeEditorandfindthecodeyouhave toremove.Thecodewilllookdifferentdependingonwhetheryouhaveinserteda CSSorDHTMLmenu.
RemovingCSSMenuCode
Removethefollowingcodefrombetweenyour<head></head>tags: <link rel="stylesheet" type="text/css" href="css/menumenu.css" media="screen"> css/menumenu.cssisthedefaultnameandlocationofthemenustylesheet.If youhavechangedthenameorlocationofthisstylesheet,thisfilepathwillreflect yourchanges.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.Be suretoremovethe<ul class...></ul> tagsandallthecodebetweenthem. menumenuisthedefaultnameforthemenuclass.Ifyouhavechangedthe nameofthemenu,thenameyouspecifiedwillappearhereinstead.page1.html andpage2.htmlarethelinksyouspecifiedforthemenuitems.MenuItem1and MenuItem2arethenamesyouspecifiedforthemenuitems.
RemovingDHTMLMenuCode
Removethecodebetween<script type='text/javascript'>and </script>.Thiscodeshouldbelocatedjustbelowthe<body>tag.
318
Step2:OpeningtheCSSMenuDesigner
Nowthatyouhaveremovedyouroldmenucode,thenextstepistoworkwiththe menuyouwanttoinsertinitsplace.First,openuptheCSSMenuDesignerby goingtoInsert>CSSMenuDesigner
Theoptionsatthebottomofthiswindowappearnomatterwhichtabisselected. Hereswhattheydo:
OpenMenu SaveMenu
Clickthisbuttontoopenanexistingmenu. Clickthisbuttontosaveyourmenu.Werecommendyousavefrequentlyto preventlossincasesomethinghappenstoyourcomputerwhileyouareworking.
Preview
ClickthisbuttontopreviewyourmenuinyourdefaultWebbrowser.
OK
Clickthisbuttontoinsertyourmenucodeintothecurrentdocument.Welltalk moreaboutthisoptioninStep5.
Cancel
ClickthisbuttontoabandonanyunsavedchangestoyourmenuandexittheCSS MenuDesigner.
319
Thenextstepgoesovertheprocessofopeningapreexistingmenu.Ifthisisyour firstmenu,skipaheadtoStep4.
Step3:OpeningaPreviouslyDesignedMenu
IfyouhavealreadydesignedamenuintheCSSMenuDesignerortheDHTML MenuBuilderandwanttomakeeditstoit,clicktheOpenMenubutton.This opensawindowthatallowsyoutobrowseyourcomputerforthe.mnufilefor yourexistingmenu.
Whenyoufindthefileyouwanttoopen,selectitandclickOK.Thisopensthe menuintheCSSMenuDesigner. YoucanopenamenucreatedintheDHTMLMenuBuilderintheCSS MenuDesigner!Justfindandopenthe.mnufileforyourDHTMLmenu. Youcanthenedititnormally.Whenyousaveorinsertyourmenucode, itwillbeconvertedtoCSS.
Step4:DesigningaMenu
Nowthatwevecoveredthenutsandboltsofopeningamenu,letsgetdownto business:designingit!
320
TheCSSMenuDesignerisbrokenupintothreetabs:MenuDesigner,Menu Colors,andOptions.TheMenuDesignertabiswhereyouworkwiththe structureofyourmenu;theMenuColorstabiswhereyoupickoutyourmenu colorscheme;andtheOptionstabissortofthecatchallsection,whereyoucan configuretherestofyourmenuoptions. Letsgothrougheachoftheseoptionsanddesignourmenu!
MenuDesignerTab
First,takealookattheYourMenusection.Thisiswhereyoucankeepaneyeon thestructureofyourmenu. First,letsaddarootitem,whichisabuttoninthemainpartofthemenu.Clicking theAddRootItembuttoninsertsabuttoncalled,bydefault,Untitled1.
321
LetschangethetextthatappearsonthisbuttonfromUntitled1tosomethinga bitmoreuseful.IntheTextfield,typeContactUs.Next,letslinkthisbuttonto ourcontactuspage,which,forthesakeofthistutorial,wellassumeiscontact us.html.TypethatintotheLinkfield. Wellbeusingrelativelinksinthistutorial.Notsurewhatrelativelinks are?Definitely,definitelytakethetimetoreadAbsolutevs.Relative Links. Ourfirstmenuitemisconfigured!Letsdoanotherone.ClicktheAddRootItem buttonagain,andnamethenewitemLearnMore.Dontassignitalinkjustyet weregoingtodosomethingabitdifferentwiththismenuitem. MakingsurethatLearnMoreisselectedintheYourMenusection,clicktheAdd Subitembutton.ThisaddsanitemthatwillappearunderneaththeLearnMore menuitemwhenyouruserclicksit.NameyoursubitemAboutUs,andlinkitto aboutus.html. Youcanaddasubitemthatexpandswhenasubitemisclicked,butany furthersubitemsarentallowed.Thisisbecausetheresnonavigational benefittohavingsubitemsofsubitemsofsubitemsplusitsounds reallysillytosay,subitemsofsubitemsofsubitemsintutorials;)
322
LetsaddanothersubitemtotheLearnMoreitem.YoucouldselectLearnMore andclicktheAddSubitembutton,oryoucoulduseadifferentmethodandclick AboutUsandclicktheAddSiblingbutton.Thisaddsanotheritemonthesame levelastheselecteditem.LetsnamethisnewsubitemPrivacyPolicyandlinkit toprivacy.html. HereshowtheMenuDesignertablooksafterallthesechanges:
LetsswitchovertotheMenuColorstabandcustomizeourmenucolors.
323
MenuColorsTab
First,takealookattheMenuColorSamplearea.Thisiswhereyoucankeepan eyeonyourmenucolorscheme.Next,letstakealookatwhateachofthese optionsdoes.
BackgroundColor
Thebackgroundcolorofthemenu.
MouseoverBackgroundColor
Thebackgroundcolorofthemenuwhentheuserholdstheirmouseoverit.
FontColor
Thecolorofthemenutext.
MouseoverFontColor
Thecolorofthemenutextwhentheuserholdstheirmouseoverit.
BorderColor
Thecolorofthemenuborder. Okay,nowthatweknowwhateverythingdoes,letspickoutsomecolors!How aboutaprettydarkgreenforthemenubackground?Tochangethis,clickthe colorswatchnexttowhereitsaysBackgroundColor,andselectthedarkgreen shadeyouwant:
324
Hmm,lookslikethereisntmuchchoiceintermsofdarkgreens,soletsclick CustomColor.Thisopensarainbowgradientwherewecanbrowseevenmore colorsandadjustbrightness.
Perfect!Next,letsusethesameprocesstopickalightgreenforthemouseover color.Therestofthecolorslookgoodasis,butletschangethesubmenucolorsto
325
matchourmainmenucolors.Todothis,clicktheUseMainMenuColors button.Rightnow,theMenuColorstablookslikethis:
Awesome!LetsswitchonovertotheOptionstabtomakeafewmorechangesto ourmenu.
OptionsTab
326
First,letstakealookatwhateachoftheseoptionsdoes.
Orientation
Choosewhetheryouwouldlikeahorizontalandverticallayout.Fornow,lets stickwithahorizontalmenu.
MarginTopandLeft
Usethesefieldstosetthetopandleftmargininpixels.Amarginistheblankspace surroundingthemenu.Whenthemarginisincreased,morespacewillappear betweenthemenuandtheobjectssurroundingit.Wellkeepthedefaultsfornow, butifyoudecideyouwanttogiveyourmenuabitmorebreathingroomonceyou seeitonyourpage,youcanalwaysreopenitandadjustthesefieldslater.
BorderWidth
Usethisfieldtosetthewidthofthemenuborderinpixels.Again,wellleavethis asthedefaultwhyrocktheboat?
FontFace,Size,andStyle
Usethisareatosetthefontandsizeofthemenuitemtext,aswellaswhetheritis boldoritalicized.Letsworkwiththeseoptionsafterwegetthroughthese explanations!
MenuandSubmenuTextAlignment
Usethisareatochoosehowyouwantthetextinthemenutobealigned:tothe left,right,orcenter.
TopandLeftPadding
Usethesefieldsthetopandleftpaddinginpixels.Paddingistheblankspace insidethemenu,betweentheborderandthemenucontents.Whenthepaddingis increased,morespacewillappearbetweenthetextandtheborder.
UseFixedWidthforMenuItems
Selectthischeckboxifyouwouldliketouseafixedwidthforthemenuitems.This meansthemenuitemswillalwaysbethesamewidth,regardlessofhowlongtheir contentis.Thisisanotheroptionwellworkwith.
ItemWidth
Setthewidthofyourmenuitemsinpixelshere. Okay,nowthatyouknowwhateverythingdoes,letsmakesomeadjustments! First,letschangethefontface.ClicktheFonticontoopentheFontwindow, whichallowsyoutoselectwhichfontfaceyouwouldliketouse.
327
LetschooseaWebsafefont,justsoweknowitwilldisplaycorrectly.Howabout TimesNewRoman?SelectitfromthelistandthenclickOK. FormoreinformationaboutWebsafefonts,readHowtoChangethe AppearanceofText. Next,letschangethesizeandstyleofourmenutext.SinceTimesNewRoman looksabitsmall,letschangeittosize12,andmakeitboldbycheckingtheBold checkbox. Finally,letsmakesureourmenuitemshaveenoughroomfortheirtext.Make sureUseFixedWidthforMenuItemsischecked,andthenchangetheItem Widthto200pixels.Thatshouldbemorethanenoughroom. Havingmadeallthesechanges,theOptionstabwilllooklikethis:
328
Andthatsitforcustomization!Letsinsertourmenu,shallwe?
Step5:InsertingYourMenu
Toinsertyourmenu,clickOK.Thisopenstwowindowscontaininginformation aboutyourmenucode:
Thiswindowremindsyouthatyoumustremoveallyouroldmenucodebefore insertingnewcode.IfyoufollowedtheinstructionsinStep1,youdontneedto
329
worryaboutthiswindow.ClickOK.ThisopenstheSaveMenuwindow,which allowsyoutosaveyourmenutoworkwithitlater.
GoaheadandclickSaveyouwouldntwanttoloseallthechangesyoujust made,right?Thisopensawindowthatallowsyoutochoosethefolderwhereyour menufilesaresaved.Bydefault,itwillbesavedintoyourWorkingfolderoryour WebsiteProject.
330
Onceyouhavesavedyourmenu,thecodewillautomaticallybeinsertedintoyour page.Thecodeforourmenulookslikethis: <link rel="stylesheet" type="text/css" href="css/menumenu.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
Interestedinlearningmoreaboutwhatstylesheetsareandhowthey work?CheckoutthecomprehensivetutorialaboutthisawesomeWeb designtoolatW3Schools(http://www.w3schools.com/css/css_intro.asp). SwitchonovertothePreviewtabandseehowyournewmenulooks!
Prettysnazzy,huh?
Step6:PositioningYourMenu
Tochangewhereyourmenuappearsonyourpage,yourbestbetistouse <div></div>tagstopositionit.Todothis,place<div></div>tagsaroundthe menucodethatappearsbetweenthe<body></body>tags,whichwouldlook likethis: <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
Next,addthealignattributetotheopening<div>tag,andgiveitoneofthese values:bottom,center,justify,left,right,ortop.Forinstance,ifyou wantedtocenteryourmenu,theopening<div>tagwouldlooklikethis: <div align=center>
</ul> </li> </ul> </div>
Step7:AddingYourMenutoYourOtherPages
UsingCodeSnippets,youcaneasilyaddyourmenutoallthepagesinyour Website.Todothis,firstselectthecodeinyourmenuthatappearsbetweenthe <head></head>tags,whichlookslikethis: <link rel="stylesheet" type="text/css" href="css/menumenu.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.Enterthenameforthesnippetinthe Filenamefield.Inthiscase,wellcalloursnippetMenuStyleSheet.Whenyoure done,clickOK. Next,highlightthemenucodethatappearsbetweenthe<body></body>tags <div>tagsandall!andcreateanothernewsnippet.CallthisoneMenuCode. NowswitchovertotheCodeSnippetstab,whereyoullseeyournewsnippets!
333
Nowwheneveryouwanttoinsertyourmenuintoanotherpage,justgotothe CodeSnippetstabandinsertthesnippetsintothecorrectlocationsinyourpage. FormoreinformationabouthowtouseCodeSnippets,readHowtoUse Snippets.
334
HowtoUsetheOpenFromWebFunction
WiththeHTMLEditor,youcanimportpublishedWebpagesfromtheInternet andopenthemintheprogram.Todothis,gotoFile>OpenFromWeb.This openstheOpenFromWebwindow,whichallowsyoutoentertheURLofthe pageyouwishtoopenandtospecifyoptionsforsavingthisfiletoyourcomputer.
Afewnotesaboutthisfunctionbeforewedescribehowyouuseit.First, itcanonlybeusedtodownloadonefileatatime.Ifyouwantto downloadmultiplefilesfromaWebsite,youmaywanttouseanFTP clientsuchasDirectFTP(http://www.coffeecup.com/directftp/)orFreeFTP (http://www.coffeecup.com/freeftp/)todownloadseveralfilesatonce. Second,thisoptionworksbestifyouaredownloadinganHTMLpagethatdoes notusePHPorSSI,becausescriptinglanguageslikethesecanaddcodetoa publishedpage.Asaresult,youmaynotdownloadthecorrectHTML. Finally,ifthepagedoesn'tloadcorrectly,theservermayberespondingslowly.In thiscase,repeattheOpenFromWebfunction.
335
Allright,nowthatyouknowwhatthisfunctioncanandcannotdo,letsget started!ThefirststepistoentertheURLfortheexactWebpageyouwantto download.Forinstance,sayyouwantedtoemulatetheohsosnazzydesignofthe CoffeeCupAboutUspage(http://www.coffeecup.com/about/).Youwouldhaveto typethatentireURLintotheURLtoOpenFromWebfield.Ifyoutriedjust usinghttp://www.coffeecup.com,youdgettheCoffeeCupSoftwarehomepage stillsnazzy,butnotthepageyouwerelookingfor. OnceyouveenteredtheURLofthepageyouwanttodownload,itstimeto choosewhereyouwouldliketodownloadthefileandwhatpartsofthepageyou wouldliketodownload.ThatswheretheOptionstabcomesintoplay:
DownloadOnlytheHTMLPage(WithoutImagesor OtherRequiredFiles)andOpenitintheEditor
ThisoptiondownloadsonlytheHTMLfromthepage.Thatmeansanyimages, CSS,JavaScript,andanythingelseassociatedwiththepagewontbedownloaded. Thisoptionalsodoesnotsavethefiletoyourcomputer.Instead,itjustopensthe HTMLintheEditor.Thisisagoodoptionifyouwanttogetyourhandsontheraw structureofthepageandstarteditingitrightaway.Onceyouredonemakingyour edits,youcansavethefilenormally.
SavetoDisk
Thisoptionsavesthepagetoalocationyouspecifyonyourcomputer.Tospecifya location,clicktheBrowseiconandchoosethefolderwhereyouwantthefile saved.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 Theseoptionscomeinhandyifyouwanttoworkwithmorethanjustthepage HTML.
336
ThelaststepistoswitchovertotheProxySettingstab,whereyoucanenter proxyinformationifnecessary.
Tobehonest,ifyouarentsurewhetheryoushouldusethisinformation, chancesarereallygoodthatyoudonothaveto.Ifyouwanttobeextra sure,contactyourhostingprovider,andtheyllbeabletogiveyoua definitiveanswer.
Onceyouveconfiguredallyoursettings,goaheadandclickOpen.Youcantrack theprogressofyourdownloadintheDownloadStatusareaatthebottomofthe window.Whenitsdone,edityournewlydownloadedfilesnormally.
337
HowtoUseBookmarks
Maybeitsthelastplaceyouleftoffediting,aportionof thepagewhereyoumakealotofchangesandupdates, oradesignelementyouwanttorunbyaclientfor whateverreason,youneedtocomebacktoacertainpart ofyourcodeatanothertime.Thisiswherebookmarks comeinhandy.Theseunobtrusivetoolsmarkplacesin yourcodesoyoucanreturntothemwheneveryouneed to. Bookmarksappearasgreenbookiconslabeledwitha numberinthegutter,theareaonthelefthandsideof thecodethatalsocontainslinenumbersandsymbols representingparagraphbreaks.
SettingBookmarks
Tosetabookmark,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.
LocatingBookmarks
Tolocateabookmark,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.
ResettingBookmarks
Therearetwomethodsforresettingbookmarks.Ifyouwanttoresetanindividual bookmark,justsetthebookmarknumberinanotherlocation.Forinstance,ifyou wereusingBookmark0tomarkyourmetatagsbutwantedtouseittomarkyour footerHTML,justpositionyourcursoratyourfooterHTMLandsetBookmarko usingoneofthemethodsdescribedabove.
338
Thesecondmethodistoclearallyourbookmarksatonce.Todothis,goto Document>ClearAllBookmarks.
339
HowtoUsetheCodeCleaner
Ifyou'veevertriedtoeditsomeoneelse'scode,youknowhowmuchofahassleit canbetopickthroughastylethatisn'tyourown.Reformattingcanbeapain,but withtheHTMLEditor'sCodeCleaner,it'sabreeze.TheCodeCleanerfilters throughsourcecode,restylesittofityourpersonaltaste,andweedsoutpesky errorsinthedocument.Ifyouhavetroubleloadingadocumentinabrowser, runningtheCodeCleanermaybeabletofindtheproblemforyou. Here'showtousetheCodeCleaner:
Step1
GotoTools>CodeCleaner...ThisopenstheCodeCleanerwindow,which allowsyoutosetyourcodecleaningpreferences.
Step2
Toviewdetaileddescriptionsonhowagivenoptionworks,placeyourmouseover thatoptionandreadthedescriptionintheyellowpaneatthebottomofthe window.YoucanalsoswitchtotheDocumentandASPandXMLtabstosee moreoptions.
340
Step3
Selectalltheattributesyouwouldliketoapplytoyourcode,andwhenyou're done,clickOK.Thisstartsthecodecleaningprocess. IfyouchangeyourmindabouttheeditstheCodeCleanermade,youcanundo thembygoingtoEdit>Undo.YoucanalwaysreruntheCodeCleanerusing differentsettingsuntilyouaresatisfiedwiththeresults.
341
IfyoursitehasmorethanonepagelikeprettymucheveryWebsiteeverthen youknowthatmakingaglobalchangecanbeprettydifficult.Forexample,sayyou wanttoreplaceeveryinstanceofcolor="red"onyourWebsitewith color="black".Whetheryouhadtochangethison5or500pages,locating everyinstanceofthatcodewouldgetoldfast.What'saWebmastertodo? WiththeHTMLEditor'sExtendedFindandReplacefunction,globalchanges likethisareeasy.Justfollowthesesimplesteps:
HowtoUseExtendedFindandReplace
Step1
OpentheExtendedFindandReplacewindowusingoneoftheseoptions: Go to Edit > Replace Click the Find and Replace icon in the Toolbar and select Replace Use the keyboard shortcut Ctrl+H
Step2
EnterthetextorcodeyouwanttofindintheFindfield,andthenenterits replacementintheReplaceWith:field.
342
Step3
Specifywherethechangesneedtobemade.ChooseCurrentDocumentifyou onlywantthechangestoapplytothedocumentcurrentlyopenintheHTML Editor,andchooseAllOpenDocumentsifyouwantthechangestoapplytoall thedocumentscurrentlyopenintheHTMLEditor.Ifyouwanttochangeallthe filesinagivenfolder,chooseLookinFolderandthenclickthefoldericonto browseyourcomputerforthedesiredfolder. UsetheLookinFolderoptionwithcaution,becauseyouwon'tbe warnedbeforechangesaremadetoyourcode.Tobesafe,makebackups ofallyourfilesbeforeyoumakethesechanges.Alsonotethatthis featurewillonlyworkonfilesthathavepreviouslybeenopenedintheHTML Editor.
Step4
ClickReplaceAll,andlettheHTMLEditordotherest!
343
Thereareatonofdifferentoptionsavailableforpreviewingyourwork.Afterall, it'sgoodWebdesignpracticetoviewyourWebsiteinseveraldifferentbrowsersto ensurecrossbrowsercompatibility,sowemadesuretogiveyouplentyofdifferent waystotestyourpages,retestthem,andtestthemagainjusttobesure. FYI,themostpopularbrowsersareFirefox,InternetExplorer,Opera, GoogleChrome,andSafari,soyoushouldmakesureyourWebsitelooks goodinallofthemyep,allofthem.Usetheselinkstodownloadthese browsersandinstallthemonyourcomputer: Firefox: http://www.mozilla.com/en-US/firefox/upgrade.html Internet Explorer: http://www.microsoft.com/windows/internetexplorer/default.aspx Opera: http://www.opera.com/ Google Chrome: http://www.google.com/chrome Safari: http://www.apple.com/safari/ Andnow,ontothemanywaysyoucanpreviewyourworkintheHTMLEditor!
PreviewingYourWork
PreviewTab
ThePreviewtabisafullyfunctional,builtinbrowser(InternetExplorer)youcan usetopreviewyourWebsite.Toaccessit,justclickthePreviewtabatthetopof theworkspace.
344
SplitScreenPreview
Thisisafullyfunctional,builtinbrowser(InternetExplorer)thatallowsyouto previewyourworkinabrowserareabelowtheCodeEditor.Toaccessit,useone oftheseoptions: 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
AdditionalBrowsers
SincebothbuiltinbrowsersareInternetExplorer,theHTMLEditoroffersthe optiontoaddupto10additionalbrowsersforpreviewingyourwork.Toaddthese browsers,gotoTools>Preferences>BrowserTestingtab.
345
SelectaBrowser SelecttheslotunderTools>AdditionalBrowserswhereyouwouldlikethe browsertoappear.AdditionalBrowser1canbeaccessedusingthekeyboard shortcutCtrl+F5.
DisplayName
Enterthedesireddisplaynameforthebrowser. UsetheBrowseicontobrowseyourcomputerforthe.exefileforthebrowseryou wanttoadd.Toremoveabrowser,clicktheRemoveicon. Topreviewyourworkinanyoftheadditionalbrowsersyouhaveadded,useoneof theseoptions: 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)
ApplicationLocation
346
SwitchingBetweenOpenFiles
Thereareacoupleofdifferentoptionsforswitchingbetweenopenfilesinthe HTMLEditor.
WindowMenu
TheWindowmenuallowsyoutoseeallthefilesopenintheEditor.Clickafileto openitforediting.
StatusbarTabs
TheStatusbar,locatedatthebottomoftheprogram,displaystabsforeachofthe opendocumentsintheEditor.Toswitchbetweenopendocuments,clickthetab forthefileyouwanttoedit.
347
Codesyntaxhighlightingisagreatwaytotelldifferenttags,tagattributes,andtag valuesapart.Forexample,itmaybedifficultortimeconsumingtotrytofind everyinstanceofan<img>tag,butifyousetyourhighlightingoptionstomakeall <img>tagsred,thenallyoudhavetodoislookforthecolorred. Followthesestepstocreateyourowncodehighlightingcolorscheme:
AdjustingCodeHighlightingOptions
Step1
GotoTools>DocumentDisplayProperties.ThisopenstheCustomization tabofthePreferenceswindow.
Step2
Selectthelanguagewhosehighlightingschemeyouwanttoeditfromtheprovided dropdownlist.Inthistutorial,wellbeworkingwithHTML/PHPDocuments,so selectit.Next,clicktheModifyHighlightingbutton.Thisopensthe HighlightingOptionswindow.
348
Step3
SelecttheelementwhosecoloryouwanttochangefromtheElementlist.Inthis tutorial,wellchangeHTMLAttributes,soselectthatoptionfromthelist.
Step4
Applythecolorand/orstylechangesyouwanttoappearinthecodesyntax.You canpreviewthemintheareaatthebottomofthewindow.Forthisexample,lets changeHTMLattributestobemagentaandbold.Tochangethetextcolor,select itfromtheForegroundcolorswatch.
349
Andtomakeitbold,selecttheBoldcheckbox. Aftermakingthesechanges,yourealldone!ClickOKtoclosethiswindow,and thenreturntotheCodeEditor,whereyoullgettoseeyourcustomcodesyntax highlightinginaction.
350
HowtoCreateaCustomToolbar
Everyonelovesatoolbar.Whyspendtimediggingaroundinmenuswhenyoucan accomplishataskwiththeclickofabutton?Well,withtheHTMLEditor's customizableinterface,youcangetcreateatoolbarthatcontainstheiconsyouuse allthetimewithnosuperfluouselements.Followthesestepstocreateyourown toolbar:
Step1:OpentheCustomizeWindow
OpentheCustomizewindowusingoneoftheseoptions: Go to Tools > Toolbars and Menus > Customize Right-click any toolbar and select Customize TheseoptionsopentheCustomizewindow,whichliststhetoolbarsinthe programandallowsyoutocreateacustomtoolbarorcustomizethemaintoolbar, whichappearsacrossthetopoftheHTMLEditorworkspace.Inthistutorial,we willcreateourowncustomtoolbar.
351
Step2:CreateaNewToolbar
ClickNew.ThisopenstheAddToolbarwindow.Typeanameforyournew toolbar.Inthistutorial,wellcalloursMyToolbar.
. Whenyouredone,clickOK.ThenewtoolbarwillbeaddedtotheToolbarslist.
Youllalsoseeatiny,blanktoolbarjusttotheleftoftheCustomizewindow.
352
Thenextstepwillshowyouhowtofillthattoolbarupwithhelpfulicons!
Step3:AddIconstoYourToolbar
Toaddbuttonstoyourtoolbar,switchovertotheCommandstab.
TheCategorieslistcontainsbroadcategoriesofindividualcommands.Youcant addthesetoatoolbar,butyoucanselectthemtoviewthecommandsthey contain.Forourtoolbar,letsaddsomebasiccommandsfromtheFilemenu.Click FiletodisplaythesecommandsintheCommandslist.
353
LetsaddNewBlankPagetoourtoolbar.Todothis,justclickanddragNew BlankPageontothetoolbar.Whenyouseethelittleplussign,letgoofthe mouse.Thisaddstheicontothetoolbar.
Awesome!LetsaddafewmoreiconshowaboutOpen,Close,andSave?
Looksgood!
354
Step4:ChangingtheOrientationoftheToolbar
Sayyouwantedyourtoolbartobehorizontalinsteadofvertical.Nosweat!just clickoneofthesideswithyourmouseanddragfurthertotheside,orclickthe bottomanddragthebottomofthetoolbarup.
Youcanhaveyouriconsstackedorallinalineitsuptoyou! YoumaynoticethatMyToolbardoesntdisplayfully.Thatsbecauseyourcustom toolbarsonlytakeupasmuchspaceastheyneed,whichhelpsconservespace.
Step5:AdjustingAdditionalToolbarOptions
Ifyouwanttoworkwithmoretoolbaroptions,switchovertotheOptionstab.
355
Letstakealookatwhateachoftheseoptionsdoes.
MenusShowRecentlyUsedCommandsFirst
Selectthischeckboxifyouwantthemostrecentlyusedcommandstoappearat thebeginningofyourcustomtoolbar.
ShowFullMenusAfteraShortDelay
Selectthischeckboxifyouwantthedropdownmenusinyourcustomtoolbarto appearafterashortdelay.
ResetMyUsageData
Clickingthisbuttonresetsyourusagedatasoyourcommandsappearintheorder youoriginallyspecifiedinsteadofbeingrankedinorderofuse.
LargeIcons
Selectthischeckboxtoincreasethesizeofthetoolbaricons.Largetoolbaricons looklikethis:
Selectthischeckboxtodisplaytooltipswhenyoumouseovertoolbaricons. Tooltipsstatewhattheiconsdo.
ShowTooltipsonToolbars
ShowShortcutKeysinTooltips MenuAnimations
Selectthischeckboxtodisplaykeyboardshortcutsinthetoolbartooltips. Selectthedesiredmenuanimationfromthisdropdownlist.Youroptionsare Random,Unfold,Slide,orFade. Fornow,letsleavetheseoptionsaloneourtoolbarisspiffyenoughasis.
Step6:DockYourCustomToolbar
Youmaynoticethatyourcustomtoolbarisfreefloating.However,youcandock yourtoolbarinseverallocationsintheworkspace:atthetop,alongtheleftorright side,oronthebottom.Todothis,justclickanddragthetoolbartothedesired
356
location.Onceyouhavedockedit,youcanchangeitspositionbyclickingand draggingthesolidordashedlinesinthetoolbar.
Step7:FurtherCustomizingYourToolbar
Youalsohavetheoptiontoaddorremovebuttonsrightfrominsidethetoolbar. Todothis,clickthedownwardfacingarrow:
Uncheckaselectiontoremoveitfromyourmenu.Youcanalwaysreadditby reselectingitfromthelist.
Step8:RemovingYourToolbar
Ifyoudecideyoudontwantyourtoolbartodisplayinyourworkspace,butyou dontwanttodelete,it,youcanremoveitbyclickingtheXintheupperright handcorner.
357
CustomizingCodeCompletionTags
Haveyoueverwantedtoknowhowtoaddyourowncustomtags,tagattributes, orattributevaluestotheCodeCompletionlistintheHTMLEditor?It'sactually prettyeasy.Forexample,let'ssayyouwantedtoaddacustomattributeforthe <img>tag.Hereshowyoudgoaboutdoingthis:
Step1
GoEdit>EditXHTMLTags.ThisopenstheEditXHTMLTagswindow.
358
Step2
SelectIMGfromtheTagslistonthelefthandsideofthewindow.Whenyoudo, alltheavailableattributeswillappearintheSelectedTagAttributeslist.
Step3
AtthebottomoftheSelectedTagAttributeslist,youllseeagreenplussign icon.Clickthisicontoaddanewattributetothelist.Bydefault,itiscalled Attribute1.
359
Step4
MakesureAttribute1isselected,andthenclicktheEditAttributeNameicon, whichisalsolocatedatthebottomoftheSelectedTagAttributeslist.Inthis tutorial,wellchangethenametoLONGDESC,butnaturally,youcangiveyour attributesanynamesyouwant. Andthatsit!ClickClose.Nowwheneveryouaddan<img>tagtoyourHTML document,theLONGDESCattributewillshowupintheCodeCompletionlist.It willalsoappearintheTagstabonthelefthandsideoftheprogramwhenHTML Tagsisselected.
360
FrequentlyAskedQuestions
Features,Tools,andFunctionality
HowdoIaddspecialcharacters? HowdoIchangemycodecase? IsthereaJavaScriptorHTMLdebuggerincludedintheprogram? Whatisahorizontalrule? Whatisthedifferencebetweenalayoutandatheme? HowdoIuseWebsiteProjects? WhathappenedtotheDHTMLMenuBuilder?
Customization
HowdoIturnontheVisualEditor? HowdoIimportanotherlanguagedictionaryintotheHTMLEditor?
ErrorMessagesandTroubleshooting
IgetanerrorthatreferstoMFC42.dll. Vistaisn'tdisplayingthefilesinmyWorkingfolder. Igetanerrormessagethatsays,Nosuchinterfacesupported. IgetanerrorI/O183. IseeredXsinsteadofmyimages. Squaresorquestionmarksappearinsteadofspaces.
Miscellaneous
WhatisthedifferencebetweentheHTMLEditorandtheFreeHTMLEditor? HowdoIinstallHTMLEditorthemes? Ibuiltmysiteusingathirdparty'sWebpagebuilder.WillIbeabletousethe HTMLEditor?
Features,Tools,andFunctionality
HowdoIaddspecialcharacters?
Toaddspecialcharacterswhichincludesymbolsnotcommonlyincludedon keyboards,suchastrademarksigns,accents,umlauts,etc.,nonbreakingspaces, andsymbolsaWebbrowsermightinterpretasHTML(namely<and>)usean HTMLentity.Thisisaspecialcodethatbrowsersrenderasthecorresponding symbol. ToaddanHTMLentityintheHTMLEditor,clicktheCharacterstabontheleft handsideofthescreen,positionyourcursorinthelocationonthepagewhereyou wantthecharactertoappear,andthendoubleclickthecharacterofyourchoice. Youcanalsodraganddropthecharactertothepage.ThecorrectHTMLentity willautomaticallybeinsertedforyou.
361
HowdoIchangemycodecase?
TherearenostandardsinplaceforhowHTMLtagsaredisplayed.Somecoders preferallcaps(<BODY>),whereasotherspreferlowercase(<body>).Usingthe toolsintheHTMLEditor,youcaneasilyswitchfromonestandardtoanother. Ifyouonlywanttochangeafewlinesofcodeorcontent,firstselectitwithyour mouse,andthengototheEditmenu.There,youcanselectbetweenconvertingto uppercase,lowercase,orpropercase,whichcapitalizesthefirstletterofwords appearingaftercertaincharacters.Tomodifywhichlettersarecapitalizedin propercase,gotoTools>Preferences>Generaltab,andusetheoptionunder theProperCaseConversionheading. Ifyouwanttochangeallyourcode,usetheCodeCleaner.Todothis,gotoTools >CodeCleaner>LayOutandConverttab.Ifyouwantuppercasetagsand/or attributes,selecttheassociatedcheckboxes;ifyoupreferlowercase,unselectthese checkboxes.Next,clickOK.Thespecifiedchangeswillbeappliedtoyour document.
IsthereaJavaScriptorHTMLdebuggerincludedintheprogram?
TherearenoJavaScriptdebuggingtoolsinHTMLEditor,butthereisanHTML codecleanerthatcanfindunclosedandunsupportedtags,aswellasother anomaliesinyourcode.Toaccessit,gotoTools>CodeCleaner. YoucanalsovalidateyourcodeusingtheW3Cmarkupvalidationservice.Todo this,gotoDocument>ValidateHTML.ThisopenstheW3Cmarkupvalidation service(http://validator.w3.org/)inyourdefaultWebbrowser.
Whatisahorizontalrule?
Ahorizontalrule(<hr>)isalinethatgoesacrossaWebpage.Tocreatea customizedhorizontalrule,gotoInsert>HorizontalRule.Thisopensthe InsertHorizontalRulewindow,whichallowsyoutosetpropertiesfortheline, includingalignment,width,color,shading,andthickness.ThePreviewarea allowsyoutoseehowthepropertieslookasyouadjustthem.Whenyouaredone, clickOK,andtheHTMLwillbeautomaticallyinsertedintoyourpage.
Whatisthedifferencebetweenalayoutandatheme?
AlayoutincludestheHTMLforabasicpagestructureandallowsyoutoprovide yourowncontent.Thisgivesyoumorefreedomovertheappearanceofyour design.Athemeincludesthreepages(index.html,aboutus.html,andcontact us.html)thatincludetheHTMLandimagesforabasicdesign,allowingyouto replacetheimagesandtextwithyourowncontent.Thisisagreatoptionfor beginners,sincethebulkoftheworkhasalreadybeendoneforyou.
362
HowdoIuseWebsiteProjects?
Thisquestionactuallyhasareallylengthyanswer!Ratherthantryingto tackleithere,weregoingtodirectyoutoacoupleofhelpfulresources. First,checkoutthestepbysteptutorialinthismanual:WorkingWith WebsiteProjects.Afterperusingthatguide,switchovertotheHTMLEditorand gotoMyWebsites>AllWebsiteProjects>WhatisaWebsiteProject.This opensacomprehensiveguidetousingWebsiteProjects.Betteryet,itactuallyisa WebsiteProject,soyoullgettoseefirsthandhowtheywork.
WhathappenedtotheDHTMLMenuBuilder?
InthelatestversionoftheHTMLEditor,wereplacedtheDHTMLMenuBuilder withtheCSSMenuDesigner.Thisnewtoolisavastimprovementitrenders properlyinallthemajorbrowsers,itsvalidaccordingtoW3Cstandards,andit producesalotlesscodethantheDHTMLMenuBuilder,whichmakesforfaster loadtimes. IfyouwanttoconvertyourDHTMLmenutoCSS,justgotoInsert>CSSMenu Designer>OpenMenubutton,andthenbrowseyourcomputerforthe.mnu fileyoucreatedwiththeDHTMLMenuBuilder.ClickOpen,andthen resavethemenu.ThisautomaticallyconvertsthecodetoCSSforyou!If youreinterestedinevenmoreinformationaboutusingtheCSSMenu Designer,checkoutthistutorial:HowtoUsetheCSSMenuDesigner. IfyoureallabouttheoldschoolDHTMLMenuBuilder,youcanstilluse it.Justdownloadthefree,standaloneversionfromthislocation: http://www.coffeecup.com/freedhtml/
Customization
HowdoIturnontheVisualEditor?
Bydefault,theVisualEditoristurnedoff.Toturnitbackon,gotoTools> Preferences>Generaltab,anduncheckHideVisualEditortab.
HowdoIimportanotherlanguagedictionaryintotheHTML Editor?
ToimportotherlanguagedictionariesintotheHTMLEditorforspell checkingneeds,downloadtheproper.admfilefrom http://www.coffeecup.com/help/articles/howdoiaddcustom dictionariestothehtmleditor/andsaveitintoC:\Program Files\CoffeeCupSoftware\.
Next,opentheHTMLEditorandgotoTools>SpellCheckerOptions> Dictionariesbutton>Newbutton.Thisopensawindowthatallowsyoutoadd
363
customdictionaries.Enterthenameofthe.admfileyoudownloadedandthen clickOK. YoucanalsogotoTools>SpellCheckerOptionsandselectLocate DictionariesfromtheDictionariesarea.Thisopensawindowthatallowsyouto browseyourcomputerforthe.admfileyouadded. Afterusingeitheroftheseoptions,thedictionarywillappearintheDictionaries areaoftheSpellingOptionswindow.Putacheckmarkintheboxnextto whicheverdictionaryyouwanttouse,andthenclickOK.
ErrorMessagesandTroubleshooting
Whenyoureceivethiserror,itmeanstheversionofMFC42.dllonyourcomputer isolderthantheoneinstalledwiththeprogram.Forwhateverreason,thefileis notbeingupdatedduringtheinstall.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,youmayneedtoinstallapatchfromMicrosoftfrom thislink:http://support.microsoft.com/default.aspx?scid=kb;en us;259403.
IgetanerrorthatreferstoMFC42.dll.
Vistaisn'tdisplayingthefilesinmyWorkingfolder.
Bydefault,theHTMLEditorwillsavefilesintheWorkingfolder,whichislocated atC:\ProgramFiles\CoffeeCupSoftware\Working.However,Vistamay interferewiththisprocess,creatingavirtualfolderandwritingthefilesthere. Togivetheapplicationfullpermissiontowritetotheproperfolder,makesurethe HTMLEditorisclosed,andthenrightclicktheHTMLEditordesktopicon.Select RunasAdministrator.Thisshouldproperlylaunchtheprogramforyou.Ifit does,great!Youcancontinuetolaunchtheprograminthisway,oryoucangoa stepfurtherandconfiguretheshortcuttoalwaysrunasadministrator.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. NowwhenyoudoubleclicktheHTMLEditorshortcut,itwillrunand savefilesnormally.Formoreinformationaboutthisissueandfile virtualization,checkoutScottHanselman'sComputerZen (http://www.hanselman.com/blog/VistasShowCompatibilityFilesAndThe ScrumptiousWonderThatIsFileVirtualization.aspx).
Igetanerrormessagethatsays,Nosuchinterfacesupported.
Ifyoureceivethe"NoSuchInterfaceSupported"errorwhenlaunchingtheHTML EditorortryingtoaccesstheVisualEditorintheprogram,youhaveinstalledthe softwareunderalimiteduseraccount.TheVisualEditorrequiresaccesstothe system32folder,whichalimiteduseraccountcannotaccess.Tocorrectthis problem,logintoWindowsasanadministrator.
IgetanerrorI/O183.
YoumayreceivethiserrorifyouaretryingtoeditfilesthattheHTMLEditor cannotunderstandbecausetheydon'tcontainvalidHTMLcode.Youwillnotbe abletoeditthesefileswiththeHTMLEditor. IfyouaretryingtoopenafilecreatedinanotherWebdesignprogram,suchas VisualSiteDesigner,thereisawaytoworkaroundthis.Ifyouhaveuploadedyour worktoyourserver,youcandownloadtheHTMLfilesusinganFTPclientsuchas DirectFTP(http://www.coffeecup.com/directftp),orwiththeHTMLEditor's OpenFromWebfunction.ToopenafilefromtheWeb,gotoFile>OpenFrom Web,andthenentertheURLofthepageyouwishtodownload.Thismethodonly worksonepageatatime,soifyouwanttoworkwithanentireWebsiteinsteadof asingleWebpage,youmaybebetteroffdownloadingthefileswithanFTPclient.
IseeredXsinsteadofmyimages.
Thereareacoupleofdifferentreasonsthatcouldexplainwhyyourimagesarenot displayingcorrectly: 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,returntotheHTML EditorandgotoMyWebsites>AllWebsiteProjects>WhatisaWebsite Project.ThisopensacomprehensiveguidetousingWebsiteProjects.Betteryet,it actuallyisaWebsiteProject,soyoullgettoseefirsthandhowtheywork. Ifyouarentsurewhetheryouuploadedyourimages,trytovisittheURLofthe image.Forexample,ifyouhaveanimagesavedintherootfolderofyourserver calleddog.png,useyourfavoriteWebbrowsertovisit http://www.yourwebsitename.com/dog.png.Ifyougeta404error,youeither didnotuploadtheimageoruploadedittoadifferentfolderonyourserver. Toresolvethisissue,switchtoWebsiteProjects,whichyoutokeeptrackofwhere yourimagesarelocatedinyourWebsitestructureandcaninsertcorrectlinksto theimageinyourHTMLpage. Ifyourimagetagsarereferencingimagesonyourharddriveinsteadofyourserver, saveyourcurrentWebsitefilestoanewWebsiteProject.Next,correctthecodeon yourWebpagessoitusesrelativepathstoyourimagefiles.Todothis,openthe pagewhereyourimagesarebeingreferencedincorrectly.Foreachimage,youwill findanimagetag(<img>)andthesrcattribute(src="image.png"),which looksomethinglikethis: <img src="file://C:\Program Files\CoffeeCup Software\Working\filename.png"> Thatfilepathiswhat'scausingallthetroubleittellstheWebbrowsertolook forafileonyourcomputer.Deletethiswholechunkofcodeandthenfindthe imageinyourWebsiteProject.RightclickitandselectInsertImageInto CurrentDocument.Thisplacesanaccuraterelativelinktothefileinyourpage foryou.Nowjustsaveyourworkanduploadyourchangestoyourserver.
Squaresorquestionmarksappearinsteadofspaces.
Thesecharacterswillappearinplaceofspacesifthetextwasoriginallywrittenin anotherapplication,suchasMicrosoftWord,andthencopiedandpastedintothe VisualEditor.Thereasonforthisisthattheoriginalapplicationdoesnotusethe samehexvaluetorepresentspacesthattheHTMLEditordoes.Tocorrectthis issue,switchtotheCodeEditorandmanuallydeletethesquares.
366
Miscellaneous
WhatisthedifferencebetweentheHTMLEditorandtheFree HTMLEditor?
TheHTMLEditorcontainsafewkeyfeaturesnotfoundinFreeHTMLEditor, includingtheCSSMenuDesigner,thetabledesigner,andtheabilitytoaddand editXHTMLtags,aswellasthebuiltincopiesofSiteSpider,ImageMapper,and WebsiteColorSchemer.
HowdoIinstallHTMLEditorthemes?
FollowthesestepbystepinstructionstoinstallHTMLEditorthemes: 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, youll 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.WillIbe abletousetheHTMLEditor?
Yes!YoucanuseCoffeeCupHTMLEditortoopenanyHTMLpagecreatedwith anothercompany'sWebdesignsoftware.
367
KeyboardShortcuts
HTMLEditorofferstheoptiontoaccessmanyofitsmostcommonlyused functionsquicklybyusingkeyboardshortcuts.Belowisacompletelistofallthe keyboardshortcutsavailableinthisprogram: 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 09 Shift+Ctrl+[09] Go to Bookmark 09 Ctrl+[09] 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
Glossary
A MN C P DG
IL UX
RS
A
alttext Adescriptionofanimagedisplayedwhentheimagecannotbeshown,suchasina textonlyorspeechbrowser,orifauserhasaslowconnection.Youshouldalways usedetailedalttextforallcontextuallyimportantorprominentimagesonyour Webpage. attribute ProvidesadditionalinformationaboutanHTMLelement.Forexample,inthe HTMLforalink(<a href=http://www.coffeecup.com>Click here for great software!</a>),hrefwouldbeanattributeoftheelementa. attributevalue Thevalueofagivenattribute.Attributevaluesarealwaysenclosedindouble quotes.Forexample,intheHTMLforalink(<a href=http://www.coffeecup.com>Click here for great software!</a>),http://www.coffeecup.comwouldbeavalueofthe attributehref.
C
characterset ThesetofcharactersavailabletobeusedinyourcodeandonyourWebsite.For example,ifyouwanttocreateaWebsiteusingCyrillic,thatwoulduseadifferent charactersetthanaWebsitethatusedtheLatinalphabet. CodeEditor Theareaoftheprogramusedtoviewandeditthecodethatmakesupapage.It canbeusedtoeditHTML,serverfilessuchasPHPandCSS,andtext. codesnippet Apredefinedorcustomchunkofcodethathasbeensavedandcanbereused. CodesnippetsarefoundintheCodeSnippetstab.
369
comment HTMLelementsthatarenotrenderedbyWebbrowsersandcanbeusedtoleave notesforyourselforforanyoneelsewhomayviewyourcode. CSS AbbreviationforCascadingStyleSheets.Thisisalanguagethatisstoredinastyle sheetanddefineshowanHTMLdocumentisdisplayed.
DG
DOCTYPE AbbreviationforDocumentTypeDeclaration.ThistellsaWebbrowserthetype andversionofthelanguagethepageiswrittenin. documentdependency Alinktoanexternalfile,suchasanimageorexternalWebsite,inadocument. dropdownlist Inaform,thisisabarwithanarrowthatexpandstoshowalistofitemswhen clicked.Itisbestsuitedforlistsinwhichyourusercanonlyselectoneoption. element EverythingbetweenthestartandendHTMLtag.Forexample,<a href=http://www.coffeecup.com>Click here for great software!</a>isanelement. formmethod Themethodusedtotransferformdatatoorfromaserver. frame Anindividualsectionofaframesbasedlayout.Framesallowyoutohavemultiple Webpagesopeninthesamewindow. FTP AbbreviationforFileTransferProtocol.ThisistheprocessoftransferringWebsite filestoaserver. gutter AbartotheleftofthecodeintheCodeEditorwherelinenumbers,bookmarks, andcharactersthatrepresentlinebreaksaredisplayed.
370
H
headelement ThesectionofanHTMLdocumentthatcontainsheadelements,includingthe followingtags:<meta>,<script>,<style>,and<title>. hexcode Asixcharactercodeconsistingoflettersand/ornumbersthatrepresentsacolor. hiddentext FormtextthatisnotrenderedbyWebbrowsersbutthatdoesappearintheform results.Itcanbeusedforsortingandfilteringinformation. highlightingscheme Asystemofhighlightingthatcanbeappliedtodifferentcodelanguagesinthe HTMLEditor.Thiscanbeusedtohelpdistinguishdifferentelementsand attributes. horizontalrule Ahorizontallinethatcanbeaddedtoyourpagedesign. hostname Theaddressyouneedtoconnecttotheserver.Ifyoudonotknowthis information,contactyourhostingprovider. HTML AbbreviationforHyperTextMarkupLanguage.Thisisthelanguageusedtocreate Webpages. hyperlink AreferenceonaWebpagethattakesyoutoanewlocation.
IL
imagemap Aninteractiveimagewithareasthatcanbeclickedtolinktheusertoadifferent location. kilobyte Akilobyte(abbreviatedKb)equals1024bytesandisareferencetofilesize. layout AfeatureintheHTMLEditorthatcontainstheHTMLforabasicpagestructure.
371
link Shortforhyperlink. linkhovercolor Thecolorofalinkwhenauserholdstheirmouseoverit. listbox Atextboxcontainingalistofitemsthatyourusercanselect.Alistboxisbest suitedforlistsinwhichyourusercanselectseveraloptions.
MN
margin Thewhitespacesurroundinganelement.Whenthemarginisincreasedfora selectedelement,morespacewillappearbetweentheelementandtheobjects surroundingit. menubar Locatedatthetopoftheprogram,theMenubargivesyouaccesstoallthe programoptionsandtools,aswellasthingslikeprintingprojects,customizingthe appearanceoftheworkspace,andexitingtheprogram. metadescription AshortdescriptionofyourWebsite.Itshouldbenolongerthan50words. metakeyword WordsthatdescribeyourWebpage.Theymusteachbeseparatedbyacommaand aspace. metatag AnHTMLtaglocatedintheheadsectionthatcontainskeywordsanda description. MIMEPostMethod Atypeofapplicationthatprocessesformdata. nonbreakingspace( ) AcharacterentityrenderedbyWebbrowsersasaspace.Thiscanbeusedtoinsert extraspaces,sinceHTMLonlyallowsforonespacebetweeneachword.
372
P
padding Thewhitespacewithinanelement.Whenpaddingisincreasedforaselected element,morespacewillappearbetweenitsouteredgesandtheobjectscontained withinit. passivemode Awayofconnectingtoaserver.Enablepassivemodeifyouexperiencetrouble connecting. pretags HTMLtagthatpreservetheformattingofthetexttheysurround,includingextra spacesandindenting. PHP AscriptinglanguageusedtocreatedynamicWebpages. pixel Acomputerscreenconsistsofnumeroustinycoloreddots.Thesedotsarecalled pixels. port FTPinformationthatdefineshowtheserverrespondstoacertainprotocol.For mostFTPconnections,theportshouldbesetto21. Previewtab Theareaoftheprogramthatcontainsbuiltinbrowser(InternetExplorer)youcan usetopreviewyourWebsite. proxy AspecialkindofFTPconnection.Ifyouareunsurewhetheryouuseaproxyto connect,chancesareyoudonot,butyoucancontactyourhostingproviderto makesure.
RS
remotefolder InanFTPprofile,thissettingdetermineswherefileswillbestoredonaserver. Typicalfoldernamesarepublic_html,web,andwww.Ifyoudonotknowthis information,youwillneedtocontactyourhostingprovider. Resourcebrowser TheareaonthelefthandsideoftheprogramthatcontainstheMyWebsites,My Computer,Tags,CodeSnippets,andCharactertabs.
373
script AprograminalanguagelikeJavaScriptorPHPthatcreatesinteractiveWebpages. server AcomputerthatstoresWebsitefilessoothersmayviewthesiteontheInternet. Statusbar Locatedatthebottomoftheworkspace,theStatusbarallowsyoutoswitch betweenopendocumentsandviewbasicinformationabouttheopenfile. stylesheet ACSSdocumentthatdefineshowanHTMLdocumentisdisplayed.
tag ThecontentinsideanglebracketsinanHTMLelement.Forexample,intheHTML foralink(<a href=http://www.coffeecup.com>Click here for great software!</a>),<a href=http://www.coffeecup.com>isthe startingtag,and</a>istheendingtag. target Aspecificlocationwherealinkpoints.Thiscanbeadifferentareaonthesame page,anotherframe,oranewbrowserwindow. textarea Amultiplelinefieldwhereyourusercantypeinformation.Thisisbestsuitedfor longeranswers,suchasmessages,feedback,etc. theme Apagecreationoptionthatincludesthreepages(index.html,aboutus.html,and contactus.html)thatincludetheHTMLandimagesforabasicdesign. thumbnail Asmallerversionofanimage.Thumbnailsareoftenusedaslinkstotheoriginal versionoftheimage. titletag Usedtospecifyapagetitle,whichappearsonthebrowser'stitlebarandappearsin searchresults.Agoodpagetitlesuccinctlydescribesthecontentonthepage. toolbar Locatedacrossthetopoftheprogramandthedifferentcomponentswithinthe program,toolbarsoffershortcutstocommonlyusedprogramfunctions.
374
UX
undocumentedcharacter Acharacterthatisnotsupportedinagivencharactersetorcodelanguage. URL AWebaddress.http://www.coffeecup.comisaURL. VisualEditor Theareaoftheprogramthatallowsyoutoworkdirectlywiththeelementsinyour pageinaWYSIWYG(WhatYouSeeIsWhatYouGet)environment. Webbrowser AprogramusedtoaccesstheInternet.ThemostpopularbrowsersareFirefox, InternetExplorer,Opera,GoogleChrome,andSafari. WebsiteProject AcomprehensivesystemthatkeepsyourWebpagesandanyassociatedfiles organized.YoucanworkwithWebsiteProjectsintheWebsiteProjectstab. Workingfolder IfyouareusingaWebsiteProject,bydefault,theWorkingfolderisthesameas theWebsiteProjectsfolder.Otherwise,itisthefolderwhereyourWebsitefilesare saved. WYSIWYG AbbreviationforWhatYouSeeIsWhatYouGet.ThisisakindofWebdesign softwarewhereusersworkwiththeactualpageelementsinsteadofHTMLcode. XHTML AbbreviationforExtensibleHypertextMarkupLanguage.Thisisalanguageused tocreateWebpages.
375
CoffeeCupSoftware,Inc.wasfoundedin1996,buttherootsofournamegobacka bitfurther.Hereshowitallstarted: ThestoryofCoffeeCupbeganinarealcoffeehousecalledTheRaven&The Sparrowin1994.ItwastheonlyplaceinCorpusChristi,Texas(andoneofonlya dozenorsoworldwide)thatofferedfreeInternetaccess.Peoplecouldcomeby, orderacappuccino,andsurftheWeb,whichwasquitenewatthetime.Asmore peoplewereexposedtotheInternet,morepeoplewantedtobeapartofit. Withallthesecomputerjunkiesasguests,itwasclearthatthecoffeecup.com domainnameneededtobepurchasedandthataWebsiteforthecoffeehouse neededtobemade.ThecoffeehousegotalittlepressfromTVandthelocal newspaper,andotherbusinessesstartedtocallaboutmakingWebsitesforthem, too.BackthenintheearlydaysoftheInternet,goodsoftwaretoeasilycreate goodlookingWebsiteswasreallyhardtofind.So,aswiththefirstWebsiteforthe coffeehouse,thesesitesweremadewithhandcodedHTMLusingNotepad. Oneday,whilechattingwithafewregularsaboutcreatingWebsites,theideaofa simpleyetpowerfulHTMLeditorwasborn.Wewantedtocreateaniftypieceof softwarethatwouldmakeiteasyforpeoplelikeustobuildourownWebsites. Oneoftheregularswasaprogrammer,sowegottowork,andinAugustof1996 thefirstversionofourHTMLEditorwasreleased.Sincethecoffeehousealready hadthewww.coffeecup.comdomainname,ourfirstsoftwareprogramwascalled theCoffeeCupHTMLEditor,andthecompanywasnamedCoffeeCupSoftware. ThesoftwarewaspostedontheWebsite,anditwasaninstanthit!Peoplefromall overtheworldweredownloadingtheprogramandemailingtheirpraises. Atthesametimethecoffeehousestartedtoencounterparkingproblems.Yousee, thecoffeehousewasquitepopular,andwithonlyeightparkingspots,peopleoften parkedalongthestreet.ApparentlythiswasaproblemtothecityofCorpus Christi.TheCityCouncilsuggestedwebuymorelandandputinanewparking lot,butthatwouldbeanexpensiveventure.Besides,creatingsoftwarewasalot morefun,andwiththatamountofmoney,wholenewapplicationscouldbebuilt! Soonthecoffeehousewasclosedaswefocusedoncreatingandreleasing sharewareapplicationsliketheImageMapperandDirectFTP.Aftersometime, theeffortsbegantopayoffasmoreandmorepeoplestartedusing(andpayingfor) thesoftware.TherestisInternethistory.
AboutCoffeeCupSoftware
376
Inthelast10yearswehavemovedtoalargeroffice,startedaWebhosting company,asearchenginesubmissionservice,andcreatedover25othersoftware programssothatotherscouldfulfilltheirdreamsofWebdesign,too. Nowwithmorethan29,905,323usersworldwide,andsoftwaresoldinover87 countries,CoffeeCupSoftwarehasgrownbeyondourwildestdreams.Wehave wonlotsofawards,includingbeingNo.400intheInteractive500,arankingofthe bestInternetandECommercecompanies.Westillrememberthegoodolddays though,whenwewerejustasmallcoffeehouse.Westrivetokeepthatsamelevel ofpersonalservicewithasmilethatwentwitheverycupofsteaminghot cappuccino.
377
ContactUs
Wegiveyoumorethenjustsoftware. Wehaveamissionwhenitcomestosupport:Beextraordinary! Whenyoubuyoursoftware,whatyougetgoeswellbeyondwhatyouexpectfrom asoftwarecompany.Wedonotoffertechsupportweoffercoachesand counselorstohelpyouwiththesoftwareandWebdesign.Wearehereforyouso youcanbeasuccessfulWebmaster,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.Ifyou areusingatrialversionofoursoftwareyoucanusetheOnlineHelpand Knowledgebaselinksaboveoremailoursupportstaffanytime.Feelfreetoaskus yourquestions,andwewillreplyassoonaspossible. GetprioritysupportandaccesstoourCustomerCareCenterwhenyouorderour software.Ourmissionistoprovidethebestpossibleservicetoourcustomers.Join theranksofWebmastersworldwideandorderoursoftwaretoday.You'llbehappy youdid.:) OurAddress: CoffeeCupSoftware 165CourtlandStreet SuiteA,Box312 Atlanta,GA30303 USA Phone:(678)4953480 http://www.coffeecup.com
378
ThankYou
Toallourusersyouknowwhoyouare... Withoutthesupportandfeedbackofthosewhodownloadandbuyoursoftware, wewouldn'tbehere.Weareveryluckytohavehadsomanypeopleovertheyears thinkoursoftwareisgreat,andweareproudthatyoustilldo.
ThankYouEveryone!

379
EndUserLicenseAgreement
BYCLICKINGTHEACCEPTBUTTONORINSTALLINGTHESOFTWARE,YOU (EITHERANINDIVIDUALORASINGLEENTITY)CONSENTTOBEBOUNDBY ANDBECOMEAPARTYTOTHISAGREEMENT.IFYOUDONOTAGREETO ALLOFTHETERMSOFTHISAGREEMENT,CLICKTHEBUTTONTHAT INDICATESTHATYOUDONOTACCEPTTHETERMSOFTHISAGREEMENT ANDDONOTINSTALLTHESOFTWARE.(IFAPPLICABLE,YOUMAYRETURN THEPRODUCTTOTHEPLACEOFPURCHASEFORAFULLREFUND.) 1.LicenseGrant.Subjecttothepaymentoftheapplicablelicensefees,andsubject tothetermsandconditionsofthisAgreement,CoffeeCupSoftwareherebygrants toyouanonexclusive,nontransferablerighttouseonecopyofthespecified versionoftheSoftwareandtheaccompanyingdocumentation(the "Documentation")ononecomputeronly. 2.Term.ThisAgreementiseffectiveforanunlimiteddurationunlessanduntil earlierterminatedassetforthherein.ThisAgreementwillterminateautomatically ifyoufailtocomplywithanyofthelimitationsorotherrequirementsdescribed herein.UponanyterminationorexpirationofthisAgreement,youmustdestroy allcopiesoftheSoftwareandtheDocumentation.Youmayterminatethis AgreementatanypointbydestroyingallcopiesoftheSoftwareandthe Documentation. 3.OwnershipRights.TheSoftwareisprotectedbyUnitedStatescopyrightlaws andinternationaltreatyprovisions.CoffeeCupSoftwareanditssuppliersownand retainallright,titleandinterestinandtotheSoftware,includingallcopyrights, patents,tradesecretrights,trademarksandotherintellectualpropertyrights therein.Yourpossession,installation,oruseoftheSoftwaredoesnottransferto youanytitletotheintellectualpropertyintheSoftware,andyouwillnotacquire anyrightstotheSoftwareexceptasexpresslysetforthinthisAgreement. 4.Restrictions.Youmaynotrent,lease,loan,sublicenseorreselltheSoftware.You maynotpermitthirdpartiestobenefitfromtheuseorfunctionalityofthe Softwareviaatimesharing,servicebureauorotherarrangement.Youmaynot transferanyoftherightsgrantedtoyouunderthisAgreement.Youmaynot reverseengineer,decompile,ordisassembletheSoftware,excepttotheextentthe foregoingrestrictionisexpresslyprohibitedbyapplicablelaw.Youmaynot modify,orcreatederivativeworksbasedupon,theSoftwareinwholeorinpart. YoumaynotcopytheSoftwareorDocumentation.exceptthatyoumayeither(a) makeonecopyoftheSoftwaresolelyforbackuporarchivalpurposes,or(b) transfertheSoftwaretoasingleharddiskprovidedthatyoukeeptheoriginal solelyforbackuporarchivalpurposes.Youmaynotremoveanyproprietary
380
noticesorlabelsontheSoftware.Allcopiesmustcontainthesameproprietary noticesthatappearonandintheSoftware.Allrightsnotexpresslysetforth hereunderarereservedbyCoffeeCupSoftware. 5.WarrantyandDisclaimer. a.LimitedWarranty.CoffeeCupSoftwarewarrantsthatforsixty(60)daysfromthe dateoforiginalpurchasethemedia(e.g.,CDRom)onwhichtheSoftwareis containedwillbefreefromdefectsinmaterialsandworkmanship. b.Remedies.CoffeeCupSoftware'sanditssuppliers'entireliabilityandyour exclusiveremedyforanybreachoftheforegoingwarrantyshallbe,atCoffeeCup Software'soption,either(i)returnofthepurchasepricepaidforthelicense,ifany, or(ii)replacementofthedefectivemediainwhichtheSoftwareiscontained.You mustreturnthedefectivemediatoCoffeeCupSoftwareatyourexpensewitha copyofyourreceipt.Thislimitedwarrantyisvoidifthedefecthasresultedfrom accident,abuse,ormisapplication.Anyreplacementmediawillbewarrantedfor theremainderoftheoriginalwarrantyperiod.OutsidetheUnitedStates,this remedyisnotavailabletotheextentCoffeeCupSoftwareissubjecttorestrictions underUnitedStatesexportcontrollawsandregulations. c.WarrantyDisclaimer.Exceptforthelimitedwarrantysetforthherein,THE SOFTWAREISPROVIDED"ASIS."TOTHEMAXIMUMEXTENTPERMITTEDBY APPLICABLELAW,CoffeeCupSoftwareDISCLAIMSALLWARRANTIES,EITHER EXPRESSORIMPLIED,INCLUDINGBUTNOTLIMITEDTOIMPLIED WARRANTIESOFMERCHANTABILITY,FITNESSFORAPARTICULAR PURPOSE,TITLEANDNONINFRINGEMENTWITHRESPECTTOTHE SOFTWAREANDTHEACCOMPANYINGDOCUMENTATION.YOUASSUME RESPONSIBILITYFORSELECTINGTHESOFTWARETOACHIEVEYOUR INTENDEDRESULTS,ANDFORTHEINSTALLATIONOF,USEOF,AND RESULTSOBTAINEDFROMTHESOFTWARE.WITHOUTLIMITINGTHE FOREGOINGPROVISIONS,CoffeeCupSoftwareMAKESNOWARRANTYTHAT THESOFTWAREWILLBEERRORFREEORFREEFROMINTERRUPTIONSOR OTHERFAILURESORTHATTHESOFTWAREWILLMEETYOUR REQUIREMENTS.SOMESTATESANDJURISDICTIONSDONOTALLOW LIMITATIONSONIMPLIEDWARRANTIES,SOTHEABOVELIMITATIONMAY NOTAPPLYTOYOU.Theforegoingprovisionsshallbeenforceabletothe maximumextentpermittedbyapplicablelaw. 6.LimitationofLiability.UNDERNOCIRCUMSTANCESANDUNDERNO LEGALTHEORY,WHETHERINTORT,CONTRACT,OROTHERWISE,SHALL CoffeeCupSoftwareORITSSUPPLIERSBELIABLETOYOUORTOANYOTHER PERSONFORANYINDIRECT,SPECIAL,INCIDENTAL,ORCONSEQUENTIAL DAMAGESOFANYCHARACTERINCLUDING,WITHOUTLIMITATION,
381
DAMAGESFORLOSSOFGOODWILL,COMPUTERFAILUREOR MALFUNCTION,ORFORANYANDALLOTHERDAMAGESORLOSSES.INNO EVENTWILLCoffeeCupSoftwareBELIABLEFORANYDAMAGESINEXCESSOF THELISTPRICECoffeeCupSoftwareCHARGESFORALICENSETOTHE SOFTWARE,EVENIFCoffeeCupSoftwareSHALLHAVEBEENADVISEDOFTHE POSSIBILITYOFSUCHDAMAGES.FURTHERMORE,SOMESTATESAND JURISDICTIONSDONOTALLOWTHEEXCLUSIONORLIMITATIONOF INCIDENTALORCONSEQUENTIALDAMAGES,SOTHISLIMITATIONAND EXCLUSIONMAYNOTAPPLYTOYOU.Theforegoingprovisionsshallbe enforceabletothemaximumextentpermittedbyapplicablelaw. 7.Miscellaneous.ThisAgreementisgovernedbythelawsoftheUnitedStatesand theStateofTexas,withoutreferencetoconflictoflawsprinciples,andtheparties agreethatthesolelocationandvenueforanylitigationwhichmayarisehereunder shallbeNuecesCounty,Texas.TheapplicationoftheUnitedNationsConvention ofContractsfortheInternationalSaleofGoodsisexpresslyexcluded.This AgreementsetsforthallrightsfortheuseroftheSoftwareandistheentire agreementbetweentheparties.ThisAgreementsupersedesanyother communicationswithrespecttotheSoftwareandDocumentation.This Agreementmaynotbemodifiedexceptbyawrittenaddendumissuedbyaduly authorizedrepresentativeofCoffeeCupSoftware.Noprovisionhereofshallbe deemedwaivedunlesssuchwaivershallbeinwritingandsignedbyCoffeeCup SoftwareoradulyauthorizedrepresentativeofCoffeeCupSoftware.Ifany provisionofthisAgreementisheldinvalid,theremainderofthisAgreementshall continueinfullforceandeffect.Thepartiesconfirmthatitistheirwishthatthis AgreementhasbeenwrittenintheEnglishlanguageonly. 8.TheSoftwareandDocumentationareprovidedwithRestrictedRights.Use, duplication,ordisclosurebytheU.S.Governmentissubjecttorestrictionsasset forthinsubparagraph(c)1(ii)oftheRightsinTechnicalDataandComputer SoftwareclauseatDFARS252.2277013orsubparagraphs(c)(1)and(2)ofthe CommercialComputerSoftwareRestrictedRights48CFR52.22719,as applicable. 9.YouagreethatyouwillnotexportorreexporttheSoftwareorDocumentation toanycountry,person,entityorendusersubjecttoU.S.A.exportrestrictions. Restrictedcountriescurrentlyinclude,butarenotnecessarilylimitedtoCuba, Iran,Iraq,Libya,NorthKorea,Sudan,andSyria.Youwarrantandrepresentthat neithertheU.S.A.BureauofExportAdministrationnoranyotherfederalagency hassuspended,revokedordeniedyourexportprivileges. Copyright19962007CoffeeCupSoftware,Inc.AllRightsReserved. CoffeeCupSoftwareisaregisteredtrademarkofCoffeeCupSoftware,Inc.
382
NoticeofCopyright
AcceptanceofTerms WelcometotheWebsite(the"Website")ofCoffeeCupSoftware,Inc. ("CoffeeCup").OnthisWebsite,CoffeeCupmakesavailabletoyouawiderangeof information,software,products,downloads,documents,communications,files, text,graphics,publications,content,tools,forums,resources,andservices. PLEASEREADTHETERMSOFUSECAREFULLYBEFOREUSINGTHIS WEBSITE.ByaccessingandusingthisWebsiteinanyway,including,without limitation,browsingtheWebsite,usinganyinformation,usinganycontent,using anyservices,downloadinganymaterials,and/orplacinganorderforproductsor services,youagreetoandareboundbythetermsofusedescribedinthis document("TermsofUse").IFYOUDONOTAGREETOALLOFTHETERMS ANDCONDITIONSCONTAINEDINTHETERMSOFUSE,DONOTUSETHIS WEBSITEINANYMANNER.TheTermsofUseareenteredintobyandbetween CoffeeCupandyou.IfyouareusingtheWebsiteonbehalfofyouremployer,you representthatyouareauthorizedtoaccepttheseTermsofUseonyouremployer's behalf. CoffeeCupreservestheright,atCoffeeCup'ssolediscretion,tochange,modify, update,add,orremoveportionsoftheTermsofUseatanytimewithoutnoticeto you.PleasechecktheseTermsofUseforchanges.Yourcontinueduseofthis WebsitefollowingthepostingofchangestotheTermsofUsewillmeanyou acceptthosechanges. UseofMaterialsLimitations AllmaterialscontainedintheWebsitearethecopyrightedpropertyofCoffeeCup, itssubsidiaries,affiliatedcompaniesand/orthirdpartylicensor's.Alltrademarks, servicemarks,andtradenamesareproprietarytoCoffeeCup,oritssubsidiariesor affiliatedcompaniesand/orthirdpartlicensor's. Unlessotherwisespecified,thematerialsandservicesonthisWebsiteareforyour personalandnoncommercialuse,andyoumaynotmodify,copy,distribute, transmit,display,perform,reproduce,publish,license,createderivativeworks from,transfer,orsellanyinformation,software,productsorservicesobtained fromtheWebsitewithoutthewrittenpermissionfromCoffeeCup. PrivacyPolicy
383
CoffeeCuprespectsyourdesireforprivacy.Yourinformationmaybestoredand processedintheUnitedStatesoranyothercountryinwhichCoffeeCupor CoffeeCuprepresentativesandaffiliatesmaintainfacilities.Thisinformationis highlyprotectedandisstoredinasecureandcontrolledenvironment.Byusing thissite,youconsenttoanysuchtransferofinformationoutsideofyourcountry andyouconsenttothetermsofourPrivacyPolicy.CoffeeCup'sPrivacyPolicycan befoundathttp://www.coffeecup.com/legal/privacy.html. UseofSoftwareontheWebsite AnysoftwarethatismadeavailabletodownloadfromtheWebsite("Software")is thecopyrightedworkofCoffeeCupand/oritssuppliers.UseoftheSoftwareis governedbythetermsoftheEndUserLicenseAgreement,ifany,which accompaniesorisincludedwiththeSoftware("LicenseAgreement"),oras expresslystatedontheWebsitepagesaccompanyingthesoftware.Anenduser willbeunabletodownloadorinstallanySoftwarethatisaccompaniedbyor includesaLicenseAgreement,unlessheorshefirstagreestotheLicense Agreementterms. TheSoftwareismadeavailablefordownloadsolelyforusebyendusersaccording totheLicenseAgreement.Anyuse,reproductionorredistributionoftheSoftware notinaccordancewiththeLicenseAgreementisexpresslyprohibitedbylaw,and mayresultinseverecivilandcriminalpenalties.Violatorswillbeprosecutedtothe maximumextentpossible.AbsentaLicenseAgreementthataccompaniesthe Software,useoftheSoftwarewillbegovernedbytheTermsofUse. WITHOUTLIMITINGTHEFOREGOING,COPYINGORREPRODUCTIONOF THESOFTWARETOANYOTHERSERVERORLOCATIONFORFURTHER REPRODUCTIONORREDISTRIBUTIONISEXPRESSLYPROHIBITED,UNLESS SUCHREPRODUCTIONORREDISTRIBUTIONISEXPRESSLYPERMITTEDBY THELICENSEAGREEMENTACCOMPANYINGSUCHSOFTWARE. THESOFTWAREISWARRANTED,IFATALL,ONLYACCORDINGTOTHE TERMSOFTHELICENSEAGREEMENT.EXCEPTASWARRANTEDINTHE LICENSEAGREEMENT,COFFEECUPSOFTWARE,INC.HEREBYDISCLAIMS ALLWARRANTIESANDCONDITIONSWITHREGARDTOTHESOFTWARE, INCLUDINGALLWARRANTIESANDCONDITIONSOFMERCHANTABILITY, WHETHEREXPRESS,IMPLIEDORSTATUTORY,FITNESSFORAPARTICULAR PURPOSE,TITLEANDNONINFRINGEMENT. FORYOURCONVENIENCE,COFFEECUPMAYMAKEAVAILABLEASPARTOF THESERVICESORINITSMATERIALSORSOFTWAREPRODUCTS,TOOLS ANDUTILITIESFORUSEAND/ORDOWNLOAD.COFFEECUPDOESNOT MAKEANYASSURANCESWITHREGARDTOTHEACCURACYOFTHE
384
RESULTSOROUTPUTTHATDERIVESFROMSUCHUSEOFANYSUCHTOOLS ANDUTILITIES.YOUSHALLRESPECTTHEINTELLECTUALPROPERTY RIGHTSOFOTHERSWHENUSINGTHETOOLSANDUTILITIESMADE AVAILABLEONTHESERVICESORINCOFFEECUPSOFTWAREPRODUCTS. UseofDocumentsandPublicationsontheWebsite ExceptasexpresslyprohibitedonthisWebsite,youarepermittedtoview,copy, printanddistributepublicationsanddocumentswithinthisWebsite(suchas FAQs,whitepapers,datasheets,pressreleasesandsoon),subjecttoyour agreementthat:a)youruseoftheinformationisforinformational,personal,and noncommercialpurposesonly,b)youwillnotmodifythedocuments, publicationsorgraphics,c)youwillnotcopyordistributegraphicsseparatefrom theiraccompanyingtextandyouwillnotquotematerialsoutoftheircontext,d) youwilldisplaythebelowcopyrightnoticeandotherproprietarynoticesonevery copyyoumake,ande)youagreethatCoffeeCupmayrevokethispermissionatany timeandyoushallimmediatelystopyouractivitiesrelatedtothispermissionupon noticefromCoffeeCup.Useforanyotherpurposeisexpresslyprohibitedbylaw, andmayresultinseverecivilandcriminalpenalties.Violatorswillbeprosecuted tothemaximumextentpossible. Thepermissionabovetousedocumentsandpublicationsdoesnotinclude permissiontocopythedesignelements,lookandfeel,orlayoutofthisWebsite. ThoseelementsoftheWebsiteareprotectedbylaw,suchastradedress, trademark,unfaircompetition,andotherlawsandmaynotbecopiedorimitated inwholeorinpart.Nologo,graphic,soundorimagefromtheWebsitemaybe copiedorretransmittedunlessexpresslypermittedbyCoffeeCup. EXCEPTASEXPRESSLYPROVIDEDOTHERWISE,COFFEECUPAND/ORITS RESPECTIVESUPPLIERSMAKENOREPRESENTATIONSABOUTTHE SUITABILITYOFTHEINFORMATIONCONTAINEDINTHEDOCUMENTSAND PUBLICATIONSANDRELATEDGRAPHICSPUBLISHEDONTHEWEBSITEFOR ANYPURPOSE.EXCEPTASEXPRESSLYPROVIDEDOTHERWISE,ALLSUCH DOCUMENTSANDRELATEDGRAPHICSAREPROVIDED"ASIS"WITHOUT WARRANTYOFANYKIND.EXCEPTASEXPRESSLYPROVIDEDOTHERWISE, COFFEECUPAND/ORITSRESPECTIVESUPPLIERSHEREBYDISCLAIMALL WARRANTIESANDCONDITIONSWITHREGARDTOTHISINFORMATION, INCLUDINGALLWARRANTIESANDCONDITIONSOFMERCHANTABILITY, WHETHEREXPRESS,IMPLIEDORSTATUTORY,FITNESSFORAPARTICULAR PURPOSE,TITLEANDNONINFRINGEMENT.INNOEVENTSHALL COFFEECUPAND/ORITSRESPECTIVESUPPLIERSBELIABLEFORANY SPECIAL,INDIRECTORCONSEQUENTIALDAMAGESORANYDAMAGES WHATSOEVERRESULTINGFROMLOSSOFUSE,DATAORPROFITS, WHETHERINANACTIONOFCONTRACT,NEGLIGENCEOROTHER
385
TORTIOUSACTION,ARISINGOUTOFORINCONNECTIONWITHTHEUSE ORPERFORMANCEOFINFORMATIONAVAILABLEFROMTHEWEBSITE. THEDOCUMENTSANDRELATEDGRAPHICSPUBLISHEDONTHESERVICES COULDINCLUDETECHNICALINACCURACIESORTYPOGRAPHICALERRORS. CHANGESAREPERIODICALLYADDEDTOTHEINFORMATIONHEREIN. COFFEECUPAND/ORITSRESPECTIVESUPPLIERSMAYMAKE IMPROVEMENTSAND/ORCHANGESINTHEPRODUCT(S)AND/ORTHE PROGRAM(S)DESCRIBEDHEREINATANYTIMEWITHOUTNOTICE. DisclaimersandOtherNoticesontheUseroftheWebsite EXCEPTASEXPRESSLYPROVIDEDOTHERWISE,ALLINFORMATION, SOFTWARE,DOCUMENTATION,MATERIALS,SERVICESANDPUBLICATION AREPROVIDED"ASIS"WITHOUTWARRANTYOFANYKINDAND COFFEECUPHEREBYDISCLAIMSALLWARRANTIESEITHEREXPRESSEDOR IMPLIED,INCLUDINGBUTNOTLIMITEDTO,IMPLIEDWARRANTIESOF MERCHANTABILITYORFITNESSFORAPARTICULARPURPOSE.IN ADDITION,EXCEPTASEXPRESSLYPROVIDEDOTHERWISE,CoffeeCup DISCLAIMSANYWARRANTIESOFNONINFRINGEMENT,TITLE,ORQUIET ENJOYMENT.INNOEVENTSHALLCOFFEECUPAND/ORITSRESPECTIVE SUPPLIERSBELIABLEFORANYSPECIAL,INDIRECTORCONSEQUENTIAL DAMAGESORANYDAMAGESWHATSOEVERRESULTINGFROMLOSSOF USE,DATAORPROFITS,WHETHERINANACTIONOFCONTRACT, NEGLIGENCEOROTHERTORTIOUSACTION,ARISINGOUTOFORIN CONNECTIONWITHTHEUSEOFTHISWEBSITE,USEORPERFORMANCEOF SOFTWARE,DOCUMENTS,MATERIALS,PUBLICATIONS,PROVISIONOFOR FAILURETOPROVIDESERVICES,ORINFORMATIONAVAILABLEFROMTHE WEBSITE. EXCEPTASEXPRESSLYPROVIDEDOTHERWISE,YOUASSUMEALLRISKS CONCERNINGTHESUITABILITYANDACCURACYOFTHEINFORMATION WITHINTHEWEBSITE,MATERIALS,PUBLICATIONSANDDOCUMENTS.THE WEBSITE,MATERIALS,PUBLICATIONSANDDOCUMENTSMAYCONTAIN TECHNICALINACCURACIESORTYPOGRAPHICALERRORS.COFFEECUP ASSUMESNORESPONSIBILITYFORANDDISCLAIMSALLLIABILITYFORANY SUCHINACCURACIES,ERRORSOROMISSIONSINTHEWEBSITE, MATERIALS,PUBLICATIONSANDDOCUMENTSANDINANYOTHER REFERENCE. COFFEECUPMAYMAKECHANGESTOTHEWEBSITE,INFORMATION, SOFTWARE,WEBSITE,DOCUMENTS,PUBLICATIONS,PRICES,TECHNICAL SPECIFICATIONS,PRODUCTOFFERINGSANDANYOTHERINFORMATION ANDMATERIALSONTHEWEBSITEATANYTIMEANDWITHOUTNOTICE.
386
THEWEBSITE,DOCUMENTSANDPUBLICATIONSAREDISTRIBUTED INTERNATIONALLYANDMAYCONTAINREFERENCESORCROSS REFERENCESTOCOFFEECUPPRODUCTS,PROGRAMS,ANDSERVICESTHAT HAVENOTBEENANNOUNCEDORAVAILABLEINYOURCOUNTRY.SUCH REFERENCESDONOTIMPLYTHATCOFFEECUPINTENDSTOANNOUNCE SUCHPRODUCTS,PROGRAMS,ORSERVICESINYOURCOUNTRY.THE WEBSITECONTAINSLINKSTOTHIRDPARTYSITESWHICHARENOT UNDERTHECONTROLOFCOFFEECUPANDCOFFEECUPISNOT RESPONSIBLEFORTHECONTENTSONANYLINKEDSITEORANYLINK CONTAINEDINALINKEDSITE,ORANYCHANGESORUPDATESTOSUCH SITES.COFFEECUPISNOTRESPONSIBLEFORWEBCASTINGORANYOTHER FORMOFTRANSMISSIONRECEIVEDFROMANYLINKEDSITE.COFFEECUPIS PROVIDINGTHESELINKSTOYOUONLYASACONVENIENCE,ANDTHE INCLUSIONOFANYLINKDOESNOTIMPLYTHATCOFFEECUPENDORSES ORACCEPTSANYRESPONSIBILITYFORTHECONTENTONSUCHTHIRD PARTYSITES. AccountsandSecurity IfanyoftheservicesontheWebsiterequiresyoutoopenanaccount,youmust completetheregistrationprocessbyprovidinguswithtrue,current,completeand accurateinformationaspromptedbytheapplicableregistrationform,andyouwill maintainandpromptlyupdatesuchinformationtokeepittrue,current,complete andaccurate.Youalsowillchooseapasswordandausername.Youareentirely responsibleformaintainingtheconfidentialityofyourpasswordandaccount. Furthermore,youareentirelyresponsibleforanyandallactivitiesthatoccur underyouraccount.YouagreetonotifyCoffeeCupimmediatelyofany unauthorizeduseofyouraccountoranyotherbreachofsecurity.CoffeeCupwill notbeliableforanylossthatyoumayincurasaresultofsomeoneelseusingyour passwordoraccount,eitherwithorwithoutyourknowledge.However,youcould beheldliableforlossesincurredbyCoffeeCuporanotherpartyduetosomeone elseusingyouraccountorpassword.Youmaynotuseanyoneelse'saccountatany time,withoutthepermissionoftheaccountholder.Youacknowledgeandagree thatcertainservicesmayprovidepasswordrestrictedaccesstocustomer informationsuchasnamesandcertaintermsofyourcontracts.Byusingthis Websiteandregisteringforsuchservices,youconsenttoCoffeeCup'sdisplayof suchinformationviatheservicesandacceptallrisksofunauthorizedaccessto suchinformation.Ifyouprovideanyinformationthatisfalse,inaccurate,outof date,orincomplete,orCoffeeCuphasreasonablegroundstosuspectthatsuch informationisfalse,inaccurate,notcurrent,orincomplete,CoffeeCupmay suspendorterminateyouraccountandrefuseanyandallcurrentorfutureuseof theservicesoranyportionthereof.Youareresponsibleforallcostsandcharges, includingwithoutlimitation,phonechargesandtelecommunicationsequipment, thatyouincurinordertousetheservices.
387
NoUnlawfulorProhibitedUse AsaconditionofyouruseoftheWebsite,youwillnotusetheWebsiteforany purposethatisunlawfulorprohibitedbytheseterms,conditions,andnotices.You maynotusetheServicesinanymannerthatcoulddamage,disable,overburden, orimpairanyCoffeeCupserver,orthenetwork(s)connectedtoanyCoffeeCup server,orinterferewithanyotherparty'suseandenjoymentoftheWebsite.You maynotattempttogainunauthorizedaccesstoservices,materials,other accounts,computersystemsornetworksconnectedtoanyCoffeeCupserverorto theWebsite,throughhacking,passwordminingoranyothermeans.Youmaynot obtainorattempttoobtainanymaterialsorinformationthroughanymeansnot intentionallymadeavailablethroughtheWebsite. UseofServicesontheWebsite TheWebsitemaycontainemailservices,bulletinboardservices,chatareas,news groups,forums,communities,personalwebpages,calendars,photoalbumsand/or othermessageorcommunicationfacilitiesdesignedtoenableyoutocommunicate withothers(eacha"CommunicationService"andcollectively"Communication Services").YouagreetousetheCommunicationServicesonlytopost,sendand receivemessagesandmaterialthatareproperand,whenapplicable,relatedtothe particularCommunicationService.Bywayofexample,andnotasalimitation,you agreethatwhenusingtheCommunicationServicesortheWebsite,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, CoffeeCupreservestherighttoreviewmaterialspostedtotheCommunication Servicesandtoremoveand/oreditanymaterialsinitssolediscretion.CoffeeCup reservestherighttoterminateyouraccesstoanyoralloftheCommunication Servicesatanytime,withoutnotice,foranyreasonwhatsoever. CoffeeCupreservestherightatalltimestodiscloseanyinformationasCoffeeCup deemsnecessarytosatisfyanyapplicablelaw,regulation,legalprocessor governmentalrequest,ortoedit,refusetopostortoremoveanyinformationor materials,inwholeorinpart,inCoffeeCup'ssolediscretion. Alwaysusecautionwhengivingoutanypersonallyidentifiableinformationabout yourselforyourchildreninanyCommunicationServices.CoffeeCupdoesnot controlorendorsethecontent,messagesorinformationfoundinany CommunicationServicesand,therefore,CoffeeCupspecificallydisclaimsany liabilitywithregardtotheCommunicationServicesandanyactionsresultingfrom
389
yourparticipationinanyCommunicationServices.Managersandhostsarenot authorizedCoffeeCupspokespersons,andtheirviewsdonotnecessarilyreflect thoseofCoffeeCup. MaterialsuploadedtotheCommunicationServicesmaybesubjecttoposted limitationsonusage,reproductionand/ordissemination;youareresponsiblefor adheringtosuchlimitationsifyoudownloadthematerials. NoticesandProceduresforMakingClaimsofCopyrightInfringement CoffeeCupwillinvestigatenoticesofcopyrightinfringementandtakeappropriate actionsundertheDigitalMillenniumCopyrightAct,Title17,UnitedStatesCode, Section512(c)(2)("DMCA").PursuanttotheDMCA,writtennotificationof claimedcopyrightinfringementmustbesubmittedtothefollowingDesignated AgentforthisWebsite: Serviceprovider(s):CoffeeCupSoftware,Inc. Nameofagentdesignatedtoreceivenotificationofclaimedinfringement:J. Cornelius Fulladdressofdesignatedagenttowhichnotificationshouldbesent: 165CourtlandStreet SuiteA,Box312 Atlanta,GA30303 Telephonenumberofdesignatedagent:(678)4953480 Facsimilenumberofdesignatedagent:(678)4953481 Emailaddressofdesignatedagent:admin@coffeecup.com 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. SpamEmailandPostings YouagreethatCoffeeCupwouldbeirreparablyharmedbytheuse,byyouor others,oftheWebsiteorfacilitiesinconnectionwiththetransmissionofspam newsgrouppostingsorunsolicitedemailinviolationoftheseTermsofUse,and thatCoffeeCupisentitledtoobtaininjunctivereliefagainstanysuchtransmission (inadditiontoallotherremediesavailableatlaworinequity).CoffeeCupreserves therighttoblock,filterordeleteunsolicitedemail. Indemnity Youagreetoindemnify,defendandholdCoffeeCup,anditssubsidiaries,affiliates, officers,agents,cobranders,partners,andemployees,harmlessfromanyclaimor demand,includingreasonableattorneys'fees,madebyanythirdpartyduetoor arisingoutofyourSubmissions,youruseoftheWebsite,includinganyuseby youremployees,yourconnectiontotheWebsite,yourviolationoftheTermsof Use,oryourviolationofanyrightsofanother. AdvertisementsandPromotions CoffeeCupmayrunadvertisementsandpromotionsfromthirdpartiesonthe Website.Themanner,modeandextentofadvertisingbyCoffeeCupissubjectto change.Yourcorrespondenceorbusinessdealingswith,orparticipationin promotionsof,advertisersotherthanCoffeeCupfoundonorthroughtheWebsite, includingpaymentanddeliveryofrelatedgoodsorservices,andanyotherterms, conditions,warrantiesorrepresentationsassociatedwithsuchdealings,aresolely betweenyouandsuchadvertiser.CoffeeCupisnotresponsibleorliableforany lossordamageofanykindincurredastheresultofanysuchdealingsorasthe resultofthepresenceofsuchnonCoffeeCupadvertisersontheWebsite. CopyrightandTrademarkInformation 1.COPYRIGHTNOTICE:Copyright19962004CoffeeCupSoftware,Inc.,711N. CarancahuaStreet,CorpusChristi,TX78475USA.AllRightsReserved.Use, duplication,ordisclosurebytheUnitedStatesGovernmentissubjecttothe restrictionssetforthinDFARS252.2277013(c)(1)(ii)andFAR52.22719.
391
TheTermsofUseconstitutetheentireagreementbetweenyouandCoffeeCupand governyouruseoftheWebsite,supersedinganyprioragreementsbetweenyou andCoffeeCuponthesubjectmatter(including,butnotlimitedto,anyprior versionsoftheTermsofUse).Notwithstandingthepriorprovision,totheextent, andonlytotheextent,thatanytermssetforthinthisTermsofUseexpressly contradictsanytermsofapriorwrittenagreementbetweenyouandCoffeeCupin effectasofthedateofyouruseoftheWebsiteandspecificallyregardingyouruse oftheWebsite("ExecutedAgreement"),suchcontradictorytermssetforthinthe ExecutedAgreementshallgovern.Youalsomaybesubjecttoadditionaltermsand conditionsthatmayapplywhenyouuseotherCoffeeCupservices,thirdparty contentorthirdpartysoftware.Youmustnotassignorotherwisetransferthe TermsofUsenoranyrightgrantedhereunder. TexaslawandcontrollingU.S.federallawgovernanyactionrelatedtotheTerms ofUse,withoutregardtotheprinciplesofchoiceoflaw.Thepartiesspecifically disclaimtheU.N.ConventiononContractsfortheInternationalSaleofGoods. CoffeeCupcontrolsandoperatesthisWebsitefromitsheadquartersinvarious locationsintheUnitedStatesofAmericaandmakesnorepresentationthatthis Websiteisappropriateoravailableforuseinotherlocations.Ifyouusethis Websitefromotherlocations,youareresponsibleforcompliancewithapplicable locallawsincludingbutnotlimitedtotheexportandimportregulationsofother countries. YouacknowledgeandagreethatmaterialonthisWebsiteissubjecttotheU.S. ExportAdministrationLawsandRegulations.Diversionofsuchmaterialcontrary toU.S.lawisprohibited.YouagreethatnoneofthematerialonthisWebsite,nor anydirectproducttherefrom,isbeingorwillbeacquiredfor,shipped,transferred, orreexported,directlyorindirectly,toproscribedorembargoedcountriesortheir nationals,norbeusedfornuclearactivities,chemicalbiologicalweapons,or missileprojectsunlessauthorizedbytheU.S.Government.Proscribedcountries aresetforthintheU.S.ExportAdministrationRegulations.Countriessubjectto U.S.embargoare:Cuba,Iran,Libya,NorthKorea,Syria,andSudan.Thislistis subjecttochangewithoutfurthernoticefromCoffeeCup,andyoumustcomply withthelistasitexistsinfact.YoucertifythatyouarenotontheU.S.Department ofCommerce'sDeniedPersonsListoraffiliatedlistsorontheU.S.Departmentof Treasury'sSpeciallyDesignatedNationalsList.Youagreetocomplystrictlywithall U.S.exportlawsandassumesoleresponsibilityforobtaininglicensestoexportor reexportasmayberequired. 2.ThefailureofCoffeeCuptoexerciseorenforceanyrightorprovisionofthe TermsofUsedoesnotconstituteawaiverofsuchrightorprovision.Ifacourtof competentjurisdictionfindsanyprovisionoftheTermsofUsetobeinvalid,the partiesneverthelessagreethatthecourtshouldendeavortogiveeffecttothe
392
parties'intentionsasreflectedintheprovision,andtheotherprovisionsofthe TermsofUseremaininfullforceandeffect.Regardlessofanystatuteorlawtothe contrary,anyclaimorcauseofactionarisingoutoforrelatedtouseofthe WebsiteortheTermsofUsemustbefiledwithinone(1)yearaftersuchclaimor causeofactionaroseorbeforeverbarred.ThesectiontitlesintheTermsofUse areforconvenienceonlyandhavenolegalorcontractualeffect.
393
HereatCoffeeCupSoftware,weunderstandtheimportanceofyourprivacy. CoffeeCupSoftware,Inc.willneverwillfullydiscloseindividuallyidentifiable informationaboutitscustomerstoanythirdpartywithoutfirstreceivingthat customer'spermission.Youcansleepwellknowingyourinformationwillnotleave ouroffices.
SoftwarePrivacyPolicy
1.WillCoffeeCupeversendspamtomyemailaddress?
Wedonotsendspam.Byenteringyouremailaddress,youagreetoreceiveemail fromusaboutproductupdatesandspecialdeals.Weusuallysendonlyone messageeachmonth.Ifyoudonotwishtoreceivethesemessages,youcan removeyouremailaddressfromourlistatanytimebyvisitingthispage: http://www.coffeecup.com/help/myprofile/mysubscriptions/.
2.Whydowecollectuserinformationwhenyoudownload?
Whenyoudownloadapieceofsoftwarefromus,welogyourname,email address,andIPaddress.Wedothistohelpdetectillegaldownloadsandsoftware piracy.Oursoftwareisquitepopularandbelieveitornot,therearesomecrooked peopleouttherewhotrytostealit.
3.Howistheinformationwecollectused?
Wekeepadatabaseofourusersnamesandemailaddressesforproductupdate andupgradenotifications.Whenwereleaseanewversionofanyofoursoftware titles,wesendamessagetoallourregistereduserstoletthemknow.Otherthan that,weliketotelloursharewareusersaboutnewandexcitingproducts.
4.Willthispersonalinformationeverbeusedforanyother purpose?
Theonlytimewewouldeveruseyourpersonalinformationforanyotherreasonis toaidtheproperauthoritiesinfindingfraudulentcreditcardchargesorinfinding thoseresponsibleforillegaldistributionorpiracyofoursoftware.
5.WillCoffeeCupeversellthisinformationtoathirdpartyfor advertising?
Areyoukidding?Nope.Never.Notachance. Ifyouhaveanyadditionalquestionsaboutourusageofyourpersonalinformation, pleasecontactusat: CoffeeCupSoftware 165CourtlandStreet SuiteA,Box312 Atlanta,GA30303USA
394
ATTN:AbuseDepartment abuse@coffeecup.com
395

CoffeeCup HTML Editor Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CoffeeCup HTML Editor Manual

Uploaded by

Copyright:

Available Formats

HTMLEditorHelp

GotquestionsaboutthefeaturesinHTMLEditor?Wanttocheckoutsomehelpful tutorialstogetyouuptospeedonusingtheprogram?Youvecometotheright place! August2009

Visitouruserforums(http://www.coffeecup.com/forums/),checkout thearticlesandvideotutorialsinouronlineKnowledgebase (http://www.coffeecup.com/htmleditor/help/)orcontactourfabulous techsupportteam(http://www.coffeecup.com/help/)!

Linksyoutoatutorialorfrequentlyaskedquestionthatexplainsthetool orfunctioninmoredetail. LinksyoutoaWebsitecontaininginformationthatmaybebeyondthe scopeofthismanual.

CoffeeCupSoftwareisdesignedforinstallationunderWindowsonly. However,youcaninstallandusethesoftwareonMacOSXwiththe correctutilities.CrossOver(http://www.codeweavers.com/),developed byCodeWeavers,andVMware(http://www.vmware.com),developedby VMware,Inc.,bothallowyoutoemulateoursoftwareonMacOSX.

Tonavigatethetips,usethePreviousandNextbuttons.Ifyoudonotwanttosee thesetipsonstartup,uncheckthecheckboxnexttoShowtipofthedayon startup. ToreenabletheTipoftheDaywindow,gotoHelp>TipoftheDayor usetheoptionsunderTools>Preferences>Generaltab.

OpenstheWebsiteProjectSettingswindow,whichletsyoucreateablank WebsiteProjectortocreateaWebsiteProjectfromexistingfiles.Youcanalso enteradditionalinformation,suchasyourserversettings,andselectyourfile uploadoptions.

AlayoutincludestheHTMLforabasicpagestructure.Youprovidethe content.Ifyouprefertoworkwithapagedesign,gotoFile>NewFrom Theme.Formoreinformationaboutthedifferencebetweenlayoutsand themes,readWhatisthedifferencebetweenalayoutandatheme?

AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCode Snippetstab.Foradetailedtutorialaboutworkingwithsnippets,read HowtoUseSnippets.

TheQuickStartwindowallowsyoutodefinesettingsforyournewpage,including thepagetitle,colorscheme,DOCTYPE,characterset,andmetainformation. ForadetailedtutorialaboutusingtheQuickStartwindow,read CreatingaNewWebpage.

Ifyouareunsureofanyofthisinformation,contactyourhosting provider.Ifyouarenotsurewhetheryoushouldusethisinformation, chancesareyoudonothaveto.

Putthefollowinginformationintheprovidedfields. Ifyouareunsureofanyofthisinformation,contactyourhosting provider.

TheEditmenucontains optionsthatallowyoutoundo orredoyouractions,cut,copy, paste,select,anddelete objects,convertyourcode case,runafindandreplace, andedityourXHTMLtags.

TheExtendedFindandReplacewindowallowsyoutosearchthecurrent document,allopendocuments,orallthedocumentsinagivenfolderforasearch term,andthenreplaceitwithtextofyourchoosing. Foradetailedtutorialaboutusingthisfunction,readHowtoUse ExtendedFindandReplace.

TheViewmenucontainsoptionsthat allowyoutochangehowthings appearintheprogram.

Toviewyourworkinotherbrowsers,usethePreviewtool.It'sgood WebdesignpracticetotestyourWebsiteinseveraldifferentbrowsersto ensurecrossbrowsercompatibility.Themostpopularbrowsersare Firefox,InternetExplorer,Opera,GoogleChrome,andSafari.

Toexitthisarea,clicktheredXinitsupperrighthandcorner. Search Results tab Document Dependencies tab

TheDocumentDependenciestabdisplaysthelinksandexternalfilesreferencedin theopenWebsiteProjectthathavenotbeencopiedormovedtooneofthe WebsiteProjectfolders.

OpenstheWebsiteProject Settingswindow,whichlets youcreateablankWebsite ProjectortocreateaWebsite Projectfromexistingfiles.Youcanalsoenteradditionalinformation,suchasyour serversettings,andselectyourfileuploadoptions.

IfDependenciesAreMissingFromLocalSystem,Cancel FileUpload WhenUploadingFiles

Cancelsthefileuploadifanyofthedocumentdependenciesarenotlocatedinthe rightplaceinyourWebsiteProject. Youcanchoosetoalwaysuploaddependentfileslikeimagesandstylesheets, neveruploadthem,orhavetheprogramconfirmwithyoubeforeuploadingthem.

TheDocumentmenuallowsyou toworkwithdocument propertiesandbookmarks,and tovalidateyourHTML.

TheDocumentWeightwindowcontainsinformationaboutthesizeofthe currentlyopendocumentandhowlongitwilltaketodownloadtoacomputeron severaldifferentconnections.

Dragyourmouseoverthesquarestopickhowmanycolumnsandrowsareinyour table.Clickwhenyouhavespecifiedthedesireddimensions,andthecodewillbe insertedonyourpage.

OpenstheInsertFormwindow,whichallowsyoutosettheformmethod,MIME postmethod,andURLwheretheformresultswillbedirected.Thisinformationis importantifyouwantyourformtoworkproperly!

EntertheoptionsyouwouldliketodisplayintheItemfield,andenterthevalues youwouldliketoappearintheformresultsintheValuefield.TheNameappears intheformresults,andtheAlignmentoptionscontrolwheretheelementappears onthepage.

Insertsthecodeforatextbox,whichisaonelinefieldwhereyourusercantype information,andisbestsuitedforshortanswers,suchasname,emailaddress, phonenumber,etc.Atextboxlookslikethis:

Insertsthecodeforatextarea,whichisamultiplelinefieldwhereyourusercan typeinformation,andisbestsuitedforlongeranswers,suchasmessages, feedback,etc.Atextarealookslikethis:

Forcomprehensiveinformationaboutcreatingandmodifyingstyle sheets,readtheW3SchoolstutorialCSSIntroduction (http://www.w3schools.com/css/css_intro.asp). OpenstheStyleSheetwindow,whichallowsyoutochoosebetweencreatinga newstylesheetclassandapplyingastylesheettoapreexistingHTMLtag.

TheInsertLinkwindowallowsyoutoinsertalinkandanyassociatedattributes. Foradetailedtutorialaboutinsertinglinks,readAddingaLinktoYour Page.

TheInsertEmailLinkwindowallowsyoutoinsertanemaillinkandany associatedattributes.Whenyouruserclicksonthislink,theirdefaultemailclient (Thunderbird,OutlookExpress,etc.)willopenwiththisemailaddressintheTo: field. Foradetailedtutorialaboutusingemaillinks,readAddinganEmail LinktoYourPage.

Afteryouhaveselectedanimageandconfiguredanyadditionalattributes,click OK.ThisopenstheCopytoProjectwindow,whichpromptsyoutosaveyour imagetoyourWebsiteProjectorWorkingfolder.

YoucansavetheimagetoanyofthepreexistingfoldersinyourWebsiteProjector clickCreateFoldertocreateanewfolderforyourimage.Whenyouhaveselected thefolderwhereyourimagewillbestored,clickOK.

Adescriptionoftheimagedisplayedwhentheimagecannotbeshown,suchasin atextonlyorspeechbrowser,orifauserhasaslowconnection.Youshould alwaysusedetailedalttextforallprominentorcontextuallyimportantimageson yourWebpage

Theimageresizefeatureshouldonlybeusedtomakeminor adjustments,sincesignificantadjustmentsmaydistorttheimage.Ifyou needtomakeadvancedchangestoyourimage,useanimageediting program.

TheInsertListwindowallowsyoutoinsertoneoffourdifferentkindsoflists.You canalsoimportalistclickingtheImportListbutton. Foradetailedexplanationofhowtouselists,readHowtoCreatea List.

TheInsertHorizontalRulewindowallowsyoutoconfigurethesettingsofa horizontalrulethatisthenaddedtoyourpage.Youcanpreviewthechangesyou makeinthePreviewarea. Formoreinformationabouthorizontalrules,readWhatIsa HorizontalRule?

Thewidthandheightaremeasuredinthepercentageofthepagetheframe occupies.Iftheselectedframetakesuptheentireheightorwidthofthepageby default,youwillnotbeabletoadjustthatattribute.

TheFilemenuallowsyoutoworkwithbasicaspects oftheTableDesigner,includingcreating,opening, saving,andpreviewingtables,aswellasclosingthe designer.

TheEditmenuallowsyoutoundoorredoyour actionsandtocut,copy,paste,select,anddelete objects.

TheFormatmenuallowsyoutoformatthe styleandfontofyourtextandtosetthe backgroundcolorofyourtable.

Youcanchoosetoapplythecolortothetext,theparagraph,ortheentiretable.To selectmorecolors,clicktheMoreColorsbutton.ThisopenstheColorwindow, whichallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

Tochangetheparagraphpadding,clickthePaddingbutton.Thisopensthe Paddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingis theamountofspacethatappearsbetweentheparagraphandtheborderofthe cell.

UncheckingtheMainToolbar(oranycustomtoolbarsthatmaybelisted) removesitfromtheworkspace.Itcanbereaddedbycheckingitagain.Selecting CustomizeopenstheCustomizewindow,whichallowsyoutocustomizethe maintoolbarorcreateyourown.

Youcanchoosetoapplythecolortothetext,theparagraph,ortheentire table.Toselectmorecolors,clicktheMoreColorsbutton.Thisopensthe Colorwindow,whichallowsyoutoadjustbrightnessandselectfroma widerrangeofcolors.

Tochangetheparagraphpadding,clickthePaddingbutton.Thisopens thePaddingwindow,whichallowsyoutosetthepaddinginpixels.The paddingistheamountofspacethatappearsbetweentheparagraphand theborderofthecell.

Youcanchoosetoapplythecolortothetext,theparagraph,ortheentiretable.To selectmorecolors,clicktheMoreColorsbutton.ThisopenstheColorwindow, whichallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

Tochangetheparagraphpadding,clickthePaddingbutton.Thisopensthe Paddingwindow,whichallowsyoutosetthepaddinginpixels.Thepaddingis theamountofspacethatappearsbetweentheparagraphandtheborderofthe cell.

TheStyleSheetWizardallowsyoutosetthevariouspropertiesofyourstylesheet. Forcomprehensiveinformationaboutcreatingandmodifyingstyle sheets,readtheW3SchoolstutorialCSSIntroduction (http://www.w3schools.com/css/css_intro.asp).

TheMarginstaballowsyoutosetthemargins,width,andheightinpixelsora percentageofthecontainingelementfortheclassorHTMLtagyouaremodifying foryourstylesheet.

Marginreferstothewhitespacesurroundinganelement.Whenthemarginis increasedforaselectedelement,morespacewillappearbetweentheelementand theobjectssurroundingit.

ThePaddingtabletsyousetthepaddinginpixelsorapercentageofthe containingelementfortheleft,right,top,andbottomoftheclassorHTMLtag youaremodifyingforyourstylesheet.

Paddingreferstothewhitespacewithinanelement.Whenpaddingisincreased foraselectedelement,morespacewillappearbetweenitsouteredgesandthe objectscontainedwithinit.

TheCSSMenuDesignerallowsyoutocreateaCSSnavigationmenu. ForadetailedtutorialabouthowtoaddamenuusingtheCSSMenu Designer,readHowtoUsetheCSSMenuDesigner.Ifyoure wonderingwhathappenedtotheDHTMLMenuBuilder,readWhat happenedtotheDHTMLMenuBuilder?

Thiswindowremindsyouthatyoumustremoveallyouroldmenucodebefore insertingnewcode. Thisstepisveryimportant!Ifyoudonotremoveyouroldmenucode, yourmenuwillnotworkcorrectly. Toexitthiswindow,clickOK.ThisopenstheSaveMenuwindow,whichallows youtosaveyourmenutoworkwithitlater.

Weonlyrecommendsavingyourmenuifyouhavealreadyremovedyourold menucode.ClickingSaveopensawindowthatallowsyoutochoosethelocation whereyouwouldliketosaveyourmenu.

TheFormatmenuallowsyoutoformat yourtext.Ifyouhaveselectedtext,the tagswillbeappliedtotheselectedtext. Otherwise,theywillbeinsertedonthe page.

TheFontWizardallowsyoutocreateafonttagwithdetailedattributes.Youcan previewhowyourtextlooksinthePreviewTextarea. Foradetailedtutorialabouthowtousetheseoptions,readHowto ChangetheAppearanceofText.

TheToolsmenucontainstools youcanusetoworkwithyour Webpageandtheprogram.

OpensyourWebsiteinthe browseryouhavesetasyour defaultbrowser.Thisisdone outsideoftheHTMLEditor.

OpenstheHTMLEditorThemeShop (https://www.coffeecup.com/store/themes/htmleditor/)inyourdefault Webbrowser. OpenstheCoffeeCupGraphicsShop (https://www.coffeecup.com/store/graphics/)inyourdefaultWeb browser. OpenstheCoffeeCupSoftwarepage (http://www.coffeecup.com/software/)inyourdefaultWebbrowser.

Ifitdiscoversanundocumentedcharacter,itgivesyoutheoptiontoreplaceit withtheproperHTMLentity.Whenitisfinished,youwillseeamessagethatsays Finished! Toaddcharacterentitiesforanyspecialcharacters,usetheCharacters tabintheResourcebrowseronthelefthandsideoftheprogram.

Deletestheselecteddictionary. OpenstheNewCustomDictionarywindow,whichallowsyoutoenterthename ofanotherdictionaryfileyouwouldliketoaddtoyourcustomdictionaries. FormoreinformationabouthowtoadddictionaryfilestotheHTML Editor,readHowdoIimportanotherlanguagedictionaryintothe HTMLEditor?

TheFilestaballowsyoutospecifythefileextensionsyoucanopenandeditinthe HTMLEditor.Formatyourentrieswithanasteriskfollowedbyaperiodanda validextension(e.g..html,.css,*.php,etc.)