Chapter 4

Setting Up Sites and Servers

In This Chapter

• Making a local site
• Dreamweaver Technique: Setting Up Your Site
• Generating and saving pages
• Previewing your website
• Publishing online
• Working with Business Catalyst

Websites—especially those integrating web applications—are far more than collections of HTML documents. Every image—from the smallest navigational button to the largest background image—is a separate file that must be uploaded with your HTML page. Moreover, if you use any additional elements, such as an included script, background sound, digital video, or Java applet, these files must be transferred as well. To preview the website locally and view it properly on the Internet, you have to organize your material in a particular manner.

While you can code individual pages in Dreamweaver, for a great many of Dreamweaver’s features, you’ll need to define a site. As I describe in this chapter, each time you begin developing a new site, you define several initial parameters, including the chosen server model (provided, of course, you are creating a dynamically driven site, such as a web application). These steps lay the groundwork for Dreamweaver to properly link your local development site with a remote online site, as well as to link properly to your data sources (again, for dynamically driven sites). This chapter begins with a brief description of approaches to online design, aimed primarily at those who are just starting to create websites. The remainder of the chapter is devoted to the mechanics of setting up your site and basic file manipulation. You also learn how to connect directly to servers, without establishing a local site.

Ready to jump in and start building sites with Dreamweaver? It’s really easy to define a simple site and start designing. Here’s how:

1. Choose Site ⇒ New Site.

2. When the Site Setup dialog box opens, enter a name for your site in the Site Name field.

3. Click the folder icon next to the Local Site Folder field.

4. In the Choose Root Folder dialog box, navigate to the folder you want to contain your site and click Select (Choose).

5. When you return to the Site Setup dialog box, click Save.

That’s it! Of course, there’s a lot more you can do pertaining to sites in Dreamweaver, all of which is covered in the rest of this chapter.

Planning Your Site

Planning in web design, just as in any other design process, is essential. Not only does careful planning cut your development time considerably, but it makes it far easier to achieve a uniform look and feel for your website—making it friendlier and easier to use. This section briefly covers some of the basics of website design: what to focus on, what options to consider, and what pitfalls to avoid. If you are an established website developer who has covered this ground before, feel free to skip this section.

Even before you choose the overarching structure for your site (as discussed in the following sections), you need to address the all-important issues of message, audience, and budget.

Deciding what you want to say

If I had to pick one overriding concern for website design, it would be to answer the following question: What are you trying to say? The clearer you are about your message, the more focused your website will be. To this end, I find it useful to try to state the purpose of the website in one sentence. “Creating the coolest website on the planet” doesn’t count. Although it could be regarded as a goal, it’s too open-ended to be useful. Here are some examples of clearly stated website concepts:

• To provide the best small-business resource center focused on Adobe software
• To chronicle the world’s first voyage around the world by hot air balloon
• To advertise music lessons offered by a collective of keyboard teachers in New York City

Targeting your audience

Right behind a site’s concept in terms of importance—some would say neck and neck with it—is the site’s audience. Who are you trying to reach? Quite often, a site’s style is heavily influenced by a clear vision of the site’s intended audience. Take, for example, a small site I developed for my wife’s dance work, http://debrawannerdance.com. This site is pitched to the intended audience of folks interested in modern dance based in New York City. Hence, the site is a bit snazzy but focuses on being informative and locally oriented.

In contrast, a site that is devoted to mass-market e-commerce must work with a very different group in mind: shoppers. Everyone at one time or another falls into this category, so I am really talking about a state of mind, rather than a profession. Many shopping sites use a very straightforward page design that is easily maneuverable, comforting in its repetition—where visitors can quickly find what they are looking for and, with as few impediments as possible, buy it.

Determining your resources

Unfortunately, websites aren’t created in a vacuum. Virtually all development work happens under real-world constraints of some kind. A professional web designer is accustomed to working within a budget. In fact, the term “budget” can apply to several concepts.

First, you have a monetary budget—how much is the client willing to spend? This translates into a combination of development time (for designers and programmers), materials (custom graphics, stock photos, and the like), and ongoing maintenance. You can build a large site with many pages that pulls dynamically from an internal database and requires very little hands-on upkeep. Alternatively, you can construct a small, graphics-intensive site that must be updated by hand weekly. It’s entirely possible that both sites end up costing the same.

Second, “budget” also applies to the amount of time you can afford to spend on any given project. The professional web designer is quick to realize that time is an essential commodity. The resources needed when undertaking a showcase for yourself when you have no deadline are very different from those needed when you sign a contract on June 30 for a job that must be ready to launch on July 4.

The third real-world budgetary item to consider is bandwidth. The web, with faster Internet connections and an improved infrastructure, is slowly shedding its image as the World Wide Wait. However, users accessing the web via their wireless devices may be working with bandwidth limit, which means that webmasters must keep a steady eye on a page’s weight—how long it takes to download under the most typical modem rates. Of course, you can always decide to include that animated video masterpiece that takes 8 minutes to download on a cable modem—you just can’t expect everyone to wait to see it.

In conclusion, when you are trying to define your web page, filter it through these three ideas: message, audience, and the various faces of the budget. The time spent visualizing your web pages in these terms is time decidedly well spent.

Mapping Dynamic Pages for Web Applications

Many, if not most, web applications require more than one web page. One variation on a search engine, for example, might use the following:

• An entry page containing the form elements (text field, list boxes, and so on) that make up the search criteria.
• A results page that displays the list of items matching the search criteria; each of the items typically provides a link to a detail page and more information.
• A detail page (or pages) that provides more information—this page is linked from the results page.
• An error page, if the initial search criteria do not have any matches.

The experienced web developer maps out the structure for all the anticipated web applications in the site before beginning the building process. In addition to providing a truer picture of the work involved, mapping the required pages highlights potentially redundant pages—for example, the same error page may be used throughout the site—and pinpoints areas that would benefit from dynamic data application. The web application map can also serve as a workflow schematic that shows which pages are static HTML and could be built by an HTML designer with little or no coding experience (typically, the entry and error pages) and which pages are dynamic web pages that require data-aware designers.

