第7章 页制作与编程基础.ppt

1、,第7章 网页制作与编程基础,本章学习目标： 了解常用网页制作工具，基本掌握其中一种 掌握HTML语言 初步掌握VBScript或JavaScript脚本语言 了解动态网页技术 初步掌握ASP与数据库应用,7.1 常用网页制作工具,随着Internet技术的不断发展，网页制作工具越来越多，选择一种好的工具非常重要，能够起到事半功倍的效果。网页制作工具大体上可以分为两类：着眼于网页、网站全局的，称之为基本工具；着眼于网页某些元素的，称之为辅助工具。网页制作基本工具是指那些专门用来设计能在浏览器中显示为网页的HTML文档的专用工具软件，它能整合编排网页元素，生成HTML网页代码文件。比较流行的网页

2、制作工具软件包括Microsoft FrontPage和Macromedia Dreamweaver等。 网页制作辅助工具是指用来创建或加工网页上的图形、图像、动画、声音和视频等网页元素的工具软件。,7.1 常用网页制作工具,7.1.1 Microsoft FrontPage 2003,FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。 FrontPage的最强大之处是其站点管理与远程发布功能。用户只需在本地对网页进行编辑，FrontPage会跟踪用户编辑过

3、的文件，在发布时，它会自动将修改过的网页进行发布，未编辑过的网页可由用户决定是否再次向服务器发送。,7.1 常用网页制作工具,7.1.1 Microsoft FrontPage 2003,1FrontPage 2003的特色(1)强大的网页设计功能可以智能地完成HTML文本的编辑，并可以针对不同的浏览器对网页进行设置；可以提供对多种版本的浏览器的支持；完善了所见即所得的网页编辑操作。(2)丰富的网页设计模板、设计向导和主题样式提供了多种网页设计模板、网页设计向导和主题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。,7.1 常用网页制作工具,7.1.1 Micros

4、oft FrontPage 2003,2FrontPage 2003的新增功能 (1)设计网站FrontPage 2003 具有经过改进的设计环境、新的布局和设计工具、模板以及经过改进的主题，这一切可以帮助用户实现网站创意，而无需任何HTML知识。(2)开发网站FrontPage 2003具有改进的创作环境、新的图形功能、强大的编码工具（帮助用户应用并增加各种编码语言知识）、以及创建交互式脚本的工具。此外，FrontPage 2003可以生成有效和干净的HTML，能让用户更好地控制代码。,7.1 常用网页制作工具,7.1.1 Microsoft FrontPage 2003,3FrontPag

5、e 2003工作界面,7.1 常用网页制作工具,7.1.1 Microsoft FrontPage 2003,3FrontPage 2003工作界面,窗口栏的内容随着所选视图不同而不同。为了便于用户制作网页和查看、修改Web站点的组织结构，FrontPage 2003提供了6种视图。单击视图菜单相应的菜单项可以切换到不同的视图。各个视图的功能分别为：,“网页”视图：网页视图是进行网页编辑的操作界面。“文件夹”视图：用来对网站的目录和文件夹进行管理。“报表”视图：用于查看与网页制作有关的各项参数。“远程网站”视图：可以发布整个网站或个别文件，还可以在两个或更多个位置之间同步文件。“导航”视图：用

6、来显示和编辑网页的导航关系。“超链接”视图：显示某个网页与其他网页之间的关系。“任务”视图：用来查看网站和网页设计的完成情况。,7.1 常用网页制作工具,7.1.2 Adobe Dreamweaver CS3,使用Dreamweaver，设计师可以随心所欲地编写代码、设计网站网页以及进行高级开发。无论是喜欢手写HTML代码还是习惯于可视化环境，Dreamweaver都能提供方便快捷、功能强大的工具，使用Dreamweaver将是一种全新的体验。在易用、创新、规范等优点的基础上，Dreamweaver还拥有更先进的网页布局和设计环境，以及更为强大的代码编辑功能等卓越特性。 Dreamweaver

