ch03 网页设计.ppt

1、第三章,网页设计,1,网页设计,静态页面设计 ASP.NET网页介绍 服务器控件概述 HTML服务器控件 标准控件 高级控件,2,静态页面设计,所谓“静态”是指网站的网页内容“固定不变”，当用户浏览器通过互联网的HTTP协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传输给用户浏览器。页面中的内容使用的是标准的HTML代码。 静态页面只是显示，不提供交互功能。准确地说，静态页面的内容不会发生改变。,3,HTML,HTML是网页制作的最基本要素。如果不熟悉HTML，这里介绍的就是必须了解的基本概念： HTML是一种纯文本类型的标记式语言，利用标记来标识信息，不需要

2、翻译而直接从浏览器解释执行，通过一些标记来告诉浏览器怎样显示内容。 一个标记称为一个元素，每个标记都用一对括起来，大部分标记是成对使用，只有个别的是单独使用。 每个标记都有自己的名称和属性，标记的属性告知浏览器如何显示网页。,4,【例 31】, 网页设计基础 这是H1字体 这是H2字体 这是H3字体 这是H4字体 ,5,XHTML,HTML从出现发展到今天，仍有些缺陷和不足。HTML的三个主要缺点： 太简单：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML； 不规范：由于HTML代码的不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML； 数据与

3、表现混杂：当页面要改变显示时，就必须重新制作HTML。 因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过渡的一个桥梁。,6,XHTML的特点,XHTML解决HTML语言所存在的严重制约其发展的问题。 XML是Web发展的趋势，XHTML是当前替代HTML 4.0标记语言的标准，使用XHTML 1.0，只要遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。 使用XHTML的另一个优势是：它非常严密。,7,XHTML的特点,XHTML能与其他基于XML的标记语言、应用程序及协议进行良好的交互工作。 XHTML是W

4、eb标准家族的一部分，能很好在无线设备等其他用户代理上。 在网站设计方面，XHTML有助于去除表现层代码的恶习，帮助程序员养成标记校验来测试页面工作的习惯。,8,XHTML的核心规则,标记成对使用或使用自封闭的标记（如来代替）。注意的是有些浏览器不能识别（注意/前没有空格），所以不要忘记在/前加上一个空格。 标记和属性名字必须是小写。 属性值必须封装在成对的引号中。 标记必须正确嵌套。 把所有和 ,23,服务器控件事件,可以为Web服务器控件创建事件处理程序。如在ASP.NET页面上添加一个按钮，然后为该按钮的Click事件编写事件处理程序。 与传统HTML页或基于客户端的Web应用程序中的事

5、件相比，由ASP.NET服务器控件引发的事件的工作方式稍有不同，因为与服务器控件关联的事件是在客户端触发的，但是由ASP.NET页在服务器上处理的。,24,服务器控件的基本事件,25,【例 36】,void Button1_click(object sender, EventArgs e) Label2.Text = TextBox1.Text + Label2.Text; ,26,HTML控件,在创建站点时，有时对某些控件不需要服务器端做任何事。在这种情况下，只是想在页面上添加简单的静态HTML元素。如只是决定网页上元素的位置或提供一个容器给一组元素。HTML控件工具箱中包含一系列拖放控件，

6、如Input、Table控件和div等，这些HTML控件对应着标准HTML元素。,27,HTML服务器控件,HTML服务器控件派生自命名空间System.Web.UI.HtmlControls。默认情况下，服务器无法使用纯粹的HTML控件，只有将HTML元素转换为HTML服务器控件，才将其公开为可在服务器上编程的元素。,28,HTML服务器控件,HTML服务器控件具有以下几个重要特点： 可在服务器上使用面向对象技术对其进行编程控制，这为编程开发提供了便利。 提供了一组事件，可以为事件编写事件处理程序。 自动维护控件状态。在页面窗体到服务器端往返期间，用户在HTML服务器控件中输入的值将在页面回

7、传中自动维护。 与验证控件进行交互。便于验证用户是否在控件输入了适当的信息。 允许在HTML服务器控件中自定义属性。开发人员可以将任何需要的属性添加到HTML服务器控件的属性集中，页框架将读取并呈现它们而不更改其他任何功能。,29,HTML输入控件,工具箱的“HTML”选项卡上提供多个基于HTML input元素的控件： Input (Text) 控件：input type=text元素 Input (Password) 控件：input type=password元素 Input (Button) 控件：input type=button元素 Input (Submit) 控件：input