Defining a Site

Now that you’ve decided on a design and mapped your site, you’re ready to set it up in Dreamweaver. When you define a site, you are telling Dreamweaver where to store your web pages locally, where to transfer them to remotely, and the style of code in which to write them. Defining a site is an essential first step.

The Site Setup dialog box offers a multi-tiered approach that allows you to define just what you need and nothing more. You can create a local site in just two steps and quickly get started designing pages with nothing more. Or, if you already know the login and other details for your web host, you can define a remote server as well. In addition, there are numerous details, such as version control, that can be specified if necessary.

Working with Site Setup

The Site Setup dialog box comprises three main categories—Site, Servers, and Version Control—and a fourth category, Advanced Settings, with a variety of site-level properties. You can set up a basic local site by accessing just the Site category.

The three main steps for fully defining a site in Dreamweaver are:

While these steps can be taken one stage at a time, the first step of defining a local folder must be taken first and is essential in Dreamweaver.

Establishing local connections

After your site is on your web server and fully operational, it consists of many files—plain HTML, style sheets, JavaScript, graphics, and other media files—that make up the individual web pages. All these associated files are kept on the remote server in one folder, with, likely, one or more subfolders. This main folder is called the remote site folder. In order for Dreamweaver to properly display your linked pages and embedded images—just as they are displayed online—the program maintains a mirror of your remote site on your local development system. This primary mirror folder on your system is known as the local site folder.

You must establish the local site folder at the beginning of a project. This ensures that Dreamweaver duplicates the complete structure of the web development site when it comes time to publish your pages to the web. One of Dreamweaver’s key site-management features enables you to select just the HTML pages for publication; Dreamweaver then automatically transfers all the associated files, creating any needed folders in the process. The mirror images of your local and remote site folders are critical to Dreamweaver’s capability to expedite your workload in this way.

To set up a local site folder in Dreamweaver, follow these steps:

1. Choose Site ⇒ New Site.

2. The Site Setup dialog box opens, as shown in Figure 4-1.

Figure 4-1: Defining a basic website is very straightforward with Dreamweaver’s Site Setup dialog box.

3. From the Site category, enter a name for your site in the Site Name text field. This is the name that appears in the Sites drop-down list and the Edit Sites dialog box.

4. Specify the folder to serve as the local site folder by either typing the pathname directly into the Local Site Folder field or clicking the folder icon to open the Choose Root Folder dialog box. Click New Folder if needed. When you’ve made your choice there, click the Select (Choose) button.

5. Click Save.

Your new site appears in the Files panel, as shown in Figure 4-2, with any files in the folder, collapsed under the site name. Any defined site can be accessed by selecting it from the list at the top of the Files panel.

Figure 4-2: Previously created folders—as well as files, if any—in the chosen local site folder appear in the Files panel after the site is set up.

While the details entered in the Site category are all you need to get started creating a local site with Dreamweaver, there are a few more settings you can specify to make working with a local site easier and customized to your liking. These settings are contained under Advanced Settings in the Local Info subcategory. You can easily modify these properties after you’ve created your site.

1. Choose Site ⇒ Manage Sites.

2. When the Manage Sites dialog box appears, make sure the site you want to modify is chosen in the list and click Edit.

3. When the Site Setup dialog box appears, expand the Advanced Settings category and choose Local Info (see Figure 4-3).

4. If your site is to have a dedicated images folder, specify it in the Default Images Folder text box. Note that your Default Images Folder can have subfolders.

Any images that you select from outside your local site folder will need to be copied to the site root. If you have a Default Images Folder established, Dreamweaver will automatically copy those files there, saving you the step of selecting it each time.

5. If you plan on using a CSS file that contains links to media query statements, enter its path in the Site-Wide Media Query File field or click the Browse For File icon to select the file.

Note: Media queries are used to change the CSS styles depending on browser width and other factors. For more information on using media queries, see Chapter 6.

6. Choose which type of links you’d prefer to use by default: Document or Site Root. If you’re unsure, leave the standard option, Document.

7. Enter the full URL for your site in the web URL text field. This field is unavailable if a remote server has already been defined.

Figure 4-3: Speed up your web page development by specifying settings in the Local info category.

When checking links for your website, Dreamweaver uses the web URL to determine whether absolute links, such as www.idest.com/dreamweaver/index.htm, reference external files or files on your site.

8. If you’d like to make sure that your links match files names, including their case, choose the Case-Sensitive Links Checking option. This option is most helpful when your site is hosted on a Unix server that relies on case-sensitive filenames.

9. For fastest performance, select the Enable Cache option. Having a site cache enables Dreamweaver to store information that makes certain key site tasks, such as link updates, run faster.

Setting Up Your Site

In this Technique, you set up a site that is used throughout this book in the other Dreamweaver Techniques. The process is simple, but essential.

1. If you haven’t already downloaded the Dreamweaver Technique Simulation files from the book’s website to your system, visit http://www.wiley.com/go/dreamweavercs6bible and download the .zip file now. Uncompress the .zip file and copy/move the resulting folder named Techniques to wherever you store, or plan to store, sites you create on your computer.

Tip: If Mac users aren’t planning on serving web pages directly from their computers, the Sites folder, located in the user’s Home folder, is a logical place to put the Techniques folder.

2. Choose Site ⇒ New Site from within Dreamweaver.

3. In the Site tab of the Site Setup dialog box, enter Techniques in the Site Name field.

4. Select the folder icon next to the Local Site Folder field.

5. In the Choose Local Root Folder dialog box, locate and select the Techniques folder; click Select (Choose) when you’re done.

6. Click OK to create the site. This doesn’t modify anything in the Techniques folder; it simply sets Dreamweaver up so that it knows where the referenced files are located.

In Dreamweaver Techniques found in subsequent chapters, you’ll be directed to open files in the Techniques site just established.

