第三章 网页设计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.5