Use CSS friendly control adapters to convert the ASP. Net Control to conform to Web standard label control.

From: http://www.asp.net/cssadapters/WalkThru/WalkThrough.aspx

Use CSS friendly control adapters to convert the ASP. Net Control to HTML page CSS style sheet that complies with web standards.
For example, menus, Treeview, and other controls all output <Table> labels. The <ul> label should be selected based on the "semantic" tab in the Web standard.
The use of CSS friendly control adapters converts it to use nested <ul> label rendering, which is called pure CSS menu (http://www.meyerweb.com/eric/css/edge/menus/demo.html ).
For legacy browsers that previously did not support CSS, you can set different versions of browsers in the configuration file to use different control adapters.
To solve this problem! In this way, pocketpc can also be supported by providing different control adapters!

= Download and install =

Visit the site: http://www.asp.net/cssadapters/, click the "Download source" button to download aspnetcssfriendlyadapters. VSI.
Or directly download: http://download.microsoft.com/download/ B /a/3/ba3aee5e-2e28-4056-9e71-036b2e7f58af/ASPNETCssFriendlyAdapters.vsi

This file is a visual Studio content installer installation package. You need visual web developer or Visual Studio 2005 to run the unpackage. After installation, several new web site templates will be added to your Visual Studio.

= Use =
Go to Visual Studio, select File-> new web site menu item, and select the newly added "ASP. net css friendly web site" template to start your own CSS style sheet site design, or
Select the "tutorial on ASP. net css friendly control adapters" template to create a tutorial site and learn about CSS friendly sample adapters.

After creating a new site, you can view the readme.txt file to learn about the precautions.

= Run =

All the examples of adapted controls are placed under the exmaples menu at the top of the page. The first one is the converted <asp: menu> Menu Control example: the nested <ul> label replaces the nonstandard <Table> label.

Click to enter the menu control Example page, you can see more clearly what is the difference before and after conversion:

In each example, you can set whether to switch between conversion connectors (adapters:

In addition, you can use theme chooser to switch between two different theme (basic, enhanced) styles. The style file is in app_themes:

To view the source of each example onlineProgramYou can click "view source code:

= File organization =

* Put the page file under the root directory of the site.
* Dedicated Code Put it in the app_code \ sitespecific folder. It is only useful for this tutorial site and has no practical significance.
* CSS friendly control adapters Source code Put it under app_code \ adapters.
* App_themes: stores two different theme styles.
* Bin directory is a tool for displaying high brightness Syntax: Wilco Bauer's handy utility (http://www.wilcob.com/Wilco/Toolbox/SyntaxHighlighter.aspx)
* App_data stores XML data used in some examples.
* The CSS directory stores theme-independent styles used by control adapters. These styles contain the behavior specifications of the inserted control, rather than the interface performance. For example, for a pure CSS menu, the UI specification with color and font is also required, for example, how to display menu items (when the mouse moves the menu), how to hide menu items (when the mouse leaves the menu), these general CSS specifications are placed in this folder. Its subfolders browser-specific contain CSS specifications for specific browsers.
* In the app_browsers directory, set the browser that uses CSS friendly control adapters. You can set it to always use these adapters regardless of the browser type version; you can also set it to be used only for specific browsers and versions.
* JavaScript directory, some control adapters use some JS Code implementation, these JS Code is stored here. If you want to change the path name, you need. add/change the value of cssfriendly-JavaScript-path in the deleteconfig file: <add key = "cssfriendly-JavaScript-path" value = "~ /JavaScript "/>
* The Membership Directory shows how to plug in the ASP. NET 2.0 membership control.

Each converted CSS control has its own style sheet, for example, <asp: gridview> control has a style sheet named gridviewsample.css. The tutorial site contains two theme styles:
Basic and enhanced. Therefore, gridviewsample.css files exist in both the basic folder and enhanced folder.

In this tutorial, the website is configured in the app_browsers directory. the Browse File is cssfriendlyadapters. browser, which is configured to use CSS friendly control adapters by default. Of course, you can change the refID to ie6to9, Gecko, opera8to9, and so on.

I ran the example and learned about the organization and significance of the file. Now it is time to create your own website. How does one modify CSS to change the control's appearance?
Let's start with menu. First, let's modify the color when the mouse moves to the menu. In vs, open the app_themes \ basic \ menuexample.css. file:

CSS

. Prettymenu ul. ASPnet-menu Li: hover,
. Prettymenu ul. ASPnet-menu Li. ASPnet-menu-Hover
{
Background: #4682b3;
}

Change the color to another value, for example, # 27408b. Save and refresh the menu control Example page:

What else needs to be changed is. skin file. When the browser does not use a conversion component, the control will use this file by default to open app_themes \ basic. in the skin file, modify the color value in the dynamichoverstyle menu:

=== Empty page with CSS conversion component ===

<% @ Page Language = "C # Or VB" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.1 // en" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Link runat = "server" rel = "stylesheet" href = "~ /CSS/import.css "type =" text/CSS "id =" adaptersinvariantimportcss "/>
<! -- [If lt IE 7]>
<Link runat = "server" rel = "stylesheet" href = "~ /CSS/browserspecific/iemenu6.css "type =" text/CSS "id =" iemenu6css "/>
<! [Endif] -->
</Head>
<Body>
<Form ID = "form1" runat = "server">
<! -- Adapted control (s) Here -->
</Form>
</Body>
</Html>

Import.css is theme-independent CSS, indicating the behavioral rule of the CSS conversion component.
Iemenu6.css is a conditional connection option that is required when you use an earlier version of IE.

=== Create a pure CSS menu page ===

ASP. NET

<SCRIPT runat = "server">
Public sub onclick (byval sender as object, byval e as menueventargs)
Messagelabel. Text = "you selected" & E. Item. Text &"."
E. Item. Selected = true
End sub
</SCRIPT>

<Asp: menu id = "entertainmentmenu" runat = "server" orientation = "horizontal" onmenuitemclick = "onclick" cssselectorclass = "simpleentertainmentmenu">
<Items>
<Asp: menuitem text = "Music">
<Asp: menuitem text = "classical"/>
<Asp: menuitem text = "rock">
<Asp: menuitem text = "Electric"/>
<Asp: menuitem text = "acoustical"/>
</ASP: menuitem>
<Asp: menuitem text = "Jazz"/>
</ASP: menuitem>
<Asp: menuitem text = "Movies" selectable = "false">
<Asp: menuitem text = "action"/>
<Asp: menuitem text = "drama"/>
<Asp: menuitem text = "musical"/>
</ASP: menuitem>
</Items>
</ASP: menu>

CSS

. Simpleentertainmentmenu. ASPnet-menu-selected
{
Border: solid 1px #00ff00! Important;
}

. Simpleentertainmentmenu. ASPnet-menu-childselected
{
Border: solid 1px # ff0000! Important;
}

. Simpleentertainmentmenu. ASPnet-menu-parentselected
{
Border: solid 1px # 0000ff! Important;
}