新闻管理模块设计-GridView控件与ADO.NET高级应用

1、动态网页设计教程美工与技术徐延章 编著第15章 新闻管理模块设计GridView控件与ADO.NET高级应用第15章 新闻管理模块设计GridView控件与ADO.NET高级应用新闻管理模块是一个综合新闻和内容管理的模块，是基于B/S模式的网络信息管理系统，新闻管理提供新闻的发布，审核，删除，浏览等功能，是大多数网站后台的主要功能模块，通过设计新闻管理模块，读者可以延伸设计例如用户管理、信息管理等模块。将美工与技术一起讲在本章也有明显的体现，本章美工设计采用流行的DIV+CSS模式设计，紧跟时代潮流，体现技术的要求。动态网页设计教程美工与技术机械工业出版社Company Logo第15章 新闻

2、管理模块设计GridView控件与ADO.NET高级应用动态网页设计教程美工与技术机械工业出版社15.1 新闻管理界面的设计115.2 新闻管理数据库的设计215.3 新闻管理功能的实现GridView控件的使用315.4 新闻发布功能的实现415.5 新闻浏览功能的实现515.6 新闻管理模块界面的美化2615.7 新闻管理模块高级设计ADO.NET数据操纵7Company Logo15.1 新闻管理界面的设计新闻管理模块主要包括新闻管理、新闻发布、新闻浏览等页面，我们在一致性原则的指导下，进行新闻管理界面的美工设计。动态网页设计教程美工与技术机械工业出版社Company Logo15.1.

3、1 美工的界面设计1.新闻管理界面动态网页设计教程美工与技术机械工业出版社Company Logo15.1.1 美工的界面设计1.新闻管理界面动态网页设计教程美工与技术机械工业出版社Company Logo15.1.1 美工的界面设计2.新闻发布界面动态网页设计教程美工与技术机械工业出版社Company Logo15.1.1 美工的界面设计2.新闻发布界面动态网页设计教程美工与技术机械工业出版社Company Logo15.1.2 技术如何实现新闻管理功能主要利用GridView控件结合数据源对象实现，利用数据源控件的查询、修改和删除语句，通过GridView控件按钮实现。GridView控件

4、通过表格形式显示数据，通过设置GridView控件的数据源，GridView控件每列显示一个字段，每行显示一条记录，同时支持数据的编辑、排序和分页的功能。需要说明的是，GridView控件不支持插入记录的功能。动态网页设计教程美工与技术机械工业出版社Company Logo15.2 新闻管理数据库的设计新闻管理模块是典型的数据库操作的应用，因此在设计时首先要对新闻数据库进行设计，建立数据库并设计数据表，提供程序对数据的访问支持。动态网页设计教程美工与技术机械工业出版社Company Logo15.2.1 数据库的建立打开SQL Server 2005，从左侧对象资源管理其中，选择数据库选项，单

5、击鼠标右键，选择新建数据库，设置数据库名称为“NewsDB”。动态网页设计教程美工与技术机械工业出版社Company Logo15.2.2 数据表的建立打开新闻数据库“NewsDB”，选择“表”选项，单击鼠标右键，选择“新建表”，输入字段“NewsID”，在列属性中设置数据类型为int型，设置标识规范为是，从而使字段能够自动编号。单击工具栏中的设置为主键按钮 ，将该字段作为主键。然后按照表输入其它字段，单击保存按钮，将表命名为“News”。动态网页设计教程美工与技术机械工业出版社Company Logo15.2.3 数据表数据的添加在对象资源管理器中，单击News表，单击鼠标右键，选择打开表，

6、手动输入数据，注意输入完一条记录，按键确认。动态网页设计教程美工与技术机械工业出版社Company Logo15.3 新闻管理功能的实现GridView控件的使用新闻管理功能中重要的就是表格形式的新闻条目的显示，提供新闻修改、删除、浏览的超级链接。GridView控件是专门为表格数据设计的控件，提供对表格形式数据操作的多项功能。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示1.新闻界面的建立打开Visual Studio .net 2008，选择菜单“文件|新建|网站”，在“新建网站”对话框中，设置网站的位置为“D:news”，程序自动新建Defaul

