HTMLEditorHelp

August2009

GotquestionsaboutthefeaturesinHTMLEditor?Wanttocheckoutsomehelpful
tutorialstogetyouuptospeedonusingtheprogram?Youvecometotheright
place!

ProgramOverview

Learnaboutthetoolsandfeaturesavailablewithintheprogram.

Tutorials

Stepbystepinstructionsforthemostcommonlyusedfeaturesoftheprogram.

FrequentlyAskedQuestions

Gotaquestionaboutthesoftware?Findyouranswerhere.

CoffeeCupInformation

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.

HowtoUseThisManual

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.

ForMoreInformation

Linksyoutoatutorialorfrequentlyaskedquestionthatexplainsthetool
orfunctioninmoredetail.

OnlineResource

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
[email protected].

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

InstallingtheSoftware

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.

InstallingCoffeeCupSoftwareonMacOSX

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

UpgradingtheSoftware

Whenupgradingyoursoftware,youwillneedtologintoyourCoffeeCupuser
account(http://www.coffeecup.com/login/)justasyoudidtodownloadthe
registeredversionofthesoftware.Whenyoudownloadtheupgrade,itwillbea
newfullversionandnotjustanupgradetotheexistingsoftwareonyoursystem.
Toinstallanupgrade,werecommendthatyouuninstallthepreviousversionof
thesoftwareandrestartyourcomputer.Thisisbecauseinstallingoverapreviously
installedversioncancausesomefunctionstonotworkcorrectly.Therefore,itis
besttoinstallafreshcopy.

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


NewBlankPage

OpenstheQuickStartwindow,whichallowsyoutodefinesettingsforyournew
page,includingthepagetitle,colorscheme,metainformation,andcharacterset.

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
OpensawindowthatallowsyoutochoosefromseveralWebpagethemes.

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


AddorEditServers

OpenstheServerConfigurationwindow,whichallowsyoutoconfigureanewor
existingserverprofile.

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

OpenFromWebWindow

TheOpenFromWebwindowallowsyoutoimportanHTMLpagefromthe
InternetintotheHTMLEditor.Tousethistool,entertheURLforthepageyou
wanttoopenintheURLtoOpenFromtheWebfieldatthetopofthewindow,
andthenclickOpen.TheDownloadStatusareaatthebottomofthewindow
willtellyouthestatusofyourdownload.

Foradetailedtutorialabouthowtousethisfunction,readHowtoUse
theOpenFromWebfunction.

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
AllowsyoutoopenandworkwithapreviouslycreatedWebsiteProject.

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

Cancelsthefileuploadifanyofthedocumentdependenciesarenotlocatedinthe
rightplaceinyourWebsiteProject.

WhenUploadingFiles
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

Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradient
thatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

ColorSchemeDropDownList
Ifyouwouldliketouseacolorscheme,selectonefromthisdropdownlist.

Save
Clickthisbuttonifyouhavemadechangestoaschemethatyouwouldliketo
save.

54

SaveAs
Clickthisbuttonifyouhavecreatedacolorschemeyouwouldliketouseagain.
Thisopensawindowthatallowsyoutoenteranameforyournewscheme.

AfteryouclickOK,theschemewillbeavailableunderthedropdownlist.

Delete
Clickthisbuttontodeletetheselectedscheme.

DontUnderlineLinks
Checkthisboxifyouwouldliketoremovetheautomaticunderlinefromyour
links.

Charset
Selectyourpreferredcharactersetfromthisdropdownlist.

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:

Image

Insertsthecodeforaformimage.Thisisparticularlyhelpfulifyouwanttoadd
custombuttonstoyourform.

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:

Button

InsertsthecodeforagenericSubmitQuerybutton,whichsubmitsthe
informationtotheURLspecifiedintheInsertFormwindow.

SubmitButton

Insertsthecodeforasubmitbutton.

ResetButton
Insertsthecodeforaresetbutton.

StyleSheetItems
Displaysalistofoptionsthatletyouinsertvariousstylesheetitems.

66


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.

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

ShowStatusbarMessageonMouseover
CheckingthisboxdisplaysadescriptionofthelinkintheStatusbaratthebottom
oftheWebbrowserscreen.ThisoptionisonlyenabledinInternetExplorer.

WebBrowserWindowMessage
EntertheStatusbarmessagehere.

72

InsertImageWindow

TheInsertImagewindowallowsyoutoinsertanimageandanyassociated
attributes,aswellascreateathumbnailversionoftheimage.Usetheareaonthe
lefthandsideofthewindowtobrowseyourcomputerforthedesiredimage.The
imageshouldbelocatedinyourWorkingfolderorWebsiteProjectinorderto
displaycorrectly.

YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMy
ComputertabintotheCodeorVisualeditor.Foradetailedtutorial
aboutaddingimages,readAddinganImagetoYourPage.

IfyouwantmoreWebgraphicstochoosefrom,clicktheGetMore
GreatWebGraphicsHerebuttontocheckouttheCoffeeCupGraphics
Shopathttps://www.coffeecup.com/store/graphics/.

Afteryouhaveselectedanimageandconfiguredanyadditionalattributes,click
OK.ThisopenstheCopytoProjectwindow,whichpromptsyoutosaveyour
imagetoyourWebsiteProjectorWorkingfolder.

73


YoucansavetheimagetoanyofthepreexistingfoldersinyourWebsiteProjector
clickCreateFoldertocreateanewfolderforyourimage.Whenyouhaveselected
thefolderwhereyourimagewillbestored,clickOK.

GeneralTab
Thisiswhereyouinsertthepathtotheimageanditsattributes.

74


Image

Entertheimagepathhere.Ifyouselectanimageusingthetoolsonthelefthand
sideofthewindow,thepathwillappearinthisfield.

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

Selectthischeckboxifyouwouldliketousetheimageasathumbnail.

LinktoOriginalImage

Selectthischeckboxifyouwouldlikethethumbnailtolinktotheoriginalimage.

76

ThumbnailFilenamePrefix
Thisdifferentiatesthethumbnailversionoftheimagefromtheoriginal.By
default,itissettotn_,butyoucanchangeittowhateveryouwant.

ThumbnailWidthandHeight
Enterthewidthandheightofthethumbnailhere.Theaspectratioismaintained
sotheimagewillnotbedistorted.

ThumbnailFormatandQuality

Choosethedesiredimagefileformat(.gifor.jpg)andquality.Highqualityimages
displaybetter,butarealsolarger,whichmakesforlongerdownloadtimes.

77

InsertListWindow

TheInsertListwindowallowsyoutoinsertoneoffourdifferentkindsoflists.You
canalsoimportalistclickingtheImportListbutton.

Foradetailedexplanationofhowtouselists,readHowtoCreatea
List.

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

Choosethealignmentofyourhorizontalrule:left,right,orcentered.

Width
Choosethelinewidthandwhetheritismeasuredasapercentageofthe
containingelement(suchasthepageora<div>tag)orinpixels.

Thickness
Choosethelinethickness,with1beingthethinnestand10beingthethickest.

79

Shading
Choosewhethertoapplya3Deffecttotheline.

Color
CheckingtheIncludecolorcheckboxallowsyoutochangethecoloroftheline.
ThiseffectonlyappearsinInternetExplorer.Toselectacolor,clickthecolor
swatch.Thisopensadropdownlistof40basiccolors.

Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradient
thatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

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

Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradient
thatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

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)
MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindows
clipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutor
copiedtotheclipboard.