Specifying a remote server

To share your site with others—whether globally through the World Wide Web or more specifically via an intranet or other network—you can define one or more servers. A remote server is connected to the Internet and publicly accessible; files are typically transferred to a remote server via FTP (File Transfer Protocol) or SFTP (Secure File Transfer Protocol). A testing server is intended to be used for development and testing and most often is accessed through a closed network.

You’ll need various bits of information to establish a server, particularly if you post your material to a remote site via FTP. In addition to the FTP host’s name—used by Dreamweaver to find the server on the Internet—you also need, at a minimum, the username and password to log on to the server. The host’s technical support staff can provide you with this and any other necessary information.

To set up a connection to a remote server, follow these steps:

1. Choose Window ⇒ Manage Sites.

2. In the Manage Sites dialog box, select the site you want to add a remote server to and click Edit.

Tip: To open your site definition directly, double-click the site name in the Files panel.

3. In the Site Setup dialog box, choose Servers.

The Servers category screen displays all the servers currently defined and allows you to add new ones, as well as edit existing definitions, or remove any you no longer need (see Figure 4-4).

Figure 4-4: Set up and manage both remote and testing servers through the Servers category.

4. Click Add New Server, the plus sign.

5. In the Basic tab, enter how you want to identify your remote server in the Server Name field.

6. From the Connect Using list, choose the access description that applies to your site; FTP is shown in Figure 4-5:

• FTP: Select this option if you connect to your web server via File Transfer Protocol (FTP).
• SFTP: Choose this option to connect using Secure File Transfer Protocol (SFTP).
• FTP Over SSL/TLS (Implicit Encryption): Select this option to connect using a Secure Sockets Layer (SSL) connection as part of the Transport Layer Security (TLS) protocol. The security is enabled automatically when the connection is made to an FTP server.
• FTP Over SSL/TLS (Explicit Encryption): Select this option to connect using a Secure Sockets Layer (SSL) connection as part of the Transport Layer Security (TLS) protocol. Here, the security is enabled on demand when a request is made to the FTP server.
• Local/Network: Select this option if you are running a local web server and want to store your remote site on your local drive, or if your web server is mounted as a network drive.
• WebDAV: Choose this option to store your files remotely in a Web-based Distributed Authoring and Versioning (WebDAV) system.
• RDS: Choose this option if you are working with a ColdFusion site that has Remote Development Services (RDS) enabled.

Figure 4-5: You’ll need configuration details from your web host to create an FTP connection.

7. If you selected FTP for access, complete the following options:

• FTP Address: Enter the host name of the FTP connection for your web server, which is usually in the form ftp.sitename.com. Do not include the full URL, such as ftp://ftp.sitename.com.
• Port: The default FTP port number is 21; change this value if necessary.
• Username: Enter the login name you have been assigned for access to the web server.
• Password: Enter the password necessary for you to gain access to the web server. Note that many servers are case-sensitive when it comes to usernames and passwords.
• Save: Dreamweaver automatically selects this option after you enter a password. Deselect it only if you and others access the server from the current system.
• Test: After you’ve specified all your FTP parameters, you can click the Test button to verify that Dreamweaver can connect successfully to your web server.
• Root Directory: Enter the directory in which publicly accessible documents are stored on the server. Typical host directory names are www/, public/, docs/, and public_html/. Your remote site folder is a subfolder of the host directory. If you are unsure of the exact name of the host directory, check with your web server administrator. Often, the FTP host connects to the correct directory automatically, and you can leave this field blank.
• Web URL: Enter the web address for your site.

8. If the connection test is unsuccessful, expand the More Options link and choose from the following options shown in Figure 4-6.

Figure 4-6: Additional options are available if you are unable to make an FTP connection.

• Use Passive FTP: Passive FTP establishes the FTP connection through the local software, rather than the server. Certain firewall configurations use passive FTP; check with your network administrator to see if you need it.
• Use IPv6 Transfer Mode: IPv6 (Internet Protocol version 6) is the most recent networking communication standard enjoying widespread adoption. Select this option if you need to connect to an IPv6-enabled FTP server.
• Use Proxy: This option is automatically selected if you’ve set the Preferences with the correct firewall host/port information (to access this information, click the Preferences button).
• Use FTP Performance Optimization: On by default, disable this option if the test is unsuccessful and try again.
• Use Alternative FTP Move Method: Select this option only if errors occur when transferring files or using Contribute rollbacks. The alternative method is an older, slower one and should be avoided if possible.

9. If you’re working with a team or are interested in other remote server options, click the Advanced tab to access the following choices:

• Maintain Synchronization Information: With this option selected (as it is by default), Dreamweaver automatically stores details for files in both the local and the remote sites to determine which is the most recent.
• Automatically Upload Files To Server On Save: Choose this option to store files locally and remotely simultaneously. Under most circumstances, I do not recommend that this option be selected because the risk for uploading unfinished work is too great.
• Enable File Check Out: Select this option when working with other designers or contributors on a site. If this option is enabled, three additional choices are activated:
  • Check Out Files When Opening: When selected, Dreamweaver will automatically check out any files when they are opened; if not selected, Dreamweaver asks if you’d like to check out the file or just make it viewable.
  • Check-Out Name: Enter the name you want to appear in the Files panel for checked-out files.
  • Email Address: Enter the e-mail address to associate with a checked-out file.

10. When you’re done, click Save.

11. On the Servers category screen, the new server is listed; make sure the Remote checkbox is selected and click Save once again.

As with other elements of the Site Setup dialog box, the Servers category is multi-layered with numerous options available if needed. In most situations, the best strategy is to start with the default options and modify only if necessary.

Defining a testing server

The steps for setting up a testing server are quite similar to those for defining a remote server. In fact, if you put files on your testing server by using FTP, it can be exactly the same except you select the Testing checkbox instead of the Remote checkbox in the Servers category. However, many Dreamweaver users create their testing server on a local or networked system, which can speed up the development and testing process.

