新闻管理模块设计GridView控件与ADONE高级应用

动态网页设计教程——美工与技术徐延章编著第15章新闻管理模块设计

——控件与高级应用第15章新闻管理模块设计

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

——控件与高级应用动态网页设计教程——美工与技术机械工业出版社15.1新闻管理界面的设计115.2新闻管理数据库的设计215.3新闻管理功能的实现——控件的使用315.4新闻发布功能的实现415.5新闻浏览功能的实现515.6新闻管理模块界面的美化2615.7新闻管理模块高级设计——数据操纵715.1新闻管理界面的设计新闻管理模块主要包括新闻管理、新闻发布、新闻浏览等页面，我们在一致性原则的指导下，进行新闻管理界面的美工设计。动态网页设计教程——美工与技术机械工业出版社15.1.1美工的界面设计1.新闻管理界面动态网页设计教程——美工与技术机械工业出版社15.1.1美工的界面设计1.新闻管理界面动态网页设计教程——美工与技术机械工业出版社15.1.1美工的界面设计2.新闻发布界面动态网页设计教程——美工与技术机械工业出版社15.1.1美工的界面设计2.新闻发布界面动态网页设计教程——美工与技术机械工业出版社15.1.2技术如何实现新闻管理功能主要利用控件结合数据源对象实现，利用数据源控件的查询、修改和删除语句，通过控件按钮实现。控件通过表格形式显示数据，通过设置控件的数据源，控件每列显示一个字段，每行显示一条记录，同时支持数据的编辑、排序和分页的功能。需要说明的是，控件不支持插入记录的功能。动态网页设计教程——美工与技术机械工业出版社15.2新闻管理数据库的设计新闻管理模块是典型的数据库操作的应用，因此在设计时首先要对新闻数据库进行设计，建立数据库并设计数据表，提供程序对数据的访问支持。动态网页设计教程——美工与技术机械工业出版社15.2.1数数据据库库的的建建立立打开开2005，，从从左左侧侧对对象象资资源源管管理理其其中中，，选选择择数数据据库库选选项项，，单单击击鼠鼠标标右右键键，，选选择择新新建建数数据据库库，，设设置置数数据据库库名名称称为为““””。。动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.2.2数数据据表表的的建建立立打开开新新闻闻数数据据库库““””，，选选择择““表表””选选项项，，单单击击鼠鼠标标右右键键，，选选择择““新新建建表表””，，输输入入字字段段““””，，在在列列属属性性中中设设置置数数据据类类型型为为型型，，设设置置标标识识规规范范为为是是，，从从而而使使字字段段能能够够自自动动编编号号。。单单击击工工具具栏栏中中的的设设置置为为主主键键按按钮钮，，将将该该字字段段作作为为主主键键。。然然后后按按照照表表输输入入其其它它字字段段，，单单击击保保存存按按钮钮，，将将表表命命名名为为““””。。。。动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.2.3数数据据表表数数据据的的添添加加在对对象象资资源源管管理理器器中中，，单单击击表表，，单单击击鼠鼠标标右右键键，，选选择择打打开开表表，，手手动动输输入入数数据据，，注注意意输输入入完完一一条条记记录录，，按按<>键键确确认认。。动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.3新新闻闻管管理理功功能能的的实实现现————控控件件的的使使用用新闻闻管管理理功功能能中中重重要要的的就就是是表表格格形形式式的的新新闻闻条条目目的的显显示示，，提提供供新新闻闻修修改改、、删删除除、、浏浏览览的的超超级级链链接接。。控控件件是是专专门门为为表表格格数数据据设设计计的的控控件件，，提提供供对对表表格格形形式式数数据据操操作作的的多多项项功功能能。。动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.3.1新新闻闻的的显显示示1.新新闻闻界界面面的的建建立立打开开2008，，选选择择菜菜单单““文文件件|新新建建|网网站站””，，在在““新新建建网网站站””对对话话框框中中，，设设置置网网站站的的位位置置为为““D:\””，，程程序序自自动动新新建建文文件件，，选选择择““设设计计””视视图图。。从从左左侧侧工工具具栏栏中中选选择择““数数据据””组组中中的的““””控控件件，，拖拖动动到到设设计计视视图图中中。。动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.3.1新新闻闻的的显显示示从控控件件右右侧侧的的智智能能标标记记选选项项中中选选择择““自自动动套套用用格格式式””，，可可以以设设置置控控件件的的显显示示样样式式，，可可以以单单击击““移移除除格格式式设设置置””，，取取消消格格式式的的应应用用，，这这里里选选择择一一种种格格式式后后单单击击““确确定定””按按钮钮。。动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.3.1新新闻闻的的显显示示1.新新闻闻界界面面的的建建立立从控控件件右右侧侧智智能能标标记记中中““选选择择数数据据源源””选选项项中中选选择择““新新建建数数据据源源””，，出出现现数数据据源源设设置置对对话话框框，，在在这这里里可可以以设设置置数数据据源源的的类类型型，，这这里里选选择择““数数据据库库””，，系系统统会会自自动动为为数数据据源源对对象象命命名名““1””，，单单击击确确定定按按钮钮。。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示1.新闻界面面的建立在选择数据连连接对话框中中单击“新建建连接”按钮钮，设置服务务器为（）或或者为.（半半角字符———点），用户户名为，密码码为111111，选择择数据库为““”。读者可可以根据自己己设置的密码码输入密码。。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示1.新闻界面面的建立此时已经设置置好连接的数数据字符串，，单击下一步步按钮，在出出现的对话框框中提示我们们是否要把刚刚才的连接字字符串保存到到配置文件中中，选择“是是”。这样样如果再建立立连接，就可可以直接从连连接中选择，，不必重新设设置添加连接接。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示1.新闻界面面的建立选择下一步，，进入配置语语句对话框框，选择表为为，字段为、、、、。选择择右侧的“””按钮，添添加排序，设设置排序字段段为“”，降降序排列，。。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示1.新闻界面面的建立单击确定后选选择下一步，，此时可以单单击“测试查查询”按钮，，显示选择出出的数据如图图所示。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示1.新闻界面面的建立单击完成回到到设计界面，，出现相应的的数据显示效效果，如图所所示。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示1.新闻界面面的建立单击调试按钮钮，浏览器中中效果如图所所示。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示2.列的编辑辑选择控件，在在右侧的智能能标记选项中中选择“编辑辑列”。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示2.列的编辑辑从左侧下方选选定的字段中中单击“”字字段，在右侧侧修改属性（（标题文本））为“编号””，如图所示示。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示2.列的编辑辑同样修改的属属性为“标题题”，的属性性为“发布人人”，的属性性为“日期””，单击确定定。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示3.超级链接接列的增加选择智能标记记中的添加新新列选项，设设置添加字段段对话框中，，选择字段类类型为（超级级链接字段）），超级链接接文本为指定定文本“查看看详细”，超超链接选项中中从数据字段段获取选择““”，格式字字符串为“{0}”，这这里的0代表表参数，这样样可以将每条条记录的主键键连接到每个个超级链接中中，形成变化化的超级链接接，从而传递递查询的参数数，以备这个个新闻浏览的的页面显示。。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示3.超级链接接列的增加动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示3.超级链接接列的增加动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示3.超级链接接列的增加设计指导：这这里我们也可可以在插入超超级链接字段段对话框中设设置页眉文本本为标题，超超链接文本为为从数据字段段获取文本，，然后选择。。然后删除原原始的标题字字段，将新添添加的超级链链接字段左移移。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示4.命令按钮钮列的增加选择智能标记记中的添加新新列选项，设设置添加字段段对话框中，，选择字段类类型为（命令令按钮字段）），页面文本本为“编辑””，按钮类型型为“”（超超级链接形式式），命令按按钮选择“删删除、编辑/更新、显示示取消按钮””。动态网页设计计教程——美美工与技术机械工业出版版社15.3.1新闻的显显示5.分页的启启用选择控件，选选择智能标记记中的启用分分页，如果记记录不足10条，将不显显示下面的分分页链接。可可以通过修改改的属性修改改每页的记录录条数。动态网页设计计教程——美美工与技术机械工业出版版社15.3.2新闻的编编辑通过数据源控控件的修改功功能实现新闻闻的编辑，选选择数据源控控件，选择属属性中的，单单击右侧的按按钮。动态网页设计计教程——美美工与技术机械工业出版版社15.3.2新闻的编编辑在命令和参数数编辑器中输输入修改命令令：单击刷新参数数，单击参数数，设置其参参数源为控件件“”，为““1”，依次次设置其它参参数为同样的的属性。动态网页设计计教程——美美工与技术机械工业出版版社15.3.2新闻的编编辑动态网页设计计教程——美美工与技术机械工业出版版社15.3.2新闻的编编辑设计指导：如如果希望某个个字段不需修修改，除了在在的更新命令令中去除更新新语句外，还还需要把控件件的该字段的的属性设置为为，即设置为为只读，这样样单击编辑时时，就不会出出现文本框，，而是直接显显示信息了。。例如要求不不能修改发布布人，即发布布人设置为只只读，需要选选择控件，在在右上角的智智能标记中选选择“编辑列列”命令，在在字段编辑对对话框中选择择“发布人””字段，修改改右侧属性为为，如图15-34所示示。然后选择择数据源控件件的属性，取取消项的修改改，修改语句句为：,动态网页设计计教程——美美工与技术机械工业出版版社15.3.3新闻的删删除通过数据源控控件的删除功功能实现新闻闻的删除，选选择数据源控控件，选择属属性中的，单单击右侧的按按钮，在命令令和参数编辑辑器中输入修修改命令：单击刷新参数数，单击参数数，设置其参参数源为控件件“”，为““1”。动态网页设计计教程——美美工与技术机械工业出版版社15.4新新闻发布功能能的实现新闻发布实现现新闻信息以以及附件和图图片等信息的的提交，使新新闻记录需要要插入数据库库中，新闻图图片和附件需需要上传到服服务器，并将将图片和附件件的名称记录录在该新闻记记录中。动态网页设计计教程——美美工与技术机械工业出版版社15.4.1新闻发布布界面制作在右侧解决方方案管理器中中单击网站分分支（D:\），单击鼠鼠标右键，选选择添加新项项，或者选择择菜单“文件件|新建|文文件”，选择择类型为窗体体，名称为““”。打开设计视图图，输入提示示文字，拖动动工具栏标准准控件组中相相应的控件（（，，，）到到设计视图，，调整标题框框的宽度，设设置内容文本本框的属性为为，并调整其其宽度与高度度，修改控件件的属性为空空，两个上传传控件后面的的用于提示上上传错误信息息，按钮后面面的控件用于于显示发布提提示。动态网页设计计教程——美美工与技术机械工工业出出版社社15.4.1新新闻闻发布布界面面制作作动态网网页设设计教教程———美美工与与技术术机械工工业出出版社社15.4.1新新闻闻发布布界面面制作作这里我我们可可以对对用户户输入入的信信息进进行非非空验验证，，这里里设计计标题题的非非空验验证。。从左左侧工工具栏栏中选选择验验证组组中的的“””，拖拖动到到标题题文本本框后后面，，修改改其属属性为为“请请输入入标题题”，，属性性为““1””（标标题文文本框框）。。动态网网页设设计教教程———美美工与与技术术机械工工业出出版社社15.4.2新新闻闻发布布代码码设计计1.准准备工工作完成了了新闻闻发布布界面面的设设计，，我们们进行行代码码的编编写，，首先先我们们新建建两个个文件件夹和和，用用于存存放用用户上上传的的图片片与附附件，，在右右侧解解决方方案管管理器器中单单击网网站分分支（（D:\）），单单击鼠鼠标右右键，，选择择添加加新项项，选选择文文件夹夹，修修改文文件夹夹的名名字为为“””，同同样添添加文文件夹夹。动态网网页设设计教教程———美美工与与技术术机械工工业出出版社社15.4.2新新闻闻发布布代码码设计计2.插插入数数据基基本功功能的的实现现设计思思路：：先设设计完完成基基本的的功能能———数据据的插插入，，然后后进行行逐步步完善善，验验证用用户信信息的的合法法性，，考虑虑文件件上传传的限限制问问题，，最后后实现现完善善的程程序。。程序序设计计从简简单到到复杂杂，逐逐步深深入与与完善善，以以此来来体会会程序序开发发的每每一步步。动态网网页设设计教教程———美美工与与技术术机械工工业出出版社社15.4.2新新闻闻发布布代码码设计计在发布布按钮钮（1）的的单击击事件件1中中输入入插入入数据据的代代码如如下：：下面代代码是是建立立数据据库连连接="()111111;";=();();下面代代码是是定义义命令令=();="()()";下面代代码给给命令令参数数赋值值("",)1;动态网网页设设计教教程———美美工与与技术术机械工工业出出版社社15.4.2新新闻闻发布布代码码设计计("",)2;("",)3;("",)=;("",)="";这这里里先设设置为为没有有图片片("",)="";这这里先先设置置为没没有附附件执行命命令();();显示信信息3="新闻闻发布布完毕毕";动态网网页设设计教教程———美美工与与技术术机械工工业出出版社社15.4.2新新闻闻发布布代码码设计计清空文文本框框内容容1="";2="";3="";动态网网页设设计教教程———美美工与与技术术机械工工业出出版社社15.4.2新新闻闻发布布代码码设计计测试程程序，，输入入数据据，注注意先先不选选择附附件和和图片片。动态网网页设设计教教程———美美工与与技术术机械工工业出出版社社15.4.2新新闻闻发布布代码码设计计3.文文件上上传功功能的的实现现在设计计文件件上传传功能能时，，有这这样一一个要要求，，新闻闻可以以没有有附件件或图图片，，如有有图片片或者者附件件，要要求新新闻图图片是是网页页支持持的图图片格格式（（、、、、））且大大小不不能超超过10M，新新闻的的附件件大小小不能能超过过100M。为为此，，两个个文件件上传传空间间后面面的标标签用用于提提示错错误信信息，，如新新闻图图片格格式不不正确确，新新闻图图片太太大，，附件件太大大等。。同时时我们们要注注意，，只有有当图图片和和附件件都满满足要要求时时（新新闻可可以没没有图图片或或附件件，但但如果果有就就要满满足要要求）），才才完成成数据据的插插入操操作。。动态网网页设设计教教程———美美工与与技术术机械工工业出出版社社15.4.2新新闻闻发布布代码码设计计设计思思路：：初始化化变量量与信信号量量="";定定义义上传传附件件的附附件名名="";定定义上上传图图片的的文件件名2="";定定义上上传附附件文文件的的扩展展名2="";定定义上上传图图片文文件的的扩展展名=("");定定义上上传附附件的的路径径=("");定定义上上传图图片的的路径径动态网网页设设计教教程———美美工与与技术术机械械工工业业出出版版社社15.4.2新新闻闻发发布布代代码码设设计计通过过时时间间拼拼出出文文件件名名为为当当前前时时间间的的年年月月日日时时分分秒秒毫毫秒秒=;获获取取当当前前时时间间=""定定义义时时间间字字符符串串()+()+()年年月月日日拼拼接接()+()+()+()小小时时分分钟钟秒秒毫毫秒秒拼拼接接定义义信信号号量量记记录录上上传传图图片片和和附附件件状状态态=0;定定义义上上传传附附件件的的状状态态信信号号量量：：0为为默默认认状状态态，，表表示示没没有有附附件件，，1表表示示有有附附件件且且符符合合要要求求，，2表表示示有有附附件件但但不不符符合合要要求求=0;定定义义上上传传图图片片的的状状态态信信号号量量：：0为为默默认认状状态态，，表表示示没没有有图图片片，，1表表示示有有图图片片且且符符合合要要求求，，2表表示示有有图图片片但但不不符符合合要要求求动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.4.2新新闻闻发发布布代代码码设设计计检查查上上传传附附件件是是否否存存在在（（检检查查附附件件文文件件大大小小，，记记录录信信号号量量））(1>104857600)如如果果文文件件大大小小大大于于100M{1="上上传传附附件件文文件件太太大大";=2;记记录录上上传传附附件件错错误误}{=1;记记录录上上传传附附件件成成功功}动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.4.2新新闻闻发发布布代代码码设设计计检检查查上上传传图图片片是是否否存存在在（（检检查查图图片片文文件件大大小小，，记记录录信信号号量量；；检检查查图图片片文文件件格格式式，，记记录录信信号号量量））(2>10485760)10M{2="图图片片文文件件太太大大";=2;记记录录错错误误状状态态}如图图大大小小满满足足要要求求，，判判断断文文件件格格式式(2()""2()""2()""2()""){=1;记记录录状状态态为为成成功功}动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.4.2新新闻闻发发布布代代码码设设计计如果果执执行行到到这这里里，，只只能能是是大大小小满满足足要要求求，，但但文文件件格格式式不不正正确确{2="文文件件格格式式不不正正确确";=2;记记录录错错误误状状态态}动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.4.2新新闻闻发发布布代代码码设设计计根据据附附件件信信号号量量和和图图片片信信号号量量的的值值（（0表表示示没没有有文文件件，，1表表示示有有文文件件且且格格式式与与大大小小正正确确，，2表表示示文文件件格格式式不不正正确确或或大大小小不不正正确确）），，判判断断是是否否有有附附件件与与图图片片、、文文件件格格式式与与大大小小是是否否符符合合要要求求。。只只有有附附件件信信号号量量和和图图片片信信号号量量的的值值同同时时在在正正确确范范围围时时（（小小于于2，，即即0或或1）），，才才进进行行文文件件的的上上传传操操作作，，同同时时完完成成在在数数据据库库中中插插入入新新闻闻记记录录的的操操作作。。也也就就是是说说，，图图片片和和附附件件可可以以没没有有，，但但有有就就要要符符合合要要求求，，即即图图片片满满足足格格式式正正确确、、大大小小在在规规定定范范围围，，附附件件大大小小在在规规定定范范围围，，才才能能进进行行上上传传操操作作。。动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.4.2新新闻闻发发布布代代码码设设计计根据据信信号号量量取取值值决决定定是是否否执执行行文文件件上上传传与与数数据据插插入入操操作作(<2<2)只只有有上上传传附附件件信信号号量量和和图图片片信信号号量量都都满满足足要要求求时时{(1)如如果果上上传传附附件件状状态态为为1，，即即有有文文件件且且合合法法，，上上传传文文件件，，记记录录文文件件名名{………}如果果为为0，，则则没没有有附附件件文文件件，，记记录录文文件件名名为为空空{………}动态态网网页页设设计计教教程程————美美工工与与技技术术机械械工工业业出出版版社社15.4.2新新闻闻发发布布代代码码设设计计(1)如如果果上上传传图图片片状状态态为为1，，即即有有文文件件且且合合法法，，上上传传文文件件，，记记录录文文件件名名{……}如果为0，则没没有图片片文件，，记录文文件名为为空{……}执行插入入数据代代码，别别忘了修修改命令令参数中中的图片片和附件件的取值值……}完整代码码参考书书中或光光盘中的的内容动态网页页设计教教程———美工与与技术机械工业业出版社社15.4.2新新闻发发布代码码设计调试程序序，选择择一个大大文件，，测试出出现无法法显示该该页面的的提示页页面，原原因在于于配置文文件默认认是上传传4M以以下的文文件，因因此需要要在配置置文件中中文件来来改变应应用程序序上传限限制。在在<><>分分支中加加入：<"1024000""600"/>这里设置置上传文文件大小小，单位位是，允允许执行行请求的的最大秒秒数,即即超时时时间，，单位：：秒，此此功能必必须在元元素中属属性为时时才生效效。再次次选择文文件，上上传之后后刷新解解决方案案资源管管理器，，发现附附件与图图片上传传成功，，。动态网页页设计教教程———美工与与技术机械工业业出版社社15.4.2新新闻发发布代码码设计4.信息息处理与与页面完完善我们发现现新闻发发布成功功之后，，仍然存存在文件件格式不不正确的的提示，，发布的的数据在在数据库库中新闻闻主体内内容的信信息完全全连接到到了一起起，没有有换行的的标志，，这样显显示新闻闻时必然然只有一一个段落落，与提提交的信信息不同同，因此此需要修修改。再再有就是是信息的的验证，，对于客客户端的的浏览器器由于安安全性而而对有不不同的设设置，因因此应在在提交信信息后通通过进行行验证。。动态网页页设计教教程———美工与与技术机械工业业出版社社15.4.2新新闻发发布代码码设计解决信息息换行的的问题，，需要新新建一个个公用函函数：(){()"";如如果字字符串为为空，返返回空值值=();对对字符串串进行编编码=("<","")替换换字符串串中的小小于号<为的小小于号=(">","")替换换字符串串中的小小于号>为的大大于号=("",";")替换字字符串中中的空格格为的空空格;=("\n","<>")替换换字符串串中的换换行为的的换行</>();返返回加加工后的的字符串串}动态网页页设计教教程———美工与与技术机械工业业出版社社15.4.2新新闻发发布代码码设计将该函数数放在程程序中与与其它事事件并列列，这里里放在之之后。动态网页页设计教教程———美工与与技术机械工业业出版社社15.4.2新新闻发发布代码码设计然后将1事件中中插入数数据的参参数("",)=1;("",)=2;("",)=3;修改为("",)(1);("",)=(2);("",)(3);动态网页页设计教教程———美工与与技术机械工业业出版社社15.4.2新新闻发发布代码码设计对于页面面合法性性与提示示信息，，修改1程序为为：()进行行页面合合法性验验证{清除提示示内容1="";2="";3="";原程序内内容………}{3="请填填写新闻闻标题";}动态网页页设计教教程———美工与与技术机械工业业出版社社15.5新闻闻浏览功功能的实实现新闻浏览览是根据据用户选选择的新新闻，打打开新闻闻详细内内容的界界面，显显示新闻闻的具体体内容，，同时将将新闻图图片和附附件以适适当的形形式展示示出来。。动态网页页设计教教程———美工与与技术机械工业业出版社社15.5.1新新闻浏浏览界面面制作打开2008，添添加新项项，选择择窗体，，文件名名为，放放置用于于显示新新闻标题题（）、、发布人人()、、发布日日期()、新闻闻内容()，这这里对每每个控件件进行了了改名，，并设置置其属性性为空，，放置控控件(1)用于于显示新新闻图片片，最后后放置一一个控件件(1)，修改改其属性性为“下下载附件件”用于于下载新新闻附件件。动态网页设计计教程——美美工与技术机械工业出版版社15.5.2新闻浏览览代码设计在事件中进行行代码设计，，这里为了防防止用户盗链链，即没有通通过新闻管理理页面而直接接输入网址产产生错误，通通过判断请求求参数来进行行处理。(,e){([""])如果果请求页面存存在在请求参数，，则进行数据据读取{}{("");页页面定位到到出错界面?，读者可可以自行设计计错误页面。。}}动态网页设计计教程——美美工与技术机械工业出版版社15.5.2新闻浏览览代码设计然后对分支进进行程序完善善，进行数据据库连接，定定义命令，读读取数据，进进行判断。详详细代码参考考书中内容。。(,e){([""])如果果请求页面存存在请求参数数，则进行数数据读取{="();";=()定定义连接对象象();打开开连接下面代码是定定义命令=();="*";动态网页设计计教程——美美工与技术机械工业出版版社15.5.2新闻浏览览代码设计下面代码给命命令参数赋值值("",)[""]();执行命令=()定义义阅读器对象象接收命令执执行的结果（（数据集合））(()){=[""]();新新闻标题=[""]();发发布人=[""]();发发布日期=[""]()新闻内内容([""]()"")新闻图图片存在{1=;显显示图像控控件1=""+[""]()指指定路径}动态网页设计计教程——美美工与技术机械工业出版版社15.5.2新闻浏览览代码设计{1=;隐隐藏控件}([""]()"")新闻附附件存在{1=;显显示超级链链接控件1=""+[""]();链接路径径}{1=;隐隐藏控件}();关闭闭阅读器();关闭闭连接}动态网页设计计教程——美美工与技术机械工业出版版社15.5.2新闻浏览览代码设计{();();("");页页面定位位到出错页面面。}}{("");页页面定位到到出错页面，，读者可以自自行设计错误误页面。}}动态网页设计计教程——美美工与技术机械工业出版版社15.5.2新闻浏览览代码设计直接调试程序序，显示页面面无法找到，，因为我们没没有建立这个个页面，打开开新闻管理页页面，再调试试程序，选择择一条新闻，，单击详细内内容。动态网页设计计教程——美美工与技术机械工业出版版社15.6新新闻管理模块块界面的美化化新闻管理模块块的界面美化化采用流行的的的布局方式式进行美化，，需要结合2008和5进行行美化设计，，使用5设设计布局页面面，使用2008测测试美化效果果。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化1.统一界面面的设计通过前面的设设计，我们得得到了网页新新闻显示界面面，而这只是是从技术的角角度实现，真真正要到成品品还需要进一一步的美化。。我们采用统统一的布局来来实现界面效效果。实际的的工作中，存存在这样的问问题，美工已已经把新闻管管理的界面设设计完毕，并并设计成格式式的文件，往往往这是很常常见的情况，，我们可以直直接采用这个个文件进行修修改，形成模模板，然后将将其它的页面面套用上去，，这样的操作作有助于我们们实际操作能能力的提高。。这里设置了了网页的统一一框架，而将将网页内容放放到右侧中间间的空白区域域中，体现网网页设计一致致性原理。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化1.统一界面面的设计动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化1.统一界面面的设计实现统一框架架有两种方法法： 使用框架架结构<><>嵌入网页页。 使用母版版。通常情况下，，使用框架结结构比较灵活活，但要注意意内容溢出时时的滚动条问问题，为了不不出现滚动条条，需要对内内容进行修剪剪或裁切。这这里介绍使用用框架的方法法，母版的方方法将在第18章进行介介绍。首先在在5中设计计网页文件，，这个页面可可以由美工设设计完成，也也可以由美工工设计完效果果图后由技术术人员利用软软件实现，注注意需要将所所用到的图片片连同文件夹夹一起复制到到网站文件夹夹中。设计指导：实实际应用中可可以将设计成成动态网页，，以便于安全全性的设置。。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化1.统一界面面的设计下面进行网站站美工的设计计制作，首先先将配套光盘盘中“源文件件\15\””中的“美化化前”文件夹夹复制到D盘盘，即网站文文件夹路径为为“D:\美美化前\”，，然后将配套套光盘中“源源文件\15\素材\””中的所有文文件和文件夹夹复制到“D:\美化前前\”文件夹夹中。打开5软件，新新建站点“新新闻管理”，，定义站点文文件夹为“D:\美化前前”。然后打打开站点中的的文件，单击击网页右侧的的框架位置，，选择菜单““插入框架””，得到代码码：<><>然后修改代码码为：<"700""434""""""""0"><>详细步骤请参参考配套光盘盘视频教程中中的讲解“视视频教程\15新闻管管理2-美化化”。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化1.统一界面面的设计动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化1.统一界面面的设计选择新闻发布布和新闻管理理图片，设置置超级链接的的地址：新闻发布：，，目标“”。。新闻管理：，，目标“”。。设计指导：一一定要选择目目标“”，这这是框架的命命名，只有选选择了目标，，单击超级链链接后，链接接文件才会在在目标框架中中打开。使用2008中调试试文件，结果果如图所示。。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化2网页布局我们这里采用用流行的的布布局方式对新新闻管理页面面进行美化。。在进行新闻闻管理页面的的美化之前，，在2008中打开开“D:\美美化前\”文文件，选择控控件，单击智智能标记中的的“自动套用用格式|移除除自动套用格格式”命令，，保存文件。。然后，使用用5软件打打开该文件，，在设计视图图中红色虚线线范围中“即即表单”单击击鼠标，单击击插入面板中中的“插入标标签”（或选选择菜单“插插入|布局对对象标签”）），在插入标标签对话框中中设置插入为为“在插入点点”，为“””，如图所示示。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化2网页布局再次在插入面面板中单击““插入标签””，在插入标标签对话框中中设置插入为为“在标签之之后”，选择择标签为<”””>，为为“”，插插入标签后的的界面如图所所示。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化2网页布局删除标签中的的提示信息，，在标签插入入图片，图片片文件路径为为“D:\美美化前\\””和“D:\美化前\\”，将第一一个控件（即即带有黄色标标志的控件1）拖动到标标签中，第二二个控件（即即数据源控件件1）是隐藏藏的，所以不不用处理。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化3.主体样样式设计在5设计视视图中，单击击鼠标右键，，选择“样式式|新建”，，新建样式，，选择标签样样式，选择选选择器为，文文件位置为新新建样式表文文件，保存文文件名为。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化4.标题区域域样式设计计新建样式，类类型为，名称称为。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化5.数据表区区域样式设设计新建样式，类类型为，名称称为。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化6.表格样样式设计新建样式，类类型为“类””，名称为。。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化进入样式文件件中，添加;使表格线呈呈单线并去除除间距，相邻邻边被合并，，选择控件，，设置属性面面板中样式为为。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化7.表格标题题样式设计计接下来进行表表格数据的进进一步美化，，新建样式，，设置规则类类型为“复合合内容”，选选择器名称为为，即设置置（表格数据据）项目下的的（标题）属属性。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化7.表格标题题样式设计计动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化8.表格单元元格样式设设计新建样式，设设置规则类型型为“复合内内容”，选择择器名称为，，即设置（（表格数据））项目下的（（单元格）属属性，类型属属性中设置行行高为26，，区块属性中中（文本对齐齐）为居中。。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻管理理界面的美化化9.超级链接接样式设计我们发现，网网页的超级链链接显示为默默认的蓝色，，因此需要修修改为和谐的的灰色，当鼠鼠标划上去的的时候显示红红色。新建样样式，设置规规则类型为““复合内容””，选择器名名称为（（这里一起设设置链接和访访问过两种状状态，故中间间用逗号隔开开），设置类类型属性中（（文本修饰））为（无），，即去掉超级级链接的下划划线，为，即即修改颜色为为灰色。新建建样式，设置置规则类型为为“复合内容容”，选择器器名称为,（这里里一起设置鼠鼠标划上和激激活两种状态态），设置类类型属性中（（文本修饰））为（无），，去掉超级链链接的下划线线，为00，，即修改颜色色为红色。动态网页设计计教程——美美工与技术机械工业出版版社15.6.1新闻闻管理界面面的美化9.超级链链接样式设设计我们发现，，网页的超超级链接显显示为默认认的蓝色，，因此需要要修改为和和谐的灰色色，当鼠标标划上去的的时候显示示红色。新新建样式，，设置规则则类型为““复合内容容”，选择择器名称为为（这这里一起设设置链接和和访问过两两种状态，，故中间用用逗号隔开开），设置置类型属性性中（文本本修饰）为为（无），，即去掉超超级链接的的下划线，，为，即修修改颜色为为灰色。动态网页设设计教程———美工与与技术机械工业出出版社15.6.1新闻闻管理界面面的美化在中调试试：动态网页设设计教程———美工与与技术机械工业出出版社15.6.2新闻闻发布界面面的美化新闻发布同同样可以样样式进行美美化，利用用进行标题题（）与表表单内容（（）的分割割，标题部部分插入图图片，后设设置底部横横线，表单单部分利用用表格进行行版式编排排，利用样样式进行版版式编排与与美化。1.附加样样式表使用软件打打开该文件件，在设计计视图中单单击鼠标右右键，选择择“样式|附加样式式表”选项项，在链接接外部样式式表对话框框中选择外外部样式表表文件为网网站中的文文件。动态网页设设计教程———美工与与技术机械工业出出版社15.6.2新闻闻发布界面面的美化2布局在网页中（（表单标签签内）插入入标签（、、）进行布布局。在网页中（（表单标签签内）插入入标签（、、）进行布布局。删除除标签中的的提示信息息和新闻发发布文字，，在标签插插入两张图图片，图片片文件路径径为“D:\美化前前\\”和和“D:\美化前\\”。在在标签中插插入表格，，设置行6，列2。。把信息文文字和控件件拖动到表表格相应位位置。动态网页设设计教程———美工与与技术机械工业出出版社15.6.2新闻闻发布界面面的美化2.布局局动态网页设设计教程———美工与与技术机械工业出出版社15.6.2新闻闻发布界面面的美化3.设置样样式由于文件中中已有的样样式，这里里可以直接接使用。新建样式，，用户控制制表单样式式，设置方方框属性中中为680，为0，，中为10，为20，其余为为0。新建复合样样式，用用于控制表表格样式，，设置类型型属性中行行距为26，方框属属性中为500，和和为0。新建复合样样式，，用于设设置表格的的单元格样样式，设置置边框属性性中（底部部）样式为为（点）为为1，为。。动态网页设设计教程———美工与与技术机械工业出出版社15.6.2新闻闻发布界面面的美化3.设置样样式下面实现表表格内容的的对齐与宽宽度设置，，在代码视视图中，对对左侧一列列<>标识识逐个添加加标识”c1”，右右侧一列，，<>标识识添加标识识”c2””（当然我我们可以只只设置c1）。新建样式，，类型为““类”，选选择器名称称为“1””。区块属属性中设置置（文本对对齐）为（（右对齐））。设置方方框属性中中为46，，中为10，其它为为0，为0。新建样式，，类型为““类”，选选择器名称称为“2””。设置方方框属性中中中为5（（这里只是是为了说明明可以对两两列分别设设置样式，，如设置右右对齐等，，实际上我我们可以在在c1中设设置中为15，而得得到相同的的效果）。。动态网页设设计教程———美工与与技术机械工业出出版社15.6.2新闻闻发布界面面的美化3.设置样样式下面进行按按钮样式的的设计，插插入样式，，选择类型型为“类””，设置类类型属性中中颜色为#999，，背景属性性中设置背背景颜色为为5f5f5；方框框属性中设设置高度为为20，和和为0；边边框属性中中为1，为为。选择按钮发发布，在属属性栏中选选择样式。。同样可以以设置上传传控件的样样式为。保保存文件后后在中调调试文件，，单击新闻闻发布图片片，显示结结果。当然然我们可以以对标题、、内容等文文本框进行行样式美化化，设置其其宽度高度度等，这里里就不赘述述。动态网页设设计教程———美工与与技术机械工业出出版社15.6.2新闻闻发布界面面的美化3.设置样样式动态网页设设计教程———美工与与技术机械工业出出版社15.6.3新闻闻浏览界面面的美化界面美化设设计思路是是首先利用用进行标题题（）与新新闻（）的的分割，标标题部分插插入图片，，后设置底底部横线，，利用样式式进行版式式编排与美美化。1.附加样样式表使用软件打打开文件，，在设计视视图中单击击鼠标右键键，选择““样式|附附加样式表表”附加样样式表文件件。动态网页设设计教程———美工与与技术机械工业出出版社15.6.3新闻闻浏览界面面的美化2布局在网页中（（表单标签签内）插入入标签（、、）进行布布局，在标标签中插入入标签，删删除标签中中的提示信信息和新闻闻浏览文字字，在标签签插入图片片和，将控控件拖动到到标签中，，修改标签签内的代码码。动态网页设设计教程———美工与与技术机械工业出出版社15.6.3新闻闻浏览界面面的美化2布局<""><h1""><""""><><1><h2"">发布人：<""""><>;发布时间间：<""""><><2><""><"""1"""/><><p""><""""><><><p""><"1""">下载附件件<><><>动态网页设设计教程———美工与与技术机械工业出出版社15.6.3新闻闻浏览界面面的美化2布局动态网页设设计教程———美工与与技术机械工业出出版社15.6.3新闻闻浏览界面面的美化3.设置样样式由于文件中中已有的样样式，这里里可以直接接使用。新建样式，，类型为为，设置置方框属性性中为680，为10，中为为0。新建样式，，类型为““类”，用用于控制新新闻标题样样式，设置置类型属性性中字号为为16，行行距为24，颜色为为#666，区块属属性中文本本对齐为。。新建样式，，类型为““类”，用用于控制新新闻发布人人与发布时时间样式，，设置类型型属性中字字号为12，为（取取消H2默默认的加粗粗样式），，区块属性性中文本对对齐为。动态网页设设计教程———美工与与技术机械工业出出版社15.6.3新闻闻浏览界面面的美化3.设置样样式新建样式，，类型为““”，用于于控制新闻闻图片对齐齐样式，设设置区块属属性中文本本对齐为。。新建样式，，类型为““类”，用用于控制新新闻图片的的样式，设设置方框属属性中为300，为为5，为0。新建样式，，类型为““类”，用用于控制新新闻内容的的样式，设设置类型属属性中为14，为21，为#666，，方框属性性中为650。新建样式，，类型为““类”，用用于控制新新闻附件的的样式，设设置区块属属性中文本本对齐为，，设置方框框属性中中中为40。。新建样式a，类型型为“复合合内容”，，用于控制制新闻附件件超级链接接样式（a包括超超级链接的的四种状态态），设置置类型属性性中文本大大小为14，颜色为为#666，文本修修饰为。动态网页设设计教程———美工与与技术机械工业出出版社15.6.3新闻闻浏览界面面的美化3.设置样样式保存文件后后在中调调试文件，，单击选择择一条新闻闻，单击详详细信息，，显示结果果。我们发发现，由于于采用了框框架，长的的内容会使使网页出现现滚动条，，影响界面面的美观，，我们通过过修改代码码来去掉水水平的滚动动条，在文文件中添加加代码：{;}动态网页设设计教程———美工与与技术机械工业出出版社15.6.3新闻闻浏览界面面的美化3.设置样样式动态网页设设计教程———美工与与技术机械工业出出版社15.7新新闻管理理模块高级级设计———数据操纵纵在动态网站站开发中，，除了可以以使用数据据源控件完完成对数据据库信息的的浏览和操操作外，还还可以使用用提供的各各种对象，，通过编写写代码实现现数据库操操作功能，，能够实现现更加复杂杂与特殊的的操作。动态网页设设计教程———美工与与技术机械工业出出版社15.7.1新闻闻管理模块块的新需求求前面我们基基本完成了了新闻管理理模块的设设计，而实实际应用中中我们不断断遇到新的的需求：（1）删除除记录时支支持多选，，能够一次次删除一页页记录，同同时出现删删除确认的的对话框。。删除记录录时支持删删除文件的的功能，因因为如果把把记录删除除了，而该该记录对应应的图片和和附件却不不能删除，，而成为服服务器上的的“垃圾””，导致空空间被浪费费。（2）修改改记录时支支持选择输输入，提供供快速正确确的数据更更新，而不不是完全由由用户输入入。（3）支持持新闻的审审核功能，，只有通过过审核的新新闻才能正正常显示，，编辑新闻闻时，审核核状态通过过选项选择择实现，如如“通过””、“未通通过”。以上的功能能单凭控控件是很难难完全实现现的，因此此我们需要要通过进行行数据的高高级操纵。。动态网页设设计教程———美工与与技术机械工业出出版社15.7.1新闻闻管理模块块的新需求求为此，首先先在数据库库的数据表表中添加新新字段“（（50）”，，其取值为为“通过、、未通过和和空值（））”，当新新增加记录录时，其值值为。动态网页设设计教程———美工与与技术机械工业出出版社15.7.2新闻闻管理界面面的改进使用2008打打开网站，，打开文件件，选择控控件，选择择智能标记记中的添加加新列选项项，选择字字段（模版版列），页页眉文本为为“选择””。动态网页设设计教程———美工与与技术机械工业出出版社15.7.2新闻闻管理界面面的改进再次选择智智能标记中中的添加新新列选项，，插入选择择字段（模模版列），，页眉文本本为标题，，同样插入入其它字段段（发布人人、日期、