| With the new release of Dreamweaver MX, Macromedia added some features to really improve workflow. One example, which is targeted toward the less-technical or less-experienced Web developer, is the Site Set-Up Wizard. Other new features target seasoned developers and experienced Dreamweaver users. Features offered are the JavaScript drop-down menu behavior, Pre-built Components, and enhanced Dream Templates. There is something for everyone in terms of improving work performance. Dreamweaver MX is truly the most efficient tool in Web development. Site Set-Up Wizard My opinion is that Macromedia included this feature to help converted FrontPage users get up and running in Dreamweaver as quickly and as effortlessly as possible. Let's take a glance at what the wizard can do for you. The wizard walks you through step-by-step in setting up the crucial fundamentals of Dreamweaver Web development. To access this wizard, choose Site, New Site. Be sure to have the Basic tab selected, as shown in Figure 1.10. -
The first question asks you to name your site. This name is simply a way for you to refer to the site within Dreamweaver and has no real bearing on the Web site itself. For that reason, this is the only place in Dreamweaver where spaces and special characters are acceptable in your naming conventions. Click the Next button to continue. -
After you click the Next button, you are presented with another question. Dreamweaver needs to know if you intend to build Web pages that include middleware code, such as ColdFusion, ASP, ASP.NET, JSP, or PHP. If you choose Yes, a drop-down menu appears, asking you to choose the middleware. After you choose Yes or No, click the Next button. A new section appears. -
In this next section, you need to determine how you are going to edit (create) your pages. The first choice is on your local machine, which is recommended. If you must create pages over a local network, choose that option. Finally the last option, edit on server through FTP or RDS, makes sense only if you do not have access to a local Web server and you have high bandwidth. Click Next to bring up the next screen. -
On this page, fill out information on how you connect to your Web server. Your choices are None, FTP, Local Network, RDS, SourceSafe Database, and WebDav. After choosing your type of connection, you must determine what folder on the server you want to upload your files to. Click Next to advance to the final screen. -
The final screen provides the information that you have filled out throughout this process. One of the key things to be aware of is that Dreamweaver is automatically creating a local root folder for you. This folder will be saved in My Documents in Windows or on the desktop of a Macintosh. The local folder that the wizard creates for you will be named the same as what you named the site in step 1.
Figure 1.10. The Basic Site Definition dialog box, now warmly called the Site Set-Up Wizard.
Again, I think this feature is best suited for new users of Dreamweaver or someone who is converting over from a lesser program. If you're a seasoned Dreamweaver user, the Site Definition dialog box you know and love is located under the Advanced tab. Layout and Code Quickstarts Creating a new document in Dreamweaver MX is no longer like your typical application. When creating a new document, you are presented with a series of choices in the New Document dialog box, as displayed in Figure 1.11. Figure 1.11. The New Document dialog box new in Dreamweaver MX.
I will be honest with you the first time I saw this, I said out loud, "Come on. You've gotta be kidding, right?" After the Set-Up Wizard and now this, you may have thought that Microsoft was playing a role in the development of Dreamweaver MX. Well, after using the application for a bit, this actually grew on me. This dialog box offers a few options to actually increase production time. If you refer to Figure 1.11, you'll notice that this dialog box has two tabs. The first is for someone creating a brand new document. The other is to select a template already designed and used in all the local or defined sites within Dreamweaver. So if you are working a site you just set up, but you also have four or five other sites defined within Dreamweaver, you would have access to any of those templates within this New Document dialog box. The General tab offers eight categories: Basic Page Here you have the option of setting up a standard HTML document, an HTML Template document, a library item, a cascading style sheet, a JavaScript document, and an XML document. Dynamic Page This section creates a document for different types of coding to create Web applications. Included are ASP/JavaScript, ASP/VBScript, ASP.NET/C#, ASP.NET/VBScript, ColdFusion, ColdFusion Component, JSP, and PHP. Template Page This offers the capability to create any one of the dynamic standards listed in the previous bullet as a template. Other This category is perfect for creating ActionScript, VBScript, XML, Java, JavaScript, and a host of other programming documents. Because of the tight integration with HomeSite and ColdFusion Studio, Dreamweaver MX is not only the leader is WYSIWYG Web development, but offers the coding environment of choice for professional programmers. CSS Style Sheets With this option you can choose to create style sheets with predefined typefaces and color schemes. Framesets The frameset option makes the most sense to me. If you have a design in mind and plan to use framesets, your best bet is to use them, or create them from the get go, by choosing one of the predefined frameset configurations. Of course, you are not limited to these configurations; you can always customize them after you get into Dreamweaver. For more information on framesets, see Chapter 7, "Framesets." Page Designs This option can be handy if you need to rapidly build a Web page. These page designs act as starting points, intended for editing by a designer. You'll notice there are Greek text placeholders as well as image placeholders. You can tweak any element of this in initial layout. Page Designs (Accessible) This category is much like the preceding one, with the exception of complete compliance with the accessibility standards for people with disabilities. Often, this compliance offers a disabled person a more informative session with a screen reader. Enhanced Dream Templates Macromedia spared no expense with its new enhancements in the template category. You can now effectively nest templates, allowing contributors a wider span of options without compromising the design and layout of the site. However, with too many new features to list in this one category, I created an entire chapter just for Dream Templates. If this sounds like your cup of tea, or if your boss forced this cup of tea upon you, please read on and enjoy Chapter 8, appropriately titled "Dreamweaver Templates." JavaScript Drop-Down/Pop-Up Menus The wildly popular, yet sometimes buggy, feature of Fireworks 4 has found its way into this version of Dreamweaver. I must say the enhancements are wonderful, and most bugs have been squashed. This newer version of the behavior is a first for Dreamweaver, but it comes with some handy options not available in the Fireworks 4 counterpart. My favorite new addition is the alignment options, which can save a bundle of time in your own Web projects. The following steps will help you to build a pop-up menu using the new behavior in Dreamweaver. It's quite clear and concise, but there are a few tricks along the way. (Besides, being only a few pages within this book, this will offer instant gratification.) -
Download the premenu.html document from the Dreamweaver MX Unleashed companion Web site located at http://www.dreamweavermxunleashed.com. Be sure to navigate to the Chapter 1 section after you're on the site. -
After you've downloaded the document, open it inside Dreamweaver. Highlight the text in the gray cell as shown in Figure 1.12. Figure 1.12. Highlight the text in the small cell in the top-right corner of the document.
-
With the text highlighted, notice the pound (#) sign in the Link text field of the Properties Inspector. This is necessary because you can't apply a behavior to text; however, it is possible to apply behaviors to hyperlinks. The pound sign transforms static text into hyperlinked text. With the text still highlighted, open the Behaviors panel. By default, the Behaviors panel is nested within the Design panel group. Click the plus (+) sign to access the drop-down menu, and in the drop-down menu choose Show Pop-out menu. This launches the Show Pop-out Menu dialog box as shown in Figure 1.13. Figure 1.13. The Show Pop-out Menu dialog box.
NOTE To apply the Show Pop-out menu, you must have the document saved. -
Notice that the Contents tab is the initially selected option. Here in the text field, type the label or name of your hyperlink, the way you want it to physically appear in the drop-down menu. For this example, type Train Simple. -
After typing the words Train Simple, we'll hyperlink it to Train Simple's Web site. In the hyperlink text field, type the absolute URL, http://www.trainsimple.com. After typing the hyperlink, press the Tab key. Notice that the text and the link have been added to the menu, as shown in Figure 1.14. The large portion of the dialog box, where the text and the link have been added, represents what will appear in the pop-out menu. Figure 1.14. The text and hyperlink you entered in the top portion of the dialog box is now displayed in the menu area.
-
Click the plus sign in the top-right corner to add additional text to the pop-out menu. For this menu item, type Macromedia into the text box and press Tab to advance the cursor to the Link text box. Notice that the last hyperlink is still visible in the hyperlink text field. Change the existing link to read http://www.macromedia.com. -
Repeat step 6 three more times with Web sites of your choice. Now that you have five menu items and hyperlinks corresponding to those menu items, you can create submenus for any one of those items. For example, Train Simple is well known for its Up to Speed training CDs, and many people visit the site for that reason alone. We can add a submenu of the Train Simple menu item to read Up to Speed, with a hyperlink pointing to that exact portion of the Train Simple Web site. -
As in step 6, type Up to Speed into the text field. Tab to the hyperlink text field and type in the correct path to the Web site; for this example, type http://www.trainsimple.com/products.htm. Press the Tab key to add it to the menu. -
In the body of the dialog box, highlight the Up to Speed option; using the Up arrow, move it so it is placed underneath the Train Simple option, as displayed in Figure 1.15. Figure 1.15. In this example, you move the Up to Speed option beneath the Train Simple option to prepare the submenu.
-
With the Up to Speed option now placed properly, click the Indent Item button to force this option to be a submenu to the item above it. The Up arrow is in the top portion of the dialog box. -
Click the Appearance tab toward the top of the dialog box to move to the next section. This section is the fun part you get to choose what your menu will look like, in terms of color, size, typeface, alignment, and vertical or horizontal orientation. Notice the font list contains common fonts shared across different computer platforms. For this section, you need no instruction. Pick the colors and fonts of your choice. -
Now that you have had the chance to show off your artistic side, it's back to business. Click the Advanced tab to move the dialog box to the next screen, as shown in Figure 1.16. Here you choose how big and what the cells will look like. Figure 1.16. The Advanced portion of the Show Pop-Up menu offers many options for cell sizing and style.
-
I'm going to leave everything set to default values. Feel free to make any adjustments you want. If you're unclear as to what these options are, refer to Chapter 19, "Behaviors." -
Next, click the Position tab. You'll see a series of buttons. In these buttons are small blue boxes, which represent which way the menu will pop out. If you move your mouse over any of the buttons and pause for a moment, a ToolTip will be revealed, offering a brief description about how the menu will pop out. For our purposes now, I'm going to choose Below and at Left Edge of Trigger. -
When you're happy with the settings, choose OK. This will place you back inside the document. Press F12 on your keyboard or choose File, Preview in Browser, and choose the browser of your choice. This launches the browser specified. -
Inside the browser, mouse over the button to reveal the menu as shown in Figure 1.17. If you mouse away from the menu, it will disappear. Figure 1.17. The drop-down menu works great in many browsers and browser versions.
The Set Pop-Out menu behavior is new to Dreamweaver MX, and as you can see, in just a few short seconds you can create a functional, bug-free drop-down menu, which would otherwise take you hours to hand code. |
