Building scalable websites with Dreamweaver

Note: This tutorial was written for Creative Suite 4. Although the screenshots may differ from what you see on your screen, the content is still valid for Creative Suite 5 and later.

Strategies for efficient, and scalable, web development have really changed in the past few years. While some fundamental concepts still exist at the core, other advancements in standards adoption and new Dreamweaver development features, have given way to even faster and more expansive techniques.

At the core

With the Web becoming an immensely crowded place, clean document structure is becoming more and more important. When search engines catalog your site, you want them to see a well thought-out structure, clean tags, and understandably labeled links to the other pages in your site. Combining HTML and cascading style sheets (CSS) allows you to create a visually appealing site, while maintaining a good structure for your visitors. What's more, you can construct your CSS rules in a separate file altogether, allowing any number of HTML pages to simply refer to a single CSS file. This way, when you make changes to your single CSS file, your entire website, regardless of how many pages, will reflect these changes.

After the basics are in place, you can use HTML and CSS in conjunction with JavaScript to create rich interactive experiences without the user even needing to visit multiple pages of your site. New features in Dreamweaver CS3 and CS4 allow you to create these experiences with great ease and speed.

Site management tools in Dreamweaver let you keep track of your pages and links, manage layout and content through templates and Library items, code snippets, and allow you to synchronize and upload files to your web server when you're finished working on the site.

Lastly, you can use server-side technologies to allow your web server to do some of the work for you, such as including code dynamically, creating breadcrumbs, or leveraging an unlimited number of other possibilities available to you on the web.

Use CSS

First, you need to create a CSS file and link it to our HTML file. Create a CSS file by choosing File > New > Blank Page > CSS in the New Document dialog box. Save and name the CSS file. Open your HTML file in Dreamweaver, then choose Format > CSS Styles > Attach Style Sheet. You can also right-click inside of the page area of the HTML document and choose CSS Styles > Attach Stylesheet from the contextual menu (see Figure 1).

What Dreamweaver does is add a link tag in the heading area of the HTML document with a reference attribute to the CSS file you just created (see Figure 2). Every HTML page in your website that contains this link tag in the head area will have access to the CSS rules you create in that CSS document.

On the web, CSS is responsible for both layout as well as text styling. By wrapping HTML tags in DIV and SPAN tags, you can control groups of HTML tags, and give them properties, such as width, alignment settings, and background colors, to name a few (see Figure 3).

With CSS controlling your site's layout, making modifications to your layout as your site grows is as quick as making style changes, and it can be done from a single CSS file.

Note: To learn to work with CSS in Dreamweaver, check out the tutorials in the Dreamweaver Developer Center and Creating pages with CSS (CS4) / Creating pages with CSS (CS5) in Dreamweaver Help.

Add in some JavaScript and Spry widgets

In addition to being able to update your CSS using the Dreamweaver CSS panel, CSS rules can also be manipulated through JavaScript. JavaScript is a client-side scripting language, which means that the software needed to understand JavaScript instructions is already on your user's computer, inside of applications like web browsers, Adobe Reader, and Adobe AIR.

First introduced to Dreamweaver in version CS3, the Spry widgets objects give you instant access to the power of Ajax from within Dreamweaver. Simply select a widget from the insert panel, and Dreamweaver will do the rest.

The following example outlines how to create a tabbed panel. With your HTML page open in Dreamweaver, click the Tabbed panel widget in the Insert panel's Spry tab. Dreamweaver will create all of the necessary HTML, CSS, and JavaScript code to make your Tabbed panel functional (see Figure 4).

When you have finished adding your panels and content, preview your web page in a browser and click the tabs to see your content update within the same web page, without even reloading.

If you take a look at the source code you'll see the tabbed panel widget is simply made up of a standard bullet list, ul and li tags, and a corresponding set of div tags. When this page loads, the JavaScript file named SpryTabbedPanels.js, which is added automatically by Dreamweaver, initializes in the web browser and rearranges a series of CSS rules, also added by Dreamweaver in the file SpryTabbedPanels.css, and manipulates the visibility and position of the HTML tags based on the user's mouse-clicks. You can add or remove panels as needed either in Code view, or in the Properties panel. This functionality allows you to add or remove content within your site without creating additional pages for related material.