Paste(Ctrl+V)
TakestheobjectstoredontheWindowsclipboardandplacesitonthepage.
Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesame
objectasmanytimesasyouneed.

PasteSpecial
Allowsyoutochoosetheformatofthepastedinformation.

88


Delete(Ctrl+Del)

Removestheselectedobject(s).

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)
Undoesthelastactionyouhaveperformed.

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

Fill(Background)Color
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

Insertsarowbelowwherethecursorispositioned.

DeleteRow(s)

Deletestherowwherethecursorispositionedortheselectedrow(s).

DeleteColumn(s)
Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).

MergeCells

Mergesthecontentsofthecellsintoonecell.

SplitCells

OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.

Youcanchoosetosplitthecellintoanumberofrowsandcolumnsthatyou
specify,orifyouareworkingwithacellthatyoupreviouslymerged,youcansplit
thecellsbackintotheiroriginalconfiguration.Ifyouwanttomergethecontents
ofthecellbeforeyousplitthem,whichconsolidatesallyourcontentintoonecell
andthensplitsitintomultiplecells,checktheMergebeforesplittingcheckbox.

103

TableDesignerRightClickMenu

Therightclickmenuallowsyoutoaccess
commonlyusedfeaturesintheTableDesigner.

Undo(Ctrl+Z)
Undoesthelastactionyouhaveperformed.

Redo(Ctrl+Q)
Redoesthelastaction.TheRedofunction
comesinhandywhenyouaccidentallyusethe
Undofunctionorchangeyourmindabout
undoinganaction.

Cut(Ctrl+X)
Removestheselectedobjectortextfromthe
screenandstoresitontheWindowsclipboard.
Itisthenavailabletobepasteduntil
somethingelseiscutorcopiedtothe
clipboard.

Copy(Ctrl+C)
MakesacopyoftheselectedobjectortextandstoresthatcopyontheWindows
clipboard.Theobjectisnowavailabletobepasteduntilanotherobjectiscutor
copiedtotheclipboard.

Paste(Ctrl+V)
TakestheobjectstoredontheWindowsclipboardandplacesitonthepage.
Pastinganobjectdoesnotremoveitfromtheclipboard,soyoucanpastethesame
objectasmanytimesasyouneed.

PasteSpecial
Allowsyoutochoosetheformatofthepastedinformation.

104

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

105

Fill(Background)Color
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


InsertTable

OpenstheInsertNewTablewindow,whichcontainstoolsthatallowyoutoset
upatable.WhenyouclickOK,thetablewillbeaddedaboveanypreexisting
tablesintheTableDesigntab.

TableProperties

OpenstheTablePropertieswindow,whichcontainsthesametoolsastheInsert
NewTablewindow.Useittoeditthesettingsfortheexistingtable.

108


InsertColumnLeft

Insertsacolumntotheleftofwherethecursorispositioned.