To define a local testing server, follow these steps:

1. Choose Window ⇒ Manage Sites.

2. In the Manage Sites dialog box, select the site you want to add a remote server to and click Edit.

3. In the Site Setup dialog box, choose Servers.

4. Click Add New Server, the plus sign.

5. In the Basic tab, enter the name you want to identify your testing server in the Server Name field.

6. From the Connect Using list choose Local/Network (see Figure 4-7).

Figure 4-7: The only info you’ll need to create a local testing server is a folder location and an optional web URL on the Basic tab; be sure to click the Advanced tab and select your server model.

7. Click the Remote Folder icon to choose a local or networked folder for the remote testing site.

Tip: Web servers running on both primary operating systems automatically recognize folders in specific locations as sites, easily located in a browser with an http://localhost/ address. If you’re on a PC, choose a subfolder within the c:inetpubwww folder; on the Mac, select a subfolder in the Sites folder located within your [username] folder.

8. In the Web URL field, enter the web address for your site, if available.

9. If you’re working with a server model such as PHP or ColdFusion, click the Advanced tab and make your choice from the Server Model list.

Available server models in the list are: ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, ColdFusion, JSP, PHP MySQL, or None. Dreamweaver creates code for ASP VBScript, ColdFusion, and PHP.

10. Click Save to return to the Server category.

11. If necessary, choose the Testing checkbox.

12. Click Save.

After you’ve defined your servers, you can access them directly by choosing the one you want from the list on the top right of the Files panel, as shown in Figure 4-8.

Figure 4-8: Work with your defined server files in the Files panel.

Cloaking Site Folders

Dreamweaver supports site cloaking, which enables you to exclude (cloak) specified site folders from operations such as Put, Get, Check In/Out, Synchronize, and so on. (For a full list of cloaked operations, see the following paragraphs.) The site cloaking feature can save you a significant amount of upload/maintenance time. Suppose that you’re working on a site that contains several dozen large MP3 files, all stored in a folder named mp3s. You can cloak the mp3s folder, so that when you put (upload) your site files at the end of the day, you don’t end up re-putting all those MP3 files, which most likely haven’t changed, anyway.

Cloaking excludes cloaked folders from the following operations:

• Put, Get
• Check In, Check Out
• Reports
• Select Newer Local, Select Newer Remote
• Sitewide commands, such as Check Links Sitewide and Find And Replace Entire Site
• Synchronize
• Asset panel contents
• Template and library updating

Cloaking and uncloaking site folders is a breeze. Follow these steps:

To uncloak all site folders (and files), choose Site ⇒ Cloaking ⇒ Uncloak All from the panel menu or the pop-up context menu.

Figure 4-9: You can easily cloak or uncloak your site folders.

Managing Site Info

You can change any of the information associated with your local site folders by choosing Site ⇒ Manage Sites (see Figure 4-10). Select the site you want to modify from the Manage Sites dialog box and click the Edit button; you see the corresponding information, which you can edit.

After your participation in a project has ended, you can remove the site from your list. In the Edit Sites dialog box, choose the site you want to remove, and click the Remove button. Note that this action removes the site only from Dreamweaver’s internal site list; it does not actually delete any files or folders from your hard drive.

Figure 4-10: Create new sites, edit existing ones, or remove unwanted ones with the Manage Sites dialog box.

In addition to editing existing site details, you can also use the Manage Sites dialog box to start a new Dreamweaver site or import the setup information for a previously created site.

Creating and Saving New Pages

You’ve considered message, audience, and budget issues. You’ve chosen a design. You’ve set up your site and its address. All the preliminary planning is completed, and now you’re ready to really rev up Dreamweaver and begin creating pages. This section covers the basic mechanics of opening and saving web pages during development.

Starting Dreamweaver

Start Dreamweaver as you would any other program. Double-click the Dreamweaver program icon, or single-click if you are using Internet Explorer’s Desktop Integration feature in Windows or if you have Dreamweaver’s icon in your Dock on OS X. After the splash screen, Dreamweaver opens with the Welcome screen, which lists 10 of your previously opened documents and also offers a full range of new document types. Choose HTML from the Welcome screen to create a new blank page. This page is created from the Default.html file found in Dreamweaver’s Configuration/DocumentTypes/NewDocuments folder. Of course, you may want to replace the original Default.html file with one of your own—perhaps with your copyright information. All your blank pages are then created from the template that you’ve designed.

Opening existing files

To open an existing file that belongs to a site you’ve defined in Dreamweaver, select the site in the Files panel and double-click the file icon. Recently opened files, regardless of their origin, are available through the Welcome screen or from the File ⇒ Open Recent menu.

To open an existing file that does not belong to a site defined in Dreamweaver—or that was created in a different program—choose File ⇒ Open or Ctrl+O (Command+O), and choose the file from the File Open dialog box.

Opening a new file

You can work on as many Dreamweaver files as your system memory can sustain. When you choose File ⇒ New or the keyboard shortcut Ctrl+N (Command+N) and select a file type from the New Document dialog box, Dreamweaver opens a new blank file of your specified type. (For more on this, see the section “Creating New Documents” later in this chapter.)

Each time you open a new file, Dreamweaver temporarily names the file Untitled-n, where n is the next number in the sequence. This naming convention prevents you from accidentally overwriting a new file opened in the same session.

HTM,­HTML,­SHTM,­SHTML,­HTA,­HTC,­XHTML,­STM,­SSI,­JS,­AS,­ASC,­ASR,­XML,­XSL,­XSD,­DTD,

    XSLT,­RSS,­RDF,­LBI,­DWT,­ASP,­ASA,­ASPX,­ASCX,­ASMX,­CONFIG,­CS,­CSS,­CFM,­CFML,

    CFC,­TLD,­TXT,­PHP,­PHP3,­PHP4,­PHP5,­JSP,­WML,­TPL,­LASSO,­JSF,­VB,­VBS,­VTM,­VTML,

    INC,­SQL,­JAVA,­EDML,­MASTER,­INFO,­INSTALL,­THEME,­CONFIG,­MODULE,

    PROFILE,ENGINE:All Documents

