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. |
More Web Services Articles
More By Macromedia Team
 developerWorks - FREE Tools!
|
The IBM DB2 Deep Compression ROI tool is designed for DBA’s and IT management personnel to perform a clinical analysis of the cost savings gained from the Storage Optimization feature of DB2 9 for Linux, UNIX and Windows. The feature, also known as Deep Compression, compresses data that lies within a database by up to 80% at times.
FREE! Go There Now!
|
|
|
|
WebSphere Process Server delivers a unique integration framework that simplifies existing IT resources. Often, as IT assets grow to support business demand, so too does their complexity and manageability. In this webcast, we’ll discuss how WebSphere Process Server helps deliver an SOA infrastructure that provides a common model to orchestrate, mediate, connect, map, and execute the underlying IT functions. Discover how WebSphere Process Server simplifies integration of business processes by leveraging existing IT assets as reusable services without the complexities of traditional integration methodologies.
FREE! Go There Now!
|
|
|
|
Visit IBM developerWorks to download a free trial version of WebSphere Business Modeler Advanced V6.1.1, IBM’s premier business process modeling and analysis tool for business users that offers process modeling, simulation, and analysis capabilities. IBM WebSphere Business Modeler helps you visualize, understand, and document business processes for continuous improvement.
FREE! Go There Now!
|
|
|
|
Visit IBM developerWorks to download a free trial of the latest release of IBM Lotus Sametime Standard V8.0. Lotus Sametime Standard V8.0 is a platform for unified communications and collaboration that combines security features with an extensible, open solution including integrated Voice over IP, geographic location awareness, mobile clients, and a robust Business Partner community offering telephony and video integration.
FREE! Go There Now!
|
|
|
|
Visit IBM developerWorks to download a free trial version of WebSphere Extended Deployment Compute Grid, which lets you schedule, execute, and monitor batch jobs. Because online transaction processing and batch jobs execute simultaneously on the same server resources, you can avoid costly duplication of resources. Compute Grid supports job types of Java transactional batch, compute-intensive and a new type called "native execution", which enables non-Java workloads to run on distributed end points.
FREE! Go There Now!
|
|
|
|
IBM Enterprise Modernization solutions help organizations evolve core IT systems towards modern architectures and technologies—reducing the burden of maintenance and freeing up resources to develop new business requirements and capabilities. With the IBM Enterprise Modernization Sandbox for System z you can evaluate IBM Enterprise Modernization solutions focused on five key areas: Assets, Architectures, Skills, Processes and Infrastructures, and Investment. Each solution is based upon real customer experiences and offers a proven path to get you started with your modernization projects.
FREE! Go There Now!
|
|
|
|
Analysts, architects, and developers who have existing COBOL or PL/I skills and want to extend those skills to deploy new workloads on the mainframe can use the IBM Enterprise Modernization Sandbox for System z to find hands-on walkthroughs of common real world scenarios. The scenarios provide examples of how to rapidly design, create, assemble, test, and deploy high-quality Web, Web services, portal, and SOA applications for IBM CICS, IBM IMS, and IBM WebSphere Application Server.
FREE! Go There Now!
|
|
|
|
Learn from the best! Find out how developers use Rational ClearCase to be more flexible, innovative and deliver higher quality code in the Rational ClearCase Power Users eKit. This complimentary eKit provides a collection of materials, like articles, whitepapers, and demos that can help you become a power user of Rational ClearCase.
FREE! Go There Now!
|
|
|
|
Portfolio Management is about effectively managing portfolio value by aligning portfolio investments with business goals. This complimentary e-kit provides a collection of materials that can help you understand how IBM Rational enables and automates best practices for improved governance and clear visibility into portfolio and project performance across the entire IT project lifecycle.
FREE! Go There Now!
|
|
|
|
Visit IBM developerWorks to try the IBM SOA Sandbox for connectivity. The SOA Sandbox for connectivity provides a trial environment with the tooling and components to help you explore how to effectively connect your infrastructure and integrate all of the people, processes and information in your company. Use the hosted sandbox to explore SOA techniques that streamline connecting existing IT assets together, as well as learn how to connect them to new business logic.
FREE! Go There Now!
|
|
|
|
All FREE IBM® developerWorks Tools!
|
