Page 1

Contents How to Use This Guide


About this software


Getting to know the Web Editor workspace


The Project Explorer


The Preview Pane


The Editors


Getting Started


Step 1: Creating a Project


Step 2: Adding Files to your Project


Step 3: Creating a New Webpage


Step 4: Previewing Your Project


Step 5: Uploading Your Project


Blocks and Cursors








Tags, Snippets, and Helpers










The Magic Search Bar


Find & Replace


Server Management


Setting Up an S-Drive Profile


Setting Up an FTP Server











Frequently Asked Questions Error Messages and Troubleshooting



49 49

Keyboard Shortcuts


Contact Us


How to Use This Guide Welcome to the CoffeeCup Web Editor Quick-Start Guide! This is the place to go to learn the ins and outs of this program. You can navigate through this guide using the table of contents in the PDF reader interface, or just read it straight through. You can also jump around using links, which are formatted in light blue text. You’ll come across links to webpages that look like this: Just click them, and your default web browser will open the page and display additional information. You’ll also notice that the guide is divided into different sections. If you want to learn how to perform a task in the program, check out the Getting Started section. It walks you through common tasks using simple, step-by-step instructions. Have a question? Visit the Frequently Asked Questions. We’ve kept track of the questions we hear most often from our users and gathered them together in this section. We hope this helps! If you have any questions, comments, or suggestions about how this guide can be improved, we’d love to hear them. Shoot us an email at Any technical support requests should still go to


About this software System Requirements To run the software efficiently, your computer and server systems should meet the following requirements: • Operating System: Mac OS 10.6 or higher • Disk Space: 30MB free disk space available • RAM: 256MB (512 recommended) • Server: PHP 4.7 or higher, VBScript 5.0 or higher, or ASP.NET • Browser: Safari 4, Mozilla Firefox 3+, Google Chrome 5, Opera 10

