首先，阿凡达与那位女主角乘雕欢乐、并肩战斗，让我想到了金庸老先生的《神雕侠侣》，男主角是个瘸子，杨过也少了一只胳膊。阿凡达最后那么厉害离不开女主角的培养和训练，练好了基本功，掌握了丛林法则，最后才能做魅影骑士。

       创业者要学阿凡达，先学习一些管理、运营、销售的知识，然后投入实践，坚决地打造自己的业务流程，这样才能成为企业丛林里的阿凡达。创业者也需要神雕，让神雕带着你飞行，这样才能达到足够的高度和视野，这样才会出类拔萃。

电子商务网站的流程再造

       电子商务网站是有长远想法的网商的必然选择，一个长久的电子商务必要要品牌化，迟早要建立独立网站，这就是本文的主题：电子商务网站的流程再造。

        上边的网站截图是国美电器的在线商城，这是一个新建时间不长的电子商务站点，这个站点的布局和外观比较符合艾瑞网发布的《2009-2010年中国独立电子商务网站研究报告》里涉及到电子商务网站的设计方略。

       既然艾瑞的报告说的还算详细，我就不去一一细节的讲解了，我来说说我对电子商务流程再造的五步走：

        第一步：确定品牌名称，也就是电子商务网站的名字。取名字不建议用商品类别作为名字，因为这样品类的潜意识会掩盖掉个性品牌，比如绿森数码、一家一户网、我买网这些名字都是容易形成品牌，但是如果你取个“数码专卖店”这样的名字则是非常失败的。

      第二步：选程序，建网站。个人推荐用上海商派的shopex、ecshop，因为用的人很多，系统比较成熟稳定了。建电子商务网站的具体流程和步骤可参考《2009-2010年中国独立电子商务网站研究报告》。更多的电子商务网站建设技巧点击这里

     第三步：添加商品，网站优化。由于网站流量推广方法中，网站优化是让搜索引擎带流量，所以成本低也最重要，添加商品时候要把各项参数填完整，商品介绍要突出关键词特征。

      第四步：网络推广。这个过程可以多写软文，大量发布，发布到大网站更好，可有几篇带超链接的，这样带动优化和排名，msn签名、QQ签名、微博客都不要放过，但是尽量不要群发。网络广告推荐用谷歌adwords，一定要制作图片广告，因为图片广告的点击率并不比文字广告高，但是有更强的视觉展示和品牌宣传作用。

      第五步：做好客户服务。这是留住客户的根本，这个做不好，前面的都白做了，建立规范和流程化的客户服务体系至关重要，即便是几个人的小网站，也要把服务做得像招商银行一样好。

目前ShopEx已经发布了最新的4.8.5版，在保持ShopEx软件一贯技术优势的基础上，还加入了许多ShopEx专属的新技术。另外在功能上也特别优化了前台用户注册、购买流程；增加了商品分类页自定义模板；以及网店机器人等新功能。

以下，笔者就上述技术及功能特点为大家一一揭秘。

ShopEx4.8.5在技术上采用了ShopEx自创的列表与筛选体系，即ShopEx Finder技术，采用了该技术后的后台管理更加简单自如，打破了传统列表单一页面的元素控制形式，将所有内容立体化，既可以横向的扩展商品的列表属性项，又可以纵向延伸要编辑的商品，无需再受分页的限制，所有的分页内商品都可以统一选取、统一修改并保存。

此外，ShopEx利用Gears技术加快ShopEx后台运行速度，原理是系统自动将远程服务器的整站资源读取到本地电脑里，当用户访问时候，直接读取本地资料。当需要更新时，系统将保持与服务器资料同步；使用了加速辅助则能有效提高后台访问速度与管理效率；启用Gears加速的方法是按顺序按键盘方向：上上下下左左右右 然后再按BA 即可看到启动界面！

在功能方面，ShopEx4.8.5新增的网店机器人无疑是一大亮点，此功能也是同类产品中领先的技术。网店机器人内置了许多常用规则，能帮助管理员处理定义好逻辑规则的工作，如：会员注册即送积分、送优惠券、送红包等，只需预置规则即可一劳永逸，很大程度上减轻了网店管理员的工作压力，提升了运营效率。

ShopEx在模板管理功能做了重大改进，实现了不同频道分别自定义频道模板风格的功能，不同商品分类从此以后将拥有各自专属的页面风格，商家的网店也将更加丰富多彩。为方便商家操作，ShopEx4.8.5还内置了各板块的内容模块，大大简化了商家填充相关页面的过程。

ShopEx4.8.5自带的SEO批量更改模板功能大大提高全站优化方面的效率。在同时增加商品分类、品牌、文章的时候，还可以自定义title、keywords、description，方便用户自定义品牌与商品分类的标题、关键字、描述，这些细节的改进可帮助商家网站更好的迎合搜索引擎，提高搜索引擎的转化率。

俗话说，工欲善其事，必先利其器。

