Publishing to the Web

The files finished for the site, and they are ready to be published to the web. Remember, at the moment, all of the files you have worked with are saved locally on your hard drive.

The files and directories that need to be published to the web include:

• index.html
• elephant.html
• the images folder and its contents

For files to be available on the World Wide Web, they need to be published on a Web server. A Web server is a software system that receives requests from clients (such as Internet Explorer or Mozilla Firefox) and sends the requested files back to the clients.

Cloaking Files and Folders

Often the root folder will contain files and folders that do not need to be published. Cloaking excludes specific folder and files from all site operations. This means anything that shouldn't be published can be cloaked. In this case, the text folder, the Templates folder, and the africa_example.html file do not need to be published.

Step1. To switch to the Files panel,

Click

NOTE: The files for the site will only be displayed in the Files panel if you defined a site. If you did not define a site do the steps in the Preparing and Managing Website lesson under the "Defining a Site Locally" heading before continuing.

Step2. To see a contextual menu,

Right-Click the Templates folder

Step3. To cloak the folder,

Point Cloaking, Click Cloak

You see a Dreamweaver dialog box:

This warning is telling us that cloaking the Templates folder will only impact get and put commands. Changing the template would still cause pages based on the template to update, for example.

Step4. To close the dialog box,

Click

You see the folder and the file contained in it are now crossed out:

5. Repeat steps 2 and 3 for the following folders and files:

• the text folder
• africa_example.html
• structure.html

Now that the files we don't want to publish are cloaked, we can publish the site.

The Web Publishing Process

The steps to publish a site are:

• Connect to the web server in Dreamweaver
• Transfer the necessary files from the local computer to the web server in Dreamweaver

Transferring Files

The process used for transferring files from one computer to another over the Internet is called File Transfer Protocol (FTP). One disadvantage of FTP is that it is not a secure method of transaction. It is possible for hackers to intercept sensitive information (such as usernames and passwords) as well as to find out which files are being transferred and where those files are being stored.

To combat this security concern, some web server administrators now require users to transfer files to and from their servers using Secure FTP (SFTP). SFTP works much like regular FTP, except all of the information, commands, usernames, and passwords are encrypted. Dreamweaver includes built-in SFTP support, making this process quite easy.

Defining a Remote Site

As mentioned before, Dreamweaver refers to the folder on the server as the remote site. It is possible to connect to the server and publish our files within Dreamweaver. First, a remote site needs to be defined.

NOTE: For a video demonstration of defining a remote site see the Getting Started with Dreamweaver CC - Part 1 - Site Setup, FTP, Connecting to Server video.

Step1. To define a server in the Files panel,

Click

You will see the Site Setup dialog box:

Dreamweaver allows us to set up multiple servers. One way this could be useful is if a site is being posted to multiple servers. This steps only show setting up a single server.

Step2. To add a server, near the center of the dialog box,

Click

Setting the Remote Information

To connect to any web server, you will need to know the host name of the server and have an account on it. You need all of the following information before continuing:

• Server Name:
• FTP or SFTP Address:
• Username:
• Password:

Once you have gathered your account information, you are ready to enter the account details.

NOTE: If you need information about how to publishing web pages at IU, please see the Knowledge Base Document: At IU, how can I publish on the web?

Step1. To specify a server name,

Press & Drag the default value, type: the name of the server

If your server requires Secure FTP, change how Dreamweaver connects to the server.

Step2. To select an SFTP type of connection, on the Connect using drop-down list,

Click, Click SFTP

You see the options for transferring files using SFTP:

In the SFTP Address field, you need to enter the address for the remote host of a web server.

Step3. To specify the remote host, in the SFTP Address field, type:

the address of your server

You now need to enter the username and the password for the account.

Step4. Type the username in the Username field.

Step5. Type the password in the Password field.

The root directory specifies the folder on the server where the uploaded site will be located. A folder on the server is just like a folder on a local computer. Very often the name of the folder is "www". If we place files or folders outside of the root directory, they will not be viewable from a web browser.

Step6. To specify the root folder, in the Root Directory field, type:

www/

Step7. To specify the address to access the published site, in the Web URL field, type:

the address of your published site

Step8. To test the connection to the server,

Click

Step9. If necessary, in the Windows Security Alert dialog box,

Click

NOTE: Depending on the permissions you have on the computer we are using, you may have an allow access button instead of cancel.

If you have not made any typing mistakes, you should see a message along the lines of, "Dreamweaver connected to your Web server successfully."

Step10. To close the success message,

Click

You are finished defining the remote site. Notice that the red asterisk has been replaced with a green checkmark.

Step11. To save the settings for this server,

Click

Step12. To accept all of the changes to the site definition,

Click

Step13. To accept the cache being recreated,

Click

Now Dreamweaver has all the information needed to connect to the server.

Publishing Files to the Remote Server

There are two basic terms associated with SFTP: downloading (sometimes called get) and uploading (sometimes called put). Downloading transfers files from a remote computer and stores them on a local computer. Uploading transfers files from a local computer to a remote computer.

Let's connect to the remote host and put, or in other words, publish, the files on our site.

Step1. To connect to the remote host, on the Files panel,

Click

We will publish all the files and folder in the local root folder that are not cloaked.

Step2. To select the site,

Click Site - Africa's Big Five...

Step3. To publish the site, on the Files panel,

Click

A dialog box opens asking if we are sure we want to put the entire site.

Step4. To confirm uploading the entire site,

Click

Let's view the published pages in a browser.

Step5. Launch a browser.

Step6. In the address field, type:

the address of your site

You see the home page located on the server. The site is now viewable by the world.

Remember, for more practice creating pages, you can create the rest of the pages for the site using the template and the image and text files provided as a challenge exercise.