15. Publishing to the Web

The goal of all the preceding lessons is to design, develop, and build pages for a remote website. But Dreamweaver doesn’t abandon you there. It also provides powerful tools to upload and maintain any size website over time.

Defining a remote site

Dreamweaver’s workflow is based on a two-site system. One site is in a folder on your computer’s hard drive and is known as the local site. All work in the previous lessons has been performed on your local site. The second site, called the remote site, is established in a folder on a web server, typically running on another computer, and is connected to the Internet and publicly available. In large companies, the remote site is often available only to employees via a network-based intranet. Such sites provide information and applications to support corporate programs and products.

Dreamweaver supports several methods for connecting to a remote site:

• FTP (File Transfer Protocol)—The standard method for connecting to hosted websites.

• SFTP (Secure File Transfer Protocol)—A new protocol that provides a method to connect to hosted websites in a more secure manner to preclude unauthorized access or interception of online content.

• FTP over SSL/TLS (implicit encryption)—A secure FTP method that requires all clients of the FTPS server be aware that SSL is to be used on the session. It is incompatible with non-FTPS-aware clients.

• FTP over SSL/TLS (explicit encryption)—A legacy-compatible, secure FTP method where FTPS-aware clients can invoke security with an FTPS-aware server without breaking overall FTP functionality with non-FTPS-aware clients.

• Local/Network—A local or network connection is most frequently used with an intermediate web server, called a staging server. Files from the staging server are eventually published to an Internet-connected web server.

• WebDav (Web Distributed Authoring and Versioning)—A web-based system also known to Windows users as Web Folders and to Mac users as iDisk.

• RDS (Remote Development Services)—Developed by Adobe for ColdFusion and primarily used when working with ColdFusion-based sites.

The FTP engine was completely rebuilt in CS6. Dreamweaver now can upload larger files faster and more efficiently, allowing you to return to work more quickly. In the next exercises, you’ll set up a remote site using the two most common methods: FTP and Local/Network.

Setting up a remote FTP site

The vast majority of web developers rely on FTP to publish and maintain their sites. FTP is a well-established protocol, and many variations of the protocol are used on the web—most of which are supported by Dreamweaver.

1. Launch Adobe Dreamweaver CS6.

2. Choose Site > Manage Sites.

3. When the Manage Sites dialog box appears, you will see a list of all the sites that you may have defined. If more than one is displayed, make sure that the current site, DW-CS6, is chosen. Choose Edit.

4. In the Site Setup For DW-CS6 dialog box, click the Servers category.

The Site Setup dialog box allows you to set up multiple servers, so you can test several types of installations, if desired.

5. Click the Add New Server icon. In the Server Name field, enter GreenStart Server.

6. From the Connect Using pop-up menu, choose FTP.

7. In the FTP Address field, type the URL or IP (Internet Protocol) address of your FTP server.

If you contract a third-party service as a web host, you will be assigned an FTP address. This address may come in the form of an IP address, such as 192.168.1.000. Enter this number into the field exactly as it was sent to you. Frequently, the FTP address will be the name of your site, such as ftp.green-start.org. Dreamweaver doesn’t require you to enter the “ftp” into the field.

8. In the Username field, enter your FTP user name. In the Password field, enter your FTP password.

Password fields are usually case-sensitive, and so may be the Username field; be sure you enter them correctly.

9. In the Root Directory field, type the name of the folder that contains documents publicly accessible to the web, if any.

Some web hosts provide FTP access to a root-level folder that might contain non-public folders—such as cgi-bin, which is used to store Common Gateway Interface (CGI) or binary scripts—as well as a public folder. In these cases, type the public folder name—such as public, public_html, www, or wwwroot—in the Root Directory field. In many web host configurations, the FTP address is the same as the public folder, and the Root Directory field should be left blank.

10. Select the Save option if you don’t want to re-enter your user name and password every time Dreamweaver connects to your site.

11. Click Test to verify that your FTP connection works properly.

Dreamweaver displays an alert to notify you that the connection was successful or unsuccessful.

12. Click OK to dismiss the alert.

If you received an error message, your web server may require additional configuration options.

13. Click the More Options icon to reveal additional server options.

Consult the instructions from your hosting company to select the appropriate options for your specific FTP server. The options are:

