第7章 WEB程序设计(完成).ppt

1、第7章 WEB程序设计,7.1 网页设计 7.1.1网页设计基础 7.1.2 学籍管理系统网页设计,7.1.1网页设计基础,1、Web基本概念 2、Web具有的特点 3、HTML语言 4、XML 5、CSS和XSL 6、网页设计工具 7、ASP.NET,1、Web基本概念,（1）URL URL（统一资源定位器）用来唯一标识Web上的资源，包括Web 页面、图象文件、音频文件、视频文件。URL的格式为： 协议:/主机名/标识符 其中，协议可以是HTTP、HTTPS（安全的超文本传输协议）、FTP；主机名用来标识被请求的服务器；端口为不同协议端口，如FTP缺省的端口号为21，HTTP缺省的端口号为

2、80；标识符说明被请求的是什么。 如， :80/index.asp。 浏览器请求主机 在80端口提供的HTTP服务，并要求取得该服务器上的index.asp文件；服务器接受请求，取得该文件；服务器把文件返回浏览器，并告诉浏览器这是一个HTML文件；浏览器在显示器上显示这个页面。,（2）HTTP,HTTP（超文本传输协议）是用来在互连网上传输文档的协议，它是Web上最常用也是最重要的协议，也是Web服务器和Web客户（如浏览器）之间传输Web页面的基础。HTTP是建立在TCP/IP之上的应用协议，但并不是面向连接的，而是一种请求/应答式协议。浏览器通常通过HTTP向Web服务器发送一个HTTP请

3、求， Web服务器接受到HTTP请求之后，执行客户所请求的服务，生成一个HTTP应答返回给客户。,（3）HTML,HTML (超文本标记语言)是Web诞生与发展的要素之一，它旨在使得Web页面能显示在任何HTML使能的浏览器中，而与连网的机器平台无关。HTML并不是一个程序设计语言，而是一个标记语言，它所提供的标记是由SGML（Standard Generalized Markup Language，标准的通用标记语言）定义的。SGML是一种元语言，即用来定义标记语言的语言，它提供了一种将数据内容与显示分离开来的数据表示方法，使得数据独立于机器平台和处理程序。但是，HTML更多的关注Web浏览

4、器如何在页面上安排文本、图象和按钮等，过多地考虑外观使其缺乏对结构化数据的表示能力。W3C（World Wide Web Consortium） 的一个工作组在Jon Bosak的领导下致力于设计一个超越HTML能力范围的新语言，这个语言后来被命名为XML（Extensible Markup Language，可扩展标记语言）。1998年2月，W3C发布了XML 1.0作为其推荐标准。现在，W3C已经用XML设计出一个与HTML4.01功能等价的语言，称为XHTML1.0 （Extensible HyperText Markup Language）。,（4）Web客户,Web客户通常指的是We

5、b浏览器，如Netscape Navigator和Microsoft Internet Explorer。这种浏览器能理解多种协议，如HTTP、HTTPS、FTP；也能理解多种文档格式，如text、HTML、JPEG（一种图象文件格式）、XML(有的尚未支持)；也具备根据对象类型调用外部应用的功能。需要指出的是HTML文档中的链接在Web浏览器中通常以带下划线的方式显示，用户点击某个链接就能浏览到所链接的Web资源。,（5）Web服务器,Web服务器（称HTTP服务器）提供HTTP服务。Web服务器提供在URL里指定的文件的内容，一般具备将URL名映射到文件名的功能，并能实施某种安全策略。 总

6、之，URL、HTTP、HTML(以及XML)、Web服务器和Web浏览器是构成Web的五大要素。Web的本质内涵是一个建立在Internet基础上的网络化超文本信息传递系统，而Web的外延是不断扩展的信息空间。,2、Web具有的特点,（1）Web是图形化的和易于导航的 （2）Web与平台无关 （3）Web是分布式的 （4）Web是动态的 （5）Web是交互的,3、HTML语言,HTML（Hyper Text Markup Language 超文本标记语言）是一种用来制作超文本文档的简单标记语言。 HTML文档是一个设置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名。生成

