expreesion

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.

Here's what the workspace looks like when you first install Expression Web:

Send feedback about this topic to Microsoft. 2011 Microsoft Corporation. All rights reserved.

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

Adjusting your workspace

Tip To reset the workspace to the default, on the Panels menu, click Reset Workspace Layout.

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.

The editing window

Page 1 of 62Adjusting your workspace

12/4/2015file:///C:/Users/student%2023/AppData/Local/Temp/~hh2F7.htm

Page views Design Design and edit web pages using the design tools in an approximated WYSIWIG authoring

experience.

Split Review and edit web page content in a split screen format that offers you simultaneous access to both Code and Design views.

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

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.

There are three views in which you can edit web pages. 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.

Tip To display HTML tags in Design view, press CTRL+FORWARD SLASH (/).

Note When you are working in Split view, to apply changes you made in Code view to Design view, press F5.



Reference

Status barCode view toolbar

Concepts

Adjusting your workspacePanelsCode and Split page views


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 styles1. 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 alsoTasks

Format code

Concepts

The editing window


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.

To show or hide a visual aid

Customize Design view colors and font style

Visual aids

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.



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 aidsWith 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.

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.

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.

Note Block selection visual aids show for the following block elements: paragraph, list, list item, form, unpositioned div, address, block quote, horizontal line, and tags. Other types of elements show the dotted rectangle and margin and resize handles even when visual aids are hidden.

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.



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 alsoReference

Status bar

Concepts

Adjusting your workspaceThe editing window


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.

Add or modify a page size



Viewing a page with a page size setting turned on

To change the current page size settingDo 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.

To add, modify, or remove a page size setting1. 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 alsoConcepts

Preview pages in a browserThe editing windowAdjusting your workspace

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.

A page in Design view.

The same page in Design view with a page size setting turned on.

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.




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

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.

Use rulers and a grid for guidance

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 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 settings1. Do one of the following:

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:

See alsoConcepts

The editing windowVisual aids


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

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.

Menus and toolbars




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 button is displayed.

Click Toolbar Options at the end of the toolbar.

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

Menu bar

Menu command

Toolbar

Button

Show, hide, move, or dock a toolbar

Note If you can't find a toolbar button, you may need to enable editing for the language that the button applies to.



Drag the move handle of a docked toolbar to the new location.

See alsoReference

Menus and toolbarsCode view toolbarDynamic Web Template toolbarFormatting toolbarMaster Page toolbarPictures toolbarPositioning toolbarStyle Application toolbarStyle toolbarTables toolbar


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.

To show or hide the status bar1. 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

Status bar

Tip You can move the pointer over an item in the status bar for more information or to change options.

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 icon is displayed.

Code Error Detectedicon

Go to an error in the code on your page. If no code errors are detected, the Code Errors: None icon is displayed.

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.



See alsoConcepts



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

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.

Panels

Click Close to close one panel.

Tip You can also right-click the panel title bar or tab, and then click Close.



To open a panel On the Panels menu, click the panel that you want.

To move a panel Drag the title bar of the panel to the new location.

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.

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.

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.

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 float a panel Drag the title bar of a docked panel away from the edge of the program window.

See alsoReference

Menus and toolbars

Concepts



Use the Accessibility panel to create accessibility reports for pages in your site. For more information about accessibility reports, see Accessibility reports.

Accessibility panel



Accessibility panel buttons

See alsoConcepts

PanelsAccessibility reports


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.

Apply Styles panel

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.

Apply Styles panel

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.



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

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.

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.



To sort the list of styles in the Apply Styles panelIn 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 panelIn 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.

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 alsoTasks

Apply a style

Reference

Manage Styles panelCSS Properties panel

Concepts

Using cascading style sheet toolsCascading style sheet referenceWorking with styles


An @ symbol appears next to imported external cascading style sheets.

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.



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 Optionsdialog box.

Actions column See the behavior that corresponds with the event.

See alsoTasks

Adding behaviors

Concepts

Behavior scripts


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

Behaviors panel

Compatibility panel



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 to recheck pages that were checked and have changed.

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.

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 alsoTasks

Compatibility reports

Concepts

Customizing filters

Tip When the results of the report are filtered, the down arrow of the filtering column appears blue instead of black.



Validating codeGenerating site reportsAccessibility reportsPanels


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

See alsoTasks

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.



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.

CSS Properties panel

CSS Properties panel

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 organizes the list of properties under categories, such as Fontand Block.

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



See alsoTasks

Modify a styleCreate a styleRemove a style from contentSet IntelliSense options for CSS

Reference

Apply Styles panel

Concepts

Cascading style sheet reference


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 Rulesand 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 and selecting a value.

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.



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.

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

CSS Reports panel

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.

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 Resultbutton

Open the web page that contains the previous result in the list and highlight the error or reference.

Style Sheet Linksbutton Display the Style Sheet Links site report.

Column heading Sort or reverse the list of results.

Down arrow in column heading

