Touring the Expression Web Screen

Now that you're here, allow us to show you around the Expression Web workspace so that you can start getting comfortable.

REMEMBER 

As you get used to working with Expression Web, you may want to customize the workspace so that everything you need is visible on the screen and the features you don't use are tucked away from view. You can begin with the simple tour that follows, but when you're ready, feel free to experiment with the layout of the Expression Web workspace.

To start the tour, step right this way….

Workspace

The workspace is where you build your Web site and all its Expression Web parts (refer to Figure 1-1). If you have more than one Web site open at the same time, each Web site appears in its own Expression Web workspace window (see Figure 1-2).

Figure 1-2: Each separate Web site has its own workspace window with the path and title of the Web site.

Menu bar and toolbars

Like most other Windows programs, the menu bar at the top of the workspace contains all the Expression Web commands. You find buttons for the most commonly used commands on the Common toolbar, located just below the menu. (Expression Web has many more toolbars, which contain buttons for commands specific to a particular function. To show other toolbars, choose View Toolbars and then click the name of the toolbar you want to see.)

The Standard toolbar deserves special mention. It contains a handful of useful buttons not found on the Common toolbar-such as Spelling, Print, Cut, Copy, and Paste and the Format Painter-but doesn't have as many text formatting options. We suggest using the Common toolbar most of the time, and then popping open the Standard toolbar if you find that you need quick access to its buttons.

Tip 

Because the Common toolbar contains a lot of buttons, not all of them show up if your screen resolution is set to 1024 x 768 or lower. Click the down arrow at the far-right end of the toolbar to see all the buttons.

You can customize Expression Web toolbars by adding or removing commands. To add a command to a toolbar, follow these steps:

1. On the right side of the toolbar you want to customize, click the down arrow.

2. Choose Add or Remove Buttons Customize.

   The Customize dialog box appears.

3. If the Commands tab isn't already showing, click it.

4. In the Categories list box, select the menu containing the command you want to add.

5. In the Commands list box, click and drag the command onto the toolbar.

   As you drag, the cursor turns into an arrow pointing to a button.

   As soon as you arrive at the toolbar with your command in tow, an insertion point-it looks like a capital I-shows you where the button for the command would appear if you were to release the mouse button.

6. Move the cursor along the toolbar until the insertion point arrives at the spot on the toolbar where you want the button to live, and then release the mouse button.

   Voilà! The button appears on the toolbar.

7. If you want to add more buttons to the toolbar, repeat Steps 4 through 6 for each button addition. When you finish, click Close in the Customize dialog box.

Tip 

To remove a button from a toolbar, drag it down and off the toolbar. Expression Web is picky about certain toolbar buttons. If you try to remove a toolbar button and it doesn't budge, you can't remove it. Expression Web always lets you remove a button you added, though.

The Expression Web menu bar and all its toolbars can be dragged around the screen as free agents or fixed in various locations (called docking). When you first launch Expression Web, the menu bar and Common toolbar are docked at the top of the screen.

To move a docked toolbar, follow these steps:

1. Move your cursor over the left edge of the menu or toolbar until the cursor turns into a four-pointed arrow.

2. Drag the toolbar away from its original location toward the center of the screen.

   The menu bar or toolbar pops away from its location, and its title bar appears.

   When you let go of the mouse button, the toolbar stays where you left it. You can move it somewhere else by dragging its title bar.

You can redock the menu bar or a toolbar on any of the four sides of the workspace window. To do so, drag the menu bar or toolbar where you want it and, when it pops into its new spot, release the mouse button.

Tip 

Expression Web Help tells you more about customizing the menus and toolbars. To launch Help, choose Help Microsoft Expression Web Help or press F1.

Editing window

The editing window takes up the majority of the Expression Web workspace. That's where you add text, pictures, hyperlinks, and other goodies to your Web pages. The filename of each open Web page appears on its own tab. Figure 1-3 shows a Web site with two Web pages open in the editing window. You can flip between pages by clicking the pages' tabs or by pressing Ctrl+Tab or Ctrl+ Shift+Tab. Expression Web points out pages that contain unsaved changes by placing an asterisk next to the filename, like this: default.htm*.

Figure 1-3: This Web site has two pages open in the editing window: default. htm and about. htm.

When you open a Web site, a Web Site tab also appears in the editing window. This tab shows you the site's list of files and folders or the contents of the folder selected in the Folder List task pane. Chapter 13 gives you detailed information about this tab. (In Chapter 2, we cover how to add and organize Web pages). To close an open Web page, click the X button in the right-hand corner of the editing window.

The editing window contains three different views: Design, Code, and Split:

