- What You Will Learn
- Defining a Static Site
- Passing and Using Data with Ajax
- Connecting the Country Profiles Page to HTML Data
- Styling the Spry Table
- Creating Spry Regions
- Displaying with a Spry Accordion
- Adding Images and the Country Name
- Refining Page Display Using CSS Styling and Positioning
- What You Have Learned
- Additional Spry Functionality in Dreamweaver CS4
- Additional Resources
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Defining a Static Site
The Newland Tours site, as you are inheriting it, is a static HTML site. For this reason, you can easily pull it into Dreamweaver and start working on it.
Working with websites often involves hundreds or even thousands of individual files, including web pages, images, cascading style sheets, multimedia assets, and more. These files are linked together via HTML. Unfortunately, a small typo can create ugly error messages (or ones that are indecipherable to users), and even block access to portions of your site. Dreamweaver provides many sophisticated site-management tools to help ensure the overall integrity of your site, both during development and once the site is launched. To take advantage of these features, you should first define a site—a process in which, at a minimum, you tell Dreamweaver where the site's root folder is located on your hard drive.
Defining a site has several benefits, many of which you will see quickly. It helps to prevent broken links, automatically updating files site-wide if you move or rename a file. The Site Manager also enables you to perform site-wide operations, such as Find and Replace, which greatly boosts productivity. Another key advantage of the Site Manager is that it has built-in file-uploading capabilities (including FTP), which means that you can publish your files to the Web whenever you want, with the click of a single button. You can even synchronize local files (on your hard drive) and remote files (on the Web or a staging server), to ensure that the most up-to-date versions of the files are in the right place.
In this task, you'll define a regular, static site in the Site Definition dialog, a process involving little more than giving the site a name and telling Dreamweaver where the site is stored on the local disk.
- Create a new directory called dwcs4 on your hard disk.
- Copy the newland folder (and its contents) into this new directory.
- Open Dreamweaver CS4.
- On the Start page, click the Create New Dreamweaver Site link.
- Enter Newland Tours in answer to the question "What would you like to name your site?" and then click Next. There is no need to fill in the HTTP address of the site at this time.
- On the Editing Files, Part 2 screen (shown in Figure 3), select "No, I do not want to use a server technology." Click Next.
- On the next screen, select the first option, "Edit local copies on my machine, then upload to server when ready (recommended)."
- The local site contains all the files in development on the Dreamweaver user's hard drive.
- A staging server contains a mirror of the site, used for testing and development purposes only. The public never sees content on the staging server, but it is a real web server environment, which is typically identical or nearly identical to that of the production server.
- The production server is the public version of the site. Only files that are ready for publishing—tested, edited, polished, and approved—should be published on the production server.
- Click the folder icon beside the option "Where on your computer do you want to store your files?" (see Figure 4). Browse to the newland folder within the dwcs4 folder. Click Select to select the folder and return to the Site Definition dialog. Click Next.
- On the next screen, shown in Figure 5, choose None in the drop-down menu.
- Click Next. Review the summary, and click Done.
You'll store the local version of the site in this folder.
In real life, you may inherit an existing site and be asked to upgrade it. With any significant upgrade, it's best to make a copy of the existing site and work on that copy. You should never directly edit a site that's in production (that is, the site that the public sees).
Once the files are visible in Dreamweaver, you should edit them exclusively in Dreamweaver. Any text editor can open any HTML file, and every operating system has a file-management utility (such as Macintosh Finder or Windows Explorer) that lets you move and delete files. But you should avoid using these tools to manage your website, because any change is likely to foil Dreamweaver's Site Manager, and could cause broken links. So once the files are visible in Dreamweaver, go straight to Dreamweaver, and avoid the temptation to do anything to those files by any other means.
Though the files are on your hard disk, Dreamweaver doesn't yet see them. By defining a site, you enable Dreamweaver to see and manage the files. You define a site in the Site Definition dialog. If the dialog you see doesn't look like the one in Figure 2, it's probably because you're in advanced view. Click the Basic tab near the top of the dialog to bring up the basic view shown in Figure 2.
)
The Site Definition dialog's basic view uses a wizard-like approach.
){kind=small}
As a result of this decision, there will always be two sets of files for the site—one local (usually on your hard drive, though you can put it in a network folder, if desired) and one remote (usually on a server). This design is for safety, because you always have at least one backup copy of your file. More importantly, it means that the files you work on will be stored on your hard drive, where customers will never see them.
Most professional sites work using a three-tier setup:
In this step, you are defining the local site—this is where all the action takes place. Whenever you edit a file, you will be editing the file as it appears in the local site. The local site is generally not seen by the public, which means that if you temporarily break the functionality of the site as you work, no harm is done.
)
Normally, you specify either a staging server or production server as the remote site. When working with dynamic, database-driven content, a staging server is a necessity.
Later you would define a remote site, which you would use as a staging server. That staging server would be able to handle fully dynamic sites, which the local site you are defining cannot do. For now, a remote site is an unnecessary complication.
){kind=small}
At this point, Dreamweaver displays a dialog indicating that it is building the site cache. Dreamweaver is analyzing all the files in the site, checking all the links, and storing them in memory. If you decide to rename a page or move an asset to a different folder, Dreamweaver will automatically update all of the files that link to the modified file. Once Dreamweaver has built the site cache, the dialog disappears on its own.
When you're finished, the Site panel (by default, located in the lower-right corner of your screen) should be filled with files, as shown in Figure 6.
)