HTM,HTML,HTA,HTC,XHTML:HTML Documents

SHTM,SHTML,STM,SSI,INC:Server-Side Includes

JS,JSON:JavaScript Documents

XML,DTD,XSD,XSL,XSLT,RSS,RDF:XML Files

LBI:Library Files

DWT:Template Files

CSS:Style Sheets

ASP,ASA:Active Server Pages

ASPX,ASCX,ASMX,CS,VB,CONFIG,MASTER:Active Server Plus Pages

CFM,CFML,CFC:ColdFusion Templates

AS:ActionScript Files

ASC:ActionScript Communication Files

ASR:ActionScript Remote Files

TXT:Text Files

PHP,PHP3,PHP4,PHP5,TPL,PHP-DIST,PHTML:PHP Files

LASSO:Lasso Files

JSP,JST:Java Server Pages

JSF:Fireworks Script

TLD:Tag Library Descriptor Files

JAVA:Java Files

SQL:SQL Files

ASX:Windows Media Advanced Stream Redirector

WML:WML Files

EDML:EDML Files

VBS:VBScript Files

VTM,VTML:VTML Files

Saving your file

Saving your work is very important in any computer-related task, and Dreamweaver is no exception. To initially save the current file, choose File ⇒ Save or use the keyboard shortcut Ctrl+S (Command+S). The Save dialog box opens; you can enter a filename and, if you wish, a different path.

By default, all HTML files are saved with an .html filename extension. Different file formats are saved with different extensions; XML documents, for example, are stored with an .xml extension. To save your file with another extension, such as .shtml or .xhtml, change the Save As Type option to the specific file type and then enter your full filename with the extension.

Closing the file

When you’re done working on a file, you can close it by choosing File ⇒ Close or by using the keyboard shortcut Ctrl+W (Command+W). If you’ve made any changes to your file since last saving it, Dreamweaver prompts you to save it. Click Yes to save the file or No to close it without saving your changes.

Quitting the program

When you’re finished working for the day—or, more often, the late, late night—you can close Dreamweaver by choosing File ⇒ Exit (File ⇒ Quit) or by using the standard keyboard shortcut Ctrl+Q (Command+Q).

Creating New Documents

Dreamweaver provides three methods for creating new documents:

• Select your preferred document type from the Create New column of the Dreamweaver Welcome screen.
• You can use the New Document dialog box to create a new document of a type that you select from a comprehensive list, including HTML, XSLT, ActionScript, CSS, JavaScript, ASP VBScript, ColdFusion, and PHP. If you work with multiple document types, this is the way to go.
• You can create a new document of a default type that you’ve specified in the Preferences dialog box. If you work mostly with one document type—HTML, ColdFusion, or ASP, for example—this method can prove very convenient.

Using the New Document dialog box

Dreamweaver offers a wide range of starting points through the New Document dialog box: You can start off with anything from a completely blank page to the basic HTML code to a fully CSS compliant, 3-column elastic design with header and footer.

All of the layouts listed in the New Document dialog box when the Blank Page ⇒ HTML (or any of the dynamic page types) is chosen are expertly crafted with carefully commented code. Not only do these CSS layouts provide an excellent jumping off point for designs, but they also serve as a terrific learning resource.

To create a new document using the New Document dialog box, follow these steps:

1. Choose File ⇒ New to open the New Document dialog box, as shown in Figure 4-11.

2. In the New Document dialog box, select the category of new document that you want to create: Blank Page, Blank Template, Fluid Grid Layout, Page From Template, Page From Sample, or Other.

The adjoining columns and page preview change according to the New Document category selected. The following steps assume that the Blank Page category has been selected.

Note: The Fluid Grid Layout option is new to Dreamweaver CS6. To learn more about this responsive web design feature, see Chapter 10.

Figure 4-11: Choose the type of new file you want to start with through the New Document dialog box.

3. In the Page Type list, select the specific type of document you want to create: HTML, HTML Template, Library Item, and so on. The page types are grouped into static page types, which do not require an additional application server, and dynamic page types, which do.

4. From the Layout column, choose the basic page design. Select <none> for a blank HTML page. Select any layout to view the illustrated preview and read a brief description of the design. Two key terms are used to identify layout characteristics:

• Fixed: Notes a column or other page component where the width is defined in pixels. A fixed width layout does not expand or contract.
• Liquid: Indicates a column or other page component where the width is defined as a percentage, so the column or page component expands or contracts depending on the width of your browser window, as shown in Figure 4-12.

Figure 4-12: This liquid design adjusts to changes in browser window width.

5. If desired, select a different option from the Document Type (DTD) list. Note that this setting does not stick; you’ll need to reset it each time or select a new DTD option in the New Document category of Preferences.

6. If you’re working with a CSS-based layout, choose where you would like to store the predesigned CSS layout rules from the Layout CSS list. Choose Add To Head if you’d like to embed the rules in the newly created document, Create A New File to put them in a new external CSS document, or Link To Existing File to append the rules to an existing CSS document.

7. If you’d like to link or import one or more existing CSS external style sheets, click the Attach Style Sheet icon in the Attach CSS File section. You can attach as many external CSS style sheets as you’d like. If you’d like to delete one from the list, select it and click Remove (the trash can icon).

8. Click Create to create a new, blank document of the selected category/type.

If you want to create a new document based on a custom template, use the Page From Template—rather than the Blank Page—category. For more information on creating and using templates, see Chapter 28.

Creating a new default document

If you often create one type of document—HTML or ColdFusion files, for example—you can take advantage of Dreamweaver’s default document feature to save yourself some document creation time and trouble. By using the techniques described in this section, you can open a new document of your default type (HTML, ColdFusion, and so on) with one quick keyboard shortcut—in other words, without having to work your way through the New Document dialog box.