Use Passive FTP—Allows your computer to connect to the host computer and bypass a firewall restraint.

Use IPV6 Transfer Mode—Enables connection to IPV6-based servers, which use the most recent version of the Internet transfer protocol.

Use Proxy—Identifies a secondary proxy host connection as defined in your Dreamweaver preferences.

Use FTP Performance Optimization—Optimizes the FTP connection. Deselect if Dreamweaver can’t connect to your server.

Use Alternative FTP Move Method—Provides an additional method to resolve FTP conflicts, especially when rollbacks are enabled or when moving files.

14. Click the Advanced button. Select among the following options for working with your remote site:

Maintain Synchronization Information—Automatically notes which files have been changed on the local and remote sites so that they can be easily synchronized. This feature helps you keep track of your changes and can be helpful if you change multiple pages before you upload. You may want to use cloaking with this feature. You’ll learn about cloaking in an upcoming exercise. This feature is usually selected by default.

Automatically Upload Files To Server On Save—Transfers files from the local to the remote site when they are saved. This option can become annoying if you save often and aren’t yet ready for a page to go public.

Enable File Check-Out—Starts the check-in/check-out system for collaborative website building in a workgroup environment. If you choose this option, you’ll need to enter a user name for check-out purposes and, optionally, an email address. If you’re working by yourself, you do not need to select file check-out.

It is acceptable to leave any or all of these options unselected, but for the purposes of this lesson, enable the Maintain Synchronization Information option.

15. Click to save the settings in all open dialog boxes.

A dialog box appears, informing you that the cache will be re-created because you changed the site settings.

16. Click OK to build the cache. When Dreamweaver finishes updating the cache, click Done to close the Manage Sites dialog box.

You have established a connection to your remote server. If you don’t currently have a remote server, you can substitute a local testing server instead as your remote server.

Establishing a remote site on a local or network web server

If your company or organization uses a staging server as a “middleman” between web designers and the live website, it’s likely that you’ll need to connect to your remote site through a local or network web server. You can also use this type of connection to connect to the testing server you installed and configured for Lesson 13, “Working with Online Data.”

1. Launch Adobe Dreamweaver CS6.

2. Choose Site > Manage Sites.

3. When the Manage Sites dialog box appears, make sure that the current site, DW-CS6, is chosen. Click Edit.

4. In the Site Setup For DW-CS6 dialog box, select the Servers category.

If you installed and configured a testing server in Lesson 13, it will be displayed in the server list. A check mark will appear under the Testing column. To use this server as the remote server, you simply select the Remote option.

5. If you have a testing server already set up in the dialog box, select the Remote option.

If you haven’t set up a testing server yet, you will need to first install and configure a local web server. For detailed information about installing and configuring a local web server, see Lesson 13 or check out the following links:

• Apache/ColdFusion—http://tinyurl.com/setup-coldfusion

• Apache/PHP—http://tinyurl.com/setup-apachephp

• IIS/ASP—http://tinyurl.com/setup-asp

Once you set up the local web server, you can use it to upload the completed files and test your remote site. In most cases, your local web server will not be accessible from the Internet or be able to host the actual website.

6. Click the Add New Server () icon. In the Server Name field, enter GreenStart Local.

7. From the Connect Using pop-up menu, choose Local/Network.

8. In the Server Folder field, click the Browse () icon. Select the local web server’s HTML folder, such as C:wampwwwDW-CS6.

9. In the Web URL field, enter the appropriate URL for your local web server, such as http://localhost:8888/DW-CS6 or http://localhost/DW-CS6.

10. Click the Advanced button, and, as with the actual web server, select the appropriate options for working with your remote site: Maintain Synchronization Information, Automatically Upload Files To Server On Save, and/or Enable File Check-Out.

Although it is acceptable to leave all three of these options unselected, for the purposes of this lesson select the Maintain Synchronization Information option.

11. If you’d like to use the local web server as the testing server too, select the server model in the Advanced section of the dialog box.

12. Click Save to complete the remote server setup.

13. In the Site Setup For DW-CS6 dialog box, select Remote. If you desire to use the local server as a testing server too, select Testing. Click Save.

14. In the Manage Sites dialog box, click Done. If necessary, click OK to rebuild the cache.

Only one remote and one testing server can be active at one time. One server can be used for both roles, if desired. Before you upload files for the remote site, you may need to cloak certain folders and files in the local site.