InsertColumnRight

Insertsacolumntotherightofwherethecursorispositioned.

InsertRowAbove
Insertsarowabovewherethecursorispositioned.

InsertRowBelow

Insertsarowbelowwherethecursorispositioned.

DeleteRow(s)

Deletestherowwherethecursorispositionedortheselectedrow(s).

DeleteColumn(s)
Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).

Select

Allowsyoutoselecttheentiretable,arow,acolumn,oracell.

109


AlignCellContents

Allowsyoutochoosethealignmentofthecontentintheselectedcell:top,middle,
bottom,ordefaultcellverticalalignment.

SplitCells

OpenstheSplitwindow,whichallowsyousplittheselectedcellorcells.

110


Youcanchoosetosplitthecellintoanumberofrowsandcolumnsthatyou
specify,orifyouareworkingwithacellthatyoupreviouslymerged,youcansplit
thecellsbackintotheiroriginalconfiguration.Ifyouwanttomergethecontents
ofthecellbeforeyousplitthem,whichconsolidatesallyourcontentintoonecell
andthensplitsitintomultiplecells,checktheMergebeforesplittingcheckbox.

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

Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradient
thatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

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

Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradient
thatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

124

CSSMenuDesigner

TheCSSMenuDesignerallowsyoutocreateaCSSnavigationmenu.

ForadetailedtutorialabouthowtoaddamenuusingtheCSSMenu
Designer,readHowtoUsetheCSSMenuDesigner.Ifyoure
wonderingwhathappenedtotheDHTMLMenuBuilder,readWhat
happenedtotheDHTMLMenuBuilder?

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


Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradient
thatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

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()tagsorappliesthemtoselectedtext.

Superscript
Insertssuperscripttags()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(&nbsp;),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.

Tobrowseevenmorecolors,clickMoreColors.Thisopensarainbowgradient
thatallowsyoutoadjustbrightnessandselectfromawiderrangeofcolors.

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.

GetMoreGraphics

