How To Explore The Development Environment In Asp.Net

show more Exploring the development environment provides you with in-depth training on Developer. Taught by David Gassner as part of the ASP.NET Essential Training show less
please wait ...

Exploring the development environment

Visual Web Developer 2008 Express Edition is Microsoft's free integrated development environment to help you get started quickly building ASP.NET pages and websites. I'm going to give you a tour of the interface of this product. The menu includes most of the actions that you start with, such as creating new resources, testing your applications, and so on. Most of the most important menu choices have associated keyboard shortcuts. For example, to create a new website you could select File > New Web Site or you could press the associated keyboard shortcut Shift+Alt+N. For any particular menu choice, if you don't know the keyboard shortcut, just take a look at the menu and you'll see that there's a hint. The Edit menu includes common choices for cutting, copying, and pasting, and deleting text. You'll also find a number of options for searching for text under the Find and Replace menu choice. And under Bookmarks, you'll find that there's the ability to create a bookmark and then return the cursor to that location in a particular file or folder. The View menu includes choices to open particular panels in the interface. By default, you see the Solution Explorer, the Database Explorer, and the Properties panels displayed on the right side of the interface, but there are many other visual tools available. For example, the Error List displays a list of all of your programming problems. To open it select View > Error List, and you'll see the Error List panel appear at the bottom of the interface. To close any particular panel, just click the close icon. You can also move these panels around. For example, if I click on the properties panel on its header and then drag it out into the center, you'll see that that turns it into a floating panel. I can then click and drag to resize the panel as needed, and then when I click on particular elements of the web page in the background, I'll see the properties for that particular element. You can close a panel by clicking the close icon and then bring it up again by either using the menu choice, or as I'll do here, by pressing F4. When you bring it back up, it will open using the same dimensions that it had when you closed it. So you can easily customize the look and feel of Visual Web Developer to make it look the way you want. If at any point you want to return visual Web Developer to its default appearance--that is, place the panels back in their original locations and sizes--go to the menu and select Window > Reset Window Layout. After confirming by clicking Yes, you'll see that everything goes back to its original positions. There are three special panels over on the left known as the Toolbox, the CSS properties, and the Manage Styles panels. These three panels can be opened easily by simply hovering the cursor over the tab for that panel. Here I've moved the cursor over the Toolbox tab and the Toolbox panels slides in from the left. I can then navigate around, scroll up and down, and select items that I want to work with, and then I can either move the cursor off the panel and then click on the background web page, and you'll see that the Toolbox panel responds by sliding back into place. The same thing works with the CSS Properties panel and the Manage Styles panel. All three of these styles can also be pinned into place. When you click the Pin button that makes it no longer a sliding panel, but now a panel that's pinned into place. And then once again, you can reset the Window Layout by selecting Window > Reset Window Layout and confirming. There are various tools on the Toolbar above the editing area. For example, if I wanted to take this text and turn it into a heading 1, I'd simply select the text, then go up to the toolbar, pull down the list of available formats, and select heading 1, or the h1 tag. Visual Web Developer responds by wrapping that text in the h1 tag set, and if I then go down to the bottom of the editing area and click the Source button, I'll see the result, that the span tag that contains the text Hello World has been wrapped inside the h1 tag set. If you're an experienced HTML developer, you will find that Visual Web Developer helps you with a certain amount of HTML coding, but leaves most of the HTML coding up to you. Finally, there is the use of the Cascading Style Sheets. You can create Cascading Style Sheet rules easily using the CSS Properties panel, and then apply those rules to selected parts of your web page. I described these features in more length in the chapter of this video series about ASP.NET and Visual Design.

Exploring the development environment
Video duration: 4m 51s 6h 24m Beginner Updated Feb 13, 2013


Exploring the development environment provides you with in-depth training on Developer. Taught by David Gassner as part of the ASP.NET Essential Training

Developer Web
please wait ...