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 and 2005 Macromedia’s Dreamweaver, Version 8. Although the tools are designed to address slightly different markets, there are some areas of overlap in their functionality and we will call out these differences in this series of videos. The first set will examine the IDE of each application, then the remaining videos will dig deeper into designing Web pages with HTML and CSS, and programming languages such as Visual Basic and C#. In this video we will examine the interface of each application; both Dreamweaver and Visual Studio 2005 provide an all-in-one window integrated layout. Both applications feature a workspace made up of two main parts, the document window and moveable subpanels with various tools to facilitate design. We will begin by exploring the document window in each application and then move on to a description of the subpanel elements featured by each program.

Dreamweaver Section

First, we’ll look at Dreamweaver.

When the user opens Dreamweaver… the Start page appears, which allows you to either open a recent item, create a new item, or create a new item from a sample. Once a selection is made, the Start page is replaced by the Document window. There are three ways to view a document; Design View, showing a "what you see is what you get" or WYSIWYG Layout; Code View, with color-coded keywords; and this hybrid two-pane layout, called the Split View. Note that in the Split View, when I select one of the HTML elements, the corresponding design element is also selected… And vice-versa; Selecting one of these design elements highlights the text in Dreamweaver of that given control. This Split View feature is unique to Dreamweaver today, but the same functionality will be added to the next version of Visual Studio. By default, the document window opens with whatever view was last selected in any window, so for instance, if we set this window from Split View to Code View, then as we see, the next window will also open up in Code View. In addition to view options, Dreamweaver can display multiple documents in a single document window, which are identified by these tabs. Dreamweaver also offers the option of tiling or cascading the files within this document window, creating a floating workspace in which each document appears in its own window.

Visual Studio 2005 Section

Back in Visual Studio 2005, let’s take a look at the Start page, which appears by default. Like Dreamweaver, this Start page lists your most recently used projects and Web sites, and allows you to create a new project or Web site. The Start page remains open as a tabbed item, which gives you instant access to it as a reference page. If the Start page is ever closed, you can reopen it any time from the View menu under Other Windows > Start Page Option. In addition to simply opening an existing project or creating a new one, the Start Page in Visual Studio 2005 will reference the Internet and show code samples, knowledge base articles, news items, and other current events of interest. Visual Studio 2005 allows you to see Web pages in either design view, which is the default, or HTML source view. This is configurable in the Start page options under Tools > Options. Visual Studio has two kinds of split screen option. First, a version that allows you to focus on two parts of the same document at the same time. You can horizontally split a document into two parts by dragging the window splitter line down or selecting "Split" from the Window menu. Another kind of split screen is available for tabbed documents. By dragging the tabbed document into the workspace area, you’ll be presented with the horizontal or vertical split option. This allows you to view multiple files side by side or on top of each other. You can also split the screen by right-clicking on the document’s tab and selecting Horizontal or Vertical Split, which will split the screen in half for you to be able to view multiple documents at once. These options are very flexible – you can first split the screen vertically, and then again horizontally, allowing you to set up your screen many different ways. Visual Studio 2005 can also display floating windows or fully docked windows for the workspace. From the Tools > Options dialog, under Environment, there is an option for tabbed documents or multiple document interface. Visual Studio will automatically remember your working environment when you close it, so every time you open Visual Studio, everything will be the same as it was last time you used it, including what files were open for the project and even the cursor position in each of those files. Tabbed documents are the default setting for Visual Studio. When you’re in the tabbed document mode, you can close the active document with this close button. Also, when you have many tabbed documents open, this drop down arrow shows all the tabbed documents by name and makes it very easy and fast to switch between them.

Dreamweaver Section

Returning to the Dreamweaver interface, we see that in addition to the document window, there are also panels. The panels in Dreamweaver are initially docked together but can be undocked into their own windows or docked on either side of the interface. These windows are now floating in the workspace. If you wish to regroup the panels, a nice snap feature is available, making this easy. You can also snap these panels to the side of the document window as you drag and drop them, which can be seen by this thick border. These panels can also be collapsed individually, with an arrow prompt on the left of the title bar, next to the panel’s name. Clicking the arrow to point right will collapse the individual panel and making the arrow point down will expand the panel. In addition, an entire panel group can be collapsed to the outside of the IDE with a separator bar. Although the separator bar the collapse button indicates that there are panels hiding, there is nothing really to show you what specific panels are hiding. The only way to see this is to expand the whole panel group.

Visual Studio 2005 Section

Back in Visual Studio 2005, there are both single and tabbed panel groups. Most of these panels can be turned on or off with the View menu. Panels can be positioned by selecting float, dock, tab, auto hide, or hide, which can be thought of as close, from one of three locations. First, by clicking the drop down arrow on the title bar; second, by right-clicking the title bar; and third, you can use the Window menu for that panel that is active. You can also drag and drop the panel in the workspace. As you drag the panel, you will see sets of docking arrows to indicate where the panel can be placed. Hovering your mouse over one of these arrows will shade the area that the panel will end up in when dropped. Also, open panels can be pinned or unpinned. A pinned panel is stuck to the side of another panel or the IDE panel and an unpinned panel is a floating panel. Once the panel is in auto hide mode, hovering your mouse over the tab causes the panel to reappear. Note that the pin icon is on its side, which indicates that the panel is still unpinned. As you move your mouse away from the panel, it automatically reverts itself to auto hide, and displays itself as a tab. If you wish to unhide the panel, simply click the pin icon and pin the panel in place. For multiple monitor support, panels can also be dragged outside the Visual Studio Interface. This makes it very easy to configure the interface the way you like it.

Dreamweaver Section

Switching back over to Dreamweaver, once you’ve moved the document window and panels around where you like them, Dreamweaver allows you to save your panel and document window configuration as a named workspace. This option is found under the Window menu in the workspace layout submenu. Using this feature, you can save an unlimited number of named workspaces. There are also three predefined workspaces, Coder, Designer, and Dual Screen.

Visual Studio 2005 Section

The Visual Design 2005 environment allows you to save a single workspace, which consists of two distinct layouts, one used when designing, and the other used when debugging. Any changes made to the workspace are automatically saved when the application closes. To reset the workspaces to their default settings, use the Reset Window Layout option from the Window menu. Visual Studio 2005 is also very flexible in its settings. There are literally hundreds of options to set up the application. The options are mostly available from the Tools menu under Options. After you’ve made all the settings you like, under Environment, you can import and export these settings. This is automatically set up to save your settings in an XML file located in this path. You can also use a Teams settings file which will allow you to share your settings between multiple people.

Conclusion

This concludes our comparison of Dreamweaver and Visual Studio 2005 with the IDE, document window, panels, and workspaces section.