To create a new default document, follow these steps:

Previewing Your Web Pages

When using Dreamweaver or any other web authoring tool, it’s important to frequently check your progress in one or more browsers. Dreamweaver’s Document window offers a near-browser view of your web page, but because of the variations among the different browsers, it’s imperative that you preview your page early and often. Dreamweaver offers you easy access to a maximum of 20 browsers—and they’re just a function key away.

Previewing in your browsers

You add a browser to your preview list by choosing File ⇒ Preview in Browser ⇒ Edit Browser List or by choosing the Preview In Browser category from the Preferences dialog box. Both actions open the Preview In Browser category of the Preferences. The steps for editing your browser list are described in detail in Chapter 3. Here’s a brief recap:

Figure 4-13: It’s best to leave the Name field blank until you choose the browser executable in the Application field; Dreamweaver automatically fills in the name and removes any previously entered value.

After you add one or more browsers to your list, you can preview the current page in these browsers. Choose File ⇒ Preview in Browser ⇒ BrowserName, where BrowserName indicates the particular program. If the Preview using Temporary File option is selected in Preferenes, Dreamweaver saves the page to a temporary file, starts the browser, and loads the page; if the option is not selected, the browser loads the current page.

In order to view any changes you’ve made to your web page under construction, you must select the Preview In Browser menu option again (or press one of the function keys for primary/secondary browser previewing, described in the following paragraph). Clicking the Refresh/Reload button in your browser does not load in any modifications. The temporary preview files are deleted when you quit Dreamweaver.

You can also use keyboard shortcuts to preview two different browsers by pressing a function key. Press F12 (Option+F12) to preview the current Dreamweaver page in your primary browser, and Ctrl+F12 (Command+F12) to preview the same page in your secondary browser. These are the primary and secondary browser settings you establish in the Preview In Browser Preferences panel, explained in Chapter 3.

You can easily reassign your primary and secondary browsers. Go to the Preview In Browser Preferences category, select the desired browser, and select the appropriate checkbox to designate the browser as primary or secondary. In the list of browsers, you see the indicator of F12 (Option+F12) or Ctrl+F12 (Command+F12) appear next to the browser’s name.

Displaying pages with BrowserLab

In addition to checking your web page output on a variety of browsers on your system, it’s also a good idea to preview the page on other platforms. If you’re designing on a Macintosh, try to view your pages on a Windows system, and vice versa. Watch out for some not-so-subtle differences between the two environments in terms of screen resolution. If you don’t have easy access to another operating system and a wide range of browsers, Adobe BrowserLab can come to your rescue.

It’s important to understand that BrowserLab displays an image of your web page, not the page itself. Although you can scroll the window to see the entire page, no interactivity—such as links, hover states, or JavaScript effects—is possible. However, you can trigger any JavaScript in Dreamweaver’s Live View, freeze JavaScript by pressing F6, and then preview the result in BrowserLab.

To preview a Dreamweaver page in BrowserLab, follow these steps:

Once you are logged in, the selected page will render in BrowserLab with the default browser and operating system configuration, as shown in Figure 4-14. Viewing a single page on BrowserLab is known as 1-up View. You can change views by selecting from the list in the upper-left corner of the BrowserLab window. Available options are:

• 1-up View: Displays a single browser/OS configuration.
• 2-up View: Displays two browser/OS configurations side by side (see Figure 4-15).
• Onion skin View: Shows two browser/OS configurations, one on top of another with a variable transparency so you can compare pages on the pixel level. A slider at the top of the page controls the transparency of the two rendered pages.
• Show/Hide Rulers: Displays rulers for any rendered pages.

Figure 4-14: BrowserLab can render your web pages in a dozen browser/OS combinations.

Figure 4-15: Easily compare the same page on two different browser/OS configurations with 2-up View.

BrowserLab allows you to customize the browser/OS configurations you’d like to incorporate in your testing. Click Browser Sets and choose the combinations you want to use from the Available Browsers list: Your chosen browsers will appear in the column on the right. You can reorder the browsers by simply clicking and dragging them. Any number of custom browser sets can be created in this manner.

Putting Your Pages Online

The final phase of setting up your Dreamweaver site is publishing your pages to the web. When you begin, this publishing process is up to you. Some web designers wait until everything is absolutely perfect on the local development site and then upload everything at once. Others like to establish an early connection to the remote site and extend the transfer of files over a longer period of time.

I fall into the latter camp. When I start transferring files at the beginning of the process, I find that I catch my mistakes earlier and avoid having to make massive changes to the site after everything is up. For example, in developing one large site, I started out using mixed-case filenames, as in ELFhome.html. After publishing some early drafts of a few web pages, however, I discovered that the host had switched servers; on the new server, filenames had to be entirely lowercase. Had I waited until the last moment to upload everything, I would have been faced with an unexpected and laborious search-and-replace job.

Transferring with FTP

After you’ve established your local site folder—and you’ve included your remote site’s FTP information in the setup—the actual publishing of your files to the web is a very straightforward process.

Putting and getting files to and from your server, while easy, can be incredibly time-consuming. Dreamweaver frees its users from the drudgery of waiting for files to transfer through its background FTP feature. Uploading and retrieving files is a separate computer process in Dreamweaver, distinct from working in Design and Code view. When you initiate a publishing event, the Background File Activity dialog box with a small progress bar appears, as shown in Figure 4-16. You can dismiss the dialog box by clicking Hide; when hidden, file activity can be seen in the bottom of the Files panel. An ongoing log is shown when you click Details, and can be saved when the transfers have been completed by clicking Save Log.

Figure 4-16: Dreamweaver transfers files through a background FTP process so you can continue working while files are being published.

To transfer your local web pages to an online site, follow these steps:

1. Choose Window ⇒ Files or press F8 to open the Files panel, and select the desired site from the Site drop-down list.

2. In the Files panel, click the Connect button. (You may need to connect to the Internet first.) Dreamweaver displays a message box showing the progress of the connection.

3. If you didn’t enter a password in the Remote Info category when you defined the site, or if you entered a password but didn’t opt to save it, Dreamweaver asks you to type in your password. When the connection is complete, the directory listing of the remote site appears in the Files panel.

4. Click the Expand/Collapse button to expand the Files panel into its two-pane view: Remote pane on the left, Local pane on the right. In the Local pane (green icons), select the folder(s) and file(s) you want to upload—or, to upload the entire site, select the site folder (at the top of the list)—and then click the Put File(s) button, as shown in Figure 4-17.

5. If Dreamweaver asks if you would like to move the dependent files as well, click Yes to transfer all embedded graphics and other objects, or No if you’d prefer to move these yourself. You can also select the Don’t Ask Me Again checkbox to make transfers of dependent files automatic in the future.

Figure 4-17: Use the Put File(s) button in the Files panel to transfer files, folders, and entire sites.

6. The Background File Transfer dialog box appears. Click Hide to hide the dialog box and continue working in Dreamweaver; click Details to see the files being transferred. If it’s hidden, you can restore the Background File Transfer dialog box by clicking the globe icon at the bottom of the Files panel.

7. After each file has successfully transferred, Dreamweaver places a checkmark next to its icon—provided that File Check In/Out is enabled in the site’s Remote Info category.

8. When you finish transferring your files, click the Disconnect button.

9. If you’d like to store the log file, display the Background File Transfer dialog box (if necessary) and click Save Log.

Remember that the only files you have to highlight for transfer to the remote site are the HTML files. As noted previously, Dreamweaver automatically transfers any dependent files (if you allow it), which means that you’ll never forget to move a GIF again. (Nor will you ever move an unnecessary file, such as an earlier version of an image, by mistake.) Moreover, Dreamweaver automatically creates any subfolders necessary to maintain the site’s integrity. Combine these two features to save substantial time and worry.

Now you have made your site a reality, from the planning stages to the local site folder and onto the web. Congratulations—all that’s left is to fill those pages with insightful content, amazing graphics, and wondrous code.

Using the FTP Log panel

Like all data transfers on the Internet, FTP file transfers sometimes go awry: Servers are busy or down, file/directory permissions are improperly set, passwords are misspelled, and so on. If you run into an FTP transfer problem with your Dreamweaver Put File(s) or Get File(s) command, you can use the FTP Log panel to find out exactly what went wrong.

The FTP Log panel displays all your FTP file-transfer activity. To display the FTP Log panel, first choose Windows ⇒ Results or use the keyboard shortcut F7. Then, select the FTP Log category from the Results panel.

FTP logs may seem complex and indecipherable, but the information they contain is invaluable for troubleshooting FTP errors. Figure 4-18, for example, displays the FTP log that results from Putting (uploading) a file to a remote server.

Figure 4-18: The FTP Log generates a blow-by-blow description of actions taken.

Getting Online with Business Catalyst

Business Catalyst is a website hosting service managed by Adobe that offers web developers and store owners a one-stop shop for full-featured online businesses. When you sign up for a Business Catalyst account, you’re still able to design your site exactly the way you want to, you just don’t have to do any of the coding in order to add application functionality such as e-mail auto-responders, search and result pages, and event registration—even a completely functioning online store. Business Catalyst makes it easy to track your site visitors, customers, and sales with built-in reporting tools.

Initially, the Business Catalyst panel displays a Get Started button with a link to an informational website. If you click Get Started, you’re presented with a dialog box that allows you to sign up for a new account, or—if you’re already registered—log in to your account. Business Catalyst offers new users a free site for 30 days so you can try out its system.

Once you set up a site, the Business Catalyst panel displays a list of available modules, as well as the data settings for a selected module. The Business Catalyst modules are the real power tools of the system and with them, you can easily add functionality for everything from blogs to e-commerce, as shown in Figure 4-19. The Business Catalyst service is great for web designers who need to create sites with server-side functionality that is beyond their level of technical expertise.

Figure 4-19: Drag-and-drop robust functionality through the Business Catalyst modules.

Creating a new site with Business Catalyst

One of the great advantages of working with Business Catalyst is how fast you can get a new site up and running—without any additional cost! Business Catalyst allows you to set up a new site for free using its templates or your own designs; all you need is an Adobe ID.

To set up a new Business Catalyst site, follow these steps:

1. Choose Site ⇒ New Business Catalyst Site.

2. When the Business Catalyst dialog box opens, shown in Figure 4-20, complete the following entries:

• Site Name: Enter the name for your site.
• URL: Enter the name of the BusinessCatalyst.com subdomain.
• Country: Choose the country your site is based in.
• Data Center: Select the location of the hosting center closest to your country from the three options: United States, European Union, and Australia.
• Time Zone: Select the time zone for your site.

3. If you want to work on your site locally in Dreamweaver, check the Automatically Download The Entire Business Catalyst Site Locally option.

4. Click Create Free Temporary Site.

After you’ve clicked Create Free Temporary Site, the site will be set up on the designated server.

Figure 4-20: Quickly set up a free Business Catalyst site to try out its features or highlight your own work.

5. When the Select Folder dialog appears, choose a location for your new site. You can select an existing folder or create a new one.

6. In the Enter Password dialog box, enter a password for the site and choose the Remember Password option to avoid having to re-enter the password every time you open the site.

Once the site set-up is complete, Dreamweaver gets all the initial files for your new site and, if you selected the Automatically Download The Entire Business Catalyst Site Locally option, copy them to your local site root. You can open up the index.htm file in Live View and see the “Coming Soon” graphic on your new home page (Figure 4-21).

Figure 4-21: A new Business Catalyst site includes a range of layouts and module templates, as well as a Coming Soon temporary home page.