Cloaking folders and files

Not all the files in your site root folder may need to be transferred to the remote server. For example, there’s no point in filling the remote site with files that won’t be accessed or will remain inaccessible to the website user. You may actually pay more for hosting based on how much disk space your site occupies. If you selected Maintain Synchronization Information for a remote site using FTP or a network server, you may want to cloak some of your local materials to prevent them from being uploaded. Cloaking is a feature of Dreamweaver that allows you to designate certain folders and files that will not be uploaded to or synchronized with the remote site.

Folders you don’t want to upload include Templates and Library folders. Some other non-web-compatible file types used to create your site, like Photoshop (.psd), Flash (.fla), or MS Word (.doc) files, also don’t need to be on the remote server. Although cloaked files will not upload or synchronize automatically, you may still upload them manually, if desired.

The cloaking process begins in the Site Setup dialog box.

1. Choose Site > Manage Sites.

2. Select DW-CS6 in the site list, and click Edit.

3. Expand the Advanced Settings category. In the Cloaking category, select the Enable Cloaking and Cloak Files Ending With options.

The field below the check boxes should display the extensions .fla and .psd.

4. Insert the cursor after .psd and insert a space. Type .doc .txt .rtf.

Be sure to insert a space between each extension. Because these file types don’t contain any desired web content, adding their extensions here will prevent Dreamweaver from uploading and synchronizing these file types automatically.

5. Click Save. Dreamweaver may prompt you to update the cache. Click OK to update the cache. Then, click Done to close the Manage Sites dialog box.

You can also cloak specific files or folders manually.

6. Open the Files panel and click the Expand button to fill the workspace. If you are using the Jumpstart method, skip steps 7 and 8. You should not have any lesson folders in your workflow.

Note all the lesson folders. These folders contain a great deal of duplicative content that is unnecessary on the remote site.

7. Right-click the lesson01 folder. From the context menu, select Cloaking > Cloak.

8. Repeat step 7 for each of the remaining lesson folders.

Templates and Library folders are not needed on the remote site because your webpages do not reference these assets in any way. But if you work in a team environment, it may be handy to upload and synchronize these folders so that each team member has up-to-date versions of each on their own computers. For this exercise, let’s assume you work alone.

9. Apply cloaking to the Templates folder.

A dialog box appears, warning that “Cloaking template or library files will only affect put or get commands, not any batch site operation.”

10. Click OK.

11. Repeat steps 9 and 10 to cloak the Library folder.

Using the Site Setup dialog box and the Cloaking context menu, you cloaked file types, folders, and files. The synchronization process will ignore cloaked items.

Wrapping things up

Over the last 14 lessons, you have built an entire website from scratch, including dynamic applications and interactive content, but there are a few loose strings you need to tie up. Before you publish your site, you’ll need to create one important file and make some crucial updates to your site navigation.

Creating a home page

The file you need to create is one that is essential to every site: a home page. The home page is usually the first page that most users will see on your site. It is the page that loads automatically when a user enters the domain name for your site into the browser window. Since the page loads automatically, there are a few restrictions on the name and extension that you can use.

Basically, the name and extension depend on the hosting server and the type of applications running on the home page, if any. In most cases, the home page will simply be named index. But default, start, and iisstart are also used.

As you learned earlier, extensions identify the specific types of programming languages used within a page. A normal HTML home page will use an extension of .htm or .html. Extensions like .asp, .cfm, and .php, among others, are required if the home page contains any dynamic applications specific to that server model. You may still use one of these extensions—if they are compatible with your server model—even if the page contains no dynamic applications or content. Be careful—in some instances, using the wrong extension may prevent the page from loading altogether. Whenever you’re in doubt, use .html, because it’s supported in all environments.

The specific home page name or names honored by the server are normally configured by the server administrator and can be changed, if desired. Most servers are configured to honor several names and a variety of extensions. Check with your IS/IT manager or web server support team to ascertain the recommended name and extension for your home page.

1. Create a new file from the site template. Save the file as index.html. Or, use a filename and extension compatible with your server model.

2. Open lesson15 > resources > home.html.

3. Insert the cursor anywhere in the content. Select the <article> tag selector. Copy all the content and replace the <article> element in the MainContent region of the home page you created in step 1. Apply the class .content to the new <article> element.

