1 / 101

第三章

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

octavia-mccall
Télécharger la présentation

第三章

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第三章 网页设计

  2. 网页设计 • 静态页面设计 • ASP.NET网页介绍 • 服务器控件概述 • HTML服务器控件 • 标准控件 • 高级控件

  3. 静态页面设计 • 所谓“静态”是指网站的网页内容“固定不变”，当用户浏览器通过互联网的HTTP协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传输给用户浏览器。页面中的中内容使用的是标准的HTML代码。 • 静态页面只是显示，不提供交互功能。准确地说，静态页面的内容不会发生改变。

  4. HTML • HTML是网页制作的最基本要素。如果不熟悉HTML，这里介绍的就是必须了解的基本概念： • HTML是一种纯文本类型的标记式语言，利用标记来标识信息，不需要翻译而直接从浏览器解释执行，通过一些标记来告诉浏览器怎样显示内容。 • 一个标记称为一个元素，每个标记都用一对< >括起来，大部分标记是成对使用，只有个别的是单独使用。 • 每个标记都有自己的名称和属性，标记的属性告知浏览器如何显示网页。

  5. 【例 3‑1】 <html> <head> <title>网页设计基础</title> </head> <bodybgcolor="blue"> <h1>这是H1字体</h1> <h2>这是H2字体</h2> <h3>这是H3字体</h3> <h4>这是H4字体</h4> </body> </html>

  6. XHTML • HTML从出现发展到今天，仍有些缺陷和不足。HTML的三个主要缺点： • 太简单：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML； • 不规范：由于HTML代码的不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML； • 数据与表现混杂：当页面要改变显示时，就必须重新制作HTML。 • 因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过渡的一个桥梁。

  7. XHTML的特点 • XHTML解决HTML语言所存在的严重制约其发展的问题。 • XML是Web发展的趋势，XHTML是当前替代HTML 4.0标记语言的标准，使用XHTML 1.0，只要遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。 • 使用XHTML的另一个优势是：它非常严密。

  8. XHTML的特点 • XHTML能与其他基于XML的标记语言、应用程序及协议进行良好的交互工作。 • XHTML是Web标准家族的一部分，能很好在无线设备等其他用户代理上。 • 在网站设计方面，XHTML有助于去除表现层代码的恶习，帮助程序员养成标记校验来测试页面工作的习惯。

  9. XHTML的核心规则 • 标记成对使用或使用自封闭的标记（如<br />来代替<br>）。注意的是有些浏览器不能识别<br/>（注意'/'前没有空格），所以不要忘记在'/'前加上一个空格。 • 标记和属性名字必须是小写。 • 属性值必须封装在成对的引号中。 • 标记必须正确嵌套。 • 把所有<和&特殊符号用编码表示： • 给所有属性赋一个值。XHTML规定所有属性都必须有一个值，没有值的就重复本身。

  10. 动态页面 • 为了从HTML的静态世界进入ASP.NET的动态世界，首先要知道动态内容意味着什么。动态页面是可以通过网站后台管理系统对网站内容进行更新管理的页面。当单击Web页面中表单上的按钮时，可以触发一些事件，如可以通过点击按钮提交订单，向服务器发出请求和一些参数。

  11. 表单的基本概念 • ASP.NET引入了Web表单的概念。HTML表单只包含了表单内部控件和相应的布局信息，而Web表单中则包含了表单内部控件、相应的布局信息及数据提交后的数据处理代码。 • HTML表单 • HTML表单是在Web页中的<form>和</form>标记之间定义的控件组，用于让用户输入数据并提交。例： <form method="post" action ="page.asp"> 输入您的用户名： <input type="text" name="username"> <input type="submit" name="ok" value="提交" > </form>

  12. 表单的基本概念 • Web表单 • Web表单和HTML表单从本质上来讲是完全不同的表单，但在表现形式上没有太大差别。Web表单通常采用下面的方式来表示： <form runat=”server”> …… </form>

  13. 回发和往返行程 • ASP.NET网页的处理循环如下： 1. 用户请求页面（使用HTTP GET方法请求页面）。 2. 页面将标记动态呈现到浏览器。 3. 用户键入信息或从可用选项中进行选择，然后单击按钮。 4. 页面发送到Web服务器。更明确地说，页面发送回其自身。 5. 在Web服务器上，该页再次运行，并且可在页上使用用户键入或选择的信息。 6. 页面执行通过编程所要实行的操作。 7. 页面将其自身呈现回浏览器。

  14. 页面生存期 • ASP.NET网页在使用窗体时不会启动或运行，并且仅当用户单击“关闭”按钮时才会卸载。这是由于Web具有断开连接的天性。Web服务器将页面呈现到浏览器之后，连接即终止。 • Web这种断开连接的天性决定了ASP.NET页的运行方式。用户请求ASP.NET网页时，将创建该页的新实例。这样，每个回发和往返行程都会导致生成该页的一个新实例。

  15. 服务器控件的定义 • 在网页上经常会遇到填写注册信息一类的界面，一般包括文本框、单选框、复选框、下拉列表和按钮等基本元素，这些基本元素就是控件。服务器控件是一种在服务器端完成的控件，服务器端在处理完控件动作后，再生成标准的HTML文件发送给客户端。服务器控件在页中使用包含属性runat="server"声明性标记标识。

  16. 服务器端代码转换为客户端代码

  17. 服务器控件分类 • 在创建ASP.NET网页时，可以使用以下类型的控件： 1. HTML服务器控件：HTML服务器控件属于HTML元素。 2. Web服务器控件：这些控件比HTML服务器控件具有更多内置功能。Web服务器控件与HTML服务器控件相比更为抽象，因为其对象模型不一定反映HTML语法。 3. 验证控件：这类控件用来验证用户的输入。 4. 用户控件：使用创建 ASP.NET网页的相同技术创建可重复使用的自定义控件。

  18. Web服务器控件 • 标准的Web服务器控件：包括最常用的控件，这类控件在网页中占90％。主要是指传统的Web窗体控件。 • 数据控件：这类控件用来链接数据源。该类控件可细分为两种类型：数据源控件和数据绑定控件。 • 导航控件：与站点导航数据结合，实现站点导航功能。 • 登录控件：为Web应用程序提供可靠完整的登录解决方案。

  19. 服务器控件的创建 • 在设计视图中创建服务器控件 • 在源视图中创建服务器控件 • <asp:button ID="button" runat="server" ></asp:button>

  20. 设置控件的属性 • 设置控件的属性将定义其外观和行为。有两种方式设置控件属性： • 在“设计”视图中，选择控件，然后在“属性”窗口中设置属性。 • 在“源”视图中，在控件的元素标记中置入插入点，然后在“属性”窗口中设置属性。

  21. 【例 3‑5】 <asp:LabelID="Label1"runat="server"Text="这是第一个label控件"ForeColor="Blue"Font-Size="Small"Font-Bold="true"> </asp:Label><br/> <asp:LabelID="Label2"runat="server"Text="这是第二个label控件"ForeColor="Red"Font-Size="Medium"Font-Italic="true"> </asp:Label><br/> <asp:LabelID="Label3"runat="server"Text="这是第三个label控件"ForeColor="Green"Font-Size="Large"Font-Underline="true"> </asp:Label>

  22. 服务器控件的基本属性

  23. 服务器控件的标识 • 利用每个服务器控件的id属性和name属性标识该控件，对它进行操作，如下例。 <script language ="c#" runat ="server"> void page_load(object Src,EventArgs e) { Label1.Text = "欢迎你的到来"; } </script> <body> <asp:Label ID="Label1" runat="server"> </asp:Label> </body>

  24. 服务器控件事件 • 可以为Web服务器控件创建事件处理程序。如在ASP.NET页面上添加一个按钮，然后为该按钮的Click事件编写事件处理程序。 • 与传统HTML页或基于客户端的Web应用程序中的事件相比，由ASP.NET服务器控件引发的事件的工作方式稍有不同，因为与服务器控件关联的事件是在客户端触发的，但是由ASP.NET页在服务器上处理的。

  25. 服务器控件的基本事件

  26. 【例 3‑6】 void Button1_click(object sender, EventArgs e) { Label2.Text = TextBox1.Text + Label2.Text; }

  27. HTML控件 • 在创建站点时，有时对某些控件不需要服务器端做任何事。在这种情况下，只是想在页面上添加简单的静态HTML元素。如只是决定网页上元素的位置或提供一个容器给一组元素。HTML控件工具箱中包含一系列拖放控件，如Input、Table控件和div等，这些HTML控件对应着标准HTML元素。

  28. HTML服务器控件 • HTML服务器控件派生自命名空间System.Web.UI.HtmlControls。默认情况下，服务器无法使用纯粹的HTML控件，只有将HTML元素转换为HTML服务器控件，才将其公开为可在服务器上编程的元素。

  29. HTML服务器控件 • HTML服务器控件具有以下几个重要特点： • 可在服务器上使用面向对象技术对其进行编程控制，这为编程开发提供了便利。 • 提供了一组事件，可以为事件编写事件处理程序。 • 自动维护控件状态。在页面窗体到服务器端往返期间，用户在HTML服务器控件中输入的值将在页面回传中自动维护。 • 与验证控件进行交互。便于验证用户是否在控件输入了适当的信息。 • 允许在HTML服务器控件中自定义属性。开发人员可以将任何需要的属性添加到HTML服务器控件的属性集中，页框架将读取并呈现它们而不更改其他任何功能。

  30. HTML输入控件 • 工具箱的“HTML”选项卡上提供多个基于HTML input元素的控件： • Input (Text) 控件：input type="text"元素 • Input (Password) 控件：input type="password"元素 • Input (Button) 控件：input type="button"元素 • Input (Submit) 控件：input 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"元素

  31. 【例 3‑7】 输入姓名：<inputid="Text1"type="text"runat="server"/><br/> 输入密码：<inputid="Password1"type="password"runat="server"/> <inputid="Submit1"type="submit"value="提交"onserverclick="Submit1_ServerClick"runat="server"/> <inputid="Reset1"runat="server"onserverclick="Reset1_ServerClick"type="reset"value="重置"/> <inputid="Button1"runat="server"onserverclick="Button1_ServerClick"type="button"value="按钮"/>&nbsp; <spanid="span1"style="color:Green"runat="server"/></div>

  32. 【例 3‑7】 protectedvoid Submit1_ServerClick(object sender, EventArgs e) { if (Password1 .Value=="asp") span1.InnerHtml ="密码正确"; else span1.InnerHtml ="密码不正确"; } protectedvoid Reset1_ServerClick(object sender, EventArgs e) { Text1.Value = ""; Password1.Value = ""; } protectedvoid Button1_ServerClick(object sender, EventArgs e) { span1.InnerHtml = "你单击了按钮"; }

  33. 【例 3‑8】 请选择您的性别：<br/> <inputid="Radio1"type="radio"runat="server"name="sex"/>男<br/> <inputid="Radio2"runat="server"type="radio"name="sex"/>女<br/> 请选择您的爱好：<br/> <inputid="chk1"runat="server"type="checkbox"/>足球<br/> <inputid="chk2"runat="server"type="checkbox"/>篮球<br/> <inputid="chk3"runat="server"type="checkbox"/>乒乓球<br/>

  34. 【例 3‑8】 protectedvoid 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 = "您是女生"; }

  35. 【例 3‑9】 <inputid="File1"type="file"runat="server"accept="img/jpeg"size="20"/><br/> <inputid="Button1"type="button"value="上传"onserverclick="Button1_ServerClick"runat="server"/>

  36. 【例 3‑9】 void Button1_ServerClick(object sender, EventArgs e) { File1.PostedFile.SaveAs ("c:\\upload\\upload.jpg"); span1.InnerHtml= "上传完毕"; }

  37. 【例 3‑10】 <inputid="Hidden1"runat="server"type="hidden"value="初始值"/> <br/> 输入字符串： <inputid="Text1"runat="server"type="text"/><p> <inputid="Submit1"runat="server"type="submit"value="提交"onserverclick="Submit1_ServerClick"/><p> <spanid=Span1runat=server>这里显示的是隐藏的字符串</span>

  38. 【例 3‑10】 void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack) Span1.InnerHtml = "你上次输入的值是：" + Hidden1.Value + "</b>"; } void Submit1_ServerClick(object sender, EventArgs e) { Hidden1.Value = Text1.Value; }

  39. 【例 3‑11】 您有什么问题可以留言:<br/> <textareaid="TextArea1"runat="server"cols="30"rows="4"/><br/> <inputid="Submit1"runat="server"type="submit"value="submit"onserverclick="Submit1_Click"/> <spanid="span1"runat="server"/>

  40. 【例 3‑11】 protectedvoid Submit1_Click(object sender, EventArgs e) { span1.InnerHtml = "您的留言如下:" + TextArea1.Value; }

  41. Select控件 • Select控件是一个下拉列表控件。还可用于数据绑定。 • Select控件的格式如下： <select id="Select3" multiple="True" runat="server"> <option selected="True">Item 1</option> <option value="2">Item 2 </option> <option value="3">Item 3 </option> </select>

  42. 【例 3‑12】 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 = newHtmlTableRow(); for (int i = 0; i < numcells; i++) { HtmlTableCell cell = newHtmlTableCell(); cell.Controls.Add(newLiteralControl("行" +j+", 列"+i )); row.Cells.Add(cell); } Table1.Rows.Add(row); } }

  43. Image控件 • Image控件是一个图片控件。通过该控件可以设置图片的位置、宽、高、边界宽度、鼠标移过后的提示文字等属性。 • Image控件的主要属性有： • Align属性：设置或取得文字环绕时，图片放置的位置。 • Alt属性：设置或取得说明文字。 • Border属性：设置或取得边框的宽度。 • Height属性：设置或取得图片的高度。 • Width属性：设置或取得图片的宽度。 • Src属性：设置或取得图片的URL地址。

  44. Label控件 • Label控件主要用于文本的显示，在网页的固定位置显示文本。 • Label控件的格式如下： • <asp:Label options></asp:Label> // options表示控件的属性。

  45. TextBox控件 • TextBox控件是一个可以输入单行文本、密码或者多行文本的控件。默认的情况下TextBox控件的TextMode属性是SingleLine，可以修改为MultiLine或Password。 • TextBox控件的格式： • <asp:TextBox options ></asp:TextBox>

  46. TextBox控件常用的属性和事件

  47. 【例 3‑13】 在文本框中输入内容,将输入的内容在标签控件中显示出来:<br/> <asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><br/> <asp:ButtonID="Button1"runat="server"Text="复制"OnClick="Button1_Click"/></div> <asp:LabelID="Label1"runat="server"Text="标签控件"></asp:Label> <br/>

  48. 【例 3‑13】 protectedvoid Button1_Click(object sender, EventArgs e) { Label1.Text = Server.HtmlEncode(TextBox1.Text); }

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

  50. 【例 3‑14】 <asp:ButtonID="Button1"runat="server"Text="Button"/><br/> <asp:LabelID="Label1"runat="server"></asp:Label>&nbsp;</div> protectedvoid Page_Load(object sender, EventArgs e) { if (IsPostBack) this.Label1.Text = "You clicked a button."; }

More Related