Coding Options in Dreamweaver MX
|
We're now going to look at the many ways you can create and edit code (both PHP and HTML) in Dreamweaver MX.
Code View and Code InspectorThere are a number of different ways to view your code within Dreamweaver MX. You can display your code in the Document window by turning on Code view, you can use the Code inspector to view and edit your code in a separate window, or you can split your Document window in two, and see both the page and its underlying code.
It's also worth noting that there are shortcuts for the three views of the Document window (Code, Page and Code, and Page) on the Documents toolbar, which are shown here. You can turn on the Documents toolbar by selecting View-> Toolbars -> Document from the main menu bar.
Code Options in Preferences WindowThere are a number of options for how code is displayed that can be set in the Preferences window. To open the Preferences window, select Edit -> Preferences from the main menu bar, or use the shortcut keys Ctrl + U.
Code Coloring OptionsThe first option we'll look at is Code Coloring, so click on Code Coloring in the Category menu. From the list of languages that appears, select PHP, and then click on Edit Coloring Scheme. If you scroll down the "styles for" menu in the new window that appears, you will see a number of PHP options. You can select the text color and background color, as well as bold, underline, and italic for each of these options. This is particularly useful if you are migrating from another development program, and you are used to a particular set of colors representing different sections of code. The effects of the changes you make can be seen immediately in the preview area. When you have finished making any changes, click OK to continue.
Code Format OptionsThe next category we'll look at is Code Format. This presents a new set of options, which are used to determine how the code is formatted in Code view. You can set whether spaces or tabs are used to indent the code, and how many, and set the case of your HTML tags to either uppercase or lowercase, or a combination of both. One important selection is the Line Break type. This should be set to either CR LF (Windows) or LF (Linux) depending on the type of server your pages will be running on. An incorrect setting can cause your code to be laid out with extra spaces between lines. Although this does not cause problems, it can make your code harder to read.
Code HintsNext, select Code Hints in the Category menu. These options modify the way that hints are given to you as you type your code. Make sure the first two options, Enable Auto Tag Completion and Enable Code Hints are both turned on - we'll be looking at these in detail shortly. Also make sure all items in the Menus list are checked.
Code RewritingCode Rewriting is the next set of options we'll be looking at in the Preferences window. Most of the options affect your HTML, rather than PHP code, but there is one option we are particularly interested in: Never Rewrite Code. In this option, a number of page extensions are specified, which Dreamweaver MX recognizes. If the page extension of the page you are working on matches a page extension in this list, Dreamweaver MX will ignore any of your hand coding - it will not alter it in any way, which guarantees the code will appear exactly as you intended. With a default installation of Dreamweaver MX, the extensions .php and .php3 are included already in the list. If you are using a different extension for your PHP pages, you should add your page extension to the list. It is important not to remove the .php and .php3 extensions from the list. If you do, Dreamweaver MX will not recognize your PHP code and could modify it, causing syntax errors when you run the page on your server
FontsThe last set of options we will be looking at in this section is Fonts. Here you can set the fonts and sizes for different parts of the Dreamweaver MX interface. The particular option we are interested in is Code View, which by default is set to Courier New, and is usually 9pt or 10pt. If you are using a high monitor resolution, you may find the text in the Code view is too small to read comfortably with these settings, in which case you should increase its size here. To close the Preferences window and save your changes, click the OK button.
New Hand Coding Features in MXIn this section, we'll be taking a look at the new hand coding features included in Dreamweaver MX. In each Dreamweaver release the coding environment has been improved, and this release is no exception - there are a number of new features to make life easier when hand coding.
Code HintsOne of the major new features of Dreamweaver MX is the Code Hints system. This system monitors the code that you type, so that when you type certain characters, it can pop up a list of suggested options to complete the code you're typing. You can use Code Hints to:
Let's play with this feature to see how it works. Open a new PHP page in Dreamweaver MX: choose File -> New from the main menu bar, click on the General tab in the dialog box that appears, select Dynamic for the page category, and then select PHP. Open the Code inspector by pressing F10, and place the cursor between the <body> and </body> tags. Type <, and you will notice a pop-up list containing all the available HTML tags. We'll insert a simple horizontal rule onto our page, so from the pop-up list double-click on <> hr. You will see that hr is added to the < you typed initially. Press the space bar once, and another list pops up, this time containing all of the different attributes for the <hr> element. Scroll down the list, double-click on width, and you will see that it adds the attribute width = "", with the insertion point between the two double quotes. Enter 200 for the width value, and then close the tag with a >. You should now have:
<hr width="200"> Go back into Design view, and you'll see the horizontal rule, 200 pixels long, displayed in the center of the screen. Next, go back into the Code view, and position the cursor to the left of the closing > of our tag. Press the space bar, and the attributes list pops up again. This time, double-click on align - align="" will be automatically inserted into the code, and a new pop-up menu appears listing the available alignment options: left, right, or center. Double-click on left and it will be inserted between the quotation marks. Your inserted tag will now read:
<hr width="200" align="left"> Once again, go back to the Design view. As expected, our horizontal line is now on the left of the screen. Many hand coders may not wish to change between using the keyboard and the mouse, so there are other options for selecting an item from the lists that pop up. You can scroll to the item using the arrow keys, and then press the Return key to add it to your code. Alternatively, you can type the first few letters of an item until it becomes selected and then press the Tab key to add the chosen item. This system makes entering HTML code by hand a much quicker and easier process, and also means that you have all the tag attributes instantly at hand without having to consult a reference.
Code Hints also has various PHP tag and function references built in. For example, in Code view type the following:
<?php $mySQL = mysql_connect( After you have typed the opening parenthesis of the function, a Code Hints box pops up, showing the protocol for the mysql_connect () function, as shown in the screenshot below. This makes entering PHP code much easier, as there is an instant reference for the function you are using, showing the parameters and data format the function expects. As you add the various parameters for the function, they are removed from the Code Hints box, so you can see which parameters have not yet been filled in. PHP default variables, such as $HTTP_POST_VARS, are also recognized - after typing the first few characters, you can add the desired variable by double-clicking on it in the list that appears. If you don't wish to use the Code Hints system, you can turn it off in the Code Hints section of the Preferences window, which we talked about earlier in this chapter.
The Insert PanelThe Insert panel normally sits at the top of the screen, although it can be dragged to a different location, if required. If the panel is closed, you will see a white arrow pointing to the right, and the word Insert. Click on the arrow or the word Insert, and the panel will open revealing a number of different tabs. Click on the PHP tab. (If this is not displayed, it means that Dreamweaver MX does not recognize your page as a PHP page. Save your page with a .php extension, and the PHP tab will appear.) Under the PHP tab, there are a number of buttons - when clicked, they will automatically add their respective PHP code into the Code window. To see what code a particular button will insert, hold your mouse cursor over the button. After a short delay, its description will be displayed. Point the mouse at each button in turn, and you will see all the built-in PHP functions that can be inserted. If you click on the button with the description More Tags..., the Tag Chooser window will open. Click on PHP Tags, and extra PHP tags that can be automatically inserted are displayed. All tags are inserted at the current location of the text cursor. For example, in Code view, click the <? button (with the description Code Block), and you will see that Dreamweaver MX automatically inserts the code below at the current cursor position:
<?php ?> If you select some text and then click a button, the inserted code will be wrapped around the selected text. For example, if you select some text and click the /* */ button (with the description Comment), comment syntax will be wrapped around the selected text. The code available from the Insert panel can also be inserted by selecting Insert -> PHP Objects from the main menu bar.
The Tag EditorAnother new feature is the tag editor, and the best way to view it in action is with a demonstration. On a new page, insert a table, with three rows and three columns. Once the table has been inserted, select it in Code view by clicking on the <table> element, and then click the right mouse button. From the pop-up menu that appears, select Edit Tag <table>. Alternatively, you can use the tag editor keyboard shortcut, Ctrl + F5. The tag editor window appears, which offers an easy way to change all available attributes for the <table> tag. For the selected <table> tag, the tag editor displays five sets of options. These are:
The tag editor is shown below, showing the Browser Specific options: We'll now take a quick look through all the options, as there are a number of new features.
GeneralThe General menu offers the standard options for the <table> tag, such as alignment, width, border, cell padding, etc.
Browser SpecificThe Browser Specific menu contains options that only apply to certain browsers. Next to each option you'll see browser icons and numbers, which represent the versions of browsers that support that particular option. Details are included for Internet Explorer, Netscape Navigator, and Opera.
Style Sheet/AccessibilityThis set of options allows you to assign CSS style settings to the table.
LanguageThe Language menu allows you to set various international language options to the table.
EventsThe Events options are one of the most convenient features of the tag editor. When you click on the + icon to expand the Events menu, you'll see a list of all the applicable JavaScript events that can be applied. You can click on an event, and then enter JavaScript code directly into the textbox. All relevant code is then inserted for you automatically. This makes adding and editing code for the events a much easier process, and by removing all excess code and leaving just the code you want to see, it also makes debugging easier.
Tag InfoTag Info isn't a menu option, but can be activated by clicking on Tag Info at the bottom right of the tag editor, just above the Cancel button. The dialog box then expands, and a tag reference is displayed for the tag you're currently editing. This is an extremely helpful feature as you constantly have an HTML reference available for any given HTML tag. Finally, click OK to apply your changes.
Quick Tag EditorThe quick tag editor allows you to quickly insert an HTML tag in the Design view. It is activated by pressing Ctrl + T, and has three modes:
It opens in the most appropriate view for the selected tag or cursor position. However, once open, you can cycle through the available modes by pressing the Ctrl + T key combination. The next figure shows the quick tag editor in Insert HTML mode:
Insert HTMLWhen you are inserting a new HTML tag, if you position your mouse pointer over the angle brackets in the quick tag editor (<>), a pop-up menu will appear with a list of all available HTML tags. Double-clicking a tag in the pop-up menu inserts the chosen tag for you. Pressing the space bar will again open a pop-up menu containing a list of attributes for your chosen tag (if there are any available). This allows you to quickly add new HTML tags, and to make sure that only valid attributes are entered.
Edit TagYou can edit an existing HTML tag by selecting the object in Design view and opening the quick tag editor with Ctrl + T. The quick tag editor will display the HTML tag for the selected object only - you can then add, edit, or delete the tag attributes. Placing the cursor after an attribute in the quick tag editor and pressing the space bar, will open a new pop-up menu with all available attributes for the tag being edited. Simply double-click on an attribute, and it will be automatically inserted. You can easily move between attributes in the quick tag editor by pressing the Tab key to move forwards and Shift + Tab to move backwards. Press Return at the end of the line to apply your changes. If you enter any invalid HTML, Dreamweaver MX will attempt to correct the code for you automatically. It does this by automatically closing any open quotation marks, or adding missing end angle brackets.
Wrap TagBy selecting an object or unformatted text in Design view, you can easily wrap the selection with a set of HTML tags - pressing Ctrl + T opens the quick tag editor in Wrap Tag mode. Simply enter an opening tag, for example, <b>, and press Return. Your tag is inserted at the start of your selection, and the appropriate closing tag is automatically added to the end of the selection.
PHP TagsIn Design view, if you invoke the quick tag editor, by selecting a PHP icon and pressing Ctrl + T, the PHP code will be shown, and can be edited, without having to switch to Code view.
The Tag InspectorThe next feature we'll examine in this section is the Tag inspector, which is located in the Code panel, by clicking on the relevant tab. The Tag inspector shows a hierarchical view of all tags in the current document. At any time you can select an object on the page, or click on a tag in the Tag inspector, to get a list of the tag's attributes, which you can add to, edit, or delete.
The Tag Library EditorThe Tag Library editor allows you to add to and edit the built-in Tag Libraries at the core of Dreamweaver MX, which are used in all the various tag editing features. To call up the Tag Library editor, you need to select Edit -> Tag Libraries from the main menu bar. The dialog box that appears is shown in the figure below. The dialog box contains all the tag categories and subcategories, and allows you to add new tags or attributes to the library, or edit existing ones.
Adding New TagsTo add a new tag to the library, click the + button and select New Tags. You can now select the category the tag will appear under, and give the tag a name. As an example, we'll add a new custom HTML tag, <content>, which could be used in a content management system to hold details of the page content. In the Tag Library editor, click + and select New Tag Library. The following window will appear: Enter custom for the library name, and then click OK. You will now see a new folder called Custom in the Tag Library editor. Select the folder, and from the Used in options in the box underneath, select HTML. We now need to create our <content> tag. Click the + button again, and select New Tags. Select the Custom Tag Library we just created, and enter content for the tag name. Select Have Matching End Tags, so Dreamweaver MX will automatically include a closing tag for our <content> tag. Click OK to add the tag. The tag will now be inserted into the Custom folder, and you will see some new options to format the tag. Run through the various options to see the effects. We used line breaks before, inside, and after the tag, and set the contents to be formatted and indented. Once you have added a tag, you can click the + button again and select New Attributes to add extra attributes for that tag. We're going to create a new attribute for our <content> tag called title. Select Custom for the Tag Library, the content tag we just created, and enter title for the attribute name. You can enter more than one attribute at once by entering the attributes separated by a comma and a space, for example:
title, length, keywords For now we'll stick with just a single attribute, so select OK. Our attribute has now been inserted, under the content tag. Note that you can select the Attribute Case, and Attribute Type. We will stick with the default options, as shown in the figure above. Click OK to close the Tag Library editor. If you now go into Code view and type <content, followed by a space, Dreamweaver MX will automatically show the attribute we added in a Code Hint, as shown in the screenshot opposite. The new tag information for our <content> tag is also available in other places, such as the Tag Inspector.
Editing Existing TagsIf you want to edit an existing tag, select the relevant category in the Tag Library editor, and then click on the tag or attribute you wish to change. As soon as you click on an item, you can select and change the various options available for that particular tag.
Deleting a TagTo delete a tag, or one of its attributes, click on the item in the tree view of the Tag Library editor and click on the - button. (Alternatively, press the Backspace or Delete key.)
The Snippets PanelAlthough small, the Snippets panel is well worth a mention, and is one of the most useful features to have been added. The Snippets tab is located in the Code panel, and is a library for small snippets of code that you frequently use. The code can be HTML, JavaScript, ASP, PHP, etc. It can be a straight block of code, or it can wrap around an existing piece of code. If you take a look at the Snippets panel, you will find it already contains a large number of useful functions, which you can insert straight into your code. As well as the predefined Snippets, and snippets you add yourself, there are a number of web sites which offer snippets of code that you can add to your personal snippets library. You can also easily share your snippets with other developers.
Adding a New SnippetTo demonstrate how easy the Snippets panel is to use, we are going to add the simple phpinfo () function, to the Snippets panel. Open the Code panel, if it's not already open, and then click on the Snippets tab, to bring the Snippets panel into view. Click the New Snippet button, which is one of those located at the bottom right of the Snippets panel. A new dialog box is displayed, where we can enter the details to create our snippet. For the name, enter phpinfo. If you want to enter an optional description for the snippet, you can. This is well worth filling in to explain complex functions, especially if you are going to be sharing the snippet with other developers. As this is only a very simple example, we just want the snippet to insert our line of code, so for Snippet Type select Insert Block. The other option, Wrap Selection, lets you wrap your code around an existing object or tag. If you had an object or piece of code selected when you clicked on New Snippet, you will see that the code for selection is automatically entered in the Insert Code box. This makes adding a block of code a very quick process. However, in this case, we want to enter our own function, so delete anything that is already written in the Insert Code box. Instead, enter:
<?php phpinfo(); ?> The last option to select is whether the code to insert is active in Design view or Code view. For this example, choose Code. Click OK to store the snippet. Your snippet will now be shown in the snippets directory tree. Since it's one of our own custom snippets, we'll make our own folder for it. Right-click at the root of the directory (next to Name), and choose New Folder. Call the folder PHP, and then drag your phpinfo snippet into the new PHP folder. We can just as easily create a new snippet that wraps around a block of code. Imagine that we have two PHP functions that print the HTML for the page header and page footer. We want to be able to create the body of the page, and then apply a snippet that adds the print_header () function at the top, above the body, and the print_footer () function below the body. Create a new snippet, by pressing the New Snippet button. Use Format Page for its name, and select Wrap Selection. Enter the following in the Insert Before box:
<?php print_header(); ?> and this in the Insert After box:
<?php print_footer(); ?> The Snippet dialog box should look similar to the one below. Click OK to add the snippet. Now you can select your page body, and insert this Format Page snippet. It will automatically wrap the code above, around your selection.
Inserting your New SnippetWe're now going to insert our snippet into our code. Switch into Code view, and place the insertion point between the <body></body> tags. Double-click phpinfo in the PHP folder and the code snippet will be inserted. Alternatively you can click phpinfo once to select it, and then click the Insert button on the Snippets panel. You will see that your code snippet:
<?php phpinfo(); ?> has been inserted into the code. Obviously this is only a very simple example, but larger and more complicated code blocks can be inserted just as easily. Over time, the Snippets panel will become more and more useful as you build up a library of all your frequently used blocks of code.
Editing an Existing SnippetTo modify one of your existing snippets, simply select the required snippet, and click the Edit Snippet button which is one of those at the bottom right of the Snippets panel. The Snippets dialog box appears, and you can edit your snippet, as well as the insertion options (as a code block, or wrapping an existing tag).
Deleting a SnippetDeleting a snippet is easy. Simply click on the snippet you want to delete, and click the Remove button. Alternatively, you can right-click the snippet and choose Delete, or select a snippet and press the Delete key.
Sharing a SnippetOne of the advantages of the snippets system is that the snippets can easily be shared. All snippets are stored in an easy-to-find location on your hard disk. This will be either in the Configuration\Snippets folder or in Windows 2000 in Documents and Settings\username\Application Data\Macromedia\Dreamweaver MX\Configuration\Snippets. They can be simply copied to disk, or sent as e-mail attachments to your chosen recipients, who can then copy the snippet files into their own Snippets folder. | |||||||||||||||||||||||||||||||||
EAN: 2147483647
Pages: 88