Expreesion

Adjusting your workspace
Page 1 of 62

The Microsoft Expression Web workspace gives you the tools you need to edit web pages and sites. The
workspace is customizable, so you can change the way it looks to match your working style.
Tip
To reset the workspace to the default, on the Panels menu, click Reset Workspace Layout.
Here's what the workspace looks like when you first install Expression Web:
The menus and toolbars let you perform tasks such saving files and sites, generating reports, and
changing how you view a page.
For more information, see Menus and toolbars.
Panels let you perform common tasks, such as managing files in a site, adding tags to a page, and
managing styles.
For more information, see Panels.
The editing window lets you visually edit pages or directly edit page markup.
For more information, see The editing window.
The status bar shows you important information about sites and pages.
For more information, see Status bar.
Send feedback about this topic to Microsoft. 2011 Microsoft Corporation. All rights reserved.
The editing window
In Microsoft Expression Web, you edit web pages in the editing window. When you open a site, Expression
Web adds a Site View tab to your editing window. For more information, see Site View.
Editing window
file:///C:/Users/student%2023/AppData/Local/Temp/~hh2F7.htm
12/4/2015
Page 2 of 62
When you have a site open, the Site View tab is displayed at the top of the editing window.
The files you have open appear as tabs at the top of the editing window. The file you are currently
editing is highlighted.
Tip To switch from one page to another, press CTRL+TAB or CTRL+SHIFT+TAB.
To close the page you are editing, click Close
HTML tags appear in the Quick Tag Selector bar in nested order. You can click a tag to select it or
click the down arrow next to it for more options. For more information, see Quick Tag Selector.
Use Design, Split and Code to change the page view. For more information, see Code and Split
page views.
Tip
To switch from one view to another, press CTRL+PAGE UP or CTRL+PAGE DOWN.
There are three views in which you can edit web pages. For more information, see Code and Split
page views.
Page views
Design Design and edit web pages using the design tools in an approximated WYSIWIG authoring
experience.
Tip
To display HTML tags in Design view, press CTRL+FORWARD SLASH (/).
Split Review and edit web page content in a split screen format that offers you simultaneous access
to both Code and Design views.
Note
When you are working in Split view, to apply changes you made in Code view to Design view, press F5.
Code View, write, and edit the HTML tags yourself. With the optimized code features in
Expression Web, you can create clean HTML, and it is easier for you to remove any code that you do
not want.
See also
12/4/2015
Page 3 of 62
Reference
Status bar
Code view toolbar
Concepts
Panels
Code and Split page views
Customize Design view colors and font style
You can change the way your pages appear in Design view to help differentiate between different types of
content on your page. For example, you can change a background color of an item so that you can easily
find it when looking at a page.
To customize Design view colors and font styles

1. On the Tools menu, click Page Editor Options.
2. In the Page Editor Options dialog box, on the Color Coding tab, select Design view settings.
3. Under Display items, select the item you want to change. Select Item foreground, Item
background, and Font style options.
4. To reset color coding to the default, click Reset Defaults.
See also
Tasks
Format code
Concepts
The editing window
Visual aids
Microsoft Expression Web includes many visual aids you can use in Design view. Visual aids help you see
empty or invisible elements and elements that have hidden borders. You can also use visual aids to find
elements that have hidden or invisible styles, in addition to ASP.NET controls that aren't visible on a page.
Finally, you can use visual aids to see which tags are used around specific content, and you can see the size
of margins and padding around your tags.
Note
Visual aids can change the appearance and layout of your page, so they should be turned off for your page
to appear as close as possible to how it appears in a browser.
To show or hide a visual aid
12/4/2015
Page 4 of 62
With a web page open, do one of the following:
On the status bar, right-click Visual Aids and then click the visual aid.
On the View menu, point to Visual Aids, and then click the visual aid.
To show or hide all visual aids

With a web page open, do one of the following:
On the status bar, either double-click Visual Aids or right-click Visual Aids, and then click Show.
On the View menu, point to Visual Aids, and then click Show.
Visual aids
Block Selection Shows in two different ways. When you put your cursor in a block, a dotted
rectangle appears around the tag, with a tab displaying the name of the tag. You can click the tab to
select the tag. When you select a block, margins and padding display. You can use the handles to
resize margins and padding by using this visual aid. For absolutely positioned elements, you can
click the tab displaying the name to move the object on the page.
Note
Block selection visual aids show for the following block elements: paragraph, list, list item, form,
unpositioned div, address, block quote, horizontal line, and <center> tags. Other types of elements show
the dotted rectangle and margin and resize handles even when visual aids are hidden.
Cursor in a block element
Selected block element
Visible Borders Shows dotted borders around elements that have hidden borders.
Visible borders in a table
Empty Containers Shows a dotted rectangle around empty elements.
Note
In Design view, Expression Web collapses empty elements like most browsers do. When you turn on the
Empty containers visual aid, empty elements will be displayed, which may change your page layout.
Margins and Padding Shows the margins and padding around all elements: margins appear in red
and padding appears in blue. You cannot use the Margins and padding visual aid to change margins
and padding. Instead, turn on the Block selection visual aid and use the handles that appear. For
more information, see Set margins, padding, and dimensions in Design view.
12/4/2015
Page 5 of 62
Margin and padding for a block element
CSS Display:none Elements Shows elements that are hidden by a style that includes
display:none.
CSS Visibility:hidden Elements Shows elements that are hidden by a style that includes
visibility:hidden.
ASP.NET Non-visual Controls Shows a rectangle for ASP.NET controls which don't display
anything.
ASP.NET Control Errors Shows an error message when an ASP.NET control encounters an error,
such as not connecting to a data source.
Template Region Labels Shows a border around editable template regions, including a tab with the
name of the region, in pages based on Dynamic Web Templates or ASP.NET master pages. For more
information, see Controlling page layout with Dynamic Web Templates.
Template region label for a BODY element
See also
Reference
Status bar
Concepts
The editing window
Add or modify a page size
While you're designing a web page, it's often difficult to know what portion of the page will be visible to
site visitors who have different screen resolutions or window sizes. You can simulate many of these in
Design view by using page size settings, which can help you determine what portion of a page will be
visible to the site visitor without scrolling.
The page sizes you can choose match standard screen resolutions of 640480, 800600, and 1024768.
Microsoft Expression Web automatically selects the value that matches your current screen resolution, as
well as available lower values. Window sizes that are greater than your current screen resolution are
unavailable.
12/4/2015
Page 6 of 62
Note
You can determine your current page size by the Page Size in the status bar. For information about the
status bar, see Status bar.
Viewing a page with a page size setting turned on
A page in Design view.

The same page in Design view with a page size setting turned on.
To change the current page size setting

Do one of the following:
In Design view, on the View menu, point to Page Size, and then click a page size.
On the status bar, click Page Size, and then click the page size you want.
Tip
Setting the page size to settings significantly larger or smaller than your desktop display size can negatively
affect the ease of editing in Design view. Select Current Page Size to maximize the Design view.
To add, modify, or remove a page size setting

1. Do one of the following:
In Design view, on the View menu, point to Page Size, and then click Modify Page Sizes.
On the status bar, click the Page Size, and then click Modify Page Sizes.
2. In the Modify Page Sizes dialog box, do one of the following:
To add a new page size, click Add, and then enter the Width, Height, and Description.
To modify a page size, select the page size, click Modify, and then enter the Width, Height,
and Description.
To remove a page size, select the page size, and then click Remove.
See also
Concepts
Preview pages in a browser
The editing window
12/4/2015
Page 7 of 62
Use rulers and a grid for guidance
In Microsoft Expression Web, you can use rulers and a grid to guide your page layout in Design view.
Rulers appear across the top and down the left side of the editing window. The grid appears behind your
page content. If you choose to snap to grid, when you place content on the page, it will automatically align
with gridlines. You can configure the spacing and style of the grid.
Rulers and grid in the editing window
You can display rulers at the top and side of the editing window.
You can set the following Ruler and grid units:
Pixels
Inches
Centimeters
Points
You can use a Display Grid in the editing windows to help position objects. The grid uses the same
units as the ruler.
You can adjust the Spacing of the grid, as well as the grid Line Style and Line Color. You can also
set a Snapping Grid Spacing value, to which objects will automatically align.
To show or hide rulers or the grid
On the View menu, point to Ruler and Grid, and then do the following:
To show or hide rulers, click Show Ruler.
12/4/2015
Page 8 of 62
To show or hide the grid, click Show Grid.
To snap to the grid
On the View menu, point to Ruler and Grid, and then click Snap to Grid.
To change ruler and grid settings

On the View menu, point to Ruler and Grid, and then click Configure.
On the Tools menu, click Page Editor Options. In the Page Editor Options dialog box, click
the Ruler and Grid tab.
2. In the Page Editor Options dialog box, on the Ruler and Grid tab, do the following:
Use this
To do this
Ruler and grid units
Select the type of units for the ruler and grids.
Display Grid Spacing
Select the number of units between gridlines.
Line style
Select the type of line for your grid.
Line color
Select your grid color.
Snapping Grid Spacing
Select the number of units between gridlines for the snapping grid.
See also
Concepts
The editing window
Visual aids
Menus and toolbars
A menu displays a list of commands. Some of these commands have images next to them so that you can
quickly associate the command with the image. Most menus are located on the menu bar, which is the
toolbar at the top of the screen. Toolbars can contain buttons, menus, or a combination of both.
Menus and toolbars
12/4/2015
Page 9 of 62
Menu bar
Menu command
Toolbar
Button
Show, hide, move, or dock a toolbar
When you open Microsoft Expression Web, it displays the toolbars that were open the last time you closed
Expression Web, and in the same place you left them.
To find a button on a toolbar

