ASP.NET动态网页设计 (C#版)一、 动态网页概述 什么是动态网页？一个网页是否精美，并 不是动态网页的范畴，动态网页主要体现 在功能方面。 动态网页的最大特点是存在交互性，根据 用户提交的内容、时间、方式等信息返回 对应的结果。 1.1 从静态网页发展到动态网页 单纯使用静态网页技术建设网站，在早期 较为流行，虽然网页中包括有文字和图片 ，但是只要不改变设计，网页的显示信息 是不会变化的。访问静态网页的过程 访问动态网页的过程 1.2 “问候语”案例 当Windows系统栏显示时间为9:00时，显 示效果如图所示。 1.2 “问候语”案例 当Windows系统栏显示时间为14:00时， 显示效果如图所示。 操作步骤 1. 创建解决方案 2. 编写代码if (DateTime.Now.Hour HTML文件开始 HTML文件的头部开始 HTML文件的头部内容 HTML文件的头部结束 HTML文件的主体开始 HTML文件的主体内容HTML文件的主体结束HTML文件结束编写HTML文件的注意事项(1)HTML文件使用“”符号夹着指令，称为标记，大部分 的标记都是成对使用，结束的标记是在开始的标记前加一个 “/”(斜杠)。 (2)HTML标记可以嵌套，例如： 我的第一个HTML文件 (3)HTML标记不区分大小写，例如：、 都代表相同的标记。 (4)Enter键和空格键在HTML文件显示时并不起作用。如果需 要强迫换行，可以使用标记；如果需要多个空格，可以 使用“ ”符号代码(注意：分号不能省略)。 (5)HTML文件的注释是以“”结束，浏览器将会 在显示时忽略注释行，如下所示：3.3 “个人简历”案例 页面显示效果如图所示。 操作步骤 1.编写页面代码个人简历个人简历姓名：张健性别：男 爱好：运动读书听音乐（续）优点：待人诚恳 做事细心勤于思考 积极进取参与社会活动及获奖情况03-04年获优秀学生干部04-05年获二等奖学金座右铭：走自己的路，让别人说去吧！1.字体与标题 字体标记 ：更改页面中的字体、 字号和颜色，其属性见表3-1所示。 表3-1 标记 的属性属性描述Face字体(如果有多个字体使用“，”分隔)Size字号(范围为 17，默认字号为3，也可以是+1+7、-1-7 ，表示比默认字号大几级或小几级) Color颜色(其值可以使用英文颜色名称或十六进制的颜色值)1.字体与标题 标题文字标记：可以建立文件内容 的主标题、次标题和小标题的文字效果。基本语法如下： ， n=16 2.段落与换行 段落标记 ：可以使用成对的标记 来包含段落，也可以使用单独的标记 来划分段落。 段落标记可以使用Align属性来实现段落的 水平方向左、中、右的对齐，用法同 标记。 换行标记 3.无序列表与有序列表 无序列表的列表符号可以通过来进行 设定。语法结构如下：其中，value的值见表3-2所示。表3-2 无序列表的类型值描述 disc实心小圆点 circle空心小圆点 square实心小方块3.无序列表与有序列表 有序列表使用数字或英文字母来记录项目的顺 序。语法结构如下： 其中，类型的值见表3-3所示。表3-3 有序列表的类型值描述 1数字1、2、3(此为默认值) a小写字母a、b、c A大写字母A、B、C i小写罗马数字、 I大写罗马数字、4.预定格式 如果有一段已经编排好的段落内容，并且 希望直接按照原编排格式显示于HTML文 件中，此时可以使用预定格式标记 ，它可以保留文字在源代码中的格式。 5.加粗、倾斜与下划 线 表现文字粗体效果 标记或标记 表现文字斜体效果 标记或标记 表现文字下划线效果 标记 6. 与 标记的对象在显示效果上，会独立 成一行 。 标记的对象在显示上会和旁边的 图文位于同一行上。 7.水平线 水平线标记的属性见表3-4所示。 表3-4 的属性属性描述 Width水平线的宽度(可以使用绝对 像素，也可以使用 百分比为单 位) Size水平线的高度 Color水平线的颜色 Align水平线的水平对齐 方式(取值为 LEFT、CENTER 、RIGHT) NoShade去掉水平线阴影8.图片 图片标记属性见表3-5所示。 表3-5 的属性属性描述 Src指定图片的路径 Alt图片的提示文字 Width、Height调整图片显示的大小 Border设置图片边框，默认为 四边无框线 Vspace、Hspace设置图片的垂直间距、水平间距 Align设置图片与文字之间的排列(取值为 top、middle、 bottom、left、right、absbottom、absmiddle、baseline 、texttop)9.滚动效果 标记属性见表3-6所示。 表3-6 的属性属性描述 Direction设定文字滚动的方向(取值为up、down、left、right) Behavior设定文字滚动的方式(取值为scroll、slide、alternate，分 别为循环往复、只进行一次滚动、交替进行滚动) Scrollamount设置文字滚动的速度 Scrolldelay设置每一次滚动时产 生的时间延迟 Loop设置文字滚动的循环次数 Width、Height设置文字滚动的区域 Bgcolor设置滚动文字的背景颜色3.4 “网站导航条”案例 页面显示效果如图所示。操作步骤 1.编写页面代码网站导航条个 人简历用户注 册联系我们（续）个人简历用户注册联 系我们 2.预览页面1.表格标记结构2.表格的修饰 对表格进行修饰的常见属性见表3-7所示。表3-7 的属性属性描述 Border设置表格框线的宽度，如果为0，表格将不显示框线 Width、Height设置表格的宽度、高度 BgColor设置表格的背景色 BorderColor BorderColorLight BorderColorDark设置表格框线的颜色(上下左右边的框线) 设置表格亮边框颜色(左上边的框线) 设置表格暗边框颜色(右下边的框线) BackGround设置表格的背景图片 CellSpacing设置单元格间距(单元格与单元格之间的距离) CellPadding设置单元格边距(单元格内容和边框之间的距离) Align设置表格的水平对齐 方式2.表格的修饰 要实现水平方向上多个单元格的合并，可以通 过行合并属性RowSpan，语法结构如下： 其中，value代表单元格合并的行数。 要实现垂直方向上多个单元格的合并，可以通 过列合并属性ColSpan，语法结构如下： 其中，value代表单元格合并的列数。3.超链接 超链接标记的属性见表3-8所示。 表3-8 的属性 属性描述 Href指定链接地址 Name建立书签 Target指定链接的目标窗口，其取值参见下页 表3-93.超链接表3-9 Target属性取值属性值描述 _blank在新窗口中显示文件内容 _self在原窗口中显示文件内容 _top在原窗口中显示，如果是框架页，取消框架以 全窗口显示 _parent如果为框架页，就在父框架显示文件内容 在HTML语言中，可以修改的链接状态共有3中， 见表3-10所示。 在标记中设置修改链接颜色的属性，其 语法结构如下：3.超链接表3-10 链接的不同状态链接属性描述 Link设定默认的没有单击过 的链接文字颜色 ALink设定鼠标按下链接文字时的链接文字颜色 VLink设定单击过 后的链接文字颜色3.5 “用户注册(HTML版)”案例 页面显示效果如图所示。操作步骤1.编写页面代码用户注册(HTML版)用户注册昵称：密码：性别：男 女兴趣：运 动 读 书 听音乐 （续）所在地：北京上海广州南京沈阳上传图片：备注： 2.预览页面1.表单的结构2.文本框、密码框和文本区域 文本框的语法结构如下： 密码框的语法结构如下： 文本区域的语法结构如下：3.单选框与复选框 单选框的语法结构如下：其中CHECKED属性表示此项被默认选中， Value表示选中项目后传送到服务器端的值。 复选框的语法结构如下：4.下拉列表 下拉列表的语法结构如下：选 项名称 选项名称5.文件框 文件框主要是用来浏览客户端的文件列表 ，然后将选择的文件上传到Web服务器， 其语法结构如下：6.隐藏框 隐藏框在页面中对用户是不可见的，用来 传送数据给Web服务器。浏览者提交表单 时，隐藏框的信息也被一起发送到服务器 。其语法结构如下：其中Value值用于设定传送的值。 7.按钮 表单中的按钮可以分为4种：普通按钮、提交按 钮、重置按钮、图片按钮。其语法结构如下：其中Value值代表显示在按钮上面的文字。 图片按钮的语法结构如下：其中Src属性代表图片的路径。3.6 框架结构 框架集 框架页是一种浏览器窗口的分割技巧，将 原来只显示一份HTML文件的浏览器窗口 ，分割成几个窗口，每一个窗口都可以显 示一份HTML文件，每一个窗口称为一个 框架。 框架集框架页架构如下所示：基本框架分割框架集 浏览器窗口的分割方式有以下两种：左右分割 窗口、上下分割窗口，其语法结构分别如下：Value定义各个框架的宽度值，单位可以是像素 ，也可以是百分比。 框架标记的语法结构如下所示：其中，Src属性设置框架显示的文件路径， Name属性设定框架页面的名称，以配合超链接 使用。内嵌框架 内嵌框架标记不是分割窗口， 而是如同图片和表格一样，可以和文字编 排在一起，和其他HTML标记一样放在 标记间。语法结构如下：四、开发实例利用ASP.NET技术开发一个具有后台管理功能的“新闻发 布系统”网站，该网站应具备如下功能。 (1) 管理员输入用户名和密码，登陆成功后可以进入网站后 台对新闻进行管理。 (2) 管理员能发布新闻，发布的新闻包括标题、内容、提交 时间、新闻图片、附件。 (3) 管理员能够根据新闻的标题或者新闻的发布时间查找新 闻，并能对查找到的新闻进行修改或者删除等操作。 (4) 管理员可以修改密码。 (5) 用户访问网站首页，可以浏览网站上的所有新闻。 (6) 网站要求有较为统一的风格.网站结构4.1 设计“新闻发布系统”程序前的思 考(1)如何合理的设计网站目录结构，使得信息能够 被有效的分类，同时访问控制又比较方便。由于 需要保存新闻的图片和附件。 (2) 如何合理的设计数据库字段，使的信息维护和 检索都较为方便。 (3) 采用怎样的导航方式，使得操作界面清晰，便 于用户操作。 (4) 采用怎样的设计方法，使得页面风格统一。 (5) 采用怎样的开发方法，开发效率高，程序又不 失灵活性。1) 数据库设计2) 创建网站目录结构 新建三个文件夹，名字分别叫picture 、 attachment、admin。 3) 创建母版页4) 发布新闻创建发布新闻页面，设计界面 实现代码 try /获取连接字符串string connectionString = ConfigurationManager.ConnectionStrings“aspnetdbConnectionString “.ToString();SqlConnection conn = new SqlConnection(connectionString);conn.Open(); /打开连接SqlDataAdapter oda = new SqlDataAdapter(“SELECT title,content,submitdate,picture,attachment FROM news “, conn);DataSet ds = new DataSet();oda.Fill(d