Interface Design Standards for ASP. NET Programming specifications

Source: Internet
Author: User

What are the interface design standards for ASP. NET Programming specifications? First

Interface Design Standard for ASP. NET Programming specifications 1. Development Environment Settings:

The screen is set to 800*600/1024*768.

Interface Design Standards for ASP. NET Programming Specifications 2. Interface Design Principles:

Consistent Style

Interface Design Standards for ASP. NET Programming specifications 3. B/S structure development principles:

Use frameworks/templates

Interface Design Standard for ASP. NET Programming specifications 4. Use Table on the page) to set the format.

Settings of the outermost table: width = 778px align = center border = 0

Interface Design Standard for ASP. NET Programming specifications 5. Homepage Body settings:

Bgcolor = "# cccccc"

Interface Design Standard for ASP. NET Programming Specifications 6. Frame Sub-page Body settings:

BottomMargin = "0" leftMargin = "0"

Interface Design Standards for ASP. NET Programming Specifications 7. Alignment:

The text (Label) is right aligned; the numbers (data) are right aligned; the text data is left aligned. If the text is short, the text can be center aligned; the amount must be added with a thousand characters

Interface Design Standard for ASP. NET Programming Specifications 8. The colon must be typed in Chinese Input

Interface Design Standard for ASP. NET Programming Specifications 9. Control usage principles:

Use Html controls as much as possible. You do not need to submit them on the client. You can use Web controls without using Javasrcipt.

Interface Design Standard for ASP. NET Programming Specifications 10.

Controls:

(1) control appearance settings: style.css

I. I link class:

 
 
  1. a:link {font-size: 12px;line-height: 20px;text-decoration: none; color: #666666}  
  2.  
  3. a:visited {font-size: 12px;line-height: 20px;color: #666666;text-decoration:  
  4.  
  5. none;}  
  6.  
  7. a:hover {font-size: 12px;line-height: 20px;color: #FF6600;text-decoration:  
  8.  
  9. underline;}  
  10.  
  11. a:active {font-size: 12px;line-height: 20px;color: #666666;text-decoration:  
  12.  
  13. underline;} 

I. ii table Type:

Td {font-size: 12px; line-height: 20px; text-decoration: none ;}

I. iii text box class:

 
 
  1. .inputPM{BORDER-RIGHT: #99ccff 1px solid; BORDER-TOP: #99ccff 1px solid;  
  2.  
  3. BORDER-LEFT: #99ccff 1px solid; BORDER-BOTTOM: #99ccff 1px solid;  
  4.  
  5. HEIGHT: 22px} 

I. iv datagrid class:

 
 
  1. . Dg_grid/* Grid-overall */ 
  2.  
  3. {Font-size: 12px; border-style: solid; border-width: 2px; border-color: White;
  4.  
  5. Text-align: center; vertical-align: middle ;}
  6.  
  7. . Dg_header/* Grid-header */ 
  8.  
  9. {Font-weight: bold; color: # E7E7FF; background-color: # 3366CC; text-align: center;
  10.  
  11. Vertical-align: middle; height: 25px ;}
  12.  
  13. . Dg_alter/* Grid-alternating rows */ 
  14.  
  15. {Background-color: AliceBlue; height: 22px ;}
  16.  
  17. . Dg_item/* Grid-normal line */ 
  18.  
  19. {Color: Black; background-color: WhiteSmoke; height: 22px ;}
  20.  
  21. . Dg_page/* Grid-page navigation */ 
  22.  
  23. {Color: Black; text-align: right; vertical-align: middle; height: 22px ;}
  24.  
  25. . Dg_select {font-weight: bold; color: White; background-color: # 9471DE ;}/* Grid-select a row */ 

(2) Some supplements:

Ii. I control data display of datagrid: Text short) center alignment; text long) left alignment; date left alignment; number left alignment; amount left alignment, kilobytes

Ii. ii control text length MaxLength is set according to data structure requirements

Ii. iii because operations are mainly related to databases, the control type can correspond to the field type of the data table. The conventions here are as follows:

◆ When the field type is text or number, the control uses the text box

◆ When the field type is Boolean, the control uses the single choice button checkbox control) or the drop-down box

◆ Field content is selected in a fixed number of values regardless of its type), the control uses the drop-down box

◆ When the field type is date and time, the control can select a date using the text box + button, the button. Value = "...")

◆ Fields are foreign keys of other tables:

A) for basic information, use the drop-down box.

B) if it is not basic information, the control uses the text box + button to jump out of the query window. Click the ". Value ="… "button "..."

◆ The data operation window is generally a DataGrid + input box

A) The DataGrid is used to display data.

B) The input box is used to input/display data.

C) The basic style of the browser window, which displays records in tables. The single table control uses DataGrid, DataList, and Repeater, And the NestedDataGrid for multiple tables.

The Interface Design Standards of ASP. NET Programming specifications are introduced here. I hope you will have some knowledge about the interface design standards of ASP. NET Programming specifications.

  1. ASP. NET Programming Model HTTP Working Principle
  2. HTTP protocol analysis of ASP. NET Programming Model
  3. Analysis on ASP. NET page structure of ASP. NET Programming Model
  4. ASP. NET Programming Model-ASP. NET page lifecycle Diagram
  5. Step 11 of ASP. NET Programming Model Page Lifecycle

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.