Designing the Screen Layout

The Form Designer for ASP.NET is a vast improvement over Visual Interdev. My friend Mark Davis said he'd rather create Web pages in Notepad than Visual Interdev. I wouldn't go that far, but I really like the Form Designer in ASP.NET. Ultimately it should be as easy to design an ASP.NET Web page as it is to design a Windows form. We are not quite there yet, though. One of the difficulties some new ASP.NET users have is controlling the position of controls on a Web page. In addition to managing the position of controls, there are several other techniques you can employ to make designing Web pages easier. Let's talk about some of them here.

Managing Control Position with Tables

With the Form Designer in ASP.NET you can use the HTML Flow Layout panel or the Grid Layout panel to help you manage the position of controls. An even easier technique is to use an HTML table, define the rows and columns, and place controls in the cells described by the rows and columns . By using this technique, the controls are constrained by the table position. The HTML table approach works well on a large variety and versions of browsers.

If you like to write HTML, you can write HTML text to describe the table. If you prefer a visual approach, you can use the Web Form Designer to describe the rows and columns. Figure 15.1 shows the header user control for the Software Conceptions Web site ( In design mode it doesn't look like much, but that implies it was easy to implement. Figure 15.2 shows the same control partially completed with the various pieces filled in and a style sheet applied. The HTML text to create the table shown in Figure 15.1 is provided in Listing 15.1, followed by a description for creating the table visually rather than by writing the HTML.

Listing 15.1 The HTML That Describes the Table Shown in Figure 15.1
 1:  <TABLE id="Table1" 2:    cellSpacing="0" cellPadding="0" 3:    width="100%" border="0" class="HeaderContent" 4:    style="BORDER-BOTTOM: black thin solid" runat="server"> 5:    <TR> 6:      <TD colSpan="3" height="10" id="LinksContent"></TD> 7:    </TR> 8:    <TR> 9:      <TD rowSpan="2" id="LogoContent" 10:       vAlign="top" align="left"></TD> 11:     <TD colSpan="2" id="MarketingContent" 12:       vAlign="top" align="right"></TD> 13:   </TR> 14:   <TR> 15:     <TD height="100%" vAlign="bottom" 16:       align="left" colSpan="2"></TD> 17:   </TR> 18: </TABLE> 
Figure 15.1. An HTML table used to control the layout of a page.


Figure 15.2. The rendered table with some nested user controls and a style sheet.


The basic tag is the <TABLE></TABLE> tag. The rows are defined first with each <TR></TR> tag pair, and individual cells are defined with the <TD></TD> tag. If you count the <TR> tags you can quickly ascertain that there are three rows. Fortunately you can manage all of this visually too.

When you add an HTML table to a user control or Web page, it will be added with three rows and columns by default. By selecting the context menu for the table you can visually insert and delete columns and rows by selecting menu items from the Insert and Delete context menus (Figure 15.3). When you have created the basic number of columns and rows, you can modify the basic layout to indicate that cells should span one or more rows or columns. This is accomplished by modifying the HTML table's rowSpan and colSpan properties. The properties, also referred to as attributes , are shown in Listing 15.1. You can modify these properties by selecting a cell and opening the Properties window. Find the alphabetically ordered property and modify its value.

Figure 15.3. An HTML table's context menu, from which you can insert and delete columns and rows.


The table in Figure 15.1 is comprised of three rows and three columns. The first row has a colSpan of 2. The second row, first cell, has a rowSpan of 2. The second row, second cell, and third row, second cell, both have a rowSpan and a colSpan of 1. The result is that there is a large area for the logo in the lower-left corner, a whole row for navigation, and two separate regions for the marketing logo and the sublinks (depicted as a black region in Figure 15.2) on the lower-right corner of the header.

By using HTML tables to constrain the basic layout, all you have to do is place the user controls or individual controls into data cells ”the table does the rest. This is significantly easier than using the Flow Layout or Grid Layout panels. If the table has the basic compartments you want, your page will look correct. The next piece of this visual puzzle is to use style sheets (or XML) to define colors, fonts, and so on to ensure uniformity and ease of maintenance.

Using Cascading Style Sheets for Consistency

When you encounter a Web page that contains dozens or hundreds of attributes applied in the HTML, you know that it is challenging to ensure that all the attributes have the values they are supposed to have. A great way to ensure this ”rather than setting the attributes in the Properties window or putting the attributes directly in the HTML ”is to use a cascading style sheet. Cascading style sheets end with a .css extension. You can add a link to them in your Web site and apply named styles to the Class and CssClass attributes of controls and pages. Doing so ensures that all elements that use the same style are rendered the same way.

You can add a style block directly to the page, or you can add the same styles to an external text file and associate the external style sheet with each Web page. If you add the style to the page, use the <style> tag. If you create an external style sheet, the style tags are identical, but the external style sheet does not use the <style> tag. I prefer the external style sheet; however, you can define an external style sheet and a local style block to override the global styles for specific aspects of your page.

Defining a Local Style Block

Local style blocks are added to the <head> section of an HTML document. Listing 15.2 shows a single class for the default.aspx page at

Listing 15.2 A Local Style Block for a .aspx Page
 1:  <HEAD> 2:    <title>Software Conceptions, Inc</title> 3:      <meta content="Microsoft Visual Studio 7.0" name="GENERATOR"> 4:      <meta content="C#" name="CODE_LANGUAGE"> 5:      <meta content="JavaScript" name="vs_defaultClientScript"> 6:      <meta content="                               ie5" name="vs_targetSchema"> 7:      <style type="text/css"> 8:        .VerticalLinks{ 9:          background-color: Black; 10:         font-family: Verdana, Helvetica, sans-serif; 11:         font-size: 13px; 12:         font-weight: bold; 13:         color: gainsboro; 14:         text-decoration: none; 15:       } 16:     </style> 17: </HEAD> 

Line 7 starts the local style block, and line 16 ends the block. The only style class in the block is the VerticalLinks class. An element that uses this style will have a black background; use Verdana, Helvetica, and sans-serif bold fonts; and be 13 pixels high. The font color will be gainsboro (a grayish-white color), and there will be no text decoration (for example, underlining).

You can experiment with various attributes to create different styles. A good way to come up with ideas is to look at sites you like and see what their creators did.

Defining an External Style Sheet File

If you define a local style block, it will override an external style sheet. I prefer to use the external style sheet for a couple of reasons. The first is that it is easier to manage the styles in -one place rather than looking at every page for that page's style. A second reason is that Intellisense will display a list of available styles in an external style sheet. You don't have to remember all the attribute names; nor do you have to remember all the possible values for those attributes. Intellisense will display the attribute names (Figure 15.4) and possible values. Finally, you can use the Document Outline window to quickly and easily manage and navigate the styles in your external style sheet (Figure 15.5).

Figure 15.4. Pick from a list of applicable style attributes using Intellisense, in an external cascading style sheet.


Figure 15.5. Use the Document Outline view to manage the external style sheet.



To invoke the Intellisense list of attributes, in the style sheet begin typing the name of an attribute or press Ctrl+Enter. As you type, Intellisense will zero in on the specific attribute.

Using Document Outlines

Document outlines are available for a variety of views. By selecting ViewOther WindowsDocument Outline you can open the Document Outline view for a style sheet (Figure 15.5) when an external style sheet is selected. If you have an HTML view of a Web page selected, the document outline will be an outlined version of the HTML in that page. As with the style sheet, you can use the document outline to navigate and manage whatever view the outline is associated with.

Let's get back to style sheets. In an external style sheet, the document outline contains Elements, Classes, Element IDs, and @ Blocks folders. The Elements folder refers to HTML elements, like body, head, line breaks ( <br> tags), and divisions ( <div> tags). The Classes folder refers to user-defined style classes. The Element IDs folder contains styles for specifically identified elements. The @ Blocks folder contains styles for @ directives. For example, you can declare an @ Page block and set the page margins, orientation, and dimensions.

Enter the styles as text directly into the style sheet document itself, or use the context menu in the style outline to build styles visually. I will show you examples of both of these methods next.

Writing a Style Block in an External Style Sheet

Styles are comprised of a selector and a declaration. For example, if we wanted to define a body element style indicating the margins for the body of our document, we could manually enter a style rule for the body element. The selector would be body and the four declarations would be margin-top , margin-bottom , margin-left , and margin-right . Listing 15.3 shows the body element style for the default.aspx page of the Software Conceptions site. Figure 15.6 shows the header on that page before the style was applied, and Figure 15.7 shows the header after the style was applied.

Listing 15.3 The Body Element Style for the softconcepts.css External Style Sheet
 body {   margin-top: 0;   margin-bottom: 0;   margin-left: 0;   margin-right: 0; } 
Figure 15.6. The header as it would appear on the page with the default settings for body margins.


Figure 15.7. The header as it would appear with body margins set to 0.


The body element in Listing15.3 sets all the margins to 0. Thus the content will occupy all the space on the visible page with no discernible margin.

The .css file is a text file. You can modify the elements, classes, identified elements, and @ blocks by simply typing them in the correct format. The basic format is to type the selector and the opening and closing brackets ( {} ); then within those brackets add the declarations in the following syntax: declarationname : value ; (filling in the appropriate declaration name and value as desired). For example, Listing 15.4 defines an element identified as #Red . I dubbed it so because it applies the Red color.

Listing 15.4 Defining an Identified Element
 #Red {   color: Red; } 

The id element can be applied by specifying an element's identifier. For example, <hr id="Red"> would result in this specific horizontal rule being rendered as a red line.

Visually Building External Style Sheet Styles

As with many aspects of modern software development, you can build styles visually too. By clicking on the .css document in the editor or the style outline, you can select Build Style or Add Style Rule. Add Style Rule opens the Add Style Rule dialog, allowing you to define a new Element, Element ID, or Class style. The Style Builder dialog facilitates actually defining the style declarations.

The Style Builder dialog (Figure 15.8) is the same dialog opened when you click the elliptical button next to the style property of a control. In the former instance the style is added as text to the external style sheet. In the latter instance the style is added to the style property of the control.

Figure 15.8. The Style Builder dialog.


In summation, there are about four ways you can describe the visual appearance of elements and controls. In no particular order, these are: (1) build the style for a control's property, (2) add the style in the HTML editor for the control, (3) write a local style block for the page, and (4) define an external style sheet. The results are approximately the same except that style cascading rule precedence applies.

Understanding the Cascading Application of Styles

External style sheets represent general or global styles. In the absence of any other style, the general styles in the style sheet apply. The next level are the styles defined in a local style block. The local style block styles override the general styles if both the external, general style and the local style define the same element or class styles. For instance, if I define a .VerticalLinks class in the external style sheet and one in a local style block, the local style block wins. Taking precedence over the local style block is the inline style. The easiest way to define an inline style is to use the Style Builder dialog invoked by clicking the ellipse for a particular control's style property.

This order of precedence (inline over local over general) of the application of style rules is what cascading in cascading style sheet refers to. Besides experimenting with various style declarations, you also need to know how to associate an external style sheet with a page.

Linking an External Style Sheet to a Page

External cascading style sheets are associated with a page by using the <LINK> tag in the header block of the page. The <LINK> tag for the default.aspx page of the Software Conceptions site follows .

 <LINK href="softconcepts.css" type="text/css" rel="stylesheet"> 

The rel attribute describes the relationship to the linked document. The type attribute indicates the kind of document we are linking to (a text, cascading style sheet in the example), and the href attribute refers to the URL of the linked document.

You can type these values in the HTML editor directly, or if you are like me and often tend to forget cryptic attributes like rel , you can use the Document Styles window. To open the Document Styles dialog and associate an external style sheet visually, open the page in Design view and select FormatDocument Styles from the menu. This will open the Document Styles window, allowing you to associate the external style sheet by clicking the Add Style Link button (Figure 15.9).

Figure 15.9. Add a link to external cascading style sheets by using the Document Styles window.


Applying Styles to a Control

Once you've defined the styles, the element styles are associated automatically. However, class styles need to be associated with a specific control's Class or CssClass property. These properties are string properties. You only need to associate the style sheet with the page (see the preceding subsection) and type the name of the style class in the Class or CssClass property, whichever the control has. (With HTML controls the property is named Class ; Web controls use a property named CssClass .)


From the context menu select View In Browser to see the effects of your style sheet changes.

After you have associated the class name with a control, the effect will show up when you run the application and display the page. By default, styles defined in external style sheets are not rendered at design time. That's why you will see very generic-looking Web pages at design time (see Figure 15.1 or the IBuySpy portal's design-time Web pages).