7、一个HTML文档主要有以下三种途径： 手工直接编写（例如用ASCII文本编辑器或其它HTML的编辑工具）。 通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。 由Web服务器（或称HTTP 服务器）实时动态地生成。,HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息。HTML的标记分单标记和双标记。HTML的标记总是封装在由“”构成的一对括号中。 单标记单独使用就能完整地表达意思，这类标记的语法是： 如，它表示一个段落的结束，并在段落后加一空行。,双标记是它由一对标记构成，必须成对使用才能完整地表达意思，其中后面标记前

8、加一个斜杠（/）表示能结束。这类标记的语法是： 内容 如，text to emphasize，突出对“text to emphasize”文字的显示。 大多数标记包含属性，其语法是： 各属性之间无先后次序，属性也可省略取默认值。,双标记的属性在的第一个标记内， 如， 其中SIZE属性定义线的粗细，属性值取整数3，ALIGN属性表示LEFT（左对齐），WIDTH属性定义线的长度，取相对值“75%”，表示整个窗口的百分比。 除了一些个别的标记外，HTML文档的标记都可嵌套使用。HTML文档结构如下： 头部信息 文档主体，正文部分 ,其中和文档的最外层，标记HTML文档的开始与结束。和之间包括文档的

9、头部信息，如文档总标题等，若不需头部信息则可省略此标记。和标记表示文档正文内容。 HTML 是一种建立网页文件的语言，由HTML语言编写的以 .htm 或 .html 为文件后缀保存的文档就是网页文件，可以放到Web服务器 上，对外发布信息，并由浏览器访问显示。,4、XML,XML是Extensible Markup Language的简写，一种扩展性标识语言。XML不是什么新概念，它来源于SGML（通用标识语言标准）。SGML是标志语言的标准，所有标志语言都是依照SGML制定的。HTML的标记语言就是依照SGML制定的标志语言。XML是SGML的简化版，是一个简化了的标志语言标准，可以用来创