7、t.aspx文件，选择“设计”视图。从左侧工具栏中选择“数据”组中的“GridView”控件，拖动到设计视图中。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示从控件右侧的智能标记选项中选择“自动套用格式”，可以设置控件的显示样式，可以单击“移除格式设置”，取消格式的应用，这里选择一种格式后单击“确定”按钮。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示1.新闻界面的建立从控件右侧智能标记中“选择数据源”选项中选择“新建数据源”，出现数据源设置对话框，在这里可以设置数据源的类型，这里选择“数据库”，系统会自动为数

8、据源对象命名“SqlDataSource1”，单击确定按钮。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示1.新闻界面的建立在选择数据连接对话框中单击“新建连接”按钮，设置服务器为（local）或者为.（半角字符点），用户名为sa，密码为111111，选择数据库为“NewsDB”。读者可以根据自己设置的密码输入密码。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示1.新闻界面的建立此时已经设置好连接的数据字符串，单击下一步按钮，在出现的对话框中提示我们是否要把刚才的连接字符串保存到配置文件中，选择“是” 。这样如

9、果再建立连接，就可以直接从连接中选择，不必重新设置添加连接。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示1.新闻界面的建立选择下一步，进入配置SQL 语句对话框，选择表为News，字段为NewsID、Title、NewsDate、Author。选择右侧的“ORDER BY”按钮，添加排序，设置排序字段为“NewsDate”，降序排列，。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示1.新闻界面的建立单击确定后选择下一步，此时可以单击“测试查询”按钮，显示选择出的数据如图所示。动态网页设计教程美工与技术机械工业

10、出版社Company Logo15.3.1 新闻的显示1.新闻界面的建立单击完成回到设计界面，出现相应的数据显示效果，如图所示。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示1.新闻界面的建立单击调试按钮，浏览器中效果如图所示。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示2.列的编辑选择GridView控件，在右侧的智能标记选项中选择“编辑列” 。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示2.列的编辑从左侧下方选定的字段中单击“NewsID”字段，在右侧修改属性H

11、eaderText（标题文本）为“编号”，如图所示。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示2.列的编辑同样修改Title的HeaderText属性为“标题”，Author的HeaderText属性为“发布人”，NewsDate的HeaderText属性为“日期”，单击确定。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示3.超级链接列的增加选择GridView智能标记中的添加新列选项，设置添加字段对话框中，选择字段类型为HyperLinkField（超级链接字段），超级链接文本为指定文本“查看详细”，超链

12、接URL选项中从数据字段获取URL选择“NewsID”，URL格式字符串为“newsdetail.aspx?newsid=0”，这里的0代表参数NewsID，这样可以将每条记录的主键连接到每个超级链接中，形成变化的超级链接，从而传递查询的参数，以备newsdetail.aspx这个新闻浏览的页面显示。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示3.超级链接列的增加动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示3.超级链接列的增加动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻

13、的显示3.超级链接列的增加设计指导：这里我们也可以在插入超级链接字段对话框中设置页眉文本为标题，超链接文本为从数据字段获取文本，然后选择Title。然后删除原始的标题字段，将新添加的超级链接字段左移。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.1 新闻的显示4.命令按钮列的增加选择GridView智能标记中的添加新列选项，设置添加字段对话框中，选择字段类型为CommandField（命令按钮字段），页面文本为“编辑”，按钮类型为“Link”（超级链接形式），命令按钮选择“删除、编辑/更新、显示取消按钮”。动态网页设计教程美工与技术机械工业出版社Company Lo

14、go15.3.1 新闻的显示5.分页的启用选择GridView控件，选择智能标记中的启用分页，如果记录不足10条，将不显示下面的分页链接。可以通过修改GridView的PageSize属性修改每页的记录条数。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.2 新闻的编辑通过数据源控件的修改功能实现新闻的编辑，选择数据源控件，选择属性中的UpdateQuery，单击右侧的按钮。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.2 新闻的编辑在命令和参数编辑器中输入修改命令：update News set Title=Title,Author=Au

