Home
Username:
Password:
Introduction to Microsoft Visual Studio 2008 Tutorials

Web Development in Visual Studio / Editing HTML




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

In this video I want to talk about editing HTML. They've done some really, really cool things, one especially cool thing in Visual Studio 2008 when it comes to editing HTML, and I want to show you these things. Now, the first thing I want to show you is you will have a tendency if you're new to this Interface to get lost in here because notice that when I'm looking at my default aspx page, when it comes up I'm looking at the Design View. This is roughly kind of a what-you-see-is-what-you-get. This is what the web page will look like in the browser, OK? Now, I can go to the source and this will show me the HTML code in the background. Now depending on how strong you are on HTML you may want to do a fair amount of editing back here, OK? Or you may just simply want to come up here and start doing some things, OK, because notice I can hit Return and come down here and start adding some text. Right? And if I go back to the source you will see there's my Welcome To Our Site stuff. But what I want you to see here is notice this little split window. If I click Split it shows me my kind of what-you-see-is-what-you-get view down here, and then my Source Code here. Now, there is something that's really cool about this that's new in Visual Studio 2008, and that is I can change things right here. Notice if I come to the Button and I say: BackColor equal red and close that, when I click off the line you'll notice it is saying, hey wait a minute, dude, your Design View is out of sync. So, if I just click that I now see exactly what it looks like. I don't have to go Preview it on the web and all that kind of stuff, or what we used to have to do is come over here and right-click and say View in Browser, and so we could click here and it's going to save the changes and we'd have to wait for the browser to fire up and see what it was going to look like. Well, we don't have to do that anymore. We can see it down here. Now there's something else that's really cool. This thing will help me navigate, OK? If I go to the Source and I say, you know what, this Label right here, I'm not sure about it. Just by clicking on Label notice it highlighted and if I move back to Design View it has me on that Label and it's highlighted. If I click this button and go back to the Source View notice it has it highlighted here for me, and I can obviously do this in the Split Window. Notice that if I click on the body, notice it's got it here, and if I click down here you know this is a little bread crumb type thing, if you will, that when I click on HTML it highlights everything. If I click on the Form tag, there it is. If I click on the Button notice it's just highlighting these individual things. So they've made it very, very easy for you to move around in here and start to get some creativity going without having to constantly go back out and preview this thing in a browser. OK, let's grab the button here and resize it and you'll notice as soon as I did that it changed the width here, and so I can now come right here and say, you know what, let's change it here and synchronize it, and it made the change. Now that is incredible. If you've ever done web development you know how frustrating it was to go from one to the other, one to the other, and refresh it and go take a look at it and all that kind of stuff. Alright? So, you can also, notice if I get in this Interface I can use my arrow keys and mov up and down and if you'll notice down here at the bottom it's showing me where I'm at, and if I get inside here and move up and down in my HTML code, if you'll notice in this bottom window it is showing me exactly what I've highlighted. There's my Form, there's my Button and it highlighted, and so I arrow up. There's that text, you know, there's my label. So anyway, a lot of cool things to help you maintain your sense of direction here, know where you're at on your web page as you're editing it, and I will also point out, if you like to develop in other locations you can go out, create your website, create it as HTML or even aspx, come up here to the Project, say Add Existing Item, Browse out there, find that page, add it, it'll bring it into the Project, and then you can convert it to aspx just by right-clicking and making it aspx. So anyway, there's all kinds of cool things you can do here. Since it's not an ASP.NET course I just wanted you to see this cool new functionality in Visual Studio 2008 that's really going to make web development go a lot faster and easier.

Tutorial Information

Course: Introduction to Microsoft Visual Studio 2008
Author: Mark Long
SKU: 34008
ISBN: 1-935320-54-8
Release Date: 2009-06-26
Duration: 7 hrs / 72 lessons
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available