If the toolbar is too long to fit on the screen, the Toolbar Options
Click Toolbar Options
button is displayed.
at the end of the toolbar.
Note
If you can't find a toolbar button, you may need to enable editing for the language that the button applies to.
To show all the buttons on a toolbar
Use the move handle on the toolbar to drag the toolbar to its own row. You can also move the
toolbar to a location other than the edge of the program window so that the toolbar becomes a
floating toolbar.
To show a toolbar
Right-click any toolbar, and then select the toolbar you want to display.
To hide a toolbar
Right-click the toolbar, and then clear the check box to the left of the toolbar you want to hide.
To move a toolbar
12/4/2015
Drag the move handle
Page 10 of 62
of a docked toolbar to the new location.
See also
Reference
Menus and toolbars
Code view toolbar
Dynamic Web Template toolbar
Formatting toolbar
Master Page toolbar
Pictures toolbar
Positioning toolbar
Style Application toolbar
Style toolbar
Tables toolbar
Status bar
The status bar displays information about your current editing modes, such as visual aids mode, style
application mode, rendering mode, and page size mode. The status bar also displays information about the
file you are editing, such as file size, HTML schema, and CSS schema.
The left side of the status bar displays context-sensitive information such as options available for a selected
tag in Design view or Line and Column position in Code view.
Tip
You can move the pointer over an item in the status bar for more information or to change options.
To show or hide the status bar

1. On the Tools menu, click Application Options.
2. In the Application Options dialog box, on the General tab, under General, clear or select Show
status bar.
Status bar information

Use this
To do this
HTML Incompatibility
Detected icon
Go to an HTML schema incompatibility in your code. If no HTML

compatibility errors are detected, the HTML Incompatibility: None
is displayed.
Code Error Detected

icon
Go to an error in the code on your page. If no code errors are detected, the
Code Errors: None icon is displayed.
icon
Change the visual aids mode. For more information, see Visual aids.
View the current style application mode. Double-click to open the Style
Application toolbar. For more information, see Working with generated
cascading style sheets.
12/4/2015
Page 11 of 62
View the current size of the file.

View the current page size of the editing window. Click to change the page
size. For more information, see Add or modify a page size.
View the HTML schema that Expression Web applies to the current page.
Double-click to open the Page Editor Options dialog box. For more
information, see Set document type information.
View the CSS schema that Expression Web applies to the current page.
Double-click to open the Page Editor Options dialog box. For more
information, see Set document type information.
See also
Concepts
The editing window
Panels
Panels in Microsoft Expression Web help you get your work done, bringing the tools you need right up
close to your work. You can find every panel on the Panels menu. You can have multiple panels open at
one time and change the location and size of each panel to suit your needs. When you arrange the panels in
a layout that works for you, Expression Web automatically uses this layout the next time you start the
program.
When you first start Expression Web, the Folder List, Tag Properties, Apply Styles, and Toolbox panels
are shown docked on either side of the editing window.
For more information about the workspace, see Adjusting your workspace.
The panels on the Panel menu are organized into six groups. By default, the first time that you open then,
the panels from each group appear as merged panels. The merged panels occupy the same space and appear
one behind the other, with each panel available by clicking the tab for that panel.
You can dock a panel to the edge of the program window, and the editing window resizes to accommodate
the docked panel. You can dock the panels horizontally or vertically. You can float a panel so that it can be
dragged and placed anywhere, including outside the program window.
Panel buttons
Click Close
to close one panel.
Tip
You can also right-click the panel title bar or tab, and then click Close.
12/4/2015
Page 12 of 62
Click Turn on autohide to minimize a panel to a tab. The panel automatically expands when you
position your pointer over it.
Click Close all
to close the group of panels.
Panels in this group appear as tabs.
To open a panel
On the Panels menu, click the panel that you want.

Tip
A check mark on the Panels menu indicates that a panel is visible in your workspace. If a panel is open but
not visible because it is merged with other panels, click that panel on the Panels menu to make that panel
visible.
To move a panel
Drag the title bar of the panel to the new location.

Tip
Press and hold down CTRL while you drag a panel to prevent it from docking when the panel touches the
edge of the program window.
To dock a panel
Drag the title bar of a floating panel to the docking location. You can dock a panel to an existing
panel group or to the side, top, or bottom of another panel. One or both of the following visual cues
will be displayed when you move the panel to where it can be docked:
A shaded box shows where the panel will be docked.
A blue line shows where the edge or edges of the panel will be docked.
12/4/2015
Page 13 of 62
To float a panel
Drag the title bar of a docked panel away from the edge of the program window.
See also
Reference
Menus and toolbars
Concepts
The editing window
Accessibility panel
Use the Accessibility panel to create accessibility reports for pages in your site. For more information
about accessibility reports, see Accessibility reports.
12/4/2015
Page 14 of 62
Accessibility panel buttons

Use this
To do this
Run Accessibility Checker button
Generate an accessibility report.
Next Result button
Go to the next result.
Previous Result button
Go to the previous result.
Refresh Changed Results button
Refresh the report.
Show Problem Details button
See more information about the result.
Generate HTML Report button
Create a new HTML page containing the report results.
See also
Concepts
Panels
Accessibility reports
Apply Styles panel
You can use the Apply Styles panel to apply, remove, modify, rename, and delete styles; attach or detach
external cascading style sheets (CSS); select all instances of a style; and go to the code that contains a style
rule set. The Apply Styles panel displays each style according to the rules of the style, so you can quickly
identify the style you want to work with just by looking at the visual appearance of the style.
When you open a web page, the Apply Styles panel lists styles that are defined in all of the cascading style
sheets (CSS) for the page, including external, inline, and internal CSS. Class and ID selectors appear under
either the name of the external .css file that contains the style or Current Page if the style is in an internal
CSS. Element selectors are organized the same way but appear under a separate heading named
Contextual Selectors underneath the list of class and ID selectors. You can set the panel to list all styles or
restrict it to list only styles that are used in the current web page or the current selection in the page. No
matter which of these options you've selected, element selectors and inline selectors appear in the panel
only when you either place your cursor in content that uses the style or select content that uses the style.
You can sort the list of styles that appear in the Apply Styles panel and also restrict the list to show only
styles that are used in the current web page or on the current selection. If a particular style is difficult to see
against the white background of the panel, you can select a color to appear in the panel behind styles that
don't contain a background property.
Tip
To temporarily display all of the rules of a style in a floating window by your pointer, point to the style in
the Apply Styles panel.
Apply Styles panel
12/4/2015
Page 15 of 62
Clear Styles removes all class selectors and inline styles from the current selection.
External CSS file linked from the current web page.
External CSS file imported into the current web page.
Current Page lists the class and ID selectors of internal CSS and imported external CSS files.
A style defined in the internal CSS in the current web page.
A solid rectangular border appears around styles that are used by the current selection.
Class and ID selectors contained in the linked external CSS file (events.css).
Each style has a drop-down menu for performing many style-related tasks. Point at a style and click
the arrow or right-click a style.
The icons that appear next to each style in the Apply Styles panel identify the style type and whether the
style is used in the current web page.
Apply Styles panel icons
Icon
Description
A red dot appears next to ID selectors.
A green dot appears next to class selectors.
A blue dot appears next to element selectors.
A yellow dot appears next to inline styles.
A circle appears around a colored dot to mark styles that are used in the current web page.
12/4/2015
Page 16 of 62
An @ symbol appears next to imported external cascading style sheets.
To sort the list of styles in the Apply Styles panel

In the Apply Styles panel, click Options, and do one of the following:
To list the styles according to the order the styles appear in the CSS, select Categorize By Order.
To list the styles alphabetically and according to the type of style (class or ID selectors), select
Categorize By Type.
To show or hide styles in the Apply Styles panel

In the Apply Styles panel, click Options, and do one of the following:
To list all styles that are contained in the external, internal, and inline CSS of the current web page,
select Show All Styles.
To list only styles that are used in the current web page, select Show Styles Used In Current Page.
To list only styles that are used by the current selection in the page, select Show Styles Used On
Selection.
Note
Element selectors and inline styles appear in the Apply Styles panel only when you either place your
cursor in content that uses the style or select content that uses the style.
To display a colored background in the Apply Styles panel behind

