Visual Guide to Visual Web Developer

This topic provides a brief overview of many of the features and tools that are included in Visual Web Developer. Visual Web Developer is the set of features that are used to create Web projects in Visual Studio 2010 or Visual Web Developer 2010 Express.

This topic contains the following sections:

• Starting Visual Web Developer

• Adding Projects and Items

• Using the Integrated Development Environment

• Editors, Designers, and Tools

• CSS Properties and Styles

• Build and Debug Options

• Deployment Options

• Product Documentation

Starting Visual Web Developer

When you start Visual Studio, by default, the first page that opens is the Start page. The Start page provides an easy way to access or create projects, learn about upcoming product releases and professional events, and read the latest development news. To display the Start page, in the View menu, click Start Page.

The Start page also provides guidance and resources to help create your project. This includes tasks such as planning and tracking your application, designing code, developing and testing code, and administering your applications.

The following illustration shows the Visual Studio Start page.

The Visual Studio Start Page

Adding Projects and Items

Solutions and their projects contain items that represent the pages, code files, folders, references, and data connections that are part of your application. A solution is a container that can contain multiple projects. A project typically contains multiple files, folders, and other resources. For more information, see Solutions as Containers and Projects as Containers.

Web Projects

When you use Visual Web Developer, you typically create either ASP.NET Web application projects or ASP.NET Web site projects. Both project types let you create a Web application.

The main factors to consider when you select between a Web application project and a Web site project is how you intend to deploy your project and how you want to maintain it after it is deployed. It is important to select the appropriate project type before you create a project. For more information, see Web Application Projects versus Web Site Projects.

The New Web Site dialog box enables you to create a new Web site on your local computer or on a remote computer, or to connect to a Web site location using FTP to read and write files. The following illustration shows the New Web Site dialog box.

New Web Site dialog box

The New Project dialog box enables you to create a new Web application. For more information, see How to: Create Solutions and Projects. The following illustration shows the New Project dialog box.

New Project dialog box

For more information about Web projects, see Types of Web Site Projects in Visual Studio.

Web Project Items

After you have created a Web project, you use the Add New Item dialog box to add pages and other items to the project. When you select an item from a list of installed templates, the item is added to your project. Items are displayed in the list based on the selected programming language, the project type, and the target version of the .NET Framework. The following illustration shows the Add New Item dialog box.

Add New Item dialog box

Using the Integrated Development Environment

The Visual Studio product family shares a single integrated development environment (IDE) that is composed of elements such as toolbars, tool windows that can be docked or auto-hidden, and editor windows. When you develop Web applications, you use tools, menus, and toolbars that are specific to Web projects.

The following illustration shows you the windows and tools that are available in Visual Web Developer.

The Visual Web Developer environment

Many of the tool windows that you use in Visual Web Developer can be docked. You can configure them to be permanently visible (pinned) or to scroll out of sight when they are not in use (autohide).

Customizing Menus and Toolbars

The menus and toolbars in Visual Web Developer are customizable. To customize menus commands and toolbars, click Customize in the Tools menu. The Customize dialog box is displayed. The following illustration shows the Customize dialog box.

Customize dialog box

The Customize dialog box lets you select toolbars to display, create custom toolbars and menus, add and remove items from toolbars and menus, and change the appearance of toolbar and menu items.

Solution Explorer

The Solution Explorer window displays solutions, projects, and the items in those projects. Solution Explorer provides you with an organized view of your projects and their files as well as access to the commands that pertain to them.

From Solution Explorer, you can open files for editing, add new files to a project, and set solution, project, and item properties. A toolbar that is associated with this window offers typical commands that are used to manage the item that you select in the window. To access Solution Explorer, click Solution Explorer in the View menu. The following illustration shows the Solution Explorer window.

Solution Explorer window

For more information, see Using Solution Explorer and How to: Create Solutions and Projects.

Properties Window

Use the Properties window to view and set the properties and events of objects that you are working with in the editor and page designer. You can also use the Properties window to edit and view file, project, and solution properties. To display the Properties window, click Properties Window in the View menu.

The Properties window lets you work with property values in different ways, depending on the selected property. For some properties, you enter a value in a text box. For other properties, you use a drop-down list or you click a button to display a custom editor dialog box. Properties that are displayed in gray are read-only. The following illustration shows the Properties window.

Properties window

Server Explorer

You can use the Server Explorer window to open data connections and to log in to servers and explore server-based databases and services.

When you work with designer windows in Visual Studio, you can typically drag items from Server Explorer and drop them onto the design surface. This creates new components that are configured to reference the item that you have selected.

For more information, see Accessing Server Resources with Server Explorer. The following illustration shows the Server Explorer window.

