Introducing Dreamweaver MX

Chapter 1 - What is PHP?
byGareth Downes-Powellet al.
Wrox Press 2003

Dreamweaver MX sees a number of important changes. First of all, there is now only one product, as the functionality available in the previously separate Dreamweaver, UltraDev, and HomeSite packages have been integrated into one vastly superior tool.

Dreamweaver MX also sees enhanced support for more server models, including PHP, ASP.NET, and ColdFusion MX. This new version of Dreamweaver also boasts a new User Interface (UI) and enhanced support for extension developers, including a simplification of Server Model development, which will bring even more power and functionality in the future.

For the first time Dreamweaver MX allows you to choose the style and layout of the User Interface. If you are upgrading from a previous version of Dreamweaver, or UltraDev, this is good news as you can opt to work in an environment that you are already used to.

Choosing Your User Interface

When you start Dreamweaver MX for the first time, you are presented with a dialog that allows you to determine the UI style that you wish to use.

click to expand

For the purposes of this book, we will presume that you select the Dreamweaver MX Workspace, as shown above. Of course all the tutorials and exercises in this book will work regardless of the layout that you opt for.

Once you have selected your preferred UI layout, Dreamweaver MX continues to load, and you are presented with your first view of its new look.

If you are familiar with earlier versions of Dreamweaver, you will see that there are a number of significant changes to the UI. One of the reasons for this radical change is that Homesite, a sourcecode editing tool, previously provided as a separate tool on the Dreamweaver CD, is now fully integrated into Dreamweaver itself. Homesite has also seen an upgrade in this version of Dreamweaver, and is now called Homesite+, and while still available as a standalone product, the additional functionality of Homesite+ will not be made available separately. Unique features such as Code Hints - where the syntax of individual commands appear as tool tips as you manually enter sourcecode, and Snippets - where you are able to store pre-written portions of script for use at a later stage, are available directly through the Dreamweaver MX interface. We'll be looking at these features in Chapter 9.

click to expand

Given that there are a number of sweeping changes to the way that Dreamweaver MX looks, let's take a look at the different elements of the UI so that we may better understand their purpose within our development environment.

The biggest change, for those familiar with Dreamweaver's earlier incarnations, is the use of integrated panels. This provides a far more flexible approach to the UI, as predetermined panel-sets can be created that allow you to tailor the look of the UI, and the tools available, to a particular task at hand. As panels play such a vital role in the way that Dreamweaver MX works, the most frequently used panels are worthy of further exploration.

The Insert Panel

click to expand

The Insert panel, as you can see from the image above, consists of a number of tabbed areas. Each tabbed area hides a different set of tools, which are there to help you realize your web site design.

Some of these "tabs" change dynamically, dependent on the type of document that you are working on. In the screenshot above, we have created a blank PHP page, and there is a tab in the Insert panel, called PHP. Clicking on this tab reveals a number of shortcut tools for when you are working in Code view. Similarly, if you are working on a ColdFusion page a number of other tabs appear, and the PHP tab disappears, because it is no longer required. Edit another PHP page, and the PHP tab returns. This kind of change is called "context sensitivity", and it is specifically designed to help you find the tools that you need, when you need them.

The Design Panel

click to expand

The design panel allows easy access to your Cascading Style Sheet (CSS) styles and HTML Styles.

Also, whilst not strictly a design element, the Behaviors tab allows you easy access to a series of built-in JavaScript behaviors. These are small pieces of code that allow you to add interesting and vital effects to your pages, allowing you to do everything from opening browser windows when a link is clicked, to controlling animations by manipulating Dreamweaver's timeline.

The Code Panel

click to expand

The Code panel provides a number of useful tools and options. From here you can view the whole structure of your page using the Tag Inspector. This inspector displays your page in the form of a tree, and allows you to edit tags directly without having to enter Code view. This is a common tool found in many an Integrated Development Environment (IDE), and it is provided here to shorten the learning curve for those developers already familiar with such tools.

The Snippets tab provides you with the ability to easily store and retain pieces of prewritten code that you may want to reuse on other pages, or within other web sites. Of all of the new features available within Dreamweaver MX, this has probably been the most requested. The Snippets Library already comes preloaded with a number of useful pieces of code to get you started. Ranging from preset meta tags, to JavaScript functions that calculate the area of a circle, there is already something here for everyone, and space for much more! We'll take a more detailed look at the Snippets panel in Chapter 9.

The final tab in the Code panel is the Reference tab. Here you will find quick reference guides to all of the supported server languages. This tab is an extremely valuable tool, as it is also context sensitive. For example, if you are in Code view and you right-click (Windows) or control-click (Macintosh) a tag, attribute, or keyword, the Reference panel will open and display the full meaning of the element that you selected. Of course, this will not work for everything, as there might not be a reference book for the language that you are working with. (For example, at the time of writing, there isn't a reference for PHP. However, there is one available to download from the Macromedia Exchange at http://www.macromedia.com/exchange).

The Application Panel

click to expand

The Application panel is where you will spend the majority of your time when creating the server-side interactions of your web site. This panel is split into 4 tabs: Databases, Bindings, Server Behaviors, and Components.

The Databases tab is what you might expect. It allows you to view the structure and layout of any databases that you have set up on your web sites. From here you can also add new database connections, making them available directly within the Dreamweaver interface.

When retrieving dynamic data for your web page, you must create something called a Data Binding. Data Bindings provide the essential link between the Dreamweaver development environment and your data. Using this tab, it is possible to create a number of different Data Bindings that retrieve information from databases, form fields, cookies, and much more.

In the Design panel section previously, we discussed behaviors. Through the Application panel we have access to even more behaviors. However, these behaviors do not insert JavaScript code into your page. They insert server-side code that provides you with the ultimate interaction between web site and visitor. This tab, too, is context-sensitive, as it changes depending on the server model that you are currently using. This provides unparalleled flexibility of development. If for example you apply the Dynamic Text server behavior while working on a PHP page, the server behavior will insert PHP code. However, apply the same Dynamic Text behavior while working on a CFML page, and the inserted code is, of course, CFML!

The Components tab isn't used when you are working on PHP pages. It is targeted specifically at other server models, such as ASP, that rely on proprietary or third party components to provide specific functionality. One such example for ASP is ASP Mail, which provides e-mail functionality to ASP web pages.

The Files Panel

click to expand

In prior versions of Dreamweaver if you needed to look at the files stored in either your work directory, or on your web server, you needed to open the Site window. The Site window was a user interface all of its own, with its own menus and functions. As most developers working on a web site constantly left this window open and running in the background, it makes logical sense, therefore, that its functionality was placed inside a panel within the main UI. This has been done with Dreamweaver MX, and the Site tab gives you full access to both your local and remote file systems. From here you can transfer files and folders to and from your work directory, without the need for a separate FTP (File Transfer Protocol) utility.

The Assets tab keeps track of all the external files, links, and colors used while creating your site, making them available for easy reference, modification, and reuse.

The Answers Panel

click to expand

Another new functionality addition is the Answers panel. Here you can obtain rapid access to tutorials, Technical Notes and extensions directly within Dreamweaver. The information stored in this panel is retained for future reference, and is only modified when you click on the Update button.

The Properties Inspector

click to expand

This panel allows you to control specific elements of your HTML tags and pages directly without entering Code view. Using its context sensitive nature, this panel constantly changes depending on the element that is selected on the page, providing a wealth of different options.

The example shown above shows all of the standard HTML text formatting options that are available when you select a region of text on your page. From here you can adjust the Format, Font, Size, Color, Alignment, and more. Once a change has been made within the Properties Inspector it is immediately shown on the working page. In this panel too, additional formatting options can be obtained by clicking on the A icon, which changes the panel and provides access to Cascading Style Sheet (CSS) formatting options instead.

Tabbed Document Windows

click to expand

In earlier versions of Dreamweaver, working on multiple pages meant having to have multiple windows open. Whilst this was fine when working with 2 or 3 documents, it became unwieldy and laboriously slow when working with many more.

With this in mind, Macromedia has developed tabbed document windows. With this feature, all documents are opened within one window, and the user is shown tabs containing the filenames of these documents. These tabs are clickable, and allow for easy switching between multiple documents.

This approach is far superior, as it consumes fewer screen resources on the development computer and because the developer no longer has to break their workflow constantly when working on multiple documents.

With the development of more integrated tools within the Dreamweaver UI, there was a need for a more "task"-orientated approach to creating pages. Dreamweaver MX is able to create many types of different web-based documents, from HTML pages to Extensible Markup Language (XML) files. Because of this, a New Document wizard has been integrated into Dreamweaver to help you choose the type of document that you wish to create.

The New Document Wizard

click to expand

As you can see from the screenshot above, this approach is very similar to that used in many other software packages, most notably Microsoft Word. From this one window, you can create any kind of document that you need to. You can even create pages based on templates that you have created. This is a wonderful feature, as it allows you to create a page design and save it as a template, making the process of creating similar pages with differing content much quicker. This window will come in useful later when we look at the use of templates in greater detail.

Now that you are more familiar with the new user interface, we will look more closely at what this book is really about, the native implementation of PHP within Dreamweaver MX.



Dreamweaver MX PHP Web Development
Dreamweaver Mx: Advanced Php Web Development
ISBN: 1904151191
EAN: 2147483647
Year: 2001
Pages: 88

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net