OpenstheCoffeeCupGraphicsShop
(https://www.coffeecup.com/store/graphics/)inyourdefaultWeb
browser.

GetMoreWebsiteSoftware

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

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
OpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspelling
optionsandaddcustomdictionaries.

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

Deletestheselecteddictionary.

New
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

CommandsTab

TheCommandstaballowsyoutoviewandaddcommandstoyourcustomtoolbar
ortothemaintoolbar.Toaddacommand,dragitfromtheCommandslisttothe
desiredtoolbaranddropitthere.

Categories
Broadcategoriestowhichindividualcommandsbelong.Categoriescannotbe
addedtoatoolbar.

Commands
Individualcommandsthatcanbeaddedtoatoolbar.Toaddacommand,dragit
tothedesiredtoolbaranddropitthere.

162

OptionsTab

TheOptionstaballowsyoutocustomizeotheraspectsofyourtoolbars.

MenusShowRecentlyUsedCommandsFirst

Selectthischeckboxifyouwantthemostrecentlyusedcommandstoappearat
thebeginningofyourcustommenuortoolbar.

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
Selectyourpreferredcharactersetfromthisdropdownlist.

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

WindowMenu

TheWindowmenuallowsyoutoswitchbetweentheopenfiles.Selectingoneof
thefilesopensitinwhichevereditor(CodeorVisual)isopen.

YoucanalsoswitchbetweenopenfilesusingthetabsintheStatusbar
atthebottomoftheprogram.

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

Toolbar

TheToolbarislocatedacrossthetopoftheprogramandcontainsbuttonsthat
allowyoutoquicklyaccesscommonlyusedprogramfeatures.Rightclickingthe
toolbaropensthismenu:

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

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
OpensawindowthatallowsyoutochoosefromseveralWebpagethemes.

183

Athemeincludesthreepages(index.html,aboutus.html,andcontact
us.html)thatincludetheHTMLandimagesforabasicdesign.Youcan
replacetheimagesandtextwithyourowncontent.Ifyouprefertowork
withapagestructure,selectNewFromLayout.Formoreinformationaboutthe
differencebetweenlayoutsandthemes,readWhatisthedifferencebetweena
layoutandatheme?

Save
Expandstodisplayalistofoptionsfor
savingyourwork.

Save(Ctrl+S)

Savesthefileyouarecurrentlyworking
on.Werecommendyousavefrequently
topreventlossincasesomethinghappenstoyourcomputerwhileyouare
working.

SaveAs(Ctrl+Shift+S)

Savesthecurrentfileunderadifferentname.Thiswillnotoverwritethefileyou
arecurrentlyworkingon;instead,itwillcreateanewfilethatyoucangivea
differentname.

SaveAll

Savesalltheopenfiles.

SaveSelectedTextasSnippet
OpenstheSaveSnippetwindow,whichallowsyoutonameandsavethe
highlightedtextasasnippet.

184

AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCode
Snippetstab.Foradetailedtutorialaboutworkingwithsnippets,read
HowtoUseSnippets.

Open
Expandstodisplayalistofoptionsforopening
previouslycreatedwork.

Open(Ctrl+O)

Allowsyoutoopenandworkwithapreviously
createdfile.

OpenFromWeb
OpenstheOpenFromWebwindow,whichallowsyoutoimportanHTMLpage
ontheInternetintotheHTMLEditor.ThisoptionworksbestwithHTMLpages
thatdonotcontainPHPorSSI.Thesescriptsarestoredontheserver,and
sometimesaddcodetoaWebpagethatcannotbeimportedintotheHTMLEditor.

RecentFiles
Displaysalistoffilesyouhaveworkedwithrecently,whichallowsyoutoaccess
themmorequickly.

UploadFiletoServer
Expandstodisplayalistofoptionsfor
uploadingyourwork.

PreviouslyConfiguredServers
Selectapreviouslyconfiguredserverandthen
selectthefolderwhereyouwouldliketouploadyourfile.ThisopenstheUpload
FiletoServerwindow,whichdisplaysthestatusoftheuploadandcloses
automaticallywhentheuploadiscomplete.

185

AddorEditServers
OpenstheServerConfigurationAdd/Editwindow,whichallowsyouto
configureaneworexistingserverprofile.

Undo(Ctrl+Z)
Undoesthelastactionyouhaveperformed.

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.

Find(Ctrl+F)

OpenstheExtendedFindwindow,which
allowsyoutosearchthecurrentdocument,
allopendocuments,orallthedocumentsinagivenfolderforasearchterm.

Replace(Ctrl+H)

OpenstheExtendedFindandReplacewindow,whichallowsyoutosearchthe
currentdocument,allopendocuments,orallthedocumentsinagivenfolderfora
searchterm,andthenreplaceitwithtextofyourchoosing.

186

ExtendedFindResults
DisplaystheSearchResultstabatthebottomoftheprogram.

SpellingandThesaurus
Expandstodisplaythespellingandthesaurus
options.

CheckSpelling
Checksthespellinginyourdocument.Ifthere
arenospellingerrors,youwillseeawindowthat
says,Thespellingcheckiscomplete.

Iftherearemisspelledwords,theSpellingwindowopens,allowingyoutoreview
andchangethespellingerrors,andtoadjustspellingoptions.

AutoSpellCheck

Putsaredunderlineunderanymisspelledwords.

Thesaurus
OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselected
word.

187

Document
Expandstodisplaydocumentoptions.

DocumentWeight

OpenstheDocumentWeight
window,whichcontainsinformation
aboutthesizeofthecurrentlyopen
documentandhowlongitwilltaketo
downloadtoacomputeronseveraldifferentconnections.

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

CodeEditor

TheCodeEditorallowsyoutoviewandeditthecodethatmakesupyourpage.It
canbeusedtoeditHTML,serverfilessuchasPHPandCSS,andtext.Fora
completelistoffiletypestheprogramcanopenandtoenteradditionalfiletypes,
gotoTools>Preferences>Filestab.

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:

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

Image(Ctrl+M)
OpenstheInsertImagewindow,whichallowsyoutoinsertanimage
andanyassociatedattributes,aswellascreateathumbnailversionof
theimage.

YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMy
ComputertabintotheCodeorVisualeditor.

Links
Expandstodisplaylinkoptions.

Link(Ctrl+L)

OpenstheInsertLinkwindow,whichallows
youtoinsertalinkandanyassociatedattributes.

EmailLink(Ctrl+E)

OpenstheInsertEmailLinkwindow,whichallowsyoutoinsertanemaillink
andanyassociatedattributes.

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.

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

Break
Insertsabreaktag(<br />).

NonBreakingSpace
Insertsanonbreakingspacecharacterentity(&nbsp;),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
OpenstheInsertHorizontalRulewindow,whichallowsyoutodesigna
horizontalruleandaddittoyourpage.

TableItems
Expandstodisplaytableoptions.

TableDesigner
OpenstheTableDesigner,whichallowsyoutocreateatable.Atablecanbeused
todisplayinformationorasyourpagelayout.

QuickTable

OpenstheQuickTablewindow,whichallowsyoutodesignatable.

195

Dragyourmouseoverthesquarestopickhowmanycolumnsandrowsareinyour
table.Clickwhenyouhavespecifiedthedesireddimensions,andthecodewillbe
insertedonyourpage.

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.

TextBox

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

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.

SplitScreenPreview(F12)
Enablessplitscreenpreview,whichallowsyoutopreviewyourworkinanInternet
ExplorerbrowserareabelowtheCodeEditor.

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

203

TestinBrowser
Expandstodisplaybrowsertestingoptions.

TestWithDefaultBrowser(Ctrl+F9)
OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.Thisis
doneoutsideoftheHTMLEditor.

TestwithFavoriteBrowser(Ctrl+F5)

OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.

AdditionalBrowsers

ExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.

Toconfigureadditionalbrowsers,gotoTools>Preferences>Browser
Testingtab.It'sgoodWebdesignpracticetotestyourWebsitein
severaldifferentbrowserstoensurecrossbrowsercompatibility.The
mostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.

204

SplitScreenPreview(F12)
Enablessplitscreenpreview,whichallowsyoutopreviewyourworkinabrowser
areabelowtheCodeEditor.

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

UploadFiletoServer
Expandstodisplayalistofoptionsforuploadingyourwork.

PreviouslyConfiguredServers

Selectapreviouslyconfiguredserverandthenselectthefolderwhereyouwould
liketouploadyourfile.ThisopenstheUploadFiletoServerwindow,which
displaysthestatusoftheuploadandclosesautomaticallywhentheuploadis
complete.

205

AddorEditServers
OpenstheServerConfigurationAdd/Editwindow,whichallowsyouto
configureaneworexistingserverprofile.

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:

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

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
Expandstodisplayfontoptions.

FontWizard

OpenstheFontWizard,whichallowsyoutochoose
theattributesforafonttag.

FontSizes

Selectfromfontsizes1(8pt)to7(36pt)oradjustthe
sizeupordownoneincrement.

FontColor
OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfrom
therainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththe
desiredcolor.

211


FontEffects

Allowsyoutoapplyoneoftheprovidedeffectstoyourfont.

HeaderSizes

Selectaheadersize(16)anditwillappliedtotheselectedtextoranytexttyped
afterthecurrentcursorposition.

212

Paragraph(Ctrl+Enter)
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
OpenstheInsertHorizontalRulewindow,whichallowsyoutodesigna
horizontalruleandaddittoyourpage.

List
OpenstheInsertListwindow,whichallowsyoutoinsertorimportoneof
fourdifferentkindsoflists:bulleted,numbered,definition,or
unformatted.

213

VisualTableElements
Expandstodisplayvisualtableoptions.

TableDesigner

OpenstheTableDesigner,whichallowsyoutocreateatable.Atablecanbeused
todisplayinformationorasyourpagelayout.

QuickTable
OpenstheQuickTablewindow,whichallowsyoutodesignatable.

214

Dragyourmouseoverthesquarestopickhowmanycolumnsandrowsareinyour
table.Clickwhenyouhavespecifiedthedesireddimensions,andthecodewillbe
insertedonyourpage.

ToggleInvisibleGridLines
Displaystablebordersiftheyaresetto0.Thisispurelyfordesignpurposesand
willnotberenderedinaWebbrowser.

InsertColumn
Insertsacolumnintothetable.

InsertRow

Insertsarowintothetable.

DeleteColumn
Deletesthecolumnwherethecursorispositionedortheselectedcolumn(s).

DeleteRow
Deletestherowwherethecursorispositionedortheselectedrow(s).

MergeCells

ThisoptionisonlyavailableintheTableDesigner.

SplitCell
Splitsthecellinhalf.

Preview
Expandstodisplaypreviewoptions.

215


TestWithDefaultBrowser(Ctrl+F9)
OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.Thisis
doneoutsideoftheHTMLEditor.

TestwithFavoriteBrowser(Ctrl+F5)
OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab
inthePreferenceswindow.

AdditionalBrowsers

ExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.

Toconfigureadditionalbrowsers,gotoTools>Preferences>Browser
Testingtab.It'sgoodWebdesignpracticetotestyourWebsitein
severaldifferentbrowserstoensurecrossbrowsercompatibility.The
mostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.

UploadFiletoServer
Expandstodisplayalistofoptionsforuploadingyourwork.

216

PreviouslyConfiguredServers

Selectapreviouslyconfiguredserverandthenselectthefolderwhereyouwould
liketouploadyourfile.ThisopenstheUploadFiletoServerwindow,which
displaysthestatusoftheuploadandclosesautomaticallywhentheuploadis
complete.

AddorEditServers

OpenstheServerConfigurationAdd/Editwindow,whichallowsyouto
configureaneworexistingserverprofile.

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)
Undoesthelastactionyouhaveperformed.