7、 CS3的操作界面主要由以下几个部分组成：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性检查器以及多个面板组，如图7-2所示。,7.1 常用网页制作工具,7.1.2 Adobe Dreamweaver CS3,图7-2 Dreamweaver CS3 的界面布局,7.1 常用网页制作工具,1标题栏(注意区别文档的标题和文档的文件名称) 2菜单栏 3插入栏 4文档工具栏 5“属性”检查器 6其他面板,7.1.2 Adobe Dreamweaver CS3,7.1 常用网页制作工具,7.1.3 网页美化工具,1Photoshop CS3 2Fireworks CS3 3Flash CS3,为了

8、使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。,7.2 HTML语言,7.2.1 HTML语言概述,1什么是HTML HTML英文全名是Hyper Text Markup Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统（如UNIX、Windows等）。它主要是在原来文本文件的基础上，增加一系列的标识符来描述格式，形成网络文件。当用户使用浏览器下载时，就把这些标识符解释成应有的含义，并按照一定的格式将这些被标识的文件显示在屏幕上，而HTML的标识符号并不显

9、示在屏幕上。,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构(1)HTML文档的基本结构下面是一个最基本的超文本文档的源代码,My first page我的第一个网页,HTML文件由标记和被标记的内容组成。每个标记都有“”围住，以表示这是HTML代码而非普通文本，标记能产生所需的各种效果。就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大都为相应的英文单词首字母或缩写，很好记忆。各种标记差别很大，但总的表示形式却大同小异。,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构(2)HTML的标记单标签某些标记称为“单标签”，它只需单独使

10、用就能完整地表达意思。这类标记的语法是： 最常用的单标签是, 它表示换行。双标签另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：受标记影响的内容例如你想对某段文字的加粗显示，就将此段文字放在 标记中, 如：你要加粗的字,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构(2)HTML的标记标签属性许多单标记和双标记的始标记内可以包含一些属性，标记要通过属性来制作出各种效果。其语法是：受影

11、响内容需要注意的是，并不是所有的标记都有属性；根据需要可以用该标记的所有属性，也可以只用需要的几个属性。在使用时，属性之间没有顺序。,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构(3)HTML的几个部分HTML文件以开头，以结尾。浏览器解释网页代码的起始标志。HTML文件包括头部（head）和正文（body）。1)head头部信息,：表示这是网页的题头部分，用来说明文件命名和与文件本身的相关信息。通常这部分标记来声明此网页的默认语言编码、关键字、使用软件等，个别的标记产生页面动作，第4行声明超文本头部分结束。在简单的网页中这部分不重要，而较复杂的网页中，比如：用CS

12、S样式表、JavaScript语言等，这部分会相当重要。：网页的标题。标题概括了网页的内容，能迅速了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。在网页的头部代码中，还有另外一种文头标记meta标记，基本语法是：。,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构(3)HTML的几个部分2）body文档主体部分,：是网页的正文部分。HTML文件主体标记的格式为：。作为网页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色

13、、文字颜色以及超文本链接颜色等，主要属性如表7-1所示。,HTML代码在书写时不严格区分大小写，也并不要求在书写时缩进，但为了程序的易读性，建议网页设计者使标记的首尾对齐，内部的内容向右缩进几格。,7.2 HTML语言,7.2.1 HTML语言概述,2HTML文档的结构(3)HTML的几个部分2）body文档主体部分,表7-1 BODY标记属性值,7.2 HTML语言,7.2.1 HTML语言概述,3一个简单的HTML实例,一个简单的HTML示例欢迎光临我的主页这是我第一次做主页，无论怎么样，我都会努力做好！,7.2 HTML语言,7.2.1 HTML语言概述,4HTML的特点,HTML是独立

14、于平台的，它兼容多平台。 HTML文件中含有大量的特定标记(tags)，该标记用于解释如何显示指定的内容。 HTML文件中包含超文本内容，如多媒体信息、E-mail地址、数据库查询结果等。 HTML文件是一个有特定标记的、可识别的ASCII文本文件，通常文件扩展名为.html或.htm。 编写一个HTML文件不需要特殊的软件，只要有一个字符编辑器就可以完成。,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(1)标题文字标记,标题文字的格式为：标题文字,属性align用来设置标题在页面中的对齐方式：left（左对齐）right（右对齐）center（居中对齐） 属性n用来指

