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!
|
This demonstration gives you an overview of IBM® Rational® Build Forge Express Edition, a global offering that provides a framework to automate and execute software processes. Rational Build Forge provides a software assembly line that can support all of your tools, technologies, and platforms so you can achieve a repeatable, reliable, and traceable build and release process.
FREE! Go There Now!
|
|
|
|
Learn how you can extend modern application lifecycle management to IBM System z through the IBM Rational Software Delivery Platform (SDP). The Did you say mainframe? e-kit includes podcasts, webcasts, tutorials, white and red papers, demos, and articles designed to help ease the challenges of modernizing your enterprise. This complimentary kit for mainframe developers is a practical, how-to guide for making the most of an existing development environment, including the skills and infrastructure already in place at an established enterprise.
FREE! Go There Now!
|
|
|
|
Visit IBM developerWorks to download IBM DB2 Express-C 9.5, a no-charge version of DB2 Express 9 database server. DB2 Express-C offers the same core data server base features as other DB2 Express editions and provides a solid base to build and deploy applications developed using C/C++, Java, .NET, PHP, and other programming languages.
FREE! Go There Now!
|
|
|
|
Download a free trial version of IBM Rational Software Analyzer Developer Edition V7.0 to identify bug defects earlier in the software development cycle. Rational Software Analyzer is an extensible software development solution that reduces the expense of bug-fixes by enabling static analysis code reviews and bug identification very early in the development cycle.
FREE! Go There Now!
|
|
|
|
Join us for this web seminar to learn how you can defend your web applications from attack. Learn about the 3 most common web application attacks, including how they occur and what can be done to prevent them. We’ll also discuss manual versus automated approaches for scanning and identifying web application vulnerabilities and how IBM Rational AppScan, an automated vulnerability scanner, can help you automate more of what you are doing manually today.
FREE! Go There Now!
|
|
|
|
Join this webcast to see how IBM Data Studio Developer and pureQuery can take the pain out of Java data access. uApplications developed using both Java and SQL have become a common requirement. Database connectivity using Java Database Connectivity (JDBC) to create an application is a multi-step tedious process, and tooling that covers both SQL and Java has been unavailable, until now. IBM Data Studio introduces the pureQuery platform: a high-performance, Java data access platform focused on simplifying the tasks of developing, managing, and optimizing database applications and services.
FREE! Go There Now!
|
|
|
|
XML has become a common way of storing business data as flat files and many data server vendors including IBM have provided ways to store this data within relational database systems. Increasingly collections of XML files are accessed like databases using an xQuery and other XML standard mechanisms. Businesses find the need to combine the traditional tabular structured data with XML formatted data. In this webcast, you’ll learn about IBM’s WebSphere Federation Server technology, which provides users with the ability to integrate these two data formats.
FREE! Go There Now!
|
|
|
|
Get a free trial download of the latest version of IBM Rational Tester for SOA Quality V7.0.1, a functional and regression testing tool that enables the creation, comprehension, modification and execution of testing GUI-less Web services.
FREE! Go There Now!
|
|
|
|
Whether you are creating new applications or modifying existing ones, managing integration of new components with traditional z/OS elements is a critical part of building and deploying modern applications. Listen to this webcast to see how IBM can help you optimize your development process using an IDE like Rational Developer for System z that integrates with management tools, such as ClearCase to manage your application development on mainframes.
FREE! Go There Now!
|
|
|
|
In this webcast, you'll get an introduction to the eXtreme Transaction Processing (XTP) features of WebSphere Extended Deployment and the common architectural traits required by XTP applications. See how WebSphere Extended Deployment's ObjectGrid feature provides a state-of-the-art infrastructure for hosting XTP applications.
FREE! Go There Now!
|
|
|
|
All FREE IBM® developerWorks Tools!
|