15、thor,NewsDate=NewsDate where NewsID=NewsID单击刷新参数，单击参数NewsID，设置其参数源为控件“Control”，ControlID为“GridView1”，依次设置其它参数为同样的属性。动态网页设计教程美工与技术机械工业出版社Company Logo15.3.2 新闻的编辑动态网页设计教程美工与技术机械工业出版社Company Logo15.3.2 新闻的编辑设计指导：如果希望某个字段不需修改，除了在SQL的更新命令中去除更新语句外，还需要把GridView控件的该字段的Readonly属性设置为True，即设置为只读，这样单击编辑时，就不会出现文

16、本框，而是直接显示信息了。例如要求不能修改发布人，即发布人设置为只读，需要选择GridView控件，在右上角的智能标记中选择“编辑列”命令，在字段编辑对话框中选择“发布人”字段，修改右侧属性ReadOnly为True，如图15-34所示。然后选择数据源控件的UpdateQuery属性，取消Author项的修改，修改SQL语句为：update News set Title=Title, NewsDate=NewsDate where NewsID=NewsID动态网页设计教程美工与技术机械工业出版社Company Logo15.3.3 新闻的删除通过数据源控件的删除功能实现新闻的删除，选择数据源

17、控件，选择属性中的DeleteQuery，单击右侧的按钮，在命令和参数编辑器中输入修改命令：delete from News where NewsID=NewsID单击刷新参数，单击参数NewsID，设置其参数源为控件“Control”，ControlID为“GridView1”。动态网页设计教程美工与技术机械工业出版社Company Logo15.4 新闻发布功能的实现新闻发布实现新闻信息以及附件和图片等信息的提交，使新闻记录需要插入数据库中，新闻图片和附件需要上传到服务器，并将图片和附件的名称记录在该新闻记录中。动态网页设计教程美工与技术机械工业出版社Company Logo15.4.1

18、新闻发布界面制作在右侧解决方案管理器中单击网站分支（D:news），单击鼠标右键，选择添加新项，或者选择菜单“文件|新建|文件”，选择类型为Web窗体，名称为“NewsAdd.aspx”。打开设计视图，输入提示文字，拖动工具栏标准控件组中相应的控件（TextBox，FileUpload，Button，Label）到设计视图，调整标题框的宽度，设置内容文本框的TextMode属性为MultiLine，并调整其宽度与高度，修改Label控件的Text属性为空，两个上传控件后面的Label用于提示上传错误信息，按钮后面的Label控件用于显示发布提示。动态网页设计教程美工与技术机械工业出版社Comp

19、any Logo15.4.1 新闻发布界面制作动态网页设计教程美工与技术机械工业出版社Company Logo15.4.1 新闻发布界面制作这里我们可以对用户输入的信息进行非空验证，这里设计标题的非空验证。从左侧工具栏中选择验证组中的“RequiredFieldValidator”，拖动到标题文本框后面，修改其属性ErrorMessage为“请输入标题”，ControlToValidate属性为“TextBox1”（标题文本框）。动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计1.准备工作完成了新闻发布界面的设计，我们进行代码的编写，首先我们新建两

20、个文件夹upimage和upfile，用于存放用户上传的图片与附件，在右侧解决方案管理器中单击网站分支（D:news），单击鼠标右键，选择添加新项，选择文件夹，修改文件夹的名字为“upimage”，同样添加upfile文件夹。动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计2.插入数据基本功能的实现设计思路：先设计完成基本的功能数据的插入，然后进行逐步完善，验证用户信息的合法性，考虑文件上传的限制问题，最后实现完善的程序。程序设计从简单到复杂，逐步深入与完善，以此来体会程序开发的每一步。动态网页设计教程美工与技术机械工业出版社Company Log

21、o15.4.2 新闻发布代码设计在发布按钮（Button1）的单击事件Button1_Click中输入插入数据的代码如下： /下面代码是建立数据库连接 String constr = data source=(local);database=NewsDB;user id=sa;password=111111; SqlConnection conn = new SqlConnection(constr); conn.Open(); /下面代码是定义命令 SqlCommand cmd = conn.CreateCommand(); cmd.CommandText = insert into New

