Introducing Expression Web—Toolbars
| CSharp-Online.NET:Articles |
| ASP.NET Articles |
| © 2007 Wiley Publishing, Inc. |
Toolbars
So far, you’ve learned that the menu bar can be used when you need to insert or modify elements within your Web pages. In the previous section, you saw that Task Panes offer specific property modification options to particular elements that you happen to be working with within the development area. While these options are perfectly acceptable for use, it’s important to understand that there’s an easier, more visual way of inserting, modifying, and working with elements within your Web pages in what are known as toolbars.
If you’re no stranger to Office applications, then there’s no doubt that you’ve used toolbars. Toolbars, which are usually fixed under the menu bar and above the Document window, provide a visual approach (through the use of icons) for inserting, modifying, and managing specific types of elements within the development area. For example, if you’re working with tables, you may decide to show the Tables toolbar. Alternatively, if you’re working with CSS, you may decide to show the Style and Style Application toolbars. Or, if you’re working within the Code view in Expression Web, you may decide to keep the Code View toolbar floating near or around where you’re typing in code. Doing so would allow you quick, visual access to commonly accessed features without your having to fumble around through a massive collection of menus and submenus, which can be the case when working with the menu bar.
| Out-of-the-box, Expression Web docks the Common toolbar under the menu bar and just above the Document window. Obviously, you’re not limited to having just this toolbar open. Furthermore, the toolbar doesn’t have to be docked in this location. As mentioned earlier in the chapter, toolbars, like the Task Panes and the menu bar, can be undocked and repositioned anywhere within the Expression Web interface. Alternatively, you may decide not to re-dock a toolbar, but rather to keep it floating for easier access. |
There are numerous ways of showing a particular toolbar, but probably none easier or more straightforward than choosing the toolbar you want to use from the View ➪ Toolbars menu. As Figure 1-7 indicates, I’ve opened and docked the Common, Style, Style Application, and Tables toolbars. I also have the Code View toolbar open. However, this toolbar is floating, whereas the others are docked.
Once the toolbar is open and visible, a simple click of the icon performs the operation that the icon represents. For example, if I open the Tables toolbar and click the Draw Table icon (the first icon to the left in the Tables toolbar), I should expect to immediately be able to draw a table onto my Web page.
| It’s important to understand that icons won’t always be enabled within a particular toolbar. An icon’s availability depends on the context for which you plan to use that feature that is ultimately offered by that icon. For example, if I haven’t inserted a Layer into my Web page, I shouldn’t expect options offered within the Positioning toolbar to become enabled. Additionally, unless I’ve already inserted a table, I shouldn’t expect table formatting features offered within the Tables toolbar to become available either. |
Figure 1-7: Positioning toolbars
Once a toolbar is open, you’re not forced to use or even see the icons within the toolbar. There may be
instances where you find that you’ll never use a specific icon, and just its presence becomes a distraction.
In this situation, you can hide specific icons within the toolbar.
You can hide specific icons within a toolbar by first rolling your mouse over the expander arrow located to the far right of the toolbar. The tool tip that appears should read “Toolbar Options.” Click it. The Add or Remove Buttons menu option appears. Now, click the expander arrow that appears from the Add or Remove Buttons submenu. The name of the toolbar appears just to the right of the expander arrow. Click it. Alist of available icons (representing functionality within the toolbar) appears in a list. Finally, check or uncheck the icons, representing the functionality that you may or may not want to use. When finished, your customized list may resemble Figure 1-8.
Figure 1-8: Customized list
You also probably noticed the Customize option that appeared when you selected the expander arrow from the Add or Remove Buttons submenu. Clicking this option (which is also available by choosing View > Toolbars > Customize) launches the Customize dialog. It’s within this list of toolbars that you’re presented with a complete list of 11 toolbars (minus the Menu Bar option, which enables or disables the menu bar at the top of the page). Also, it’s important to understand that, like the Task Panes, the toolbars are specific to the type of element you happen to be working on within the development area. The following table provides a complete list of toolbars, including a brief description of their uses.
| Toolbar | Usage |
| Standard | Lists standard document features such as the ability to create a new document, open an existing document, save, find, cut, copy, paste, undo, redo, and insert a table, hyperlink, layer, and more. |
| Formatting | Lists standard formatting features such as the ability to quickly show the CSS Task Pane, adding headings, fonts, font sizes, bold, italic, underline, alignments, lists, indentations, font colors, and more. |
| Code View | Provides functionality for working with code in Code view. Features such as adding bookmarks, selecting tags and parent tags, showing line numbers, and more, are displayed within this toolbar. |
| Common | Lists the most commonly used features within Expression Web. This is essentially a streamlined list of features taken from both the Standard and Formatting toolbars. This is one toolbar you’ll probably always want open. |
| Dynamic Web Template | When working with dynamic templates, use the Dynamic Web Template toolbar to visually add and manage editable regions, region labels, and more. |
| Master Page | Similar to the Dynamic Web Template toolbar, the Master Page toolbar offers features for working with ASP.NET Master pages. |
| Pictures | Use the Pictures toolbar to quickly add and manipulate images within your Web pages. Options within this toolbar include the ability to rotate, crop, and set the contrast, brightness, opacity, and color of an image. When working with Image Maps (images that may contain multiple hyperlinks defined as hotspots), the hotspot set of tools is also available within this toolbar. |
| Positioning | When working with Layers, use the Positioning toolbar to set the Layer’s position from the left, top, right, and bottom of the browser. You may also decide to set the width and height of the Layer within this toolbar, as well as the Z-Index, or stacking order of the Layer in relation to other Layers in your Web page. |
| Style | Use the Style toolbar to quickly apply classes or IDs to elements of your Web pages. You can also initiate the process of creating a new style or attaching an existing style sheet from this toolbar. Remember, this functionality is also offered within the Apply Styles Task Pane. |
| Style Application | Use features within this toolbar to set how CSS should be applied to the page.
Options include Auto (Expression Web creates a new style whenever you manipulate formatting properties) or Manual (you are responsible for manually building styles when formatting elements within your Web pages). |
| Tables | Offers features for working with HTML tables. Options include the ability to draw tables, add columns and rows, split and merge cells, align content within cells, set background colors, auto-format a table using predefined styles, and the ability to visually switch to Layout mode. |
 
|