219

Redo(Ctrl+Q)
Redoesthelastaction.TheRedofunctioncomesinhandywhenyouaccidentally
usetheUndofunctionorchangeyourmindaboutundoinganaction.

Save(Ctrl+S)
Savesthefileyouarecurrentlyworkingon.Werecommendyousavefrequentlyto
preventlossincasesomethinghappenstoyourcomputerwhileyouareworking.

SaveAs(Shift+Ctrl+S)
Savesthecurrentfileunderadifferentname.Thiswillnotoverwritethefileyou
arecurrentlyworkingon;instead,itwillcreateanewfilethatyoucangivea
differentname.

SaveSelectedTextasSnippet
OpenstheSaveSnippetwindow,whichallowsyoutonameandsavethe
highlightedtextasasnippet.

AfteryouclickOK,thenewsnippetwillbeaddedtothelistintheCode
Snippetstab.Foradetailedtutorialaboutworkingwithsnippets,read
HowtoUseSnippets.

TestinBrowser
Expandstodisplaybrowsertestingoptions.

220


TestWithDefaultBrowser(Ctrl+F9)

OpensyourWebsiteinthebrowseryouhavesetasyourdefaultbrowser.Thisis
doneoutsideoftheHTMLEditor.

TestwithFavoriteBrowser(Ctrl+F5)
OpensthepageinthebrowserspecifiedthefirstslotintheBrowserTestingtab.

AdditionalBrowsers
ExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.

Toconfigureadditionalbrowsers,gotoTools>Preferences>Browser
Testingtab.It'sgoodWebdesignpracticetotestyourWebsitein
severaldifferentbrowserstoensurecrossbrowsercompatibility.The
mostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.

