Expressions+Web+4

Understanding How Expression Web 4 Works
This page serves as the companion web page for Chapter 1 of Expression Web 4 Step by Step. > To use an application with such broad use scenarios and such a vast collection of interface elements effectively, it is imperative that you learn not only what features are available but where to find the tools to deploy those features from within Expression Web 4. After you understand the logic behind how Expression Web groups these various interface objects so you’ll be able to find what you are looking for quickly, and your comfort level will rise with much less effort than if you try to memorize the location of all the interface objects. > > > ==**// Before starting these chapters, work through the short tutorial below. . . //**== > [|CHAPTER 1] -- Understanding Expressions Web 4 > [|CHAPTER 2] -- Capitalizing on Functionality > [|CHAPTER 3] -- Capitalizing on Template Options > [|CHAPTER 4] -- It's All About Content > [|CHAPTER 5] -- Understanding Validity > [|CHAPTER 6] -- Create a Website From Scratch > [|CHAPTER 7] -- Adding Client-Side Functionality > [|CHAPTER 8] -- More Functionality > [|CHAPTER 9] -- And More Functionality > [|CHAPTER 10] -- Managing and Publishing a Website > >



**Getting Acquainted with the Workspace**
When you open Expression Web 4 for the first time, it presents several views, panels, and toolbars containing tools and information (see Figure 1.2). In the middle, the Code view and the Design view show you the current page. Together, these panels and toolbars give you a complete picture of the project you are working on and multiple ways of working with and editing that project.

****Figure 1.2 Expression Web 4 as it appears when first opened.****

**The Program Bar**
The address and name of the current file you are working with appear at the top of the workspace. In Figure 1.2, this is “Untitled 1 (Untitled_1.html).” When you open the program for the first time, it displays this default empty web page. Later, you learn how to decide what the program displays when it opens.

**The Menu Bar**
The menu bar is directly under the address bar. This bar is familiar to anyone who has used a computer program. The menu bar is the program’s control center from which you can access any tool, feature, or functionality. Clicking a menu item reveals that item’s drop-down menu. Sliding your mouse left or right displays the drop-down menus for the selected menu item. Some drop-down menu items have an arrow icon to their right. Hovering your mouse over the arrow reveals additional submenus. We cover each option in later hours. To collapse the menus, simply click anywhere outside the drop-down menu.

>> >> **Try It Yourself: Use the Menu Bar to Close and Open Design View and Code View**

>> If you have never used a web design application such as Expression Web 4 before, the window with all its menus and panels and views might seem intimidating. However, when you understand how to use and manipulate them, you will see that they are there for one reason only: to help you get your job done faster and more efficiently.

>> At the center of the page is the View panel. By default, it is split in half horizontally with the Code view on the top and the Design view on the bottom. These views will be explained later, but for now let’s look at how you can use the View menu shown in Figure 1.3 to change them to see only what you want.

****Figure 1.3 The View menu with the Page submenu open.****

>> ****1.**** View the Page item and then hover the mouse pointer over it.

>> ****2.**** Select Design in the submenu that opens to the right (see Figure 1.3).

>> ****3.**** Notice that the middle of the workspace now shows only Design view.

>> ****4.**** Repeat step 1 and click Code in the submenu. You now see only Code view.

>> ****5.**** Repeat step 1 and click Split. Notice that doing so restores the workspace to what it was when you started.

**Common and Other Toolbars**
The Common toolbar is under the menu bar (see Figure 1.4). This toolbar contains the most commonly used functions in the program, such as New, Open, Save, Font, Alignment, and so on. In addition to being an excellent tool for quick access to frequently used functions, the Common toolbar also displays information about your current selections.

****Figure 1.4 The Common toolbar holds the most commonly used tools for easy access.****

In addition to the Common toolbar are numerous other toolbars that serve different functions (see Figure 1.5). You can activate these toolbars by clicking View on the main menu and selecting Toolbars or by right-clicking in the empty area to the right in the Common toolbar and selecting the new toolbar from the pop-up menu. When you open a new toolbar, it docks directly under the Common toolbar (or whatever is the lowest visible toolbar).

****Figure 1.5 The different toolbars are accessible from the Toolbars submenu under View.****

**Code, Design, and Split View**
As you work on your pages, you need to switch back and forth between the different views. To make this as easy as possible, the View panel comes equipped with three buttons to toggle the different views on and off, as shown in Figure 1.6.

****Figure 1.6 The Design, Split, and Code buttons can be found at the bottom of the View panel.****

As its name suggests, Code view displays the code (or backend) of the file in which you are working. In reality, all web pages are just code documents, and Code view gives you a behind-the-scenes look at the inner workings of your page. Code view has many features to help you in your work—from color coding and line numbering to IntelliSense and snippets. You use this view not only to inspect the code Expression Web 4 created for you, but also to make alterations and add your own code. If you work with a strict code file (.css, .php, .js, and so on), this is the only view available.

