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.
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.
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.
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.
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.
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.
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.
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.