8、type=submit元素 Input (Reset) 控件：input type=reset元素 Input (Checkbox) 控件：input type=checkbox元素 Input (Radio) 控件：input type=radio元素 Input (File) 控件：input type=file元素 Input (Hidden) 控件：input type=hidden元素,30,【例 37】,输入姓名： 输入密码： ,31,【例 37】,protected void Submit1_ServerClick(object sender, EventArgs e) if (

9、Password1 .Value=asp) span1.InnerHtml =密码正确; else span1.InnerHtml =密码不正确; protected void Reset1_ServerClick(object sender, EventArgs e) Text1.Value = ; Password1.Value = ; protected void Button1_ServerClick(object sender, EventArgs e) span1.InnerHtml = 你单击了按钮; ,32,【例 38】,请选择您的性别： 男 女 请选择您的爱好： 足球 篮球

10、乒乓球,33,【例 38】,protected void Submit1_ServerClick(object sender, EventArgs e) string str=您的爱好是：; if (chk1.Checked) str += 足球 ; if (chk2.Checked) str += 篮球 ; if (chk3.Checked) str += 乒乓球 ; span2 .InnerHtml = str; if (Radio1.Checked) span1.InnerHtml = 您是男生; if (Radio2.Checked) span1.InnerHtml = 您是女生; ,

11、34,【例 39】, ,35,【例 39】,void Button1_ServerClick(object sender, EventArgs e) File1.PostedFile.SaveAs (c:uploadupload.jpg); span1.InnerHtml= 上传完毕; ,36,【例 310】, 输入字符串： 这里显示的是隐藏的字符串,37,【例 310】,void Page_Load(object sender, EventArgs e) if (Page.IsPostBack) Span1.InnerHtml = 你上次输入的值是： + Hidden1.Value + ;

12、void Submit1_ServerClick(object sender, EventArgs e) Hidden1.Value = Text1.Value; ,38,【例 311】,您有什么问题可以留言: ,39,【例 311】,protected void Submit1_Click(object sender, EventArgs e) span1.InnerHtml = 您的留言如下: + TextArea1.Value; ,40,Select控件,Select控件是一个下拉列表控件。还可用于数据绑定。 Select控件的格式如下： Item 1 Item 2 Item 3 ,41

13、,【例 312】,void Button1_ServerClick(object sender, EventArgs e) int numrows = Convert.ToInt32(Select1.Value); int numcells = Convert.ToInt32(Select2.Value); for (int j = 0; j numrows; j+) HtmlTableRow row = new HtmlTableRow(); for (int i = 0; i numcells; i+) HtmlTableCell cell = new HtmlTableCell(); c

