CoffeeCup - HTML Editor, Flash & Web Design Software

These eight steps will guide you through the process of making your first Website. The Webpage you create in this tutorial may not be the prettiest thing you've ever seen, but it will give you a good idea of how to use the tools provided in Visual Site Designer.

Step 1

Navigate to File > New Website. This opens the New Website window, which allows you to enter information about your new page.

The Page Title is the title shown in the titlebar across the top of the Web browser. For example, look at the top of the Web browser you're using right now. See where it says, "Making Your First Website | CoffeeCup Software"? That's what we're talking about.

Give your Webpage the title "My Homepage." Next, set the Page ID. This is the file name that appears in the URL for that Webpage. For instance, if your Website URL was http://www.mywebsite.com and the page ID for this page was contact, then the URL for that page would be http://www.mywebsite.com/contact.html. Give this page the page ID index.html, which is the standard name for your Website homepage.

Next, set the width to 740 and the height to 600, and then set the background to white. (Once you're more comfortable with the program, you can set the background to a picture or gradient fill, but for now, a solid color is a good start.) To set the background color, click the white color swatch next to the words Single Color, and then select white from the window that appears. When you're done adjusting the page settings, click OK. You have just created a page on your computer!

Note: Each time you add new pages to your project, they will inherit by default the name, width, height, background, and link colors that you specify in the New Website window. You can adjust these settings individually if you wish. To alter these default settings, click the Page button in the Toolbar.

Step 2

One of the most important steps in creating a Website is saving it. Save often, especially after you've made important or complicated changes — after all, you never know when something might happen to your computer. To save, navigate to File > Save or use the keyboard shortcut Ctrl+S.

Step 3

In this step, we're going to add some text to our Webpage. To do this, select the Text tool from the Toolbox on the left-hand side of the workspace. Next, use your mouse to click and drag a box on the page. You'll see a blinking cursor in a red rectangle. This means you can start writing text! Start by typing: "Welcome to my new homepage!"

You can change the width of the text box by clicking and dragging the left or right side with your mouse. The height is adjusted automatically to fit the text.

Next, let's change how this text looks. Click the Object button on the Toolbar located across the top of the program. The window that appears displays the settings for your text. If you want to change the size, style, or font face of your text, just highlight the text you wish to adjust and then use the provided fields to alter it to your heart's content.

You can insert any number of text objects on the page and you can can always edit a text object by selecting it with the Text tool. This activates the red border and flashing cursor, which mean the text is ready to be edited.

Step 4

In the next step, we're going to add a rectangle to the page. To do this, select the Shapes tool from the Toolbox, click the rectangle, and then use your mouse to click and drag a rectangle on the page. It will have a blue border with eight handles surrounding it. Take some time to move the mouse over each of the handles to see how the pointer behaves.

If you move the mouse over one of the blue handles on the sides of the rectangle, it turns into a two-headed arrow. You can use this to adjust the width and height of the rectangle. To rotate the rectangle, use one of the handles on the corners. You can also move the shape by clicking within the border and dragging it to the desired location.

While you're playing around with the rectangle, take a look at your text object. You'll notice that it is no longer surrounded by a border. This is because you have selected the rectangle instead.

Step 5

Let's change the color of our rectangle to red instead of green. To do this, select the rectangle and then click the Fill button in the Toolbar. This opens the Fill Properties window, which allows you to adjust the fill settings for the selected object — in this case, our rectangle. To change the color, click the color swatch to the right of Single Color and choose red.

Step 6

In this step, we're going to add a new page to our project. To do this, click the Add Page button in the Toolbar. This opens the New Page Settings window, which allows you to adjust the properties for the new page. For now, leave them as is.

The first thing we'll do with our new page is insert a blue circle using the Shapes tool in the Toolbox. Next, let's link this shape to the first page. This will allow your Website visitors to move to the first page by clicking this object. To add a link, click the Link button in the Toolbar. Select the first page from the drop-down list provided. Notice how selecting this page automatically puts a check mark in the Use Link check box.

Navigate back to the first page and insert a new text object that reads, "Click here to jump." Highlight the word "here" and click the Link button. In the Link Properties window, select the second page from the drop-down menu. The two pages are now connected!

Step 7

Now we're going to check out how our Website looks in a browser. To do this, navigate to View > Preview Website. This opens the program's built-in browser. The first page you see is the front page of your Website. Click the link, and you'll be taken to the second page. Now click the circle, and you'll be taken back to the front page. To close the browser, click the red X.

Step 8

Time to upload our work to our server! To do this, navigate to Settings > FTP Settings. This opens the FTP Settings window, which allows you to enter information about your server:

FTP Server
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 hostnames
ftp.mysite.com
24.24.100.100
mysite.com

Examples of invalid hostnames
ftp://ftp.mysite.com
ftp.mysite.com/mysite
http://www.mysite.com

Username
This is 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
This is 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.

WWW Folder
This is the folder where your Website files are stored. Common names include www, public_html, or web. If you aren’t sure of this information, contact your hosting provider.

Profile Name
This is a nickname you can give this profile. It will help you keep track of multiple profiles if you have them.

Advanced
Clicking this button opens the Advanced FTP Settings window, which allows you to modify advanced FTP settings, such as enabling passive mode and setting up a proxy server. Enable passive mode if you experience issues connecting. Otherwise, leave these options alone unless your hosting provider has told you otherwise.

When you are done filling out this information, click OK. You are now ready to upload your work! To do so, just click the Upload button in the Toolbar.

Chances are, the Website you just published isn't your finished product. To remove it, navigate to Settings > Remove the Published Website. Please note that this doesn't remove the project from your computer — just your server.