• Design view shows you a rough idea of what your Web page will look like to your visitors, and you're likely to spend much of your time here.

  Warning 

  Design view only approximates how your pages will look when viewed with a Web browser, such as Internet Explorer, Mozilla Firefox, or Netscape. How your page looks to your visitors depends on their individual browser settings, which can vary from person to person. We tell you how to preview your pages in different browsers in Chapter 2.

• Code view displays the page's underlying HTML code. No matter whether you know HTML, you can rest assured that the Expression Web code tools are superb. (The same could not be said of its predecessor, Microsoft FrontPage.)

• Split view is the best of both worlds. A moveable bar divides the editing window, with Code view on the top and Design view on the bottom. Using Split view, you can work in the comfort of Design view while watching the page's underlying code change in real time. (And vice versa: If you make changes to the code, you can press F5 to see the results in Design view.) To change the size of each view, click the divider bar and drag it up or down.

Switch between views by clicking the buttons at the bottom of the editing window or by pressing Ctrl+PgUp or Ctrl+PgDn.

Tip 

Split view might indeed be one of the strongest Expression Web features, especially if you're an HTML newbie. Expression Web writes such clean, by the-book code that if you pay attention as you build your Web pages, you pick up HTML almost painlessly. Why learn to use HTML? As powerful a program as Expression Web is, as you become experienced with Web design, you find that it's often easier to tinker with code than to wade through commands and dialog boxes. We gently introduce you to bits of code so that your introduction to HTML feels more like stepping into a kiddie pool than plunging headlong into the icy deep end.

Quick Tag Selector bar

Look beneath the tabs in the editing window: That's the Quick Tag Selector bar. Click anywhere on your Web page, and the Quick Tag Selector bar shows you all the HTML tags that apply to the item you clicked. You can click a tag to select the element. For example, click <p> to select the whole paragraph in Design view or Code view (or in both if you're in Split view). Click the down arrow next to a selected tag for more options. We cover using the Quick Tag Selector bar in more detail in Chapter 14.

Task panes

Surrounding the editing window on either side are task panes for working in detail with various aspects of your Web pages. They become useful as you begin building and refining your site. When you launch Expression Web, the Folder List task pane appears in the upper-left corner; the Tag Properties and CSS Properties task panes are located below it, in the lower-left corner. On the other side of the editing window, the Toolbox is in the upper-right corner, with the Apply Styles and Manage Styles task panes in the lower-right corner.

Expression Web has many other task panes for working with other controls. All are listed on the Task Panes menu. Depending on what kind of Web site you're building, you use some task panes more than others, but you will find the Folder List task pane invaluable for managing your site's folders and files. And the style-related task panes (Apply Styles, Manage Styles, and CSS Properties) become your best friends as you format your pages to look the way you want. (We get into detail about styles in Chapter 7.)

As with the menu bar and the toolbars, you can move and dock task panes. For example, if you want more screen real estate for the editing window, move all your task panes to one side or close the ones you aren't using.

To move a task pane, follow these steps:

1. Move your cursor over the task pane's title bar until the cursor turns into a four-pointed arrow.

   You can also right-click and, from the pop-up menu that appears, choose Float.

2. Drag the task pane away from its original location toward the center of the screen.

   The task pane pops away from its location.

3. Keep the mouse button down (and don't let go) until the task pane is where you want it (and then let go).

   If the task pane ends up in entirely the wrong place, don't worry. Simply grab hold of its title bar and drag it again.

Warning 

Task panes are friendly screen elements that like to hang out with other task panes more than they like floating around the screen by themselves. This characteristic can be frustrating when you first start moving the task panes around the workspace window.

You might notice this behavior. If you move a task pane on top of another task pane, they join together into one big task pane family. Although this behavior can be aggravating if that isn't what you want, it's actually a feature. In Figure 1-4, we dragged the Tag Properties (with CSS Properties in tow) into the Apply (and Manage) Styles task pane. (We made it a little bigger so that you can see all the tabs.)

Figure 1-4: Task panes can be combined into groups.

In a task pane group, click the right and left arrows to scroll through the different task panes. Each task pane's name appears on a tab. The active task pane's tab sits on top of the other tabs, and its name appears on the group's title bar.

To make a task pane active, click its tab. To close the active task pane, click the X on the tab bar. To close a whole group of task panes, click the X on the group's title bar.

Tip 

If you don't like your new task pane arrangement and you want to go back to the way Expression Web placed them, choose Task Panes Reset Workspace Layout.

Status bar

The bottom edge of the workspace window contains a few more useful goodies, such as the page size dimensions now displayed in Design view and which version of HTML Expression Web is using to write your Web page's code. (The default is XHMTL 1.0 Transitional.) This may not mean much to you now, but you find out more about setting the Design view dimensions in Chapter 8, and we talk about HTML versions in a sidebar in Chapter 14.