Dreamweaver CS4 features two more widgets, in addition to a new Dataset wizard that is nothing short of amazing. You can quickly create truly dynamic web pages from external data sources such as HTML, XML, and JSON; all with the ease and simplicity of a stepped wizard.

Note: To learn more about the Spry framework for Ajax and what you can do with widgets check out the Spry Technology Center and Adobe Labs.

Let Dreamweaver manage your site

In order to take advantage of Dreamweaver's site management capabilities, you'll need to set up a site. A site is nothing more than a folder on your hard drive, or network drive, where Dreamweaver expects to find the files that belong to your website. As you add files such as HTML, CSS, SWF (Flash), GIF and JPG graphics, Dreamweaver will be able to make sure that all files, links, CSS, Flash, and images are linked properly throughout your site. In addition, Dreamweaver can also store information about your website, such as log-in and file transfer information. This allows Dreamweaver to connect to your web server and upload files you create or update when you are ready.

To create a site, simply go to the Site menu in Dreamweaver and choose New Site. The New Site wizard will walk you through the process of naming your site, picking a local directory (where all of your web files are, or will be), and entering your web server info (you'd get that info from your hosting company, or server administrator).

Note: For more details, see Working with sites (CS4) / Working with sites (CS5) in Dreamweaver Help.

Use Dreamweaver templates

With a site defined, you can now use some of Dreamweaver's site management capabilities. One feature that can save you lots of time in growing your site is templates. When you have a web page ready that can serve as a base structure for other pages, you are ready to convert that into template. A Dreamweaver template is a regular web page with areas designated as editable regions (see Figure 5). These regions act as "holes" when you apply a template to a new HTML page in your site. Areas inside of the regions can be customized on each page they are applied to. Typically you create editable regions for content areas, promotional areas; even inside of Spry widgets; anywhere you'd want a web page to be customized.

The power of templates comes in when you edit the template itself. If you make an adjustment in the template, Dreamweaver will update every page in your site to match the template, but will not alter the content you have customized on each page inside of the editable regions. Adding and maintaining pages in your website have never been easier.

Note: For more information on this topic, see Creating and managing templates (CS4) / Creating and managing templates (CS5) in Dreamweaver Help.

Use Library items

Another feature of Dreamweaver site management comes in the form of Library items. These work much like the way symbols work in Flash or Illustrator. A Library item can be made up of any HTML and other web assets, and can be applied to any number of pages in your website. Let's say you have your company's phone number and address on a few key pages within your site, but you want to be able to update that information once, and have it be updated on all pages, just like templates. That's exactly what Library items are for.

Thinking one step beyond, since your web site can have multiple templates, Library items are a great way to share information between templates, especially if information between your templates is repeated, such as banner or footer information (see Figure 6).

Note: For more information on this topic, refer to the section Working with Library items (CS4) / Working with Library items (CS5) in Dreamweaver Help.

Leverage server-side technologies

The site management features mentioned above allow you to author templates and Library items from a single location, and Dreamweaver will take care of updating all of the HTML page sin your site. Another option for this same idea is to have your web server assemble parts of your web page automatically when someone visits your site.

There are many server-side technologies your web hosting company may offer. ColdFusion (by Adobe Systems), PHP, JSP, and ASP (by Microsoft) are some of the more common. In this example, I'll look at PHP, although the principle is the same for the others.

Unlike JavaScript, which is installed on your users' computers, server-side technologies are on your web server. The advantage of this is that your users only ever receive HTML from your server, and the server takes care of any processing. This reduces the amount of software you need to rely on for your users.

When you put server-side code into your web page, Dreamwaver will represent the code by putting a small object icon in the page where the code exists in relation to the layout (see Figure 7). If you select the object, you can edit the code directly in the Properties panel. When your users visit this web page in the following example, the server will include the HTML file as instructed by the PHP code, and users will see your web page plus the HTML code specified in the file to be included.

Note: For more information on this topic, see Preparing to build dynamic sites (CS4) / Preparing to build dynamic sites (CS5) in Dreamweaver Help.

Where to go from here

To learn how to apply the techniques discussed in this article, be sure to check out the resources in the Dreamweaver Developer Center, including the following resources:

• Learn to work with CSS
• Learn to use the Spry framework for Ajax
• Learn to build dynamic websites and web applications
• Dreamweaver CS4 / Dreamweaver CS5 Help