styles that don't contain a background property rule
1. In the Apply Styles panel, click Options, and then select Preview Background Color.
2. In the More Colors dialog box, select a color, and then click OK.
See also
Tasks
Apply a style
Reference
Manage Styles panel
CSS Properties panel
Concepts
Using cascading style sheet tools
Cascading style sheet reference
Working with styles
12/4/2015
Page 17 of 62
Behaviors panel
You can use the Behaviors panel to add behaviors to elements, and manage the behaviors that have been
added to various elements.
Insert To add a new behavior, select an element in Design view, and then click Insert. A menu
opens with all of the behaviors appropriate for that element in the schema you have specified in the
Authoring tab of the Page Editor Options dialog box. Click the behavior you want and customize it
in the dialog box that opens.
Tag See which element is selected.
Delete Delete the selected behavior.
Move Up
and Move Down
The Move Up and Move Down
buttons enable you to change the
order of behaviors in the list. The order in which the code is executed to perform the behaviors is
determined by the order of the behaviors in the list.
Events column See the events that trigger the behaviors. The drop-down list associated with a
behavior allows you to change the event that causes the behavior to display. For example, you can
change onmouseover to onclick to cause the behavior to occur when the user clicks the control,
rather than hovering the mouse pointer over it. The list contains all the behaviors appropriate for the
selected element in the schema you have specified in the Authoring tab of the Page Editor Options
dialog box.
Actions column See the behavior that corresponds with the event.
See also
Tasks
Adding behaviors
Concepts
Behavior scripts
Compatibility panel
The Compatibility panel can check one or more pages and CSS files, or all pages and CSS files in a site,
for code errors and code that's incompatible with the doctype and CSS schema you specify. You can use
the results in the panel to view information about each issue and to go to the line of code that contains the
issue. You can also copy one or more of the results or generate a web page of the entire report. For more
information, see Compatibility reports.
When you generate a report, the Compatibility panel contains the following columns:
Status Shows an icon that represents the type of file that contains the issue and the status of the file.
Page Lists the web page that contains an issue and the location of the page.
Line Lists the number of the line in Code view that contains the issue.
Issue Type Lists the type of issue, either Incompatibility or Code Error. The results in this
12/4/2015
Page 18 of 62
column can be driven by the DocType declaration in each page or the schema that you select when
you run the report.
Schema Identifies the document type or level of CSS that the code is incompatible with.
Problem Summary Describes the code error or the reason the code is incompatible with the
schema. The content of this column also appears in a ScreenTip when you point at a row in the panel
or when you point at the source of the problem in Code view.
Compatibility panel buttons
To open the Compatibility Checker dialog box, click Run Compatibility Checker .
To open the web page that contains the next or previous result in the list and highlight the issue, click
Next Result or Previous Result . To go to the next issue in an open page, press F9.
Click Refresh Changed Results
Click Generate HTML Report to produce a web page that displays the compatibility results.
You can print the web page or display it in a browser and then use the list to check off each issue that
you resolve.
To sort the list of results, click the name of the column you want to sort by. To reverse a sorted list,
click the name of the column again. To restrict the results to those that fit the criteria you select, click
the down arrow that appears in the heading of a column and select a criterion to filter the results.
to recheck pages that were checked and have changed.
Tip
When the results of the report are filtered, the down arrow of the filtering column appears blue instead
of black.
When you right-click a row, a shortcut menu provides the following additional options:
Go to Page Opens the web page that contains the result and highlights the issue.
Compatibility Reports Opens the Compatibility Checker dialog box.
Select Resulting Files in Folder List Locates the selected pages in the Folder List panel.
Clear Results Clears the results list.
Refresh Changed Results Rechecks pages that you originally specified and that have
changed.
Copy Results Copies the selected results of the report as a table.
Remove Filters Cancels the selection of all filter criteria and sets every column's Filter menu
to All.
See also
Tasks
Compatibility reports
Concepts
Customizing filters
12/4/2015
Page 19 of 62
Validating code
Generating site reports
Accessibility reports
Panels
Conditional Formatting panel
You can use the Conditional Formatting panel to customize the formatting of XML data in a Data View.
You can specify whether data is displayed or hidden and how it is displayed based on conditions that you
set.
For more information, see Apply conditional formatting to a Data View.
Conditional Formatting panel
To create a condition, click Create, and then click one of the following options:
Show content Changes the visibility of a selected HTML tag or data value that meets certain
criteria.
Hide content Changes the visibility of a selected HTML tag or data value that meets certain
criteria.
Apply formatting Applies a style to a selected HTML tag or data value that meets certain
criteria.
Each choice opens the Condition Criteria dialog box, where you can specify the condition you
want to cause the formatting change.
Tip
To activate the Create button, in Design view, select text in a Data View.
Existing conditions lists the conditions for which you specify formatting. Click a condition to
modify or delete it.
Click Set Visibility to specify whether your formatting conditions are visible in Design view.
See also
Tasks
Apply conditional formatting to a Data View
12/4/2015
Page 20 of 62
Concepts
Using XML data
You can use the CSS Properties panel in tandem with an open web page, external CSS file, or with the
Manage Styles panel to review and change the properties and values of existing styles.
When you use the CSS Properties panel with a web page, the panel enables you to quickly see all of the
styles that the current selection in your web page uses, the order of precedence of those styles, and all of the
properties and values of those styles.
Note
If a CSS property is not supported by the CSS schema that is selected in the Authoring tab of the Page
Editor Options dialog box, the list of values for that property appears blank in the New Style and Modify
Style dialog boxes and the property is not listed in the CSS Properties panel.
For more information, see Set IntelliSense options for CSS.
The Show categorized list button

and Block.
organizes the list of properties under categories, such as Font
The Show alphabetized list button
organizes the list of properties into a single alphabetical list.
The Show set properties on top button
organizes the list of properties so that properties that
12/4/2015
Page 21 of 62
you have set in the selected style appear at the top of the list.
The Summary button lists together, under the CSS Properties column, all of the properties that
affect the current selection, instead of only the properties of a selected style. In summary mode, you
can click a property under CSS Properties to outline the associated rule under Applied Rules. To
get out of summary mode, click Summary again or click a rule under Applied Rules.
Applied Rules lists the selector of each style that affects the current selection. Styles are listed in
ascending order of precedence, from lowest precedence at the top of the list to highest precedence at
the bottom.
Point at a selector to see the entire rule set in a ScreenTip. Select a selector to display its properties
under CSS Properties. Double-click a selector to go to the code of that rule set.
This column lists the tag to which each style is applied and the selector of the style. Point at a row in
this column to see the applied rule. The column is labeled Current Page when the selected style
resides in an internal CSS or labeled with the name of an external CSS file when the selected style
resides in an external CSS. You can point at the external CSS file name to see the path to the file or
click the external CSS file name to open the file.
CSS Properties lists the values of properties you've set in the style selected under Applied Rules
and also all unset properties. Double-click a property to go to the code of that rule set.
When the Show categorized list button
and the Show set properties on top button
are both
selected, properties of the selected style are grouped at the top of each category's list of properties.
You can set the value of a property by, in the box next to the property name, typing a value or
pointing at the box and then clicking, when available, the drop-down arrow or pick button
selecting a value.
and
Properties that have a red line through them are set by the selected style but either aren't inherited by
the current selection or are overridden by another style. To see a ScreenTip that provides more
information, point at a crossed-out property. The ScreenTip for overridden properties identifies the
overriding property.
Tip
In the CSS Properties panel, to display a shortcut menu that contains additional options for
working with your CSS, right-click a selector under Applied Rules.
See also
Tasks
Modify a style
Create a style
Remove a style from content
Set IntelliSense options for CSS
Reference
Apply Styles panel
Concepts
12/4/2015
Page 22 of 62
CSS Reports panel

The CSS Reports panel can display a report that lists either style errors or the type of styles that are in use.
You can generate a report that checks only particular web pages or an entire website. For more information
about generating a CSS report, see CSS Errors and Usage reports.
Tip
You can also generate a Style Sheet Links report, which lists all of the web pages in your website that
either import or link to an external cascading style sheet (CSS). For more information, see Generating site
reports.
The CSS Reports panel contains the following columns when you generate a report of errors.
Status shows an icon that represents the type of file that contains the error and the status of the file.
Page lists the web page that contains an error and the location of the page.
Line lists the number of the line in Code view that contains the error.
Style lists the name of the style.
Error Summary describes the type of error.
The CSS Reports panel contains the following columns when you generate a report of style usage.
Status shows an icon that represents the type of file that contains the error and the status of the file.
Style lists the name of the style.
Usage Location lists the file that contains the style reference. Double-click the row, except under the
Definition Location column, to open the file.
Line lists the number of the line in Code view that contains the error.
Definition Location lists the file that contains the style definition. Click the file name in this column
to open the file.
CSS Reports panel buttons

Use this
To do this
CSS Reports button
Open the CSS Reports dialog box.
Next Result button
Open the web page that contains the next result in the list and highlight the
error or reference.
Previous Result
button
Open the web page that contains the previous result in the list and highlight
the error or reference.
Style Sheet Links

button
Display the Style Sheet Links site report.
Column heading
Sort or reverse the list of results.

Restrict the results to those that fit the criteria you select.
Down arrow in column

heading
Note
12/4/2015
Page 23 of 62
When the results of the report are filtered, the down arrow of the filtering
column appears blue instead of black.
When you right-click a row, a shortcut menu provides the following additional options:
To open the webpage that contains a result and to highlight the error or reference, right-click the row
and in the shortcut menu, click Go to Page.
To locate one or more files in the Folder List panel, in the CSS Reports panel, select the files you
want to locate, right-click a selected file, and in the shortcut menu, click Select Resulting Files in
Folder List.
To clear the entire list of results, right-click any row, and in the shortcut menu, click Clear Results.
To copy the results of the report as a table, select the rows you want to copy, right-click a selected
row, and in the shortcut menu, click Copy Results.
To deselect all filter criteria and set every column's Filter menu to All, right-click any column
heading or row and select Remove Filters.
See also
Tasks
CSS Errors and Usage reports
Concepts
Generating cascading style sheet reports
Data Source Details panel
The Data Source Details panel displays the hierarchy and contents of XML files. You can add fields from
the Data Source Details panel to a data view.
For more information, see Add a Data View.
12/4/2015
Page 24 of 62
To include fields in a data view, select one or more fields, click Insert Select Fields as, and then
click one of the following:
Single Item View to display the contents of the XML file in a table with a column for every
field and the values listed in rows.
Multiple Item View to display each field name followed by the value of the field.
Select Show data values to display the value of the fields.

Click Previous or Next to move between each set of fields in the XML file. The value of the
new fields is displayed in the Data Source Details panel, but this has no effect on data views
created when you click Insert Selected Fields as.
See also
Tasks
Add RSS feeds to a page
Reference
Data Source Library panel
Concepts
Configure a data source by using a data bound control
12/4/2015
Page 25 of 62
You can use the Data Source Library panel to add, edit, or delete XML or database connections in your
site.
To add a new XML file to the Data Source Library, click Add an XML file under Local XML
Files.
To create a connection to an Access database, an ODBC data source, a Microsoft SQL Server data
source, or an Oracle database, click New ASP.NET Connection.
Click Refresh library to show ASP.NET connections or XML files you add to your site that do not
yet appear in the Data Source Library panel.
To see the structure and content of an XML file, click the item in the library and then click Show
Data.
To see the location of and summary information about the file, click the item in the library and then
click Properties.
To edit or delete database connections that are stored in the web.config file of your ASP.NET site,
click the name of the connection.
For information about the web.config file, see ASP.NET Configuration Files
library.
in the MSDN
See also
Tasks
Add RSS feeds to a page
Reference
Concepts
Configure a data source by using a data bound control
12/4/2015
Page 26 of 62
Find panel
The Find panel enables you to search multiple pages in your site. There are two Find panels, Find 1 and
Find 2, so that you can perform more than one search at a time.
For more information, see Edit multiple pages with find and replace and Find and replace tags.
Find panel buttons

Use this
To do this
Find and Replace button
Open the Find and Replace dialog box.
Next Result button
Find the next result in the report.
Previous Result button
Find the previous result in the report.
Refresh Changed Results button
Refresh the report.
See also
Concepts
Panels
Folder List panel
The Folder List panel lists the folders and pages in your site.
Tip
To quickly show or hide the Folder List panel, press ALT+F1.
Folder List panel
12/4/2015
Page 27 of 62
Images and file icons are displayed in thumbnail previews.

Note
This feature is available only in Windows Vista and Windows 7.
Your website appears as the root folder.
Pages and folders in your website display in a tree view.
Tip
Right-click an item in the Folder List panel for actions you can perform on that item, such as Rename,
Copy, and Delete.
See also
Concepts
Panels
Hyperlinks panel
You can generate a Hyperlinks report that lists the status (Broken, OK, or Unknown) of all hyperlinks and
source references in your site, and the location and destination of each hyperlink and source reference.
Tip
You can also generate a type of usage report that lists either all web domains or the URLs of files on other
sites that link to a file in your site. For more information, see Generating site reports.
12/4/2015
Page 28 of 62
To generate a Hyperlinks report

1. With your site open, on the Panels menu, click Hyperlinks.
2. In the Hyperlinks panel, do the following:
1. Optional: To verify only particular hyperlinks, select the hyperlinks you want to verify.
2. Click the Verify Hyperlinks button.
3. In the Verify Hyperlinks dialog box, specify which hyperlinks you want to verify, and then click
Start.
Hyperlinks panel buttons

Use this
Verify Hyperlinks
To do this
Open the Verify Hyperlinks dialog box, which enables you to refresh the list.
Next Result
Open the web page that contains the next result in the list and highlight the
hyperlink.
Previous Result
Open the web page that contains the previous result in the list and highlight the
hyperlink.
Edit Hyperlink
Open the Edit Hyperlink dialog box. For more information, see Create or modify
a hyperlink.
Show Internal
Hyperlinks
List links that point to a bookmark (HTML anchor) or other content in the same
web page as the hyperlink, and list references in a web page to items within the
same page, such as a reference to an image map.
Column heading
Sort or reverse the list of results.

Restrict the results to those that fit the criteria you select. Right-click a column
heading and select Remove Filters to deselect filter criteria.
Down arrow in a
column heading
Tip
When the results of the report are filtered, the down arrow of the filtering column
appears blue instead of black.
Tip
Right-click a row and then click Go to Page to open the web page that contains the link. Double-click
the row to open the Edit Hyperlink dialog box.
See also
Tasks
Locate unused files
Create or modify a hyperlink
Recalculate hyperlinks
Reference
Hyperlinks site view
12/4/2015
Page 29 of 62
Concepts
Managing and repairing links
Layers panel
The Layers panel lists all layers (a layer is a set of <div> tags that is set to either relative or absolute
position) in the current web page. You can use the panel to add or delete layers from a web page, and to
modify each layer's ID name, stacking order (z-index value), or visibility.
Layers panel
In Design view, use Draw Layer

Click Insert Layer
to create a new layer by dragging in a web page.
to add a new layer where your cursor is located in your web page.
Click the plus sign or minus sign next to the ID of a layer that contains nested layers to expand
or collapse the list of nested layers.
The ID of a layer that is nested within another layer appears indented under the parent layer.
Selected layers appear highlighted in the panel.
Icons appear in the Layer Visibility column next to layers that contain a visibility property, either
visible
or hidden . Layers that don't have an icon are visible by default but don't contain a
visibility property. You can click a Layer Visibility icon to change the layer's visibility or remove
the property.
The Layer Z-Index column shows the value of a layer's z-index property, which defines the order
of the layer along the z-axis. Layers are automatically listed in ascending order.
The Layer ID column display the value of each layer's ID attribute. Each layer must have a unique
ID to distinguish it from other layers and other content that is using this attribute.
See also
12/4/2015
Page 30 of 62
Tasks
Add or remove a layer
Position a layer
Resize a layer
Concepts
Using layers
Manage Styles panel
You can use the Manage Styles panel to apply, modify, rename, and delete styles; attach or detach external
cascading style sheets (CSS); select all instances of a style; and go to the code that contains a style's rule
set. You can also use the Manage Styles panel to move styles from an external CSS to an internal CSS and
vice versa, or to move the location of a style within in a CSS.
When you open a web page, the Manage Styles panel lists all styles that are defined in the page's external
and internal CSS, but not inline CSS. You can set the panel to list all styles or restrict it to list only styles
that are used in the current web page or the current selection in the page. All class, element, and ID
selectors appear under either the name of the external .css file that contains the style or Current Page if the
style is in an internal CSS.
Tip
To temporarily display all of the property declarations of a style in a floating window by your pointer, point
to the style in the Manage Styles panel.
Manage Styles panel
12/4/2015
Page 31 of 62
An external CSS file linked from the current web page.

A list of the class, element, and ID selectors of internal CSS and imported external CSS files, as
defined in the Current Page.
An external CSS file imported into the current web page.
A style defined in the internal CSS in the current web page.
By default, the selectors of a style that contains multiple selectors appear grouped. You can list the
selectors separately by clicking Options and then clicking Separate Grouped Selectors.
The icons that appear next to each style in the Manage Styles panel identify the style's type and whether
the style is used in the current web page.
Manage Styles panel icons
Icon
Description
A red dot appears next to ID selectors.
A green dot appears next to class selectors.
A blue dot appears next to element selectors.
A circle appears around a colored dot to mark styles that are used in the current web page.
An @ symbol appears next to imported external cascading style sheets.
To move a style
1. In the Manage Styles panel, click Options, and select Categorize By Order.
2. Do any of the following:
To move the location of a style in the CSS, drag the style up or down in the list. For example,
you could move the styles that you use most frequently so they conveniently appear adjacent to
one another.
To move a style from an internal CSS to an external CSS that's attached to the page, drag the
style from under Current Page to either the name of the external CSS you want to contain it
or to a particular point in the list of styles in the external CSS.
To move a style from an external CSS to an internal CSS, drag the style from under the name
of the external CSS to either Current Page or to a particular point in the list of styles under
Current Page. If Current Page doesn't appear, add a set of <style></style> tags between the
<head></head> tags of your web page.
To move a style from an external CSS to a different external CSS, drag the style to either the
name of the external CSS you want to contain it or to a particular point in the list of styles in
the external CSS.
Note
When the Manage Styles panel is set to Categorize By Element or Categorize By Type in the panel
Options, you can't move a style to a particular point in the list of styles. With either option, you can only
move a style from an external CSS to either another external CSS or internal CSS, or vice versa by
dragging the style to the name of the external CSS file or to Current Page (for the internal CSS).
12/4/2015
Page 32 of 62
To sort styles in the Manage Styles panel
In the Manage Styles panel, click Options, and then do the following:
Select this
To do this
Categorize By Order
List styles according to the order they appear in the CSS.
Categorize By Element
List styles under the HTML element each style is applied to.
Categorize By Type
List styles alphabetically and according to the type of style.
To separately list each selector of styles that contain multiple

selectors
In the Manage Styles panel, click Options, and then select Separate Grouped Selectors.
To show or hide styles in the Manage Styles panel
In the Manage Styles panel, click Options, and then do the following:
Select this
To do this
Show All Styles
List all styles that are contained in the external, internal, and inline CSS
of the current web page.
Show Styles Used In

Current Page
List only styles that are used in the current web page.
Show Styles Used On

Selection
List only styles that are used by the current selection in the page.
To show a preview of a selected style in the Manage Styles panel
In the Manage Styles panel, click Options, and then select Display Selected Style Preview.
See also
Reference
Apply Styles panel
Concepts
Using cascading style sheet tools
Working with styles
Publishing Status panel
The Publishing Status panel displays file transfer status when you publish a site. When you have finished
12/4/2015
Page 33 of 62
publishing, you can select different views in the Publishing Status panel to display a full Log, logs of just
the file transfers that Completed, or logs of the file transfers that Failed.
The Queue displays only the files that haven't been published. The progress bar is displayed while a
file is being published. Files that are queued for publishing display a dash (-) character in the
Progress column.
While the publishing operation is in progress, you can scroll down the Queue to see all the files that
haven't yet been published.
Click the tabs at the bottom of the Publishing panel to select one of the following lists:
The Queue tab displays the files waiting to be published. It is displayed by default.
The Failed tab displays a list of any files that were not published successfully.
The Completed tab displays a list of all files that transferred correctly.
The Log tab displays a complete log of the publishing operation.
See also
Reference
Publishing view
Concepts
Publishing sites
Snapshot Panel
With Snapshot, you can see how your page renders in the browser of your choice, right inside Microsoft
Expression Web. Just like with other panels, you can move it and dock it wherever you like. The Snapshot
panel display is updated every time you save the page it displays.
Note
You must use Microsoft Internet Information Services (IIS) to preview ASP (not ASP.NET) pages. See
Preview pages in a browser to use a custom URL for preview.
12/4/2015
Page 34 of 62
You can preview ASP.NET, or PHP web pages by using Microsoft Expression Development Server. The
Expression Development Server is installed when you install Expression Web. If you need to repair or
reinstall Expression Development Server, see Installing Expression Development Server.
For more information about previewing ASP.NET or PHP web pages, see Previewing an ASP.NET page or
Previewing a PHP page.
For information about using a custom URL for preview, see Preview pages in a browser.
The Snapshot panel
You can use the Browser drop-down list to select from a list of available browsers.
Note
Snapshot includes interactive preview modes for Windows Internet Explorer and Mozilla Firefox.
You can use Browser window size drop-down list to select from a list of preset screen sizes or
create a custom screen size.
Note
The minimum Browser window size is 640 x 80.
You can use Snapshot view to display any HTML, PHP, ASP, or ASPX page that you have open
and selected for editing.
The Snapshot panel displays a browser rendering of an HTML, PHP, ASP, or ASPX page. The Snapshot
panel display is updated every time you save the page it displays.
To activate Snapshot
On the Panels menu, click Snapshot. The Snapshot panel appears.
On the View menu, click Page, and then click Snapshot.
To turn active document preview on and off