15、定标题文字的大小。N可以取16的整数值，取1时文字最大，6时文字最小 与用定义的网页标题不同，标题格式显示在浏览器窗口中，而不显示在浏览器的标题栏中。,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(1)标题文字标记,设置标题第1级标题(h1)第2级标题(h2)第3级标题(h3)第4级标题(h4)（居左）第5级标题(h5)（居右）第6级标题(h6)（居中）,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(2)字符格式标记,格式为：被设置的文字,标记可设定文字的字号（大小）、字体和颜色。 size用来设置文字的大小。数字的取值范围从17，size取1时

16、最小，取7时最大。 Face用来设置字体。 Color用来设置文字颜色。,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(2)字符格式标记,1)和标记都可以设置文字的大小，二者的区别见下表(当中的size取7时，文字比要大)。,2)设置字体：在网页设计中要尽量用常见的字体。必要的罕见字体可以转化为文字图像。,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(2)字符格式标记,3)设置文字的颜色：,标记中的text属性，设定整个网页文字的颜色 标记中的color属性，设定网页、段落、短语、词或字的颜色。 与的优先级，标记优先。,标记同时对文字颜色进行定义

17、今天天气真好 黑色蓝色 粉红色,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(2)字符格式标记,3)设置文字的颜色：,颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。上例中同时使用了body的text属性和font的color属性来对文字的颜色进行设置，但最后在网页中的文字颜色应该是离文字本身最近的标记属性所定义的。另外，在title中涉及网页中的特殊替换字符，其字符所表示的的含义如下表所示。,7.2 HTML语言,7.2.2 文档的格式与风格,1字符的格式化,(2)字符格式标记,4)设置字型：,字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。

18、字型的控制标记见下表所示：,7.2 HTML语言,7.2.2 文档的格式与风格,2段落格式化,(1)强行换行标记,格式为：文字,实例1：不使用无换行示例登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。,7.2 HTML语言,7.2.2 文档的格式与风格,2段落格式化,(1)强行换行标记,实例2：使用后的效果换行示例登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。,7.2 HTML语言,7.2.2 文档的格式与风格,2段落格式化,(2) 段落标记,格式为：文字,实例1：居中对齐CENTER段落标签浣溪沙 一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾

19、相识燕归来。小园香径几徘徊。,7.2 HTML语言,7.2.2 文档的格式与风格,2段落格式化,(2)段落标记,实例2：参见右图段落标签登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。,7.2 HTML语言,7.2.2 文档的格式与风格,2段落格式化,(2)段落标记,文件段落的开始由来标记，段落的结束由来标记。标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使用也可省略结束标记。一个强制换段标记可以看作是两个强制换行标记。其中属性align用来设置段落的对齐方式，可以为left、center或right，分别表示居左、居中、居右。默认时

20、默认为left。,格式为：文字,7.2 HTML语言,7.2.2 文档的格式与风格,2段落格式化,(3)分区显示标记,格式:文本或图象,文本块、一段文字或标题在网页上的布局都有3种方式：左对齐、居中和右对齐。在标记中使用align属性，其属性取值分别为：left、center、right。可以设置布局的标记有：、。当在许多段落中设置对齐方式时，常使用标记。,7.2 HTML语言,7.2.2 文档的格式与风格,2段落格式化,(3)分区显示标记,实例1，参照右图分区显示标记的应用居中center居中center居左left居左left居右right居右right,7.2 HTML语言,7.2.2

21、文档的格式与风格,2段落格式化,(4)水平线,格式为：,align设定横线放置的位置，其属性取值为：left、center、right。Size设定线条粗细，以像素为单位，默认为2。Width设定线段长度，可以是绝对值或相对值。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终填满当前窗口。Noshade设定线条为无阴影，若默认则有阴影或立体效果。Color设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以用相应英文单词或以“#”引导的一个十六进制代码来表示。,7.2 HT

22、ML语言,7.2.3 加入多媒体与超级链接,1加入图像、视频、动画,(1)插入图形,格式为：例：设置网页的背景图像、背景颜色可参照BODY标记的相关属性。,7.2 HTML语言,7.2.3 加入多媒体与超级链接,1加入图像、视频、动画,(2)插入背景音乐,1)音频标记能在网页中加入背景声音，格式为： ,src=“your.mid“ ：设定 midi 档案及路径，可以是相对或绝对。 autostart=true ：是否在音乐档下载完之后就自动播放。true 是，false 否 （默认值)。 loop=infinite ：是否自动反复播放。LOOP=2 表示重复两次，Infinite 表示重复多次