Your new site will also be listed in the Manage Sites dialog box and designated as a Business Catalyst (versus a Dreamweaver) site, as shown in Figure 4-22. You can use the Manage Sites dialog box to view, modify, or export your Business Catalyst site settings just as you could any standard Dreamweaver site. If you choose to edit your site settings, you’ll notice that a server has been set up to handle both testing and remote services.

Figure 4-22: Business Catalyst sites are easily identified in the Manage Sites dialog box.

Working with your Business Catalyst site online

After you’ve created your Business Catalyst site, you’ll also receive an e-mail, sent to the account registered with your Adobe ID, that provides site details such as public and administrative URLs. You can log in to the site with your Adobe ID and password.

Your initial view of the administrative side of Business Catalyst is accessible by two tabs, one for Development and the other, Business (Figure 4-23). The Business Dashboard shows an overview of visitors, as well as online sales, inquiries, forum posts, and much more. You can replicate the business owner’s experience of working with Business Catalyst by choosing from the main options along the top navigation: Manage Site, Site Editor, and File Manager. A fourth option, Partner Portal, is available to you as a Business Catalyst partner. The navigation on the left changes according to the main option selected.

Figure 4-23: Clients can get a quick take on how a site is doing through the Development tab of the Business Catalyst dashboard.

The Manage Site section allows authorized users to modify pages, set up e-mail campaigns, and even set up products for sale in the online store. Business owners can also view reports on site activity and e-mail campaigns.

The Site Editor opens the existing site for direct in-browser modification using an Adobe developed system called InContext Editing. With the Site Editor, you can navigate to any page on the site and, unless the content is locked, make edits to the text or images right in the browser (Figure 4-24).

Figure 4-24: With Business Catalyst’s Site Editor, your clients can make changes online through their browser.

The File Manager (in Alpha at the time of this writing) provides full-featured access to all your site files in either Code or Design view. Files can be uploaded, created, or renamed, as well as edited. The File Manager’s Code view provides color coding and formatting similar to Dreamweaver’s. You can also use the File Manager to quickly insert or modify Business Catalyst modules for adding and controlling special functionality like blogs or ad rotators.

Integrating Business Catalyst Code in Dreamweaver

With the Business Catalyst site established, you can pretty much develop your site just as you would a standard Dreamweaver one by creating pages in HTML and CSS. However, one of the key advantages of working with Business Catalyst is the advanced functionality that can be easily integrated. The advanced functionality is contained in what Business Catalyst calls Modules.

Inserting a Module

There are currently 16 different major modules that cover everything from ad rotators to web forms (Figure 4-25). Adding any of them works pretty much the same way:

Figure 4-25: Access advanced Business Catalyst functionality from the available modules.

The inserted code is added to the page; the code is delineated with curly braces like this one for listing FAQs:

{module_faq,a,}

You can view the rendered module code by entering into Live View, previewing it in a browser, or putting the page on your remote site and viewing it through the browser.

Styling a Module’s Output

Because Business Catalyst is completely integrated with Dreamweaver, you can easily revamp the HTML layout. All of the modules come with their own layout pages that can be downloaded to your local site and modified as needed.

Module layouts are contained in the site root folder aptly named Layouts. Within the Layouts folder is a subfolder for each module. If you open any of these subfolders, you’ll see one or more HTML files. Each file contains the HTML and CSS used for rendering the output, along with any Business Catalyst specific code.

For example, let’s say I want to change the way that the FAQ output is handled. By default, when you insert an FAQ module, the initial display is of a series of questions; click on any question to see the answer and an associated comment form. If I wanted to restyle the question itself, I can open the list.html file found in the Faq folder and see that the Business Catalyst code {tag_question} is contained within a <div> tag with a class of faq-question, like this:

<div class="faq-question">{tag_question}</div>

Therefore, to add a bit of space between each question I could define a CSS rule like this:

.faq-question { padding-bottom: .8em; }

Although I could embed this new CSS rule in the list.html page, it’d be better to store it with all the other module styles in the ModuleStyleSheets.css file located at site root folder StyleSheets.

You’re not limited to modifying a module’s CSS: You can just as easily restructure its HTML. For example, the comment form displayed with the FAQ answer includes, among other fields, an optional field for entering a website URL, shown in Figure 4-26.

Figure 4-26: Access advanced Business Catalyst functionality from the available modules.

To remove the website field, you’d follow these steps:

Now, whenever the FAQ answer and comment form is displayed, the unwanted field would not be shown.

Figure 4-27: Open the HTML files within the Layouts subfolders to modify the displayed elements of a Business Catalyst module.

Summary

In this chapter, you learned some options for planning your website and what you need to do in Dreamweaver to initialize the site. As you plan your site and set up your servers, keep these points in mind:

• Put as much time into planning your site as possible. The more clearly conceived the site, the cleaner the execution.
• Set up your local site folder in Dreamweaver right away. The local site folder is essential for Dreamweaver to properly publish your files to the remote site later.
• Establish as many servers as your development process requires, whether to connect to your remote server on the web or to a local or networked testing server.
• If you are creating a web application, choose one server model per site and set it when you define your site. This step is needed so that Dreamweaver knows the type of server code to write.
• Get started quickly with any of the 18 CSS-based layouts, available through the New Document dialog box.
• Preview early, often, and with various browsers. Dreamweaver gives you quick function-key access to a primary (F12/Option+F12) and secondary (Ctrl+F12/Command+F12) browser. Check your pages frequently in these browsers and then spend some time checking your pages against other available browsers and browser versions.
• Dreamweaver also gives you the option to check your page with browsers and operating systems not available on your local system through Adobe BrowserLab. You can compare your page designs in up to two browser configurations side by side or even overlaid on top of one another.
• Establish an early connection to the web and use it frequently. You can begin publishing your local site through Dreamweaver’s Site window almost immediately.
• Dreamweaver offers a direct connection to Adobe’s robust hosting service, Business Catalyst. Once you’ve signed up to Business Catalyst, you can create and modify sites from within Dreamweaver.

In the next chapter, you learn how to use Dreamweaver to begin coding your web pages.