Dreamweaver CS5: The Missing Manual

Creating a Web Page

After you define a site, you’ll want to start building pages. Just choose File→New or press Ctrl+N (⌘-N on a Mac) to open Dreamweaver’s New Document window (see Figure 1-15). It’s a little overwhelming at first. You have so many options it’s hard to know where to start. Fortunately, when you just want to create a new HTML file, you can skip most of these options.

Figure 1-14. You can happily use Dreamweaver without ever visiting the Advanced Settings options listed in the left-hand column of the Site Setup window. The Local Info options are discussed above, and the other options are discussed elsewhere in this book: Cloaking on page 708, Design Notes on page 721, File View Columns on page 650, Contribute on page 750, Templates in Chapter 20, and Spry on on page 188.

Figure 1-15. The New Document window lets you create nearly every type of web document under the sun. Dreamweaver CS5 includes a revamped set of prepackaged CSS layouts, using the latest web design techniques. You can learn more about these “CSS Layouts” in Chapter 9.

Up To Speed: Terms Worth Knowing

During the tutorial in these pages—and, indeed, everywhere in Dreamweaver—you’ll encounter a few terms frequently heard at web designer luncheons:

Root folder. The first rule of managing a website is that every piece of the site you’re working on—web page (HTML) documents, graphics images, sound files, and so on—must sit in a single master folder on your hard drive. This folder is the root folder for your website, and because it’s on your computer it’s called the local root folder. Dreamweaver calls this your local site folder. The root (a.k.a site folder) is the master, outer, main folder—think of it as the edge of the known universe for that site: Nothing exists outside the root. Of course, to help organize your site’s files, you can include any number of subfolders within that main folder.

When you finish creating your site, you’ll move the files in that root folder onto a web server for the world to see. The folder you place your site files into on the server is called the remote root folder.

Local site. The usual routine for creating web pages goes like this: You create the page on your own computer—using a program like Dreamweaver—and then you upload it to a computer on the Internet called a web server, where your handiwork becomes available to the masses. So, it’s very common for a website to exist in two places at once, one copy on your computer and the other on the server.

The copy on your own computer is called the local site, or the development site. Think of the local site as a sort of staging ground, where you build your site, test it, and modify it. Because the local site isn’t on a web server, the public can’t see it and you can freely edit and add to it without affecting the pages your visitors see (they’re on the remote site, after all).

Remote site. When you add or update a file, you move it from your local site to the remote site. The remote, or live, site is a mirror image of the local site. Because you create the remote site by uploading your local site, it has the same folder structure as the local site, and contains the same files. Only polished, fully functional pages go online to the remote site; save the half-finished, typo-ridden drafts for your local site. Chapter 18 explains how to use Dreamweaver’s FTP features to define and work with a remote site.

(If you’re using Dreamweaver’s database features, by the way, you’ll encounter yet another term: a testing server. You’ll find the lowdown on this kind of server, which you use to test database features, on PHP)

To create a basic HTML file for a web page:

1. From the left-hand list of document categories, choose Blank Page.

   The Blank Page category lets you create a new empty document—this might be a web page or something a bit more esoteric like an XML file (see Storing Data in an XML File for more on XML), an external JavaScript file, or one of the several server-driven pages, such as a PHP file (discussed in Part Six).

   Both the Blank Template and "Page from Template” categories relate to Dreamweaver’s Template feature discussed in Chapter 20. The "Page from Sample” category lets you choose from several different files with already-created designs. It’s best to avoid these—they’re old and left over from earlier versions of the program, aren’t very attractive, and don’t use the best techniques for building a web page. Dreamweaver CS5 does ship with some useful page layouts you can access from the Blank Page category. You’ll learn about these in Chapter 10. The last category, Other, lets you create documents for different programming languages like ActionScript or Java—unless you’re a Flash or Java programmer, you probably won’t ever need these.

