| If the functionality you want is going to be used only once on your site, you may want to simply hand code to do the job on that page. Although hand coding can be quick and familiar for programmers, the main drawback of hand coding is that you are producing a "one-off." The code you have written is not reusable by others. Even if you are an expert programmer for your chosen application server, there are probably others in your team who are not. When you use copy and paste to reuse code, you are depending that the code has been selected properly and that the parameters and variables you have used on one page are going to be valid on another page. Resources for Learning Server-Side Programming Throughout the rest of this chapter, it is assumed that you are familiar with the coding techniques for your chosen application server. You should already have some experience of writing dynamic pages by hand, without having to rely on Dreamweaver's behaviors. If you want to learn how to program your application server, following are some books and Web sites you could start with. ColdFusion If you are completely new to programming, ColdFusion is the best application server to start with. It is much easier to code than any of the others, using a tagging system similar to HTML. ColdFusion also deals with a lot of the low-level "plumbing," such as object management, for you; in other application servers you have to code this up yourself. Dreamweaver has a lot of support for ColdFusion. Go to the Help menu and choose Using ColdFusion. You will find a lot of help there, including a tutorial. You can also read the ColdFusion documentation that is on the Dreamweaver MX CD. Look in the ColdFusion folder, and then in the ColdFusion Documents subfolder. The best place on the Web to start for ColdFusion information is the Macromedia Web site (http://www.macromedia.com). ASP and ASP.NET The Microsoft developers network Web site (http://msdn.Microsoft.com) is the first place you should go. Other useful Web sites are 15 Seconds (http://www.15seconds.com) and 4 guys from Rolla (http://www.4guysfromrolla.com). Many books are available for both ASP and ASP.NET, but if you are starting out you should look at the slightly more straightforward ASP first, before moving on to ASP.NET. A good ASP book to start with is Teach Yourself E-Commerce Programming with ASP in 21 Days, by Stephen Walther, Steve Banick, and Jonathan Levine, published by Sams Publishing. JSP Learning JSP is a bit harder than other server-side technologies. It is usually assumed that you are already familiar with programming and that you already know ASP or Java. A good place to start is the Sun JSP documentation page at http://java.sun.com/products/jsp/docs.html. PHP A 10-part tutorial about PHP that is aimed at beginners is part of the Web Developer JavaScript Web site at Internet.com. It is called "Learning PHP: The What's and the Why's," by Elizabeth Fulghum. The rather obscure URL is http://webdeveloper.earthweb.com/webjs/article/0,,12721_900521,00.html. A site called "Learning PHP" has, unsurprisingly, a number of PHP tutorials on it. Go to http://www.phphelp.com. Support for Hand Coding in Dreamweaver Much of the support for hand-coding in Dreamweaver is aimed at the HTML coder, but a lot of support is also available for ColdFusion, ASP.NET, and other server-side technologies. This makes Dreamweaver MX an excellent editor for ASP, JSP, and PHP. Views and Other Editors Dreamweaver has always let you see your code easily, and Dreamweaver MX extends this further. As you have already seen, three views can be chosen at the click of a button. Design view gives you a visual page layout view. It renders the page in roughly the same way a Web browser would, but lets you see elements, such as comments, that would normally be invisible in the browser. The design view is the best choice when designing the page layout with HTML and CSS. Code view shows you just the HTML, JavaScript, and server-side code in the page. Although you see every detail of the code, it's hard to imagine what the final page will look like. Code view has many options for customizing the workspace, which is covered in the next section. Split view splits the screen in two so that you can see the code view at the top of the screen and the design view at the bottom. This view is great for seeing the interaction between the page code and how the page looks. However, I find the two views a little cramped for sustained work, and I use this view only for fiddling with the page design after I've done the main work. Another view that you may prefer to use is the HomeSite/Coder-style workspace. This option is provided just after you install Dreamweaver, and most people forget about it. If you are used to using HomeSite, ColdFusion Studio, or another code-based editor, you may prefer the layout of this workspace, as shown in Figure B.5, with the panels docked on the left side. To get this workspace, choose Edit, Preferences, and then choose the General category. Next, click the button marked Change Workspace. Select the HomeSite/Coder-style workspace option (the nostalgic could also choose the Dreamweaver UltraDev workspace). Figure B.5. The HomeSite/Coder-style workspace may be more comfortable to previous users of HomeSite or ColdFusion Studio.
HomeSite+ If you just can't live without a code-only editor such as HomeSite, you can install HomeSite+, which is on the Dreamweaver installation CD. HomeSite+ combines HomeSite 5 and ColdFusion Studio 5 to give a code-only editor with lots of ColdFusion support. It is a simple, lean program that is perfect for quick code adjustments or for coding languages such as Perl and Java, which Dreamweaver does not support very well. HomeSite is a Windows-only program. You are able to use both Dreamweaver and HomeSite+ for the same files. Changes you make in one program will be carried over into the other. In Dreamweaver, choose Edit, Edit with HomeSite. The first time you do this, the menu will read Edit with External Editor, and you will need to tell Dreamweaver where Homesite+.exe resides (usually in C:\Program Files\Macromedia\HomeSite+). If the file has not been saved, you are prompted to save it. After you have finished editing the file in HomeSite+, click the Dreamweaver button in the editor toolbar. Figure B.6. HomeSite+ is a great code-only editor that integrates with Dreamweaver MX. You can install it from the Dreamweaver CD.
If you have another editor that you like to code in, you can set up Dreamweaver to integrate with that editor instead. Choose Edit, Preferences, and the File Types/Editors category. Next to the box marked External Editor, shown in Figure B.7, click the Browse button and choose the EXE file of your preferred code editor. Figure B.7. You can choose your own favorite code editor to work alongside Dreamweaver MX.
Using Dreamweaver's Code View For nearly all coding tasks, Dreamweaver's code view does the job as well as any code-only editor. You can set up a lot of your own preferences for how you like to work in code view. Select View, Code View Options. A small menu pops out for you to turn options on or off. Word Wrap automatically wraps code onto the next line at column 76 (you can change this column in Preferences) but does not insert a newline or carriage-return character. This option is useful in conjunction with line numbering and when your screen is at a lower resolution. Line Numbers displays line numbers along the left side of the code screen. A line with no number is wrapped from the previous line. It's a good idea to keep line numbering on. If your page has an error, the browser will often display the line number where the client-side or server-side code encountered a problem. Highlight Invalid HTML means that Dreamweaver will highlight in yellow any HTML code it does not recognize. This option is useful if you are using a server-side technology Dreamweaver recognizes, but it can be a nuisance if you are editing any "unusual" files, such as Perl scripts. Highlighting usually goes on or off only after a refresh. Syntax Coloring should invariably be left on it's a great tool to help you spot mistakes in your code, such as not finishing off a string. Auto Indent should also be left on it means that when you press Return, the next line is indented the same as the previous line. It's important to indent your code to highlight if blocks and loops. It makes your code much easier to follow, both for yourself and others. By choosing Edit, Preferences, you can also set other coding preferences. Most of these are fairly minor, and you can look them up in Dreamweaver's help files. The default options already set by Dreamweaver give the most flexibility for hosting pages on different systems and servers. The Code Panel As you are writing your code, the Code panel provides some great resources to help you. Expand it by clicking the arrow on the left side of the bar. The Tag Inspector, on the left of the screen and shown in Figure B.8, provides you with a hierarchical view of the document. It's particularly useful for pages with complex layout, such as nested tables, or where there's lots of interactivity between your server-side code and HTML. As you click a tag in the Inspector, it becomes highlighted in the code, and as you move through the code view window, the corresponding tags will be highlighted in the Inspector. This means you can easily locate bits of code in long, complicated pages. Figure B.8. The Tag Inspector interacts with the code view window so that you can easily locate particular tags and view their properties, as we are doing with this dynamic hyperlink.
Underneath the tag list is a list of properties for each highlighted tag. You can edit or set tag properties here, and it will update the code. Snippets Code snippets are a new feature in Dreamweaver MX that have been inherited from ColdFusion Studio. Snippets are a bit like library items for code. Unlike library items, however, they do not automatically update, nor are they tied to a particular site. Dreamweaver has some code snippets already built in. These are snippets of HTML and JavaScript to do common client-side tasks. The Snippets panel, which is shown in Figure B.9, shows the selected snippet in the top window. Snippets are organized into folders in the window below. Figure B.9. Code Snippets let you reuse code. Dreamweaver already has some supplied snippets, such as this code to write a cookie with JavaScript.
To insert a code snippet, place the insertion cursor on the page where you want the snippet to go. Choose the snippet you want and right-click it (Control+click on the Mac). Then choose Insert from the pop-up menu. To create your own snippets, you should first create a new folder for your own type of snippets. Right-click (Control+click on the Mac) in the Snippets window and choose New Folder. If the folder is created in the "wrong" place, you can drag it to the level you want. Highlight the code you want to use as the snippet and right-click (Control+click on the Mac) to choose Create New Snippet from the pop-up menu. You will then be presented with the dialog box shown in Figure B.9 to fill in the snippet name and description. If you want the code to flow around a selected object, such as an image or table cell, select the Wrap Selection option, specifying which part of the code goes before the object and which after the object. If the code is a standalone block, such as the example in Figure B.10, choose the Insert Block option. You can also choose whether you see the snippet preview as code (most likely) or in design view. Figure B.10. When you insert a snippet, you also specify its attributes for other designers and you to see.
Reference The right tab of the Code panel gives you access to a wealth of reference material. It includes reference books about HTML, CSS, Accessibility, JavaScript, ColdFusion, ASP and JSP. It's like having a bookshelf on your computer. To look up a tag, right-click (Control+click on the Mac) it when the Reference panel is open. The reference for that tag will be shown. To browse the reference manually, choose the reference book you want to look at; below that, choose the tag or object and to its right the tag or object attribute that you want to learn about. Tag Completion For coders, one of the most exciting new features of Dreamweaver is code completion. With Code Hints, as Dreamweaver calls them, you get help about the particular tags and objects while you type them, as you can see in Figure B.11. This can really speed up coding by giving you the allowable attributes for an HTML or ColdFusion tag or the available methods and properties of ASP and other application server objects. As long as you have code hints switched on, you will see lists of attributes, properties, or methods for supported tags and objects. Figure B.11. Code Hints can really speed up your hand coding by showing you the allowable attributes, properties, or methods for a tag or object.
To turn Code Hints on, choose Edit, Preferences, and the Code Hints category. As you can see from Figure B.12, you can turn tag completion on or off and specify how long Dreamweaver will wait before dropping down the completion menu. You can also specify what types of hints you want Dreamweaver to supply just turn them all on! Figure B.12. Make sure Code Hints is turned on if you want to take advantage of this productivity bonus.
If you are an experienced programmer, hand-coding is very easy using Dreamweaver MX. Although UltraDev was considered a good tool for Visual Design, but with limited support for coding by hand, Dreamweaver MX includes lots of new tools that really help us to introduce our own code, to go beyond the built-in server behaviors. Dreamweaver MX now rivals many of the traditional development tools that have been used by Web and Database developers. | 