23、。 要加入的背景声音文件的格式为.wav、.mid、.ram等，播放次数为-1时，声音将一直播放直到关闭网页。,7.2 HTML语言,7.2.3 加入多媒体与超级链接,1加入图像、视频、动画,(2)插入背景音乐,2)使用EMBED标签嵌入音乐文件,使用BGSOUND标签嵌入背景音乐时，当最小化窗口时BGSOUND就会暂停，为了保证背景音乐的连贯性，建议使用HIDDEN了的EMBED标签。 ,src=“your.mid“：设定midi档案及路径，可以是相对或绝对 autostart=true：是否在音乐档下载完之后就自动播放。true是，false否(默认值) loop=“true“：是否自动反

24、复播放。LOOP=2 表示重复两次，true是， false否 hidden=“true“：是否完全隐藏控制画面，true为是，no为否(默认值),7.2 HTML语言,7.2.3 加入多媒体与超级链接,1加入图像、视频、动画,(3)插入视频,1)用标记的dynsrc属性可以向网页中加入.avi视频剪辑文件。 格式为：,Border：边框大小。 Src：在浏览器尚未完全读入AVI文件时，先在AVI播放区域显示的图像。 Dynsrc：指定播放视频文件的路径和文件名。 Loop：指定播放循环的次数。当为-1时，则反复播放。 Loopdelay：两次播放的时间间隔。 Start：指定何时开始播放。F

25、ileopen是文件打开时，mouseover是鼠标移到视频文件上时。,2)插入flash用标记，其格式为 文件,7.2 HTML语言,7.2.3 加入多媒体与超级链接,2加入超级链接,超链接（Hyperlink）可以看作是一个热点，它可以从当前Web页定义的位置跳转到其他位置，包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。当Web页包含超链接时，Web页中的外观形式为彩色且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记来定义。标记的格式为： 热点,7

26、.2 HTML语言,7.2.3 加入多媒体与超级链接,2加入超级链接,(1)属性href为超文本引用，它的值为一个URL，是目标资源的有效地址。在书写URL时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，应写绝对路径.(2)属性name指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址。(注意：Href不能与name同时使用。)(3)Target=”_blank”或Target=”new”，将链接打开的空白页面或在新的浏览器窗口中打开。Target=”_parent”，将链接的页面内容，显示在直接父框架窗口中。Target=”_self”，将链接的页面内容，显示在当前

27、窗口中（默认值）。Target=”_top”，将框架中链接的页面内容，显示在没有框架的窗口中。Target=”框架名称”，只运用于框架中，若被设定则链接结果将显示于该“框架名称”指定的框架窗口中，框架窗口名称是事先由框架标记所命名的，可以理解为程序设计中的变量名称。,7.2 HTML语言,7.2.3 加入多媒体与超级链接,2加入超级链接,(4)创建指向其他页面的链接，就是在当前页面与其他相关页面间建立超链接。无论目标文件与当前文件的目录关系如何，其格式为： (5)创建指向本页中的链接时，需要定义两个标记：一个为超级链接标记，另一个为书签标记。格式为：。书签为该超级链接的目标，定义格式为：。同理

28、，如果要创建指向其他页面中的书签，定义的格式为：。(6)在网页中，超级链接还可以指向下载文件和电子邮件。他们的格式分别为：；(7)图像也可以做为链接指针。格式为：，可以看出，用取代了链接指针中text的位置。是图像元素，它表明显示url代表的图像文件。,7.2 HTML语言,7.2.4 表格编辑,1表格的基本形式,表格对于格式化信息有着强大的功能，它能控制各种信息的位置，使得页面结构协调一致，用其他标记不容易做到的文本对齐，只要把文本块放到表格中就行了。任何表格都有三个基本要素：表行、表头和表项，每个要素都有自己的标签,一个表由开始，结束，表的内容由，和定义，其中：,说明表的一个行，表有多少行