When Always Preview Active Document is on, the Snapshot view updates every time you select the tab
of an open page or open a new page.
Click the Always Preview Active Document button
to turn active document preview on.
Click the Always Preview Active Document button
to turn active document preview off.
12/4/2015
Page 35 of 62
See also
Concepts
Preview pages in a browser
Displaying pages in SuperPreview
Tag Properties panel
You can use the Tag Properties panel to quickly see all of the set attributes and values of the tag that's
currently active in the current web page. You can also use this panel to modify the set attributes and set
new attributes for the current tag.
Tag Properties Panel
The Show categorized list button

Attributes and Events.
organizes the list of properties under categories, such as
Note
Events include Behaviors and other scripted actions. For more information, see Adding behaviors.
The Show alphabetized list button
organizes the list of properties into a single alphabetical list.
The Show set properties on top button

organizes the list of properties so that properties that
you have set for the current tag appear at the top of the list.
12/4/2015
Page 36 of 62
The Show Tag Properties button

opens the Properties dialog box for the current tag, which
typically provides the most commonly-used properties but doesn't contain all of properties that the
Tag Properties panel provides.
The tag that's currently active in the current web page.
When Show categorized list
and Show set properties on top
are both selected, properties
of the current tag are grouped at the top of each category's list of properties.
You can set the value of a property in the box next to the property name. You can type a value or
point at the box and then click, when available, the arrow button
or ellipses button
and select
a value.
To show or hide the Tag Properties panel
On the Panels menu, click Tag Properties.
See also
Tasks
Edit the properties of an HTML tag
Concepts
Using code views
Quick Tag Editor
Toolbox panel
You can use the Toolbox panel to drag HTML elements, form controls and ASP.NET controls onto your
web pages. The code Microsoft Expression Web creates when you drag an item onto your page depends on
the DocType declaration in your page. For example, if your DocType is HTML, when you drag a BREAK
element onto the page, Expression Web creates a <br> tag. If your DocType is XHTML, Expression Web
creates a <br /> tag.
For more information about DocTypes, see Set document type information.
Toolbox panel
12/4/2015
Page 37 of 62
Drag HTML elements from the Tags section of the Toolbox panel to your page.
Drag form controls from the Form Controls section of the Toolbox panel to your page.
For more information, see Getting user input with forms.
Drag media types from the Media section of the Toolbox panel to your page.
For more information, see Working with video and other media.
Drag ASP.NET controls from the ASP.NET Controls section of the Toolbox panel to your page.
For more information, see ASP.NET Standard controls.
To change the way items are displayed in the Toolbox panel

Right-click the Toolbox panel name tab or title bar, and then do one of the following:
To show icons and names, click Icons and Names.
To only show icons, click Icons Only.
To only show names, click Names Only.
See also
Concepts
12/4/2015
Page 38 of 62

Panels
Snippets panel
In the Snippets panel, you can add, delete, modify, and organize code snippets. Just like with other panels,
you can move it and dock it wherever you like.
The Snapshot panel
You can use the Filter field to display a short list of snippets that have similar names.
You can use custom folders to help organize your snippets.
Snippets marked with this icon ( ) insert code before and after the text you've selected.
Snippets marked with this icon ( ) insert code where the cursor is located, replacing any text
you've selected.
The Options drop-down menu lets you add, delete, modify, and organize your code snippets.
For more information about organizing code snippets, see Create or modify a code snippet.
See also
Tasks
Create or modify a code snippet
Other resources
Using code snippets
Keyboard shortcuts
12/4/2015
Page 39 of 62
You can use a keyboard shortcut to select a menu command or perform an action in Microsoft Expression
Web by pressing one or more keys on your keyboard instead of using the mouse. For example, to open the
Insert Hyperlink dialog box, press CTRL+K.
Tip
On a menu, you can identify a keyboard shortcut by looking at the shortcut that appears next to the menu
command. For example, on the File menu, next to Open, the shortcut is CTRL+O. For a toolbar button,
you can identify a keyboard shortcut by looking at the ScreenTip.
Site shortcuts
To do this
Press
Create a new site
CTRL+SHIFT+N
Open an existing site
CTRL+SHIFT+O
Web page shortcuts

To do this
Press
Create a new web page
CTRL+N
Open a web page
CTRL+O
Close a web page
CTRL+F4
Save a web page
CTRL+S
Print a web page
CTRL+P
Refresh a web page

Refresh Code view changes in Design view
F5
Refresh the Folder List panel and Web Site tab

Switch between open web pages
CTRL+TAB
Switch between open web pages in reverse order
CTRL+SHIFT+TAB
Preview a web page in a web browser
F12 or CTRL+SHIFT+B
Display a page in SuperPreview
SHIFT+F12
Modify page properties
ALT+ENTER
Delete a web page or folder in the Folder List panel or any

dialog box
DELETE
Move among Code, Design, and Split views
CTRL+PAGE DOWN or CTRL+PAGE

UP
Move between Code and Design panes in Split view
ALT+PAGE DOWN or ALT+PAGE

UP
Show or hide the Folder List panel
ALT+F1
Rename the currently selected file in the Folder List panel
F2
Select the element that contains the current selection
ESC
12/4/2015
Page 40 of 62
In Design view, show or hide Visual Aids
CTRL+/
In Design view, show or hide Formatting Marks
CTRL+ALT+/
SuperPreview shortcuts
To do this
Press
Open a web page
CTRL+O
Add a new comparison browser slot
CTRL+N
Select baseline browser view
Select comparison browser slot 1
Clear baseline browser
CTRL+DEL
Clear selected browser
DEL
Select the URL address bar
ALT+D or F4
Refresh the display
CTRL+R or F5
Toggle ruler display
Toggle DOM view display
Toggle lights-out display
Toggle the thumbnail preview display
Toggle guide display
CTRL+;
Select vertical split layout view
Select horizontal split layout view
Select overlay view
Select single browser view
Select selection mode
Select panning mode
Select browser size
Zoom to 100%
CTRL+1
Zoom to fit page
CTRL+0
Zoom in
CTRL+PLUS SIGN or PLUS SIGN
12/4/2015
Page 41 of 62
Zoom out
CTRL+MINUS SIGN or MINUS SIGN
Pan the browser views
SPACEBAR+arrow key
Snapshot shortcuts
To do this
Press
Select Snapshot browser size
Select Snapshot browser
Select Always preview active document
Application shortcuts
To do this
Press
Quit Expression Web
ALT+F4
Cancel an action
ESC
Undo an action
CTRL+Z or ALT+BACKSPACE
Redo or repeat an action
CTRL+Y or
SHIFT+ALT+BACKSPACE
Cycle through open dialog boxes
ALT+F6
Cycle through open dialog boxes in reverse order
ALT+SHIFT+F6
Connect to publishing destination
CTRL+ALT+C
Disconnect from publishing destination
CTRL+ALT+D
Add publishing destination
CTRL+ALT+A
Stop the publishing operation in progress
CTRL+ALT+X
Change the Publishing Settings
CTRL+ALT+S
Publish files to the publishing destination
CTRL+ALT+P
Get files from the publishing destination
CTRL+ALT+G
Synchronize files between the publishing source and the

publishing destination
CTRL+ALT+Y
Find and replace shortcuts

To do this
Press
Find text or code
CTRL+F
Find the next occurrence of the most recent search
F3
Find the previous occurrence of the most recent search
SHIFT+F3
Find the next occurrence of the current selection
CTRL+F3
Find the previous occurrence of the current selection
CTRL+SHIFT+F3
12/4/2015
Page 42 of 62
Replace text or code
CTRL+H
Check spelling
F7
Look up a word in the thesaurus
SHIFT+F7
Code view shortcuts

