第三章 网页设计ppt课件

第三章网页设计 3 1静态网页设计 所谓 静态 是指网站的网页内容 固定不变 当用户浏览器通过互联网的HTTP协议向WEB服务器请求提供网页内容时 服务器仅仅是将原已设计好的静态HTML文档传输给用户浏览器 3 1静态网页设计 静态页面只是显示 不提供交互功能 准确的说 静态网页的内容不会发生改变 3 2ASP NET网页介绍 3 2 1表单的基本概念ASP NET引入了WEB表单的概念 HTML表单只包含了表单内部控件和相应的布局信息 WEB表单中则包含了表单内部控件 相应的布局信息及数据提交后的数据处理代码 3 2ASP NET网页介绍 WEB表单允许在服务器上处理表单中的控件 这样表单中的任何控件都可以产生一个事件 另外 使用HTML表单时 如果提交数据后进入其他页面 当再回到这个页面时 所有的输入数据都丢失了 因为HTTP是无状态的 无法保持这些数据 但如果用WEB表单在服务器端处理这些控件 就不存在数据丢失的问题 3 3服务器控件概述 3 3 1服务器控件的定义服务器控件是一种在服务器端完成的控件 服务器端在处理完控件动作后 再生成标准的HTML文件发送给客户端 服务器控件在页面中使用包含属性runat server 的声明性标记 3 3服务器控件概述 3 3 2服务器控件分类 3 3服务器控件概述 3 3 3服务器控件的创建1 在设计视图中创建服务器控件2 在源视图中创建服务器控件 3 3服务器控件概述 3 3 4服务器控件的属性 事件和方法在ASP NET中 所有的控件都是用类实现的 可以看作一个对象 都可以有自己的属性 方法和事件 3 3服务器控件概述 1 设置控件的属性设置控件的属性将定义其外观和行为 有如下两种方式设置控件属性 在 设计 视图中 选择控件 然后在 属性 窗口中设置属性在 源 视图中 在控件的元素标记中置入插入点 然后在 属性 窗口中设置属性 3 3服务器控件概述 2 服务器控件的标识可以利用每个服务器控件的ID属性和name属性标识该控件 3 3服务器控件概述 3 服务器控件事件服务器控件的基本事件及其对应的控件 3 3服务器控件概述 若希望服务器控件的事件引发即使发送 必须将控件的AutoPostBack属性设置为true 即当用户单击按钮或选择改变时 页面会自动提交给服务器 服务器对新提交页面的信息进行处理 再将运行结果发回客户端 3 3服务器控件概述 所有事件都传递两个参数 第一个参数sender提供对引发事件的对象的引用 第二个参数e传递特定于要处理的事件的对象 第二个参数通常是EventArgs类型 但对于某些控件而言是特定于该控件的类型 3 4HTML服务器控件 3 4 1HTML控件概述1 HTML控件 在创建站点时 有时不需要服务器对某些控件做任何事 2 HTML服务器控件 默认情况下 服务器无法使用纯粹的HTML控件 这些控件元素会被视为不透明文本并传输给浏览器 只有将HTML元素转换为HTML服务器控件 才将其公开为可在服务器上编程的元素 开发人员则能够对其进行编程控制 3 5标准控件 3 5 1用于文本输入和显示的标准控件1 Label控件Label控件主要用于文本的显示 在网页的固定位置显示文本 3 5标准控件 2 TextBox控件TextBox控件是一个可以输入单行文本 密码或者多行文本的控件 默认情况下 TextBox控件的TextMode属性是SingleLine 可以修改为MultiLine或Password 3 5标准控件 3 5 2按钮控件1 Button控件Button控件是一个标准的按钮提交控件 一般用来提交WEB表单 3 5标准控件 例如 如图所示 制作网页 单击取消按钮时文本框的内容置空 3 5标准控件 2 LinkButton控件使用LinkButton控件可在网页上创建超链接样式的按钮 3 5标准控件 例如 如图所示 制作网页 单击注册后连接到另一页面 3 5标准控件 3 ImageButton控件ImageButton控件用于提交页面 该控件在页面上显示的是一副图像 并能根据用户单击位置提供X坐标和Y坐标 3 5标准控件 例如 如图所示 制作网页 3 5标准控件 3 5 3用于选择的列表控件当需要获取用户信息时 最简单的方法是使用TextBox控件 如果要输入的数据只有若干固定的选择时 可将所有供选择的信息在页面中排列出来 让用户通过单击来实现对数据的获取 3 5标准控件 1 CheckBox控件和CheckBoxList控件CheckBox和CheckBoxList控件都是为用户提供了一种在二选一选项之间切换的方法 当用户选中这个控件时 表示输入的是True 当没有选中这个控件时 表示输入的是False 3 5标准控件 当用户选中一个CheckBox控件时 该控件将引发一个事件 有下面两种处理方式 如果不需要直接对控件的选择事件进行响应 只是需要知道复选框后的状态 则只需要在窗体发送到服务器后测试复选框 判断CheckBox控件的Checked属性 如果值为True 则表示复选框已选定 3 5标准控件 如果需要知道用户是否更改控件的值 则需响应该事件 为控件的CheckedChanged事件创建一个事件处理程序 默认情况下 CheckedChanged事件并不马上导致向服务器发送页 而是当下次发送窗体时在服务器代码中引发此事件 若要使CheckedChanged事件引发即时发送 必须将CheckBox控件的AutoPostBack属性设置为True 3 5标准控件 例如 如图所示 制作网页 当复选框被选中时在Label中显示 复选框被选中 当复选框未被选中时在Label中显示 复选框未被选中 3 5标准控件 CheckBoxList控件是一个CheckBox控件组 当需要显示多个CheckBox控件 并且对于所有控件的处理方式都相似时 使用这种控件就十分方便 3 5标准控件 CheckBoxList有一个Items集合 该集合的成员和列表中的每一项相对应 要确定选中了哪些项 应测试每项的Selected属性 3 5标准控件 与单个CheckBox控件相反 当用户选中列表中的任意复选框时 CheckBoxList控件都将引发SelectedIndexChanged事件 默认情况下 此事件并不导致向服务器发送窗体 但可以通过将AutoPostBack属性设置为True来指定此选项 与单个CheckBox控件一样 更常见的做法是在通过其他方式发送窗体之后测试CheckBoxList控件的状态 3 5标准控件 例如 如下图所示 制作网页 3 5标准控件 2 RadioButton控件和RadioButtonList控件RadioButton控件和RadioButtonList控件为用户提供从互相排斥的选项中进行选择的方法 每次只能选择一个单选按钮 3 5标准控件 可以用下列方法创建分组的单选按钮 先向页中添加单个的RadioButton控件 然后将所有这些控件手动分配到一个组中 这种情况下 该组可为任意名称 具有相同组名的所有单选按钮视为单个组的组成部分 向页中添加一个RadioButtonList控件 该控件中的列表项将自动进行分组 3 5标准控件 例如 如图所示 制作网页 3 5标准控件 例如 如图所示 制作网页 3 5标准控件 3 ListBox控件和DropDownList控件ListBox控件提供的是单选或多重选择列表 允许用户从预定义的列表中选择一项或多项 使用ListBox控件时 只要改变它的SelectionMode属性值就能实现CheckBoxList控件和RadioButtonList控件的功能 3 5标准控件 ListBox控件的属性 Rows 用以指定一次显示多少项 SelectionMode 设置为Single表示单选 设置为Multiple表示多选 按住Ctrl或者Shift实现多选 3 5标准控件 DropDownList控件是将选项显示为下拉列表 并从中进行单项选择 3 5标准控件 例如 如图所示 制作网页 3 5标准控件 3 5 4HyperLink控件HyperLink控件主要用于实现超文本链接 使用户可以在应用程序中的页之间移动 可以以文本方式或图形方式呈现HyperLink控件 与大多数服务器控件不同的是 在用户单击HyperLink控件时并不会在服务器代码中引发事件 3 5标准控件 HyperLink控件常用的属性 3 6高级控件 3 6 2Calendar控件Calendar控件就是日历控件 负责在页面上显示日历并接受用户选择日期的操作 当需要在网页中显示日期或者需要用户输入或确认日期时 就需要这样一个控件 3 6高级控件 使用Calendar控件可以执行以下操作 显示和选择日期 该控件一次显示一个月份中的日期 同时显示六周 用户可在日历中定位到任意一年中的任意一天 也可以选择多个日期 包括整周或整月 3 6高级控件 启用日期选定 允许用户通过单击特别日期选定它 如果启用了日期选择 则日历的每一天都包含一个LinkButton控件 单击该控件时 会引发某个事件 如果启用了周选择或月份选择 则一列链接将添加到日历的左侧 以使用户能够指定要选择的周或月份 3 6高级控件 自定义日历的外观 通过设置日历的属性可以更改日历的颜色 尺寸 文本以及其他的可视特性 3 6高级控件 捕获用户与Calendar控件之间的交互 当用户选择单个日期或日期范围时 Calendar控件引发SelectionChanged事件 当用户定位到一个新月份时 该控件引发VisibleMonthChanged事件 通过为这些事件创建方法 可确定用户选定了哪个日期或哪些日期并作出适当的响应 3 6高级控件 在Calendar控件中显示数据库信息 可以为控件的DayRender事件创建一个方法 该事件在呈现当前日历月份中的每个日时引发 在该事件的方法中 可从数据源中提取信息 并将这些信息添加到向浏览器发送的流中 3 6高级控件 1 日期获取模式Calendar控件有4中基本日期获取模式 以指定用户在控件中选定日 周或整个月份 通过控件的SelectionMode属性来实现 3 6高级控件 例如 如图所示 制作网页 3 6高级控件 3 6 2MultiView和View控件View控件是视图控件 MultiView控件是多视图控件 两个控件都属于容器控件 通常一起使用 提供一种可以方便显示信息的替换视图的方式 View控件是一个WEB控件的容器 其中包含了任何需要显示在页面中的内容 如HTML代码 服务器控件等 3 6高级控件 MultiView控件是为了显示View控件而制定的工具 包含多个View控件 可以在一个页面上设置几个View控件 以显示不同的视图 但页面一次只能显示一个视图 通过MultiView控件来选择把什么样的视图呈现给用户 3 6高级控件 3 6 4Image和ImageMap控件Image控件用于在网页中显示图像 该控件不支持任何事件 如不响应鼠标单击事件 3 6高级控件 ImageMap控件是图片地图控件 可以在一副图片上设置很多热区 3 6高级控件 3 6