Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Page Layout

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft] [] [Joe Stagner] Hi folks—Joe Stagner from Microsoft here again with Video #4 in this video series on building web pages using Microsoft Visual Web Developer. In this video, we're going to take a look at the layout options that are available for laying out your pages using Visual Web Developer. There are 2 general mechanisms that you can use for a layout. One is to use HTML tables and the other is to use cascading style sheets or CSS. Visual Web Developer is well tooled for working with either tables or CSS in your web pages. So let's go ahead and have a look. First, let's look at a page that uses a table to accomplish some layout. You can see here we have a table tag that's stretched to 100% page width. Inside the table we have 3 rows, and inside each row we have 3 TDs, which will accomplish 3 columns. Let's look at design mode—here you can see our basic layout. We have a left column, a center column, and a right column. And then we have a top row, a bottom row, and then a central row. So, that's the basic layout mechanism. If we wanted to insert a table that was laid out just like this, I could choose the table menu item, insert table, select a number of rows and the number of columns that I wanted as well as setting any other attributes for the table that I was interested in setting. When I was done—click OK. I have my table inserted. Notice I have 1, 2, 3 columns and 3 rows—right. So we have the same basic layout. Now I can manipulate this table if I want to. For example, let's suppose I don't want 3 cells in the left column. I can select the cells that I want to merge. Right-click, choose Modify, and Merge Cells. Now I just have 1 cell there in the left column. So, working with tables is very easy. Of course—we have the same ability to manipulate the tables in design mode or source mode or split view. Another interesting point here is that as we select each HTML element—table row, table TD, or cell for example— notice that the properties window changes to reflect the specific HTML element that we've selected. So, I can do things like change the—you know—alignment or the background color of a particular cell or a collection of cells—whichever I choose. As I mentioned—the other option is to work with cascading style sheets. And, in fact, what I see in a lot of web pages that I evaluate are a combination of using CSS and tables to accomplish the exact layout that the designer or the developer is interested in for their page. So let's look—let's take a look at a layout that uses CSS. All right—so this just a simple, multi-column CSS layout. You can see a left column, a right sidebar, header and footer sections as well as a main content area. If you look over the left of the IDE, where the tool box is, if we go down to the bottom you can see this tab that says CSS properties, and as I switch there are some interesting things to note here. The first is, of course, that these are the CSS properties for the cascading style sheet elements that I'm using in my page. And these are all applied from the included style sheet file, which in our case is StyleSheet.CSS—that's this particular file here that I've included. Now, I'm referencing the styles that are defined in StyleSheet.CSS by simply having included a link here. Now, by the way, you don't have to hand type that; if you want to include a style sheet in your—in your ASPX page, just click and hold the style sheet you want to include in the Solutions Explorer, drag it into the Header section of your ASPX page, and you're good to go. Note also that I can click on this third tab—Manage Styles—and I have a list of the styles that are used in this page from the StyleSheet.CSS file. If I choose one and double-click on it, notice it pops me right into the .CSS file at the definition for that particular CSS element. So, it's really easy to get around and navigate inside the CSS files. Notice here that, now that I'm looking at the style sheet itself, I have a CSS outline. I can expand the elements here. And I can use this to navigate through my CSS file as well. All right—so each one that I select automatically pops me to that specific definition in my CSS classes. So working with style sheets in Visual Web Developer is greatly enhanced as well. Now, when we're building our ASPX pages, we have 2 different ways of working with layout as it pertains to the controls that we set up on our page. So let's go ahead and create a new page— just this basic web form page. Let's go to Design Mode, choose our tool box, and let's put a control in the page. Now, notice I drop a button on there—now I can move it down on the page. See, because this is a basic flow layout—notice I can't put it over here. If I want to move that button towards the center of the page I have 2 choices—I can either insert white space or other controls, or I could choose the alignment property, but that doesn't apply just to a specific control. It applies to the area of the page that that control is contained in—right. So you can see this automatically generated a CSS style for me with a text alignment of center. And then if we scroll down here, we'll see that the paragraph section where that control is contained has now been applied with the Style 1 CSS class that was automatically created for us. So that's a flow layout. Now there's an option in Visual Web Developer to allow us to use absolute positioning as opposed to relative positioning which is the default that we've been looking at. Right? So let's create another page. Now, I'm going to do a couple things here—I'm going to choose Tools, Options, and then I'm going to, in CSS Styling, I'm going to set this check box, change positioning to absolute for controls added using tool box, paste, or drag and drop. And I'm going to do that. Now, notice this setting. Format, Set Position, Absolute and Relative. As soon as I drop a control on the tag—a control on the page— now I can go in and set position to absolute. Now, once I've done that, I now have the capability not to rely on flow-based layout, but to use absolute positioning. So, I can grab this control—now—a note here—don't actually grab the control itself. Grab the white indicator above the control that has the tag name, and now I can drag and drop that and leave it wherever I want—all right? So if I add another control—same thing. So this is using absolute positioning. Now, if we look in source code, what we'll see is that Visual Web Developer is creating style sheet classes for us, applying them to the controls that we're putting on the page, and using the positioning attributes that are available to CSS classes in order to position those controls. And again, it's not an absolute decision. You can use a combination of relative and absolute positioning in your page. So, you might have containers like <div> that are relatively positioned using flow layout, but then inside those <div> or inside those containers, use absolute positioning for specific controls that you're working with. So, you have the utmost of flexibility both from a positioning perspective using the controls on your page as well as working with either tables or CSS in your ASPX pages that you're developing using Microsoft Visual Web Developer. [Microsoft] []

Video Details

Duration: 8 minutes and 57 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 7
Posted by: neudesicasp on Sep 5, 2013

Tables or StyleSheets? Relative Positioning or Absolute? This video will demonstrate the features of Visual Web developer that support the developing with your page layout preference.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.