UploadFiletoServer
Expandstodisplayalistofoptionsforuploadingyourwork.

221

PreviouslyConfiguredServers
Selectapreviouslyconfiguredserverandthenselectthefolderwhereyouwould
liketouploadyourfile.ThisopenstheUploadFiletoServerwindow,which
displaysthestatusoftheuploadandclosesautomaticallywhentheuploadis
complete.

AddorEditServers
OpenstheServerConfigurationAdd/Editwindow,whichallowsyouto
configureaneworexistingserverprofile.

Font
Expandstodisplayfontoptions.

FontWizard

OpenstheFontWizard,whichallowsyoutochoosetheattributesforafonttag.

FontSizes

Selectfromfontsizes1(8pt)to7(36pt)oradjustthesizeupordownone
increment.

222

FontColor
OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfrom
therainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththe
desiredcolor.

FontEffects
Allowsyoutoapplyoneoftheprovidedeffectstoyourfont.

HeaderSizes

Selectaheadertag(h1h6),anditwillbeinsertedintoyourdocumentorapplied
toanyselectedtext.

223

Links
Expandstodisplaylinkoptions.

Link(Ctrl+L)
OpenstheInsertLinkwindow,whichallowsyoutoinsertalinkandany
associatedattributes.

EmailLink(Ctrl+E)

OpenstheInsertEmailLinkwindow,whichallowsyoutoinsertanemaillink
andanyassociatedattributes.

Image
OpenstheInsertImagewindow,whichallowsyoutoinsertanimageandany
associatedattributes,aswellascreateathumbnailversionoftheimage.

YoucanalsoaddanimagebydraggingitfromtheMyWebsitesorMy
ComputertabintotheCodeorVisualeditor.

Color
ThisbuttonopenstheColorwindow,whichallowsyoutochooseacolorby
selectingitfromtherainbowgradientorbymanuallyenteringvariousvalues
associatedwiththedesiredcolor.Thehexcodeforthiscolorwillbeadded
whereverthecursorispositionedonthepage.

224


SpellingandThesaurus

Expandstodisplayspellingandthesaurusoptions.

CheckSpelling

Checksthespellinginyourdocument.Iftherearenospellingerrors,youwillseea
windowthatsays,Thespellingcheckiscomplete.

225

Iftherearemisspelledwords,theSpellingwindowopens,allowingyoutoreview
andchangethespellingerrors,andtoadjustspellingoptions.

SpellCheckerOptions
OpenstheSpellingOptionswindow,whichallowsyoutoadjustyourspelling
optionsandaddcustomdictionaries.

AutoSpellCheck
Putsaredunderlineunderanymisspelledwords.

Thesaurus

OpenstheThesaurus,whichgivesyousuggestionsofsynonymsfortheselected
word.

Close

Closesthecurrentfileyouhaveopen,butleavestheprogramopen.

226

WorkingWithTablesintheVisualEditor

WhenyouselectatableintheVisualEditor,apaneappearsatthebottomofthe
screendisplayingoptionsformodifyingyourtable.

YoucanalsodesignatableusingtheTableDesigner.Toaccessit,goto
Insert>TableDesigner.

HorizontalandVerticalAlignment
Selectthehorizontalandverticalalignmentforthetextintheselectedcell.

WidthandHeight
Enterthewidthandheightinpixelsoftheselectedcell.

NoWrap
Selectthischeckboxifyoudonotwantthetextintheselectedcellto
automaticallywraptofitthewidthofthecell.

BGColor
OpenstheColorwindow,whichallowsyoutochooseacolorbyselectingitfrom
therainbowgradientorbymanuallyenteringvariousvaluesassociatedwiththe
desiredcolor.

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:

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

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
ExpandstoshowalistofotherbrowsersyoucanusetopreviewyourWebsite.

Toconfigureadditionalbrowsers,gotoTools>Preferences>Browser
Testingtab.It'sgoodWebdesignpracticetotestyourWebsitein
severaldifferentbrowserstoensurecrossbrowsercompatibility.The
mostpopularbrowsersareFirefox,InternetExplorer,Opera,Google
Chrome,andSafari.

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

MyWebsitesTab

TheMyWebsitestabiswhereyouorganizeandworkwithyourWebsiteProjects.

FormoreinformationaboutusingWebsiteProjects,readWorkingWith
WebsiteProjects.

Local Disk tab

Local Disk right-click menu
Server tab
Server right-click menu
My Websites toolbar

235

LocalDiskTab

TheLocalDisktabiswhereyouworkwiththeWebsiteProjectfilessavedonyour
computer.YoucanviewthestructureofyourWebsiteProjectandeditthefiles
usingtheMyWebsitestoolbarortheLocalDiskrightclickmenu.

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
Allowsyoutorenametheselectedfile.

Delete
Deletestheselectedfile.

CreateFolder
Createsanewfolder.

FileProperties
Opensawindowthatprovidesbasicinformationaboutthefile,includingitsname,
size,anddateitwasfirstcreated.

242

MyWebsitesToolbar