2. From the Page Type list, choose HTML.

   You can also create other types of documents, most of which you’ll learn more about later in this book, such as PHP for database-driven sites (see Part Six of this book), XSLT files for processing XML (Chapter 27), templates (Chapter 20), library items (Chapter 19), or CSS files (Chapter 4).

3. From the Layout list, choose “<none>”.

   “<none>” creates a blank document. The other choices (“1 column elastic, centered”, “1 column elastic, centered, header and footer”, and so on) are predesigned page layouts. These designs (not to be confused with the designs under the “Page from Sample” category) use CSS, which you’ll learn much more about starting in Chapter 4. Because CSS-based layout can be tricky, Dreamweaver includes all the code you need to create many of the most common types of page designs. You’ll learn more about this feature in Chapter 10.

4. Select a document type from the DocType menu.

   Selecting a document type identifies the type of HTML you’ll use on the page you create. It affects how Dreamweaver writes the HTML code and how a web browser understands it. Fortunately, since Dreamweaver writes all the code for you, you don’t need to worry about the subtle differences between the different document types.

   XHTML 1.0 Transitional is the normal setting in Dreamweaver, but HTML 4.01 Transitional, HTML 4.01 Strict, and XHTML 1.0 Strict are also fine choices. The transitional doc types let you use a few HTML tags and properties that have been phased out of the strict types. Most notably, transitional doc types can use the “target” property for links—a simple way to force links to open in a new browser window.

   If you don’t really understand or care about doc types, just select HTML 4.01 Transitional. But make sure you avoid None (which can force browsers to display pages in what’s called “quirks mode” and makes perfecting designs difficult) and XHTML 1.1 (which requires a special setting on your web server to work properly).

   Note

   If you don’t want to deal with the New Document window every time you create a new page, choose Edit→Preferences in Windows or Dreamweaver→Preferences on a Mac. In the Preferences dialog box, click the New Document category and then turn off the "Show New Document Dialog on Control-N” checkbox.

   While you’re at it, you can specify the type of file Dreamweaver creates whenever you press Ctrl+N (⌘-N). For example, if you usually create plain HTML files, choose HTML. But if you usually create dynamic pages (like PHP pages), choose a different type of file—PHP, for example.

   With these settings, pressing Ctrl+N (⌘-N) instantly creates a new blank document of your choosing. (Choosing File→New, however, still opens the New Document window.)

5. Click Create.

   Dreamweaver opens a new, blank web page ready for you to save and title (see Figure 1-16).

6. Choose File→Save.

   The Save As dialog box appears. You need to save the file somewhere inside the local root folder. You can save it inside any subfolder within the root folder as well.

7. Type a name for the file and then click Save.

   Make sure the name doesn’t contain spaces or any characters except letters, numbers, hyphens, and underscores, and that it ends in either .html or .htm.

   Although most operating systems let you save files with long names, spaces, and characters like #, $, and &, some browsers and servers have trouble interpreting anything other than letters and numbers.

   Furthermore, web servers rely on file extensions like .htm, .html, .gif, and .jpg to know whether a file is a web page, graphic, or some other type of file. Dreamweaver for Windows automatically adds the extension to your saved document names. But on the Mac—which lets you save files without extensions—make sure the file ends in the suffix .html or .htm when you save it.

8. At the top of the document window, click inside the Title box and then type a name for the page (see Figure 1-16).

   Every new document Dreamweaver creates has the unflattering title Untitled Document. If you do a quick search on Google for “Untitled Document”, you’ll find (at the time of this writing) 27,500,000 results (obviously there are still some people who need to pick up a copy of this book). Dreamweaver probably created most of those pages. You should change this to a descriptive title indicating the main topic of the page, like “Contact Chia Vet,” “About Chia Vet’s Chia Pet Services,” or “Technical Specifications for the Anodyne 3000 Indoor Lawn Mower.” Not only is replacing “Untitled Document” more professional, but providing a descriptive title can improve a web page’s ranking among search engines. In addition, the title appears on Google’s, Yahoo’s, and Bing’s search listings.