CoffeeCup Support Knowledge Base

Working With Website Projects.


We cannot stress enough how important Website Projects are. If used correctly, this tool can make broken links a thing of the past. You'll never see those pesky red X's instead of your images again. Your Website's structure will be organized and intuitive. You'll rule the world!

Okay, you won't rule the world, but you will save yourself a ton of headaches. So, how exactly does this awesome tool work? This question actually has a really lengthy answer. We'll go over the basics here, but you should also check out a valuable guide built right into the HTML Editor. Go to My Websites > All Website Projects > What is a Website Project. This opens a comprehensive document that will answer all your questions about using Website Projects. Better yet, it actually is a Website Project, so you'll get to see firsthand how they work.

Okay, let's dive right in!

Step 1: Creating a Website Project

To create a new Website Project, use one of these options:

  • Go to My Websites > New Website Project
  • In the My Websites tab, click the Website Projects icon and select New Website Project

This opens the Website Project Settings window, which allows you to configure settings for your Website Project.

Here's what goes in the provided fields:

Website Project Name

This is the name of your Website Project. Since it's just a personal reminder, you can name it anything you want. Our recommendation, just to keep things simple, is to give your Website Project the same name as your Website.

Website Project Location

This is the location where your Website Project files will be saved. Use the Browse icon to browse your computer for the desired location.

If you want to create a Website Project using preexisting files, select the folder that contains the files you want to use. If you are starting from scratch, you will need to create a blank folder where your Website Project files will be stored. To do this, browse your computer for the place where you would like to store this folder, and then click Create Folder. Give the folder a name, make sure it is selected, and then click OK.

Server

This is the server where your Website files will be stored. You can select one of the servers you have already defined or define one using the fields in the Server Configuration window.

Note: You can only assign one server per Website Project. If you want to upload any or all of your Website Project files to a different server than the one specified in this field, you have two options:

  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.

Configure Servers

This opens the Server Configuration window, which allows you to configure a new or existing server profile.

Remote Root Folder

This is the root folder where your Website files are stored on your server. Common names include www, public_html, or web. If you are not sure of this information, contact your hosting provider.

Server URL

This is the TCP/IP hostname of your FTP server. It should be in the form of an IP address, your domain name (e.g. yourdomain.com), or your domain name preceded by ftp. (e.g. ftp.yourdomain.com). Do not include ftp:// or any directory name such as ftp.yourdomain.com/mysite, because these are invalid TCP/IP hostnames. It is up to your Web hosting company to assign your FTP server hostname, so you will need to find out from them what it is.

Examples of valid Web server addresses

ftp.mysite.com
24.24.100.100
mysite.com

Examples of invalid Web server addresses

ftp://ftp.mysite.com
ftp.mysite.com/mysite
http://www.mysite.com

Check Dependencies Before Uploading Files

This checks your document dependencies before uploading your files to your server to make sure they are referenced correctly. Website Project dependencies are links and external files, such as style sheets, images, etc. — basically anything that your HTML file links to. If one or more of your document dependencies aren't referenced correctly, you will receive information about the incorrectly referenced dependency.

If Dependencies Are Missing From Local System, Cancel File Upload

Checking this box cancels the file upload if any of the document dependencies are not located in the right place in your Website Project.

When Uploading Files...

You can choose to always upload dependent files (like images and style sheets), never upload them, or have the program confirm with you before uploading them.

When you're done filling out these fields, click OK. Your new Website Project will appear in the My Websites tab.

You can always return to the Website Project Settings window to modify these changes later using one of these options:

  • Go to My Websites > Website Project Settings
  • In the My Websites tab, click the Website Projects icon and select Website Project Settings

Step 2a: Adding Individual Pages to Your Website Project

The next thing we’ll cover is adding pages to your Website Project. First, create a new page using one of the following options:

  • 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

For more information about these options, read Creating a New Webpage.

Next, save your page using one of the following options:

  • Go to File > Save
  • Click the Save Items icon in the Toolbar and select Save
  • Use the keyboard shortcut Ctrl+S

This opens a window that allows you to choose the location where your new page will be saved. By default, the program will prompt you to save your page to the root folder of your Website Project. Enter a name for your page and click OK.

Note: If this page is going to be your Website homepage (front page), name it index.html.

Your new file will appear in the My Websites tab.

Step 2b: Adding Themes to Your Website Project

An alternative to adding individual pages to your Website Project is to start with a theme. A theme includes three pages (index.html, about-us.html, and contact-us.html) that include the HTML and images for a basic design, which means all the hard work is done for you. (For more information about themes, read the New From Theme section of Creating a New Webpage.)

To choose a new theme, use one of the following options:

  • Go to File > New From Theme
  • Click the New Items icon in the Toolbar and select New From Theme

This opens the Theme Chooser window, which allows you to select a theme you would like to use as your Website.