TheMyWebsitestoolbarislocatedacrossthetopoftheMyWebsitestaband
containsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeatures.Right
clickingthetoolbaropensthismenu:

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

WebsiteProjects
ExpandstodisplayWebsiteProject
options.

NewWebsiteProject

OpenstheWebsiteProjectSettings
window,whichletsyoucreateablank
WebsiteProjectortocreateaWebsite
Projectfromexistingfiles.Youcanalso
enteradditionalinformation,suchas
yourserversettings,andselectyour
fileuploadoptions.

OpenWebsiteProject
AllowsyoutoopenandworkwithapreviouslycreatedWebsiteProject.

CloseWebsiteProject

ClosesthecurrentWebsiteProjectyouhaveopen,butleavestheprogramopen.

AllWebsiteProjects

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

MyComputerToolbar

TheMyComputertoolbarislocatedacrossthetopoftheMyComputertaband
containsbuttonsthatallowyoutoquicklyaccesscommonlyusedfeaturesinthe
MyComputertab.Rightclickingthetoolbaropensthismenu:

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

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
Expandstodisplayalistofoptionsforuploadingyourwork.

PreviouslyConfiguredServers

Selectapreviouslyconfiguredserverandthenselectthefolderwhereyouwould
liketouploadyourfile.ThisopenstheUploadFiletoServerwindow,which
displaysthestatusoftheuploadandclosesautomaticallywhentheuploadis
complete.

249

AddorEditServers
OpenstheServerConfigurationAdd/Editwindow,whichallowsyouto
configureaneworexistingserverprofile.

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

Allowsyoutorenametheselectedfile.

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:

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

Refresh

RefreshesthecontentintheCodeSnippetstab.Ifyouhaverecently
addedasnippetanditdoesnotappear,tryrefreshingthisarea.

InsertItemIntoCurrentDocument

InsertstheselectedcodesnippetintotheCodeEditor.

Youcanalsoaddasnippetbydoubleclickingitordraggingand
droppingitintotheCodeEditor.

EditSnippet
OpensthecodesnippetinitsowntabintheHTMLEditorworkspace,
whichallowsyoutoeditit.

NewSnippet
OpensanewblanktabintheHTMLEditorworkspace,whichallowsyou
toenterthecodeforanewsnippet.

253

TagsTab

TheTagstabcontainslistsofthemostcommonlyusedHTML,PHP,andCSStags.
Toaddatagtoyourpage,doubleclickitordraganddropitintotheCodeEditor.

Tocustomizewhich(X)HTMLentitiesappearintheCodeCompletion
list,gotoEdit>EditXHTMLTags.ThisopenstheEditXHTMLTags
window,whichallowsyoutoadd,modify,ordelete(X)HTMLtags,
attributes,andattributevalues.Foradetailedtutorialthatoutlinesthisprocess,
readCustomizingCodeCompletionTags.

Tags toolbar
Code Snippets and Tags right-click menu

254

TagsToolbar

TheTagstoolbarallowsyoutoselectwhichgroupoftagsisdisplayed.Right
clickingthetoolbaropensthismenu:

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

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.

ColorSchemeDropDownList

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

AddinganImagetoYourPage

Therearetwodifferentmethodsofaddinganimagetoyourpage:UsingtheInsert
ImagewindowandusingtheResourcebrowser.TheInsertImagewindowisa
goodchoiceifyouwanttospecifyimageattributesand/orcreateathumbnail
versionoftheimage.TheResourcebrowserisbestifyouwanttoskipallthat
stuffandjustaddanimagetoyourpage.

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

Selectthischeckboxifyouwouldliketousetheimageasathumbnail.

LinktoOriginalImage

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

Selectwhetheryourtextwillappearnormallyorasasubscriptorsuperscript.

Size

36pt

Selectafontsizefrom1(8pt)to7(

).

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=/https/www.scribd.com/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.

LinkText

Thetextyouruserwillclick.Bydefault,linktextisblueandunderlined.Inthe
exampleabove,thelinktextwouldlooklikethisonyourWebpage:

Clickhereforgreatsoftware!

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.

ShowStatusbarMessageonMouseover

Ifyoucheckthisbox,adescriptionofthelinkwilldisplayintheStatusbaratthe
bottomoftheWebbrowserscreenwhenyouruserholdstheirmouseoverthe
link.ThisoptionisonlyenabledinInternetExplorer,soitsbesttouseatitle
insteadifyouwanttoprovidethisadditionalinformation.

WebBrowserWindowMessage

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.

ShowStatusbarMessageonMouseover
Ifyoucheckthisbox,adescriptionofthelinkwilldisplayintheStatusbaratthe
bottomoftheWebbrowserscreenwhenyouruserholdstheirmouseoverthe
link.ThisoptionisonlyenabledinInternetExplorer,soitsbesttouseatitle
insteadifyouwanttoprovidethisadditionalinformation.

WebBrowserWindowMessage
IfyoudodecidetouseaStatusbarmessage,typeitinthisfield.

Whenyouredonefillingoutallthisinformation,clickOK.Thecodewill
automaticallybeinsertedwhereveryourcursorwaspositionedonyourpage.You
canmoveitaroundbyselectingitanddraggingittothedesiredlocationonthe
page.