29、就有多少个，即定义表行； 说明表的列数和相应栏目的名称，有多少个栏目就有多少个，即定义表头； 则填充由和组成的表格，即定义表项。,是否用表格线分开为部分内容用border属性说明。,7.2 HTML语言,7.2.4 表格编辑,1表格的基本形式,实例1：一个有表格线和一个元组的组成的表格，参照右图。the simplest html file食品饮料水果 面包可乐西瓜 ,7.2 HTML语言,7.2.4 表格编辑,2表格的修饰形式,(1)有通栏的表有横向通栏的表用属性说明，colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。实例2：下面是一个有表格线和有横向通栏

30、的表格。, the simplest html file食品饮料水果 面包牛奶可乐西瓜,7.2 HTML语言,7.2.4 表格编辑,2表格的修饰形式,(1)有通栏的表有纵向通栏的表用rowspan=#属性说明。rowspan表示纵向栏距，#表示通栏占据的网格数，小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用明确给出一横向栏目结束,这和表格的基本形式是不同的。实例3：下面是一个有表格线和有纵向通栏的表格。, the simplest html file早餐食品面包 饮料可乐 水果西瓜,7.2 HTML语言,7.2.4 表格编辑,2表格的修饰形式,(2)表的大小，边框宽度，表格间距 表的

31、大小用width=#和height=#属性说明。前者为表宽，后者为表高，#是以象素为单位整数。 表格间距即划分表格的线的粗细用标记ellspacing=#表示，#的单位是象素。(3)表中文本的输出文本与表框的距离用cellpadding=#说明。#的单位是象素。表格的宽度大于其中的文本宽度时，文本在其中的输出位置与用align=#说明。#是 left，center和right三者之一，分别表示左对齐，居中和右对齐，align属性可修饰，和链接签。表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。#是top，middle，bottom，baseline四者之一。同样，v

32、align可以修饰，中的任何一个。,7.2 HTML语言,7.2.4 表格编辑,2表格的修饰形式,(4)表格颜色表格的颜色用bgcolor=#指定。#是16进制的6位数，格式为rrggbb，分别表示红、绿、兰三色的分量。或者是16种已定义好的颜色名称。(5)表格标题表格可以加上标题。标题的语法格式如下： ，#可以是left，center和right三者之一。,7.2 HTML语言,7.2.5 创建框架,1框架的基本结构如下：,框架可以将浏览器的窗口分成多个区域，每个区域可以单独显示一个html文件，各个区域也可相关连地显示某一个内容，例如可以将索引放在一个区域，文档内容显示在另一个区域。,.,

33、.中的内容显示在不支持框架的浏览器窗口中，因而这里指向一个普通版本的html文件，以便使用不支持框架浏览器的用户阅读。框架由指定，并且可以嵌套，分区中各部分显示的内容用指定。frame是一个新出现的标记，浏览器并不都支持。可以将窗口横向分成几个部分，也可以分成纵向几个部分，还可以形成混和框架。,7.2 HTML语言,7.2.5 创建框架,1框架的基本结构如下：,(1)横向框架横向框架用指定，#可以是一个百分数，也可以是一整数。前者规定各框架占窗口的百分数，后者指定各框的绝对大小。例如，下面的例子将窗口分成30%、20%、50%的几个区域，各区域的内容分别为A.html，B.html，C.htm

34、l。,HTML 语言教程,7.2 HTML语言,7.2.5 创建框架,1框架的基本结构如下：,(2)纵向框架：纵向框架用指定，#含义同上。(3)混合框架将窗口分成纵横几个区域时，用代替链接，即可将原来分好的区域再次分框，下面的例子先将窗口分成20%，80%，然后将右边的区域再分成分别占40%和60%的上下两个区域，如图7-22 所示。(4) 框架与框中文本的间距分框与其中的文本间距可以用Marginwidth=#和margiheight=#来指定，前者指定文本与分框的边缘的横向距离，后者为纵向距离，其单位都为象素。, HTML 语言教程,7.2 HTML语言,7.2.5 创建框架,2分框间的关

35、联,框架之间可以有特定的关联，比如将某一框架的内容输出到另一个框架中，这样该段文字就可以把其中一个框作为输出框，另一个框作为选择框。实现这种关联需要做下列的事情。(1)在分框的html文件中标记各个框，标记的方法是在中加入name属性，比如上例，定义左边的框为索引，右边框为输出。(2)在A.html文件中指定输出到哪个框中去的方法是在A.html文件中加入下列一行。这便得用鼠标点取A.html中的链接指针，它的输出会显示在右边的框中。,7.2 HTML语言,7.2.6 创建表单,表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交

36、和重填按钮等内容。用户填写了所需的资料之后，按下“提交”按钮，这样所填资料就会通专门的接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到服务提供者之间的反馈和交流。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用的CGI(Common Gateway Interface，即通用网关接口)程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控

37、制其他定义了处理脚本的处理工作。,7.2 HTML语言,7.2.6 创建表单,1表单标签form/form,格式：FORM action=url method=get|post enctype=mime target=./FORM相关属性解释如下：action=url 指定用来处理表单提交的数据的应用程序。它可以是任何一个有效的URL，那么用户在表单中输入的信息就会传入那个URL处。method=get或post，它控制收集信息的传送方式。post方法可通过action所指定的服务程序对表单进行处理；GET方法可将表单的内容作为查询URL中的串来传送，服务器使用QueryString集合来存储

38、这些内容。Enctype：指定如何对数据编码，只有在使用post方式时这个属性才适用，而且有唯一的可能值，即默认值application/x-www-form-urlencoded。该属性在平时的表单创建中可以不使用。,7.2 HTML语言,7.2.6 创建表单,1表单标签form/form,格式：FORM action=url method=get|post enctype=mime target=./FORMTARGET=#，#可以是下列值：_blank：在一个新的、无名浏览器窗口调入指定的文档；_self：在指向这个目标的元素的相同的框架中调入文档；_parent：把文档调入当前框架的父

39、FRAMESET框中；这个值在当前框没有父框时等价于_self；_top：把文档调入原来的最顶部的浏览器窗口中（因此取消所有其它框架）；这个值等价于当前框架没有子框架时的_self；,7.2 HTML语言,7.2.6 创建表单,2表单元素,（1）文本框文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。格式：input type=text name=.size=.maxlength=.value=.属性解释如下：type=text定义单行文本输入框；name属性定义文本框的名称，要保证数据的准确采集，要定义一个独一无二的名称；size属性定义文本框的

40、宽度，单位是单个字符宽度；maxlength属性定义最多输入的字符数；value属性定义文本框的初始值；,7.2 HTML语言,7.2.6 创建表单,2表单元素,（2）多行文本框格式：TEXTAREA name=.cols=.rows=.wrap=virtual/TEXTAREA属性解释如下：name：同文本框cols：定义多行文本框的宽度，单位是单个字符宽度；rows：定义多行文本框的高度，单位是单个字符宽度；wrap：定义输入内容大于文本域时显示的方式，可选值如下：默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；Of

41、f用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行；Virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。,7.2 HTML语言,7.2.6 创建表单,2表单元素,（3）密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。格式：input type=password name=.size=.maxlength=.（4）复选框复选

42、框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。格式：INPUT type=checkbox name=. value=.,7.2 HTML语言,7.2.6 创建表单,2表单元素,（5）文件上传框文件上传框看上去和其它文本框差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。在使用文件上传框以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE=multipart/form-data来确保文件被正确编码；另外，表单的传送方式必须设置成POST。格式：input type=

43、file name=.size=15 maxlength=100属性解释如下：type=file：定义文件上传框；name：同文本框；size：属性定义文件上传框的宽度，单位是单个字符宽度；maxlength：属性定义最多输入的字符数。,7.2 HTML语言,7.2.6 创建表单,2表单元素,（6）下拉选择框下拉选择框允许你在一个有限的空间设置多种选项，下拉选择框中带有下拉按钮，单击下拉按钮，出现多个可供选择的选项，用户单击其中的一项，即可选中。格式：select name=.size=.multipleoption value=.selected./option./select属性解释如下：