To do this
Press
Show the Quick Tag Editor
CTRL+Q
Insert temporary bookmark
CTRL+F2
Next temporary bookmark
F2
Previous temporary bookmark
SHIFT+F2
Go to line
CTRL+G
Insert code snippet
CTRL+ENTER
Insert end tag
CTRL+PERIOD
Insert start tag
CTRL+COMMA
Insert HTML comment
CTRL+/
Complete word
CTRL+SPACEBAR
Select tag and its contents
CTRL+SHIFT+:
Find matching tag
CTRL+;
Perform an incremental search
CTRL+ALT+F
Increase indent
TAB
Decrease indent
SHIFT+TAB
Select tag
CTRL+:
Select block
CTRL+'
Find matching brace
CTRL+]
Follow code hyperlink
CTRL+[
Go to previous code hyperlink
ALT+LEFT ARROW
Go to next code hyperlink
ALT+RIGHT ARROW
Show an IntelliSense popup menu
CTRL+L
Show an IntelliSense code tip
CTRL+ SHIFT+SPACE
Complete a partially typed word
CTRL+SPACE
List code snippets
CTRL+ENTER
Text shortcuts
To do this
Press
12/4/2015
Page 43 of 62
Apply bold formatting
CTRL+B
Apply an underline
CTRL+U
Apply italic formatting
CTRL+I
Apply superscript formatting
CTRL+PLUS SIGN
Apply subscript formatting
CTRL+EQUAL SIGN
Copy text or graphics
CTRL+C or CTRL+INSERT
Increase font size
CTRL+SHIFT+>
Decrease font size
CTRL+SHIFT+<
Cut selected text or graphics
CTRL+X or SHIFT+DELETE
Paste text or graphics
CTRL+V or SHIFT+INSERT
Copy formatting
CTRL+ SHIFT+C
Paste formatting
CTRL+SHIFT+V
Remove manual formatting
CTRL+SHIFT+Z or
CTRL+SPACEBAR
Center a paragraph
CTRL+E
Left align a paragraph
CTRL+L
Right align a paragraph
CTRL+R
Indent a paragraph from the left
CTRL+M
Indent a paragraph from the right
CTRL+ SHIFT+M
Insert a line break
SHIFT+ENTER
Insert a nonbreaking space
CTRL+SHIFT+SPACEBAR
Select the Style menu in the Common or Formatting toolbar
CTRL+SHIFT+S
Select the Font menu in the Common or Formatting toolbar
CTRL+SHIFT+F
Select the Font Size menu in the Common or Formatting

toolbar
CTRL+SHIFT+P
Select the element that contains the current text
ESC
Tables, graphics, and hyperlinks shortcuts

To do this
Press
Insert a table
SHIFT+CTRL+ALT+T
Select the content of the next table cell
TAB
Select the content of the preceding table cell
SHIFT+TAB
Select the cell or table that contains the current element
ESC
With a graphic selected, create an auto thumbnail
CTRL+T
Create a hyperlink
CTRL+K
12/4/2015
Page 44 of 62
Frames shortcuts
To do this
Press
Select the next frame or frameset
CTRL+SHIFT+F6
Select the previous frame or frameset
CTRL+F6
See also
Concepts
Set startup options
You set startup options for Microsoft Expression Web by using the Application Options dialog box.
To change startup options

2. In the Application Options dialog box, click the General tab.
3. In the Startup section, do the following:
Select this
To do this
Open last site automatically when

Expression Web starts
Open the last site you opened in Expression Web when

you start the program.
Check if Expression Web is the default

editor for pages
Check whether Expression Web is set to open all web

pages.
See also
Concepts
Set the Expression Web color scheme
By default, the Microsoft Expression Web program interface appears in shades of gray color. You can set
Expression Web to appear in the same color scheme you have set for the Windows operating system.
To set the color scheme of Expression Web

2. In the Application Options dialog box, on the General tab, under General, select or clear Use your
12/4/2015
Page 45 of 62
current Windows color scheme.

3. Click OK.
The Expression Web color scheme changes to match your Windows color scheme.
Managing files
Microsoft Expression Web provides several ways to manage the files in your site. You can get the full path
of a file or folder and you can open a file or folder in Windows Explorer.
To open a file or folder in Windows Explorer

1. In the Folder List pane, right-click a file or folder, and then click Open folder in Windows
Explorer.
2. From the Folders tab of the Site View window, right-click a file or folder, and then click Open
folder in Windows Explorer.
To get the full path of a file or folder

1. In the Folder List pane, right-click a file or folder, and then click Copy full path.
2. From the Folders tab of the Site View window, right-click a file or folder, and then click Copy full
path.
Undo or redo actions
Microsoft Expression Web maintains a list of the last 30 actions and lets you undo each in sequence.
Similarly, you can redo any of the last 30 actions that you've undone.
To undo the last action you performed
Click Undo (or just press CTRL + Z). If you click Undo again, Expression Web will undo the
action you performed before that, and so on.
To see a list of the most recent actions that you can undo
Click the arrow next to Undo
, and then select the action or actions that you want to undo.
To redo the last action you undid
Click Redo
(or just press CTRL + Y).
To see a list of the most recent undone actions that you can redo
12/4/2015
Click the arrow next to Redo
Page 46 of 62
, and then select the undone action or actions that you want to redo.
Note
Renaming files in the Folder List panel, either manually, or with a macro, cannot be undone.
See also
Reference
Menus and toolbars
Concepts
About add-ins
Add-ins are supplemental programs that extend the capabilities of Microsoft Expression Web by adding
custom commands and specialized features.
When you disable an add-in, its features and commands are removed from Expression Web, but the add-in
itself remains on your computer for easy reloading.
Note
You can enable and disable add-ins while Expression Web is running but you must close Expression Web
before you can install or uninstall add-ins from your computer.
For more information about enabling and disabling individual add-ins, see Manage Add-ins dialog box
Important
Security vulnerabilities in external files or controls may extend to Web pages that use those items. For
example, external script files (files with a .js extension), custom ASP.NET controls, or other items, may
pose a security risk. Be sure your add-ins, themes, executables, scripts, controls, or other files come from
trusted sources.
See also
Concepts
Safe Mode dialog box
Manage Add-ins dialog box
An add-in is a small program that provides additional commands and features to Microsoft Expression
Web. You install an Expression Web add-in the same way you install other programs. Once an add-in is
installed, it is displayed in the Manage Add-ins dialog box, where you can choose to enable or disable it.
Note
When you enable or disable add-ins from the Manage Add-ins dialog box, you must restart Expression
Web to apply the changes.
12/4/2015
Page 47 of 62
To enable or disable an add-in

1. On the Tools menu, click Add-Ins.
Enable an add-in In the Manage Add-ins dialog box, select the check box next to the add-in
you want, and then click OK.
The selected add-in will be enabled when you restart Expression Web.
Disable an add-in Clear the check box next to the add-in you want to disable, and then click
OK.
The add-in will be disabled when you restart Expression Web.
Note
This procedure does not remove the add-in from your computer. To remove an add-in completely, you
must uninstall it from the Control Panel.
See also
Concepts
If something causes Microsoft Expression Web to exit unexpectedly, the next time you run Expression
Web, it automatically restarts in Safe Mode, which disables all add-ins.
Troubleshooting
To help isolate the problem that caused Expression Web to exit unexpectedly, try disabling all of the addins and enabling them one at a time until the error occurs again.
Exiting Safe Mode

When you restart, Expression Web will automatically start in normal mode.
See also
Tasks
Manage Add-ins dialog box
Concepts
About add-ins
12/4/2015
Page 48 of 62
Application Options dialog box

You can customize Microsoft Expression Web by using the Options dialog box. The dialog box provides
options on the following tabs.
General
Startup
Open last Web site automatically when Expression Web starts
Automatically open the last Web site you opened in Expression Web when you start the program.
Check if Expression Web is the default editor for pages
Check whether Expression Web is the default editor for web pages whenever Expression Web is
started.
General
Use your current Windows color scheme
Set Expression Web to appear in the same color scheme you have set for the Windows operating
system
For more information, see Set the Expression Web color scheme.
Show status bar
Display the status bar at the bottom of the Expression Web window. The status bar displays
information about program settings and files, such as the estimated time required for a site visitor to
download and open a page.
Proxy Settings
Display or change existing settings for connecting your computer to a network or the Internet, or to
set up a new connection to a network or the Internet.
PHP
Path to PHP executable for previewing PHP pages
Display, set, or change the path to the PHP executable to enable the preview of PHP pages.
Configure Editors
You can configure Expression Web to use external programs when opening specific file types from within
Expression Web.
Extensions
List file name extensions for file types that you can associate with a program.
To associate an editor with a file extension that doesn't appear in the Extensions
list Click .
12/4/2015
Page 49 of 62
To change an existing editor association Select an item from the Extensions list, and then
click .
To delete an existing association Select an item from the Extensions list, and then click
Editors
List the names of programs associated with the selected file name extension and file type. Expression
Web uses these settings to determine which program to search for and open when you open a file of
the selected type from within Expression Web. The first program in the list is the first program that
Expression Web searches for when opening a file. If that program cannot be found, Expression Web
searches for the next program, and so on. By changing the order of programs in the list, you can
specify the order in which you want Expression Web to search. These settings apply only to
Expression Web. They do not change your Microsoft Windows settings.
If Expression Web is the default editor for a file type but fails to load a file of that type, Expression
Web will try to open the file in the next editor in the list.
To associate a program that doesn't appear in the Editors list with the selected file
extension Click .
To delete an associated editor Select an item from the Editors list, and then click
Make Default
Set the selected program as the default program for opening files of the selected type from within
Expression Web.
Move Up
Move the selected program up in the Editors list.
Move Down
Move the selected program down in the Editors list.
Reports View
"Recent" files are less than n days old
Enter the maximum number of days, since a file was last changed, that you want Expression Web to
use when identifying recent files in a Files report.
"Older" files are more than n days old
Enter the minimum number of days, since a file was last changed, that you want Expression Web to
use when identifying older files in a File report.
"Slow pages" take at least n seconds to download
Enter the maximum number of seconds you want for downloading and opening a page with the
specified connection speed. Pages that require more time to download appear in the Problems report
named Slow Pages.
Assume connection speed of n Kbps
12/4/2015
Page 50 of 62
Specify the Internet connection speed Expression Web uses when calculating the time required for
site visitors to download and open a page.
Display gridlines when viewing reports
Show gridlines in reports that use a table format.
FTP
Use Passive FTP
Enable or disable passive FTP. Some network configurations will work only with passive FTP
enabled; others will only work with it disabled.
Extensions to transfer as ASCII
List file name extensions for the types of files you want to encode in American Standard Code for
Information Interchange (ASCII) format when transferring files to and from local and remote site
locations by using File Transfer Protocol (FTP) or opening files stored on a server that supports FTP.
New Extension
Specify file name extensions for a file type you want to encode in ASCII format when transferring or
opening files of that type.
Add
Add the file name extension in the New Extension box to the list of file name extensions.
Remove
Delete the selected file name extension from the list.
Reset Defaults
Restore file name extensions that were deleted from the list and deletes those that were added after
you installed Expression Web on your computer.
See also
Tasks
Previewing a PHP page
Concepts
Page Editor Options dialog box
You can specify settings for many Microsoft Expression Web features by selecting options in the Page
Options dialog box. The dialog box provides options on the following tabs.
12/4/2015
Page 51 of 62
General
Use this
To do this
Automatically nest tags for form fields, such as option buttons and text
Automatically enclose form
boxes, in form (<form>) tag sets. To add form fields without nesting
fields within a form
them in form tags automatically, clear this check box.
Assign unique IDs to new
tables
Automatically define unique identifier numbers, by using the identifier

(id) attribute, for tables. When you define a unique identifier for a table in
a Web page, your site visitors can import data from the table to a
spreadsheet program, such as Microsoft Excel.
Make ID unique on paste
Automatically define unique identifier numbers when you copy and paste
Web page elements that have an identifier (id) attribute.
Use <strong> and <em>

when using bold and italic
toolbar buttons
Use the preferred <strong> and <em> HTML tags, rather than the
deprecated <b> and <i> tags.
Automatically switch
keyboard to match
language of surrounding
text
Automatically switch the active keyboard layout to match the language of

the text where the cursor is.
Prompt for accessibility

properties when inserting
images
Automatically display the Accessibility Properties dialog box when you

insert an image so you can set the alternative text for the image to make it
accessible to screen readers.
Spelling
Use this
To do this
Configure options for correcting spelling in Expression Web.
Spelling Options
For more information, see Set spelling options.
Default Page Language
Set the language used by the spelling checker.
For more information, see Set spelling options.
Cut and Paste Options

Use this
Show Paste
Options buttons
To do this
Display the Paste Options button when you paste text or elements into a page.
When you click the button, a list appears with options for pasting the text or
element.
Code View Options

The following options apply only to Code view.
Use this
Word wrap
To do this
Wrap code to the document window, which allows you to see all of the code for a
page without scrolling horizontally. To view code in lines that break only where
12/4/2015
Page 52 of 62
you have manually inserted a line break, clear this check box.
Auto indent
Automatically indent the next line of code when you type a line of code, indent it,
and then press ENTER.
Line numbers
Display a line number next to each line of code in the document window. Line
numbers can help you locate and move between specific lines of code.
Selection margin
Display a vertical margin next to code in the document window. When you click
the margin next to a line of code, you select that line of code. When you drag in the
margin next to multiple lines of code, you select those lines of code.
Display invalid HTML in a specific color scheme (the default is red text on a
yellow background). You can specify this color scheme in the Color Coding tab of
the Page Editor Options dialog box.
Highlight invalid
HTML
Tip
To display a floating window that contains more information about a particular
instance of invalid or incompatible code, in Code view, point at the code that
appears highlighted or underlined.
Highlight
incompatible
HTML
Display a wavy underline beneath code that isn't compatible with HTML standards.
Security Options
Use this
To do this
Allow Expression Web to run unsigned ActiveX controls
with prompts.
Allow unsigned ActiveX controls to be run

and prompt for permission to run them
Clear ActiveX Security Settings
Note
Don't run an unknown or unsigned ActiveX control
unless you absolutely trust the publisher that created the
control.
Clear the list of unknown and unsigned ActiveX controls
that you have set Expression Web to allow to run.
For information, see Security and ActiveX controls.
Auto Thumbnail
Sets the default properties for thumbnails. For more information, see Create a thumbnail picture.
Default Fonts
Select the fonts Expression Web uses for Code view text and for Design view text that that has no font
specified. You can configure individual font schemes for each of the available languages (character sets).
Use this
To do this
Language (character set) Select the language (character set) for which you are defining default fonts.
Design View
12/4/2015
Page 53 of 62
Use this
To do this
Default proportional
font
Set the default font for unformatted proportional-spaced text, such as <h1>,
<p>, and <li>.
Default fixed-width
font
Set the default font for unformatted fixed-width text, such as <pre> and
<code>.
Code View
Use
this
To do this
Set the default font for Code view.
Font
Tip
For easier readability in Code view, it is recommended that you use a fixed-width font, such as
Consolas or Courier.
Size
Set the default font size for Code view.
For more information, see Format code.
Code Formatting
Use this
To do this
Base on current page
Set available code formatting options according to code formatting of a

particular page.
Tag names are

lowercase
Enter tags in lowercase instead of uppercase.
Attribute names are

lowercase
Enter attribute names in lowercase instead of uppercase.
Attribute names are

alphabetized
Enter HTML attributes in alphabetical order.
Allow line breaks within

Allow line breaks to appear within tags instead of keeping a tag on one line.
tags
Tab size
Set the number of character spaces to indent when you press TAB in Code
view and used by the Indent code formatting option.
Indent
Set the size and unit of the left margin for nested code.
Right margin
Set the size of the right margin for code.
Insert tabs as spaces
Format tabs as spaces.
Tags
To set options for formatting specific tags, select the tag you want to format, and then set the following
options:
Line Breaks
12/4/2015
Page 54 of 62
Use this
To do this
Before
start
Set the number of line breaks between the start tag and any content that immediately
precedes it. If this value is 1 or greater, the start tag will be displayed in a new line.
Before
end
Set the number of line breaks between the tag contents and the end tag. If this value is 0, the
end tag will be displayed inline with the content that it follows.
After
start
Set the number of line breaks between the start tag and any content that immediately follows
it. If this value is 0, the content will be displayed inline with the start tag.
After
end
Set the number of line breaks between the end tag and anything that immediately follows it.
If this value is 0, the tag will be displayed inline with the start tag.
Each of the following options may or may not be available, depending on the tag:
Use this
To do this
Omit start tag
Automatically exclude the start tag. This option is unavailable for elements that require
a start tag.
Omit end tag
Automatically exclude the end tag. This option is unavailable for elements that require
an end tag.
Indent
contents
Automatically indent tags nested in the element.
CSS
To set options for formatting specific CSS, select the tag you want to format, and then set the following
options:
Use this
To do this
Set options for formatting particular components of CSS, select the component you
want to format, and then under Formatting, set the options you want. For example,
if you want a particular number of spaces to appear after the opening curly brace ({)
that starts a style's declaration block, under CSS, select Opening Brace, and then
specify the number of spaces you want in the Spaces after box.
CSS
Indent properties
Indent CSS attributes that are written by Expression Web.
on new lines
Use shorthand
properties when
generating styles
Use shorthand CSS attributes instead of longhand. For example, with this option
selected, Expression Web would define the values of the width, color and style of a
border by setting only the border attribute in the style. With this option cleared,
Expression Web would set an attribute and value for each border attribute.
Reset
Reset the options to their default values.
CSS
Use this
Auto Style Application
To do this
Configure options for Auto Style Application Mode
12/4/2015
Manual Style Application
Page 55 of 62
Configure options for Manual Style Application Mode
Select which technology to use for the following properties

Use this
To do this
Select the type of style that Expression Web creates in Auto mode when using
Page properties on the
the Formatting tab in the Page Properties dialog box to set the background
<body> tag
picture, background color, or default text color of a web page.
Font and text
the Font or Symbol dialog box, or any button on the Formatting toolbar
except for the Numbering, Bullets, Highlight and Borders buttons.
Background
the Patterns options in the Borders and Shading dialog box or the Highlight
button in the Formatting toolbar.
Borders
the Borders and Shading dialog box except for the Padding options.
Padding and margins
the Paragraph dialog box, the Padding options in the Borders and Shading
dialog box, the Advanced tab in the Page Properties dialog box, or adding
margins or padding to items in Design view.
Sizing, positioning,
and floating
the Position dialog box, Positioning toolbar, the Layers panel, or when you
add or resize a picture and other items in Design view.
Bullets and
numbering
the List Properties dialog box or the Numbering and Bullets buttons on the
Common or Formatting toolbar.
Only reuse classes

with the prefix "style"
Select to enable Expression Web to modify class selectors only when the name
of the selector begins with ".style".
Note
This option is only available in Auto mode.
Use width and height

attributes for images
instead of CSS
Set the dimensions of pictures that you add to a page by adding width and
height attributes to the <img> tag. If deselected, Expression Web uses CSS to
set the dimensions of pictures; the type of style that is applied to the picture
depends on the setting of the Sizing, positioning, and floating option.
Reset Defaults
Reset the options to their default values.
For more information, see Set preferences for generated CSS.
Color Coding
Use this
To do this
Code view settings
Configure options for Code view settings.
Design view settings
Configure options for Design view settings.
Display items
Select the item you want to format.
12/4/2015
Page 56 of 62
Item foreground, Item background, and Font

style
Format the code for the item selected under Display

items
Reset Defaults
Set the options to their default values.
Authoring
New Documents
Use this
To do this
Default Document
Select the default document type
Default HTML File Extensions
Choose the file extensions for HTML

files
Add a byte order mark (BOM) when creating or renaming

UTF-8 documents with these file extensions
Choose which file types to

automatically add byte order marks.
For more information, see Add or remove byte order marks.
Doctype and Secondary Schema

Use this
To do this
Choose a default document type declaration
Document Type
Declaration
Secondary Schema
Note To prevent Expression Web from inserting a Document Type declaration,

in the Document Type Declaration box, select None.
Choose a secondary schema
For more information, see Set document type information.
CSS Schema
Use this
To do this
Schema version
Choose the CSS schema that Expression Web will use for IntelliSense
For more information, see Set IntelliSense options for CSS.
Picture
Use this
To do this
File Type Settings
Open the Picture File Type dialog box
Default File Type Conversion and

Paste Settings
Choose conversion settings for picture files that are in

incompatible formats.
For more information, see Set options for pasting pictures.
12/4/2015
Page 57 of 62
Code Snippets
Use this
To do this
Add
To create a new code snippet.
Modify
To change an existing code snippet.
Remove
To delete an existing code snippet.
For more information, see Using code snippets.
Ruler and Grid

Use this
To do this
Ruler and grid units
Choose the unit of measure for the ruler and grid.
Display Grid
Set spacing and line options for the grid display
Snapping Grid
Set spacing options for the snapping grid (the grid to with items will "snap").
For more information, see Use rulers and a grid for guidance.
IntelliSense
These settings apply when working on documents in Code view.
Use this
To do this
Auto Popup
Enable shortcut menus for the statement completion items and ScreenTips to look up
script parameters.
Auto Insert
Enable Expression Web to automatically insert the named item as you edit code.
Code
Hyperlinks
Enable you to go to the named item by holding down CTRL and clicking.
For more information, see Set IntelliSense options.
Font Families
Use this
Select font
family
Add font
To do this
To modify an existing font family, select the font family.
To create a new font family, select New Font Family.
To reposition a font family in the list of font families, select the font family that you
want to move, and click Move Up or Move Down.
To delete a font family, select the font family that you want to delete, and click
Remove.
To add a font or font style to the selected font family, select a font or font style, and then
click Add. Repeat this step for each font that you want to add to the selected font family.
12/4/2015
Page 58 of 62
For more information, see Add or modify a font family.

Saving different views of your workspace
After you have moved and resized your workspace panels, and crafted the perfect workspace for you to
work optimally, you can save the workspace under a descriptive name and restore it later.
Workspace properties that are saved

Saved information includes the visibility of panels, the size and orientation of panels, the panels that are
within panel groups, and whether a panel is floating or docked. For information about arranging workspace
panels, see Panels.
Workspace presets
Microsoft Expression Web comes with the following predefined workspace presets:
The Designer workspace preset displays the Folder List, Tag Properties, Toolbox, and Manage
Styles panels.
The Developer workspace preset minimizes the Toolbox, Manage Styles, and Snippets panels to
provide a larger workspace for Code view.
The Developer (Snapshot) workspace preset is identical to the Developer workspace but also
displays the Snapshot panel.
The reporting workspace preset simplifies the task of running reports against your website by
minimizing all but the Folder List and the Accessibility, Compatibility, Search Engine
Optimization, Hyperlinks, and CSS Reports panels arranged as tabs.
Expression Web lets you save multiple workspaces that you have customized for different projects or
different kinds of work. When you save a workspace layout, you create a new preset, just like the Designer
and Developer workspace presets.
For information about how to save workspaces and switch workspaces, see Save a workspace and Select a
workspace.
Modifying a workspace preset

To save you time, Expression Web automatically saves the changes that you make to your currentlyselected workspace.
For example, if you save your current workspace under the name "Workspace1" and then move a panel,
Expression Web saves the new position of the panel in Workspace1. You could close and reopen
Expression Web, or switch to a different workspace and then switch back to Workspace1, and the panel
will be displayed in the new position.
However, Expression Web does not change the original layout of the Workspace1 preset that you initially
saved. You can always return to the original preset by resetting your workspace while in Workspace1. If
you do this, the panel that you moved will return to the position it was in when you first saved
Workspace1.
For information about how to reset a workspace, see Reset the current workspace.
12/4/2015
Page 59 of 62
To create a new workspace preset with the panel in the new position, move the panel and then save the
workspace under a new name.
Managing the list of saved workspaces

You can use the workspace management window to delete and rename workspaces, and to see which
workspace is currently selected. For more information, see Rename or delete a workspace and Find out
which workspace was last loaded.
See also
Concepts
Panels
Save a workspace
After you have moved and resized your workspace panels, you can save the workspace as a new preset.
You can save multiple layouts of your workspace. This is useful if you want to have different workspaces
available for different tasks.
For information about which workspace properties are saved, default workspace presets, and modifying
workspace presets, see Saving different views of your workspace.
To save the configuration of your workspace

1. On the Panels menu, click Save as New Workspace.
2. In the Save as New Workspace dialog box, enter a unique name for your workspace, and then click
OK.
Tip
To save you time, Expression Web automatically saves the changes that you make to your currentlyselected workspace. For more information, see "Modifying a workspace preset" in Saving different views
of your workspace.
See also
Concepts
Rename or delete a workspace
Select a workspace
Select a workspace
You can save multiple layouts of your workspace, and load one when you need to. This is useful if you
want to have different workspaces available for different tasks.
For information about the workspace presets that come with Microsoft Expression Web, see.
12/4/2015
Page 60 of 62
To select a workspace layout
On the Panels menu, point to Workspaces, and then select the workspace that you want from the list
that appears.
Tip
To save you time, Expression Web automatically saves the changes that you make to your currentlyselected workspace. For more information, see "Modifying a workspace preset" in.
See also
Concepts
Reset the current workspace
Save a workspace
Reset the current workspace
Microsoft Expression Web automatically saves the changes that you make to your currently-selected
workspace. However, you can reset your workspace to the original preset that you initially saved. This is
useful if you make temporary changes to your workspace layout but want to return to the original layout
later.
For information about modifying workspace presets, see Saving different views of your workspace.
To reset your workspace

Select the workspace that you want to reset, and then do the following:
On the Panels menu, click Reset Current Workspace.
See also
Concepts
Find out which workspace was last loaded
Select a workspace
You can manage the set of workspace layouts that you have saved by using the Manage Workspaces
window.
To rename a saved workspace configuration

1. On the Panels menu, click Manage Workspaces.
2. In the Manage Workspaces dialog box, under Select a workspace, do one of the following:
Double-click the name of the workspace that you want to change.
12/4/2015
Page 61 of 62
Click the name of the workspace that you want to change, and then click Rename.
The name of the workspace configuration becomes editable.

3. Type a new name.
4. Click OK.
To delete a saved workspace configuration

1. On the Panels menu, click Manage Workspaces.
2. In the Manage Workspaces dialog box, under Select a workspace, click the name of the workspace
that you want to change, and then click Delete.
3. Click OK.
See also
Concepts
Select a workspace
Save a workspace
Find out which workspace was last loaded
If you switch between workspaces frequently, you might want to see which one you loaded last. This is
useful if you make changes to one of your workspaces and want to save the changes as a new workspace
preset under a similar name.
To identify which workspace configuration was loaded last

On the Panels menu, point to Workspaces. A pop-up menu appears, with a check mark next to the
name of the workspace that was loaded last.
On the Panels menu, click Manage Workspaces.

The Manage Workspaces dialog box appears, with a check mark next to the name of the workspace
that was loaded last.
See also
Concepts
Save a workspace
Custom toolbars
12/4/2015
Page 62 of 62
The Custom toolbar lets you create your own toolbars for Microsoft Expression Web and arrange
commands and icons to suit your preference.
Important
You cannot edit the built-in toolbars; you can only create new toolbars and edit custom toolbars that you
have created.
To create a new custom toolbar

1. From the View menu, click Custom Toolbars. The Custom Toolbars dialog box is displayed.
2. Click New and type a name for the toolbar in the New Toolbar dialog box.
Important
Toolbar names can contain only letters and numbers and must begin with a letter.
3. Select the command to add to the new toolbar (shift-click or control-click to select multiple
commands) and then click Add.
To change the order of commands in the toolbar, select one or more adjacent commands in the righthand view and click Move the selected command(s) up one step
or Move the selected
command(s) down one step .
4. Click OK to finish creating the new custom toolbar.
To edit a custom toolbar

1. From the View menu, click Custom Toolbars. The Custom Toolbars dialog box is displayed.
2. From the Toolbar drop-down menu, select the toolbar you want to edit.
3. Select the command to add to the new toolbar (shift-click or control-click to select multiple
commands) and then click Add.
4. Click OK to finish editing the custom toolbar.
12/4/2015

Expreesion

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Expreesion

Uploaded by

Copyright:

Available Formats

Adjusting your workspace

Adjusting your workspace

Adjusting your workspace

Adjusting your workspace

To customize Design view colors and font styles

To show or hide a visual aid

Adjusting your workspace

With a web page open, do one of the following:

To show or hide all visual aids

Selected block element

Empty Containers Shows a dotted rectangle around empty elements.

Adjusting your workspace

Margin and padding for a block element

Adjusting your workspace

A page in Design view.

To change the current page size setting

To add, modify, or remove a page size setting

2. In the Modify Page Sizes dialog box, do one of the following:

Adjusting your workspace

To show or hide rulers or the grid

To show or hide rulers, click Show Ruler.

Adjusting your workspace

To show or hide the grid, click Show Grid.

To snap to the grid

To change ruler and grid settings

Ruler and grid units

Select the type of units for the ruler and grids.

Display Grid Spacing

Select the number of units between gridlines.

Select the type of line for your grid.

Select your grid color.

Snapping Grid Spacing

Adjusting your workspace

To find a button on a toolbar

Click Toolbar Options

at the end of the toolbar.

To show all the buttons on a toolbar

Adjusting your workspace

Drag the move handle

of a docked toolbar to the new location.

To show or hide the status bar

Status bar information

Go to an HTML schema incompatibility in your code. If no HTML

Code Error Detected

Adjusting your workspace

View the current size of the file.

to close one panel.

Adjusting your workspace

to close the group of panels.

Panels in this group appear as tabs.

On the Panels menu, click the panel that you want.

Drag the title bar of the panel to the new location.

A shaded box shows where the panel will be docked.

Adjusting your workspace

Adjusting your workspace

Accessibility panel buttons

Run Accessibility Checker button

Generate an accessibility report.

Next Result button

Go to the next result.

Previous Result button

Go to the previous result.

Refresh Changed Results button