LinkingtoaDownloadableDocument
Followthesestepstoaddalinktoadownloadabledocumentonyourpage.

ThistutorialassumesyouareworkingwithWebsiteProjects.Formore
informationabouthowtouseWebsiteProjects,readWorkingWith
WebsiteProjects.

Step1:LocatingtheFile

First,gototheMyComputertabandselectthefileyouwanttoaddtoyour
WebsiteProject.Inthistutorial,welladdaPDFfile.

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:

ListType

Selectthetypeoflistyouwanttocreate.Youroptionsarebulleted,numbered,
definition,andnone,whichisjustalistofitemswithnospecialformatting.Heres
howeachofthedifferentlisttypeslook:

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

HowtoUseSnippets

Ifyou'veeverbeenfrustratedathavingtotypethesamepieceofcodeoverand
over,you'lllovesnippets.AsnippetisapieceofcodestoredintheHTMLEditor
thatcanbeusedandreusedasmanytimesasyouneed.Youcansavesnippetsof
HTML,JavaScript,DHTML,Perl,oranyotherscriptinglanguage.TheHTML
Editorcomeswithseveralbuiltinsnippetsandgivesyoutheoptiontocreateyour
own.

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

Clickthisbuttontoopenanexistingmenu.

SaveMenu
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

</ul>
</li>
</ul>
</div>

Next,addthealignattributetotheopening<div>tag,andgiveitoneofthese
values:bottom,center,justify,left,right,ortop.Forinstance,ifyou
wantedtocenteryourmenu,theopening<div>tagwouldlooklikethis:

<div align=center>

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

HowtoUseExtendedFindandReplace

IfyoursitehasmorethanonepagelikeprettymucheveryWebsiteeverthen
youknowthatmakingaglobalchangecanbeprettydifficult.Forexample,sayyou
wanttoreplaceeveryinstanceofcolor="red"onyourWebsitewith
color="black".Whetheryouhadtochangethison5or500pages,locating
everyinstanceofthatcodewouldgetoldfast.What'saWebmastertodo?

WiththeHTMLEditor'sExtendedFindandReplacefunction,globalchanges
likethisareeasy.Justfollowthesesimplesteps:

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

PreviewingYourWork

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!

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.

ApplicationLocation

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)

346

SwitchingBetweenOpenFiles

Thereareacoupleofdifferentoptionsforswitchingbetweenopenfilesinthe
HTMLEditor.

WindowMenu
TheWindowmenuallowsyoutoseeallthefilesopenintheEditor.Clickafileto
openitforediting.

StatusbarTabs
TheStatusbar,locatedatthebottomoftheprogram,displaystabsforeachofthe
opendocumentsintheEditor.Toswitchbetweenopendocuments,clickthetab
forthefileyouwanttoedit.

347

AdjustingCodeHighlightingOptions

Codesyntaxhighlightingisagreatwaytotelldifferenttags,tagattributes,andtag
valuesapart.Forexample,itmaybedifficultortimeconsumingtotrytofind
everyinstanceofan<img>tag,butifyousetyourhighlightingoptionstomakeall
<img>tagsred,thenallyoudhavetodoislookforthecolorred.

Followthesestepstocreateyourowncodehighlightingcolorscheme:

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:

ShowTooltipsonToolbars

Selectthischeckboxtodisplaytooltipswhenyoumouseovertoolbaricons.
Tooltipsstatewhattheiconsdo.

ShowShortcutKeysinTooltips

Selectthischeckboxtodisplaykeyboardshortcutsinthetoolbartooltips.

MenuAnimations
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
IgetanerrorthatreferstoMFC42.dll.

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.

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

DG

MN

RS

IL

UX

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(&nbsp;)
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

AboutCoffeeCupSoftware

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.

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:[email protected]
Tobeeffective,theNotificationmustincludethefollowing:
1. A physical or electronic signature of a person authorized to act on behalf of the
owner of an exclusive right that is allegedly infringed.
2. Identification of the copyrighted work claimed to have been infringed, or if
multiple copyrighted works at a single online site are covered by a single
notification, a representative list of such works at that site.
3. Identification of the material that is claimed to be infringing or to be the subject of
infringing activity and that is to be removed or access to which is to be disabled,
and information reasonably sufficient to permit the service provider to locate the
material.
Information reasonably sufficient to permit the service provider to contact the
complaining party, such as an address, telephone number, and if available, an
electronic mail address at which the complaining party may be contacted.

390

4. A statement that the complaining party has a good faith belief that use of the
material in the manner complained of is not authorized by the copyright owner, its
agent, or the law.
5. A statement that the information in the notification is accurate, and under penalty
of perjury, that the complaining party is authorized to act on behalf of the owner
of an exclusive right that is allegedly infringed.
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

SoftwarePrivacyPolicy

HereatCoffeeCupSoftware,weunderstandtheimportanceofyourprivacy.
CoffeeCupSoftware,Inc.willneverwillfullydiscloseindividuallyidentifiable
informationaboutitscustomerstoanythirdpartywithoutfirstreceivingthat
customer'spermission.Youcansleepwellknowingyourinformationwillnotleave
ouroffices.

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
[email protected]

395