Server Explorer window

Editors, Designers, and Tools

You create pages and write code using an editor and using designer windows. The functionality of the editor and of designers that you use depends on the type of file or document that you are working with.

Web page editors and designers have two views: a graphical design view, and a source-code view. When you are working with a Web page, Design view lets you see controls and other items in a WYSIWYG-like way. The following illustration shows the Visual Web Developer in Design view.

Web page designer, Design view

Source view displays the source code for the file. This view supports coding help such as IntelliSense, collapsible code sections, refactoring, and code snippets. Source view also supports editing features like word wrap, bookmarks, and line numbers. For more information, see Editor Convenience Commands and Features. The following illustration shows Visual Web Developer in Source view.

Web page designer, Source view

Some editors also provide a view that lets you see the design view and source view at the same time. This view is called Split view. The following illustration shows Visual Web Developer in Split view.

Web page designer, Split view

Editing Web Pages in the Designer

An ASP.NET Web page consists of visual elements and programming logic. Visual elements for the page include markup, server controls, and static text. Programming logic for the page includes event handlers and other code. When you work with ASP.NET Web pages, you can work with the markup in the designer and with the code in a code editor.

The Toolbox displays controls that you can add to Visual Web Developer projects. To display the Toolbox, click Toolbox in the View menu.

The following illustration shows the Toolbox.

Toolbox

CSS Properties and Styles

The CSS Properties window is used when you are editing an ASP.NET Web page. The window shows you the styles that are used by the current selection in a Web page. It also shows you the order of precedence for the styles. In addition, the window gives you a comprehensive list of all CSS properties. This enables you to add properties to an existing style, modify properties that you have already set, and create new inline styles. For more information, see How to: Use the CSS Properties Window. The following illustration shows the CSS Properties window.

CSS Properties window

In addition to the CSS Properties window, you manage CSS styles using the Manage Styles window and apply CSS styles using the Apply Styles window. For more information, see How to: Use the Apply Styles and Manage Styles Windows.

Build and Debug Options

Before a Web application can be displayed, it must be compiled, or built. Visual Web Developer provides a robust set of build (compilation) and debugging options. By using build configurations, you can select the components to build, exclude those that you do not want to include in a finished application, and specify details about how a project will be built. You can create build configurations for solutions and projects. For more information, see How to: Create and Edit Configurations and Builds During Application Development.

When you build, you are beginning the debug process. Building your application helps you detect compile-time errors. These errors can include incorrect syntax, misspelled keywords, and type mismatches. The Output window displays these types of errors. The following illustration shows the Output window.

Output window showing build information

After you have built your application, you can use the debugger to detect and correct run-time problems, such as logic errors. You can stop (break) a code as it is running. In break mode, you can examine local variables and other data by using tools such as the Variable window, the QuickWatch dialog box, and the Memory windows. For more information, see Variable Windows and Memory Windows. The following illustrations shows debugging tools windows.

Debugging windows

The Error List window displays errors, warnings, and other messages that are related to debugging. For more information, see Debugger Roadmap.

Deployment Options

Visual Studio, ASP.NET, and IIS provide tools that help you deploy your Web application or Web site. Some of the Visual Studio tools work only with Web application projects, and others work only with Web site projects.

For information about the difference between Web application projects and Web site projects, see Web Application Projects versus Web Site Projects.

Web Application Project Deployment

The following are typical Web deployment scenarios for Web application projects:

• Deploying a Web application to a remote server from Visual Studio.

• Deploying a Web application by using Visual Studio to create a package (.zip file) that contains information that is required for deployment, and that you can install on a destination Web server.

• Deploying a Web application in a batch process by using special tools, such as MSBuild.

For more information about these deployment scenarios and other deployment options for Web application projects, see ASP.NET Deployment Content Map.

Web Site Project Deployment

The following are typical Web deployment scenarios for Web site projects:

• Deploying a Web site by using the Copy Web Site tool, which can copy and synchronize files between your computer a destination computer or location.

• Deploying a Web site by using the Windows XCopy command.

• Deploying a prebuilt (precompiled) Web site.

For more information about these deployment scenarios and other deployment options of Web site projects, see ASP.NET Deployment Content Map.

Product Documentation

You can access Help by pressing F1 in the IDE and by clicking View Help in the Help menu. The documentation appears in your Web browser. You can use locally installed Help or read documentation on the MSDN Web site. The following illustration shows context-sensitive help in the browser window.

Help displayed in browser window

See Also

Tasks

How to: Arrange and Dock Windows

Concepts

What's New in ASP.NET 4 and Visual Web Developer

How Do I in Visual Web Developer

Help Library Manager (Microsoft Help System 1.1)