Select the theme you would like to use, and then click OK. This opens a window prompting you to choose the Website Project where you would like to save your theme.

Choose Current Project. The theme files will appear in the My Websites tab.

Step 3: Adding Folders to Your Website Project

An organized, intuitive structure is a really important aspect of a well-designed Website. One of the first things you can do to help organize your Website files is to create folders for specific page elements. Take a look at the Website Project created from a theme. See those subfolders of the main Website — css, images, and js? Each of those folders is clearly labeled with the name of the type of file it contains. This system helps keep everything in its own place.

Let's emulate this structure in our blank Website Project. (Of course, you can also add folders to a Website Project created with a theme.) To create a folder, right-click anywhere in the My Websites tab. This opens a right-click menu that contains options for working with your Website Project:

Select Create Folder. This creates a new folder. By default, it will be named New Folder 1, but you can give it any name you want. For this tutorial, let's call this file images and use it to store — you guessed it — images.

Step 4: Adding Other Files to Your Website Project

Next, let’s add some images to our images folder. To do this, switch over to the My Computer tab.

Use the area at the top to browse your computer for the image you want to add to your page. Selecting a folder in the top area opens all its files in the bottom area. Let’s take a look inside Public Pictures > Sample Pictures.

When you find the image you want to use — in this case, let's go with Toco Toucan — right-click it. This opens another right-click menu with options for working with the files on your computer. Select Copy File to Folder. This expands to display a list of the folders in your Website Project.

Since this is an image, we'll add it to images > [Here]. This opens a window that confirms whether you would like to copy the file to your Website Project.

Next, return to your Website Project by clicking the My Websites tab. Expand the images folder by clicking the little plus sign to the left of it. There, you’ll see your newly added image.

Now, anyone familiar with Websites will know that spaces in filenames are a total no-no. Let's rename this image to something more Web-friendly. To rename the image, right-click it and select Rename. Now enter a new name for the image — in this case, toco-toucan should work just fine.

Step 5: Linking to Files and Pages in Your Website Project

Now that we've added an image to our Website Project, let's add it to our page. To do this, right-click the image and select Insert Image Into Current Document. This inserts the HTML for an image in the place where your cursor was positioned in the Code Editor. The code looks like this:

<img src="/images/toco-toucan.jpg" width="1024" height="768" alt="" border="0">

Note: For a detailed tutorial about other ways to add an image to your page, read Adding an Image to Your Page.

Next, let's create a link to another page in your Website Project. Of course, before we can do this, we'll have to add another page. To do this, use the method described in Step 2a. For this tutorial, name your page about-us.html.

Switch over to index.html by clicking the index.html tab in the Statusbar at the bottom of the program.

Next, right-click about-us.html and select Insert as Link Into Current Document. This inserts the HTML for a link in the place where your cursor was positioned in the Code Editor. The code looks like this:

<a href="about-us.html"></a>

Next, let's enter some link text, which is the text your user will click to be taken to about-us.html. By default, link text is blue and underlined. For this tutorial, we'll use this as the link text: Learn more about us! Your code will look like this now:

<a href="about-us.html">Learn more about us!</a>

Finally, just for the sake of formatting, let's put this link in some paragraph tags. To do this, use one of the following options:

  • 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

For a detailed description about other ways you can add a link to your page, read How to Insert a Link.

Step 6: Previewing Your Website Project

Let's take a look at how your Webpage looks! To do this, click to the Preview tab at the top of the program. The Preview tab is a built-in Web browser (Internet Explorer, to be exact), so you'll get a chance to test your Webpage in its native environment.

Okay, admittedly it's probably not the Website of your dreams, but it's a start. Your image displays correctly, and your link points to your About Us page.

For a detailed tutorial about the many different ways you can preview your work, read Previewing Your Work in the HTML Editor.

Step 7: Uploading Your Website Project

Even though your Website isn't quite done yet, let's still walk through the steps involved in uploading it. It's pretty simple — just click the Tools icon at the top of the Website Projects tab and select Upload Entire Website Project. This opens the Upload Files to Server window, which displays the status of your file upload.

This window closes automatically once the upload is complete. Now you can switch over to the Server tab and check out your files on your server!

You'll notice that your file structure is perfectly preserved, which means all your links and images will be referenced correctly.

What if you don't want to upload your entire Website Project? Easy: Just select the file(s) you want to upload, and then use one of these options:

  • Click the Tools icon and select Upload Selected Files
  • Right-click the selected file(s) and select Upload Selected Files

The cool thing about Website Projects is that even when you're uploading individual files, your file structure will still be preserved.

And that's pretty much it! By now, you should have a pretty good idea of how to use Website Projects. If you want any additional information, we highly recommend checking out the sample Website Project included in the HTML Editor. To access it, go to My Websites > All Website Projects > What is a Website Project.

Rate This Article

You must be logged in to rate articles.

Download Our Software:

... and don't forget about our Free Software