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

动态网页设计教程美工与技术,徐延章编著,第15章新闻管理模块设计GridView控件与ADO.NET高级应用,CompanyLogo,第15章新闻管理模块设计GridView控件与ADO.NET高级应用,新闻管理模块是一个综合新闻和内容管理的模块，是基于B/S模式的网络信息管理系统，新闻管理提供新闻的发布，审核，删除，浏览等功能，是大多数网站后台的主要功能模块，通过设计新闻管理模块，读者可以延伸设计例如用户管理、信息管理等模块。将美工与技术一起讲在本章也有明显的体现，本章美工设计采用流行的DIV+CSS模式设计，紧跟时代潮流，体现技术的要求。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,第15章新闻管理模块设计GridView控件与ADO.NET高级应用,动态网页设计教程美工与技术,机械工业出版社,15.1新闻管理界面的设计,1,15.2新闻管理数据库的设计,2,15.3新闻管理功能的实现GridView控件的使用,3,15.4新闻发布功能的实现,4,15.5新闻浏览功能的实现,5,15.6新闻管理模块界面的美化,2,6,15.7新闻管理模块高级设计ADO.NET数据操纵,7,CompanyLogo,15.1新闻管理界面的设计,新闻管理模块主要包括新闻管理、新闻发布、新闻浏览等页面，我们在一致性原则的指导下，进行新闻管理界面的美工设计。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.1.1美工的界面设计,1.新闻管理界面,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.1.1美工的界面设计,1.新闻管理界面,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.1.1美工的界面设计,2.新闻发布界面,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.1.1美工的界面设计,2.新闻发布界面,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.1.2技术如何实现,新闻管理功能主要利用GridView控件结合数据源对象实现，利用数据源控件的查询、修改和删除语句，通过GridView控件按钮实现。GridView控件通过表格形式显示数据，通过设置GridView控件的数据源，GridView控件每列显示一个字段，每行显示一条记录，同时支持数据的编辑、排序和分页的功能。需要说明的是，GridView控件不支持插入记录的功能。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.2新闻管理数据库的设计,新闻管理模块是典型的数据库操作的应用，因此在设计时首先要对新闻数据库进行设计，建立数据库并设计数据表，提供程序对数据的访问支持。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.2.1数据库的建立,打开SQLServer2005，从左侧对象资源管理其中，选择数据库选项，单击鼠标右键，选择新建数据库，设置数据库名称为“NewsDB”。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.2.2数据表的建立,打开新闻数据库“NewsDB”，选择“表”选项，单击鼠标右键，选择“新建表”，输入字段“NewsID”，在列属性中设置数据类型为int型，设置标识规范为是，从而使字段能够自动编号。单击工具栏中的设置为主键按钮，将该字段作为主键。然后按照表输入其它字段，单击保存按钮，将表命名为“News”。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.2.3数据表数据的添加,在对象资源管理器中，单击News表，单击鼠标右键，选择打开表，手动输入数据，注意输入完一条记录，按键确认。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3新闻管理功能的实现GridView控件的使用,新闻管理功能中重要的就是表格形式的新闻条目的显示，提供新闻修改、删除、浏览的超级链接。GridView控件是专门为表格数据设计的控件，提供对表格形式数据操作的多项功能。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,1.新闻界面的建立打开VisualS2008，选择菜单“文件|新建|网站”，在“新建网站”对话框中，设置网站的位置为“D:news”，程序自动新建Default.aspx文件，选择“设计”视图。从左侧工具栏中选择“数据”组中的“GridView”控件，拖动到设计视图中。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,从控件右侧的智能标记选项中选择“自动套用格式”，可以设置控件的显示样式，可以单击“移除格式设置”，取消格式的应用，这里选择一种格式后单击“确定”按钮。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,1.新闻界面的建立从控件右侧智能标记中“选择数据源”选项中选择“新建数据源”，出现数据源设置对话框，在这里可以设置数据源的类型，这里选择“数据库”，系统会自动为数据源对象命名“SqlDataSource1”，单击确定按钮。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,1.新闻界面的建立在选择数据连接对话框中单击“新建连接”按钮，设置服务器为（local）或者为.（半角字符点），用户名为sa，密码为111111，选择数据库为“NewsDB”。读者可以根据自己设置的密码输入密码。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,1.新闻界面的建立此时已经设置好连接的数据字符串，单击下一步按钮，在出现的对话框中提示我们是否要把刚才的连接字符串保存到配置文件中，选择“是”。这样如果再建立连接，就可以直接从连接中选择，不必重新设置添加连接。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,1.新闻界面的建立选择下一步，进入配置SQL语句对话框，选择表为News，字段为NewsID、Title、NewsDate、Author。选择右侧的“ORDERBY”按钮，添加排序，设置排序字段为“NewsDate”，降序排列，。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,1.新闻界面的建立单击确定后选择下一步，此时可以单击“测试查询”按钮，显示选择出的数据如图所示。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,1.新闻界面的建立单击完成回到设计界面，出现相应的数据显示效果，如图所示。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,1.新闻界面的建立单击调试按钮，浏览器中效果如图所示。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,2.列的编辑选择GridView控件，在右侧的智能标记选项中选择“编辑列”。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,2.列的编辑从左侧下方选定的字段中单击“NewsID”字段，在右侧修改属性HeaderText（标题文本）为“编号”，如图所示。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,2.列的编辑同样修改Title的HeaderText属性为“标题”，Author的HeaderText属性为“发布人”，NewsDate的HeaderText属性为“日期”，单击确定。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,3.超级链接列的增加选择GridView智能标记中的添加新列选项，设置添加字段对话框中，选择字段类型为HyperLinkField（超级链接字段），超级链接文本为指定文本“查看详细”，超链接URL选项中从数据字段获取URL选择“NewsID”，URL格式字符串为“newsdetail.aspx?newsid=0”，这里的0代表参数NewsID，这样可以将每条记录的主键连接到每个超级链接中，形成变化的超级链接，从而传递查询的参数，以备newsdetail.aspx这个新闻浏览的页面显示。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,3.超级链接列的增加,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,3.超级链接列的增加,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,3.超级链接列的增加设计指导：这里我们也可以在插入超级链接字段对话框中设置页眉文本为标题，超链接文本为从数据字段获取文本，然后选择Title。然后删除原始的标题字段，将新添加的超级链接字段左移。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,4.命令按钮列的增加选择GridView智能标记中的添加新列选项，设置添加字段对话框中，选择字段类型为CommandField（命令按钮字段），页面文本为“编辑”，按钮类型为“Link”（超级链接形式），命令按钮选择“删除、编辑/更新、显示取消按钮”。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.1新闻的显示,5.分页的启用选择GridView控件，选择智能标记中的启用分页，如果记录不足10条，将不显示下面的分页链接。可以通过修改GridView的PageSize属性修改每页的记录条数。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.2新闻的编辑,通过数据源控件的修改功能实现新闻的编辑，选择数据源控件，选择属性中的UpdateQuery，单击右侧的按钮。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.2新闻的编辑,在命令和参数编辑器中输入修改命令：updateNewssetTitle=Title,Author=Author,NewsDate=NewsDatewhereNewsID=NewsID单击刷新参数，单击参数NewsID，设置其参数源为控件“Control”，ControlID为“GridView1”，依次设置其它参数为同样的属性。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.2新闻的编辑,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.2新闻的编辑,设计指导：如果希望某个字段不需修改，除了在SQL的更新命令中去除更新语句外，还需要把GridView控件的该字段的Readonly属性设置为True，即设置为只读，这样单击编辑时，就不会出现文本框，而是直接显示信息了。例如要求不能修改发布人，即发布人设置为只读，需要选择GridView控件，在右上角的智能标记中选择“编辑列”命令，在字段编辑对话框中选择“发布人”字段，修改右侧属性ReadOnly为True，如图15-34所示。然后选择数据源控件的UpdateQuery属性，取消Author项的修改，修改SQL语句为：updateNewssetTitle=Title,NewsDate=NewsDatewhereNewsID=NewsID,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.3.3新闻的删除,通过数据源控件的删除功能实现新闻的删除，选择数据源控件，选择属性中的DeleteQuery，单击右侧的按钮，在命令和参数编辑器中输入修改命令：deletefromNewswhereNewsID=NewsID单击刷新参数，单击参数NewsID，设置其参数源为控件“Control”，ControlID为“GridView1”。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4新闻发布功能的实现,新闻发布实现新闻信息以及附件和图片等信息的提交，使新闻记录需要插入数据库中，新闻图片和附件需要上传到服务器，并将图片和附件的名称记录在该新闻记录中。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.1新闻发布界面制作,在右侧解决方案管理器中单击网站分支（D:news），单击鼠标右键，选择添加新项，或者选择菜单“文件|新建|文件”，选择类型为Web窗体，名称为“NewsAdd.aspx”。打开设计视图，输入提示文字，拖动工具栏标准控件组中相应的控件（TextBox，FileUpload，Button，Label）到设计视图，调整标题框的宽度，设置内容文本框的TextMode属性为MultiLine，并调整其宽度与高度，修改Label控件的Text属性为空，两个上传控件后面的Label用于提示上传错误信息，按钮后面的Label控件用于显示发布提示。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.1新闻发布界面制作,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.1新闻发布界面制作,这里我们可以对用户输入的信息进行非空验证，这里设计标题的非空验证。从左侧工具栏中选择验证组中的“RequiredFieldValidator”，拖动到标题文本框后面，修改其属性ErrorMessage为“请输入标题”，ControlToValidate属性为“TextBox1”（标题文本框）。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,1.准备工作完成了新闻发布界面的设计，我们进行代码的编写，首先我们新建两个文件夹upimage和upfile，用于存放用户上传的图片与附件，在右侧解决方案管理器中单击网站分支（D:news），单击鼠标右键，选择添加新项，选择文件夹，修改文件夹的名字为“upimage”，同样添加upfile文件夹。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,2.插入数据基本功能的实现设计思路：先设计完成基本的功能数据的插入，然后进行逐步完善，验证用户信息的合法性，考虑文件上传的限制问题，最后实现完善的程序。程序设计从简单到复杂，逐步深入与完善，以此来体会程序开发的每一步。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,在发布按钮（Button1）的单击事件Button1_Click中输入插入数据的代码如下：/下面代码是建立数据库连接Stringconstr=datasource=(local);database=NewsDB;userid=sa;password=111111;SqlConnectionconn=newSqlConnection(constr);conn.Open();/下面代码是定义命令SqlCommandcmd=conn.CreateCommand();cmd.CommandText=insertintoNews(Title,Author,NewsDate,NewsBody,NewsPhoto,NewsFile)values(Title,Author,NewsDate,NewsBody,NewsPhoto,NewsFile);/下面代码给命令参数赋值cmd.Parameters.Add(Title,SqlDbType.NVarChar).Value=TextBox1.Text;,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,cmd.Parameters.Add(NewsBody,SqlDbType.Text).Value=TextBox2.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.ExecuteNonQuery();conn.Close();/显示信息Label3.Text=新闻发布完毕;,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,/清空文本框内容TextBox1.Text=;TextBox2.Text=;TextBox3.Text=;,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,测试程序，输入数据，注意先不选择附件和图片。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,3.文件上传功能的实现在设计文件上传功能时，有这样一个要求，新闻可以没有附件或图片，如有图片或者附件，要求新闻图片是网页支持的图片格式（JPG、GIF、PNG、BMP）且大小不能超过10M，新闻的附件大小不能超过100M。为此，两个文件上传空间后面的标签用于提示错误信息，如新闻图片格式不正确，新闻图片太大，附件太大等。同时我们要注意，只有当图片和附件都满足要求时（新闻可以没有图片或附件，但如果有就要满足要求），才完成数据的插入操作。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,设计思路：初始化变量与信号量Stringupfilename=;/定义上传附件的附件名Stringupimagename=;/定义上传图片的文件名Stringupfilename2=;/定义上传附件文件的扩展名Stringupimagename2=;/定义上传图片文件的扩展名Stringupfilepath=Server.MapPath(upfile);/定义上传附件的路径Stringupimagepath=Server.MapPath(upimage);/定义上传图片的路径,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,/通过时间拼出文件名为当前时间的年月日时分秒毫秒DateTimectime=DateTime.Now;/获取当前时间Stringtimestring=;/定义时间字符串timestring=ctime.Year.ToString()+ctime.Month.ToString()+ctime.Day.ToString();/年月日拼接timestring=timestring+ctime.Hour.ToString()+ctime.Minute.ToString()+ctime.Second.ToString()+ctime.Millisecond.ToString();/小时分钟秒毫秒拼接/定义信号量记录上传图片和附件状态intupfilestyle=0;/定义上传附件的状态信号量：0为默认状态，表示没有附件，1表示有附件且符合要求，2表示有附件但不符合要求intupimagestyle=0;/定义上传图片的状态信号量：0为默认状态，表示没有图片，1表示有图片且符合要求，2表示有图片但不符合要求,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,检查上传附件是否存在（检查附件文件大小，记录信号量）if(FileUpload1.PostedFile.ContentLength104857600)/如果文件大小大于100MLabel1.Text=上传附件文件太大;upfilestyle=2;/记录上传附件错误elseupfilestyle=1;/记录上传附件成功,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,检查上传图片是否存在（检查图片文件大小，记录信号量；检查图片文件格式，记录信号量）if(FileUpload2.PostedFile.ContentLength10485760)/10MLabel2.Text=图片文件太大;upimagestyle=2;/记录错误状态/如图大小满足要求，判断文件格式elseif(upimagename2.ToLower()=.jpg|upimagename2.ToLower()=.gif|upimagename2.ToLower()=.png|upimagename2.ToLower()=.bmp)upimagestyle=1;/记录状态为成功,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,/如果执行到这里，只能是大小满足要求，但文件格式不正确elseLabel2.Text=文件格式不正确;upimagestyle=2;/记录错误状态,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,根据附件信号量upfilestyle和图片信号量upimagestyle的值（0表示没有文件，1表示有文件且格式与大小正确，2表示文件格式不正确或大小不正确），判断是否有附件与图片、文件格式与大小是否符合要求。只有附件信号量upfilestyle和图片信号量upimagestyle的值同时在正确范围时（小于2，即0或1），才进行文件的上传操作，同时完成在数据库中插入新闻记录的操作。也就是说，图片和附件可以没有，但有就要符合要求，即图片满足格式正确、大小在规定范围，附件大小在规定范围，才能进行上传操作。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,/根据信号量取值决定是否执行文件上传与数据插入操作if(upfilestyle2/如果字符串为空，返回空值chr=Server.HtmlEncode(chr);/对字符串进行HTML编码chr=chr.Replace(,/返回加工后的字符串,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,将该函数放在程序中与其它事件并列，这里放在Page_Load之后。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,然后将Button1_Click事件中插入数据的参数cmd.Parameters.Add(Title,SqlDbType.NVarChar).Value=TextBox1.Text;cmd.Parameters.Add(NewsBody,SqlDbType.Text).Value=TextBox2.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=texttohtml(TextBox3.Text);,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.4.2新闻发布代码设计,对于页面合法性与提示信息，修改Button1_Click程序为：if(Page.IsValid)/进行页面合法性验证/清除提示内容Label1.Text=;Label2.Text=;Label3.Text=;原程序内容elseLabel3.Text=请填写新闻标题;,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.5新闻浏览功能的实现,新闻浏览是根据用户选择的新闻，打开新闻详细内容的界面，显示新闻的具体内容，同时将新闻图片和附件以适当的形式展示出来。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.5.1新闻浏览界面制作,打开VisualStudio2008，添加新项，选择Web窗体，文件名为newsdetail.aspx，放置Label用于显示新闻标题（lbltitle）、发布人(lblauthor)、发布日期(lbldate)、新闻内容(lblbody)，这里对每个Label控件进行了改名，并设置其Text属性为空，放置Image控件(Image1)用于显示新闻图片，最后放置一个Hyperlink控件(Hyperlink1)，修改其Text属性为“下载附件”用于下载新闻附件。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.5.2新闻浏览代码设计,在Page_Load事件中进行代码设计，这里为了防止用户盗链，即没有通过新闻管理页面而直接输入网址产生错误，通过判断请求参数来进行处理。protectedvoidPage_Load(objectsender,EventArgse)if(Request.QueryStringnewsid!=null)/如果请求页面/存在请求参数，则进行数据读取elseResponse.Redirect(error.aspx);/页面定位到出错界/面?，读者可以自行设计错误页面。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.5.2新闻浏览代码设计,然后对if分支进行程序完善，进行数据库连接，定义sql命令，读取数据，进行判断。详细代码参考书中内容。protectedvoidPage_Load(objectsender,EventArgse)if(Request.QueryStringnewsid!=null)/如果请求页面存在请求/参数，则进行数据读取Stringconstr=datasource=(local);database=NewsDB;userid=sa;password=;SqlConnectionconn=newSqlConnection(constr);/定义连接对/象conn.Open();/打开连接/下面代码是定义命令SqlCommandcmd=conn.CreateCommand();cmd.CommandText=select*fromNewswhereNewsID=NewsID;,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.5.2新闻浏览代码设计,/下面代码给命令参数赋值cmd.Parameters.Add(NewsID,SqlDbType.NVarChar).Value=Request.QueryStringnewsid.ToString();/执行命令SqlDataReaderrd=cmd.ExecuteReader();/定义阅读器对象接收/命令执行的结果（数据集合）if(rd.Read()lbltitle.Text=rdTitle.ToString();/新闻标题lblauthor.Text=rdAuthor.ToString();/发布人lbldate.Text=rdNewsDate.ToString();/发布日期lblbody.Text=rdNewsBody.ToString();/新闻内容if(rdNewsPhoto.ToString()!=)/新闻图片存在Image1.Visible=true;/显示图像控件Image1.ImageUrl=/upimage/+rdNewsPhoto.ToString();/指定路径,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.5.2新闻浏览代码设计,elseImage1.Visible=false;/隐藏控件if(rdNewsFile.ToString()!=)/新闻附件存在HyperLink1.Visible=true;/显示超级链接控件HyperLink1.NavigateUrl=/upfile/+rdNewsFile.ToString();/链接路径elseHyperLink1.Visible=false;/隐藏控件rd.Close();/关闭阅读器conn.Close();/关闭连接,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.5.2新闻浏览代码设计,elserd.Close();conn.Close();Response.Redirect(error.aspx);/页面定位到出错页面。elseResponse.Redirect(error.aspx);/页面定位到出错页面，读者可/以自行设计错误页面。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.5.2新闻浏览代码设计,直接调试程序，显示error页面无法找到，因为我们没有建立这个页面，打开新闻管理页面，再调试程序，选择一条新闻，单击详细内容。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6新闻管理模块界面的美化,新闻管理模块的界面美化采用流行的DIV+CSS的布局方式进行美化，需要结合VisualStudio2008和DreamweaverCS5进行美化设计，使用DreamweaverCS5设计布局页面，使用VisualStudio2008测试美化效果。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,1.统一界面的设计通过前面的设计，我们得到了网页新闻显示界面，而这只是从技术的角度实现，真正要到成品还需要进一步的美化。我们采用统一的布局来实现界面效果。实际的工作中，存在这样的问题，美工已经把新闻管理的界面设计完毕，并设计成html格式的文件，往往这是很常见的情况，我们可以直接采用这个文件进行修改，形成模板，然后将其它的页面套用上去，这样的操作有助于我们实际操作能力的提高。这里设置了网页的统一框架，而将网页内容放到右侧中间的空白区域中，体现网页设计一致性原理。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,1.统一界面的设计,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,1.统一界面的设计实现统一框架有两种方法：使用框架结构嵌入网页。使用母版。通常情况下，使用框架结构比较灵活，但要注意内容溢出时的滚动条问题，为了不出现滚动条，需要对内容进行修剪或裁切。这里介绍使用框架的方法，母版的方法将在第18章进行介绍。首先在DreamweaverCS5中设计网页newsadmin.html文件，这个页面可以由美工设计完成，也可以由美工设计完效果图后由技术人员利用Dreamweaver软件实现，注意需要将所用到的图片连同文件夹一起复制到网站文件夹中。设计指导：实际应用中可以将newsadmin.html设计成动态网页newsadmin.aspx，以便于安全性的设置。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,1.统一界面的设计下面进行网站美工的设计制作，首先将配套光盘中“源文件15”中的“News美化前”文件夹复制到D盘，即网站文件夹路径为“D:News美化前”，然后将配套光盘中“源文件15素材”中的所有文件和文件夹复制到“D:News美化前”文件夹中。打开DreamweaverCS5软件，新建站点“新闻管理”，定义站点文件夹为“D:News美化前”。然后打开站点中的newsadmin.html文件，单击网页右侧的框架位置，选择菜单“插入|HTML|框架|IFRAME”，得到代码：然后修改代码为：详细步骤请参考配套光盘视频教程中的讲解“视频教程15新闻管理2-美化.wmv”。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,1.统一界面的设计,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,1.统一界面的设计选择新闻发布和新闻管理图片，设置超级链接的地址：新闻发布：NewsAdd.aspx，目标“mainframe”。新闻管理：Default.aspx，目标“mainframe”。设计指导：一定要选择目标“mainframe”，这是框架的命名，只有选择了目标，单击超级链接后，链接文件才会在目标框架中打开。使用VisualStudio2008中调试newsadmin.html文件，结果如图所示。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,2.DIV+CSS网页布局我们这里采用流行的DIV+CSS的布局方式对新闻管理页面进行美化。在进行新闻管理页面的美化之前，在VisualStudio2008中打开“D:News美化前Default.aspx”文件，选择GridView控件，单击智能标记中的“自动套用格式|移除自动套用格式”命令，保存文件。然后，使用DreamweaverCS5软件打开该文件，在设计视图中红色虚线范围中“即Form表单”单击鼠标，单击插入面板中的“插入Div标签”（或选择菜单“插入|布局对象|Div标签”），在插入Dibble标签对话框中设置插入为“在插入点”，ID为“title”，如图所示。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,2.DIV+CSS网页布局再次在插入面板中单击“插入Div标签”，在插入Div标签对话框中设置插入为“在标签之后”，选择标签为，ID为“datatable”，插入Div标签后的界面如图所示。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,2.DIV+CSS网页布局删除Div标签中的提示信息，在title标签插入图片，图片文件路径为“D:News美化前imagestitlelogo.jpg”和“D:News美化前imagesnewssend.jpg”，将第一个控件（即带有黄色ASP标志的控件GridView1）拖动到datatable标签中，第二个控件（即数据源控件SqlDataSource1）是隐藏的，所以不用处理。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,3.主体bodyCSS样式设计在DreamweaverCS5设计视图中，单击鼠标右键，选择“CSS样式|新建”，新建CSS样式，选择标签样式，选择选择器为body，文件位置为新建样式表文件，保存文件名为newscss.css。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,4.标题区域titleCSS样式设计新建CSS样式，类型为ID，名称为title。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,5.数据表区域datatableCSS样式设计新建CSS样式，类型为ID，名称为datatable。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,6.表格dataCSS样式设计新建CSS样式，类型为“类”，名称为data。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,进入css样式文件中，添加border-collapse:collapse;使表格线呈单线并去除间距，相邻边被合并，选择GridView控件，设置属性面板中css样式为data。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,7.表格标题thCSS样式设计接下来进行表格数据的进一步美化，新建CSS样式，设置规则类型为“复合内容”，选择器名称为.datath，即设置data（表格数据）项目下的th（标题）属性。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,7.表格标题thCSS样式设计,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,8.表格单元格tdCSS样式设计新建CSS样式，设置规则类型为“复合内容”，选择器名称为.datatd，即设置data（表格数据）项目下的td（单元格）属性，类型属性中设置行高Line-height为26px，区块属性中Text-align（文本对齐）为center居中。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,9.超级链接CSS样式设计我们发现，网页的超级链接显示为默认的蓝色，因此需要修改为和谐的灰色，当鼠标划上去的时候显示红色。新建CSS样式，设置规则类型为“复合内容”，选择器名称为.dataa:link,.dataa:visited（这里一起设置链接和访问过两种状态，故中间用逗号隔开），设置类型属性中Text-derection（文本修饰）为none（无），即去掉超级链接的下划线，Color为#CCC，即修改颜色为灰色。新建CSS样式，设置规则类型为“复合内容”，选择器名称为.dataa:hover,.dataa:active（这里一起设置鼠标划上和激活两种状态），设置类型属性中Text-decoration（文本修饰）为none（无），去掉超级链接的下划线，Color为#F00，即修改颜色为红色。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,9.超级链接CSS样式设计我们发现，网页的超级链接显示为默认的蓝色，因此需要修改为和谐的灰色，当鼠标划上去的时候显示红色。新建CSS样式，设置规则类型为“复合内容”，选择器名称为.dataa:link,.dataa:visited（这里一起设置链接和访问过两种状态，故中间用逗号隔开），设置类型属性中Text-derection（文本修饰）为none（无），即去掉超级链接的下划线，Color为#CCC，即修改颜色为灰色。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.1新闻管理界面的美化,在VisualStudio中调试：,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.2新闻发布界面的美化,新闻发布同样可以CSS样式进行美化，利用DIV进行标题（title）与表单内容（formitem）的分割，标题部分插入图片，后设置底部横线，表单部分利用表格进行版式编排，利用CSS样式进行版式编排与美化。1.附加样式表使用Dreamweaver软件打开该文件NewsAdd.aspx，在设计视图中单击鼠标右键，选择“CSS样式|附加样式表”选项，在链接外部样式表对话框中选择外部样式表文件为网站中的newscss.css文件。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.2新闻发布界面的美化,2.DIV+CSS布局在网页中（表单标签内）插入Div标签（title、formitems）进行布局。在网页中（表单标签内）插入Div标签（title、formitems）进行布局。删除Div标签中的提示信息和新闻发布文字，在title标签插入两张图片，图片文件路径为“D:News美化前imagestitlelogo.jpg”和“D:News美化前imagesnewsadd.jpg”。在formitems标签中插入表格，设置行6，列2。把信息文字和控件拖动到表格相应位置。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.2新闻发布界面的美化,2.DIV+CSS布局,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.2新闻发布界面的美化,3.设置css样式由于newscss.css文件中已有title的样式，这里可以直接使用。新建css样式formitem，用户控制表单样式，设置方框属性中width为680px，Padding为0，Margin中Top为10px，Left为20px，其余为0px。新建复合样式#formitemtable，用于控制表格样式，设置类型属性中行距为26px，方框属性中width为500px，Padding和Margin为0。新建复合样式#formitemtabletrtd，用于设置表格的单元格样式，设置边框属性中Bottom（底部）样式style为dashed（点）,width为1px，color为#CCC。,动态网页设计教程美工与技术,机械工业出版社,CompanyLogo,15.6.2新闻发布界面的美化,3.设置css样式下面实现表格内容的对齐与宽度设置，在代码视图中，对左侧一列标识逐个添加css标识class=”c1”，右侧一列，标识添加c