4. In the sidebar, replace the image placeholder with bike2work.jpg.

5. Replace the caption placeholder with the following text: GreenStart has launched a new program to encourage Meridien residents to leave their cars at home and bike to work. Sign up and tell a friend.

6. Edit the page title to read Meridien GreenStart Association – Welcome to Meridien GreenStart.

Note the hyperlink placeholders in the MainContent region.

7. Insert the cursor in the News link. In the Property inspector, browse and connect the link to news.html.

8. Repeat step 7 with each link. Connect the links to the appropriate pages in your site root folder.

9. Save and close all files.

The home page is complete. Let’s assume you want to upload the site at its current state of completion even though some pages have yet to be created. This happens in the course of any site development. Pages are added and deleted over time; missing pages will be completed and uploaded at a later date.

In this scenario, you have created pages for all but two links in your current navigation system: Green Club and Member Login. Development on the membership and login pages has been postponed for a short time, and the links must be removed. Additionally, a few of the existing links in the vertical menu are currently targeting pages that have been renamed—specifically the Products and Events pages. Before you can upload the site to a live server, you should update the out-of-date links and remove the dead ones.

Updating links

All the out-of-date links are contained in the vertical menu, which is currently part of the site template. You can update the entire site by editing the template and saving the changes.

1. Open the site template.

This template should control all your current site pages.

2. Insert the cursor in the Green Products link. The page is linked to products.html, which doesn’t exist. In the Property inspector Link field, browse to the site root folder, and select products.php, which you created in Lesson 14, “Building Dynamic Pages with Data.”

3. Insert the cursor in the Green Events link. Link to the new dynamic Events page you created in Lesson 14. Use the Property inspector for the Spry menu bar to update the links for 2012-2013 Events Calendar and 2012-2013 Class Schedule. Change the .html extension to .php.

4. Insert the cursor in the Green Club link. Click the <li> tag selector and press Delete.

By deleting the parent element, both the Green Club and Member Login links are removed. You can re-create these links at a later date, if and when these pages are developed.

5. Save the template. Dreamweaver will prompt you to update the site. Click Update.

The Update Pages dialog box appears, reporting what pages were and were not updated. If you do not see the report, click the Show Log option.

6. Click the Close button. Close the template.

The vertical navigation menu has been updated throughout the site, and your pages are now ready to upload—almost.

Putting your site online

For the most part, the local site and the remote site are mirror images, containing the same HTML files, images, and assets in identical folder structures. When you transfer a webpage from your local site to your remote site, you are publishing, or putting, that page. If you put a file stored in a folder on your local site, Dreamweaver transfers the file to the equivalent folder on the remote site. It will even automatically create the remote folder, if necessary.

Using Dreamweaver, you can publish anything—from one file to a complete site—in a single operation. When you publish a webpage, by default Dreamweaver asks if you would also like to put the dependent files, too. Dependent files are the images, CSS, Flash movies, JavaScript files, server-side includes, and all other files necessary to complete the page. Dreamweaver also automatically puts all the dependent files in the proper remote folders, matching their locations on your local site. If a folder doesn’t exist on the remote server, Dreamweaver will create it. The same is true when you download files.

You can upload one file at a time or the entire site at once.

1. Open the Files panel and click the Expand () icon, if necessary.

2. Click the Connect To Remote Server () icon to connect to the remote site.

If your remote site is properly configured, the Files panel will connect to the site and display its contents on the left half of the Files panel. When you first upload files, the remote site may be empty or mostly empty. If you’re using your testing server for your remote site, you may see the Connections folder and perhaps one or more files that were tested in Lesson 14. If you are connecting to your Internet host, specific files and folders may appear that were created by the hosting company. Do not delete these items unless you check to see whether they are essential to the operation of the server or your own applications.

3. In the local file list, select index.html. On the Document toolbar, click the Put () icon.

By default, Dreamweaver will prompt you to upload dependent files. If a dependent file already exists on the server and your changes did not affect it, you can click No. Otherwise, for new files or files that have had any changes you should click Yes. Dreamweaver will then upload images, CSS, JavaScript, server-side includes (SSIs), and other dependent files needed to properly render the selected HTML file.

You can also upload multiple files or the entire site.

4. Right-click the site root folder for the local site. From the context menu, choose Put.