14、ell.Controls.Add(new LiteralControl(行 +j+, 列+i ); row.Cells.Add(cell); Table1.Rows.Add(row); ,42,Image控件,Image控件是一个图片控件。通过该控件可以设置图片的位置、宽、高、边界宽度、鼠标移过后的提示文字等属性。 Image控件的主要属性有： Align属性：设置或取得文字环绕时，图片放置的位置。 Alt属性：设置或取得说明文字。 Border属性：设置或取得边框的宽度。 Height属性：设置或取得图片的高度。 Width属性：设置或取得图片的宽度。 Src属性：设置或取得图片的URL地址

15、。,43,Label控件,Label控件主要用于文本的显示，在网页的固定位置显示文本。 Label控件的格式如下： / options表示控件的属性。,44,TextBox控件,TextBox控件是一个可以输入单行文本、密码或者多行文本的控件。默认的情况下TextBox控件的TextMode属性是SingleLine，可以修改为MultiLine或Password。 TextBox控件的格式： ,45,TextBox控件常用的属性和事件,46,【例 313】,在文本框中输入内容,将输入的内容在标签控件中显示出来: ,47,【例 313】,protected void Button1_Click

16、(object sender, EventArgs e) Label1.Text = Server.HtmlEncode(TextBox1.Text); ,48,按钮控件,标准控件中包含三种类型的按钮：标准命令按钮、超链接样式按钮和图像按钮。 当用户单击这三种类型按钮中的任何一种时，都会向服务器提交一个窗体，当前页被提交给服务器并在那里进行处理。可为下列事件之一创建事件处理程序： 页的Page_Load事件：因为按钮总是将页发送给服务器，所以该方法总是在运行。如果只提交相应窗体，单击哪个按钮并不重要，则使用Page_Load事件。 Click事件：当了解哪个按钮被单击很重要时，编写该事件的事件

17、处理程序。,49,【例 314】, ,50,【例 315】, void ImageButton1_Click(object sender, ImageClickEventArgs e) Label1.Text = 你单击了图像按钮。您的坐标是 + X为+e.X +，Y为+ e.Y; ,51,CheckBox控件,CheckBox和CheckBoxList控件都是为用户提供了一种在二选一（如真/假、是/否或开/关）选项之间切换的方法。当用户选中这个控件时，表示输入的是true，当没有选中这个控件，表示输入的是false。 CheckBox控件的格式如下： / Options表示控件的属性或事件,

18、52,CheckBox控件属性和事件,53,【例 316】, void Button1_Click(object sender, EventArgs e) if (CheckBox1.Checked = true) Label1.Text = 复选框1被选中; else Label1.Text = 复选框1未被选中; ,54,【例 317】, void CheckBox1_CheckedChanged(object sender, EventArgs e) if (CheckBox1.Checked) Label1.Text = 复选框1被选中; else Label1.Text = 复选框1

19、未被选中; ,55,CheckBoxList控件,CheckBoxList控件是一个CheckBox控件组，当需要显示多个CheckBox控件，并且对于所有控件的处理方式都相似时，使用这种控件就十分方便。 CheckBoxList控件的格式如下： ,56,【例 318】,选择你喜爱的球类运动： 篮球 足球 乒乓球 羽毛球 ,57,【例 318】,protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e) int i; string str = 您喜爱的球类运动是：; for (i = 0; i ;

20、Label1.Text = str; ,58,RadioButton控件,RadioButton和RadioButtonList控件为用户提供从互相排斥的选项中进行选择的方法。RadioButton控件与CheckBox控件相似，但在使用时通常与其他RadioButton控件组成一组，以提供一组相互排斥的选项，在一组中，每次只能选择一个单选按钮。 RadioButton控件格式如下： / Options表示控件的属性或事件。,59,RadioButton的属性和事件,60,【例 319】,选择您从上海到北京的交通工具： 火车 汽车 飞机 ,61,【例 319】,protected void R

21、adioButtonList1_SelectedIndexChanged(object sender, EventArgs e) Label1.Text = 您选择的交通工具是 + RadioButtonList1.SelectedValue; ,62,ListBox控件,ListBox控件提供的是单选或多重选择列表，允许用户从预定义的列表中选择一项或多项。使用ListBox控件时，只要改变它的SelectionMode属性值就能实现CheckBoxList控件和RadioButtonList控件的功能。 ListBox控件格式如下： ,63,DropDownList控件,DropDownLi

22、st控件是将选项显示为下拉列表，并从中进行单项选择。该控件类似于ListBox控件。不同之处在于它是在框中显示选定项，同时还显示下拉按钮，当用户单击此按钮时，将显示项的列表。,64,【例 320】, 03 04 05 06 ,65,【例 320】, 微机原理 数据结构 数据库 C语言 计算机网络 编译原理 ,66,【例 320】,void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) Label2.Text = 您是： + DropDownList1.SelectedItem.Value + 级学生; void L

23、istBox1_SelectedIndexChanged(object sender, EventArgs e) string str = ; int i; for (i = 0; i ListBox1.Items.Count; i+) if (ListBox1.Itemsi.Selected) str += ListBox1.Itemsi.Value + ,67,HyperLink控件,HyperLink控件主要用于实现超文本链接，使用户可以在应用程序中在页之间移动。可以以文本方式或图形方式呈现HyperLink控件。与大多数服务器控件不同的是，当用户单击HyperLink控件时并不会在服务

24、器代码中引发事件。 HyperLink控件的格式： text / Options表示控件的属性。,68,HyperLink控件常用的属性,69,【例 321】,搜狐网站,70,Table控件,Table控件是用来在Web窗体页上创建通用表的。每个Table控件包含一个或多个TableRow对象。依次的，每个TableRow对象包含一个或多个TableCell对象。 创建Table控件包括两个步骤：添加表本身，然后再分别添加行和单元格。如果是在设计时添加行和列来创建静态表，最好使用HTML表元素，而不使用Table服务器控件，因为HTML的表元素更简单。如果希望在运行时通过代码向表中添加行和列时

25、，可以使用Table服务器控件。,71,【例 322】, void Button1_Click(object sender, System.EventArgs e) int rowCnt, rowCtr, cellCtr, cellCnt; rowCnt = int.Parse(TextBox1.Text); cellCnt = int.Parse(TextBox2.Text); for (rowCtr = 1; rowCtr = rowCnt; rowCtr+) TableRow tRow = new TableRow(); Table1.Rows.Add(tRow); for (cellC

26、tr = 1; cellCtr = cellCnt; cellCtr+) TableCell tCell = new TableCell(); tCell.Text = Row +rowCtr +, Cell +cellCtr; tRow.Cells.Add(tCell); ,72,AdRotator控件,AdRotator控件提供了一套快速广告发布系统。该控件会随机地显示所提供的广告图像，单击这些图像，可链接到指定的URL中。每次刷新页面都将更改显示的广告，广告的显示频率是由该广告的权重决定的。 AdRotator控件从有一条或多条广告记录的数据源读取广告信息。通常将广告信息存储在一个 XM