Installing the Software If you are installing the registered version of the software, it is highly recommended that you first uninstall the trial version and then restart your computer. If you’ve created any projects with the trial, it is recommended that you back up your projects to prevent loss. If you haven’t already downloaded your software, you can do so in your CoffeeCup user account ( Once you have downloaded the software, click the DMG file to start the setup process, then drag the Web Editor icon to the Applications folder.

Upgrading the Software When upgrading your software, you will need to log in to your CoffeeCup user account (http://www. just as you did to download the registered version of the software. When you download the upgrade, it will be a new full version and not just an upgrade to the existing software on your system. To install an upgrade, we recommend that you uninstall the previous version of the software and restart your computer. This is because installing over a previously installed version can cause some functions to behave abnormally. Therefore, it is best to install a fresh copy.

Uninstalling the Software To uninstall the program, you will need to drag the Web Editor icon from the Applications folder to the Trash. This process may not remove all related files from your system. You may need to remove some files and folders manually. Also, if you have previously created projects, make sure to back them up to prevent loss.


Getting to know the Web Editor workspace Here’s a quick overview of the major features of the Web Editor workspace:


1. Project Explorer

3. Left/Top Editor

Displays all open projects and their files and folders; also displays bookmarks.

Displays the currently selected text document for editing.

2. Preview Pane

4. Right/Bottom Editor

Displays a preview of the currently selected file as it will be seen on the web.

Shows a second currently selected text document which may be related to the file that is open in the main editor.

The Project Explorer The leftmost column of the Web Editor is called the Project Explorer, and it’s an easy way to keep up with and organize all the files, folders, and bookmarks that are currently open. Here’s what a typical Project Explorer pane might look like in a relatively simple project:

Each item in this list (except for bookmarks) represents an actual file or folder found on your hard drive. If you hold the mouse cursor over any non-bookmark item in this list, the full path to the file or folder will pop up. This is the quickest way to determine where an item is stored on your hard drive. You can also right-click an item and select “Show in Finder” to go straight to the containing folder. There are several different types of items displayed here: • Project: The brown icon represents a project, and everything in its tree is part of that project. Each of these icon represents a different project, so you may have several project icons onscreen at once. • Folders: The blue icons represent folders where files can be stored. • Referenced files/folders: Indicated by a chain icon in the bottom-left corner (as seen on the icon for contact.html). • Regular files: Everything else in a project—HTML, CSS, PHP, JPG, TXT, etc.! • Non-Project Files: Open files that do not belong to a project. • Bookmarks: Saved references and comments for a specific line of a specific file. Each Project icon refers to a .weproj file on your hard drive. (That’s the extension for a Web Editor file, which keeps track of all the files in the project.) Within each project is a referenced folder (“Website of the Year” in our example) where all non-referenced files in your project are organized. You don’t need to put all your files in this referenced folder, though. The Project Explorer lets you include files and folders that are located anywhere on your computer, which is what references are used for. 7

There are two different methods that the Web Editor uses to organize content, and there are several ways to add this content to the project: • Regular files/folders: Copy content into the project folder on your computer’s hard drive. This can be accomplished in two ways: • Click-and-drag content directly into the project using the Finder • Right-click a destination folder and choose Copy/Link Existing File or Folder… to choose content to add. • Referenced files/folders: Use the “Add File to Project” feature. There are three ways to do this: • Go to File > Add File to Project • Right-click the project icon and choose Add File to Project • Click the auxiliary menu (the + icon) on the bottom left corner of the window and choose Add File to Project The Web Editor has a powerful external synchronization feature which ensures that the project’s folder tree exactly mirrors the folder tree on the hard drive. Because of this, when you copy content into one of the project’s folders in the Finder, it automatically appears in the corresponding folder within your project. Therefore, changes made to content in the Web Editor will also happen on the hard drive! Very important: If you delete content from the project folder, it will also be removed from the hard drive. Please ensure that you actually want to delete the content before taking this action!

Referenced files/folders Referenced files don’t actually need to be located within the project’s folder on the hard drive. These are the files that have the little “chain” icon in the bottom-left corner that indicates that the Web Editor is “linking” to them:

Because this icon represents a link to where the file or folder can be found on the hard drive, this content can be stored anywhere. Please note that you can right-click and delete the reference to a file or folder, removing it from the project, but this action will not delete the actual content.

Deleting and Repairing References


The Web Editor synchronizes all changes to files and folders in the project. This means that if you move or delete a referenced file, the Web Editor highlights the content in red, letting you know that something needs to be corrected. In the following example, we moved “contact.html” to a different folder with the finder:

The Web Editor no longer knows where “contact.html” is, or what the reference should lead to. Rightclicking this red file name reveals two choices: • Delete Reference • Repair Reference… If you’ve removed this file, or you don’t need it in the project anymore, choose Delete Reference. But if you’ve made a mistake or moved a file and just need to remind the Web Editor where it is, choose the Repair Reference… option. This allows you to locate the file so it can be used in the project again. Please note that the file located to repair the reference must have the same file name as the reference itself. This means that if you renamed the file, you’ll need to change it back or add it again to use it in the project.

Making Copies If you’d like to add content to a specific folder in the project tree, you can either choose to make a new copy of an existing file/folder or use a symbolic link. Right-click a folder in your project and choose Copy/Link Existing File or Folder.

From this window, you can choose any file or folder on your computer and click Open. The content will be copied into the folder that you originally right-clicked. 9

Unsaved Files If a file has been modified but not saved, its icon will appear darker than normal, like index.html appears here:

This lets you know that the file needs to be saved. You can do so by selecting the file and pressing Cmd+S or by going to File > Save.

Non-Project files If you open a file without linking it to a currently opened project, the file will be placed in the NonProject Files category. Files in this section can be added to a project by saving them to a folder used by a project. When you create a Quick File using File > Quick File or the Cmd+N shortcut, a new HTML file will appear in the Non-Project Files category. Quick files don’t actually exist on the hard drive yet, so they must be saved to be used in a project. You can either save these files to a folder on the hard drive used by a project, or you can save them anywhere you like on the hard drive and add them as a reference later.

Bookmarks If you are using any bookmarks, they will appear below all the other open files in the Project Explorer. To learn more about them, read the Bookmarks chapter.

The Auxiliary Menu The last thing we need to discuss in the Project Explorer pane is the bottom panel with three little icons that look like this:


Clicking this button opens a menu where you can quickly choose some of the most commonly used functions of the Project Explorer:

You can read more about these functions in the Getting Started chapter. Clicking this button displays the text documents that are currently available to be worked on. This is an easy way to get a list of files if your project has lots of folders and non-text files.

And finally, this button collapses the Project Explorer, giving you more room for the other panes in the Web Editor. You can always expand the Project Explorer by clicking the right arrow in the bottom left corner of the window.

Well, that’s enough about the Project Explorer. Let’s talk about the Preview pane.


The Preview Pane The Preview pane’s function is pretty straight-forward: Show you what the code you’re working on looks like in a browser window! It’s extremely useful to have this feature right on the screen, because it updates itself each time you make a change to the code. This way you can see whether the code you’re entering results in what you’re actually intending to create. You can choose to use the Preview pane in Browse Mode or Edit Mode. In addition to showing a preview of the currently selected document, the Preview pane is used to display any selected graphics. For example, if you click a JPG file in the Project Explorer, it’ll appear in the preview pane.

Browse Mode To switch to Browse Mode, click the toolbar icon that looks like an eyeball:

This mode turns the preview into a fully-functional browser window, allowing you to click links and go back and forward in your browsing history using the navigation buttons.

Edit Mode To switch to Edit Mode, click the toolbar icon that looks like a pencil.

When using the Web Editor in Edit Mode, you can click an element of the webpage and the corresponding code is highlighted in the editor panes. For example, we’ve clicked the green header text in this preview screenshot:


And the corresponding line of HTML has been automatically highlighted in one editor…

…and the relevant CSS in the other editor!

This is a powerful function: If you have a complicated webpage and you don’t want to hunt through your code for a long time trying to find which line of code matches up with an element on the page, you can simple click it in the Preview pane and the element’s code will be appear before your eyes. Sound useful? You bet it is! You can even do the opposite: Click the code in one of the editors and the element it defines or styles will be highlighted in the preview pane! How cool is that?

Other Preview Tools There are a couple tools above this window that can help you organize the preview pane in the way that works best for your workspace. By default, the preview pane appears at the top of the screen, but you can use these tools to customize its position and size. The Pop-Out button pops the preview pane out of the main window altogether. Your preview will now appear in its own floating window. If you’ve got a two-monitor setup, try running the Web Editor on one monitor and the preview on the other.

The Collapse button collapses the preview pane. This temporarily hides it so you’ve got more room onscreen for the editors. When you’re ready to expand the preview pane again, just click it again.

The Arrangement button toggles between display arangements. The preview pane is at the top of the window by default, but this tool lets you place it to the left of the editor. This can be useful if you’re working on a very long webpage. Click this button again to switch back to the original arrangement.


To the right of the arrangement and mode tools are two more useful items: the Browser Preview button and the Related Files drop-down menu: Clicking the Browser Preview button open the currently selected webpage in your preferred browser, so you can see exactly how your webpage looks in specific browsers. You can configure the preferred browser in the General tab of the Preferences window, or by clicking the arrow next to the browser preview button and choosing Set Preferred Browser. Click the down arrow to select from a list of installed browsers to preview with. It’s a good idea to check to see how your work renders in as many browsers as possible, so before you send your final upload, test with every browser in this list. Again, choosing Set Preferred Browser allows you to pick which browser is used by default when clicking the browser preview button.

The Related Files drop-down menu allows you to choose from a list of files that are referenced by the document being displayed in the left/top editor. You can read more about it in the next section: The Editors.


The Editors Ahh, finally—the code editing panes! We’ve made it to the keystone of the application. This is where you’ll do the vast majority of your HTML, CSS, PHP, and/or C++ coding, as well as any other text-based programming language you which to use the editor for. Heck, you can even use it just to edit plain ol’ text files! The first thing that you’ll notice is that each line is numbered. This is helpful when using bookmarks to flag certain lines of code in documents, and is even more helpful when two or more people are collaborating on a single file and need to refer to a certain line. Some languages, like PHP, will even return error codes that reference specific lines, helping you to locate a syntax error with ease. Line numbers are also necessary when approximating the number of lines in a closed block of code.

Code Blocks Speaking of blocks of code, look at that margin between the line numbering and the actual code. This area is called the gutter, and those lines, pluses, and minuses indicate what we refer to as blocks:

Blocks appear around every open and corresponding close tag that span more than one line (in this example, <div> and </div>.) The box with a minus sign on line 17 is an indicator that the line is the beginning of an open block, and the small dash on line 20 is the end of the open block. You can click the minus to fold the block, and the Web Editor will display only the first line of this section:

See how the numbering jumps from 17 to 21? That’s because lines 18, 19, and 20—all parts of this <div> block—have been collapsed. They’re still there, but the Web Editor is temporarily hiding them. You can click the plus sign that now appears in the box to unfold these hidden lines. You can also toggle whether a line is foldable by clicking its line number to highlight the entire line and going to Edit > Blocks > Toggle Foldable or pressing Cmd+K. This way you’ve got complete control over which chunks of code can be folded. You can also move selected blocks of code up and down in the document. Just highlight an entire section of code, then click and drag it into position with the mouse. Because this can sometimes be messy, you can also use these keyboard shortcuts to do the same thing: • Ctrl+Cmd+Up arrow: Move the selected code up by one line • Ctrl+Cmd+Down arrow: Move the selected code down by one line


By now you’re probably wonder why there’s so much text coloring going on in the editor pane. Hey, it keeps you organized and increases the likelihood that you’re writing a syntax-error-free document! Let’s talk a bit more about those colors.

Code Coloring Notice how certain sections of the code are color coordinated?

Each color corresponds to a specific type of element of the document you’re working on. This example uses the classic color scheme for HTML documents. You can customize color schemes for specific types of files in the Colors tab of the Preferences window. Once you become familiar with the color scheme you’re using, you’ll immediately notice if something isn’t colored correctly. For example, the values for all HTML tags in the example above are green. If you’re entering a value and it’s not green, you’ll start looking for something you missed—a bracket, a quote, a semicolon, etc. When your syntax is correct, all color coordination will be correct as well. Code coloring can also help you immediately identify what kind of document you’re working on. For example, you might be working on a PHP file that is mostly composed of HTML code. The HTML might confuse you if it wasn’t using the PHP color scheme that reminds you that yes, you are in fact working on a PHP file.

The Coordinates Box Just below the left/top editor is a little box with a pair of numbers in it. It looks like this:


These are the coordinates of where the cursor is placed. In this example, the cursor is on line 7 on the 39th character from the gutter.

The Right/Bottom Editor Yep, you’ve got two editor windows, so you can have two documents open simultaneously. This is helpful if you’re working on two related documents, like an HTML file and a CSS file. You can edit the content (HTML) in one, work on the style (CSS) in the other, while both affect the Preview pane in real time. This HTML-CSS-Preview round trip is exactly what makes the Web Editor so powerful! You can click a style or script file in the Project Explorer to open it in the right/bottom editor, or you can click an element in the Preview pane while in Browse mode to open its content and style files in both editor panes simultaneously. If you want to easily switch between the files that are referenced by the document in the currently selected editor, you can use the Related Files drop-down menu found in the upper-right corner of the window. It looks like this:

This menu lists all the documents that relate to the currently selected document. For example, any CSS files linked from the header of a currently selected HTML file appear in this menu. Likewise, any HTML documents that reference a currently selected CSS file appear in this menu. Just choose a file from the list and it’ll open. Note: If the selected document has not been saved since new references were included, they won’t appear in the Related Files drop-down menu. You’ll need to save the document for referenced files to appear in the list.

The Editor View Picker One more thing before we move into a swift tutorial! There’s a little tool in the bottom-right corner of the Web Editor window. Here’s what it looks like:

The left box displays the file type that is open in the left/top editor; the right box displays the file type that is open in the bottom/right editor. The middle box is a toggle for how these two boxes are oriented. In fact, this entire section is one giant button. click the left box and only the left/top editor will be displayed; click the right box and only the right/bottom editor will be shown. Click the middle box, and both will be displayed, but they’ll toggle between vertically stacked or side-by-side arrangements. This is exactly why we keep referring to this editor panes as left/top and right/bottom. Okay! We’ve discussed everything you see in the standard Web Editor workspace! Makes a lot of sense, doesn’t it? Now that you’re familiar with each pane, button, and menu, let’s try some tutorials. 17

Getting Started We cannot stress enough how important Projects are. If used correctly, this tool can make broken links a thing of the past. You’ll never see those pesky red broken images again! Before we get started, we want to remind you to save often! You never know when there might be a power outage or a computer crash, and you don’t want to lose any of your hard work. We also just want to tell you that there are a lot of different ways to do the things we show you in this guide. For example, to save your project, you can: • Go to File > Save • Use the keyboard shortcut Cmd+S • Right-click the file in the Project Explorer pane and choose Save All right, let’s make a website!

Step 1: Creating a Project You’ve got several options for starting a new project. Go to File > New Project and take a look: • From Files and Folders • Quick Project • From Template • From Server Each of these options allows you to start a project via different means. Let’s explore them further.

New Project > From Files and Folders Choose this option if you have existing website files on your computer already. A window will pop up asking you to title the new project and choose the location where its files will be saved.

Clicking the down arrow to open the Finder may be an easier way for you to find the right location to save your files. When you’re done, click Next. 18

Now select all of the files and/or folders you want to use in this project.

Click Ok, and your project will be all set up!

New Project > Quick Project This option is the fastest way to begin a new project from scratch. It simply creates the project folder, a blank HTML file, and a blank CSS file.

New Project > From Template Choose this option if youâ&#x20AC;&#x2122;ve got a snazzy theme you want to use to jumpstart your website. Simply choose a project name, choose a location where the project should be stored, and pick a template from the drop-down list. When youâ&#x20AC;&#x2122;re ready to move on, click Save.


New Project > From Server If you’ve configured an S-Drive account or FTP server, you can download files from that location to add to your new project. For more information setting up a server, see Step 5: Uploading Your Project. A dialog will ask you to title the new project and choose the location where its files will be saved.

Clicking the down arrow to open the Finder may be an easier way for you to find the right location to save your files. When you’re done, click Next. Now select the files and/or folders on the server that you’d like to add to your project.

When you click OK, the Web Editor downloads the files and folders you selected to the folder you specified on your computer. A project is created in the Project Explorer containing all of these files. 20

Step 2: Adding Files to your Project Oops! Did you forget to include some stuff when you created your project? No problem. Adding more files is simple, if you understand how the Project Explorer works. Regardless of which option you used to start a new project, the Project Explorer should be populated with files. Here’s what it looks like when creating a new project with the Simple Website template:

There are several different types of items displayed here: • Project: The brown icon indicates that everything in its tree is part of the project • Folder: The blue icons that indicate categories where files can be stored • Files: Any icon that doesn’t look like a folder! You’ll also notice that one of those folders has a little icon that looks like a chain attached to it. This is what is called a reference; it refers to a location on the hard drive where the folder can be found. All other files and folders within this folder’s tree are a mirror of the actual file system found on your hard drive. This means that any folders and files found within the “Website of the Year” folder on the hard drive appear here in the Project Explorer. With that in mind, adding folders and files to your project is extremely easy! You just need to know the location of the main folder, and then copy or drag content into it. Here’s what it looks like after we drag the file “badgers.html” from another folder into the “Website of the Year” folder:

Similarly, if you remove that file from the folder, it disappears from this list.

Adding References


You can also add files that are not inside the project folder on the hard drive by going to File > Add File to Project. This opens a window where you can select the files and/or folders. You can choose which project to add the content to with the drop-down menu below, which is helpful if you’ve got multiple projects open at once. You can learn more in the Getting to Know the Web Editor Workspace chapter. Here we’ve added a file called “contact.html” to the “Website of the Year’ project:

Notice the tiny chain icon next to this new file? It’s part of the project tree, but not part of the directory tree. Yep, it’s a part of the project, but it’s not located within the “Website of the Year” folder on the hard drive. Instead, it’s a link to where the file can actually be found. Don’t worry, it’ll function perfectly and will be uploaded with the rest of your content. Note that you can’t delete this file from the Project Explorer—just the reference to it.

Step 3: Creating a New Webpage In the last chapter we discussed how to start and maintain a website project, but what do you do when you just want to create a single new page for your website? Well, you’ve got two great options.

New Blank Page To create a new file for your website, go to File > New File. This opens a window where you can choose the name, location, project, and template to use for the new file.

And here’s what each section of this window is for: • File name: The name of the file you are creating • Where: The location where the file will be saved • Project: The name of the currently open project that you wish to add this file to • Use template: You can choose from a list of file types that this file will be saved as. In general, you’ll want to just use the Empty HTML File option. 22

Don’t forget to click Save when you’re ready to move on!

Quick File If you want to configure all of that stuff later, you can go to File > Quick File or press Cmd+N to quickly open a blank HTML file. This file will be temporarily stored in a Project Explorer category labeled Non-Project Files. When you’re ready to add this file to a project, go to File > Save As… and save it within the folder of the chosen project. For example, we saved our new file in the “Website of the Year” folder. When you save this file, it will be moved from Non-Project Files to the project you’ve chosen.

Step 4: Previewing Your Project You’ve built your webpage. All along, you’ve been watching it take form in the Preview pane, but now you want to see what it looks like in an actual browser window. You can do this without having to upload your entire website! Important: For the preview to work properly, you’ll need to save the currently opened document. This is because the browser preview reads the saved file on your hard drive, and not the opened file in the Web Editor. Hit Cmd+S before every browser preview!

Click the Browser Preview button, found in the upper-right corner of the window. It looks like this:

Clicking the left side of this icon (the computer monitor) opens the saved version of the currently selected document in the preferred browser. You can configure the preferred browser in the General tab of the Preferences. If you want to preview using another browser, click the right side of this icon (the down arrow.) This expands a list of all the browsers installed on your computer:

Simply select the browser you want to preview with and your document will open in that browser. Notice that you can choose your preferred browser within this menu by selecting Set preferred browser.


If this is your last preview before uploading your website, we strongly suggest previewing in every browser you have. Since no two browsers render code exactly the same way, this will help you catch any inconsistencies in code before they are broadcast to the web.

If everything looks good in preview, there’s only one thing left to do: Upload your website!

Step 5: Uploading Your Project You can upload your entire website project straight from the Project Explorer with a simple right click on your project’s name. But first, you’ll need to set up your S-Drive or FTP account by going to Connect > Server Management. For help setting up a server profile, read the Server Management chapter. Now that your project is ready to be uploaded to the web, and you’ve set up your server profile, right click your project name in the Project Explorer and choose Communications > Configuration.

This opens the Project Server Configuration window.

Choosing an S-Drive Site If you’ve set up an S-Drive profile, you can select it to display your S-Drive addresses.


Simply choose where you want your project to be uploaded by selecting one of these folders and finding the exact location where you want all your files to go. When you’re done, click OK.

Choosing an FTP Account If you’ve set up an FTP server, you can select it to display the files and folders it contains.

Though web hosting servers tend to manage files and domains in slightly different ways, you’ll be able to see the content that currently exists on your FTP account. Simply choose where you want your project to be uploaded and click OK when you’re done.

Uploading Your Project Once you’ve configured a publishing destination, you can now upload your project. It’s very easy! Simply right click your project’s name in the Project Explorer and choose Communications > Upload.

That’s all there is to it! If you’ve configured everything correctly, your project is now live on the web. Congratulations! You can choose the Publish feature as often as you like. Now that we’ve gone from zero to website in just five steps, let’s take a closer look at the many features and functions that make this the best code editor OS X has ever seen.


Blocks and Cursors Whether you’re hand-coding tons of repetitive items or rearranging a huge document, you’ll find that the Web Editor’s blocks and cursors shortcuts are a huge help.

Blocks Blocks are portions of code that you highlight with the mouse cursor. When you highlight a block of code, you can delete, cut, copy, and paste your selection, and you can use special shortcut combinations to nudge the block around.

Moving Blocks Around When you highlight code, you can use the standard keyboard shortcuts you’re already familiar with to cut, copy, paste, and delete the block. You can also click and drag a selected block to duplicate it. However, there are a few more useful keyboard shortcuts you can use to move blocks as well. Let’s explore a little bit. Highlight a selection of code:

Now hit the Tab key a few times:

You can move an entire block of code in any direction by using special keyboard shortcuts. • Move Block Right: Tab • Move Block Left: Shift+Tab • Move Block Up: Ctrl+Cmd+Up Arrow • Move Block Down: Ctrl+Cmd+Down Arrow

Selecting a Rectangular Block You may have noticed that highlighting multiple lines wraps the highlight back to the beginning of a line. But what if you want to select just the middle portion of multiple lines? There’s a shortcut for that, too. Hold Alt while you click and drag the mouse to highlight a rectangular portion of code:

You can perform the same task using just the arrow keys. Hold the Shift and Alt keys and move the cursor with the arrow keys to select a rectangular block. 26

Note: You can move a rectangular block left and right with keyboard shortcuts, but not up and down.

Selecting Multiple Blocks Simultaneously You can also select multiple blocks within the same document. Hold the Command key while clicking and dragging the mouse to highlight several different blocks at once:

Cursors While blocks are good for manipulating existing code, cursors are the secret to creating code efficiently. The Web Editor allows you to place multiple cursors at once so that you can create multiple lines of text at once.

Using Multiple Cursors to edit Open and Close Tags Simultaneously This cursor option is used to edit existing tags, but it’ll save you from having to hunt down the end of the line every time you change a tag. To enable this option, go to Web Editor > Preferences and click the Editor tab. Check the box next to Edit opening and closing tags simultaneously. Now click a tag. Notice that a cursor is placed in both the opening and closing tags? Now change it, and you’ll see its corresponding closing tag change, too.

Placing Multiple Cursors Sometimes you’ll need to type the same thing many, many times, like when listing a bunch of images that all have similar file names. Wouldn’t it be great to type once and have it appear in many different places at once? You can do that! Hold the Command key and click anywhere in the code editor to place the cursor multiple times:

Now type your code and watch it appear in all of those locations:


Placing a Range of Cursors Placing multiple cursors is an incredible feature, but if you need to make a list with 18 items, you probably don’t want to click 18 times. You can create a range of cursors by holding the Alt key and dragging the mouse cursor down to draw a range of cursors that spans multiple lines:

Now type out your code. Aren’t you glad you did it the ultra-efficient way?

Note that the shortcuts for blocks and cursor placement are the same. You’ll find that this system saves you way more time than any other way to write code.


BOOKMARKS If you’re working on a big, complicated document, bookmarks are going to be your life saver. You can place a bookmark on any line of code in any open document. They’ll all appear in the Project Explorer in the Bookmarks section. This will help you quickly jump to different parts of the code that you’re working on, need to reference, or for any other reason you can think to mark them. To set a bookmark, ensure that the cursor is on the correct line of code and press Cmd+D. You can also go to Edit > Bookmarks > Toggle to perform the same function. You can use these same commands to remove a bookmark as well. When the bookmark is set, two things will happen: • A green dot will appear in the gutter next to the chosen line of code

• The bookmark, labeled by file and line number, appears in the Project Explorer

The Project Explorer helps to maximize the efficiency of bookmarks by displaying all bookmarks in all open files in all projects:

Clicking any one of these bookmarks listed in the Project Explorer will take you directly to the file and line it marks. You can open a list of all bookmarks by going to View > Bookmarks. The bookmark list is a window that displays all available information about each bookmark. You may find it useful to leave a comment for each one to help you find the one you need quickly.


To enter a comment, click in the Comment column next to the bookmark you would like to add information to. Enter your comments and press enter when you’re done. Don’t be concerned that your bookmarks may be broken if you add more lines above them; bookmarks move alongside the line they mark. For example, we have a bookmark on line 15 of index.html:

But if we add another line of code above line 15, the bookmark will move down with the line it marks:

You may find that bookmarks are the most useful part of the Web Editor. They help keep your project organized so that you don’t forget where the code you’re looking for is located. The more complicated your project is, the more useful bookmarks become.


Tags, Snippets, and Helpers The Web Editor’s got a great menu with tools that will help you code faster and more accurately than ever before. To get to this window, go to View > Tags, Snippets, and Helpers.

Tags HTML is more advanced than ever before thanks to HTML 5, and it’s got a ton of tags you can use. We know that it can be hard to keep up with all of them, so we’ve included a list of more than 100 of them—and all of their available attributes—that you can easily pop into your code. Take a look at this window:

Using these snippets is simple! Let’s say you want to include an image in your HTML file but you can’t quite remember exactly what you need to type to make that happen, but you get the feeling that you’ll remember it when you see it. First, place the cursor in the HTML file where you want the code to be inserted (line 18 in this example.)

Now, find the <img> tag in the Tags window. You can click the arrow next to this tag to expand the list of its attributes:


To easily place this code in your document, double-click <img /> and then place the cursor inside the brackets. Now double-click src=”” to place the “source” attribute into your document. The Web Editor relies on you to provide the correct image name, but it’ll put the cursor within the quotes where you need to type it.

Simply provide the correct file name for the image and your image will be ready to go!

Tags for Other Coding Languages Don’t want to use HTML 5? Looking for HTML 4, CSS 3, or maybe even Perl code tags? The Web Editor’s got you covered. Click the drop-down menu underneath the Tags button. So far we’ve been looking at HTML 5 tags, but you can also choose to display CSS selectors and properties, Javascript functions, and more. If you’ve forgotten the exact syntax of a certain bit of code you want to use, this is the tool for you!

Well, that’s about all there is to say about the tags menu. How could it get easier? Code snippets!

Snippets Just when you thought that the Tags tool was the most useful thing you’d ever seen, along comes the Snippets. Tags are good for entering customized information, like an image that should only appear on one page, but snippets allow you to easily copy and paste code that will be used often. Let’s take a look at the structure of this window first. It’s split into three sections: The tools at the top, the chooser window in the middle, and the information window at the bottom. 32

There is another drop-down menu just like the one in the Tags tool that allows you to choose from a variety of coding languages like HTML, XHTML, and CSS. The options available for the chosen coding language will appear in the chooser window below. Scroll through the list in the chooser window to see which code snippets are already available. If you click one, some notes about the snippet will appear in the information window, followed by the full content of the snippet. This is the chunk of code that will be inserted into your document. To use a snippet from this list, first place the cursor in your document where the code snippet should begin (line 21 in this example.)

Now double-click the code snippet you want to place here. We’ll use the “footer” snippet:


That’s all it takes to put a snippet into your code! But that’s not the only thing that makes this tool so useful. You can create your own snippets as well! To add your own snippet, click the green + icon in the top right corner of the snippets window. This opens a window where you can enter information about your new snippet. Just title it, add a description, and then put the relevant code in the “Snippet Value” box. Click OK when you’re ready to save it. You can always edit it later.

Now your snippet is in the list! You can double-click it to place it in your code.

To make changes to this snippet, click the pencil icon in the tools in the upper-right corner. If you decide you don’t want this snippet anymore, you can delete it by clicking the red X. 34

Helpers Helpers are very similar to code snippets, but instead of just being a block of pre-existing code that is placed into the document, it’s a tool that generates the code for you after you fill out a brief form.

For example, double-clicking the Insert Link helper opens up a window where all the information necessary to provide a link in our document can be entered:

All helpers are different, but here’s a brief explanation of the different fields in this example: • Link text: This is the text on the webpage that will be clickable • URL: Where the visitor will be redirected when clicking the link 35

• Target: Chooses which window or frame the link will open in

• Title: This text appears in a floating box when the mouse hovers over a link • Message: In Internet Explorer only, this message will display in the status bar at the bottom of the browser if the checkbox above it is selected Here’s what our code looks like after clicking OK:

The helper automatically generates the code based on the information you provide and places it into the document wherever the mouse cursor is. Helpers make common tasks such as creating a link quick and simple.


Searching The Web Editor wants to help you stay organized, right? Well, how organized would you be if you had to frantically search around for stuff that you lost when you could have a program do it for you? That’s why there are two great options for searching with the Web Editor: • The Magic Search Bar • The Find & Replace Tool With the combination of these two tools, you’ll stay organized and get your project done fast. If only you could use it to find your car keys!

The Magic Search Bar Does your project contain hundreds of files? Need to locate a specific file? Don’t remember the exact name of the one you really need? The Magic Search will save you. See that box in the upper-left corner with the magnifying glass next to it? Type something into it.

Sure, you can type in the exact file name and the search will find it instantly, but you can also type in any number of characters that you think are part of the file name. The search results will include any file that includes those characters in that order. There are a couple of other filtering options that you can mess with if you click that magnifying glass:

Case • Insensitive: Capitalization is irrelevant in searches • Sensitive: Capitalization must match the search query exactly

Order • Alphabetical: List results alphabetically • Modification Date: List results starting with the most recently modified documents To clear out the search results and display everything in the Project Explorer again, click the X.


Find & Replace Just when you thought you had all the tools you need to really conquer the web, along comes the incredibly powerful Find & Replace tool. You can open this window by hitting Cmd+F or going to Edit > Find > Find…

There’s a whole slew of options here, but here’s what it basically comes down to: You can search for text (partial match, “starts with”, or exact match) in the currently selected document, open documents, or all documents. When a match is made, you have the option of replacing it with text that you provide. Let’s take a close look at each of those functions.

Inputs There are two input boxes on this screen. • Find: Enter text you would like to search for in this input box • Replace: Enter text you’d like to replace found text with

“Find” Parameters To the right of the “Find” input box are two drop-down menus with options that determine how matches are made. The upper drop-down has three choices that relate to the text provided: • Contains: Provided text just needs to match part of text in the document(s) • Starts with: Partial matches must begin with the provided text • Whole word: Provided text must exactly match text in the document The lower drop-down has three choices that determine which files are searched: • Current Document: Only the document in the currently selected editor is searched (Cmd+T) • Open Documents: Documents in both editors are searched (Alt+Cmd+F) • All Documents: All documents in the Project Explorer are searched (Shift+Cmd+F)

Buttons There are six action buttons that can be used to find and/or replace text. • Find: Searches for and highlights the first match from where the cursor is placed for the provided text • Replace: Replaces the currently selected match with the text provided in the “Replace” field 38

• Previous: Goes back to the last match (Cmd+G)

• Next: Goes to the next match (Shift+Cmd+G) • Replace All: Automatically replaces all matches with the text provided in the “Replace” field (This tool might become your best friend!) • Replace & Find: Replaces the current match with the provided text and goes straight to the next match (This tool might try even harder to be your best friend!)

Match case Check this box if you want search results to exactly match the provided text’s capitalization. Remember, the Find & Replace tool isn’t just for searching. If there’s some mundane replacement task that you’ve got to accomplish (such as swapping a bunch of smart quotes with regular quotes), Find & Replace can save you precious minutes that could be spent doing something more gratifying, like clipping your toenails. Hey, no one wants to do those remedial tasks—no one except the Web Editor! Why not indulge it?


Server Management Setting up any web server or S-Drive account is simple with the Server Management window. To set up publishing destinations, go to Connect > Server Management. You can create a new profile by clicking the + button in the bottom left corner, and remove a profile by selecting it and clicking the - button in the bottom left corner.

Setting Up an S-Drive Profile

To set up an S-Drive profile, click the + button in the bottom left corner to create a new server profile. Then set Protocol to S-Drive. Now you only need to enter a label for the profile and the email address and password you use to sign in to the CoffeeCup website! Here’s a breakdown of what each of the S-Drive setup fields are used for:

Nickname A nickname for the S-Drive profile being created. Since it’s just a personal reminder of which Site you’re using, you can name it anything you want.

Username This is the email address you use when signing in to the CoffeeCup website. Be sure to enter it exactly as you do when signing in to the website.

Password The password you use when signing in to the CoffeeCup website. Be sure to enter the password exactly as you do when signing in to the website. Passwords are case sensitive, so if there are capital letters in your password, you must enter it that way. Select the Show checkbox to show the password.

Protocol 40

There are many options here, but you must select S-Drive if you are setting up an S-Drive profile.

Setting Up an FTP Server

To set up an FTP server, click the + button in the bottom left corner to create a new server profile. Make sure that Protocol is set to anything except S-Drive. Here’s a breakdown of what each of these FTP fields are used for:

Nickname A nickname for the server profile being created. Since it’s just a personal reminder of which server you’re using, you can name it anything you want.

Username The FTP username assigned to you by your web hosting company. Be sure to enter the information exactly how it was given to you by your provider. Usernames are case sensitive, so if there are capital letters in your username, you must enter it that way.

Password The FTP password assigned to you by your web hosting company. Be sure to enter the information exactly how it was given to you by your provider. Passwords are case sensitive, so if there are capital letters in your password, you must enter it that way. Select the Show checkbox to show the password.

Protocol There are many options here. Choose FTP unless you are sure you need to connect via HTTP or secure HTTPS connection. (If you don’t know whether or not you need to use HTTP, then you probably don’t.) Note that choosing S-Drive will change the setup options so that you will be connecting to S-Drive.

Server Address 41

The TCP/IP host name of your FTP server. It should be in the form of an IP address, your domain name (e.g., or your domain name preceded by ftp. (e.g. Do not in-

clude ftp:// or any folder name like, because these are invalid TCP/IP host names. You may need to contact your web hosting company to determine your FTP server host name. Examples of valid server names Examples of invalid server names

Port By default, this is set to 21. You should not change the port unless your hosting provider has explicitly instructed you to do so.

Passive Mode Checking this box activates passive mode. Enable passive mode if you experience trouble connecting.


Preferences This window is where you can customize the Web Editor to work exactly the way you want it to. To get to the Preferences window, go to Web Editor > Preferences, or press the shortcut Cmd+, (that’s the command key and the comma key.) There are four preference tabs: General, Editor, Extensions, and Colors.

General This is where you can configure some of the more basic stuff the Web Editor does.

When application starts Choose which action the editor will take when you first open it. “Show initial menu” brings up the splash screen that features quick links to create new or open previous projects. “Show empty screen” takes you straight to an empty website project. “Open last project” reopens the most recently accessed project.

Preferred external browser This drop-down menu allows you to choose the browser that launches when you click the preview button in the upper-right corner of the Web Editor window.

Default location This is the location that the Web Editor uses to store new projects. You can always change this location after you’ve started a project.

Show the full path in the application’s title 43

The title bar of the Web Editor will show the full path to the currently selected file.

Editor The settings in this tab only apply to the editor panes.

Select the display features to be used These options adjust how code is displayed in the editors. • Show white space guide: Displays arrows in places where the Tab key has been used, and center dots where the space key has been used. This helps you determine where text may line up on separate lines. • Syntax highlighting: Toggles color schemes being used to highlight code • Display EOL: “EOL” means “end of line”; shows notation for character returns and line feeds (CR and LF) 44

• Show line numbers: Displays line numbers in the left gutter • Display indent guide: Displays vertical columns where tab lines are located • Show right margin: Displays a right margin guide line

Select the features that the Editor will apply to the open file These options affect the currently open file’s permissions and actions. • Folding enabled: Enables foldable blocks (read more in the Blocks section) • Read only: Disables the ability to edit the open file • Wrap mode: Wraps long lines of code to following lines, so that there’s no need to scroll left and right to see the entire line • Auto-indent: Set the cursor to indent the next line when pressing enter, if the current code block is indented • Over type: Allows typing over existing characters, insead of inserting characters before existing content

Select the auto-completion options to be used Auto-completion is a very smart tool. It’s kind of like spell check for web code, but a bit different. It ultimately reduces the number of errors that you make by ensuring that all of your HTML code is entered properly—both in spelling and syntax. • Auto-completion enabled: Allows the editor to guess and suggest code that you are entering (this helps you avoid syntax errors, which almost always result in code failure!) • Add double quotes to HTML parameters: Automatically includes double quotes around certain values in the HTML, which is required by certain browsers. • Close HTML and XML tags automatically: Almost every HTML or XML tag requires a corresponding closing tag, and this option will include them for you so you don’t forget. • Wrap selection in quotes when hitting ‘ or “ key: Highlight a block of text and hit ‘ or “ to add quotes on the beginning and end of the selection. • Edit opening and closing tags simultaneously: When you edit either an opening or closing tag, its corresponding tag will also be edited at the same time. Two cursors!

Select fonts and font sizes used in the editing panes Choose fonts and font sizes to be displayed in each editing pane. You can also specify how many spaces will be inserted whenever you use the Tab key.


Extensions This is where you can configure how the Web Editor recognizes file types by extension, and how to handle them.

Choose a programming language from the drop-down menu and adjust the list of associated file extensions as necessary. Each item in the drop-down corresponds to a color scheme that can be adjusted in the Colors tab. To add an extension to the list, click the + button, type the extension, and press enter. To remove an extension from the list, select it and click the - button.


Colors You can adjust the color scheme of the various programming languages, either by choosing the color associated with each code element manually, or by choosing a predefined color scheme.

Language Select the coding language for which you want to display the color settings.

Color Scheme These are the available preset coloring schemes that you can choose from. You can save your own custom scheme and access it from the menu.

Element This is the list of elements that can be styled for the currently selected coding language. â&#x20AC;˘ FG: The foreground color to be applied to the corresponding element 47

â&#x20AC;˘ BG: The background color to be applied to the corresponding element

File Extensions This is the list of file extensions to which the current color scheme will be applied. You can add extensions by pressing the + button found below this window, and you can delete extensions by selecting them and clicking the - button.

Preview Allows you to see what the scheme looks like in the editor before applying the changes.

Save asâ&#x20AC;Ś Allows you to save the currently configured color scheme so that it can be accessed later from the Color Scheme drop-down menu.


Frequently Asked Questions Error Messages and Troubleshooting The Related Files drop-down menu doesnâ&#x20AC;&#x2122;t list all of the files related to my document! This menu looks at the files related by the saved version of the currently selected document. Try saving the open document and checking the drop-down menu again.

When I click the Browser Preview button, some of my changes donâ&#x20AC;&#x2122;t translate to the browser! The browser preview is drawing its source code from the saved version of your document on the hard drive, not the (potentially) unsaved version that is open in the editor. Try saving the currently open document (Cmd+S) and trying the preview again. Saving regularly is a good habit to have; saving before every browser preview is a must.


Keyboard Shortcuts You can perform the most commonly used functions in the Web Editor using keyboard shortcuts. Below is a complete list of all the keyboard shortcuts available in the program:

File Management • New File: Ctrl+Shift+N • Quick File: Cmd+N • Quick Project: Shift+Cmd+N • Open: Cmd+O • Open Project: Shift+Cmd+O • Save: Cmd+S • Save As…: Shift+Cmd+S • Close File: Cmd+W • Close All: Shift+Cmd+W

Clipboard • Undo: Cmd+Z • Redo: Shift+Cmd+Z • Copy: Cmd+C • Cut: Cmd+X • Paste: Cmd+V • Select All: Cmd+A

Bookmarks • Toggle Bookmarks: Cmd+D • Previous Bookmark: Shift+Cmd+B • Next Bookmark: Cmd+B • Previous Bookmark in Document: Ctrl+Shift+B • Next Bookmark in Document: Ctrl+B

Blocks • Toggle Foldable Blocks: Cmd+K • Move Selected Block Right: Tab • Move Selected Block Left: Shift+Tab • Move Selected Block Up: Ctrl+Cmd+Up arrow • Move Selected Block Down: Ctrl+Cmd+Down arrow 50

• Select Rectangular Block: Alt+Mouse Selection, Alt+Shift+Arrow Keys • Select Multiple Blocks: Command+Mouse Selection

Cursor • Place Multiple Cursors: Command+Click • Place a Range of Cursors: Alt+Mouse Selection, Alt+Shift+Up/Down Arrow Keys

Search • Find & Replace: Cmd+F • Find in Currently Selected File: Cmd+T • Find in Open Files: Alt+Cmd+F • Find in All Files: Shift+Cmd+F • Find Next: Cmd+G • Find Previous: Shift+Cmd+G • Find Selected Text: Cmd+E • Jump to Selection: Cmd+J

View • Show/Hide Project Area: Ctrl+Shift+1 • Show/Hide Preview Area: Ctrl+Shift+2 • Show/Hide Left/Top Editor Area: Ctrl+Shift+3 • Show/Hide Right/Bottom Editor Area: Ctrl+Shift+4 • Show Left/Top Editor Area Only: Ctrl+Cmd+3 • Switch to Project Explorer: Cmd+1 • Switch to Preview Pane: Cmd+2 • Switch to Left/Top Editor: Cmd+3 • Switch to Right/Bottom Editor: Cmd+4 • Move Rear Window to the Front: Cmd+` • View Open Files: Ctrl+Tab • Hide Web Editor Windows: Cmd+H • Hide Other App Windows: Alt+Cmd+H • Minimize: Cmd+M • Toggle Full Screen (OS 10.7): Ctrl+Cmd+F

Misc • Preferences: Cmd+, 51

• Quit: Cmd+Q

Contact Us We give you more than just software. We have a mission when it comes to support: Be extraordinary! When you buy our software, what you get goes well beyond what you expect from a software company. We do not offer tech support — we offer coaches and counselors to help you with the software and web design. We are here for you so you can be a successful webmaster, not just learn a piece of software.

Registered customers always get: • The software you paid for, of course. • Free e-mail support (ask a question, get an answer within 24 hours.) • Free upgrades for life and access to download software at any time. • Access to our user forums ( where you can talk about web design or share business tips. • Exclusive discounts and sneak peeks at new software or services.

Trial Support Services: We are always happy to help you with your questions about our software. If you are using a trial version of our software you can use the online Knowledgebase ( or e-mail our support staff any time. Feel free to ask us your questions, and we will reply as soon as possible. Get priority support and access to our Support Center ( when you order our software. Our mission is to provide the best possible service to our customers. Join the ranks of webmasters worldwide and order our software today. You’ll be happy you did. :)

Our Address: CoffeeCup Software 165 Courtland Street Suite A, Box 312 Atlanta, GA 30303 USA Phone: (678) 495-3480

Thank You! To all our users—you know who you are… Without the support and feedback of those who download and buy our software, we wouldn’t be here. We are very lucky to have had so many people over the years think our software is great, and we are proud that you still do. Thank you, everyone!

Still Can’t Find Your Answer?


Visit our user forums (, check out the articles and video tutorials in our online Knowledge Base (, or contact our fabulous tech support team! (

Web Editor Quick Start Guide  

A set of docs for the Coffeecup Software Web Editor software for the Mac