Visual design surface |
 |
Visual Web Developer provides a powerful WYSIWYG visual design surface to create your Web applications and includes all of the common formatting controls such as font selection, font sizes, font formatting, bullets and numbering, and more.
|
Toolbox |
 |
The Toolbox contains drag and drop controls and components to create your Web site. Controls are grouped into logically named categories such as Data, Validation and Login. Adding controls to Web pages is as easy as clicking and dragging the control onto the page!
|
Property Window |
 |
The Property Window enables you to view and change the properties and events of items on your Web page. Visual Web Developer will display default values where possible, or display context sensitive menu items like a Color Picker menu to select the background color of a Web page or an Open File Dialog menu when selecting an image.
|
Login controls |
 |
For the security of your Web site, ASP.NET provides you a series of login controls, such as the CreateUserWizard and Login controls. These enable you build UI to create a new user or login to a Web site. You can easily configure these controls to send a confirmation email to the new user after they register, or help users recover forgotten passwords.
|
|
The Login control lets a user enter his credentials, while the LoginView control lets you control which content becomes visible to users once they log on.
The following diagram shows the “Create User” template for the CreateUserWizard control. The control has a smart tag menu with a variety of options for customizing its default layout and settings.
|
 |
WebPart controls |
 |
Visual Web Developer offers a Web part management system that enables site visitors to create custom portals like those found at my.msn.com and Microsoft SharePoint. Using personalization, users of your Web site can drag and drop Web parts on a portal page to create a personalized page with just the content they are interested in. Visual Web Developer provides the underlying infrastructure to easily add personalization to your Web applications. The picture below shows how your end users can drag and drop custom Web Parts, like a Calendar control on their pages.
|
Navigation controls |
|
Creating logical, attractive ways to indicate where a user is on a Web site can be a challenge. In ASP.NET 2.0, you can use the TreeView, SiteMapPath and Menu controls to help users navigate your Web site and its contents. The TreeView and Menu controls allow for rich user experiences by providing client-side JavaScript functionality for uplevel browsers such as later versions of Microsoft Internet Explorer and Netscape Navigator. All of the navigation controls use a new file format known as a site map (*.sitemap) which defines the hierarchy and navigation of your Web site as shown below.
|
|
|
Using the site map file, you can then use the TreeView control to display the site navigation in a tree hierarchy using any of the built-in TreeView formats like the Windows Explorer format.
|
|
|
Alternatively, you can also use the Menu control to provide “fly-out” navigation of your site contents.
|
|
|
The SiteMapPath control acts as a “breadcrumb” control that allows users to understand what page they are on in the hierarchy and provides convenient access to navigate between pages.
|
Tag Navigator |
|
view larger >
|
Tag Navigator lets you select elements in the Design view and it will automatically select the corresponding ASP.NET and HTML tags for your selection. As you select different elements in the page, the Tag Navigator will highlight the corresponding HTML tags. You can also click on a tag to see the corresponding element in the Design view.
|
Document Outline |
 |
The Document Outline view, available from the View | Other Windows | Document Outline menu command, shows a hierarchical tree node display of your Web Form’s structure and related components.
|
|
Master pages |
|
view larger >
|
Master pages enable you to create a “master” design of the look and feel of your Web site. By using master pages, you can ensure visual consistency of your Web pages and editing the master will automatically update pages using the edited master page design. Your Web application can have several master pages, each controlling different sets of pages and you can even have nested master pages.
This diagram shows a content page open in Visual Web Developer. The gray area is inherited from MasterPage1.master file and cannot be edited. Custom Content for the page is placed in the Content control.
|
Table designer |
|
view larger >
|
Visual Web Developer also includes pre-built Table templates to make it easier to design Web page layout. To add a table, select the Layout | Insert Table menu command which displays the Insert Table dialog box. This dialog enables you select a pre-built template or create your own custom template.
|
|
|
Once the table is added to your page, you can visually resize a column or individual table cell and the designer will automatically show you the width in pixels of your selection.
|
