Home arrow Web Services arrow Building a Scalable Website with Dreamweaver MX
WEB SERVICES

Building a Scalable Website with Dreamweaver MX


How do I build a small website so that I may easily maintain and develop it? Dreamweaver MX holds the answer. Read more to find out how.

Author Info:
By: Macromedia Team
Rating: 3 stars3 stars3 stars3 stars3 stars / 11
April 07, 2003

print this article
SEARCH DEVARTICLES

How do I build a small website so that I may easily maintain and develop it? Dreamweaver MX holds the answer. Read more to find out how.

This article discusses how to build a scalable website using Macromedia Dreamweaver MX. When I set out to build my latest project, I knew that it would have to be created in phases. Macromedia Dreamweaver MX made it easy to build a scalable site, so I could start small and add more later with minimal effort.

The strategies that helped me most with scalability were: Dreamweaver MX templates, server-side includes, code snippets, dynamic content, CSS, site root-relative links, reusable code, and Dreamweaver MX extensions. Finally, I should mention Dreamweaver MX's Search and Replace function, which saved me a couple of times.

CSS

First,  I used a mixture of HTML and CSS to achieve my look. I used HTML to ensure a minimum acceptable layout in case a visitor's browser can't or won't display CSS. Any setting that would be reused throughout my pages was placed in an external stylesheet. Here are some guidelines for scalability and CSS:

  • Place your styles in an external CSS file. All you need to do to apply a look to a page is link to the stylesheet. When you need to change the look, just link to a different stylesheet.
  • Redefine tags as much as possible. Classes (custom styles) are fun, but when you redefine a tag, your style definition automatically applies itself to any such tag on the page.
  • Use CSS's inheritance and precedence to your advantage. For example, if a site is only going to use Arial fonts, you can redefine the body tag with Arial, 12 point. Most everything will appear in that font and size. You can then have differently-sized text on your page by also redefining the <p>, <li>, <td> and header tags.

    To continue with the example above, if I also redefine the <p> tag to be 11 point (but don't specify a font type), the <p> tag inherits my definition for Arial from the <body> tag that contains it. But, my 11 point definition for the <p> tag overrides the similarly-inherited 12 point setting.

Dreamweaver Templates

For my site, I chose a very simple template scheme: a single template file, with one editable region. I placed all the content that would appear on every page (items such as the header, navigation bar, etc) within locked regions in the template. Then, I created a large editable area to contain the copy for each page. The advantages of this are:

  • As pages get added to my site, I only need to change my navigation bar once, and all pages created from the template will automatically update.
  • If I change the look of my site, I only need to do so once by changing the template, and again, pages will automatically update.
  • If I later want different layouts for the different areas of my site, I will be able to create several more templates, and easily apply them to the various pages I've already built with my original template.
  • As various people start contributing content, I will be able to upgrade my template to add optional regions, repeating regions, and even nest some secondary templates into the original one. This will enable fine control over what I let contributors modify, and what I reserve for myself as the site administrator.

Creating a Template

In its most basic form, a Dreamweaver MX template allows you to define editable regions for content that varies on every page. When you create pages from the template, any elements outside of the editable regions you defined will be locked. If you change your original template file later on, the locked regions in all pages created from that template will update. Editable regions will not be affected, since they are meant for content that varies from page to page. Use the following steps to create a template:

1 Create an HTML page for your layout.

2 Choose File > Save as Template.

3 Mark some editable regions using Modify > Templates > New Editable Region.

4 Choose File > Save.

Site Root-Relative Paths

I used site root-relative paths exclusively throughout my site. If I need to change a file's location, I only need to change paths to the file, and not all the paths from that file. Use the following steps to create site root-relative paths.

Creating a Site Root-Relative Path

1 Choose Insert > Image, or create a link using the Property inspector's folder-shaped Browse for file icon.
 
2 A Select File dialog box appears. At the bottom of the dialog box, make sure Relative To: is set to Site Root.
 
3 Select the file for your image or link.

Server-Side Includes

I have a script that takes user input and strips out special characters to prepare the input data for insertion into a database. That script didn't need to appear on every page, so I did not place it into a locked region of my template. But, I did want the flexibility of changing the script later without having to change every page on which it appears. So, I used a server-side include file containing my code.

Some developers go even further and publish files made only of various include fragments. This perfectly valid and standard approach is an alternative to Dreamweaver MX templates. I did not choose to use includes in that way, because each one sends out a request to the server.

Adding a Server-Side Include

A server-side include dumps the contents of the included file straight into the containing page's source code. This occurs before the page is served to the browser. The process happens completely behind the scenes, so be careful that you don't create invalid code by merging the two separate files. Use the following steps to create a server-side include:

1 Place your insertion point where you would like to include the file.

2 Choose Insert > Script Objects > Server-Side Include.

Code snippets and generic, reusable code

Another script I have validates a form, allowing submission only if an e-mail address or a phone number has been entered. I used three strategies to make this script especially useful:

The script was written to search a page for any form, and validate only if any element named "phone" or any element named 'email' that appears is completed. I can add the script to any page that contains a form and those two form elements on it, and it will work.

I placed the script in an external JS file, and linked it with <script src="..."></script> tags. 

I made that tag a code snippet, so I don't have to write it out every time I need it. 
 
View the JavaScript code

Creating a Code Snippet

1 Select some code.

2 In the Code Panel Group, select the Snippets tab.

3 Click the New Snippets icon.

4 You can set code to wrap around an element (Wrap Selection), or just simply insert all in one block (Insert Block).

Dynamic Content and Dreamweaver Extensions

The website needed navigation breadcrumbs that would show root, various categories, and the current page. An example on my own site would be: Home / Our Services / Six reasons why we succeed. One way to do that is to simply write out the links, but this would have to be done on every page. Make a change in your structure, and you have to modify all the pages in your site.

I chose to write some PHP to automatically convert a file's path into user-friendly navigation links. I knew some developers might want to include such links in the body of their content. To allow for that, I packaged the code into a Dreamweaver MX Extension. Most contributors to the site are not HTML experts, so they can simply install the extension and select Commands > Insert PHP breadcrumbs to use my code.

Download the PHP extension from the solutionsj website
 PHPbreadcrumbs.mxp (2 KB)

Find and Replace

Finally, I can't mention scalability without tipping my hat to Dreamweaver MX's Find and Replace feature. More than just a blind source code search scheme, it actually allows you to recognize tags, attributes, and the like. When I needed to change all my class assignments for certain table cells, I just asked Dreamweaver MX to look for TD tags with a class attribute of a certain value and replace them with another. For the more adventurous, the last checkbox in the dialog allows you to use standard Regular Expressions in your search patterns.

Conclusion

It is essential to allow for a website's growth from the start. What techniques you use towards that end depend on your needs, but it's never too early to think about how large your project may grow in the future. There are many schemes available for scalability, and combining them can be a very flexible approach.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Web Services Tutorials
More By Macromedia Team


blog comments powered by Disqus
WEB SERVICES ARTICLES

- Dealing with Loose Coupling in a Service-Ori...
- Loose Coupling in a Service-Oriented Archite...
- Safety, Idempotence, and the Resource-Orient...
- The Resource-Oriented Architecture in Action
- Features of the Resource-Oriented Architectu...
- The Resource-Oriented Architecture
- Getting Started with Flex
- Automated Billing and Faxing for the Web
- An Introduction to Web Services
- The Foundations of Web Services: From Novice...
- Web Services Reengineering: Finishing Touches
- Fault Handling with Web Services
- Flow and Web Services
- Process Lifecycles and Web Services
- Business Processes and Web Services

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials