网络编程基础8.ppt

1、第9章 网络编程基础,9.1 网络编程概述,9.2 HTML编程基础,9.3 ASP编程技术,9.1 网络编程概述,9.1 网络编程概述,HTML(Hyper Text Markup Language)超文本标记语言 HTML语言是是一种专门用于Web页制作的编程语言，利用HTML语言编写的Web网页，属于纯文本文件，可用任何文本编辑器阅读和编辑。 HTML文档通过标记和属性对超文本的语义进行描述，标记用于描述网页内容在浏览器中的显示方式，生成与别的文本或图像的链接点，产生所需的各种效果。 HTML作为一种标记语言，创建的文档与系统平台无关，即任何可以运行浏览器的计算机都能阅读并显示HTML。

2、,2网页制作工具 1）FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage的特色如下： （1）强大的网页设计功能 可智能地完成HTML文本的编辑;完善了所见即所得的网页编辑操作。 （2）丰富的网页设计模板、设计向导和主题样式 提供了多种网页设计模板、网页设计向导和主题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。,9.1 网络编程概述,9.1 网络编程概述,2）Dreamweaver Dreamweaver是由美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，用户不必编

3、写复杂的HTML源代码，可以轻而易举地制作出跨越平台限制和跨越浏览器限制的动态网页。所以，Dreamweaver一般作为网页设计者的首选工具。 Dreamweaver的基本功能如下： （1）可视化的专业网页编辑器和友好的工作界面 （2）网站管理功能 （3）强大的多媒体处理功能，在Dreamweaver中可以插入Flash动画和Fireworks生成的图像。,9.1 网络编程概述,9.1 网络编程概述,（4）Dreamweaver可以很好地控制HTML源代码,而不会产生垃圾代码. （5）提供行为等控件来进行动画处理和产生交互式响应。Dreamweaver提供一个工具-层。层的嵌套、层的可见性、层

4、的重叠,与时间线相配合可以作出许多动态效果。 （6）Dreamweaver MX允许使用服务器语言（例如ASP、ASP.NET、ColdFusion 标记语言 (CFML)、JSP和 PHP）等服务器语言来生成支持动态数据库的 Web 应用程序。,9.1 网络编程概述,9.1 网络编程概述,3网页美化工具 为了使制作的网页更为美观，制作网页时，还需利用网页美化工具对网页进行美化。 1）Photoshop Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photosho

5、p都是首选的平面制作工具。,9.1 网络编程概述,9.1 网络编程概述,2）Fireworks Fireworks是由Macromedia公司开发的图形处理工具，是专业网页图形设计及制作的解决方案。 作为为网络设计而开发的图像处理软件Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。 Fireworks动态生成的网络图形，可以输出到Dreamweaver及其他的HTML代码编辑软件中。,9.1 网络编程概述,9.1 网络编程概述,3）Flash Flash是美国Macromedia公司开

6、发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。 Flash是制作动画及矢量图形的工具软件。用它制作的动画是窄带动画，适合于网络传输的Web界面。,9.1 网络编程概述,9.1 网络编程概述,FrontPage 和Dreamweaver是使用最多的HTML网页制作工具。通过ActiveX定义接口，与脚本编程语言JavaScript和VBScript配合，创建动态交互的Web。 Dreamweaver、Fireworks和Flash一起被称作网页制作三剑客,是目前使用方便、功能强大的网站管理及

7、HTML页面制作工具。 Fireworks设计图形并使网页图形最优化。通过在Dreamweaver或Flash中直接对Fireworks进行调用、编辑图形来实现流畅的工作流程。,9.1 网络编程概述,9.1 网络编程概述,。,4.网页的整体结构 1)层状结构 层状结构为树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息,9.1 网络编程概述,9.1 网络编程概述,。,2）线性结构 线性结构（如图1.9所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面

8、上。,9.1 网络编程概述,9.1 网络编程概述,3）Web结构 Web结构类似于Internet的组成结构，网站文件的结构是层状结构和线性结构的结合，各网页之间形成网状连接，允许用户随意浏览。,9.1 网络编程概述,9.1 网络编程概述,9.1 网络编程概述,9.1 网络编程概述,5ASP(Active Server Pages)技术 Microsoft公司的ASP是服务器端的脚本编写环境，可以创建和运行动态的、可以交互的Web服务器端应用程序，是实现网络数据库发布的、容易使用的开发工具。 使用ASP可以方便地使用ADO对象，结合ActiveX组件、脚本命令和HTML语言，可以制作出交互式的

9、网页和应用程序。,9.1 网络编程概述,9.1 网络编程概述,6JSP（Java Server Pages）技术 Sun推出的JSP是一种执行于服务器端的动态网页开发技术，它基于Java技术。JSP技术用JavaScript作为脚本语言。在服务器端，Web Sever会通过Java虚拟机解释执行。由于JSP是以Java语言为基础的，具有较强的跨平台功能。,1HTML 语言基础 HTML文档是由标记和文件块组成的。 标记：该部分信息用来控制文档内部的显示方式，并允许WEB设计人员指定与其他文档的连接。 文件块：该部分信息就是浏览器显示的文本、图形和声音信息。 下面简单介绍HTML的使用。,9.2

10、 HTML编程基础,9.2 HTML编程基础,1）HTML元素 （1）HTML元素的标记 HTML文件所有的控制语句称为标记(TAG)，典型的元素由三部分组成： 起始标记、文件块、结束标记。格式为： 受影响的文本 例如： HTML的基本语法,9.2 HTML编程基础,9.2 HTML编程基础,使用标记的约定： 双标记:由“起始标记”和“结束标记”两部分构成。例如： 和为表的行标记，定义数据行。 和为表的数据标记，定义每行内单元格。 单标记:仅有起始标记，无尾标记。最常见的单标签是，表示强迫换行。 标记的字母不区分大小写 标记可以联合使用，也可以嵌套。,9.2 HTML编程基础,9.2 HTML

11、编程基础,（2）HTML元素的属性 元素属性的语法格式为： 各属性之间无先后次序，属性名不区分大小写。 （3）HTML文件的注释 HTML文件注释的基本格式如下： ,9.2 HTML编程基础,9.2 HTML编程基础,4）HTML文件的基本结构 HTML文件的结构分为两个基本部分： 文件头和文件主体，它们由三对标记构成： 头部信息 文档主体，正文部分 ,9.2 HTML编程基础,9.2 HTML编程基础,文挡标记，表示HTML文档的 开始，直到为止。,文件头标记其内容可以 是标题，文本文件地址、 等网页信息说明,文件主体标记,例9.1 ：设计网页。标题为：xample；网页显示文字内容为：没有

12、使用head标记，而单独使用title标记仍起作用。 xample 没有使用 标记仍起作用 例9.1,9.2 HTML编程基础,9.2 HTML编程基础,符号“”显示“”,表1 特殊替换字符,9.2 HTML编程基础,9.2 HTML编程基础,2）文件主体标记 主体元素可以包含各种参数部分。格式如下： BACKGROUND =“http:/ /ie/images/watermrk.gif BGCOLOR=#FFFFFF TEXT=#000000 LINK=#ff6600 VLINK=#330099 Heres a Web page! BODY的属性定义为 BACKGROUND(背景图象)、BG

13、COLOR(背景颜色)、TEXT前台文字颜色、LINK、VLINK和ALINK，超文本连接颜色。,9.2 HTML编程基础,9.2 HTML编程基础,未阅读过的超文本连 接颜色，缺省值蓝色,阅读过的超文本连接 颜色，缺省值紫色,前景文字颜色,表9.2 颜色代码表,9.2 HTML编程基础,9.2 HTML编程基础,3)设置标题格式 可以设置字体大小不同的标题，标题格式显示在浏览器窗口内，而不是显示在浏览器的标题栏中。格式为： 标题 属性align用来设置文字的对齐方式：left（左对齐）、center（居中）、right（右对齐）。 例9.1-1,9.2 HTML编程基础,9.2 HTML编程

14、基础,属性n用来指定标题文字的大小。N16， N1时文字最大，缺省时是。,4）设置文字格式 采用标记,格式为： 被设置的文字 Size：设置文字的大小。数字的取值从，取1时最小，取7时最大。 Face：设置文字的字体。字体名可以为：宋体、楷体、黑体和Time New Roman等约50种字体。,9.2 HTML编程基础,9.2 HTML编程基础,Color：设置文字的颜色，颜色的取值与的取值方法相同。参见例9.1-2 设置字型：字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见表9.3所示。,9.2 HTML编程基础,9.2 HTML编程基础,表 9.3 设置各种字型的

15、标记,9.2 HTML编程基础,9.2 HTML编程基础,例9.2 ：在网页上设置文字格式 设置文字格式 今天天气真好 显示红色黑体3号字 正常字显示带下划线显示 ,9.2 HTML编程基础,9.2 HTML编程基础,5）排 版 排版标记和，格式： 一段文字 参数align：表示整个段落的对齐方式， align可选参数有left、center和right，分别为左、中和右对齐。中间对齐也可用成对标记完成。,9.2 HTML编程基础,9.2 HTML编程基础,页面效果例9.2-1 左对齐的段落 左对齐的段落 右对齐的段落 右对齐的段落 中间对齐的段落 中间对齐的段落 ,9.2 HTML编程基础,

16、9.2 HTML编程基础,行缩进引用标记 来表示缩进。一对标记中的文字将向右缩进一段。 页面效果例9.2-2 第一层 第一层 第二层 第二层第三层 第三层第二层 第二层第一层 第一层,9.2 HTML编程基础,9.2 HTML编程基础,一个最简单的Homepage文件,9.2 HTML编程基础,9.2 HTML编程基础,例9.3 简单的主页实例 欢迎光临HTML世界。 html简单示例 其乐无穷! 欢迎学习使用HTML编制编制出自己的主页。 祝你成功！ 网页效果,9.2 HTML编程基础,9.2 HTML编程基础,图9.1 HTML主页,9.2 HTML编程基础,9.2 HTML编程基础,6）

17、加入超链接 在Web页面中加入超链接的格式： 要链接的目标文档名；要链接的文本（超文本）。 创建完整的链接标记，必须在开始标记中设置超文本引用(HREF)属性。HREF描 述了点击该链结后文档跳转的目的地。 例如，创建一个指向文档间的链接，可以使用以下链接 微软公司 例9.2-3,9.2 HTML编程基础,9.2 HTML编程基础,表9.4 相对寻址和绝对寻址的不同点,9.2 HTML编程基础,9.2 HTML编程基础,在大多数情况下，应该使用相对寻址。,HTML允许定义文档内部的链接， 例如定义 Anchor1 说明了在“ Anchor 1” 前有一个跳转点。 用 Goto Anchor1

18、则可跳转至 Anchor1处。 例9.3-1,9.2 HTML编程基础,9.2 HTML编程基础,7）图象及动画的嵌入 （1）图象的嵌入 图象嵌入的标记为，其属性为Src（图象文件名），Alt（替代文字），Align（对准），Width，Height，Border（边框宽度），HSpace （水平）和VSpace（垂直）。 Src指定嵌入图象的图象文件名。 例如 src=images/Red_flag.gif Alt指定图象文件尚未装入时，代替图象显示的文字。,9.2 HTML编程基础,9.2 HTML编程基础,例如 Width和Height分别指定图象的宽和高。 Border指定图象边框的宽

19、度。 HSpace和VSpace分别指定图象外水平和竖直留空的宽度。 （2) 动画的嵌入 浏览器支持GIF 格式的动画文件。只需生成这种动画文件，和图象文件嵌入完全一样。 例9.3-2,9.2 HTML编程基础,9.2 HTML编程基础,表示将在图象尚未装 入时显示一个箭头,8）列表 列表适合于罗列有关信息内容。列表项可以是段落、有格式文本或超媒体连接。列表可以嵌套,显示时按层次缩进。列表可分为三种:枚举式、编号式、定义式。,9.2 HTML编程基础,9.2 HTML编程基础,（1）枚举式列表 使用成对标记UL和一个以上的LI语句来定义。 每个LI标识一项列表项。 显示时,每个LI定义的项目前

20、均有3个黑圆点作前导记号 。 例 : UL LI.first list item LI.second list item . /UL 例9.4-1,9.2 HTML编程基础,9.2 HTML编程基础,（2）编号式列表 使用成对标记 OL和一个以上的 LI语句来定义。 每个LI标识一项列表项。 显示时每个LI定义的项目前均自动加有序列编号。例如: OL LI.first list item LI.second list item . /OL 例9.4-2,9.2 HTML编程基础,9.2 HTML编程基础,（3）定义式列表 定义式列表使用成对标记DL来定义。 使用标记和DD来定义两个层次。 标记

21、定义目的标题；DD标记定义内容。 显示时每个DT定义列表项的下面，产生一段由DD定义的说明文字。例如: DL DTterm name DDterm definition . /DL 例9.4-3,9.2 HTML编程基础,9.2 HTML编程基础,9）表格 （1）表格的属性 表格是由成对标记来标识的。 表格属性有 对齐方式 align： left、right和center 表格宽度 width： n和n% 表格边界宽度border：n,9.2 HTML编程基础,9.2 HTML编程基础,（2）建立表格 建立表格的标记为、 和。 单标记 说明表格的一行； 双标记 说明表格的列标题； 双标记说明表

22、格的元素。 学号姓名 年龄 200601成功21 例9.4-4,9.2 HTML编程基础,9.2 HTML编程基础,表格行的属性有align和valign。 属性valign：指定表格行中元素的垂直对齐情况。 参数：top（元素顶对齐）；bottom（底对齐）；middle（中间对齐）和baseline（底线对齐）。 学号姓名年龄 200601 王晓芳 20 例9.4-5,9.2 HTML编程基础,9.2 HTML编程基础,10）表单(FORM) （1）表单的基本属性 表单使用成对标记和来定义。 动作属性ACTION：递送信息表单指定的URL地址 例如：,9.2 HTML编程基础,9.2 HT

23、ML编程基础,方式属性METHOD：指定填表信息传输的方式，如何将表单提交给服务器（HTTP方式），有两种标准方式可选:GET（获得）和 POST(邮递)，一般用POST。 GET将输入的信息转至ACTION所指定的URL位置作进一步处理，将表单中的参数信息合成在URL中，”?”问号开头，使用“ Red.avi 为视频文件. 循环播放 #=循环数 将循环播放不止。 ,9.2 HTML编程基础,9.2 HTML编程基础,2）脚本编辑 DHTML允许使用编程语言C+操纵网页上的对象，也可使用Javascript、VBscript操纵网页上的对象。脚本嵌在Web页中。 VBscript是在Visua

24、l Basic基础上设计的，这一语言通过微软的信息服务器（IIS）和活动服务器网页（ASP）在Web服务器方得到支持。采用VBscript编写的脚本放在标记之间。,9.2 HTML编程基础,9.2 HTML编程基础,Java script使用了一些和Java相同的结构和语法。采用Java script编写的脚本，脚本必须写在一系列脚本标记中，格式如下： ,DHTML的可编程性，给Web页带来了新的功能。例如，以前在改变Web页的元素时，只能等待网页的重新下载，而使用DHTML，可以单击屏幕上方的某个图像，就可以使屏幕下方的段落立刻发生变化，而不必再访问服务器，这一改变是通过编辑脚本程序实现的。

25、通过编辑脚本程序，所有的表格可变成活的数据库，用户可以动态和排序地筛选其中的数据。这样一来，就减少了对服务器的请求，因此降低了服务器的负荷，提高了客户机和服务器的总体性能。,9.2 HTML编程基础,9.2 HTML编程基础,3）使用样式表 CSS DHTML的基础是层叠样式表CSS(Cascading Style Sheets)，样式是指由Web页作者定义的一组显示和定位属性。 CSS最大的特点是面向对象的网页设计，解决Web页面的继承和显示问题。也就是说，把每一页、每一段落、每个图像和表格都看成是一个对象。然后声明该对象的每个实例。 每个实例都有一种样式(Style)，即一组属性或显示指令

26、。只要声明一次，这些属性就会贯穿在整个网页甚至整个站点中。,9.2 HTML编程基础,9.2 HTML编程基础,CSS所能改变的属性包括：字体、文字间的间距、列表、颜色、背景、页边距和位置。 CSS的格式有两种，嵌入式格式和格式页。 嵌入式格式：使用STYLE属性将格式应用在单个元素上。 格式页：将格式应用在网页或整个Web站点上。格式页可以是链接到HTML文档的一个外部文件，也可以包含在文档之中。,9.2 HTML编程基础,9.2 HTML编程基础,嵌入式格式 使用STYLE属性可以在网页的任何标记中，应用嵌入式格式 例如：This text is in a SPAN. 成对标记为不带任何格

27、式的文本容器， STYLE=“font-weight:bold”将文本改为粗体字。,9.2 HTML编程基础,9.2 HTML编程基础,格式页 采用和标记定义边界。 格式页包含一个或多个格式定义 一个格式定义格式如下: Selectctorproperty：Value； property：Value； selector表示要修改的元素，例如用A、P等； Property表示要修改的属性:例如：color(表示property )： (value表示property的值);例如，value的值设置为blue。,9.2 HTML编程基础,9.2 HTML编程基础,图9.3 使用样式表CSS,下面是

28、一个应用CSS的典型例子。,9.2 HTML编程基础,9.2 HTML编程基础,例9.6 Acolor: blue Pbackground-color: red; color:yellow 您好 请注意这一段文字的颜色和背景 参见效果,9.2 HTML编程基础,9.2 HTML编程基础,例9.7 使用样式和类设计网页，运行结果如下图所示,9.2 HTML编程基础,9.2 HTML编程基础, Welcome H1FONT-SIZE: 10pt; COLOR: blue /定义样式H1/ B.typeFONT-SIZE: 16pt; COLOR:red /定义样式B/ THIS IS A PICT

29、URE /使用样式B/ DO YOU LIKE THIS? /使用样式H1/ 参见效果,9.2 HTML编程基础,使用样式以及类 前面的程序段中有两个样式：H1和B.type。 H1是一个有效的DHTML元素，在程序中由 标记的部分将继承样式H1的全部属性。 类定义格式是元素名后加上一个圆点和类名。本例用户创建的元素类B.type，引用时要用来声明，标记的部分将继承样式B的全部属性。 class定义的类，是从现有类派生出来的，标志具有标志的所有属性。,9.2 HTML编程基础,9.2 HTML编程基础,1）ASP技术的工作原理 Microsoft Active Server Pages(ASP

30、)是一个位于Web服务器端的开发环境，属于ActiveX技术中的Server端技术。通过这种环境，用户可以创建和运行动态的交互式 Web服务器应用程序，如交互式的网页，包括使用HTML表单收集和处理信息。利用它可以产生和运行动态的、交互的、高性能的Web服务应用程序。,一般的HTML页面访问，首先根据HTML文件的URL地址，用户通过浏览器将网页请求发送到服务器端，服务器收到请求，根据扩展名.html或者.htm判断HTML文件的请求，将相应的HTML文件从磁盘中取出送回浏览器，经浏览器程序解释后在浏览器窗口显示结果。在请求ASP程序的过程时，大部分过程与上面一样，ASP中的命令和Script

31、语句都是由服务器来解释执行的，执行结果动态生成Web页面，回送到浏览器。具体说，当判断出ASP文件并从磁盘取出时，它是向特定的ASP.dll程序发送该文件，从上向下处理，执行这个请求文件中的所有语句，然后生成一个HTML文件，结果以纯HTML代码形式发送到客户端浏览器，经过客户端浏览器解释后在浏览器中显示。,9.2 HTML编程基础,图9.5 ASP运行原理图,ASP文件的后缀名为asp，相当于一个可执行文件，放在Web服务器上有可执行权限的目录下。当浏览器向Web Server请求调用ASP文件时，就启动了ASP。Web Server开始调用ASP，执行每一个命令，然后动态生成一个HTML页

32、面并送到浏览器。,2）ASP运行环境和技术特点 （1）运行环境 Active Server Pages是由Microsoft公司推出的。Microsoft公司推出的Internet信息服务器（Internet Information Server，IIS）能实现Acdve Server Pages的强大功能，还有一些其他的服务器在安装了ASP组件后也能实现这个功能，运行ASP程序。,安装IIS步骤为：在控制面板下选择添加或删除程序选择添加/删除Windows组件选择Internet信息服务(IIS)。安装IIS后，在C盘会建立一个根目录Inetpub，其子目录wwwroot则支持信息发布。如果

33、将*.asp程序置于c:Inetputwwwroot目录下，在地址栏输入http:/localhost/*.asp则可发布信息。,（2）特点 由于ASP是在服务器端执行的，则访问这些以.asp为后缀的文件时，不能用实际的物理路径，而只能用其虚拟路径。而服务器端程序执行完毕后，服务器仅将执行的结果返回给客户端浏览器，减轻了客户端浏览器的负担。ASP有如下特点： 无需编译，可直接在服务器端运行。 可以使用了各种脚本语言，并使用普通的文本编辑器进行编辑。 ASP的运行与浏览器无关，用户端浏览器只解释和显示转换为HTML代码的 Active Server Pages所设计的网页内容。 由于ASP程序的

34、源代码不会被传到客户端，因而具有较高的安全性。,（3）Web应用程序目录 Web应用程序的起始文件是使用者执行整个Web应用程序的进入点，它的地位相当于C程序的main()函数。必须将Web应用程序起始文件 (默认的主文件名可以是index或default，文件扩展名可以是.htm、.html 或.asp)和Global.asp等文件放在虚拟的根目录中。每当客户机连接服务器而不指定文档名时，自动打开一个Default.htm文件。 由一个虚拟根目录之下的所有ASP文件构成了一个Web应用程序。默认的Web程序存放的根目录为Inetpubwwwroot，当.htm和.asp这一类的文件数量通常很

35、多时，也可以在目录Inetpubwwwroot下建立一些新的目录。,对于多媒体文件一般建一个新的目录专门存放。对于程序控件也应该建立一些专门存放的目录，例如ActiveX或Java。ActiveX专门存放ActiveX控制项，它们可能是.dll或.ocx等文件类型；而Java则专门存放Javaapplet及其相关类文件 (可能是.class或.zip文件)。对于小规模的Web应用程序也可以用一个Bin存放所有的控制文件。 无论任何类型的数据文件，也应该适当分类，并且存放在各自的目录里面。例如，可以为纯文本类型的数据文件建立一个Text目录，或者根据数据内容建立一个MailAddress的目录。如果数据文件不多，可以只建个Data目录集中存放。,（4）ASP与脚本语言的关系 由 HTML页、脚本命令以及 ActiveX组件构成的ASP文档可以在ASP环境下运行，脚本命令嵌在HTML文档里，实现交互式的网页，所有的处理都在服务器端进行。ASP作为服务器端的对象模型，通过ASP对象所提供的方法和属性，可以很容易的操作服务器端的数据。ASP不是一种编程语言，通过JavaScript、VBScript和Java、ActiveX Server Comp