A dialog box appears, asking you to confirm that you want to upload the entire site.

5. Click OK.

Dreamweaver re-creates your local site structure on the remote server. Note that none of the cloaked lesson folders were uploaded. Dreamweaver will automatically ignore all cloaked items when putting a folder or an entire site. If desired, you can manually select and upload individually cloaked items.

6. Right-click the Templates folder and choose Put.

Dreamweaver prompts you to upload dependent files for the Templates folder.

7. Click Yes to upload dependent files.

The Templates folder is uploaded to the remote server. Note that the remote Templates folder displays a red slash indicating that it is cloaked, too. At times, you will want to cloak local and remote folders to prevent these files from being replaced or accidentally overwritten. A file that is cloaked will not be uploaded or downloaded automatically. You will have to select any specific files and perform the action manually.

The opposite of the Put command is Get. The Get command downloads any selected file or folder to the local site. You can get any file from the remote site by selecting it in the Remote or Local pane and clicking the Get () icon. Alternatively, you can drag the file from the Remote pane to the Local pane.

8. Use a browser to connect to the remote site on your network server or the Internet. Type the appropriate address in the URL field—depending on whether you are connecting to the local web server or the actual Internet site—such as http://localhost/DW-CS6 or http://www.green-start.org.

The GreenStart site should appear in the browser. Click to test the hyperlinks to view each of the completed pages for the site. Once the site is uploaded, it is an easy task to keep it up to date. As files change, you can upload them one at a time or synchronize the whole site with the remote server. Synchronization is especially important in workgroup environments where files are changed and uploaded by several individuals.

Synchronizing local and remote sites

Synchronization in Dreamweaver is used to keep the files on your server and your local computer up to date. It’s an essential tool when you work from multiple locations or with one or more coworkers. Used properly, it can prevent you from accidentally uploading or working on out-of-date files.

At the moment, the local and remote sites are identical. To better illustrate the capabilities of synchronization, let’s make a change to one of the site pages.

1. Open about_us.html.

2. In the main heading, select the text Green in the name GreenStart. Apply the CSS .green class to this text.

3. Apply the CSS .green class to each occurrence of the word green anywhere on the page.

4. Save and close the page.

5. Open and expand the Files panel. Click the Synchronize () icon in the Document toolbar.

The Synchronize Files dialog box appears.

6. From the Synchronize menu, choose the option Entire ‘DW-CS6’ Site. From the Direction menu, choose the Get And Put Newer Files option.

Choose specific options in this dialog box that meet your needs and workflow.

7. Click Preview.

The Synchronize dialog box appears, reporting what files have changed and whether you need to get or put them. Since you just uploaded the entire site, only the file about_us.html should appear in the list, which indicates that Dreamweaver wants to put it to the remote site.

8. Click OK to put the file.

If other people access and update files on your site, remember to run synchronization before you work on any files to be certain you are working on the most current versions of each file in your site.

In this lesson, you set up your site to connect to a remote server and uploaded files to that remote site. You also cloaked files and folders and then synchronized the local and remote sites.

Congratulations! You’ve designed, developed, and built an entire website and uploaded it to your remote server. By finishing all the exercises in this book, you have gained experience in all aspects of website design and development. Now you are ready to build and publish a site of your own. Good luck!

Review questions

1. What is a remote site?

2. Name two types of file transfer protocols supported in Dreamweaver.

3. How can you configure Dreamweaver so that it does not synchronize certain files in your site root folder with the server?

4. True or false: You have to manually publish every file and associated image, JavaScript file, and server-side include that are linked to pages in your site.

5. What service does synchronization perform?

Review answers

1. A remote site is a mirror image of your local site; the remote site is stored on a web server connected to the Internet.

2. FTP (File Transfer Protocol) and Local/Network are the two most commonly used file transfer methods. Other file transfer methods supported in Dreamweaver include Secure FTP, WebDav, and RDS.

3. Cloak the files or folders for which you do not want to maintain synchronization.

4. False. Dreamweaver will automatically transfer dependent files, if desired, including embedded or referenced images, CSS style sheets, and other linked content.

5. Synchronization automatically scans local and remote sites, comparing files on both to identify the most current version of each. It creates a report window to suggest which files to get or put to bring both sites up to date, and then it will perform the update.