Cascading Style Sheets Tutorial

  System from outside to inside can be divided into: 

•   Web application layer 

  Role:. NET Framework by the Http requests the client to. NET Framework output page HTML code: ASP.NET Forms, ASP.NET user controls (UserControl), and other resources needed for pages 

•   Control Layer 

  Role: To provide a common application-layer interface control, and manage their internal controls and external output of its own HTML code: ASP.NET Web Zidingxikongjian 

•   Business Layer 

  Role: to the interface layer (Web Application and Control) provides interfaces, directly or indirectly, with the interactive database to transfer data: Data Access category or achieve OR Mapping 

  This paper discusses the Web application layer to achieve major objectives include: 

1.   Page layout templates provide support 
2.   HTML pages on the output code optimization, and the appearance of separation of data - that is, to follow based on HTML / XHTML + CSS website norms 

  Therefore, this article does not involve the operations of the method. 

  For the first 1:00, mature MasterPage page template controls to meet this demand.    At the same time, we can also do further its expansion: in a Web application in a multi-page layout template sets, through the use of configuration files to achieve selective. 
  Implementation – 

1.   Controls derived MasterPage 
2.   Rewriting TemplateFile attributes get their way, according to the configuration file specified directory name dynamically generated page document template controls access path 

  For the first 2:00, the first to point out that: ASP.NET controls model and the availability of the third-party control in the HTML / XHTML + CSS norms do bad deeds. 
  All functions fairly complete control (such as Infragistics), in order to make handsome style interface, the output the HTML code in a lot of the appearance of mixed styles.    This directly led to the formation of pages in size, the data should not be taken (on the search engine unfriendly). 
  Under normal circumstances, due to the appearance of control by the use of controls in the development of the design designation, Web design staff were unable to control their final output, and difficult to ensure that different developers to use the controls to maintain a consistent look and feel interface . 
  For these reasons, I am in the current project to renounce the use of these powerful third-party controls, and from its own staff development required to develop interface controls - to achieve these controls in the interface to the underlying data and appearance of separation . 
  For example: When the output interface needs a search results list, the existing approach is the use of DataList or DataGrid Control, in accordance with need to define records Row / Column template content and style.    This client will be in a similar HTML code (assuming that the data from the three fields containing the records of three components, and server-side controls omitted generated id attributes): 

  <table Width="…" cellpadding="…" cellspacing="…" border="…"> 
<tr>
  <td Style="background-color:#XXXXXX;"> <a href="…"> Product Name 1 </ a> </ td> <td style="background-color:#XXXXXX;"> prices 1 </ td> 
  </ Tr> 
<tr>
  <td Colspan="2" style="background-color:#XXXXXX;"> Introduction 1 </ td> 
  </ Tr> 
  </ Table> 
  <table Width="…" cellpadding="…" cellspacing="…" border="…"> 
<tr>
  <td Style="background-color:#XXXXXX;"> <a href="…"> product names 2 </ a> </ td> <td style="background-color:#XXXXXX;"> prices 2 </ td> 
  </ Tr> 
<tr>
  <td Colspan="2" style="background-color:#XXXXXX;"> Introduction 2 </ td> 
  </ Tr> 
  </ Table> 
  <table Width="…" cellpadding="…" cellspacing="…" border="…"> 
<tr>
  <td Style="background-color:#XXXXXX;"> <a href="…"> product names 3 </ a> </ td> <td style="background-color:#XXXXXX;"> prices 3 </ td> 
  </ Tr> 
<tr>
  <td Colspan="2" style="background-color:#XXXXXX;"> About 3 </ td> 
  </ Tr> 
  </ Table> 
  When we follow HTML / XHTML + CSS development of standardized self-developed interface controls, the same data, the results will become: 

<dl>
  <dt> <a Class="name" href="…"> Product Name 1 </ a> <span class="price"> prices 1 </ span> </ dt> 
  <dd> <p> Introduction 1 </ p> </ dd> 
  <dt> <a Class="name" href="…"> product names 2 </ a> <span class="price"> prices 2 </ span> </ dt> 
  <dd> <p> Introduction 2 </ p> </ dd> 
  <dt> <a Class="name" href="…"> product names 3 </ a> <span class="price"> prices 3 </ span> </ dt> 
  <dd> <p> About 3 </ p> </ dd> 
  </ Dl> 
  These data show appearance, has been used by web designers do css style sheet definitions, the above code elements as specified in the tag and class attributes are already defined.    Controls must be developed in accordance with these agreed output HTML code. 

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 

Tags: html, xhtml css, xhtml grammar, xhtml Guide, xhtml markings xhtml manuals, xml xhtml

Releated Posts

• Markers of language: HTML What are the characteristics compared XHTML
• From HTML to XHTML
• W3C's HTML Working Group Chairman Steven pemberton XHTML answer on the basis of the common problems
• You should be concerned with: the future of HTML, Part 2: XHTML 2.0
• (Transfer) will be converted to HTML XHTML open source tools HTML Tidy

This entry was posted on Saturday, January 12th, 2008 at 12:00 am and is filed under Xhtml and Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.