27、L 文件中，然后将AdRotator控件绑定到该文件。,73,用于广告文件的XML文件,将广告条图像位置、用于重定向的URL等广告信息存储在一个XML文件中。,74,AdRotator控件,AdRotator控件格式如下： ,75,【例 323】, /image/hexun.gif 和讯 门户 20 /image/sina.gif 新浪 门户 80 ,76,【例 323】, 当前文件的图片格式是： 链接到的网址是： void AdRotator1_AdCreated(object sender, AdCreatedEventArgs e) Label1.Text = e.ImageUrl; L

28、abel2.Text = e.NavigateUrl; ,77,Calendar控件,Calendar控件就是日历控件，负责在页面上显示日历并接受用户选择日期的操作。当需要在网页中显示日期或需要用户输入或确认日期时，就需要这样一个控件。 使用Calendar控件可以执行以下操作： 显示和选择日期 启用日期选定 自定义日历的外观 捕获用户与Calendar控件之间的交互 在Calendar控件中显示数据库信息,78,Calendar控件,日期获取模式 Calendar控件有四种基本日期获取模式，以指定用户在控件中选定日、周或整个月份。通过控件的SelectionMode属性来实现：,79,【例

29、324】, void Page_Load(Object Sender, EventArgs e) Calendar1.SelectionMode = (CalendarSelectionMode)DropDownList1.SelectedIndex; if(Calendar1.SelectionMode = CalendarSelectionMode.None) Calendar1.SelectedDates.Clear(); protected void click(object sender, EventArgs e) Label1.Text = 当前选择的日期是 + Calendar1

30、.SelectedDate.ToLongDateString (); ,80,Calendar控件的外观属性,81,Calendar控件的样式,82,自定义特别日,日历控件还可以定义特别日的外观和显示，如节日、纪念日等。可以包括以下操作： 突出显示某些日。例如，以不同的颜色显示假日。 向日显示中添加信息，例如约会或事件信息。 自定义用户可以单击以选择某日的链接文本。 自定义特别日利用的是Calendar控件的DayRender事件。,83,【例 325】, ,84,【例 325】,void DayRender(object source, DayRenderEventArgs e) if (

31、!e.Day.IsWeekend) e.Cell.BackColor = System.Drawing.Color.Yellow; if (e.Day.Date.Day = (14) e.Cell.Controls.Add(new LiteralControl(开会); e.Day.IsSelectable = true; else e.Day.IsSelectable = false; ,85,【例 325】,protected void Calendar1_SelectionChanged(object sender, EventArgs e) int i; i = Calendar1.S

32、electedDates.Count; if (i = 1) Label1.Text = 当前选择的日期是： + Calendar1.SelectedDate.ToLongDateString(); else Label1.Text = 当前选择的日期是： + Calendar1.SelectedDates0 + 到 + Calendar1.SelectedDatesi - 1; ,86,【例 326】, void Page_Load(object sender, EventArgs e) holidays9, 10 = 教师节; holidays10, 1 = 国庆节; holidays12

33、, 25 = 圣诞节; holidays1, 1 = 元旦; ,87,【例 326】,void DayRender(object sender, DayRenderEventArgs e) string aHoliday; DateTime theDate = e.Day.Date; aHoliday = holidaystheDate.Month, theDate.Day; if (aHoliday != null) Label aLabel = new Label(); aLabel.Text = + aHoliday; e.Cell.Controls.Add(aLabel); e.Cel

34、l.BackColor = System.Drawing.Color.Gainsboro; if (e.Day.IsOtherMonth) e.Cell.Controls.Clear(); ,88,MultiView和View控件,View控件是视图控件，MultiView控件是多视图控件，两个控件都属于容器控件，通常一起使用，提供一种可以方便显示信息的替换视图的方式。 View和MultiView控件格式如下： ,89,【例 327】, 输入您的姓名： 输入您的学号： ,90,【例 327】,public enum searchtype name = 0, number = 1 void R

35、adioButton_CheckedChanged(object sender,EventArgs e) if (RadioButton1.Checked) MultiView1.ActiveViewIndex = (int); else if (RadioButton2.Checked) MultiView1.ActiveViewIndex = (int)searchtype.number; ,91,ImageMap控件,ImageMap控件是图片地图控件，可以在一副图片上设置很多热区。ImageMap控件格式如下： ImageMap 控件主要包括ImageUrl、HotSpotMode和HotSpots等属性，以及一个Click事件。,92,【例 328】, ,93,【例 328】,void ImageMap1_Click(object sender, ImageMapEventArgs e) int sinacount = (ViewStatesinacount != null) ? (int)ViewStat