Restrict the results to those that fit the criteria you select.

Note



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 alsoTasks

CSS Errors and Usage reports

Concepts

Generating cascading style sheet reportsGenerating site reportsCascading style sheet reference


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.

Data Source Details panel

When the results of the report are filtered, the down arrow of the filtering column appears blue instead of black.




See alsoTasks

Add RSS feeds to a page

Reference

Data Source Library panel

Concepts

Configure a data source by using a data bound control


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.




You can use the Data Source Library panel to add, edit, or delete XML or database connections in your site.


See alsoTasks

Add RSS feeds to a page

Reference


Concepts

Configure a data source by using a data bound control

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 in the MSDN library.




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

See alsoConcepts

Panels


The Folder List panel lists the folders and pages in your site.

Folder List panel

Find panel

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.

Folder List panel

Tip To quickly show or hide the Folder List panel, press ALT+F1.



See alsoConcepts

Panels


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.

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.

Hyperlinks panel

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.



To generate a Hyperlinks report1. 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

See alsoTasks

Locate unused filesCreate or modify a hyperlinkRecalculate hyperlinks

Reference

Hyperlinks site view

Use this To do this

Verify Hyperlinks 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.

Down arrow in a column heading

Restrict the results to those that fit the criteria you select. Right-click a column heading and select Remove Filters to deselect filter criteria.

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.



Concepts

Managing and repairing linksGenerating site reports


The Layers panel lists all layers (a layer is a set of 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

See also

Layers panel

In Design view, use Draw Layer to create a new layer by dragging in a web page.

Click Insert Layer 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.



Tasks

Add or remove a layerPosition a layerResize a layer

Concepts

Using layers


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.

Manage Styles panel

Manage Styles panel

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.



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

To move a style1. 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 tags between the 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.

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.

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.

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).



To sort styles in the Manage Styles panel In the Manage Styles panel, click Options, and then do the following:

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:

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 alsoReference

Apply Styles panelCSS Properties panel

Concepts

Using cascading style sheet toolsCascading style sheet referenceWorking with styles


The Publishing Status panel displays file transfer status when you publish a site. When you have finished

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.

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.

Publishing Status panel



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.

See alsoReference

Publishing view

Concepts

Publishing sites


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 Snapshotpanel display is updated every time you save the page it displays.

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.

Snapshot Panel

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.



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

The Snapshot panel displays a browser rendering of an HTML, PHP, ASP, or ASPX page. The Snapshotpanel 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.

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.



See alsoConcepts

Preview pages in a browserDisplaying pages in SuperPreview


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

Tag Properties panel

The Show categorized list button organizes the list of properties under categories, such as Attributes and Events.

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.

Note Events include Behaviors and other scripted actions. For more information, see Adding behaviors.



To show or hide the Tag Properties panel On the Panels menu, click Tag Properties.

See alsoTasks

Edit the properties of an HTML tag

Concepts

Using code viewsQuick Tag Editor


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 tag. If your DocType is XHTML, Expression Web creates a tag.

For more information about DocTypes, see Set document type information.

Toolbox panel

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.

Toolbox panel



To change the way items are displayed in the Toolbox panelRight-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 alsoConcepts

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.



Adjusting your workspacePanels


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

See alsoTasks

Create or modify a code snippet

Other resources

Using code snippets


Snippets 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.

Keyboard shortcuts



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.

Site shortcuts

Web page shortcuts

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.

To do this Press

Create a new site CTRL+SHIFT+N

Open an existing site CTRL+SHIFT+O

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

Refresh the Folder List panel and Web Site tab

F5

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



SuperPreview shortcuts

In Design view, show or hide Visual Aids CTRL+/

In Design view, show or hide Formatting Marks CTRL+ALT+/

To do this Press

Open a web page CTRL+O

Add a new comparison browser slot CTRL+N

Select baseline browser view 0

Select comparison browser slot 1 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 R

Toggle DOM view display O

Toggle lights-out display L

Toggle the thumbnail preview display T

Toggle guide display CTRL+;

Select vertical split layout view A

Select horizontal split layout view S

Select overlay view D

Select single browser view F

Select selection mode V

Select panning mode H

Select browser size I

Zoom to 100% CTRL+1

Zoom to fit page CTRL+0

Zoom in CTRL+PLUS SIGN or PLUS SIGN



Snapshot shortcuts

Application shortcuts

Find and replace shortcuts

Zoom out CTRL+MINUS SIGN or MINUS SIGN

Pan the browser views SPACEBAR+arrow key

To do this Press

Select Snapshot browser size I

Select Snapshot browser B

Select Always preview active document P

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

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



Code view shortcuts

Text shortcuts

Replace text or code CTRL+H

Check spelling F7

Look up a word in the thesaurus SHIFT+F7

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

To do this Press



Tables, graphics, and hyperlinks shortcuts

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+

expreesion

Documents

split view

web page content

web pages

press ctrl page

site view tab

page markup

design views

split page viewssend