10、建定义类似HTML的标记语言，然后可用这个标记语言来显示信息。 HTML和XML的最大区别在于：HTML是一个定型的标记语言，它用固有的标记来描述，显示网页内容。XML则没有固定的标记，XML不能描述网页具体的外观，内容，它只是描述内容的数据形式和结构。,在XML文档中，标记可以自己定义，所有的标记都必须是成对出现的，所有的XML标记都必须合理嵌套。一个XML文档包含如下三个部分： （1）一个XML文档声明。 这个声明表示这个文档是一个XML文档，它遵循的是哪个XML版本的规范。如，表明XML文档遵循XML版本的1.0规范。,(2）一个关于文档类型的定义。 用来定义XML文档中元素，属性以及元

11、素之间关系的。通过DTD文件可以检测XML文档的结构是否正确。但建立XML文档并不一定需要DTD文件。如， DTD是一种保证XML文档格式正确的有效方法，可以比较XML文档和DTD文件来看文档是否符合规范，元素和标签使用是否正确。一个DTD文档包含：元素的定义规则，元素间关系的定义规则，元素可使用的属性，可使用的实体或符号规则。DTD文件也是一个ASCII的文本文件，后缀名为.dtd。,如， ,(3）用XML标识创建的内容。 XML文档的标识是用来定义元素的。在XML中，标识必须成对出现，将数据包围在中间。标识用“”或“”构成，而且必须成对出现。如， 一个元素由一个标识来定义，包括开始和结束标

12、识以及其中的内容。如， XML介绍 属性是对标识进一步的描述和说明，一个标识可以有多个属性。如， XML介绍 在这里，只是简单介绍XML一些基础知识，有兴趣的读者可以参考相关书籍。,5、CSS和XSL,XML文档是用来描述数据的结构，不能描述网页具体的外观与内容。使用CSS和XSL规范XML文档的显示样式，CSS还可以规范HTML文档的显示样式。 XSL是可扩展样式语言(Extensible Stylesheet Language), 是将来设计XML文档显示样式的主要文件类型。它本身也是基于XML语言的。 CSS是层叠样式表(Cascading Style Sheets)，是目前用来在浏览器

13、上显示XML文档的主要方法。 CSS是一种样式表语言，用于为HTML文档定义布局。CSS提供HTML文档的表现样式与内容的分离的网站设计方法，令网站维护容易了许多。,CSS的定义是由三个部分构成：选择符(selector)，属性(properties)和属性的取值(value)。语法如下： 选择符 属性:值 其中，选择符可以是标记、类、ID等多种形式，通常，是要定义样式的HTML标记，如BODY、P、TABLE等。 可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少样式重复定义。如， h1, h2, h3, h4, h5, h6 color: green ,把相同的元素分类定义

14、不同的样式时，可以定义类选择符。在定义时，在自定类名称前面加一个点号即可。如， p.right text-align: right p.center text-align: center ID选择符是用来对这个单一元素定义单独的样式。定义ID选择符要在ID名称前加上一个“#”号。如， #intro font-size:110% ,样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。 插入样式表的方法有三种,（1）外部样式表 当样式需要应用于很多页面时，外部样

15、式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。通过在每个页面使用 标签来链接外部样式表。如， 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。,（2）内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。通过使用 标签在文档头部来定义内部样式表。如， hr color: sienna; p margin-left: 20px; body background-image: url(images/back40.gif); ,（3）内联样式 使用这种方法，由于要将表现和内容混杂在

16、一起，内联样式会损失掉样式表的许多优势。要使用内联样式，在相关的标签内使用样式（style）属性。如， This is a paragraph ,同一个 HTML 元素的样式可能不止一次被定义，会出现多个样式层叠的情况。所有的样式一般会根据下面的规则层叠于一个新的虚拟样式表中，分别拥有不同的优先权。 浏览器缺省设置 外部样式表 内部样式表（位于 标签内部） 内联样式（在 HTML 元素内部） 最上面，优先权小，最下面，优先权最大。因此，内联样式拥有最高的优先权，这意味着它将优先于 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。 更详细的CSS定义内容，请读者参考C

17、SS参考资料。,6、网页设计工具,Visual Web Developer 提供下列功能 网页设计 代码编辑 调试 控件 数据访问 安全性、个性化设置 开发承载站点,Visual Web Developer 提供了一种生成网站并将其发布到宿主网站的理想环境。使用 Visual Web Developer 中的开发工具，可以在自己的计算机上开发 ASP.NET 网页。Visual Web Developer 包括一个本地 Web 服务器，无需安装 Internet 信息服务 (IIS)，该服务器即可提供测试和调试 ASP.NET 网页所需的全部功能。,网站准备就绪后，可以使用内置的 Copy W

18、eb 工具将其发布到主机上。准备好与他人共享文件后，就可以使用该工具传输这些文件。或者，使用“生成网站”命令对网站进行预编译和部署。“生成网站”命令对整个网站运行编译器（而不仅仅对代码文件），并生成可部署到生产服务器的网站布局。,7、ASP.NET,ASP.NET是Microsoft的Active Server Pages的新版本，是建立在微软新一代.NET平台架构上，建立在公共语言运行库上，在服务器后端为用户提供建立强大的企业级WEB应用服务的编程框架。可用于在服务器上生成功能强大的Web应用程序，为Web站点创建动态的、交互的HTML页面。 ASP.NET又叫ASP+，但并不是仅仅是ASP

19、的简单升级，而是微软推出的新一代Active Server Pages脚本语言。ASP.NET完全基于模块与组件，具有较好的可扩展性与可定制性，数据处理方面更是引入了许多激动人心的新技术。同时也提供给Web开发人员更好的灵活性，有效缩短了Web应用程序的开发周期。,ASPNET提供了内置对象有Page、Request、Response、Application、Session、Server、Mail和Cookies。这些对象使用户更容易收集通过浏览器请求发送的信息、响应浏览器以及存储用户信息，以实现其他特定的状态管理和页面信息的传递。 （1）Response 对象 Response 对象用来创建

20、对客户端的响应，输出信息到客户端，它提供了标识服务器和性能的HTTP变量，发送给浏览器的信息和在cookie 中存储的信息。主要方法和属性如下表：,(2）Request 对象 Request 对象是用来获取客户端在请求一个页面或传送一个Form时提供的所有信息，这包括能够标识浏览器和用户的HTTP 变量，存储在客户端的cookie信息以及附在URL后面的值。 Request 对象的集合有：,Request 对象方法和属性如下表：,可以通过调用 Request(variable) 直接使用所有的变量，而不需要集合的名称。使用 Request(variable)，就不能使用集合了。Web 服务器可

21、以按照下面的顺序搜索集合：QueryStringFormCookiesClientCertificateServerVariables,（3）Application对象 Application对象来自HttpApplictionStat类。它可以在多个请求、连接之间共享公用信息，也可以在各个请求连接之间充当信息传递的管道。使用Application对象来保存我们希望传递的变量。由于在整个应用程序生存周期中，Application对象都是有效的，所以在不同的页面中都可以对它进行存取，就像使用全局变量一样方便。主要方法有：,Application对象没有内置的属性，但是我们可以自行创建其属性。格式

22、为：Application(属性名)=值,（4）server对象. Server 对象提供对服务器上的方法和属性的访问。其中大多数方法和属性是作为实用程序的功能服务的。Server 对象也是Page 对象的成员之一，主要提供一些处理页面请求时所需的功能。通过该对象可以获取服务器信息和文件执行期限的数据。主要属性和方法有：,（5）Session对象 Session对象就是服务器给客户端的一个编号。当一台WEB服务器运行时，可能有若干个用户浏览正在浏览这台服务器上的网站。当每个用户首次与这台WWW服务器建立连接时，它就与这个服务器建立了一个Session，同时服务器会自动为其分配一个Session

23、ID，用以标识这个用户的唯一身份。特别说明的是，Session对象的变量只是对一个用户有效，不同的用户的会话信息用不同的Session对象的变量存储。在网络环境下Session对象的变量是有生命周期的，如果在规定的时间没有对Session对象的变量刷新，系统会终止这些变量。,利用该对象可以保存用户信息当在不同的页面之间切换时，保存在Session内的信息不会丢失。主要方法和属性有：,（6）Mail 对象 ASP.NET被赋予了一个发送Email的新对象，名为SmtpMail，实际上Mail对象由System.Web.Mail类库实现 (Class Library) 。这个类库由MailMess

24、age 对象、SmtpMail 对象、MailFormat 对象和MailAttachment 对象组成，它们相互合作，完成E-mail的发送。,主要方法和属性有：,（7）Cookies对象 cookie是一小块由浏览器存贮在客户端系统上(硬盘)的文本，是一种标记。由WEB服务器嵌入用户浏览器中，以便标识用户，且随同每次用户请求发往WEB服务器。 Cookies 的值比ASP.NET 其他集合(例如Form和Server Variables )的值要复杂得多。Cookies对象能保存不同的信息在客户端，和session的另外一个区别是session的信息始终保存在服务器上。,主要方法和属性有：

25、,（8）Page对象 Page类为ASP.NET应用程序从.aspx文件构建的所有对象提供基本行为。该类在System.Web.UI命名空间中定义，从TemplateControl中派生出来，实现了IHttpHandler接口。,Page对象的重要属性和方法有：,7.1.2 学籍管理系统网页设计,网页的显示界面规划如图8-1所示。,图8-1学籍管理系统网络报名界面,创建网站 网页布局设计 添加网页元素 给 “DropDownList”下拉列表控件添加选项 添加数据源并绑定 修改“SqlDataSource1”的插入命令 先添加数据源，然后绑定到控件 事件代码设计 测试与保存,创建网站。 单击【

26、文件】【新建网站】菜单，打开【新建网站】窗口，如图8-1所示。单击【模板】的“ASP NET网站”，从【位置】列表中选项“文件系统”、“Http”（超文链接本服务器）、“FTP”（文件服务器）选中“文件系统”, 从【语言】列表中选择编程语言“Visaul Basic”，单击“浏览”按钮，打开【选择位置】窗口，选择网站存放的文件目录和文件夹，如图8-3所示，单击“打开”按钮，回到【新建网站】窗口。单击“确定”按钮，在【解决方案资源管理器】窗口显示新建网站，如图8-4所示，包括网站所在文件系统位置、一个网页和网站配置文件。,图8-1【新建网站】窗口,图8-3保存文件【选择位置】窗口 图8-4【解决

27、方案资源管理器】窗口,网页布局设计。 单击【工具箱】窗口，从【HTML】控件中拖曳 分层控件到网页设计窗口，或者，单击【布局】【分层】菜单，把 分层控件插入网页设计窗口如图8-5所示。当 分层控件不能移动时，单击【格式】【样式】菜单，从打开的【样式生成器】中，单击【位置】标签，如图8-6所示，选择【位置模式】的“正常流中的位置”、“正常流的偏移量”、“绝对位置”之一，就可以在网页设计窗口移动该控件；如果选择【位置模式】的“未设置”，将禁止移动。在【样式生成器】中，可以设置该控件的字体、背景、文本对齐、位置、布局、边缘、列表项等显示属性。单击【属性】窗口，对该控件的标题、类别、ID进行设置，如图

28、8-7所示。单击【属性】窗口的“Style”右侧按钮，同样可以打开的【样式生成器】窗口。,图8-5网页设计窗口,图8-6【样式生成器】的【位置】标签,图8-7【属性】窗口,添加网页元素,从【标准】控件中拖曳“A label” 标签到网页设计窗口，如图8-8所示。单击【属性】窗口，对控件的标题、ID进行设置为“报名号”、“applyID”，如图8-9所示。单击【格式】【样式】菜单，从打开的【样式生成器】中，单击【文本】标签，修改文本“居中显示”，如图8-10所示。参照上面过程，在网页设计窗口设计“abl TextBox” 文本、 “DropDownList”等下拉列表控件。,图8-8网页设计窗口

29、,图8-9【属性】窗口,图8-10【样式生成器】的【文本】标签,给 “DropDownList”下拉列表控件添加选项,单击选中“性别”右侧 “DropDownList”下拉列表控件，单击打开【属性】窗口“Items”属性，单击其右侧按钮，打开【ListItems集合编辑器】窗口，单击“添加”按钮，在右侧【杂项】的“Text”、“Value”输入“男”；同样的过程，添加“女”项，如图8-11所示。单击“确定”按钮，结束编辑。可以通过单击 “移除”、按钮，删除项目和调整项目所在顺序。同样的步骤，给“职称”、“文化程度”列表项进行编辑。,图8-11【ListItems集合编辑器】窗口,添加数据源并绑

30、定,从【工具箱】的【数据】中拖曳“GridView”数据表格控件到网页设计窗口，增加数据控件“GridView1”并弹出数据控件任务菜单，如图8-12所示。,图8-12“GridView1”任务菜单,从【选择数据源】列表中选择“新建数据源”，打开【数据源配置向导】，如图8-13所示，单击“数据库”，选择从数据库中获取数据，在【为数据源指定ID】域，输入数据源ID，即名称，单击“确定”按钮；,图8-13【数据源配置向导】选择数据源类型,进入【配置数据源】窗口，建立连接，如图8-14所示，单击“新建连接”按钮，,图8-14【配置数据源】窗口,进入【添加连接】窗口，如图8-15所示，单击“更改”按钮，,图8-15【添加连接】窗口,在【更改数据源】窗口，选择“Microsoft ODBC数据源”，单击“确定”按钮，结束更改， 如图8-16所示。,如图8-16【更改数据源】窗口,在【添加连接】窗口，选择数据库，输入登入该数据库的用户明、密码，如图8-17所示。,图8-17【添加连接】窗口,单击“确定”按钮，连接添加结束；在【数据源配置向导】中单击“下一步”按钮，命名数据连接字符串名称，如图8-18所示。,图8-18【配置数据源】连接字符串命名,单击“下一步”按钮，进入【配置Se