**Tag Properties and CSS Properties (Bottom Left)**
This panel contains two tabbed subpanels. The Tag Properties panel (see Figure 1.8) and CSS Properties panel (see Figure 1.9) display the current tag or CSS properties of the selected object. Clicking different parts of the code in Code view shows how the tag properties change depending on the code you click. We cover both panels in more detail in later hours.

****Figure 1.8 Tag Properties panel.****

****Figure 1.9 CSS Properties panel.****

**Snippets (Top Right)**
The Snippets panel, shown in Figure 1.10, is a new feature introduced with SP2. It enhances the code snippets function in Expression Web 4 and provides an easy way to insert code in a variety of languages and even create your own custom snippets. The Snippets panel is further explored in the new Hour 16, “Using Code Snippets.”

****Figure 1.10 The new Snippets panel.****

**Toolbox (Top Right)**
The Toolbox panel contains code segments and tags frequently used while editing in Code view (see Figure 1.11). The Toolbox panel is made up of two main sections, HTML and ASP.NET Controls, and each section has multiple subcategories. By clicking the arrow icons, you can explode and collapse the categories to see what they contain.

****Figure 1.11 Toolbox panel.****

**Apply Styles and Manage Styles (Bottom Right)**
This panel contains two tabbed subpanels. The Apply Styles panel displays the CSS styles available to the current page and enables you to apply styles to objects in Design view (see Figure 1.12). The Manage Styles panel has similar functionality with the addition of a preview area where you can see what each style does to your content (see Figure 1.13). Both panels give you the ability to apply styles and create new styles.

****Figure 1.12 Apply Styles panel.****

****Figure 1.13 Manage Styles panel.****

All the panels are intelligent; they learn from how you use the program. If you use a particular item often, it moves higher on the list to become more accessible. A rarely used item moves down on the list. The panels also help you by turning currently unavailable functions gray so that you don’t waste time trying to do something impossible.

**Status Bar**
The status bar appears at the bottom of the workspace (see Figure 1.14). It provides information about the program itself as well as general information for the page you are working on, such as file size and overall settings (the code format you are using, for example). In addition, the status bar has tools that warn you if there is invalid or incompatible code in your page. If you want to close the status bar (not something I recommend), click Tools, Application Options and then uncheck Show Status Bar under General.

****Figure 1.14 The status bar appears at the bottom of the workspace and gives you constant and current information about the file you are working on.****



**Changing and Customizing the Workspace**
Depending on what you are doing, you might want to have a certain panel or menu more prominently featured, or you might want to open a new panel with more functions. In response to user feedback, the service packs introduced new and powerful features to the Expression Web 4 user interface, making it possible to create and save a custom toolbar and custom workspaces. As a result, you can now customize your workspace to fit any working scenario and change it at any time.

**Using the Custom Toolbar**
In addition to the predefined toolbars in Expression Web 4, of which there are many, you can now create your own custom toolbar that contains the features and functions you use the most. This was a much requested feature from users like myself, who only use a small number of functions on the default toolbars and want more focus on frequently used tools. You can create as many custom toolbars as you like.

>> >> **Try It Yourself: Add and Configure Your Own Custom Toolbar**

>> A custom toolbar can contain any of the elements found in the other toolbars in Expression Web 4. That means you can consolidate the features you use the most into one toolbar and hide the rest for when you need them.

>> To use the custom toolbar, you first have to activate it.

>> ****1.**** On the main menu, go to View, hover over Toolbars, and select Custom from the bottom of the pop-out menu. This adds a new toolbar to the top of the workspace with the text “Edit...” (see Figure 1.15).

****Figure 1.15 When activated, the custom toolbar appears as an empty area with an Edit button below the Common toolbar.****

>> ****2.**** To add a new button to the custom toolbar, click Edit. This opens the Custom Toolbars dialog (see Figure 1.16).

****Figure 1.16 The Custom Toolbars dialog, from which you can create your own custom toolbars.****

>> ****3.**** Click New to open the New Toolbar dialog. Here, you can give your custom toolbar a descriptive name (see Figure 1.17). Note that the name has to be a single word with no spaces.

****Figure 1.17 Custom toolbars can be given custom names.****

>> ****4.**** To add a new item to the toolbar, select the item in the left panel and click the Add button. This moves the item to the right panel (see Figure 1.18).

****Figure 1.18 New toolbar buttons are added from left to right.****

>> ****5.**** To remove an item from the toolbar, select the item on the right side and click the Remove button.

>> ****6.**** When you are done adding buttons to the custom toolbar, click OK and the buttons appear.

>> Once a custom toolbar is created, you can toggle it on and off using the Toolbars menu found under View, Toolbars.


 * // Now, go back up to the chapters and complete each one. //**