44、size：定义下拉选择框的行数；name：定义下拉选择框的名称；multiple：表示可以多选，如果不设置本属性，那么只能单选；value：定义选择项的值；selected：表示默认已经选择本选项。,7.2 HTML语言,7.2.6 创建表单,2表单元素,(7)表单按钮1)提交按钮：提交按钮用来将输入的信息提交到服务器。格式：input type=submit name=.value=.属性解释如下：type=submit：定义提交按钮；name：属性定义提交按钮的名称；value：属性定义按钮的显示文字； 2)复位按钮：复位按钮用来重置表单。格式：input type=reset name=

45、.value=.3)一般按钮：一般按钮用来控制其他定义了处理脚本的处理工作。格式：input type=button name=.value=.onClick=.属性解释如下：type=button定义一般按钮；onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为。,7.2 HTML语言,7.2.6 创建表单,3表单综合实例（参见右图）,姓名: 性别: 男 女 你喜欢的水果: 苹果 桔子 西瓜 梨 每个星期你大概会吃多少水果:少于1公斤 1至3公斤 多于3公斤对于吃水果，你的观点是： 多吃水果有利于身体,7.2 HTML语言,7.2.7 列表,列表可以分为无序列表、有序列表

46、和自定义列表。,1无序列表 无序号列表使用的一对标签是，每一个列表项前使用。其结构如下所示：第一项 第二项 第三项 ,实例1：结果请查看图7-21无序列表这是一个无序列表：国际互联网提供的服务有： WWW服务 文件传输服务 电子邮件服务 远程登录服务 其它服务,7.2 HTML语言,7.2.7 列表,列表可以分为无序列表、有序列表和自定义列表。,2有序列表 有序列表和无序列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：第一项 第二项 第三项 ,实例2：结果请查看图7-22有序列表这是一个有序列表：国际互联网提供的服务有： WWW

47、服务 文件传输服务 电子邮件服务 远程登录服务 其它服务,7.2 HTML语言,7.2.7 列表,列表可以分为无序列表、有序列表和自定义列表。,3自定义列表 除了上述两种列表以外，还可以根据需要自定义列表样式。格式为： ,7.2 HTML语言,7.2.8 样式表（CSS）简介,1样式表（CSS）概述,样式表（stylesheets）的技术诞生于1996年底，全称是层叠样式表（Cascading Stylesheets简称CSS），它可以对布局、字体、颜色、背景和其它图文效果实现更加精确的控制。使用样式表只通过修改一个文件就改变大量的网页的外观和格式，使网页的风格统一。使用样式表的具体优势主要体

48、现在以下几个方面：,格式和结构分离： 更好的控制页面全局的能力： 可以制作出体积更小下载更快的网页： 更快更容易地维护及更新大量的网页：,7.2 HTML语言,7.2.8 样式表（CSS）简介,2CSS添加到网页中的方法,(1)链接外部CSS样式表 (2)在HTML文档中植入CSS样式 (3)在标记中加入样式 (4)导入CSS样式表 (5)用脚本来运用CSS样式,7.3 脚本语言基础,7.3.1 脚本语言概述,1脚本语言的优势 脚本语言作为用来控制网页的控件和对象的一种编程语言的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力。从而基于

49、CGI静态的HTML页面被可提供动态实时信息，并对客户操作进行反应的Web页面的取代，脚本正是满足这种需求而产生的语言。脚本语言是一种非编译语言，直接被浏览器所解释执行，它是一种事件型程序，通过捕捉用户在各种浏览器中的行为来触发特定的程序段。脚本语言容易使用，在完成小任务方面表现相当出色，比如检查表单数据它在控制浏览器中的事件和访问，以及操作超文本标记语言元素方面的功能也很强大，深受广泛用户的喜爱的欢迎。,7.3 脚本语言基础,7.3.1 脚本语言概述,2脚本语言的使用,声明脚本语言有下列3种方法： 在IIS中设置默认的脚本，如未更改设置则为VBScript。 在程序的第一段加上。 在程序体中加入对象声明。,7.3 脚本语言基础,7.3.2 VBScript,1VBScript基本语法,(1)VBScript不区分大小写。 (2服务器端的VBScript位于中间，即，也可用VBScript代码脚本如果放在客户端执行，则只需用VBScript代码(3)程序注释(Rem语句来注释、一个单引号字符 ),