目前的电子商务市场竞争日趋激烈，强大的电子商务产品必将成为网商攻城拔寨的利器。ShopEx无论在技术层面，还是功能应用都为我们提供了强大的保障，加之其七年来一如既往坚持与积累，赢得了近50万用户的信任与支持，成为了目前电子商务软件及服务领域绝对意义上的领头羊。

        自我感觉，shopex的模板是非常容易上手的。我曾经做过ecshop模板的制作和修改，真的很麻烦，而像shopex这样程序和模板分离，其实理解了shopex模板机制，只要你会做网站美工设计，会Div+Css，一样可以做出一套属于自己的shopex模板。下面是一些心得体会（非本人的）。

        shopex是程序和模板分离的，这样就大大方便了大家可以做出自己漂亮的外观网站，虽然很多地方分离得不够，比如一些核心的业务流程区基本大家就很难修改了，但是大部分还是满足网站基本要求的。

        首先，说说模板下的theme.xml，官方是这么说的，theme.xml是整个模板中最重要的部分，所有模板的配置信息都是存在这个xml中的，包括板块的位置、配置信息，边框的信息等等。第一次加载模板时，theme.xml中包含的信息被读入数据库，即模板的初始化，之后用户便可以在可视化界面中进行板块的增删改和对原有的板块进行配置。配置信息保存在数据库中，用户可以通过导出模板来下载到最新的带配置信息的theme.xml，通过“恢复默认”来应用新的theme.xml。

        这个意思表达得还是比较清楚了，我再详细补充下。

        1. 官方说第一次加载模板时，theme.xml中包含的信息被读入数据库，即模板的初始化。意思就是这个theme数据库只会加载他一次，第二次是不会加载的，除非你强行要恢复默认，数据库才会重新加载读取theme的信息。明白了这点，所以只要加载第一次后，你可以随便修改theme啊，只要你不强行恢复默认的话，theme此时不对数据库任何影响，程序也不会读取和应用到theme。

        2，但是为什么大家建议不要修改theme呢?  首先，修改它没意义。上面说了，第一次加载后theme就等于完成了他的任务了，只要不强行重新加载，theme对系统没任何影响。其次，如果你修改了theme的话，哪天不小心强行恢复默认的话，就会导致某些页面不能输出你被修改的挂件内容。因为theme是告诉数据库在哪个页面哪个位置输出哪个内容。

        3.配置信息保存在数据库中。意思就是你的所有可视化编辑的操作数据和记录全部保持在数据库里面，比如可视化删除了挂件，编辑了挂件，添加了挂件。你在后台代码编辑的时候他会保存到对应的html文件里（是否保存在数据库官方未说）。这点就是要告诉我们，记得一定要数据库配置备份，备份生成的文件就是theme-bak.xml，比如你错误的删除了挂件，这个操作已经记录在数据库里面，你通过点恢复theme-bak.xml，那么数据库里面的这个操作记录就会被擦去，这个挂件就没有删除被恢复。

        3.用户可以通过导出模板来下载到最新的带配置信息的theme.xml，通过“恢复默认”来应用新的theme.xml，也就是上面的意思，通过theme.xml这个文件，方便大家反复擦写数据库记录，实际theme就是数据库配置信息的备份文件。

        3，为什么要引入theme.xml呢？上面说了，可以方便大家备份配置信息反复擦写数据库。其次，就是通用模板的共享。模板包含了2个主要文件，一个是html框架文件，这些是最外层框架布局和大致显示样式，二个是theme.xml配置文件，theme配置文件告诉程序要在哪个页面哪个位置输出哪个内容。比如theme里面全部记录了挂件配置信息，通过theme程序才能真正和模板结合起来输出重要信息内容。html框架文件是死的，theme记录的挂件输出的内容是活的。正是有了theme传递给程序的配置信息，程序才知道什么位置输出什么内容。配置信息最终是要传递到数据库里面，程序才能识别和输出内容。如果没有引入theme，那么这些保存在数据库的配置信息就不方便共享，因为要共享数据库。有了theme，数据库配置信息就可以以文件存在的形式方便大家互相转移共享。

        再说说部分人问的widgets ID中ID的理解。ID就是身份，就是给这个widgets一个唯一的身份，以便程序认识和记住这个widgets输出正确的内容。如果不做ID辨认，程序会自动默认排列顺序，导致输出内容错位，也就是说，你写的ID数据库就会记录这个ID，然后数据库通过这个ID输出你挂件设置的内容。也就是说ID可以随便写，但是不能重复。

======================================================================================

        再说说挂件下模板的修改。比方说首页列表商品下的信息描述，系统默认是名字在上面，价格在下面。如果我们想要 价格在上，商品名在下呢，比如这种效果 
 
 
        那我们可以修改挂件模板。找到挂件下的goods目录，新建一个a.html文件 复制里面的default.html内容。再来修改a.html内容。先来分析default.html里面的代码.里面<{capture name=titleImg}>里面很多变量和定义，这些是关系到后台挂件设置的内容以及系统输出的内容，我们不能动。我们只要修改模板html代码，就是在以最后一个<{capture 结尾的地方的后面代码，就是输出代码，找到输出的html代码就是以 <div class="itemsWrap <{if $setting.column > 1 &&开头的，我们再找到 设置图片在上的那部分代码
        <{elseif $setting.goodsImgPosition=="top"}>
        <{$smarty.capture.goodsImg}>
        <{$smarty.capture.goodsName}>
        <{$smarty.capture.goodsDesc}>

        这3个smarty的代码就是分别输出图像，商品名字，商品描述的。我们把商品名字和描述互换位置，就可以把价格调整在上面。也可以修改其他HTML代码 达到更多的效果。

        有群友在群问:挂件在哪？怎么添加挂件？怎么加更多的商品列表。
        这个问题是刚刚上手的时候也想了一阵子，弄不明白挂件是干嘛的，关键还是不理解shopex的模板机制，理解了就很好制作和添加挂件了。
        挂件是功能模块，是程序核心，官方是这么说的，关键是怎么理解。
        一套程序是有很多功能的，这很好理解吧，比如首页上的导航模块，他自动列出了你后台添加的栏目，这不就是实现导航功能吗？
首页上的商品列表，他会自动列出你后台添加的商品，这不是实现了商品展示功能吗？？公告区的文章列表，可以自动列出你添加的新闻公告，这不就是功能吗。一套程序就是为了实现各个功能而互相有机结合起来的。

        功能模板之所以叫功能模块，那是因为他紧密结合系统，输出程序最核心的部分，是程序底层代码了，这些不是我们一般人可以修改的，也不是一般人可以随着增加的，他是程序早封装好，为你打包准备好了的。你要做的就是把各个功能漂亮的组合在一起，做个漂亮的网站出来。

        怎么去组合这些功能，那你首先得布局，那你就得会HTML代码了。后台编辑源代码，把需要表现功能的地方一律以widgets  ID替换，注意，这个地方要解析下，很多人这里会卡着一下，想不明白。

        你输入 widgets ID 只是告诉程序你在这个地方占了个位置，挖了一个坑，这个时候 ，程序是不知道你这个坑要放啥东西啊，不知道你写的widgets ID是什么意思啊，所以程序在这个地方不会输出任何代码，在后台可视化编辑中，就显示为空白区。你必须到后台可视化编辑里面去添加一个功能附加在这个widgets ID上，这样，数据库就记录了你的操作ID，程序就明白你给这个ID附加的功能，保存后，程序会按照他记录的ID，在widgets上替换 输出程序早封装好的 功能模块，也即大家所谓的挂件。

        也就是说 widgets ID指向的内容是你用ID记录对应着的程序内置的封装的功能模块，是系统内置的，你只有增加和删除的权利。当然你也可以自己写 widgets  ，但是一般的人做的只能做哪些简单替换HTML代码的以供后台方便修改的所谓挂件，这些都不和系统核心紧密结合的。

        所以，挂件在哪？？挂件在系列内部自带的封装的。
        怎么添加挂件？  你首先必须定义一个 widgets  ID  ，然后去后台可视化编辑把内置功能赋予这个 widgets ID，程序记录后，
        就会在前台页面替换 widgets ID的内容 输出 你赋予的功能代码。
        后台只能看见widgets  ID 必须通过程序识别输出后 ，在前台才能看见widgtes的效果（后台可视化编辑实际就是通过了程序输出了）。

        如果你对shopex模板，欢迎你与我一起探讨与交流。模板案例：http://www.eyameng.com，请多多指点。

        商秀电子商务博客推荐看以下文章：

        倾城-4.8-模板制作教程【系列一】
        倾城-4.8-模板制作教程【系列二】
        倾城-4.8-模板制作教程【系列三】
        倾城-4.8-模板制作教程【系列四】
 

　　内容：content/container

　　尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：column

　　页面外围控制整体布局宽度：wrapper

　　左右中：left right center

　　登录条：loginbar

　　标志：logo

　　广告：banner

　　页面主体：main

　　热点：hot

　　新闻：news

　　下载：download

　　子导航：subnav

　　菜单：menu

　　子菜单：submenu

　　搜索：search

　　友情链接：friendlink

　　页脚：footer

　　版权：copyright

　　滚动：scroll

　　内容：content

　　标签页：tab

　　文章列表：list

　　提示信息：msg

　　小技巧：tips

　　栏目标题：title

　　加入：joinus

　　指南：guild

　　服务：service

　　注册：regsiter

　　状态：status

　　投票：vote

　　合作伙伴：partner

　注释的写法:

　　/* Footer */

　　内容区

　　/* End Footer */

　id的命名:

1. 页面结构

   容器: container

   页头：header

   内容：content/container

   页面主体：main

   页尾：footer

   导航：nav

   侧栏：sidebar

   栏目：column

   页面外围控制整体布局宽度：wrapper

   左右中：left right center

2. 导航

   导航：nav

   主导航：mainbav

   子导航：subnav

   顶导航：topnav

   边导航：sidebar

   左导航：leftsidebar

   右导航：rightsidebar

   菜单：menu

   子菜单：submenu

   标题: title

   摘要: summary

3. 功能

   标志：logo

   广告：banner

   登陆：login

   登录条：loginbar

   注册：regsiter

   搜索：search

   功能区：shop

   标题：title

   加入：joinus

   状态：status

   按钮：btn

   滚动：scroll

   标签页：tab

   文章列表：list

   提示信息：msg

   当前的: current

   小技巧：tips

   图标: icon

   注释：note

   指南：guild

   服务：service

   热点：hot

   新闻：news

   下载：download

   投票：vote

   合作伙伴：partner

   友情链接：link

   版权：copyright

　class的命名:

1. 颜色:使用颜色的名称或者16进制代码,如

   .red { color: red; }

   .f60 { color: #f60; }

   .ff8600 { color: #ff8600; }

2. 字体大小,直接使用"font+字体大小"作为名称,如

   .font12px { font-size: 12px; }

   .font9pt {font-size: 9pt; }

3. 对齐样式,使用对齐目标的英文名称,如

   .left { float:left; }

   .bottom { float:bottom; }

4. 标题栏样式,使用"类别+功能"的方式命名,如

   .barnews { }

   .barproduct { }

　注意事项:

1. 一律小写;
2. 尽量用英文;
3. 不加中杠和下划线;
4. 尽量不缩写，除非一看就明白的单词.

　　主要的 master.css

　　模块 module.css

　　基本共用 base.css

　　布局，版面 layout.css

　　主题 themes.css

　　专栏 columns.css

　　文字 font.css

　　表单 forms.css

　　补丁 mend.css

　　打印 print.css

Blueprint的实现

以上三栏布局的代码为：

<style type="text/css">    .container { margin: 0 auto; width: 950px }    .span-8 { float: left; margin-right: 10px }    div.last { margin-right: 0 }    hr { clear: both; height: 0; border: none }</style><div class="container">    <div class="span-8"></div>    <div class="span-8"></div>    <div class="span-8 last"></div>    <hr /></div>

上面是基本功能，Blueprint还支持append-n, prepend-m, border等“高级”功能，这些就不细说了。Blueprint的特点简单总结如下：

1. 采用浮动来实现布局，简单明了
2. 950两侧没有margin, 最后一列的class需要加上last
3. 采用额外标签来清除浮动

960.gs的实现

谈到960栅格系统，不得不提
有意思的几点：

1. margin是均匀放在950两侧的
2. 所有grid除了宽度不同，左右边距都一致margin: 0 10px;
3. 代码简单清晰，起始和结束列不需要添加额外class

很明显，Blueprint和960.gs都是采用浮动来实现布局的，主容器需要添加额外标签来清除浮动（
注意，demo链接中的宽度是750的，但我们只要将<div id="doc"></div>中的id改为doc2, 页面宽度就自动变为950宽了（YUI非常强大^o^）。来看下dom结构：

采用的也是浮动布局，简化后的CSS代码为：

<style type="text/css">    .doc2 { margin: auto; width: 73.076em }    .yui-u { float: left; margin-left: 1.99%; width: 32% }    div.first { margin-left: 0 }    #ft { clear: both }</style>

YUI的特点是：

1. 依旧是采用浮动布局，槽（Gutter）宽通过margin-left来控制（Blueprint采用右边距，960.gs采用均分，这三个框架对槽的处理实在有意思）
2. 总宽度采用em, 这样可以用在弹性布局上
3. 栏的布局用的是百分比，采用了流体布局

YUI的好处是能用来做自适应布局，在这前面两个框架里是没有的。但普通的定宽布局，YUI则显得有点麻烦，比如我们要实现四栏布局，dom得这样写：

先来两个两栏布局，再细分为四栏布局，清晰度上欠佳。

更多栅格实现

栅格化更多是一种布局思想，实现技术可以千差万别。比如今年冒出来的伪绝对定位，立刻就可以用来实现栅格系统。明城兄弟就尝试了一把。

肯定还有非常多的栅格化实现方案，这里就不一一挖掘了。

双飞翼栅格系统

挺奇怪这个名字？请先阅读这篇文章：渐进增强式布局探讨. 简单说，双飞翼布局是一种布局实现技术，可以利用它来实现一整套栅格系统。

先看test页面：Grids Layout Test.

具体技术细节在渐进增强式布局探讨一文中已经阐述，这里不再重复。有几点需要说明：

1. 这套栅格系统并不能实现所有布局。这和YUI Grids类似，只能实现预定的一些布局。比如三栏布局，目前只加入了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四种情况，这是从淘宝的现有页面中分析总结出来的。对于同一个站点来说，太多不同的三栏比例不是好事（淘宝目前都有点多，以后可能还会进一步统一）。因此如果采用这套栅格系统的话，需要先分析站点，定义出一套合适的比例。这里有个所有比例的自动生成工具：grids_css_generator.html.
2. 关于命名：.grid-c2-s6表示两栏（c2: column 2）布局，sub栏的宽度是4列（s4: sub width is 4 * 40 -10）. 而.grid-c2-s6f, 最后的f表示两栏布局的第二种情况，即sub和main互换。类似地，.grid-c3-s5e6d表示三栏布局，其中sub栏的宽度是5, extra栏的宽度是6, 最后的d表示是s5e6三栏布局中的第四种情况。
3. 为了方便使用，将最常用的两栏布局.grid-c2-s5用.grid-c2直接表示。同样的，.grid-c3表示.grid-c3-s5e6. 这是淘宝的默认值，其他站点可以根据实际情况修改。
4. 这套布局符合渐进增强式工作流程。细心的你可能已经发现，所有两栏布局和三栏布局，HTML中的DOM结构是完全一样的，只有最外层div的class不同。如果要交换左右栏，只要非常简单的修改下class就可以。
5. 实际使用时，两栏布局和三栏布局已经够用。其实有了两栏，其它布局就都可以组合出来。这里有一个尝试性页面：grids_test4_v0.1.html. 组合布局看起来很强大，但实际使用时会把问题搞复杂，不推荐使用，干脆忘掉吧。

最后来看下两个测试页面：两栏布局grid-c2_test.html 和 三栏布局grid-c3_test.html.

目前除了发现在ie6下有个bug（超大图片等会撑乱布局，其实可以用overflow: hidden来解决，但考虑overflow的负面影响，最后还是由布局内部的模块来自主控制的好），尚未发现其他问题。

小结

栅格系统更多的是一种布局思想，在实际使用时，根据具体需求选用合适的技术来实现即可。需要注意的是，对于栅格的技术实现来说，太灵活未必是件好事，适度灵活最难得。怎么才能适度呢？这需要疯狂实践 + 不断的反思 + 持续的重构 + 悟…

栅格搭好了页面框架，接下来很重要的一件事情就是往里面添加内容模块。让内容模块规范化，让页面生成工业化，对大型站点来说，这是栅格系统最有商业价值的地方。下一篇也是本系列最后一篇将展示栅格系统中的模块化应用。

   如：控件名   isName    DataField 为 name

     则在Javascript 中： isName_name

（二）OutputDataGrid
1)  显示多少行在 Config.web 中定义，
   在 appSetting 中：<add key="pageSize" value="10" />

如某页需要特殊，则  this.CustomPageSize= 行数 即可

2) 如何显示总页数
资源设为： 

datagrid_total   总共{0}条记录

3）设置如何从数据库取数据（表、存储过程）
   1）TableName ：表名

      whereCondition : 查询条件，带 where

   2）SQL 属性：当此属性填写时，则TableName ,whereCondition 被忽略

   3）UseStoreProcedure = true

      TableName  填写存储过程名

      whereCondition:  参数  ,必需要参数

  如1：存储过程 (一个参数)

create  procedure usp_getStudent @ssex char(2) as

  select sno,sname,ssex,sage from student where ssex=@ssex

return

      使用： UseStoreProcesur :  true

TableName      :  usp_getStudent

             WhereCondition  :   @ssex=男      //注意：男不用引号

  如2：存储过程 (两个参数)

create  procedure usp_getStudent @ssex char(2)，@sage int  as

  select sno,sname,ssex,sage from student where ssex=@ssex and sage>@sage

return

      使用： UseStoreProcesur :  true

TableName      :  usp_getStudent

             WhereCondition  :   @ssex=男 ,@sage=23

4）颜色设置 layout.css
把下列设置到 datagrid 的对应项的 cssclass 。

.datagrid_header

.datagrid_rowitem

.datagrid_alternating

.datagrid_pager

.select

5）如何根据数据条件设置不同的颜色
   用到的事件：ItemDataBound ,  当执行 DataBind 时每行发生一次。

  如没有用到模板：

if (e.Item.ItemType == ListItemType.Item||e.Item.ItemType == ListItemType.AlternatingItem)

       {   string lbl1 = e.Item.Cells[0].Text;   // 第1列

           if ( lbl1 == "ADA" ||lbl1=="ADL" )

          e.Item.ForeColor = System.Drawing.Color.Red;

       }

  如是模板列：

DataRowView  drv =(DataRowView) e.Item.DataItem ;

Label lbl1 = (Label)  drv[“airportid”] ;   //airportid  为label id

或：

  Label lbl1 = (Label) e.Item.FindControl(“airportid”) ;   //airpoetid 为Lable id

  TextBox  t1 = (TextBox) e.Item.FindControl(“name”);

6）如何在列表中设置多个按钮 （选择列按钮）
   第一步：添加一个 select 列 ，命令名为：Select1   列名为 察看

   第二步：添加一个 select 列 ，命令名为：Select2   列名为 明细

   第三步：在该列表的ItemCommand 事件中：

通过  e.CommandName.ToString() 得到按钮那一个按钮

通过  e.Item.ItemIndex  得到是第几行。

（三）  ExportButton
    ExportButton1.ExportToExcel( OutputDataGrid1 );  //输出到 Excel

columnsName ： 用于写入 Excel 时的列名，对应datagrid 中各字段的列名

   如：学号，姓名，性别，年龄

filename : abcd.xls   文件名

（四） InputSelect
 InitUI  仅负责把资源替换

 从服务器去数据由下述完成： 

Submiter submiter=new Submiter(this);

       submiter.InitInsertMode();

     当 该控件用于报表或查询的条件输入时，需要如此处理。

    表中必须有 fatherid 字段，如没有，可以利用视图解决

      如 arcTypeID

          sort     typeid     typename

           21        01         男

           21        02         女

          22         01         上海

          22         02          北京

    那么：  create  view  v_arcTypeid (fatherid,typeid,typename) as

      select sort,typeid,typename from arcTypeid

    然后要显示 sort= 21 ， 则组件inputSelect 的 fatherid 属性设置为 21 即可。

（五） outputButton
     OnClickString:  javascript 函数或代码

     如：//document.getElementById('InputString1_value').value = QueryString

        function aabb(){

           var obj1 = eval("window.opener.document.all.IPSname_name");

           obj1.value = document.getElementById('InputString1_value').value;

           self.close();

          }

     outputButton1.onClickString = aabb();   //aabb为javaScript 函数

（六） InputPopupString:
  1 先要设计弹出页面
         弹出页面负责把选择的值填回 父页。

        方法：

function aabb(){

           var obj1 = eval("window.opener.document.all.IPSname_name");

           obj1.value = document.getElementById('InputString1_value').value;

           self.close();

          }

 //    outputButton1.onClickString = aabb();   //aabb为javaScript 函数

IPSname_name 为 父页上的控件名

InputString1_value 为子页上的控件名

 2 向子页传递参数，
sub.aspx?op=1&port=ab

1）可以通过 url参数完成

   即  this.GetQueryString( 参数名)

       this.GetQueryString( op)  得到 1

2）可以通过 如aabb()函数那样完成

function getUrl(){

 var urlString = document.location.search; //document.getElementById('InputString1_value').value = urlString ; var obj2= eval( "document.all.InputString1_value"); obj2.value = urlString ; // QueryString }

在body 中：onload="getUrl() 即可

（七）ImageHypleLink

      enabled = false ,则 DisabledCss 要设置为：LinkDisenabled
 

官方网站： http://blueprintcss.org/

Blueprint CSS 框架将 html 标签设定为如下情况：

• 统一重置了 43 个 html 标签（html 4.0 标签一共 91 个）的属性，（html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td）。重置 html 标签的默认样式为：内外填充边框都为零，字体粗细、字体科族和字体样式继承，字体大小百分之百（在中文情况下使用这个还是改固定象素的好），高度以基线对齐；
• 设定 body 内的行高为 1.5 倍；字体大小百分之七十五（在中文情况下使用这个还是改固定象素的好）；字体颜色为 #222222 （接近于黑色）
• 设定 table 的边界间距为有间距、间距为零。（用有间距而间距为零的方式，估计只有这样才能将表格的边界间距设的看不到）；下外填充 1.4em ，宽度 100%；
• 设定 caption, th, td 内的元素居左，字体粗细为普通；caption 的背景色为 #EEEEEE （特浅的灰），th 背景为 #C3D9FF （浅蓝色）内的字体为粗体，th, td 的内填充为 上4px 右10px 下4px 左5px；
• 设定 table, td, th 内的元素高度居中；
• 设表格如果需要隔行换色的效果或者某行需要不一样的颜色，那么已经给定了 tr.even td 类，背景颜色为 #E5ECF9 （浅浅的蓝）
• 设定 tfood 为斜体字
• 设定 blockquote, q 元素之前和之后的填充内容为空，引用符号也为空；blockquote 的外填充为 1.5em 字体颜色 #666666 （深灰色），斜体字（中文斜体表现并不好，这个改了斜体不要而用背景色或者字体小一号来表示应该会好点）
• 设定链接下的图片的 border 为零；
• 设定 h1 至 h6 不同的字体大小粗细外填充，颜色为 #111111 （更接近于黑）
• 设定 h1 至 h6 下的图片的外填充为零
• 设定行内图片元素默认左漂浮，同时给出了一个 p img.right 的类，以备你需要图片右漂浮的时候来用（不过很多时候我们需要的是图片不漂浮，这个需要改或者单独建立一个类了）；
• 设定链接的颜色为 #000099 （深蓝色）带下划线，鼠标滑过和焦点状态颜色为黑色；
• 设定 abbr 和 acronym 下边缘为一象素点线的边框；
• 设定 del 删除字的颜色为 #666666 （中等灰度的灰）；
• 设定 pre 和 code 内地文字显示为 white-space:pre （就是不换行啦，现在<nobr><wbr><xmp>都不建议用了）；
• 定义了 ul 和 ol 列表前的标识为实心小圆点和阿拉伯数字。

还有一些各个标签的上右下左的填充、行高、字号大小的设定不细说了。

单独给定了几个可以根据实际需要单独调用的类：

• .small 小号字；
• .large 大号字；
• .hide 不显示；
• .quiet 字色为 #666666 （深灰色）；
• .loud 字色为 #000000 （黑色）；
• .highlight 背景色为 #FFFF00 （黄色）；
• .added 背景色为 #006600 （绿色）字色为 #FFFFFF （白色）；
• .removed 背景色为 #990000 （红色）字色为 #FFFFFF （白色）；
• .first 左边的内外填充都为零；
• .last 右边的内外填充都为零；
• .top 上面的内外填充都为零；
• .bottom 下面的内外填充都为零。

布局部分 CSS 说明：

• .container 宽度 950 象素，整体居中模式。这个类应该是主要用于页面 body 元素内的整体页面控制的，好像也没其他用了；
• .showgrid 无用的类，这个是用来演示这个框架的一个辅助，可以将这个类删除；
• body 元素设定为上下外填充 1.5em，左右外填充为零。

布局的列宽给出了 24 个不同宽度设定的数值：

• div.span-1 至 div.span-24 全部设定为左漂浮，右外填充 10 象素；
• div.last 设定右外填充为零象素；
• .span-1 至 .span-24 从宽度 30 象素开始，每 40 象素为一单元增加；
• .span-24 和 div.span-24 右外填充覆盖上面的设置，设置为零。

以上四项综合理解可以理解为：

• .span-1 至 .span-23 如果用于 div 元素，那么这个 div 具有的属性是左漂浮，右外填充 10 象素，宽度各自；
• .span-1 至 .span-23 如果如果用于其他元素，那么就只具有宽度属性而不具有漂浮属性也没有右外填充；
• .span-24 是个特殊一点的样式，如果用于 div 元素，那么宽度为 950 象素，左漂浮，右外填充为零；
• .span-24 是个特殊一点的样式，如果用于其他元素，那么宽度为 950 象素，无漂浮，右外填充为零；
• div.last 这个类在 CSS 文件中的位置在 div.span-1 至 div.span-24 的后面，所以如果 .last 类应用于 div 元素，那么这个 div 元素的右外填充将覆盖成为零。

内填充数值：

• .append-1 至 .append-23 设置内右填充，从 40 像素开始，每 40 像素为一单元增加，.append-23 内右填充数值为 920 像素；
• .prepend-1 至 .prepend-23 设置内左填充，从 40 像素开始，每 40 像素为一单元增加，.prepend-23 内左填充数值为 920 像素。

给定两个右边线样式：

• div.border 设定右内填充 4px ，右外填充 5px ，右边线 1px 灰色（#EEEEEE）实线；
• div.colborder设定右内填充 24px ，右外填充 25px ，右边线 1px 灰色（#EEEEEE）实线。

外填充样式：

• .pull-1 至 .pull-24 设定左外填充，从负 40 象素开始到负 960 象素，每 40 象素为一个单元数值变化，同时具有左漂浮和相对定位属性；
• .push-1 至 .push-24 设定上填充为零，下填充为 1.5 em ；左外填充，从 40 象素开始到 960 象素，每 40 象素为一个单元数值变化，右外填充，从负 40 象素开始到负 960 象素，每 40 象素为一个单元数值变化，同时具有右漂浮和相对定位属性。

以上两项应该是这个 CSS 框架中最难理解的部分了，在这里不详细说明了，等到写实际应用的时候弄个列子一说就明白作用了；

给定一些其他样式：

• .box 顾名思义就是一个盒子了，哈，设定内填充 1.5em ，外下填充 1.5em ，背景颜色 #E5ECF9 (浅浅的蓝)
• hr 设定 html 的 <hr /> 横线样式为：背景色 #DDDDDD (灰色)，字色 #DDDDDD (灰色)，两侧不允许有漂浮元素，无漂浮，宽度百分之百，高度 0.1em ，外填充上左右为零，下外填充为 1.5em ，没有边框。具体表现出来基本就是一根横的一象素灰色线了；
• hr.space 这个样式是用在 <hr /> 标签内的，设定了背景色和字色都为白色。因为是用在 <hr /> 标签内，所以它同时具有 <hr /> 的设定样式，只是将背景色和字色从灰色覆盖为白色，所以表现起来其实就是一根横的一象素白色线。

给定清除浮动样式：

• .clearfix:after 和 .container:after 设定 .clearfix 和 .container 之后的表现为：内容是“.”(一个小点)，显示为块元素，高度为零，两侧不允许有漂浮元素，可见度属性(visibility)为隐藏 (注：可见度 visibility 隐藏属性和 display 隐藏属性有占位区别，visibility 隐藏属性占据空间位置而 display 隐藏属性不占据空间位置)；
• .clearfix 和 .container 设定显示样式为行内块(IE 不完全支持此属性，目前只是用这个来让 IE 获得 hasLayout )；
• * html .clearfix 和 * html .container 设定在“通配符下的 html 下的.clearfix 和 .container 两个样式”属性高度为 1% (高度为 1% 作用和 zoom:1 的作用是一样的，IE 在 inline-block 加上 1% 或 zoom:1 获得类似 table-cell 的属性，只 IE6 以下识别)；
• .clearfix 和 .container 设定显示样式为块模式(覆盖前面指定的行内块模式为块模式，但 IE 不会让 hasLayout 消失，目的由此达到)；
• .clear 设定为两侧不允许有漂浮元素。

清除浮动的这三个类中的前两个比较复杂，除了清除浮动外还有一些其他的能力，基本上这几个样式的内容和先后顺序和代码层级设定完后就能在所有的浏览器下清除浮动了(如果某个浏览器不支持的话，那么估计也很难支持这个框架中的大部分 CSS 属性，那么这个框架对这个浏览器来说也没太大的意义了)，具体研究起来就太深了，我是搞不定，不过对我们用的人来说，只要知道你需要清除浮动的时候就用这两个类就可以了。顾名思义，.clearfix 类一般用在你不介意多加一个或者某些情况下你只能多加一个 div 或其他的 html 标签元素而本身内部不包含内容的元素身上来清除浮动，.container 类用在你的一个本身内部包含内容的元素身上来清除浮动。.clear 这个类嘛，没啥可说的了，就是不允许两侧有浮动元素。

表单元素部分：

这部分其实没有太多需要仔细研究的，大部分指定的是表单元素的一些字体、字号、字色和元素的边框、边距、宽、高等。这些就不详说了，说说可以稍微需要知道一下的。

• 给定了元素的获得焦点的样式(一象浅黑边)，可惜 IE 不支持，所以这个作用不是那么大，毕竟 IE 现在还是占据市场份额的巨头；
• 给定了三个类，可以用来标识有特殊意义的块区：.error, .notice, .success ，都具有不同的背景色和边框色；
• .error 顾名思义标识“错误”
• .notice 顾名思义标识“提示”
• .success 顾名思义标识“成功”

Blueprint 是一个 CSS Framework,框架就是一个你可以用于你的网站项目的基本的概念上的结构体。css框架通常是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，Blueprint由一个易用的网格、合理的布局和一个打印样式组成。

使用方法：

1、下载Blueprint，解压blueprint文件夹中的文件。

2、引用三个CSS文件。

在HTML文件中嵌入代码(blueprint为CSS文件所在目录)：

1. <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
2. <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
3. <!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

3、定义container(容器)，容器宽度为950px，整体居中模式。

.showgrid是显示网格的类，仅在调试时使用。

1. <div class="container showgrid">
2. </div>

4、定义span，共24个span，每个宽度30px，右边填充10px，最后一个.last的右填充为0。

三列等分，最后一列必须添加“last”类

1. <div class="span-8">
2.     <p>第一列，宽度40px*8=320px</p>
3. </div>
4. <div class="span-8">
5.     <p>第二列，宽度40px*8=320px</p>
6. </div>
7. <div class="span-8 last">
8.     <p>第三列，宽度40px*8-10px=310px</p>
9. </div>

单列宽度为24，最后一列右填充为0。

1. <div class="span-24">
2.     <p>单列24宽度为40px*24-10=950px</p>
3. </div>

5、设置内填充值。

• .prepend-1 至 .prepend-23 设置内左填充，从 40 像素开始，每 40 像素为一单元增加，.prepend-23 内左填充数值为 920 像素。
• .append-1 至 .append-23 设置内右填充，从 40 像素开始，每 40 像素为一单元增加，.append-23 内右填充数值为 920 像素；

内填充应计入div总宽度

1. <div class="span-6 prepend-1">
2.     <p>宽度为：40px*6+左内填充40px=280px</p>
3. </div>
4. <div class="span-6 append-2">
5.     <p>宽度为：40px*6+右内填充80px=320px</p>
6. </div>
7. <div class="span-6 prepend-3 last">
8.     <p>宽度为：40px*6+左内填充120px-10px=350px</p>
9. </div>

6、设置外填充值。

• .push-1 至 .push-23 设定左外填充，从40象素开始到920象素。
• .pull-1 至 .pull-24 设定右外填充，从40象素开始到920象素。

设置图片左右漂浮

1. <div class="span-24">
2. <div class="span-12">
3.     <div class="span-2"><img src="test-small.jpg" class="push-1"></div>
4.     <div class="span-10 last"><p>图片向左漂浮40px</p></div>
5. <div class="span-2"><img src="test-small.jpg" class="push-2"></div>
6.     <div class="span-10 last"><p>图片向左漂浮80px</p></div>
7. <div class="span-2"><img src="test-small.jpg" class="push-3"></div>
8.     <div class="span-10 last"><p>图片向左漂浮120px</p></div>
9. <div class="span-2"><img src="test-small.jpg" class="push-4"></div>
10.     <div class="span-10 last"><p>图片向左漂浮160px</p></div>
11. <div class="span-2"><img src="test-small.jpg" class="push-5"></div>
12.     <div class="span-10 last"><p>图片向左漂浮200px</p></div>
13. </div>
14.  
15. <div class="span-12 last">
16. <div class="span-10"><p>图片向右漂浮40px</p></div>
17.     <div class="span-2 last"><img src="test-small.jpg" class="top pull-1"></div>
18. <div class="span-10"><p>图片向右漂浮80px</p></div>
19. <div class="span-2 last"><img src="test-small.jpg" class="top pull-2"></div>       
20. <div class="span-10"><p>图片向右漂浮120px</p></div>
21.     <div class="span-2 last"><img src="test-small.jpg" class="top pull-3"></div>       
22. <div class="span-10"><p>图片向右漂浮160px</p></div>
23.     <div class="span-2 last"><img src="test-small.jpg" class="top pull-4"></div>       
24. <div class="span-10"><p>图片向右漂浮200px</p></div>
25.     <div class="span-2 last"><img src="test-small.jpg" class="top pull-5"></div>       
26. </div>
27. </div>

7、清除浮动样式：

• .clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
• .clearfix, .container {display:block;}
• .clear {clear:both;}

8、其他样式：

• .error 顾名思义标识“错误”
• .notice 顾名思义标识“提示”
• .success 顾名思义标识“成功”
• .box 顾名思义就是一个盒子了，设定内填充 1.5em ，外下填充 1.5em ，背景颜色 #E5ECF9 (浅浅的蓝)
• div.border 设定右内填充 4px ，右外填充 5px ，右边线 1px 灰色（#EEEEEE）实线
• div.colborder设定右内填充 24px ，右外填充 25px ，右边线 1px 灰色（#EEEEEE）实线