Introduction

Welcome to this product comparison video overview showing the differences between the latest Web design tools available from Microsoft and Macromedia, namely, Microsoft’s Visual Studio 2005 and Macromedia’s Dreamweaver, Version 8. Most Web sites maintain a common look and feel for the end user experience, such as using the same layout for each page with a common header and footer. With static HTML, these common elements have to be duplicated on each page. These is easy to create with a simple copy and paste function but proves to be very difficult to maintain since every change needs to be made to every HTML page. This video looks at the solutions provided by Dreamweaver 8 and Visual Studio 2005 to simplify this task.

Dreamweaver Section

Dreamweaver Version 8 features page templates which are used to maintain a consistent look and feel throughout your Web site without the hassle of making individual page changes when updates are required. By utilizing Dreamweaver templates, you improve page consistency and centralize the maintenance process to the templates you create. Dreamweaver templates can be applied to existing pages. When you apply a Dreamweaver template to an existing page, Dreamweaver scans the page for existing region names. Since this page is not currently attached to a template, we must select an editable region within the Dreamweaver template to place the existing content of the page being attached. When using a Dreamweaver template, attached pages update automatically… based on changes to your template. Once you’ve created a Dreamweaver template, you can insert editable regions which allow users to update specific content without changing the overall look, feel, and functionality of your entire Web site. And a page can also be detached from the Dreamweaver template. Dreamweaver templates can also be nested within other templates, with no limitation on the number of child templates that are nested within a parent or how many levels of nesting occur overall. Dreamweaver 8 provides functionality which allows you to give other developers freedom to manipulate certain aspects of the page without compromising the overall page layout. This is accomplished by using built in features such as repeating tables and regions, optional regions, and editable attributes in regions. Due to the increasing complexity of Dreamweaver templates and their functionality, Dreamweaver 8 has incorporated a template syntax checker. Dreamweaver templates can be further customized using template parameters, which are HTML comment tags that are interpreted by Dreamweaver for identifying and editing template objects. Template parameters allow developers to input custom values for attributes of the page. Dreamweaver also supports editable tag attributes which enable a configuration of tag attributes for specified elements within a page. To make a tag attribute editable, simply select the desired tag with the Tag Chooser and go to the Modify Library… Templates…Make Attribute Editable, and select an attribute. Finally, checking the Make Attribute Editable box completes the process. After implementing Dreamweaver templates, the result is a set of static pages, with content that is duplicated based on the templates. When you make a change to a template file, Dreamweaver will automatically update all of the files that are ready to use that template. So if you have a thousand pages based on a template, changes to that template will cause Dreamweaver to update those thousand pages and then all of those thousand pages must be redeployed to the production Web site in order to properly publish that change. Templates do not incorporate any kind of server side logic to programmatically modify the page as it is being rendered. If these pages are brought to another environment to be edited, they exist as static pages – there is no provision to maintain the facility of templates outside of the Dreamweaver environment.

Visual Studio 2005 Section

Visual Studio 2005 also offers a solution to having templated pages in a new feature called Master Pages. Creating a Master Page is easy. To start, go to the File menu, select New, File, then select Master Page from this dialog box. Master Pages are similar, on one hand, to Dreamweaver templates, as their purpose is to provide consistency to the look and feel and overall functionality of a site. But Master Pages further expand the idea of templates by implementing them as object-oriented program elements that are combined at run time by server side code. Common UI elements and content are placed in content pages and the content pages are then rendered into PlaceHolders found in a Master Page. Content PlaceHolder controls specify where this custom content is placed. By default, there is one Content PlaceHolder tag provided and you and add UI elements and additional Content PlaceHolders as well. When you are satisfied with the overall layout of the MasterPage, to add a content page, simply right-click MasterPage on the Solution Explorer and select "Add Content Page." You can also select a MasterPage when creating a new Web form by checking the "Select MasterPage" option. Before the page is created, all the MasterPages in your site are listed for you to select which MasterPage this file should be linked to. Notice that you have visual design support for the MasterPage. Only the Content areas are editable while the MasterPage items are disabled and grayed out. Now you are free to add content and additional controls in the Content PlaceHolder regions. At any time you can refine the layout by editing either the original MasterPage or the individual content page.

MasterPages are denoted by a different file extension, .master. Each ASP.NET page that is set up to reference a MasterPage requires the declaration of a MaterPageFile property and the @ page directive. Working with MasterPages does not require new techniques other than utilizing the Content Placeholder and content controls as the ASP.NET run time renders the page, it substitutes the Content PlaceHolder with the corresponding content controls contained within the requested page. Unlike a Dreamweaver template, a MasterPage can contain .NET code which gives the developer the ability to change certain aspects of Content PlaceHolders programmatically. For example, the content of a Content PlaceHolder can be replaced or altered according to dynamic variables or other logic in the application. If content is not specified for a particular Content PlaceHolder, the MasterPage can supply default content which is similar to the optional in region in Dreamweaver templates. For example, if your site features promotional information and there are no current promotions, the MasterPage could return default content such as ‘No current promotions – please check back later." This does not require a separate content page. MasterPages can also be nested so that a MasterPage can be used inside the Content PlaceHolder of another MasterPage. MasterPages can be applied directly to a page or it can be applied globally by modifying the Web config file from your Web site. A nice feature of MasterPages is that they are connected to the content pages and rendered at run time. This means that changes to a single MasterPage file will affect all ASP.NET pages that are referencing the MasterPage. So in the same scenario where we have one thousand pages based on a MasterPage file, we can make a single change to that MasterPage then deploy it to our server, and all one thousand pages will automatically be updated.

Conclusion

This concludes our comparison of Dreamweaver and Visual Studio 2005 with templates and MasterPages.