22、s(Title,Author,NewsDate,NewsBody,NewsPhoto,NewsFile) values(Title,Author,NewsDate,NewsBody,NewsPhoto,NewsFile); /下面代码给命令参数赋值 cmd.Parameters.Add(Title, SqlDbType.NVarChar).Value =TextBox1.Text; 动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计cmd.Parameters.Add(NewsBody, SqlDbType.Text).Value =TextBox2

23、.Text; cmd.Parameters.Add(Author, SqlDbType.NVarChar).Value =TextBox3.Text; cmd.Parameters.Add(NewsDate, SqlDbType.DateTime).Value = DateTime.Now; cmd.Parameters.Add(NewsPhoto, SqlDbType.NVarChar).Value = ; /这里先设置为没有图片 cmd.Parameters.Add(NewsFile, SqlDbType.NVarChar).Value = ; /这里先设置为没有附件 /执行命令 cmd.

24、ExecuteNonQuery(); conn.Close(); /显示信息Label3.Text = 新闻发布完毕;动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计/清空文本框内容 TextBox1.Text = ; TextBox2.Text = ; TextBox3.Text = ;动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计测试程序，输入数据，注意先不选择附件和图片。动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计3.文件上传功能的实现在设计文件

25、上传功能时，有这样一个要求，新闻可以没有附件或图片，如有图片或者附件，要求新闻图片是网页支持的图片格式（JPG、GIF、PNG、BMP）且大小不能超过10M，新闻的附件大小不能超过100M。为此，两个文件上传空间后面的标签用于提示错误信息，如新闻图片格式不正确，新闻图片太大，附件太大等。同时我们要注意，只有当图片和附件都满足要求时（新闻可以没有图片或附件，但如果有就要满足要求），才完成数据的插入操作。动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计设计思路：初始化变量与信号量 String upfilename = ; /定义上传附件的附件名Str

26、ing upimagename = ; /定义上传图片的文件名 String upfilename2 = ; /定义上传附件文件的扩展名String upimagename2 = ; /定义上传图片文件的扩展名String upfilepath = Server.MapPath(upfile); /定义上传附件的路径String upimagepath = Server.MapPath(upimage); /定义上传图片的路径 动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计/通过时间拼出文件名为当前时间的 年月日时分秒毫秒 DateTime ct

27、ime = DateTime.Now; /获取当前时间 String timestring = ;/定义时间字符串 timestring=ctime.Year.ToString() + ctime.Month.ToString() + ctime.Day.ToString();/年月日拼接 timestring=timestring+ctime.Hour.ToString() + ctime.Minute.ToString() + ctime.Second.ToString() + ctime.Millisecond.ToString();/小时分钟秒毫秒拼接/定义信号量记录上传图片和附件状态

28、int upfilestyle = 0; /定义上传附件的状态信号量：0为默认状态，表示没有附件，1表示有附件且符合要求，2表示有附件但不符合要求int upimagestyle = 0; /定义上传图片的状态信号量：0为默认状态，表示没有图片，1表示有图片且符合要求，2表示有图片但不符合要求动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计检查上传附件是否存在（检查附件文件大小，记录信号量）if (FileUpload1.PostedFile.ContentLength 104857600) /如果文件大小大于100M Label1.Text =

29、上传附件文件太大; upfilestyle = 2; /记录上传附件错误else upfilestyle = 1; /记录上传附件成功动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计检查上传图片是否存在（检查图片文件大小，记录信号量；检查图片文件格式，记录信号量）if (FileUpload2.PostedFile.ContentLength 10485760) /10M Label2.Text = 图片文件太大; upimagestyle = 2; /记录错误状态 /如图大小满足要求，判断文件格式else if (upimagename2.ToL

30、ower() = .jpg | upimagename2.ToLower() = .gif | upimagename2.ToLower() = .png | upimagename2.ToLower() = .bmp) upimagestyle = 1; /记录状态为成功 动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计/如果执行到这里，只能是大小满足要求，但文件格式不正确else Label2.Text = 文件格式不正确; upimagestyle = 2; /记录错误状态 动态网页设计教程美工与技术机械工业出版社Company Logo15