Modifying Attributes Programmatically

You can programmatically set the values of attributes as key and value pairs. You can usually refer to a server control's property directly. However, if you are using a dynamically created HTML control, such as controls in a DataList , you may not know the specific control name or have a reference to it. Even in this latter instance you can modify control attributes with code.

To demonstrate how control attributes are set programmatically I have provided two statements that perform identical operations on a control that runs on the server. The first uses the HtmlTable. BgColor property (Listing 15.5), and the second sets the property through the Attributes collection (Listing 15.6).

Listing 15.5 Setting a Property of a Control Running on the Server
 If ( ColorInfo Is Nothing = False ) Then   Table1.BgColor = ColorInfo.HeaderBackColor End If 
Listing 15.6 Setting the Same Attribute by Using the Attributes Collection
 If ( ColorInfo Is Nothing = False )   Table1.Attributes.Add("bgcolor", ColorInfo.HeaderBackColor) End If 

The table in Listing 15.5 is a System.Web.UI.htmlControls HTML table; however, because I set the runat attribute to server I can refer to the control in the code-behind file. Listing 15.6 demonstrates how to set the attribute again by referring to the control but using the Attributes collection. The result is the same.

When you have a reference to the control, referring to the control properties directly is easiest. However, if you discover that an attribute is not exposed as a property, you can add the attribute by using the Attributes collection as demonstrated.

Visual Basic. NET Power Coding
Visual Basic(R) .NET Power Coding
ISBN: 0672324075
EAN: 2147483647
Year: 2005
Pages: 215
Authors: Paul Kimmel © 2008-2017.
If you may any questions please contact us: