推荐阅读
Photoshop鼠绘高挑性感的外国美女图片教程
提供最初的线稿，想学习的朋友最好跟着来一遍，那会比你看一遍领悟得更多：好多朋友喜欢用线稿作为绘画的第一步，不然，不知道怎么画。我不喜欢最后的作品有墨线的痕迹，不过这次我做一个适合大家口味的。 一、起型，就像x光一样，先不考虑其他的，我们把人体的结构画出来……二、描绘衣服，头发……，加一点阴影，对塑造体积有个概念……三、在背景层上面涂上颜色，用的是cs自带的水彩画笔，但是在画笔属性里面添加了画笔压力…… 大致描绘背景……
PS打造朦胧意境之美的梦幻感外景婚纱照
本教程主要运用了Photoshop中的模糊滤镜、图层混合模式、图层样式以及调色处理等，制作出外景婚纱照片的朦胧梦幻感觉，使画面有一种意境之美，效果很不错。在此基础上，大家在处理类似照片时还可以尝试刷上一些星光笔刷之类的点缀，也许会有更好的效果。原图效果教程开始打开图像Ctrl+j复制一层滤镜.模糊.高斯模糊
实例学用CorelDRAW9（十）
十、阴影的建立（海鸥） 不要生气，实例又用海鸥，没办法，我只是太懒了……我不是说过吗？我希望用很简单的实例告诉你C9怎么用，而不是让你学会做这样或那样的实例……我保证下次再不了……这一次，我们将要用到的工具是“交互式下落阴影工具”，呵呵，一听名字就知道很专业……现在，我可以开始实例了？谢谢…… ^_^打开海鸥，启动“互动式下落阴影工具”，这时就可以开始了（就是“互动式渐变工具”菜单里最后一个图标，有阴影的那个）。第二步：做出阴影。在画面上点击鼠标，随意拖动一定距离，松开就可以了。注意，阴影控制线上的白色滑块离黑色块越近，则阴影越深，反之则越浅，你可以试着调节一下。这一步的效果如图51所示。
拍出专业玻璃照片的前期拍摄与后期PS处理技巧
在本教程中我将告诉你如何在前期拍摄和数码后期处理，用最少的照片来拍出专业玻璃照片。您将学习专业照明用光技巧来表现一些惊人的照片和时尚的背景。 使用相同的背景和道具，但使用不同的相机设置。首先，我将介绍两种常见的照片拍摄技巧，然后我会告诉你如何捕获每张照片和后期采取Photoshop的处理步骤。 先欣赏一下最终效果图： 最终效果 第1步：设备的准备 在我们开始之前，你应该准备以下几点： 玻璃(您可以分解成小块)、锤、一个或两个胶袋、手链、两张黑色A4纸或黑色文件夹、台灯、鼎、相机、图形程序。 第2步：收集碎片 在我们开始采取实际的照片，你要把你已经准备好的玻璃打破。这就是为什么你需要一个锤子和塑料袋，因为你肯定不希望这些碎片四处散落。放入袋(或两个杯子，如果你想成为完全相信他们会留在室内)，然后用锤子打几次。(图1) 图1
最新发布
用Dreamweaver MX建立一个简单的图书查询系统
最近公司为了充分利用图书资源，方便员工查询，决定在公司内部网上建立一个图书查询系统。考虑到公司图书不多，只有1千多册，且专业书居多的特点，我决定做两个查询条件：一个是根据图书类别来查询， 用户只要选择相应的类别就可以显示出该类别的所有图书，这主要是面对对公司图书不熟悉的人；第二个是根据图书名称来查询，用户只要输入图书名，就可以快速的搜索到符合条件的所有图书。 方案已定，接下来就是用什么软件做及如何做的问题了。在这里，我选用了网页的形式，这样同事们只要打开浏览器，输入相应的地址就可以查询了。因此，我使用网页制作利器 dreamweaver 软件（下面简称dw），数据库用acess，环境为win98，pws（编者注：关于PWS的使用教程可以查阅《深入了解微软个人服务器PWS之一》《深入了解微软个人服务器PWS之二》《深入了解微软个人服务器PWS之三》《深入了解微软个人服务器PWS之四》）。下面就正式开工锣。 点击这里下载本教程的源代码 首先，建立数据库： （2）新建一网页，因为查询是动态页面，因此在弹出的面板中选择Dynamic page和Asp VBScript，如图2。按create按钮回到页面。 （3）连接数据库。展开右边的Application 面板，选择Databases标签，按"+"按钮，选择Data Source Name (DSN)，如图3。
Dreamweaver MX 2004 打造细线表格
如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderColor="#000000")，表格线其实是2px的，要做细线表格，有三种方法： 1.在Dreamweaver中按Ctrl+Alt+T，弹出插入表格的对话框，参数设置如图(带红框项为固定值，否则无效果)： 完成后效果如图： 2.利用表格的暗边框(bordercolordark)和亮边框(bordercolorlight)属性做的细线表格：还是按Ctrl+Alt+T插入表格，在对话框中设置如图(带红框项为固定植，否则无效果) 选中表格后按F9，展开"Tag Inspector"面板组，在"Attributes"面板中设置如图：
Dreamweaver MX技巧汇粹
前面我们讲了一些DWMX的基本操作，相信大家看了后都会觉得比较简单，的确，这是个工具软件，操作方便应该是他的宗旨。其实网络后台最基本的就应该是抓取数据库了，只有掌握好这方面的东西你才可以更加深入的学习。当然，我们只学习了DWMX的很少一部分，还有很多的行为（Server Behaviors）就要你自己去慢慢摸索了，我们所能做的就是带你进入MX的世界，要掌握更加深层的东西，就要看你的耐心和意志了。学习是快乐的，但也是痛苦的，尤其在你碰到问题没有办法解决的时候。 从今天开始，我们要一起探讨一些技巧方面的东西，我们的技巧不是在操作上的，而是在后台应用上的，也就是asp的技巧。MX能够自动生成代码，相信大家已经觉得是一大飞跃了，尤其是对那些设计人员来说再也不是什么遥不可及的事情了。但是任何事物都有他的负面性，DWMX也不例外。 首先：他生成的代码太多了，不是那么容易让初学者理解。很多时候我们完全可以用比较少的代码来替代他自动生成的代码。其次：他需要管理的页面也太多了，也就是说给web维护人员带来了比较大的麻烦，我们经常可以看到在行为对话框中有一个after **** go to ,就是手当我们完成此操作后跳转（小技巧：跳转也可以说是定向,asp代码是：Response.Redircet "newpage.asp" ）到一个新的页面。其实他完全可以做到一个页面上，这样的好处是我们要维护的页面就少了，你可不要小看他，如果你能够很好的掌握这个技巧，那么你将可以少建30%的页面，的确是这样的，你不要吃惊。 今天我们就来说说这方面的技巧：这里我们主要用到一个if…endif语句，这个我想大家都明白，具体怎么实现了？ 比如：我们要建立一个登录系统，用传统的DWMX做我们要两个页面，这是个很简单的东西，只要几行的代码？所以我决定把他并在一个页面里。 编程思路：我们要建立登录系统，肯定要用到表单
下拉菜单全攻略之Dreamweaver篇
下拉菜单是网上最常见到的效果之一，用鼠标轻轻一点或是移过去，就出现一个更加详细的菜单，它不仅节省了网页排版上的空间、使网页布局简洁有序，而且一个新颖美观的下拉菜单，更是为您的网页增色不少。 制作下拉菜单的方法多种多样，本期专栏将为您介绍四种常用的制作方法，让您随心打造自己的下拉菜单。■ 用Dreamweaver制作下拉菜单Dreamweaver是制作下拉菜单最常用的工具，方法简单，控制自由，可以最大限度地随心打造菜单样式，是制作下拄菜单的必修课。用Dreamweaver制作下拉菜单的原理很简单，它利用了Behaviors（行为）面板中的内置方法Show-Hide Layers（隐藏-显示层）方法，并用onMouseOver（鼠标移至）和onMouseOut（鼠标移开）来触发层的隐藏和显示，而将要出现的菜单就在层中。因此，我们可以分四步来制作下拉菜单，首先我们需要一个导航条，它用来放置首先出现在浏览者眼前的主菜单；然后再制作开始隐藏着而将会出现的下拉选单；接着，进行最关键的一步，为主菜单和下拉选单添加上隐藏和显示层的效果；最后，我们进行菜单的美化修饰。最终看到的效果如图，您也可以访问以下地址：menu.htm相信你已经等不急了，那就让我们马上开始吧！ 一、 导航条的制作 首先进行一些必要的前期工作，按CTRL+J，打开Page Properties（页面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以请如图设置。
Dreamwaver MX与ASP.NET六
6．创建记录修改页面相关介绍(注意：为了能显示代码，以下所有代码都在“<”之后和“>”之前加了空格，不便之处请多原谅！):对数据的添加,修改,删除是对数据库的三个基本操作。本节介绍修改记录部分。STEP 1 设计修改流程一般来说,只需要对指定的记录进行更新，所以需要建立搜索页面进行查询，并将查询结果显示在结果页中，并让用户对其进行修改。最后通过提交操作完成更新任务。首先，建立查询页面。在建立dataset的过程中，我们可以通过数据过滤器Filter选择所需的数据。由于我们将会点击DataList中的链接来到达此页面，所以选择URL Parameter并利用关键字CODE来筛选出所需的页面。[图 6-1筛选数据]为此，在站点中新建modify.aspx文件，并添加DataSet如上图。Step2 建立细节页面为了产生链接，首先应建立导航页面。可以对在第3节中建立的DataGrid页面修改达到这样的导航效果。DataGrid的样式是修改的，数据项同样可以设置为显示有链接的文字。同样在DataList和Repeater中也可以实现同样的功能，都是设置一个超级链接到细节页面。打开原来的location2.aspx文件，修改原来的DataList样式。选择DataListm单击Edit Columns(如图6-2)。在弹出的DataGrid样式设计对话框(图6-3)中，可以将Location_name的类型设置为Hyperlink。选中Location_name，单击Change Column Type按钮更改为Hyperlink。[图 6-2 Edit Columns..][图 6-3 设置hyperlink]对于Hyperlink设置如下图，[图 6-4 设置链接关键字]显示的数据域Location_name，连接关键字为code，需要跳转到的页面就是modify.aspx页面。点击链接后具体的网址链接将会为http://yoursite/modify.aspx?CODE=所点击的纪录的code的值而modify.aspx页面也将会通过传来的code的值从数据库中查询所需的纪录。为了在modify.aspx页面中更新数据，就需要用到表单。这就需要将数据记录和输入框绑定。在Dreamweaver MX中绑定数据的方式和Dreamweaver UltraDev中类似。将页面设置如图6-5。新建6个Text Field,1个hiddenField,1个submit按钮,放到适当的位置。其中hiddernField用于保存此记录的CODE值。因为code值为关键字，所以不需改变。[图 6-5 modify.aspx页面]单击Binding标签，将具体数据项拖到与之对应的text field。同时在Format中可以设置数据的显示类型。而同样可以将text field的所有属性和数据源绑定。选择记录的第一个下拉[图6-6 Binding] [图 6-7 数据类型选择] [图6-8 绑定属性]列表，设置被数据源绑定的text Field属性。STEP 3数据更新至于数据更新可以点击Application面板中的Server Behaviors中的”+”按钮，选择Update Record。[图 6-9 选择Update Record][图6-10 设置关联]在弹出的对话框中，需将输入框和相对应更新的数据源关联起来,并设置数据类型。其中CODE应为关键字即Primary Key。类似于Insert Record的页面，还要设置成功添加和添加失败跳转到的页面。现在可以预览一下做好的页面。输入网址http://yoursite/location3.aspx，可以看到如图6-11的页面。[图6-11 location3.aspx页面浏览]Location_name的一项是可以点击的，并将跳到细节页面modify.aspx。[图6-12 更新页面预览]通过modify.aspx页面就可以修改现有数据，并可以通过表单提交事件来更新数据。其更新的主要代码如下:< MM:Updaterunat="server"CommandText='< %# "UPDATE LOCATIONS SET CITY=?, STATE_COUNTRY=?, FAX=?, TELEPHONE=?, ADDRESS=? WHERE CODE=?" % >'ConnectionString='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'EXPression='< %# Request.Form("MM_update") = "form1" % >'CreateDataSet="false"SUCcessURL='< %# "location3.aspx" % >'Debug="true"> < Parameters > < Parameter Name="@CITY" Value='< %# IIf((Request.Form("city") < > Nothing), Request.Form("city"), "") % >' Type="WChar" / > < Parameter Name="@STATE_COUNTRY" Value='< %# IIf((Request.Form("state") < > Nothing), Request.Form("state"), "") % >' Type="WChar" / > < Parameter Name="@FAX" Value='< %# IIf((Request.Form("fax") < > Nothing), Request.Form("fax"), "") % >' Type="WChar" / > < Parameter Name="@TELEPHONE" Value='< %# IIf((Request.Form("tele") < > Nothing), Request.Form("tele"), "") % >' Type="WChar" / > < Parameter Name="@ADDRESS" Value='< %# IIf((Request.Form("address") < > Nothing), Request.Form("address"), "") % >' Type="WChar" / > < Parameter Name="@CODE" Value='< %# IIf((Request.Form("hiddenField") < > Nothing), Request.Form("hiddenField"), "") % >' Type="WChar" / > < /Parameters >< /MM:Update >Dreamweaver MX是通过mm:update来表识更新的代码的。其格式和MM:Insert类似。
DreamwaverMX与ASP.NET一
自从微软提出.NET战略之后，编程爱好者对其趋之若鹜。不过，.NET也的确令人惊讶，新的语言C#，新的web服务----web service，当然少不了广大编网爱好者的挚爱---ASP的下一代------ASP.net。然而，ASP.NET并未普及，只是因为没有一个好的编辑器。人们经历了手写板，VisualStudio.NET等编辑器，直到Dreamwaver MX的出现才真正达到了不用手写代码的程度了。DreamweaverMX将数据库和网页完美的结合在一起，对新的网页编程的支持更是没话说，他支持ASP.NET(C#)，ASP.NET(VB)，ColdFusion，JSP，ASP，XML，PHP，HTML，简直是无所不能。下面就是小编在试用Dreamwaver MX中的体验，供大家研究研究机器的软件要求操作系统:Windows 2000或Windows XP professional(98是时候淘汰了^_^)需装软件:.NET Framework Redistributable(下载地址：http://asp.net/download.aspx) Dreamwaver MX(下载地址：http://www.macromedia.com/software/trial_download/)装好后就让我们开始我们的ASP.NET之旅。1.建立ASP.NET站点STEP 1 准备:运行ASP.net页面，计算机必须安装服务器程序(IIS)，以提供对ASP.net的支持。所以我们必须安装IIS，在添加删除程序中的添加windows组件可以进行安装。用Internet管理器(控制面板│管理工具│Internet管理器)新建一个web站点指向你想摆所生成的页面的文件夹。[图1-1 Internet管理器设置]将Dreamwaver MX安装目录下的Sample\GettingStarted\Tutorial和\Samples\Database下的所有文件copy到刚刚所设置的文件夹当中[图1-2 页面内容]这个例子是一个出租汽车的服务中心，其中一部分需要将各个地区出租车公司的联系电话,FAX等信息在网页上发布。下面的工作就是用Dreamwaver MX来完成了。STEP 2 建立web site:打开Dreamwaver MX，点击Site，选择New Site.[图1-3 新建site]Dreamwaver MX支持两种新建站点模式:(1)Basic:利用向导建立，方便简单，首选。(2)Advanced:比较麻烦但设置的选项比较多，小编推荐先用Basic模式建立，再用Advanced模式来修改下面用Basic模式来新建站点:第一步填写站点名，而后单击next[图1-4 新建站点 basic step1]第二步 选择站点类型。确定是否用服务器端技术。由于本实例用到ASP.NET所以要选择第二个选项，并在下拉框中选择ASP.NET 。[图1-5 选择是否采用服务器端技术]第三步 设置测试站点的属性。选择测试的方式以及放文件的目录, 单击next。[图1-6 测试站点属性设置]第四步 设定站点的URL, 单击next。[图1-7 站点的URL设定]第五步设定共享文件，由于本实例在本级调试，选择第二项，单击next。[图1-8 共享文件设定]剩下的就是站点总结了，单击Done.[图1-9 站点总结]
活用DW的数据导入、排序与美化
有的时候，我们经常需要把客户信息等一些资料发布到网上以便联系，但是随着客户资料的越来越多，你的网上更新是不是也觉得越来越力不从心了呢？这该怎么办？其实，除了用asp、php等这些后台语言来实现快捷更新外，dreamweaver本身就提供了数据导入与排序的方法，这对不懂后台的朋友绝对是个大大的福音。dw也从版本3到最新的mx一直都保留了该功能，可见它的实用之处。下面我们就来见识一下它的功效究竟如何。注：本文以dreameaver MX为例1、 例如我们现在手头有个kehu.txt文件，里面是**公司客户联系单，详细信息如下所示：姓名，性别，职位，电话李明，男，A公司技术人员，87185900李岩，男，B公司经理，80226888王强，男，C公司总工程师，83546790苏林，女，D公司营销人员，87556341陈东东，男，E公司项目主任，87436588
占位图形在DW MX中的应用
“占位图形”顾名思义是在准备好将最终图形添加到 Web 页之前使用的临时图形。使用它可以在没有理想的图形的情况下先行制作Web页面――在需要使用图形的地方插入一个占位图形先“占领”着“地盘”。 (一)插入占位图形 将光标定在需要插入图形的地方；选择：插入>图像占位符即出现图像占位符对话框，如图： 设定好各项参数后点击“确定”即将占位图形插入到了页面中，如图：图： 上面显示了名称和大小。察看源代码发现增加了一个包含空 src 属性的图像标签。 (二)替换占位图形 1.当页面设计好以后，我们就需要使用正确的图形来替换到占位图形。在用DreamweaverMX（简称DWMX）中选中占位图形并打开属性面板，点击“创建”按钮。则DWMX就会启动FireworksMX（简称FWMX）并自动建立好一个和占位图形同样大小的空白画布等待图形设计师的“操刀制作”。 2.在FWMX中制作好所需的图形并且优化过后，点击画布上边的“完成”按钮。 在出现的“另存为”对话框中给存档的png文件取一个文件名然后保存（这样便于以后修改）；在随后弹出的“导出”对话框中做好相关设定后“保存”该文件。 3.切换至DWMX，我们发现占位图形已经被替换了。察看代码，发现已经自动插入了src的地址，其余的大小，alt等参数均保持原状，如图： 呵呵，是不是很方便呀？从这里我们也可以体会到“三剑客”的配合真的是无与伦比! (三)需要注意的 如果在FWMX中绘制了热区并添加了链接，FWMX将不会删除已经在DWMX中添加到图像占位符的链接；但是如果在FWMX中的图像上绘制了一个切片，则将在替换占位图形时删除DWMX文档中的链接。
打造超酷网页右键菜单二法
在一般的网页中，IE浏览器的默认右键菜单是一成不变的固定模式，大部分网友浏览网页时对它的利用率不高。对专业的网页设计师来说，如果能将右键菜单设计成个性化的内容，样式该是多么的酷和方便。 试想一下，用户在你的网站上一点右键，就是你精心组织的“链接”、“发信”，甚至包含了缤纷的交互式Flash动画！如图1――别流口水了，下面咱们就解解馋，看看如何制作吧：)。 右键菜单的改造，我有两种途径(其实，本质是一样的，都是JavaScript的东西)。 第一种方法是较早的，把下列源代码复制到网页中HTML文件的中即可。 < style> < !-- .skin0 { position:absolute; text-align:left; width:200px; border:2px solid black; background-color:menu; font-family:Verdana; line-height:20px; cursor:default; visibility:hidden; } .skin1 { cursor:default; font:menutext; position:absolute; text-align:left; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; width:120px; background-color:menu; border:1 solid buttonface; visibility:hidden; border:2 outset buttonhighlight; } .menuitems { padding-left:15px; padding-right:10px; } --> < /style> < SCRIPT LANGUAGE="JavaScript1.2"> < !-- Web Site: http://www.painting-effects.co.uk --> < !-- This script and many more are available free online at --> < !-- The JavaScript Source!! http://javascript.internet.com --> < !-- Begin var menuskin = "skin1"; // skin0, or skin1 var display_url = 0; // Show URLs in status bar? function showmenuie5() { var rightedge = document.body.clientWidth-event.clientX; var bottomedge = document.body.clientHeight-event.clientY; if (rightedge < ie5menu.offsetWidth) ie5menu.style.left = document.body.scrollLeft + event.clientX -ie5menu.offsetWidth; else ie5menu.style.left = document.body.scrollLeft + event.clientX; if (bottomedge < ie5menu.offsetHeight) ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight; else ie5menu.style.top = document.body.scrollTop + event.clientY; ie5menu.style.visibility = "visible"; return false; } function hidemenuie5() { ie5menu.style.visibility = "hidden"; } function highlightie5() { if (event.srcElement.className == "menuitems") { event.srcElement.style.backgroundColor = "highlight"; event.srcElement.style.color = "white"; if (display_url) window.status = event.srcElement.url; } } function lowlightie5() { if (event.srcElement.className == "menuitems") { event.srcElement.style.backgroundColor = ""; event.srcElement.style.color = "black"; window.status = ""; } } function jumptoie5() { if (event.srcElement.className == "menuitems") { if (event.srcElement.getAttribute("target") != null) window.open(event.srcElement.url, event.srcElement.getAttribute("target")); else window.location = event.srcElement.url; } } // End --> < /script> < div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();"> < div class="menuitems" url="javascript:history.back();">返回< /div> < div class="menuitems" url="http://javacool.3322.net">回首页< /div> < hr> < div class="menuitems" url="http://www.163.com">网易< /div> < div class="menuitems" url="http://www.sohu.com">搜狐< /div> < hr> < div class="menuitems" url="http://www.sina.com.cn">新浪< /div> < div class="menuitems" url="http://www.yahoo.com.cn">雅虎< /div> < /div> < script language="JavaScript1.2"> if (document.all && window.print) { ie5menu.className = menuskin; document.oncontextmenu = showmenuie5; document.body.onclick = hidemenuie5; } < /script> 其效果如下图: 第二种方法是利用Dreamweaver的一个插件――Right_Click_Menu_Buil-der,可以在http://www.macromedia.com下载得到。安装后，可在Dreamweaver的“Command”菜单的下面找到“Right Click Menu Builder”命令。 点击该命令，便出现了一个如图3所示的设置框。主要有两部分内容：“Menu”和“Styles”。 Menu是设置功能的，超级链接、发信链接都在这里设置，在这里最多可以设10项连接。此选择框中“Menu Text”是你右键中将显示的文字(换成中文吧)；在“URL”中写入相应的链接路径；“Target”决定是否是新窗口或是用现在的窗口展示链接的内容，填入“Blank”就是在新窗口显示，和Dreamweaver的“Target”设置是一样的。 Styles是负责设置菜单外形的，有两种选择:img src="http://tech.china.com/zh_cn/netschool/homepage/167718/20020521/images/11257823_63732.jpg"> “Windows Type Menu(Default)” 是默认项――最朴实的样子，熟悉的Windows风格； “Custom Menu” 自定意菜单，如果你选择了这一项，还要对下面的内容进行设置： “Menu Width”，菜单的宽度； “Font”，字体； “Font Color”，字体颜色； “Font Side”，字体大小； “Background Color”、“Background Image”，背景色及背景图； 还有“Cursor”，是用来选择鼠标样式的。 以上的这些设定好了，就可以点“Add”生成效果了。预览一下,不错吧? 那怎样加入Flash呢？是这样做的：在网页中加一个“Table”，它的“W”宽建议设为：“100%”，这样会方便你下面添加的各种元素的定位。好，在该“Table”中插入Flash的SWF文件，位置设成“居中”(主要是方便定位，当然具体问题具体分析，自己多尝试一下会有心得的)。 小技巧：Flash动画不妨做成有交互链接的那种，为什么呢？这样你就可以加任意数量的超级链接。插件自身有最多10条的限制，用了Flash可就全解决啦!^_^
DreamwaverMX与ASP.NET四
4.利用DataList组件显示数据集相关介绍:DataList是功能强化的Repeater控件，除了有Repeater原有的功能外，还可以设定单行显示数据的笔数(RepeatColumn)，被选项样板(SelectedItemTemple)，编辑项样板(EditTemplate)。但是DataList会将输出的数据安排在表格中输出，而Repeater则更忠于样板的定义，不会添加任何HTML标记。(注意：为了能显示代码，以下所有代码都在“<”之后和“>”之前加了空格，不便之处请多原谅！)STEP 1建立页面我们要建立的页面就如下图所示。当我们点击Detail的超级链接时就会弹出详细资料，正如第一项中所示。点击Close时，详细资料就会关闭，恢复原来的样子。[图 1-1 页面演示]先选择要显示的数据。为了显示欧洲的数据(即Region_ID=3)，我们可以在Dataset设定中选定筛选Region_ID=3的数据。[图 1-2数据筛选]用Datalist控件做一个数据简要显示的页面。我们先建立一个无数据的页面。然后选择Application面板中的Server behavior。单击”+”，选择DataList。[图1-3 DataList选择页面]在弹出来的对话框中，我们可以根据需要对应的地方加入页面模板。u Header: 表头模板u Item: 数据项模板u Alternating Item: 交叉显示模板u Edit Item: 修改模板((默认是没有显示出来的，必须通过事件响应才可以显示)u Selected Item: 选中后的显示的模板(同样须通过事件响应才可以显示)u Separator: 分隔模板u Footer: 表底模板[图 1-4 编辑DataList对话框]我们可以通过往Contents中添加HTML代码制作所需的模板，同时也可以通过单击 按钮来添加数据项。单击次按钮后，就会弹出数据项对话框让你选择所需的数据。并在Contents输入框中加入< %# DataBinder.Eval(Container.DataItem, "数据项") % >的代码用于显示数据。[图1-5 添加数据项]为了达到预览的效果，首先在Header中加入代码:Location Name。用以显示标题。在Item中加入代码: < %# DataSet1.FieldValue("LOCATION_NAME", Container) % >，用Location_name来做每一项的标题。在Alternating Item中加入代码< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >< /font >以不同的字体颜色来显示数据。虽然Selected Item并不能马上显示，但是我们还应写下代码，以备以后调用。如下：Address:< %# DataSet1.FieldValue("ADDRESS", Container) % >< BR >City:< %# DataSet1.FieldValue("CITY", Container) % >< BR >Telephone:< %# DataSet1.FieldValue("TELEPHONE", Container) % >< BR >单击OK，接着预览页面，下图就是以上代码的效果了。我们等一下会去实现显示出Selected Item项的效果的。[图1-6 最初预览]DataList区别Repeater的一个不同点就是可以设置单行显示多笔数据，在DataList编辑窗口中可以进行设置。[图 1-7 设置单行显示多笔数据]选择Use Line Breaks项就只是有一个< BR >标记进行分开数据。选择Use a Table则是以表格的形式输出，而且可以通过设置Table Columns来确定单行显示数据的笔数。STEP2 编写代码Selected Item时需要通过事件来显示的，所以我们需要建立按钮以启动事件。j添加LinkButton,用以产生事件。将光标移到源代码窗口的< ItemTemplate >与< /ItemTemplate >中，单击more tags ，在弹出的对话框中选择asp:LinkButton控件。[图2-1 Tag Chooser对话框]在编辑LinkButton对话框中，设置LinkButton的属性。在ID输入框中输入名称:Detail，在Command Name中输入”Detail”用于产生事件的命令，在Text对话框中输入Detail(将会显示出来) [图 2-2 LinkButton编辑框]然后再Layout中选择所需的颜色，单击OK，即可生成代码。< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >为了在交叉显示中也具有这样的效果，我们需要在< AlternatingItemTemplate >与< /AlternatingItemTemplate >中也插入相同的代码。同时为了关闭弹出来的选择后样板，同样需要产生命令，所以要添加多一个Linkbutton。这样就需要在< SelectedItemTemplate >< /SelectedItemTemplate >中插入代码：< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >k有了命令，我们还需要使用程序来解释这个命令。其实过程并不复杂，只需要加入一小部分代码。在< head >< /head >中添加如下代码:< script language="VB" runat="server" >Sub DataList_ItemCommand(sender as Object,e as DataListCommandEventArgs)If e.CommandSource.CommandName="Detail" ThenDataList1.SelectedIndex=e.Item.ItemIndex ElseIf e.CommandSource.CommandName="Close" ThenDataList1.SelectedIndex=-1End IfDataList1.DataBind()End sub< /script >程序可以取得你点击LinkButton的命令(CommandName)来判断要执行的程序。当DataList的SelectedIndex属性设定为e.Item.ItemIndex，就会打开SelectedItemTemplate页。如果命令为Close则DataList的SelectedIndex属性设定为-1(即没有数据项被选中)，则DataList会用ItemTemplate项样板显示此一项数据。在< asp:DataList >中还要添加代码段OnItemCommand="DataList_ItemCommand"以声明与程序段DataList_ItemCommand的关系。按”F12”预览，页面就会显示预想的效果。[图 2-3 最终预览版]附上主要程序段的源代码:Sub DataList_ItemCommand(sender as Object,e as DataListCommandEventArgs)If e.CommandSource.CommandName="Detail" ThenDataList1.SelectedIndex=e.Item.ItemIndex ElseIf e.CommandSource.CommandName="Close" ThenDataList1.SelectedIndex=-1End IfDataList1.DataBind()End sub < form runat="server" >< asp:DataList id="DataList1" runat="server" RepeatColumns="1" RepeatDirection="Vertical" RepeatLayout="Flow" DataSource="< %# DataSet1.DefaultView % >"OnItemCommand="DataList_ItemCommand" >< HeaderTemplate >Location Name < /HeaderTemplate >< ItemTemplate >< %# DataSet1.FieldValue("LOCATION_NAME", Container) % > < asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /ItemTemplate >< AlternatingItemTemplate >< font color="#0000FF" >< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >< /font >< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >< SelectedItemTemplate >Address: < %# DataSet1.FieldValue("ADDRESS", Container) % >< BR >City: < %# DataSet1.FieldValue("CITY", Container) % >< BR >Telephone: < %# DataSet1.FieldValue("TELEPHONE", Container) % >< BR >< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >< /SelectedItemTemplate >< /asp:DataList > < /form >DataList还有Edit Item的样板，主要用于数据更新。此书会在后面的部分介绍到。