31、.4.2 新闻发布代码设计根据附件信号量upfilestyle和图片信号量upimagestyle的值（0表示没有文件，1表示有文件且格式与大小正确，2表示文件格式不正确或大小不正确），判断是否有附件与图片、文件格式与大小是否符合要求。只有附件信号量upfilestyle和图片信号量upimagestyle的值同时在正确范围时（小于2，即0或1），才进行文件的上传操作，同时完成在数据库中插入新闻记录的操作。也就是说，图片和附件可以没有，但有就要符合要求，即图片满足格式正确、大小在规定范围，附件大小在规定范围，才能进行上传操作。动态网页设计教程美工与技术机械工业出版社Company Logo15

32、.4.2 新闻发布代码设计/根据信号量取值决定是否执行文件上传与数据插入操作if (upfilestyle 2 & upimagestyle 2) /只有上传附件信号量和图片信号量都满足要求时 if (upfilestyle = 1) /如果上传附件状态为1，即有文件且合法，上传文件，记录文件名 else /如果为0，则没有附件文件，记录文件名为空 动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计 if (upimagestyle = 1) /如果上传图片状态为1，即有文件且合法，上传文件，记录文件名 else /如果为0，则没有图片文件，记录文件

33、名为空 /执行插入数据代码，别忘了修改命令参数中的图片和附件的取值 完整代码参考书中或光盘中的内容 动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计调试程序，选择一个大文件，测试出现无法显示该页面的提示页面，原因在于配置文件默认是上传4M以下的文件，因此需要在配置文件中web.config文件来改变应用程序上传限制。在 分支中加入：这里maxRequestLength设置上传文件大小，单位是kb，executionTimeout允许执行请求的最大秒数, 即超时时间，单位：秒，此功能必须在Compilation元素中Debug属性为false时才生效

34、。再次选择文件，上传之后刷新解决方案资源管理器，发现附件与图片上传成功，。动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计4.信息处理与页面完善我们发现新闻发布成功之后，仍然存在文件格式不正确的提示，发布的数据在数据库中新闻主体内容的信息完全连接到了一起，没有换行的标志，这样显示新闻时必然只有一个段落，与提交的信息不同，因此需要修改。再有就是信息的验证，对于客户端的浏览器由于安全性而对JavaScript有不同的设置，因此应在提交信息后通过进行验证。动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计解决信

35、息换行的问题，需要新建一个公用函数texttohtml：public string texttohtml(string chr) if (chr = null) return ; /如果字符串为空，返回空值 chr = Server.HtmlEncode(chr); /对字符串进行HTML编码 chr = chr.Replace(, <);/替换字符串中的小于号, >);/替换字符串中的小于号为HTML的大于号> chr = chr.Replace( , );/替换字符串中的空格为HTML的空格 chr = chr.Replace(n, );/替换字符串中的换行为HTML的换行 r

36、eturn (chr); /返回加工后的字符串 动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计将该函数放在程序中与其它事件并列，这里放在Page_Load之后。 动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计然后将Button1_Click事件中插入数据的参数cmd.Parameters.Add(Title, SqlDbType.NVarChar).Value = TextBox1.Text;cmd.Parameters.Add(NewsBody, SqlDbType.Text).Value = T

37、extBox2.Text;cmd.Parameters.Add(Author, SqlDbType.NVarChar).Value = TextBox3.Text;修改为cmd.Parameters.Add(Title, SqlDbType.NVarChar).Value =texttohtml(TextBox1.Text);cmd.Parameters.Add(NewsBody, SqlDbType.Text).Value = texttohtml(TextBox2.Text);cmd.Parameters.Add(Author, SqlDbType.NVarChar).Value =tex

