Dynamic Web Site Basics

Setting aside, for a moment, the specifics of the Newland Tours site, in the preceding lessons you explored several concepts that are critical to dynamic site development. One of these is the separation of logic and presentation. The site logic at this point is handled exclusively by XHTML, while the presentation is handled by the cascading style sheet. You have also explored the concept of merging two different documents (an HTML page and a CSS) on the fly to create something different than either of the two source documents alone. These concepts are fundamental to creating dynamic Web sites.

To understand these interactions, and to prepare you for the tasks ahead, let's take a moment to analyze the relationship among the three different major sources of information that make up every Web page: the content (text, images, etc.), the logic (the document hierarchy, such as headings and body text), and the presentation (the colors, font sizes, positioning, and other cosmetic effects).

In earlier versions of HTML, text, markup, and presentation code all exist in the same place: the HTML document itself. In a meaningful way, the document that a developer creates on her or his hard drive is the same as the document viewed in a browser by the site visitor. This simple relationship is shown in the following figure.

As a result of the upgrades you made in Lessons 2 and 3, the relationships have changed: You have separated a document's presentation from its logic and content. Presentation information is now stored in the CSS. Document content is stored as text within the XHTML markup, which also provides the document logic. Only when the XHTML document and the CSS are merged is the "real" page created. This new relationship is represented in the following figure.

Beginning with this lesson, you are going to add yet another layer of sophistication to this relationshipone that's more profound and more powerful even than migrating from HTML to XHTML and CSS. Specifically, when you add database content to the site, you will separate the content from the logic. What this means is that all three levelspresentation, logic, and contentare quasi-independent of each other, which means you can make radical changes to one without needing to make changes to another. The relationshipand the basic blueprint for the rest of the bookis shown in the following figure.

HTML cannot separate content from document logic. Even in its fifth major revision as XHTML 1, HTML is ultimately intended to mark up a plain text document. It cannot process scripts, evaluate expressions, do math, interact with a database, or send and receive information to or from a user. Yet separating logic from content requires, at times, each of these abilities and more. To accomplish these tasks, you need to give HTML some help, and this is where server-side technologies such as Microsoft ASP and Macromedia ColdFusion MX fit in.

Server technologies like ASP and ColdFusion (and there are others, including JSP, PHP, and ASP.NET) are able to handle programming tasks such as evaluating expressions, doing math, and processing scripts. In addition, they are capable of interacting with data sources, including databases, structured text files, and in some cases XML data. They also have special abilities that pertain only to the Web, such as the ability to collect data sent by the user and control the information that gets sent back to the user.

But there's a catch. Browsers are limited to handling HTML, CSS, and JavaScriptthey don't understand ASP or ColdFusion code. Whatever the server sends to the browser has to be in standard HTML. All ASP and ColdFusion scripts must be processed on the server and output as standard HTML before they get sent to the browser.

To put it more plainly, to view a page with dynamic content, you need to run the page through a server capable of processing the code. This is in contrast to standard HTML pages, which you can view directly in a browser, regardless of whether they go through a server. You can open Internet Explorer or Netscape and browse to any of the HTML pages in the Lesson04/Start folder, and they will display as expected. If you attempt to browse to the pages in the Lesson04/Complete folder, you'll discover that the pages don't open (or they open in Dreamweaver MX, rather than in the browser). The browser sees code it doesn't understand, and refuses to open the file. This is why, in Lesson 1, you viewed the final version of the site at allectomedia.com, rather than from the CD.