项目5 新闻标题的显示

2020-02-27 280浏览

1.项项目目55 新新闻闻标标题题的的显显示示《 ASP.NET 动态网页设计项目教程》主编：郭建东
2.教学目标
3.• 不同类型的网站中，或多或少存在着新闻信息，新闻标题格式设置是否美观会影响整个页面的显示效果。网站主页面中除新闻版块外还可能有友情链接、热点信息等内容，这些版块文字的设置与新闻标题设置有相似之处，另外新闻标题内容区除了标题内容外，还可能有日期显示、前缀图片等信息，如果将这些附加信息添加到标题栏，并与标题融为一体也是前端设计人员需要完成的工作。
4.任务 1 设计新闻表数据库及读取新闻标题任务描述： • 本项目以公司网站其中的一个新闻部分作为研究子项目，分析项目内容，建立数据库，并建立关联的数据库表。新闻标题及内容等信息存储在数据库后，需要将内容显示到网页上，可通过数据控件 GridView 、 DataList 、 ListVie w 等显示所需要的内容，同时对内容的显示形式进行设置。
5.1.1 关键知识 : 数据库设计与数据控件的应用 1.1.1 数据库设计与导出
6.1.1.2 数据控件模板及样式的设置一、数据控件模板字段设置 1 、非模板控件的模板字段转换
7.2 、模板控件直接进行模板编辑
8.二、数据控件样式的设置，包括
9.1.2.1 建立并导出数据库 • 新闻表数据库 news 的建立 , 包括文件表、类型表和评论表。
10.• 脚本的导出可导出带数据的脚本，也可以导出不带数据的脚本
11.1.2.2 读取数据库中文件标题 • 从数据库中读取新闻标题，效果图如下，步骤见教材任务实施：
12.任务 2 使用查询字符串传递新闻标题参数任务描述： • 点击新闻标题后，需要跳转到另一页面查看该新闻标题对应的详细内容信息，在页面跳转同时需要传递与该条新闻相关的参数，如标题名称或文件编号等。 • 新闻标题以链接的形式显示后，往往有默认的链接样式，但默认的链接样式可能不是满意的链接样式，因此需要对标题链接重新设置链接样式。
13.2.1 关键知识：查询字符串及链接样式设计 2.1.1 使用查询字符串传递参数 • 传递一个参数示例：可以使用查询字符串，通过 URL 将数据提交到另一页面上，传递一个参数如下面代码： "~/readfile.aspx?fileid="+Eval("fileid") 在上面的 URL 路径中，查询字符串以问号 ? 开始，跟一个名为“ fileid” 、值为 Eval("fileid") 的内容； • 传递二个参数代码示例如下： this.Response.Redirect ("~/default.aspx?username="+thi s.usernametxt.Text +"&psd="+ this.txtPassWord.Text +"); 这里同时传递了二个参数，一个名为 username ，另一个名为 psd ，其值为文本框 usernametxt.Text 的文本值和密码框 txtPassWord.Text 的文本值。
14.2.1.2 使用 HttpRequest 获取查询字符串参数值可使用 HttpRequest 对象的 Params 属性读取查询字符串，也可以用 QueryString 属性读取查询字符串值。例如，获取上面 URL 路径中查询字符串 fileid 的值，可使用下面的表达式： • Request.Params["fileid"] 或 • Request.QueryString["fileid"]
15.2.1.3 标题链接样式设计 • 设置基于该类样式的复合样式 .newsTitl e a :link,.newsTitlea:visited和复合样式 .newsTitlea:hover。
16.2.2 任务实施：设置新闻标题链接样式并传递标题参数 • 2.2.1 设置新闻标题链接并传递参数 • 将标题转换成链接后的效果图
17.2.2.2 修改标题链接样式 • 修改标题链接样式后的效果图
18.任务 3 新闻标题的修改任务描述： • 一般来说在网页中都会设定相应宽度的位置存放新闻标题信息，为了不影响网页的布局，当标题长度超过了网页设定的宽度时，需要在将标题从数据库读到网页时截掉后面的一部分字符。 • 在网页中往往还会在新闻标题的后面添加上新闻发布日期，在标题的前面添加上前缀图片，本任务除了对新闻标题长度进行控制外还需要在标题处添加上日期和前缀图片。
19.3.1 关键知识 3.1.1 字符串子串的获取 3.1.2 标题日期格式设置 • 常用的日期显示格式可设置为 yyyy-MM- dd 显示模式 3.1.3 空模板字段
20.3.2.1 截短太长的标题标题截取后的效果图：
21.3.2.2 添加标题日期 • 添加日期后的效果图
22.3.2.3 添加标题前缀图片 • 在文件标题前添加前缀图片效果图如下：
23.任务 4 显示前几条标题及分页显示内容任务描述： • 网页页面由于版面有限，在显示新闻标题时往往只显示最新的几条信息，其它的内容以分页形式或通过更多链接按钮进入相关链接页面获取。本任务包括： • 只显示最新 n 条记录 • 以分页形式显示标题信息
24.4.1 关键知识：数据库查询语句及数据控件的分页设置一、获取前几条数据库信息的查询语句前几条数据库信息的获取通过查询语句实现： select top n 字段名 1 ，字段名 2 ，… .from 表名…… 或 select top n * from 表名 ORDER BY 字段名 DESC 二、分页显示数据控件中带有分页设置的控件包括 GridView 、 DetailsView 、 Fo rmView 和 ListView ，前面三个控件可通过 PagerSettings 属性的 mode 设置分页模式，分页模式包括如下： Numeric ：数字显示模式 NextPrevious ：前一个 + 后一个模式 NextPreviousFirstLast ：第一个、前一个、后一个和最后一个显示模式 NumericFirstLast ：数字 + 第一个 + 最后一个显示模式。
25.4.2.1 显示最新前 8 条新闻在源代码视图中找到控件 SqlDataSource1 代码，将其中的语句： SelectCommand="SELECT [fileid], [filena me] FROM [files] ORDER BY [publishdate] DESC"
26.4.2.2 分页显示内容分页显示效果图如下：
27.分页显示效果图如下：