38、ttohtml(TextBox3.Text);动态网页设计教程美工与技术机械工业出版社Company Logo15.4.2 新闻发布代码设计对于页面合法性与提示信息，修改Button1_Click程序为：if (Page.IsValid)/进行页面合法性验证 /清除提示内容 Label1.Text = ; Label2.Text = ;Label3.Text = ;原程序内容else Label3.Text = 请填写新闻标题;动态网页设计教程美工与技术机械工业出版社Company Logo15.5 新闻浏览功能的实现新闻浏览是根据用户选择的新闻，打开新闻详细内容的界面，显示新闻的具体内容，同

39、时将新闻图片和附件以适当的形式展示出来。动态网页设计教程美工与技术机械工业出版社Company Logo15.5.1 新闻浏览界面制作打开Visual Studio 2008，添加新项，选择Web窗体，文件名为newsdetail.aspx，放置Label用于显示新闻标题（lbltitle）、发布人(lblauthor)、发布日期(lbldate)、新闻内容(lblbody)，这里对每个Label控件进行了改名，并设置其Text属性为空，放置Image控件(Image1)用于显示新闻图片，最后放置一个Hyperlink控件(Hyperlink1)，修改其Text属性为“下载附件”用于下载新闻附

40、件。动态网页设计教程美工与技术机械工业出版社Company Logo15.5.2 新闻浏览代码设计在Page_Load事件中进行代码设计，这里为了防止用户盗链，即没有通过新闻管理页面而直接输入网址产生错误，通过判断请求参数来进行处理。protected void Page_Load(object sender, EventArgs e) if (Request.QueryStringnewsid != null) /如果请求页面 / 存在请求参数，则进行数据读取 else Response.Redirect(error.aspx); /页面定位到出错界/面?，读者可以自行设计错误页面。 动态网

41、页设计教程美工与技术机械工业出版社Company Logo15.5.2 新闻浏览代码设计然后对if分支进行程序完善，进行数据库连接，定义sql命令，读取数据，进行判断。详细代码参考书中内容。protected void Page_Load(object sender, EventArgs e) if (Request.QueryStringnewsid != null) /如果请求页面存在请求/参数，则进行数据读取 String constr = data source=(local);database=NewsDB;user id=sa;password=; SqlConnection co

42、nn = new SqlConnection(constr);/定义连接对/象 conn.Open(); /打开连接 /下面代码是定义命令 SqlCommand cmd = conn.CreateCommand(); cmd.CommandText = select * from News where NewsID=NewsID; 动态网页设计教程美工与技术机械工业出版社Company Logo15.5.2 新闻浏览代码设计/下面代码给命令参数赋值 cmd.Parameters.Add(NewsID, SqlDbType.NVarChar).Value =Request.QueryString

43、newsid.ToString() ; /执行命令 SqlDataReader rd = cmd.ExecuteReader();/定义阅读器对象接收/命令执行的结果（数据集合） if (rd.Read() lbltitle.Text = rdTitle.ToString(); /新闻标题 lblauthor.Text = rdAuthor.ToString(); /发布人 lbldate.Text = rdNewsDate.ToString(); /发布日期 lblbody.Text = rdNewsBody.ToString();/新闻内容 if (rdNewsPhoto.ToString

44、() != ) /新闻图片存在 Image1.Visible = true; /显示图像控件 Image1.ImageUrl = /upimage/ + rdNewsPhoto.ToString();/指定路径 动态网页设计教程美工与技术机械工业出版社Company Logo15.5.2 新闻浏览代码设计else Image1.Visible = false; /隐藏控件 if (rdNewsFile.ToString() != ) /新闻附件存在 HyperLink1.Visible = true; /显示超级链接控件 HyperLink1.NavigateUrl = /upfile/ +

45、rdNewsFile.ToString(); /链接路径 else HyperLink1.Visible = false; /隐藏控件 rd.Close(); /关闭阅读器 conn.Close(); /关闭连接 动态网页设计教程美工与技术机械工业出版社Company Logo15.5.2 新闻浏览代码设计else rd.Close(); conn.Close(); Response.Redirect(error.aspx); /页面定位到出错页面。 else Response.Redirect(error.aspx); /页面定位到出错页面，读者可/以自行设计错误页面。 动态网页设计教程美工

46、与技术机械工业出版社Company Logo15.5.2 新闻浏览代码设计直接调试程序，显示error页面无法找到，因为我们没有建立这个页面，打开新闻管理页面，再调试程序，选择一条新闻，单击详细内容。动态网页设计教程美工与技术机械工业出版社Company Logo15.6 新闻管理模块界面的美化新闻管理模块的界面美化采用流行的DIV+CSS的布局方式进行美化，需要结合Visual Studio 2008和Dreamweaver CS5进行美化设计，使用Dreamweaver CS5设计布局页面，使用Visual Studio 2008测试美化效果。动态网页设计教程美工与技术机械工业出版社Com

47、pany Logo15.6.1 新闻管理界面的美化1.统一界面的设计通过前面的设计，我们得到了网页新闻显示界面，而这只是从技术的角度实现，真正要到成品还需要进一步的美化。我们采用统一的布局来实现界面效果。实际的工作中，存在这样的问题，美工已经把新闻管理的界面设计完毕，并设计成html格式的文件，往往这是很常见的情况，我们可以直接采用这个文件进行修改，形成模板，然后将其它的页面套用上去，这样的操作有助于我们实际操作能力的提高。这里设置了网页的统一框架，而将网页内容放到右侧中间的空白区域中，体现网页设计一致性原理。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管

48、理界面的美化1.统一界面的设计动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化1.统一界面的设计实现统一框架有两种方法：使用框架结构嵌入网页。使用母版。通常情况下，使用框架结构比较灵活，但要注意内容溢出时的滚动条问题，为了不出现滚动条，需要对内容进行修剪或裁切。这里介绍使用框架的方法，母版的方法将在第18章进行介绍。首先在Dreamweaver CS5中设计网页newsadmin.html文件，这个页面可以由美工设计完成，也可以由美工设计完效果图后由技术人员利用Dreamweaver软件实现，注意需要将所用到的图片连同文件夹一起复制到网站文件夹中

49、。设计指导：实际应用中可以将newsadmin.html设计成动态网页newsadmin.aspx，以便于安全性的设置。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化1.统一界面的设计下面进行网站美工的设计制作，首先将配套光盘中“源文件15”中的“News美化前”文件夹复制到D盘，即网站文件夹路径为“D:News美化前”，然后将配套光盘中“源文件15素材”中的所有文件和文件夹复制到“D:News美化前”文件夹中。打开Dreamweaver CS5软件，新建站点“新闻管理”，定义站点文件夹为“D:News美化前”。然后打开站点中的newsadmi

50、n.html文件，单击网页右侧的框架位置，选择菜单“插入|HTML|框架|IFRAME”，得到代码：然后修改代码为：详细步骤请参考配套光盘视频教程中的讲解“视频教程15 新闻管理2-美化.wmv”。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化1.统一界面的设计动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化1.统一界面的设计选择新闻发布和新闻管理图片，设置超级链接的地址：新闻发布：NewsAdd.aspx，目标“mainframe”。新闻管理：Default.aspx，目标“mainframe”

51、。设计指导：一定要选择目标“mainframe”，这是框架的命名，只有选择了目标，单击超级链接后，链接文件才会在目标框架中打开。使用Visual Studio 2008中调试newsadmin.html文件，结果如图所示。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化2.DIV+CSS网页布局我们这里采用流行的DIV+CSS的布局方式对新闻管理页面进行美化。在进行新闻管理页面的美化之前，在Visual Studio 2008中打开“D:News美化前Default.aspx”文件，选择GridView控件，单击智能标记中的“自动套用格式|移除自

52、动套用格式”命令，保存文件。然后，使用Dreamweaver CS5软件打开该文件，在设计视图中红色虚线范围中“即Form表单”单击鼠标，单击插入面板中的“插入Div标签”（或选择菜单“插入|布局对象|Div标签”），在插入Dibble标签对话框中设置插入为“在插入点”，ID为“title”，如图所示。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化2.DIV+CSS网页布局再次在插入面板中单击“插入Div标签”，在插入Div标签对话框中设置插入为“在标签之后”，选择标签为，ID为“datatable” ，插入Div标签后的界面如图所示。动态网页

53、设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化2.DIV+CSS网页布局删除Div标签中的提示信息，在title标签插入图片，图片文件路径为“D:News美化前imagestitlelogo.jpg”和“D:News美化前imagesnewssend.jpg”，将第一个控件（即带有黄色ASP标志的控件GridView1）拖动到datatable标签中，第二个控件（即数据源控件SqlDataSource1）是隐藏的，所以不用处理。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化3.主体body CSS样式设

54、计在Dreamweaver CS5设计视图中，单击鼠标右键，选择“CSS样式|新建”，新建CSS样式，选择标签样式，选择选择器为body，文件位置为新建样式表文件，保存文件名为newscss.css。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化4.标题区域title CSS样式设计新建CSS样式，类型为ID，名称为title。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化5.数据表区域datatable CSS样式设计新建CSS样式，类型为ID，名称为datatable。动态网页设计教程美工与

55、技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化6.表格data CSS样式设计新建CSS样式，类型为“类”，名称为data。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化进入css样式文件中，添加border-collapse:collapse;使表格线呈单线并去除间距，相邻边被合并，选择GridView控件，设置属性面板中css样式为data。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化7.表格标题th CSS样式设计接下来进行表格数据的进一步美化，新建CSS样式

56、，设置规则类型为“复合内容”，选择器名称为.data th，即设置data（表格数据）项目下的th（标题）属性。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化7.表格标题th CSS样式设计动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化8.表格单元格td CSS样式设计新建CSS样式，设置规则类型为“复合内容”，选择器名称为.data td，即设置data（表格数据）项目下的td（单元格）属性，类型属性中设置行高Line-height为26px，区块属性中Text-align（文本对齐）为cen

57、ter居中。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化9.超级链接CSS样式设计我们发现，网页的超级链接显示为默认的蓝色，因此需要修改为和谐的灰色，当鼠标划上去的时候显示红色。新建CSS样式，设置规则类型为“复合内容”，选择器名称为.data a:link,.data a:visited（这里一起设置链接和访问过两种状态，故中间用逗号隔开），设置类型属性中Text-derection（文本修饰）为none（无），即去掉超级链接的下划线，Color为#CCC，即修改颜色为灰色。新建CSS样式，设置规则类型为“复合内容”，选择器名称为.data

58、 a:hover, .data a:active（这里一起设置鼠标划上和激活两种状态），设置类型属性中Text-decoration（文本修饰）为none（无），去掉超级链接的下划线，Color为#F00，即修改颜色为红色。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化9.超级链接CSS样式设计我们发现，网页的超级链接显示为默认的蓝色，因此需要修改为和谐的灰色，当鼠标划上去的时候显示红色。新建CSS样式，设置规则类型为“复合内容”，选择器名称为.data a:link,.data a:visited（这里一起设置链接和访问过两种状态，故中间用逗

59、号隔开），设置类型属性中Text-derection（文本修饰）为none（无），即去掉超级链接的下划线，Color为#CCC，即修改颜色为灰色。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.1 新闻管理界面的美化在Visual Studio中调试：动态网页设计教程美工与技术机械工业出版社Company Logo15.6.2 新闻发布界面的美化新闻发布同样可以CSS样式进行美化，利用DIV进行标题（title）与表单内容（formitem）的分割，标题部分插入图片，后设置底部横线，表单部分利用表格进行版式编排，利用CSS样式进行版式编排与美化。1.附加样式表使用Dr

60、eamweaver软件打开该文件NewsAdd.aspx，在设计视图中单击鼠标右键，选择“CSS样式|附加样式表”选项，在链接外部样式表对话框中选择外部样式表文件为网站中的newscss.css文件。动态网页设计教程美工与技术机械工业出版社Company Logo15.6.2 新闻发布界面的美化2.DIV+CSS布局在网页中（表单标签内）插入Div标签（title、formitems）进行布局。在网页中（表单标签内）插入Div标签（title、formitems）进行布局。删除Div标签中的提示信息和新闻发布文字，在title标签插入两张图片，图片文件路径为“D:News美化前imagesti