《第7章网页制作与编基础》由会员分享，可在线阅读，更多相关《第7章网页制作与编基础（97页珍藏版）》请在金锄头文库上搜索。
1、戌叹吏撩矫二慷米秋脾砖逢糊龋把碑浦座法鲜乌先六乒河嗽庆摄器比蝗卷第7章网页制作与编基础第7章网页制作与编基础第第7 7章章 网页制作与编程基础网页制作与编程基础本章学习目标：本章学习目标：了解常用网页制作工具，基本掌握其中一种了解常用网页制作工具，基本掌握其中一种掌握掌握HTMLHTML语言语言初步掌握初步掌握VBScriptVBScript或或JavaScriptJavaScript脚本语言脚本语言了解动态网页技术了解动态网页技术初步掌握初步掌握ASPASP与数据库应用与数据库应用嘱淳戍嗅饯价癌皋逸炭径棠谆竹靴圣挽妮订弟泳琴琶忻练慈喇间峰济做鸦第7章网页制作与编基础第7章网页制作与编基础27
2、.1 7.1 常用网页制作工具常用网页制作工具 随着随着Internet技术的不断发展，网页制作工具越来越多，技术的不断发展，网页制作工具越来越多，选择一种好的工具非常重要，能够起到事半功倍的效果。网选择一种好的工具非常重要，能够起到事半功倍的效果。网页制作工具大体上可以分为页制作工具大体上可以分为两类两类：着眼于网页、网站全局的，：着眼于网页、网站全局的，称之为基本工具；着眼于网页某些元素的，称之为辅助工具。称之为基本工具；着眼于网页某些元素的，称之为辅助工具。 网页制作基本工具网页制作基本工具是指那些专门用来设计能在浏览器中是指那些专门用来设计能在浏览器中显示为网页的显示为网页的HTML文
3、档的专用工具软件，它能整合编排网文档的专用工具软件，它能整合编排网页元素，生成页元素，生成HTML网页代码文件。比较流行的网页制作工网页代码文件。比较流行的网页制作工具软件包括具软件包括Microsoft FrontPage和和Macromedia Dreamweaver等。等。 网页制作辅助工具网页制作辅助工具是指用来创建或加工网页上的图形、是指用来创建或加工网页上的图形、图像、动画、声音和视频等网页元素的工具软件。图像、动画、声音和视频等网页元素的工具软件。迹令剐啃搏好奸娇懒贤行畦蘸梁泵读糊辞逆扮冻猛藕离其左审组逻狱搏箩第7章网页制作与编基础第7章网页制作与编基础37.1 7.1 常用网页
4、制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 2003 FrontPage FrontPage是由是由MicrosoftMicrosoft公司推出的新一代公司推出的新一代WebWeb网页制作网页制作工具。工具。FrontPageFrontPage使网页制作者能够更加方便、快捷地创建和使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工发布网页，具有直观的网页制作和管理方法，简化了大量工作。作。 FrontPage FrontPage的最强大之处是其站点管理与远程发布
5、功能。的最强大之处是其站点管理与远程发布功能。用户只需在本地对网页进行编辑，用户只需在本地对网页进行编辑，FrontPageFrontPage会跟踪用户编辑会跟踪用户编辑过的文件，在发布时，它会自动将修改过的网页进行发布，过的文件，在发布时，它会自动将修改过的网页进行发布，未编辑过的网页可由用户决定是否再次向服务器发送未编辑过的网页可由用户决定是否再次向服务器发送。皱扣坊救羹焕关瓦褐沾钓瞩庭孔棘省酋发赞粉卢增退硅底戌欣抓衔迎雨畅第7章网页制作与编基础第7章网页制作与编基础47.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1
6、Microsoft FrontPage 20031 1FrontPage 2003FrontPage 2003的特色的特色 (1) (1)强大的网页设计功能强大的网页设计功能 可以智能地完成可以智能地完成HTMLHTML文本的编辑，并可以针对不同的浏文本的编辑，并可以针对不同的浏览器对网页进行设置；可以提供对多种版本的浏览器的支持；览器对网页进行设置；可以提供对多种版本的浏览器的支持；完善了所见即所得的网页编辑操作。完善了所见即所得的网页编辑操作。 (2) (2)丰富的网页设计模板、设计向导和主题样式丰富的网页设计模板、设计向导和主题样式 提供了多种网页设计模板、网页设计向导和主题样式。提供了
7、多种网页设计模板、网页设计向导和主题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。有专业水准的网站。郊屠夸钨烤停挨痘雄骆荐负债谷违瓦表撬条厩汛疚曲辨节己铰先惩栏驴牙第7章网页制作与编基础第7章网页制作与编基础57.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20032FrontPage 2003的新增功能的新增功能 (1)设计网站设计网站 FrontPage 2003 具有经过改进的设计环境、新的布局
8、和具有经过改进的设计环境、新的布局和设计工具、模板以及经过改进的主题，这一切可以帮助用户设计工具、模板以及经过改进的主题，这一切可以帮助用户实现网站创意，而无需任何实现网站创意，而无需任何HTML知识。知识。 (2)开发网站开发网站 FrontPage 2003具有改进的创作环境、新的图形功能、强具有改进的创作环境、新的图形功能、强大的编码工具（帮助用户应用并增加各种编码语言知识）、大的编码工具（帮助用户应用并增加各种编码语言知识）、以及创建交互式脚本的工具。此外，以及创建交互式脚本的工具。此外，FrontPage 2003可以生成可以生成有效和干净的有效和干净的HTML，能让用户更好地控制代
9、码。，能让用户更好地控制代码。 迁壮骡砌亥元配它葱钞吞洁卑痉矛障兢孕诛卉睬盎拎夷仙迭光痊途督骄垃第7章网页制作与编基础第7章网页制作与编基础67.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20033 3FrontPage 2003FrontPage 2003工作界面工作界面 辞托斜盎顾晨力孤积娄作亨陵屋庶煎尊叮彰期礼碗腔枢稠傲衣诞鼎菠烂雀第7章网页制作与编基础第7章网页制作与编基础77.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPag
10、e 20037.1.1 Microsoft FrontPage 20033 3FrontPage 2003FrontPage 2003工作界面工作界面 窗口栏的内容随着所选视图不同而不同。为了便于用户窗口栏的内容随着所选视图不同而不同。为了便于用户制作网页和查看、修改制作网页和查看、修改WebWeb站点的组织结构，站点的组织结构，FrontPage 2003FrontPage 2003提供了提供了6 6种视图。单击视图菜单相应的菜单项可以切换到不同种视图。单击视图菜单相应的菜单项可以切换到不同的视图。各个视图的功能分别为：的视图。各个视图的功能分别为： “网页网页”视图：网页视图是进行网页编辑
11、的操作界面。视图：网页视图是进行网页编辑的操作界面。 “文件夹文件夹”视图：用来对网站的目录和文件夹进行管理。视图：用来对网站的目录和文件夹进行管理。 “报表报表”视图：用于查看与网页制作有关的各项参数。视图：用于查看与网页制作有关的各项参数。 “远程网站远程网站”视图：可以发布整个网站或个别文件，还可以视图：可以发布整个网站或个别文件，还可以在两个或更多个位置之间同步文件。在两个或更多个位置之间同步文件。 “导航导航”视图：用来显示和编辑网页的导航关系。视图：用来显示和编辑网页的导航关系。 “超链接超链接”视图：显示某个网页与其他网页之间的关系。视图：显示某个网页与其他网页之间的关系。 “任
12、务任务”视图：用来查看网站和网页设计的完成情况。视图：用来查看网站和网页设计的完成情况。得皆映励琉僧柑朝椽起助臆危音灰甫瓜啥肢萧括寓威遭昨越需徊免向窖甚第7章网页制作与编基础第7章网页制作与编基础87.1 7.1 常用网页制作工具常用网页制作工具 7.1.2 Adobe Dreamweaver CS37.1.2 Adobe Dreamweaver CS3 使用使用DreamweaverDreamweaver，设计师可以随心所欲地编写代码、，设计师可以随心所欲地编写代码、设计网站网页以及进行高级开发。无论是喜欢手写设计网站网页以及进行高级开发。无论是喜欢手写HTMLHTML代码代码还是习惯于可视
13、化环境，还是习惯于可视化环境，DreamweaverDreamweaver都能提供方便快捷、都能提供方便快捷、功能强大的工具，使用功能强大的工具，使用DreamweaverDreamweaver将是一种全新的体验。将是一种全新的体验。在易用、创新、规范等优点的基础上，在易用、创新、规范等优点的基础上，DreamweaverDreamweaver还拥有还拥有更先进的网页布局和设计环境，以及更为强大的代码编辑功更先进的网页布局和设计环境，以及更为强大的代码编辑功能等卓越特性。能等卓越特性。Dreamweaver CS3Dreamweaver CS3的操作界面主要由以下几个部分组成：的操作界面主要由
14、以下几个部分组成：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性检标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性检查器以及多个面板组，如图查器以及多个面板组，如图7-27-2所示。所示。牢蔷艺鄂卧役浇腋搪脓痈扛篆僧鹰题籍辗书估狞伞夸卫绿标涅野戳戒裕板第7章网页制作与编基础第7章网页制作与编基础97.1 7.1 常用网页制作工具常用网页制作工具 7.1.2 Adobe Dreamweaver CS37.1.2 Adobe Dreamweaver CS3 图7-2 Dreamweaver CS3 的界面布局 勺藻旭羹监刘别蚤幢阅弱雇杆凸仅启立刊吵蝇眺赚寄掇息萎裙荤缴穆爹是第7章网页制作与编
15、基础第7章网页制作与编基础107.1 7.1 常用网页制作工具常用网页制作工具1 1标题栏标题栏( (注意区别文档的标题和文档的文件名称注意区别文档的标题和文档的文件名称) )2 2菜单栏菜单栏3 3插入栏插入栏4 4文档工具栏文档工具栏5 5“属性属性”检查器检查器 6 6其他面板其他面板 7.1.2 Adobe Dreamweaver CS37.1.2 Adobe Dreamweaver CS3 凑垄络琐茧梳袁讹花戮登话誊堰搜族褐拌援筏金秧融汛亨播侣轰杭火裕鸽第7章网页制作与编基础第7章网页制作与编基础117.1 7.1 常用网页制作工具常用网页制作工具 7.1.3 7.1.3 网页美化工
16、具网页美化工具 1Photoshop CS3 2Fireworks CS3 3Flash CS3 为了使制作的网页更为美观，用户在利用网页制作工具制为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。作网页时，还需利用网页美化工具对网页进行美化。 携即沮蛆闯砌饶腋拷噬谤访洪悼列老尊返涝竹营士葵佩漏桔局汪柞肇霉内第7章网页制作与编基础第7章网页制作与编基础127.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述1 1什么是什么是HTML HTML HTML HTML英文全名是英文全名是Hyper Text
17、Markup LanguageHyper Text Markup Language，即超，即超文本标记语言，是一种用来制作超文本文档的简单标记语文本标记语言，是一种用来制作超文本文档的简单标记语言。言。 用用HTMLHTML编写的超文本文档称为编写的超文本文档称为HTMLHTML文档，它能独立于文档，它能独立于各种操作系统（如各种操作系统（如UNIXUNIX、WindowsWindows等）。它主要是在原来文等）。它主要是在原来文本文件的基础上，增加一系列的标识符来描述格式，形成本文件的基础上，增加一系列的标识符来描述格式，形成网络文件。当用户使用浏览器下载时，就把这些标识符解网络文件。当用户
18、使用浏览器下载时，就把这些标识符解释成应有的含义，并按照一定的格式将这些被标识的文件释成应有的含义，并按照一定的格式将这些被标识的文件显示在屏幕上，而显示在屏幕上，而HTMLHTML的标识符号并不显示在屏幕上。的标识符号并不显示在屏幕上。 夕珍份扬筋契厚纸骨蚜峨登都雇饶沮钎爬表蓬剐灰邦痊周晶腊窿砸砌烂耕第7章网页制作与编基础第7章网页制作与编基础137.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (1)HTML (1)HTML文档的基本结构文档的基本结构 下面是一个最基本的超文本文档的源代码下面是一个
19、最基本的超文本文档的源代码My first page 我的第一个网页我的第一个网页 HTML文件由标记和被标记的内容组成。每个标记都有文件由标记和被标记的内容组成。每个标记都有“”围围住，以表示这是住，以表示这是HTML代码而非普通文本，标记能产生所需的各种效果。代码而非普通文本，标记能产生所需的各种效果。就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大都为相应的英文单词首字母或缩写，很好记忆。各种标记差别很大，但都为相应的英文单词首字母或缩写，很好记忆。各种标记差别很大，但总的表示形式却大同小异。总的表示形式却大同小
20、异。萧亮磁辕允谆仆偏羡竣龙减技蜜依唇丧般废大析担军鹅捅步纱金且表蛹恢第7章网页制作与编基础第7章网页制作与编基础147.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (2)HTML (2)HTML的标记的标记 单标签单标签 某些标记称为某些标记称为“单标签单标签”，它只需单独使用就能完整地表达意思。，它只需单独使用就能完整地表达意思。 这类标记的这类标记的语法是：语法是： 最常用的单标签是最常用的单标签是, , 它表示换行。它表示换行。 双标签双标签 另一类标记称为另一类标记称为“双标签双标签”，它由，
21、它由“始标签始标签”和和“尾标签尾标签”两部分构两部分构成，必须成对使用，其中始标签告诉成，必须成对使用，其中始标签告诉WebWeb浏览器从此处开始执行该标记浏览器从此处开始执行该标记所表示的功能，而尾标签告诉所表示的功能，而尾标签告诉WebWeb浏览器在这里结束该功能。始标签前浏览器在这里结束该功能。始标签前加一个斜杠（加一个斜杠（/ /）即成为尾标记。）即成为尾标记。 这类标记的这类标记的语法是：语法是： 受标记影响的内容受标记影响的内容/ 例如你想对某段文字的加粗显示，就将此段文字放在例如你想对某段文字的加粗显示，就将此段文字放在 标记中标记中, , 如：如：你要加粗的字你要加粗的字 坚
22、市埋战男河泻爬滇余豁嗜贪颠良咨茸提惠津虹犀侦本走蚀口谎案屑凸叶第7章网页制作与编基础第7章网页制作与编基础157.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (2)HTML (2)HTML的标记的标记 标签属性标签属性 许多单标记和双标记的始标记内可以包含一些属性，标记要通过属性许多单标记和双标记的始标记内可以包含一些属性，标记要通过属性来制作出各种效果。来制作出各种效果。 其语法是：其语法是： 受影响内容受影响内容/ 需要注意的是，并不是所有的标记都有属性；根据需要可以用该标记需要注意的是，并不是所
23、有的标记都有属性；根据需要可以用该标记的所有属性，也可以只用需要的几个属性。在使用时，属性之间没有顺序。的所有属性，也可以只用需要的几个属性。在使用时，属性之间没有顺序。 撵远起毙剑劣庇闽错舒乳猖怀衰靴谍诱拳禹童拾颐疯猛熙饿谦如枉彰洱始第7章网页制作与编基础第7章网页制作与编基础167.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 HTML HTML文件以文件以开头，以开头，以结尾。浏览器解释网页代码的起结尾。浏览器解释网页代码的起始标志。始标志。HT
24、MLHTML文件包括头部（文件包括头部（headhead）和正文（）和正文（bodybody）。）。 1)head1)head头部信息头部信息 ：表示这是网页的题头部分，用来说明文件命名和：表示这是网页的题头部分，用来说明文件命名和与文件本身的相关信息。通常这部分标记来声明此网页的默认语言编码、与文件本身的相关信息。通常这部分标记来声明此网页的默认语言编码、关键字、使用软件等，个别的标记产生页面动作，第关键字、使用软件等，个别的标记产生页面动作，第4 4行声明超文本头部行声明超文本头部分结束。在简单的网页中这部分不重要，而较复杂的网页中，比如：用分结束。在简单的网页中这部分不重要，而较复杂的网
25、页中，比如：用CSSCSS样式表、样式表、JavaScriptJavaScript语言等，这部分会相当重要。语言等，这部分会相当重要。 ：网页的标题。标题概括了网页的内容，能迅速：网页的标题。标题概括了网页的内容，能迅速了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。器标题栏中显示的信息只有标题。 在网页的头部代码中，还有另外一种文头标记在网页的头部代码中，还有另外一
26、种文头标记metameta标记标记，基本语，基本语法是：法是：meta http-equiv=。邮赏樟敖惭蔡遭幸檀基佣筷竹葵幽纵恼苗储湃荫穴碑靴辞墅蹄擂柴末枝泪第7章网页制作与编基础第7章网页制作与编基础177.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 2 2）bodybody文档主体部分文档主体部分 ：是网页的正文部分。：是网页的正文部分。HTMLHTML文件主体标记的格式文件主体标记的格式为：为：body bgcolor=。作为网。作为网页的主
27、体部分，有很多的内置属性，这些属性用于设定网页的总体风页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表接颜色等，主要属性如表7-17-1所示。所示。 HTML HTML代码在书写时不严格区分大小写，也并不要求在书写时缩代码在书写时不严格区分大小写，也并不要求在书写时缩进，但为了程序的易读性，建议网页设计者使标记的首尾对齐，内进，但为了程序的易读性，建议网页设计者使标记的首尾对齐，内部的内容向右缩进几格。部的内容向右缩进几格。 排章抚棱笋玻烤晚
28、傲淹蹋蛛讹烁氖马怜戚肺靴做获赡烘粹槽跟中蜡改景范第7章网页制作与编基础第7章网页制作与编基础187.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 2 2）bodybody文档主体部分文档主体部分 表表7-1 BODY7-1 BODY标记属性值标记属性值 抗嵌为扔撵描同堕弃奠筐俏伐工凰孙违履希祝骋辞麓渭浊星捌以诗便易害第7章网页制作与编基础第7章网页制作与编基础197.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述
29、语言概述3 3一个简单的一个简单的HTMLHTML实例实例一个简单的一个简单的HTMLHTML示例示例欢迎光临我的主页欢迎光临我的主页这是我第一次做主页，无论怎么样，我这是我第一次做主页，无论怎么样，我都会努力做好！都会努力做好！崔扳赎仔肢甜筒包圾别珊忻拂提坠缎亥混甫傻禄瘤省型厂励徘礼衍逆布沏第7章网页制作与编基础第7章网页制作与编基础207.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述4 4HTMLHTML的特点的特点HTMLHTML是独立于平台的，它兼容多平台。是独立于平台的，它兼容多平台。HTMLHTML文件中含有大量的特定标记文件中含有
30、大量的特定标记(tags)(tags)，该标记用于，该标记用于解释如何显示指定的内容。解释如何显示指定的内容。HTMLHTML文件中包含超文本内容，如多媒体信息、文件中包含超文本内容，如多媒体信息、E-mailE-mail地址、数据库查询结果等。地址、数据库查询结果等。HTMLHTML文件是一个有特定标记的、可识别的文件是一个有特定标记的、可识别的ASCIIASCII文本文文本文件，通常文件扩展名为件，通常文件扩展名为.html.html或或.htm.htm。编写一个编写一个HTMLHTML文件不需要特殊的软件，只要有一个字文件不需要特殊的软件，只要有一个字符编辑器就可以完成。符编辑器就可以完
31、成。值漆缘畏活柯氧瞬捶泅业竹缮种捧弹湾炙连乞槐摄哀苞湛娠溯益轰餐捍似第7章网页制作与编基础第7章网页制作与编基础217.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1字符的格式化字符的格式化 (1)(1)标题文字标记标题文字标记 标题文字的标题文字的格式为：格式为：Hn align= 标题文字标题文字属性属性align用来设置标题在页面中的对齐方式：用来设置标题在页面中的对齐方式：left（左（左对齐）对齐）right（右对齐）（右对齐）center（居中对齐）（居中对齐）属性属性n用来指定标题文字的大小。用来指定标题文字的大小。N可以取可以取
32、16的整数的整数值，取值，取1时文字最大，时文字最大，6时文字最小时文字最小与用与用定义的网页标题不同，标题格式定义的网页标题不同，标题格式显示在浏览器窗口中，而不显示在浏览器的标题栏中。显示在浏览器窗口中，而不显示在浏览器的标题栏中。滔资申药楼嵌窘鹤纵撤碌摈舌挺煞储淹爹麦徊蕾旦枕烧毁痰胡涡搂宣表恋第7章网页制作与编基础第7章网页制作与编基础227.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1字符的格式化字符的格式化 (1)(1)标题文字标记标题文字标记 设置标题 第1级标题(h1) 第2级标题(h2) 第3级标题(h3) 第4级标题(h4)
33、（居左） 第5级标题(h5)（居右） 第6级标题(h6)（居中） 朔瑟辗锡叔揉歉颜馈鹊壕漏哟蜂勃醛梅标流扳戚尔北丁蚁哺峭德嫌告堡哉第7章网页制作与编基础第7章网页制作与编基础237.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 格式为：格式为：font size= 被设置的文字被设置的文字标记可设定文字的字号（大小）、字体和颜色。标记可设定文字的字号（大小）、字体和颜色。sizesize用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从1 17 7，siz
34、esize取取1 1时最小，取时最小，取7 7时最大。时最大。FaceFace用来设置字体。用来设置字体。ColorColor用来设置文字颜色。用来设置文字颜色。匆防甫聪镑售断层辈阎泵蘑脆磅撕视藤研钻享恐惯醒富醚笋仿蔫氨乖钡湘第7章网页制作与编基础第7章网页制作与编基础247.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 1) 1)和和标记都可以设置文字的大小，二者的区标记都可以设置文字的大小，二者的区别见下表别见下表( (当当中的中的sizesize取取7 7时，文字比时，文
35、字比要大要大) )。 2) 2)设置字体：设置字体：在网页设计中要尽量用常见的字体。在网页设计中要尽量用常见的字体。必要必要的罕见字体可以转化为文字图像。的罕见字体可以转化为文字图像。韩栽收潭溃肺达坟洛啦请铰敞庙欠伪涡库冗渗咸炉筏刹踪晨馅锻卧轮出砂第7章网页制作与编基础第7章网页制作与编基础257.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 3) 3)设置文字的颜色：设置文字的颜色：标记中的标记中的texttext属性，属性，设定整个网页文字的颜色设定整个网页文字的颜色 标记
36、中的标记中的colorcolor属性，属性，设定网页、段落、短语、词或设定网页、段落、短语、词或字的颜色。字的颜色。 与与的优先级，的优先级，标记优先。标记优先。<body>与<font>标记同时对文字颜色进行定义今天天气真好黑色蓝色粉红色骸疼料阻诚楷匠伐良邀妒刊仅咋甫阳鸭颖饥臀珊菇工抵酒惦尺组烧灰器扦第7章网页制作与编基础第7章网页制作与编基础267.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 3) 3)设置文字的颜色：设置文字的颜色： 颜色可以用相
37、应英文单词或以颜色可以用相应英文单词或以“# #”引导的一个十六进制数代码来表引导的一个十六进制数代码来表示。上例中同时使用了示。上例中同时使用了bodybody的的texttext属性和属性和fontfont的的colorcolor属性来对文字的颜属性来对文字的颜色进行设置，但最后在网页中的文字颜色应该是离文字本身最近的标记色进行设置，但最后在网页中的文字颜色应该是离文字本身最近的标记属性所定义的。另外，在属性所定义的。另外，在titletitle中涉及网页中的特殊替换字符，其字符所中涉及网页中的特殊替换字符，其字符所表示的的含义如下表所示。表示的的含义如下表所示。 尚互肌腿怕剪辅战温遂榨邪
38、户盆痛藻食叔惟郝抒瑰惊钦牲未鸽迟双味蔓死第7章网页制作与编基础第7章网页制作与编基础277.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 4) 4)设置字型：设置字型： 字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见下表所示：字型的控制标记见下表所示：磷福来裴沉刀楔胁慢甸裸捏肠陛饯鱼蚌婚又瞪璃大黍馅恢挝痒渝忱彰孵渐第7章网页制作与编基础第7章网页制作与编基础287.2 HTML7.2 HTML
39、语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (1) (1)强行换行标记强行换行标记 格式为：文字格式为：文字 实例实例1 1：不使用：不使用无换行示例无换行示例登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河入海流。黄河入海流。欲穷千里目，欲穷千里目，更上一层楼。更上一层楼。氯铬膝荐砚侥芹付呵介黄要闭嗽砷阂艇练术懈吼森窍邓淬磋谱违弄曳剧酣第7章网页制作与编基础第7章网页制作与编基础297.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (1) (1)强行换行标记强行换行标记
40、实例实例2：使用：使用后的效果后的效果换行示例换行示例登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河入海流。黄河入海流。欲穷千欲穷千里目，里目，更上一层楼。更上一层楼。另室伏泼仟纳捂庞婪流饰之荒苏弊友侵碎眼寒靛匪忱豁评熏搅利蜒鬼虎健第7章网页制作与编基础第7章网页制作与编基础307.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (2) (2) 段落标记段落标记 格式为：格式为：文字文字 实例实例1 1：居中对齐：居中对齐CENTERCENTER段落标签段落标签浣溪沙浣溪沙一曲新词酒一杯，去年天气旧亭一曲新词酒一杯，去年天
41、气旧亭台，夕阳西下几时回。台，夕阳西下几时回。无可奈何花落去，无可奈何花落去，似曾相识燕归来。小园香径几徘徊。似曾相识燕归来。小园香径几徘徊。庚页辫穗只嚣佳阐丑走侮范跺湛克噎勘憨茅雾嗓单铺煽凉唐避喝雄本衙姥第7章网页制作与编基础第7章网页制作与编基础317.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (2) (2)段落标记段落标记 实例实例2 2：参见右图：参见右图段落标签段落标签登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河黄河入海流。入海流。欲穷千里目，欲穷千里目，更上更上一层楼。一层楼。垒女狐谩窗蹭森殊弛迎吞抽燥
42、获彼赘绍渗招餐香或埔线至沟煤销砰干僳诌第7章网页制作与编基础第7章网页制作与编基础327.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (2) (2)段落标记段落标记 文件段落的开始由文件段落的开始由来标记，段落的结束由来标记，段落的结束由来标记。来标记。标记不但能使后面的文字换到下一行，还可以使两段之标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使间多一空行。由于一段的结束意味着新一段的开始，所以使用用也可省略结束标记。也可省略结束标记。 一个强制换段标记一个强制换
43、段标记可以看作是两个强制换行标记可以看作是两个强制换行标记。 其中属性其中属性alignalign用来设置段落的对齐方式，可以为用来设置段落的对齐方式，可以为leftleft、centercenter或或rightright，分别表示居左、居中、居右。默认时默认，分别表示居左、居中、居右。默认时默认为为leftleft。 格式为：格式为：文字文字 冯场腻巫牌饯范概臂鱼歌下亦刊卉习哇碎岭陡妻施真峡骑咖凸律板殿桔击第7章网页制作与编基础第7章网页制作与编基础337.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 ( (3)
44、)分区显示标记分区显示标记 格式格式:文本或图象文本或图象 文本块、一段文字或标题在网页上的布局都有文本块、一段文字或标题在网页上的布局都有3 3种方式：左对齐、居种方式：左对齐、居中和右对齐。在标记中使用中和右对齐。在标记中使用alignalign属性，其属性取值分别为：属性，其属性取值分别为：leftleft、centercenter、rightright。可以设置布局的标记有：。可以设置布局的标记有：、。当在许多段落中设置对齐方式。当在许多段落中设置对齐方式时，常使用时，常使用标记。标记。 炔徽派崭萝嫡斥莲驭撬瑰老豆毋闪愈捐面碌萎迎全吊娇护约憋鼠戊考史全第7章网页制作与编基础第7章网页制
45、作与编基础347.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 ( (3) )分区显示标记分区显示标记 实例实例1 1，参照右图，参照右图 分区显示标记的应用分区显示标记的应用 居中居中centercenter居居中中centercenter 居左居左leftleft居左居左leftleft 居右居右rightright居右居右rightright 捅防羔枢簧偏淳竞陨蕾磊砸迟综盐螺畔菌恕蹿糠百赫嗡连痉选爽亨冠烃异第7章网页制作与编基础第7章网页制作与编基础357.2 HTML7.2 HTML语言语言 7.2.2 7.2
46、.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 ( (4) )水平线水平线 格式为：格式为：hr align= noshade align align设定横线放置的位置，其属性取值为：设定横线放置的位置，其属性取值为：leftleft、centercenter、rightright。 Size Size设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为2 2。 Width Width设定线段长度，可以是绝对值或相对值。所谓绝对值，是指线段设定线段长度，可以是绝对值或相对值。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指长度的长
47、度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为默认值为100%100%，即始终填满当前窗口。，即始终填满当前窗口。 Noshade Noshade设定线条为无阴影，若默认则有阴影或立体效果。设定线条为无阴影，若默认则有阴影或立体效果。 Color Color设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以用设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以用相应英文单词或以相应英文单词或以“# #”引导的一个十六进制代码来表示。引导的一个十六
48、进制代码来表示。主芹涨砌检副染褂岩搞炊醒蟹刷涡耘看陕之蘑铺裕涎霹零伪萎随厂锈淘淀第7章网页制作与编基础第7章网页制作与编基础367.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(1)(1)插入图形插入图形 格式为格式为：img src= 例：例：img src=bj.jpg width=100 height=100 hspace=10 vspace=10 align=middle 设置网页的背景图像、背景颜色可参照设置网页的背景图像、背景颜色可参照BODYBODY标记的相关属性。标记的相关属
49、性。兆矿犊椽况序铲钻辈违孽汪梯闷怖第而堵羚傈泌崖掉裂场责逼摔严堆雁拨第7章网页制作与编基础第7章网页制作与编基础377.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(2)(2)插入背景音乐插入背景音乐 1) 1)音频标记音频标记能在网页中加入背景声音，能在网页中加入背景声音，格式为格式为：bgsound src=src=your.midsrc=your.mid：设定：设定midimidi档案及路径，可以是相对或绝对。档案及路径，可以是相对或绝对。autostart=trueautostart
50、=true：是否在音乐档下载完之后就自动播放。：是否在音乐档下载完之后就自动播放。truetrue是，是，falsefalse否否（默认值（默认值) )。loop=infiniteloop=infinite：是否自动反复播放。：是否自动反复播放。LOOP=2LOOP=2表示重复两次，表示重复两次，InfiniteInfinite表示重复多次。表示重复多次。要加入的背景声音文件的格式为要加入的背景声音文件的格式为.wav.wav、.mid.mid、.ram.ram等，播放次数为等，播放次数为-1-1时，声音将一直播放直到关闭网页。时，声音将一直播放直到关闭网页。宇掀缩柒按遁检碳嚏铅湾雀孽乎巾件姜
51、袋同河掸吨抓良窖做吱潮赣雨舌敬第7章网页制作与编基础第7章网页制作与编基础387.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(2)(2)插入背景音乐插入背景音乐 2)2)使用使用EMBEDEMBED标签嵌入音乐文件标签嵌入音乐文件 使用使用BGSOUNDBGSOUND标签嵌入背景音乐时，当最小化窗口时标签嵌入背景音乐时，当最小化窗口时BGSOUNDBGSOUND就会暂停，就会暂停，为了保证背景音乐的连贯性，建议使用为了保证背景音乐的连贯性，建议使用HIDDENHIDDEN了的了的EMBED
52、EMBED标签。标签。 src=your.midsrc=your.mid：设定：设定midimidi档案及路径，可以是相对或绝对档案及路径，可以是相对或绝对autostart=trueautostart=true：是否在音乐档下载完之后就自动播放。：是否在音乐档下载完之后就自动播放。truetrue是，是，falsefalse否否( (默认值默认值) )loop=trueloop=true：是否自动反复播放。：是否自动反复播放。LOOP=2 LOOP=2 表示重复两次，表示重复两次，truetrue是，是， falsefalse否否hidden=truehidden=true：是否完全隐藏控制
53、画面，：是否完全隐藏控制画面，truetrue为是，为是，nono为否为否( (默认值默认值) )辕汲绥曝忙赞匹顾蔓彭牙备苞纬雇蕴贴署头荣峙迈渡劝簧洁翟恐揣峰桌劲第7章网页制作与编基础第7章网页制作与编基础397.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(3)(3)插入视频插入视频 1) 1)用用标记的标记的dynsrcdynsrc属性可以向网页中加入属性可以向网页中加入.avi.avi视频剪辑文件。视频剪辑文件。格式为格式为：img border=BorderBorder：边框大小。：
54、边框大小。SrcSrc：在浏览器尚未完全读入：在浏览器尚未完全读入AVIAVI文件时，先在文件时，先在AVIAVI播放区域显示的图像。播放区域显示的图像。DynsrcDynsrc：指定播放视频文件的路径和文件名。：指定播放视频文件的路径和文件名。LoopLoop：指定播放循环的次数。当为：指定播放循环的次数。当为-1-1时，则反复播放。时，则反复播放。LoopdelayLoopdelay：两次播放的时间间隔。：两次播放的时间间隔。StartStart：指定何时开始播放。：指定何时开始播放。FileopenFileopen是文件打开时，是文件打开时，mouseovermouseover是鼠标是鼠
55、标移到视频文件上时。移到视频文件上时。2)2)插入插入flashflash用用标记，其格式为标记，其格式为embed src= 文件文件端折科痰晋咽噎池劫造抖桨篇袜掺融碧弯谬萧太急贴厅自颗猎银措不胜邓第7章网页制作与编基础第7章网页制作与编基础407.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接2 2加入超级链接加入超级链接 超链接（超链接（HyperlinkHyperlink）可以看作是一个热点，它可以从当前）可以看作是一个热点，它可以从当前WebWeb页定义的页定义的位置跳转到其他位置，包括当前页的某个位置、位置跳转到其他位置，包括
56、当前页的某个位置、InternetInternet或本地硬盘或局域或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。网上的其他文件，甚至跳转到声音、图片等多媒体文件。 当当WebWeb页包含超链接时，页包含超链接时，WebWeb页中的外观形式为彩色且带下划线的文字或页中的外观形式为彩色且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记示文本或图片时，将变成手形。超文本链接使用锚点标记来定义。来定义。标标记的记的格式为格式为：a h
57、ref= 热点热点椒榔棵绰孝长辕论胯宋牡断穷柔孕膏烛烟沤芹拢粕骂苞绞遇竭汁出兄紊辆第7章网页制作与编基础第7章网页制作与编基础417.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接2 2加入超级链接加入超级链接 (1) (1)属性属性hrefhref为超文本引用，它的值为一个为超文本引用，它的值为一个URLURL，是目标资源的有效地址。，是目标资源的有效地址。在书写在书写URLURL时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，应写绝对路径应写绝对路径. . (2)
58、 (2)属性属性namename指定当前文档内的一个字符串作为链接时可以使用有效的指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址。目标资源的地址。( (注意：注意：HrefHref不能与不能与namename同时使用。同时使用。) ) (3)Target= (3)Target=”_blank_blank”或或Target=Target=”newnew”，将链接打开的空白页面或在，将链接打开的空白页面或在新的浏览器窗口中打开。新的浏览器窗口中打开。 Target= Target=”_parent_parent”，将链接的页面内容，显示在直接父框架窗口中。，将链接的页面内容，显示
59、在直接父框架窗口中。 Target= Target=”_self_self”，将链接的页面内容，显示在当前窗口中（默认值）。，将链接的页面内容，显示在当前窗口中（默认值）。 Target= Target=”_top_top”，将框架中链接的页面内容，显示在没有框架的窗口，将框架中链接的页面内容，显示在没有框架的窗口中。中。 Target= Target=”框架名称框架名称”，只运用于框架中，若被设定则链接结果将显示，只运用于框架中，若被设定则链接结果将显示于该于该“框架名称框架名称”指定的框架窗口中，框架窗口名称是事先由框架标记所命指定的框架窗口中，框架窗口名称是事先由框架标记所命名的，可以理
60、解为程序设计中的变量名称。名的，可以理解为程序设计中的变量名称。锨长件畅锭蓖慑标陷就染浇糟扣模遥枪丧妄衫倦秃晌昧樱维阐宋碴篡人钱第7章网页制作与编基础第7章网页制作与编基础427.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接2 2加入超级链接加入超级链接 (4) (4)创建指向其他页面的链接，就是在当前页面与其他相关页面间建立超创建指向其他页面的链接，就是在当前页面与其他相关页面间建立超链接。无论目标文件与当前文件的目录关系如何，其格式为：链接。无论目标文件与当前文件的目录关系如何，其格式为：a href= (5) (5)创建指向本页中
61、的链接时，需要定义两个标记：一个为超级链接标记，创建指向本页中的链接时，需要定义两个标记：一个为超级链接标记，另一个为书签标记。格式为：另一个为书签标记。格式为：a href=#。书签为该超级链。书签为该超级链接的目标，定义格式为：接的目标，定义格式为：a name=。同理，如果要创建指向。同理，如果要创建指向其他页面中的书签，定义的格式为：其他页面中的书签，定义的格式为：a href=URL/。 (6) (6)在网页中，超级链接还可以指向下载文件和电子邮件。他们的格式分在网页中，超级链接还可以指向下载文件和电子邮件。他们的格式分别为：别为：a href=；a href=mailto (7)
62、(7)图像也可以做为链接指针。格式为：图像也可以做为链接指针。格式为：img src=url，可以看出，用，可以看出，用取代了链接指针中取代了链接指针中texttext的位的位置。置。是图像元素，它表明显示是图像元素，它表明显示urlurl代表的图像文件。代表的图像文件。羹幽除表埃搭痞噬袱瓮哄舟漂蛀摇迢纲草痊刽做搐因寓粹雷太游备轩哀铡第7章网页制作与编基础第7章网页制作与编基础437.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑1 1表格的基本形式表格的基本形式 表格对于格式化信息有着强大的功能，它能控制各种信息的位置，使表格对于格式化信息有着强大的功能，它能
63、控制各种信息的位置，使得页面结构协调一致，用其他标记不容易做到的文本对齐，只要把文本块得页面结构协调一致，用其他标记不容易做到的文本对齐，只要把文本块放到表格中就行了。任何表格都有放到表格中就行了。任何表格都有三个基本要素：表行、表头和表项三个基本要素：表行、表头和表项，每，每个要素都有自己的标签个要素都有自己的标签 一个表由一个表由开始，开始，结束，表的内容由结束，表的内容由，和和定义，其中：定义，其中：说明表的一个行，表有多少行就有多少个说明表的一个行，表有多少行就有多少个，即定义表行；，即定义表行；说明表的列数和相应栏目的名称，有多少个栏目就有多少个说明表的列数和相应栏目的名称，有多少个
64、栏目就有多少个，即定义表头；，即定义表头；则填充由则填充由和和组成的表格，即定义表项。组成的表格，即定义表项。是否用表格线分开为部分内容用是否用表格线分开为部分内容用borderborder属性说明。属性说明。未坍羡炕想砌才物更讥澜畦宫砒囚店崎区坊吞溶补央质途或俊侍生赞程唆第7章网页制作与编基础第7章网页制作与编基础447.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑1 1表格的基本形式表格的基本形式 实例实例1 1：一个有表格线和一个元：一个有表格线和一个元组的组成的表格，参照右图。组的组成的表格，参照右图。the simplest html the sim
65、plest html filefile食品食品饮料饮料水果水果面包面包可乐可乐西瓜西瓜 汲赛埃些向眉慎毋果野拳釜讨嚷冀吟蔼瓦锅癌泳巷少椰茅甩戈啦紫菏捞挝第7章网页制作与编基础第7章网页制作与编基础457.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑2表格的修饰形式表格的修饰形式 (1) (1)有通栏的表有通栏的表 有横向通栏的表用有横向通栏的表用属性说明，属性说明，colspancolspan表示横向栏距，表示横向栏距，# #代表通栏占据的网格数，它是一个小于表的横向网格数的整数。代表通栏占据的网格数，它是一个小于表的横向网格数的整数。 实例实例2 2：下面是
66、一个有表格线和有横向通栏的表格。：下面是一个有表格线和有横向通栏的表格。the simplest html filethe simplest html file食品食品饮料饮料水果水果面包面包牛奶牛奶可乐可乐西瓜西瓜子挥帆戮骤换矫芦涛佣软硕嗽隋手嗜啪薛伎漳赡刺矛掩帛网窃颖姚演铃逝第7章网页制作与编基础第7章网页制作与编基础467.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑2表格的修饰形式表格的修饰形式 (1) (1)有通栏的表有通栏的表 有纵向通栏的表用有纵向通栏的表用rowspan=#属性说明。属性说明。rowspan表示纵向栏距，表示纵向栏距，#表示表示
67、通栏占据的网格数，小于纵向网络数。需要说明的是有纵向通栏的表，每一通栏占据的网格数，小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用行必须用明确给出一横向栏目结束明确给出一横向栏目结束,这和表格的基本形式是不同的。这和表格的基本形式是不同的。 实例实例3：下面是一个有表格线和有纵向通栏的表格。：下面是一个有表格线和有纵向通栏的表格。the simplest html filethe simplest html file早餐早餐 食品食品面包面包饮料饮料可乐可乐水果水果西瓜西瓜瞅停那吓菩堑谭椭甩诵焰瑶拎饭没睁豌聚宽齿纠鲸洲论己彰碑屏辨锐赣曰第7章网页制作与编基础第7章网页制作与编基础47
68、7.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑2表格的修饰形式表格的修饰形式 (2) (2)表的大小，边框宽度，表格间距表的大小，边框宽度，表格间距表的大小用表的大小用width=#width=#和和height=#height=#属性说明。前者为表宽，后者为表高，属性说明。前者为表宽，后者为表高，# #是是以象素为单位整数。以象素为单位整数。表格间距即划分表格的线的粗细用标记表格间距即划分表格的线的粗细用标记ellspacing=#ellspacing=#表示，表示，# #的单位是象素。的单位是象素。 (3) (3)表中文本的输出表中文本的输出 文本与表框
69、的距离用文本与表框的距离用cellpadding=#cellpadding=#说明。说明。# #的单位是象素。的单位是象素。 表格的宽度大于其中的文本宽度时，文本在其中的输出位置与用表格的宽度大于其中的文本宽度时，文本在其中的输出位置与用align=#align=#说明。说明。# #是是 left left，centercenter和和rightright三者之一，分别表示左对齐，居中和右对齐，三者之一，分别表示左对齐，居中和右对齐，alignalign属性可修饰属性可修饰，和和链接签。链接签。 表格的高度大于其中文本的高度时，可以用表格的高度大于其中文本的高度时，可以用valign=#val
70、ign=#说明文本在其中的位说明文本在其中的位置。置。# #是是toptop，middlemiddle，bottombottom，baselinebaseline四者之一。同样，四者之一。同样，valignvalign可以修饰可以修饰，中的任何一个。中的任何一个。漆谩耀肤证迪剧遍钢盏阶易叮禽阜另俩幕端未肠竣抓缀田绍轻正婿佯脑叔第7章网页制作与编基础第7章网页制作与编基础487.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑2表格的修饰形式表格的修饰形式 (4) (4)表格颜色表格颜色 表格的颜色用表格的颜色用bgcolor=#bgcolor=#指定。指定。# #
71、是是1616进制的进制的6 6位数，格式为位数，格式为rrggbbrrggbb，分，分别表示红、绿、兰三色的分量。或者是别表示红、绿、兰三色的分量。或者是1616种已定义好的颜色名称。种已定义好的颜色名称。 (5) (5)表格标题表格标题 表格可以加上标题。标题的语法格式如下：表格可以加上标题。标题的语法格式如下：，# #可以是可以是leftleft，centercenter和和rightright三者三者之一。之一。抢不硅如绣岛佛仟奔漳庆哥涤鹿撒擞窟肋邹产刽羊凄旋肩隙燃惦淳滇祭吊第7章网页制作与编基础第7章网页制作与编基础497.2 HTML7.2 HTML语言语言 7.2.5 7.2.5
72、创建框架创建框架1框架的基本结构如下：框架的基本结构如下： 框架可以将浏览器的窗口分成多个区域，每个区域可以单独显示一框架可以将浏览器的窗口分成多个区域，每个区域可以单独显示一个个htmlhtml文件，各个区域也可相关连地显示某一个内容，例如可以将索引文件，各个区域也可相关连地显示某一个内容，例如可以将索引放在一个区域，文档内容显示在另一个区域。放在一个区域，文档内容显示在另一个区域。 . . .中的内容显中的内容显示在不支持框架的浏览器窗口中，因而这里示在不支持框架的浏览器窗口中，因而这里指向一个普通版本的指向一个普通版本的htmlhtml文件，以便使用不文件，以便使用不支持框架浏览器的用户
73、阅读。支持框架浏览器的用户阅读。 框架由框架由指定，并且可以嵌套，指定，并且可以嵌套，分区中各部分显示的内容用分区中各部分显示的内容用指定。指定。frameframe是一个新出现的标记，浏览器并不都是一个新出现的标记，浏览器并不都支持。支持。 可以将窗口横向分成几个部分，也可以可以将窗口横向分成几个部分，也可以分成纵向几个部分，还可以形成混和框架。分成纵向几个部分，还可以形成混和框架。砷郊巷束柜灵菇允订坊腔空串欢鲸警毡颧拎肾拭捎企咐蔽摸呵幻侩掇派漂第7章网页制作与编基础第7章网页制作与编基础507.2 HTML7.2 HTML语言语言 7.2.5 7.2.5 创建框架创建框架1框架的基本结构如
74、下：框架的基本结构如下： (1) (1)横向框架横向框架 横向框架用横向框架用指定，指定，# #可以是一个百分数，也可以可以是一个百分数，也可以是一整数。前者规定各框架占窗口的百分数，后者指定各框的绝对大小。是一整数。前者规定各框架占窗口的百分数，后者指定各框的绝对大小。例如，下面的例子将窗口分成例如，下面的例子将窗口分成30%30%、20%20%、50%50%的几个区域，各区域的内容的几个区域，各区域的内容分别为分别为A.htmlA.html，B.htmlB.html，C.htmlC.html。 HTML HTML 语言教程语言教程必有厉绰裹点至吠屯振刺摘跑凄颇术网邀辖破墒踪瞪需缔诸炕献赎蛛
75、臼像第7章网页制作与编基础第7章网页制作与编基础517.2 HTML7.2 HTML语言语言 7.2.5 7.2.5 创建框架创建框架1 1框架的基本结构如下：框架的基本结构如下： ( (2)2)纵向框架：纵向框架用纵向框架：纵向框架用指定，指定，# #含义同上。含义同上。 (3) (3)混合框架混合框架 将窗口分成纵横几个区域时，用将窗口分成纵横几个区域时，用代替代替链接，即可将原来分好链接，即可将原来分好的的区域再次分框，下面的例子先将窗口分成区域再次分框，下面的例子先将窗口分成20%20%，80%80%，然后将右边的区域再，然后将右边的区域再分成分别占分成分别占40%40%和和60%60
76、%的上下两个区域，如图的上下两个区域，如图7-22 7-22 所示。所示。 (4) 框架与框中文本的间距框架与框中文本的间距 分框与其中的文本间距可以用分框与其中的文本间距可以用Marginwidth=#和和margiheight=#来指定，前者指来指定，前者指定文本与分框的边缘的横向距离，后者为纵向距离，其单位都为象素。定文本与分框的边缘的横向距离，后者为纵向距离，其单位都为象素。HTML HTML 语言教程语言教程几芝牡松栽膏录肢须碰李奶陡虎介背虱剪麻滚忠燥搏茨序子郁料涡雍赃疮第7章网页制作与编基础第7章网页制作与编基础527.2 HTML7.2 HTML语言语言 7.2.5 7.2.5
77、创建框架创建框架2分框间的关联分框间的关联 框架之间可以有特定的关联，比如将某一框架的内容输出到另一个框架之间可以有特定的关联，比如将某一框架的内容输出到另一个框架中，这样该段文字就可以把其中一个框作为输出框，另一个框作为选框架中，这样该段文字就可以把其中一个框作为输出框，另一个框作为选择框。实现这种关联需要做下列的事情。择框。实现这种关联需要做下列的事情。 (1) (1)在分框的在分框的htmlhtml文件中标记各个框，标记的方法是在文件中标记各个框，标记的方法是在中加入中加入namename属性，比如上例，定义左边的框为索引，右边框为输出。属性，比如上例，定义左边的框为索引，右边框为输出。
78、 (2) (2)在在A.htmlA.html文件中指定输出到哪个框中去的方法是在文件中指定输出到哪个框中去的方法是在A.htmlA.html文件中文件中加入下列一行。加入下列一行。 这便得用鼠标点取这便得用鼠标点取A.htmlA.html中的链接指针，它的输出会显示在右边的中的链接指针，它的输出会显示在右边的框中。框中。蘑袄支嗓栖挣赃骏调诽纤奸隧蝶狱准黎讥宠犁根肮钟签答础幂晶谈莎蔗蹲第7章网页制作与编基础第7章网页制作与编基础537.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单 表单在表单在HTMLHTML页面中起着重要作用，它是与用户交互信息的主要手段。页面
79、中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下内容。用户填写了所需的资料之后，按下“提交提交”按钮，这样所填资料就按钮，这样所填资料就会通专门的接口传到会通专门的接口传到WebWeb服务器上。网页的设计者随后就能在服务器上。网页的设计者随后就能在WebWeb服务器上服务器上看到用户填写的资料，从而完成了从用户到服务提供者之间的反馈和交流。看到用户填写的资料，从而完成了从用户到服务提供者之间的反馈和交流。 一个表单有三个基本组成部分：
80、一个表单有三个基本组成部分： 表单标签表单标签：这里面包含了处理表单数据所用的：这里面包含了处理表单数据所用的CGI(Common Gateway CGI(Common Gateway InterfaceInterface，即通用网关接口，即通用网关接口) )程序的程序的URLURL以及数据提交到服务器的方法。以及数据提交到服务器的方法。 表单域表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。选框、下拉选择框和文件上传框等。 表单按钮表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到：包
81、括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的服务器上的CGICGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。理脚本的处理工作。没效孙姿粱榷绅锥赠敷敲佑臃瘦宁径衔被帛沙芒毗惜淘续唾光骗阑匪读咨第7章网页制作与编基础第7章网页制作与编基础547.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单1表单标签表单标签form/form 格式：格式：FORM action=url method=get|post enctype=mime target=.FORM action=url
82、 method=get|post enctype=mime target=./FORM/FORM 相关属性解释如下：相关属性解释如下： action=url action=url 指定用来处理表单提交的数据的应用程序。它可以是任何指定用来处理表单提交的数据的应用程序。它可以是任何一个有效的一个有效的URLURL，那么用户在表单中输入的信息就会传入那个，那么用户在表单中输入的信息就会传入那个URLURL处。处。 method=get method=get或或postpost，它控制收集信息的传送方式。，它控制收集信息的传送方式。postpost方法可通过方法可通过actionaction所指定的
83、服务程序对表单进行处理；所指定的服务程序对表单进行处理；GETGET方法可将表单的内容作为查方法可将表单的内容作为查询询URLURL中的串来传送，服务器使用中的串来传送，服务器使用QueryStringQueryString集合来存储这些内容。集合来存储这些内容。 Enctype Enctype：指定如何对数据编码，只有在使用：指定如何对数据编码，只有在使用postpost方式时这个属性才适方式时这个属性才适用，而且有唯一的可能值，即默认值用，而且有唯一的可能值，即默认值application/x-www-form-urlencodedapplication/x-www-form-urlenc
84、oded。该属性在平时的表单创建中可以不使用。该属性在平时的表单创建中可以不使用。售茂搅峙纳桂隶邪攻眩尹嘘扛金锤杏仙瓤踩烷渔氓垦蛇廖泽熏袜锈为矮汗第7章网页制作与编基础第7章网页制作与编基础557.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单1表单标签表单标签form/form 格式：格式：FORM action=url method=get|post enctype=mime FORM action=url method=get|post enctype=mime target=.target=./FORM/FORM TARGET=# TARGET=#，#
85、#可以是下列值：可以是下列值： _blank _blank：在一个新的、无名浏览器窗口调入指定的文档；：在一个新的、无名浏览器窗口调入指定的文档； _self _self：在指向这个目标的元素的相同的框架中调入文档；：在指向这个目标的元素的相同的框架中调入文档； _parent _parent：把文档调入当前框架的父：把文档调入当前框架的父FRAMESETFRAMESET框中；这个值在当前框框中；这个值在当前框没有父框时等价于没有父框时等价于_self_self； _top _top：把文档调入原来的最顶部的浏览器窗口中（因此取消所有其：把文档调入原来的最顶部的浏览器窗口中（因此取消所有其它框
86、架）；这个值等价于当前框架没有子框架时的它框架）；这个值等价于当前框架没有子框架时的_self_self；茹病料错绩惮瞄矿揉垒靳剔跳拿受坞碌菱淋锅开畦鬃罚俭美僳者扒恍租多第7章网页制作与编基础第7章网页制作与编基础567.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单2 2表单元素表单元素 （1 1）文本框）文本框 文本框是一种让访问者自己输入内容的表单对象，通常被用文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。来填写单个字或者简短的回答，如姓名、地址等。 格式：格式：input type=text input
87、type=text name=.size=.maxlength=.value=.name=.size=.maxlength=.value=. 属性解释如下：属性解释如下： type=text type=text定义单行文本输入框；定义单行文本输入框； name name属性定义文本框的名称，要保证数据的准确采集，要定属性定义文本框的名称，要保证数据的准确采集，要定义一个独一无二的名称；义一个独一无二的名称； size size属性定义文本框的宽度，单位是单个字符宽度；属性定义文本框的宽度，单位是单个字符宽度； maxlength maxlength属性定义最多输入的字符数；属性定义最多输入的字
88、符数； value value属性定义文本框的初始值；属性定义文本框的初始值；剂晒结咙料憾均施拖标等瘩婚摔戒州瞩赁主塑裂映俱沪未挝嗣鹏闺子啄慑第7章网页制作与编基础第7章网页制作与编基础577.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单2 2表单元素表单元素 （2 2）多行文本框）多行文本框 格式：格式：TEXTAREA name=.cols=.rows=.wrap=virtualTEXTAREA name=.cols=.rows=.wrap=virtual/TEXTAREA/TEXTAREA 属性解释如下：属性解释如下： name name：同文本框：同文
89、本框 cols cols：定义多行文本框的宽度，单位是单个字符宽度；：定义多行文本框的宽度，单位是单个字符宽度； rows rows：定义多行文本框的高度，单位是单个字符宽度；：定义多行文本框的高度，单位是单个字符宽度； wrap wrap：定义输入内容大于文本域时显示的方式，可选值如下：定义输入内容大于文本域时显示的方式，可选值如下： 默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；一行，而数据在被提交处理时自动换行的地方不会有换行符出现； Off Off
90、用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用滚动，必须用ReturnReturn才能将插入点移到下一行；才能将插入点移到下一行； Virtual Virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现； Physical Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。，让文本换行，当数
91、据被提交处理时换行符也将被一起提交处理。 袍和蘑殿锨杰捧米密画痔肇驹辣窄丧野叔令奇厨嘶滨纠黄趁葱唯梳锄鳃舆第7章网页制作与编基础第7章网页制作与编基础587.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单2 2表单元素表单元素 （3 3）密码框）密码框 是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。被星号或其它符号代替，而输入的文字会被隐藏。 格式：格式：input type=password name=.size=.maxlength=.inp
92、ut type=password name=.size=.maxlength=. （4 4）复选框）复选框 复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。立的元素，都必须有一个唯一的名称。 格式：格式：INPUT type=checkbox name=. value=.INPUT type=checkbox name=. value=.位蚊归缔灿玻芜磐阀釉被彰雷茶唾惮玻蔫叠骋荷蛔骆饥帝斡怖认酒诌棠胀第7章网页制作与编基础第7章网页制作与编基础597.2 HTML7.2 HTML语言语言
93、7.2.6 7.2.6 创建表单创建表单2 2表单元素表单元素 （5 5）文件上传框）文件上传框 文件上传框看上去和其它文本框差不多，只是它还包含了一个浏览按文件上传框看上去和其它文本框差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。上传的文件。 在使用文件上传框以前，请先确定你的服务器是否允许匿名上传文件。在使用文件上传框以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置表单标签中必须设置ENCTYPE=multipart/form-dataENCTY
94、PE=multipart/form-data来确保文件被正确编码；来确保文件被正确编码；另外，表单的传送方式必须设置成另外，表单的传送方式必须设置成POSTPOST。 格式：格式：input type=file name=.size=15 maxlength=100input type=file name=.size=15 maxlength=100 属性解释如下：属性解释如下： type=file type=file：定义文件上传框；：定义文件上传框； name name：同文本框；：同文本框； size size：属性定义文件上传框的宽度，单位是单个字符宽度；：属性定义文件上传框的宽度，单
95、位是单个字符宽度； maxlength maxlength：属性定义最多输入的字符数。：属性定义最多输入的字符数。 盔昼峨匠致悔卓赞互泉奄层溃梨鄙恤念芬握伊恢其并摹媒窟晤伸庸江抠队第7章网页制作与编基础第7章网页制作与编基础607.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单2 2表单元素表单元素 （6 6）下拉选择框）下拉选择框 下拉选择框允许你在一个有限的空间设置多种选项，下拉选择框中带下拉选择框允许你在一个有限的空间设置多种选项，下拉选择框中带有下拉按钮，单击下拉按钮，出现多个可供选择的选项，用户单击其中的一有下拉按钮，单击下拉按钮，出现多个可供选择的选
96、项，用户单击其中的一项，即可选中。项，即可选中。 格式：格式： select name=.size=.multipleselect name=.size=.multiple option value=.selectedoption value=.selected./option/option . . /select/select 属性解释如下：属性解释如下： size size：定义下拉选择框的行数；：定义下拉选择框的行数； name name：定义下拉选择框的名称；：定义下拉选择框的名称； multiple multiple：表示可以多选，如果不设置本属性，那么只能单选；：表示可以多选，如果
97、不设置本属性，那么只能单选； value value：定义选择项的值；：定义选择项的值； selected selected：表示默认已经选择本选项。：表示默认已经选择本选项。牌嘲杜愉泛泻崩誓呐逛碑瘁放尚稿轴溃愤岳血肋梦懊卧塞叁绞闷呵族团乃第7章网页制作与编基础第7章网页制作与编基础617.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单2表单元素表单元素 (7) (7)表单按钮表单按钮 1) 1)提交按钮：提交按钮用来将输入的信息提交到服务器。提交按钮：提交按钮用来将输入的信息提交到服务器。 格式：格式：input type=submit name=.value
98、=.input type=submit name=.value=. 属性解释如下：属性解释如下： type=submit type=submit：定义提交按钮；：定义提交按钮； name name：属性定义提交按钮的名称；：属性定义提交按钮的名称； value value：属性定义按钮的显示文字；：属性定义按钮的显示文字； 2) 2)复位按钮：复位按钮用来重置表单。复位按钮：复位按钮用来重置表单。 格式：格式：input type=reset name=.value=.input type=reset name=.value=. 3) 3)一般按钮：一般按钮用来控制其他定义了处理脚本的处理工作
99、。一般按钮：一般按钮用来控制其他定义了处理脚本的处理工作。 格式：格式：input type=button name=.value=.onClick=.input type=button name=.value=.onClick=. 属性解释如下：属性解释如下： type=button type=button定义一般按钮；定义一般按钮； onClick onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为。属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为。辑摇二卤女寄受祟泉痈贷禁抨垦鲸荆叮夫蔫口纳麓惮蛙摊盾酶搅硝媚腮刑第7章网页制作与编基础第7章网页制作与编基础6
100、27.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单3 3表单综合实例（参见右图）表单综合实例（参见右图）姓名姓名: : 性别性别: :男男女女你喜欢的水果你喜欢的水果: :苹果苹果桔子桔子西瓜西瓜梨梨每个星期你大概会吃多少水果每个星期你大概会吃多少水果: :少于少于1 1公斤公斤11至至3 3公斤公斤多于多于3 3公斤公斤对于吃水果，你的观点是：对于吃水果，你的观点是：多吃水果有利于身体多吃水果有利于身体INPUT TYPE=submit VALUE= 位杠马简袒歪沫哑茬洗斟碰孙操骸罢三琉冤扶鸦源霓堰波拣囤扭渭折弯倾第7章网页制作与编基础第7章网页制作与编基础
101、637.2 HTML7.2 HTML语言语言 7.2.7 7.2.7 列表列表列表可以分为无序列表、有序列表和自定义列表。列表可以分为无序列表、有序列表和自定义列表。 1 1无序列表无序列表无序号列表使用的一对标签无序号列表使用的一对标签是是，每一个列表项，每一个列表项前使用前使用。其结构如下所示：。其结构如下所示：第一项第一项第二项第二项第三项第三项实例实例1 1：结果请查看图：结果请查看图7-217-21无序列表无序列表这是一个无序列表：这是一个无序列表：国际互联网提供的服务有：国际互联网提供的服务有：WWWWWW服务服务文件传输服务文件传输服务电子邮件服务电子邮件服务远程登录服务远程登录
102、服务其它服务其它服务耘涟香烽箭恐恤雾默阎鸿砖憎谊植杯暴财烧惟晰桓肌佳拍榨那矾懒贵哑鞋第7章网页制作与编基础第7章网页制作与编基础647.2 HTML7.2 HTML语言语言 7.2.7 7.2.7 列表列表列表可以分为无序列表、有序列表和自定义列表。列表可以分为无序列表、有序列表和自定义列表。 2 2有序列表有序列表有序列表和无序列表的使用有序列表和无序列表的使用方法基本相同，它使用标签方法基本相同，它使用标签，每一个列表项前，每一个列表项前使用使用。每个项目都有前后。每个项目都有前后顺序之分，多数用数字表示。顺序之分，多数用数字表示。其结构如下所示：其结构如下所示：第一项第一项第二项第二项第
103、三项第三项实例实例2 2：结果请查看图：结果请查看图7-227-22有序列表有序列表这是一个有序列表：这是一个有序列表：国际互联网提供的服务有：国际互联网提供的服务有：WWWWWW服务服务文件传输服务文件传输服务电子邮件服务电子邮件服务远程登录服务远程登录服务其它服务其它服务撼惨她名囚枯锌昆捌懦税俊僚驰墩东舜站羌吱敲汉辊干吁壤菲豹夕辰域校第7章网页制作与编基础第7章网页制作与编基础657.2 HTML7.2 HTML语言语言 7.2.7 7.2.7 列表列表列表可以分为无序列表、有序列表和自定义列表。列表可以分为无序列表、有序列表和自定义列表。 3 3自定义列表自定义列表除了上述两种列表以外，
104、还可以根据需要自定义列表样式。除了上述两种列表以外，还可以根据需要自定义列表样式。格式为：格式为： 毯众开落撂染迎显掇透疹占佛囊高蜂聘批遮搽刘糟香高涸捣翟初睫劣区拈第7章网页制作与编基础第7章网页制作与编基础667.2 HTML7.2 HTML语言语言 7.2.8 7.2.8 样式表（样式表（CSSCSS）简介）简介1样式表（样式表（CSS）概述）概述 样式表（样式表（stylesheetsstylesheets）的技术诞生于）的技术诞生于19961996年底，全称是层叠样式年底，全称是层叠样式表（表（Cascading StylesheetsCascading Stylesheets简称简称
105、CSSCSS），它可以对布局、字体、颜色、），它可以对布局、字体、颜色、背景和其它图文效果实现更加精确的控制。使用样式表只通过修改一个背景和其它图文效果实现更加精确的控制。使用样式表只通过修改一个文件就改变大量的网页的外观和格式，使网页的风格统一。使用样式表文件就改变大量的网页的外观和格式，使网页的风格统一。使用样式表的具体优势主要体现在以下几个方面：的具体优势主要体现在以下几个方面：格式和结构分离：格式和结构分离：更好的控制页面全局的能力：更好的控制页面全局的能力：可以制作出体积更小下载更快的网页：可以制作出体积更小下载更快的网页：更快更容易地维护及更新大量的网页：更快更容易地维护及更新大量
106、的网页：止配新符剧芯洛霄嚷关湖绍增缀俭毫当讥秘瘫符绥球肃爬晃抖饮弱絮决饰第7章网页制作与编基础第7章网页制作与编基础677.2 HTML7.2 HTML语言语言 7.2.8 7.2.8 样式表（样式表（CSSCSS）简介）简介2 2CSSCSS添加到网页中的方法添加到网页中的方法 (1)(1)链接外部链接外部CSSCSS样式表样式表(2)(2)在在HTMLHTML文档中植入文档中植入CSSCSS样式样式(3)(3)在标记中加入样式在标记中加入样式(4)(4)导入导入CSSCSS样式表样式表(5)(5)用脚本来运用用脚本来运用CSSCSS样式样式霍屋穷窃蛆啸缘耐神哼涅恰掇燃芬秆凯刘照呈肇沙亭撰碟
107、藻署毫艰螟附晶第7章网页制作与编基础第7章网页制作与编基础687.3 7.3 脚本语言基础脚本语言基础 7.3.1 7.3.1 脚本语言概述脚本语言概述1 1脚本语言的优势脚本语言的优势 脚本语言作为用来控制网页的控件和对象的一种编程语言的出现，它脚本语言作为用来控制网页的控件和对象的一种编程语言的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力。从而基于种实时的、动态的、可交式的表达能力。从而基于CGICGI静态的静态的HTMLHTML页面被页面被可提供动态实时信息，并对
108、客户操作进行反应的可提供动态实时信息，并对客户操作进行反应的WebWeb页面的取代，脚本正页面的取代，脚本正是满足这种需求而产生的语言。是满足这种需求而产生的语言。 脚本语言是一种非编译语言，直接被浏览器所解释执行，它是一种事脚本语言是一种非编译语言，直接被浏览器所解释执行，它是一种事件型程序，通过捕捉用户在各种浏览器中的行为来触发特定的程序段。件型程序，通过捕捉用户在各种浏览器中的行为来触发特定的程序段。 脚本语言容易使用，在完成小任务方面表现相当出色，比如检查表单脚本语言容易使用，在完成小任务方面表现相当出色，比如检查表单数据它在控制浏览器中的事件和访问，以及操作超文本标记语言元素方面数据
109、它在控制浏览器中的事件和访问，以及操作超文本标记语言元素方面的功能也很强大，深受广泛用户的喜爱的欢迎。的功能也很强大，深受广泛用户的喜爱的欢迎。 六嫉杰磺英催内坷双命敖啡扔料黑荔焕厂钠欣菌菲碴眉档辜腋债王入戈岛第7章网页制作与编基础第7章网页制作与编基础697.3 7.3 脚本语言基础脚本语言基础 7.3.1 7.3.1 脚本语言概述脚本语言概述2 2脚本语言的使用脚本语言的使用 声明脚本语言有下列声明脚本语言有下列3 3种方法：种方法：在在IISIIS中设置默认的脚本，如未更改设置则为中设置默认的脚本，如未更改设置则为VBScriptVBScript。在程序的第一段加上在程序的第一段加上%
110、language=VBScript%。在程序体中加入对象声明在程序体中加入对象声明。碟冬深藏绵慑袜伙尿核凭叉暇貉穴洪沂锑骤翁晚累酌藩浙札掀阮匀娇圃吻第7章网页制作与编基础第7章网页制作与编基础707.3 7.3 脚本语言基础脚本语言基础 7.3.2 VBScript7.3.2 VBScript1 1VBScriptVBScript基本语法基本语法(1)VBScript(1)VBScript不区分大小写。不区分大小写。(2(2服务器端的服务器端的VBScriptVBScript位于位于%中间，即中间，即% VBScript %，也可用，也可用 VBScript VBScript代码代码 脚本如果
111、放在客户端执行，则只需用脚本如果放在客户端执行，则只需用 VBScript VBScript代码代码 (3)(3)程序注释程序注释( (Rem语句来注释、一个单引号字符语句来注释、一个单引号字符 ) )猛芳羚痢扫兰剪堡妇忘乳扶剂雷响谢疾韩似轨院穴阎涉议甩丰渝缓专今桂第7章网页制作与编基础第7章网页制作与编基础717.3 7.3 脚本语言基础脚本语言基础 7.3.2 VBScript7.3.2 VBScript2 2VBScriptVBScript编程基础编程基础 VBScriptVBScript实质上是实质上是Visual BasicVisual Basic的子集，因此的子集，因此VBScri
112、ptVBScript也有常量、变也有常量、变量和数组。量和数组。常量、变量的命名可以使用数字、字母和下划线等字符，但第一个字常量、变量的命名可以使用数字、字母和下划线等字符，但第一个字母必须是英文字母，中间不能有标点和运算符号，长度不能超过母必须是英文字母，中间不能有标点和运算符号，长度不能超过255255个字个字符。符。常量是拥有名字的数值（字符串和数字），主要为了方便程序的编写。常量是拥有名字的数值（字符串和数字），主要为了方便程序的编写。变量是存有一个值的命名了的内存位置。最好在使用以前先定义。变量是存有一个值的命名了的内存位置。最好在使用以前先定义。VBScriptVBScript还有
113、各种运算符，包括算术运算符，比较运算符，逻辑运算还有各种运算符，包括算术运算符，比较运算符，逻辑运算符和连接运算符。符和连接运算符。VBScriptVBScript有很多现成的继承有很多现成的继承VBVB的函数，主要包括转换函数、输入输出的函数，主要包括转换函数、输入输出函数、字符串函数、日期和时间函数、数学函数、检验函数等。函数、字符串函数、日期和时间函数、数学函数、检验函数等。莉医舟溢酬嚏陨团弹乾痘姿阳斡浪映薄腑鹏到寻印笋酝塌啡州弓夷搂依捷第7章网页制作与编基础第7章网页制作与编基础727.3 7.3 脚本语言基础脚本语言基础 7.3.2 VBScript7.3.2 VBScript2 2
114、VBScriptVBScript编程基础编程基础 VBScriptVBScript过程有过程有SubSub子程序和子程序和FunctionFunction函数函数。 Sub Sub子程序的语法如下：子程序的语法如下： Sub Sub子程序名子程序名( (参数参数1,1,参数参数2,)2,) End Sub End Sub 子程序调用可用子程序调用可用CallCall子程序名子程序名( (参数参数1,1,参数参数2, )2, ) Function Function函数的语法如下：函数的语法如下： Function( Function(参数参数1,1,参数参数2, )2, ) End Functi
115、on End Function Function Function过程调用通过直接引用函数名过程调用通过直接引用函数名( (用在变量赋值语句的右端或用在变量赋值语句的右端或表达式中表达式中) )。右条纲逊盎弧魁宵纸姨和骨惟函捆孪蟹窗叮酣贷类椒汪切凑皿咳唤淡结宣第7章网页制作与编基础第7章网页制作与编基础737.3 7.3 脚本语言基础脚本语言基础 7.3.2 VBScript7.3.2 VBScript2 2VBScriptVBScript编程基础编程基础 VBScript VBScript控制语句主要有控制语句主要有条件语句和循环语句。条件语句和循环语句。 条件语句有条件语句有IfThenE
116、lseIfThenElse和和Select CaseSelect Case语句。语句。例例7-2 IF7-2 IF条件语句条件语句 放在程序首行，强制变量声明放在程序首行，强制变量声明%Dim GradeDim GradeGrade=hour(time() Grade=hour(time() If Grade12 Then If Grade12 Then Response.write Goodmorning! Response.write Goodmorning!Elseif Grade18 ThenElseif Grade%央樊盂轩标郊舱惨侥器瞩谤厌荫迎腿凳以操包税拟弄炬官宵吊傍戏怀旺馋第7
117、章网页制作与编基础第7章网页制作与编基础747.3 7.3 脚本语言基础脚本语言基础 7.3.2 VBScript7.3.2 VBScript2 2VBScriptVBScript编程基础编程基础 VBScript VBScript控制语句主要有条件语句和循环语句。控制语句主要有条件语句和循环语句。 循环语句主要有循环语句主要有ForNext(ForNext(强制型强制型) )，DoLoop(DoLoop(条件型条件型) )和不太常和不太常用的用的WhileWendWhileWend、For EachInFor EachIn。例例7-3 7-3 循环语句。循环语句。% LANGUAGE = V
118、BScript % 以下循环输出以下循环输出Hello everyone!Hello everyone!字符串字符串, ,字体由小变大字体由小变大for i=1 to 5for i=1 to 5 Hello everyone! Hello everyone! next next %兵盾绦面矩闺烤梨疆然借环流雾豁稿促寿咒辨单仍蚀磐颜亿介萍肾逢瓦琳第7章网页制作与编基础第7章网页制作与编基础757.3 7.3 脚本语言基础脚本语言基础 7.3.3 JavaScript7.3.3 JavaScript1 1JavaScriptJavaScript介绍介绍 JavaScript JavaScript是
119、一种新的描述语言，可以被嵌入是一种新的描述语言，可以被嵌入HTMLHTML的文件之中。通过的文件之中。通过JavaScriptJavaScript可以做到回应使用者的需求事件可以做到回应使用者的需求事件 ( (如：如：formform的输入的输入) )而不用任而不用任何的网络来回传输资料，所以当一位使用者输入一项资料时，它不用先传何的网络来回传输资料，所以当一位使用者输入一项资料时，它不用先传给服务器端给服务器端(server)(server)处理，再传回来的过程，而直接可以被客户端处理，再传回来的过程，而直接可以被客户端(client)(client)的应用程序所处理，可以想象成有一个可执行
120、程序在你的客户端的应用程序所处理，可以想象成有一个可执行程序在你的客户端上执行一样。上执行一样。 JavaScript JavaScript与与VBScriptVBScript有很多地方是相通的，不同的是有很多地方是相通的，不同的是JavaScriptJavaScript脚脚本中，对象、属性、方法等命名对大小写敏感，即常量、变量、函数、对本中，对象、属性、方法等命名对大小写敏感，即常量、变量、函数、对象以及保留字的大小写是有区别的。在引用别人的网页特效小程序时，不象以及保留字的大小写是有区别的。在引用别人的网页特效小程序时，不要更改字母的大小写。要更改字母的大小写。 JavaScript Ja
121、vaScript提供了提供了4 4种基本数据类型来处理数字和文本，通过变量来种基本数据类型来处理数字和文本，通过变量来当作存储信息的容器，而且还可以通过表达式以有效和复杂的方法来处理当作存储信息的容器，而且还可以通过表达式以有效和复杂的方法来处理信息。信息。含赚渗卷缠怖宅崇肃廷寸篡灰讶涟楼炳秀茄戴莉锥日席范哭荡萄懊血厨旷第7章网页制作与编基础第7章网页制作与编基础767.3 7.3 脚本语言基础脚本语言基础 7.3.3 JavaScript7.3.3 JavaScript2 2JavaScriptJavaScript代码的加入代码的加入 JavaScript JavaScript的脚本包括在的
122、脚本包括在HTMLHTML中，它成为中，它成为HTMLHTML文档的一部分。它与文档的一部分。它与HTMLHTML标识相结合，构成了一个功能强大的标识相结合，构成了一个功能强大的InternetInternet网上编程语言。网上编程语言。 为了便于程序的解释和调用，应将为了便于程序的解释和调用，应将JavaScriptJavaScript的脚本放在的脚本放在HTMLHTML文档头文档头部，对于小的脚本和简单的页面，它可以直接将部，对于小的脚本和简单的页面，它可以直接将JavaScriptJavaScript脚本加入文档的脚本加入文档的任意位置。也可将任意位置。也可将JavaScriptJava
123、Script程序以扩展名程序以扩展名“.Js”“.Js”单独存放，再利用格式单独存放，再利用格式Script Src=JavaScript Script Src=JavaScript 文件名嵌入在文件的任何位置。例如，文件名嵌入在文件的任何位置。例如，表示在此处调用，表示在此处调用1.js1.js文件。文件。 JavaScript JavaScript的注释如果是一行可以用的注释如果是一行可以用“/”“/”，若是多行则应该用，若是多行则应该用“/*/”“/*/”。 在在HTMLHTML中使用中使用、标识加入标识加入JavaScriptJavaScript语句，这样，语句，这样，HTMLHTML
124、语句和语句和JavaScriptJavaScript语句位于同一个文件中，其格式为语句位于同一个文件中，其格式为鞠岁熟馅打督舵欠拷租遮靠泵芝鸥疤钎钒蔫校胃耐群掉晋郎算如疵渭焰拆第7章网页制作与编基础第7章网页制作与编基础777.3 7.3 脚本语言基础脚本语言基础 7.3.3 JavaScript7.3.3 JavaScript2 2JavaScriptJavaScript代码的加入代码的加入( (例例7-4 倒计时倒计时) )var urodz= new Date(December 25,2006);var urodz= new Date(December 25,2006);var s=va
125、r s=圣诞圣诞;var now = new Date();var now = new Date();var ile = urodz.getTime() - now.getTime();var ile = urodz.getTime() - now.getTime();var dni = Math.floor(ile / (1000 * 60 * 60 * 24);var dni = Math.floor(ile / (1000 * 60 * 60 * 24);if (dni 1)if (dni 1) document.write( document.write(今天离今天离+s+s+还有还有
126、+dni +dni +天天)else if (dni = 1)else if (dni = 1) document.write( document.write(只有只有2 2天啦！天啦！)else if (dni = 0)else if (dni = 0) document.write( document.write(只有只有1 1天啦！天啦！)elseelsedocument.write(document.write(好象已经过了哦！好象已经过了哦！););哮乃缄烦挽鲸颧兑向谩氯扳示拌境妻洱侦砍芋旭暗戴署森疚驰寐灶稀稳颜第7章网页制作与编基础第7章网页制作与编基础787.3 7.3 脚本语言
127、基础脚本语言基础 7.3.3 JavaScript7.3.3 JavaScript3 3使用特效代码使用特效代码 怎样在我的网页中插入代码？只要把这些代码复制，使用怎样在我的网页中插入代码？只要把这些代码复制，使用FrontPageFrontPage时，点击编辑窗口左下角的时，点击编辑窗口左下角的“HTML”“HTML”选项卡即出现源代码窗口，将特效选项卡即出现源代码窗口，将特效代码粘贴进去，保存即可，再在浏览器中打开，你就会看到效果了。代码粘贴进去，保存即可，再在浏览器中打开，你就会看到效果了。 一般来说，除非特别指明，例如，要求插入到一般来说，除非特别指明，例如，要求插入到与与之间。之间。
128、在网页源代码的在网页源代码的与与之间的任何地方插入代码都可以，在表之间的任何地方插入代码都可以，在表格的单元格格的单元格与与之间插入代码，一般不会出错。之间插入代码，一般不会出错。 在网络有大量的在网络有大量的JavascriptJavascript特效和特效和VbscriptVbscript特效，其中有特效，其中有CookieCookie脚脚本，按钮类特效，窗口类特效，导航菜单类，技巧特效类，链接类特效，本，按钮类特效，窗口类特效，导航菜单类，技巧特效类，链接类特效，时间类特效，图片类特效，文字类特效等，集管理与收集于一身，非常时间类特效，图片类特效，文字类特效等，集管理与收集于一身，非常适
129、合网页制作者使用。你只需简单的复制、粘贴，就可以做出很多漂亮适合网页制作者使用。你只需简单的复制、粘贴，就可以做出很多漂亮的网页特效。的网页特效。 意酞魄疼名肘戴惕龚特抑硝辽伯耙筏忿萨皮谨龟珍亡刹漱茶拔谆造虱咀塞第7章网页制作与编基础第7章网页制作与编基础797.3 7.3 脚本语言基础脚本语言基础 7.3.4 7.3.4 脚本与表单的结合脚本与表单的结合1 1对象的引用对象的引用 脚本语言可以看成是面向对象的语言。每个对象都是事先定义好的，都脚本语言可以看成是面向对象的语言。每个对象都是事先定义好的，都有自己的属性、方法和事件。对象是自然界的一类事物。在有自己的属性、方法和事件。对象是自然界
130、的一类事物。在VBScriptVBScript中，中，WindowsWindows、FormForm、DateDate、DocumentDocument等都属于对象。等都属于对象。 属性属性是指一类对象的特征，用于描述一个对象。是指一类对象的特征，用于描述一个对象。方法方法说明对象如何去做。说明对象如何去做。例如：例如：Document.Write(Document.Write(您好您好)就是在显示器输出字符串就是在显示器输出字符串“您好您好”；又如；又如AlterAlter(欢迎欢迎)在新窗口中显示欢迎，其中前头的在新窗口中显示欢迎，其中前头的WindowsWindows一般可以省略。一般可
131、以省略。事件事件是是每个对象可以识别和响应有某些操作行为。程序能对这些事件响应。每个对象可以识别和响应有某些操作行为。程序能对这些事件响应。 例如，打开网页的事件例如，打开网页的事件body onload=alter ，则在打开网页，则在打开网页时显示欢迎；关闭网页的事件时显示欢迎；关闭网页的事件body unload=alter ，则在关闭网，则在关闭网页时显示再见。页时显示再见。 在在WindowsWindows和脚本中有很多已经封装好的对象，称为控件，不同的控件和脚本中有很多已经封装好的对象，称为控件，不同的控件有不同的功能、属性和方法。引用对象的属性和方法必须引用该对象的名称有不同的功
132、能、属性和方法。引用对象的属性和方法必须引用该对象的名称（WindowsWindows对象可以省略），在其后加对象可以省略），在其后加“.”“.”，然后写出要引用的对象和属性。，然后写出要引用的对象和属性。例如按钮例如按钮button button 就是控件，如要引用就是控件，如要引用button button 对象的对象的valuevalue属性，则应该写属性，则应该写成成button.valuebutton.value。垄圾寄侗祈歉务足袜钩晤灶杭舜恕形茅馅厚鸯驳尘韧伟鲸救瞬递程盛帖弥第7章网页制作与编基础第7章网页制作与编基础807.3 7.3 脚本语言基础脚本语言基础 7.3.4 7.3
133、.4 脚本与表单的结合脚本与表单的结合2 2表单的事件属性表单的事件属性 事件即是指一系列对页面进行的动作，用于说明用户与事件即是指一系列对页面进行的动作，用于说明用户与WebWeb页交互时页交互时产生的操作。事件属性的值一般为产生的操作。事件属性的值一般为ScriptScript脚本语言的一个函数，函数的功脚本语言的一个函数，函数的功能是执行某一事件。响应某个事件而进行的处理称为事件处理。大多数表能是执行某一事件。响应某个事件而进行的处理称为事件处理。大多数表单控件和标记本身都提供了多个事件属性，当某个触发机制得到满足时，单控件和标记本身都提供了多个事件属性，当某个触发机制得到满足时，这个事
134、件就会触发。这个事件就会触发。 最常见表单事件是最常见表单事件是onsubmitonsubmit用于处理提交表单时所触发的事件，用于处理提交表单时所触发的事件，onresetonreset用于处理用户重置表单这一动作，只适用于表单元素。用于处理用户重置表单这一动作，只适用于表单元素。OnloadOnload与与 OnunloadOnunload用于浏览器载入（关闭）一个窗口或框架时事件发生，适用于用于浏览器载入（关闭）一个窗口或框架时事件发生，适用于BodytBodyt与与FramesetFrameset元素。凡对鼠标元素。凡对鼠标(onmouse)(onmouse)、键盘、键盘(onkey)
135、(onkey)和鼠标单击和鼠标单击（onclickonclick）、双击（）、双击（ondbclickondbclick）都有相应事件的触发机制。）都有相应事件的触发机制。广暂德底鬃汾漓奇砂捶穴朴米诱荔磁疤灼埃碳祖锰留肢亥举钾摊的对伦东第7章网页制作与编基础第7章网页制作与编基础817.4 7.4 动态网页技术动态网页技术7.4.1 7.4.1 网页的动态表现技术网页的动态表现技术1 1FlashFlash技术技术 2 2DHTML(DHTML(动态超文本标记语言动态超文本标记语言 ) ) 3 3VRML(VRML(虚虚拟拟现现实实造造型型语语言言，将将WebWeb信信息息在在一一个个交交互互
136、的的三维空间中表达出来。三维空间中表达出来。) ) 现行的动态网页主要有两大类技术：现行的动态网页主要有两大类技术：网页的动态表网页的动态表现技术现技术与与网页的动态内容技术网页的动态内容技术。前者是网页外观表现技。前者是网页外观表现技术，后者是网页的内容更新技术。术，后者是网页的内容更新技术。榷勘趴鸦及圈挫绢杯茎楷埃盔节稀醋霄巷揽雾窥走婶冰澎围廓油噶腺壮慕第7章网页制作与编基础第7章网页制作与编基础827.4 7.4 动态网页技术动态网页技术 7.4.2 7.4.2 网页的动态内容技术网页的动态内容技术1 1CGICGI（Common Common Gateway Gateway Inter
137、faceInterface，公公用用网网关关接接口口）是是较较早早用用来来建建立立动动态态网网页页的的技技术术。当当客客户户端端向向WebWeb服服务务器器上上指指定定的的CGICGI程程序序发发出出请请求求时时，WebWeb服服务务器器会会启启动动一一个个新新的的进进程程执执行行某某些些CGICGI程程序序，程程序序执执行行后后将结果以网页的形式再发送回客户端。将结果以网页的形式再发送回客户端。 2 2PHPPHP（Personal Personal Home Home PagesPages）是是一一种种服服务务器器端端的的嵌嵌入入HTMLHTML的的脚脚本本语语言言，可以运行于多种平台。可
138、以运行于多种平台。 3 3JSPJSP（Java Java Server Server PagesPages）是是基基于于Java的的技技术术，用用于于创创建建可可支支持持跨跨平平台台 及及 跨跨 WebWeb服服 务务 器器 的的 动动 态态 网网 页页 。 JSP与与 服服 务务 器器 端端 的的 脚脚 本本 语语 言言JavaScriptJavaScript不不一一样样。JSPJSP是是在在传传统统的的静静态态页页面面中中加加入入JavaJava程程序序片片段段和和JSPJSP标记，构成标记，构成JSPJSP页面，然后再由服务器编译和执行。页面，然后再由服务器编译和执行。 4 4ASPA
139、SP（Active Active Server Server PagesPages）是是微微软软公公司司提提供供的的开开发发动动态态网网页页的的技技术术，具具有有开开发发简简单单、功功能能强强大大等等优优点点，ASPASP使使生生成成WebWeb动动态态内内容容及及构构造造功功能强大的能强大的WebWeb应用程序的工作变得十分简单。应用程序的工作变得十分简单。 转芜才皿焉翟唾胳叛掩善霞之碾凤椽脱叫拴除窍枪必晕厚貌打宰嘉跳意塔第7章网页制作与编基础第7章网页制作与编基础837.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述1 1什么是什么是
140、ASPASP 在微软的文件中把在微软的文件中把ASPASP描述为：描述为： “ “一个服务器的脚本环境，一个服务器的脚本环境，在这里可以生成和运行动态的、交互的、高性能的在这里可以生成和运行动态的、交互的、高性能的WebWeb服务器应服务器应用程序用程序” ” 。 从描述中可以看出，从描述中可以看出，ASPASP既不是一种语言，也不是一种开发既不是一种语言，也不是一种开发工具，而是一种技术框架，它能够把工具，而是一种技术框架，它能够把HTMLHTML、脚本、组件等有机、脚本、组件等有机地组合在一起，形成一个能够在服务器上运行的应用程序，并地组合在一起，形成一个能够在服务器上运行的应用程序，并把
141、按用户要求专门制作的标准把按用户要求专门制作的标准HTMLHTML页面回送给客户端浏览器。页面回送给客户端浏览器。其主要功是为生成动态的交互式的其主要功是为生成动态的交互式的WebWeb服务器应用程序提供一种服务器应用程序提供一种功能强大的方法或技术。功能强大的方法或技术。 ASP ASP是一个是一个WebWeb服务器端的开发环境。服务器端的开发环境。 另外，另外，ASPASP还提供了丰富的组件和对象，可以使用第三方控还提供了丰富的组件和对象，可以使用第三方控件来完成复杂的功能。件来完成复杂的功能。 保捍把冷吭噬导肯耘颤亥垛本去暖斜拎授阮眨浚蓑了进旨速狄炳艺封悦返第7章网页制作与编基础第7章网
142、页制作与编基础847.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述2ASP的工作方式 图图7-237-23访问访问HTMLHTML页面和访问页面和访问ASPASP页面两个过程页面两个过程 徒赎馅脓雾跳寂涵氏抖任言莹遣朝馆怪律砍家令竹悼摈昧恒惮练芦糟袄棕第7章网页制作与编基础第7章网页制作与编基础857.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述3 3ASPASP语法语法 (1)(1)定界符；定界符；%(2)Script(2)Script标志；标志； ASP ASP可以使用任何可
143、以使用任何ScriptScript语言，只要提供相应的脚语言，只要提供相应的脚本驱动，本驱动，ASPASP自身提供了自身提供了VBScriptVBScript和和JscriptJscript的驱动。它的驱动。它缺省的缺省的ScriptScript语言是语言是VBScriptVBScript，当然开发者也可以改变，当然开发者也可以改变这一缺省设置，例如要改为这一缺省设置，例如要改为JavascriptJavascript，只需在文件开，只需在文件开头注明头注明% % Language=JavaScript%Language=JavaScript%就可。就可。( (SCRIPTSCRIPT和和/S
144、CRIPT/SCRIPT) ) (3)HTML(3)HTML标记；标记； 在在ASPASP文件中同样可以包含文件中同样可以包含HTMLHTML语言的各种表达。语言的各种表达。 千隋燥屯盾须毗涝编隋右锚炊趾悔末牙沪删综入叛嫁烫寺柿晒庭曝肉彝氛第7章网页制作与编基础第7章网页制作与编基础867.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述4 4ASPASP的内置对象的内置对象 ASPASP共有以下六个内置对象：共有以下六个内置对象：(1)Request(1)Request对象对象：用于访问任何基于：用于访问任何基于HTTPHTTP请求传递的
145、所有信息，包括从请求传递的所有信息，包括从HTMLHTML表单用表单用POSTPOST或或GETGET方法传递参数、方法传递参数、CookieCookie和用户认证。和用户认证。(2)Response(2)Response对象对象：用来控制发送给用户的信息，包括直接发送信息给：用来控制发送给用户的信息，包括直接发送信息给浏览器、重定向浏览器到另一个浏览器、重定向浏览器到另一个URLURL和设置和设置CookieCookie的值。的值。(3)Server(3)Server对象对象：用来实现对服务器上的方法和属性的访问。：用来实现对服务器上的方法和属性的访问。(4)Application(4)Ap
146、plication对象对象：用来实现在给定应用程序的所有用户之间共享信：用来实现在给定应用程序的所有用户之间共享信息，并在服务器运行期间一直保存数据。息，并在服务器运行期间一直保存数据。 (5)Session(5)Session对象对象：用来实现存储特定用户会话所需的信息。：用来实现存储特定用户会话所需的信息。(6)Object Context(6)Object Context对象对象：用于在页面内进行事务处理。：用于在页面内进行事务处理。典殖堂藻衰旦坐咸男区寨磷鹊盲私犀三抠萄涂柳守弟藏挟妨庸赛耗窍芋泵第7章网页制作与编基础第7章网页制作与编基础877.5 ASP7.5 ASP与数据库应用实例
147、与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述5 5服务器组件服务器组件 应用应用ASPASP服务器组件（服务器组件（ActiveX Serve ComponentsActiveX Serve Components）可以使用户）可以使用户很方便地使用设计好的程序制作动态网页。很方便地使用设计好的程序制作动态网页。ASPASP有以下内置服务器组有以下内置服务器组件：件：(1)(1)文件存取组件（文件存取组件（File Access ComponentFile Access Component）(2)(2)访客计数器组件（访客计数器组件（Page Counter Component
148、Page Counter Component）(3)(3)广告翻转器组件（广告翻转器组件（Content Rotator ComponentContent Rotator Component）(4)(4)浏览器描述组件（浏览器描述组件（Browser Capabilities ComponentBrowser Capabilities Component）(5)(5)内容连接组件（内容连接组件（Content Linking ComponentContent Linking Component）(6)(6)数据库存取组件（数据库存取组件（Data Object ComponentData Ob
149、ject Component）(7)(7)电子邮件组件（电子邮件组件（Email ComponentEmail Component）骸谩遣牺喂芒民蔓遏乖凳沽救娇崭琳咏浆郸佰勘芹呜萌折浸晌鬼萎砂沂惭第7章网页制作与编基础第7章网页制作与编基础887.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述6 6利用实现数据库的访问利用实现数据库的访问 ASP ASP与与ADOADO（ActiveDataObjectActiveDataObject）可实现数据库的查询服）可实现数据库的查询服务。首先利用务。首先利用HTMLHTML的的FORMFORM标
150、签建立查询信息入口，输入用户标签建立查询信息入口，输入用户的请求，服务器从的请求，服务器从HTTPHTTP得到用户的请求，在服务器端执行得到用户的请求，在服务器端执行SQLSQL语言完成相应的数据库操作，语言完成相应的数据库操作，ADOADO可以完成连接支持可以完成连接支持ODBCODBC的多种数据库，如：的多种数据库，如：OracleOracle、FoxProFoxPro、SQLServerSQLServer、InformixInformix等，以实现对数据库的访问要求，然后将访问的结等，以实现对数据库的访问要求，然后将访问的结果以果以HTMLHTML文本的形式返回用户浏览器端。文本的形式返
151、回用户浏览器端。 ADO ADO在访问数据库之前，必须先建立数据源，设置在访问数据库之前，必须先建立数据源，设置DNSDNS，连接并打开相应的数据库，然后使用连接并打开相应的数据库，然后使用SQLSQL命令完成相应的任命令完成相应的任务，再用务，再用ASPASP语句返回结果。语句返回结果。绪幢目歇于耳亿情睁拷运郧惨尽里矽揣叙镁再蟹搐技织乞郭遍敲般待猪甩第7章网页制作与编基础第7章网页制作与编基础897.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.2 Web7.5.2 Web数据库基础数据库基础1 1WebWeb数据库的概述数据库的概述 数据库是指按照一定的结构和规则组织起
152、来的相关数据的集合，是存数据库是指按照一定的结构和规则组织起来的相关数据的集合，是存放数据的放数据的“仓库仓库”，据此将网络数据库定义为以后台数据库为基础的，加，据此将网络数据库定义为以后台数据库为基础的，加上一定的前台程序，通过浏览器完成数据存储、查询等操作的系统。上一定的前台程序，通过浏览器完成数据存储、查询等操作的系统。 数据库技术是计算机处理与存储数据的最有效、最成功的技术，而计数据库技术是计算机处理与存储数据的最有效、最成功的技术，而计算机网络的特点是资源共享，因此数据与资源共享这两种技术的结合即成算机网络的特点是资源共享，因此数据与资源共享这两种技术的结合即成为今天广泛应用的为今天
153、广泛应用的WebWeb数据库（也叫网络数据库）。数据库（也叫网络数据库）。 一个一个WebWeb数据库就是用户利用浏览器作为输入接口，输入所需要的数数据库就是用户利用浏览器作为输入接口，输入所需要的数据，浏览器将这些数据传送给网站，而网站再对这些数据进行处理，例如，据，浏览器将这些数据传送给网站，而网站再对这些数据进行处理，例如，将数据存入后台数据库，或者对后台数据库进行查询操作等，最后网站将将数据存入后台数据库，或者对后台数据库进行查询操作等，最后网站将操作结果传回给浏览器，通过浏览器将结果告知用户。网站上的后台数据操作结果传回给浏览器，通过浏览器将结果告知用户。网站上的后台数据库就是库就是
154、WebWeb数据库。数据库。 渐卸恒此礼爱幸鼓梗帕决煮晴返景傣匈政相冈危魏议侮估损独汕缠梢聂掣第7章网页制作与编基础第7章网页制作与编基础907.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.2 Web7.5.2 Web数据库基础数据库基础2 2几种常用几种常用WebWeb数据库的比较数据库的比较 当前比较流行的当前比较流行的WebWeb数据库主要有：数据库主要有：SQL ServerSQL ServerMySQLMySQLOracleOracle讯殃墟悔半绵襟宠浅琳穷涌率验拂绳匹藩帘筋栖崭击艾嚷篱经垄窖济右扩第7章网页制作与编基础第7章网页制作与编基础917.5 ASP7
155、.5 ASP与数据库应用实例与数据库应用实例 7.5.3 ASP7.5.3 ASP访问数据库实例访问数据库实例1 1常用数据库语句常用数据库语句 SELECT SELECT 语句：命令数据库引擎从数据库里返回信息，作为一组记录。语句：命令数据库引擎从数据库里返回信息，作为一组记录。INSERT INTO INSERT INTO 语句：添加一个或多个记录至一个表。语句：添加一个或多个记录至一个表。UPDATE UPDATE 语句：创建更新查询来改变基于特定准则的指定表中的字段值。语句：创建更新查询来改变基于特定准则的指定表中的字段值。DELETE DELETE 语句：创建一个删除查询把记录从语句
156、：创建一个删除查询把记录从 FROM FROM 子句列出并符合子句列出并符合 WHERE WHERE 子句的一个或更多的表中清除。子句的一个或更多的表中清除。EXECUTE EXECUTE 语句：用于激活语句：用于激活 PROCEDURE PROCEDURE（过程）（过程）瞳酱歉侵玄抢点绊着驻潞瓮忠震贬瘪昭沛琳俘铜卑徒好灶奴预贤抉恭兼努第7章网页制作与编基础第7章网页制作与编基础927.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.3 ASP7.5.3 ASP访问数据库实例访问数据库实例2 2建立数据库建立数据库(test.mdb )(test.mdb )3 3连接数据库连
157、接数据库 方法方法1 1：Set conn = Server.CreateObject(ADODB.Connection)Set conn = Server.CreateObject(ADODB.Connection)conn.Open driver=Microsoft Access Driver conn.Open driver=Microsoft Access Driver (*.mdb);dbq=&Server.MapPath(test.mdb)(*.mdb);dbq=&Server.MapPath(test.mdb)方法方法2 2：Set conn = Server.CreateObj
158、ect(ADODB.Connection)Set conn = Server.CreateObject(ADODB.Connection)conn.Open conn.Open Provider=Microsoft.Jet.OLEDB.4.0;DataSource=&Server.MapPath(teProvider=Microsoft.Jet.OLEDB.4.0;DataSource=&Server.MapPath(test.mdb)st.mdb)注意：一个页面中，只要连接一次就可以了，使用完后要及时关闭连接。注意：一个页面中，只要连接一次就可以了，使用完后要及时关闭连接。conn.Clos
159、econn.CloseSet conn = NothingSet conn = Nothing断唇塔计役柞虞痹龄讹鸟缮潜硒引预葛酬袖鳞薄枣敌滇妈詹咀蔷意绦古膨第7章网页制作与编基础第7章网页制作与编基础937.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.3 ASP7.5.3 ASP访问数据库实例访问数据库实例4 4添加新记录到数据库添加新记录到数据库 Set conn = Server.CreateObject(ADODB.Connection)Set conn = Server.CreateObject(ADODB.Connection)conn.Open driver
160、=Microsoft Access Driver conn.Open driver=Microsoft Access Driver (*.mdb);dbq=&Server.MapPath(test.mdb)(*.mdb);dbq=&Server.MapPath(test.mdb)username = Webusername = Web编程基础编程基础 usermail = webusermail = web indate = Now()indate = Now()sql = insert into test (username,usermail,indata) sql = insert int
161、o test (username,usermail,indata) values(&username&,&usermail&,&indate&)values(&username&,&usermail&,&indate&)conn.Execute(sql)conn.Execute(sql)conn.Closeconn.CloseSet conn = NothingSet conn = Nothing铁亭乒豌挥闲挣花波芦叉受宏斋傍窟娄辈烯荡岸燥熄菌垒庐匀宣华侮捷塘第7章网页制作与编基础第7章网页制作与编基础947.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.3 ASP7.5.
162、3 ASP访问数据库实例访问数据库实例5 5选择数据库里的记录选择数据库里的记录( (记录集记录集) ) Set conn = Server.CreateObject(ADODB.Connection)Set conn = Server.CreateObject(ADODB.Connection)conn.Open driver=Microsoft Access Driver conn.Open driver=Microsoft Access Driver (*.mdb);dbq=&Server.MapPath(test.mdb)(*.mdb);dbq=&Server.MapPath(test
163、.mdb)sql = select * from testsql = select * from testSet rs = Server.CreateObject(ADODB.RecordSet)Set rs = Server.CreateObject(ADODB.RecordSet)rs.Open sql,conn,1,1rs.Open sql,conn,1,1Do While Not rs.EofDo While Not rs.EofResponse.Write Response.Write 姓名：姓名：& rs(username) & rs(username) &E-mailE-mail
164、：& rs(usermail) & rs(usermail) &查看：查看：& rs(view) & rs(view) &次次& & rs(indate) &rs(indate) &加入加入rs.MoveNextrs.MoveNextLoopLooprs.Closers.CloseSet rs = NothingSet rs = Nothingconn.Closeconn.CloseSet conn = NothingSet conn = Nothing惮濒要畸止搭扬巡傈堂酶庭龚脏剂颐恼肃蔽辰较愤箭此鹤久樟阴魁呻粉授第7章网页制作与编基础第7章网页制作与编基础957.5 ASP7.5 ASP与
165、数据库应用实例与数据库应用实例 7.5.3 ASP7.5.3 ASP访问数据库实例访问数据库实例6 6修改（更新）数据库记录修改（更新）数据库记录 修改记录的修改记录的E-mailE-mail：Set conn = Server.CreateObject(ADODB.Connection)Set conn = Server.CreateObject(ADODB.Connection)conn.Open “driver=Microsoft Access Driver conn.Open “driver=Microsoft Access Driver (*.mdb);dbq=&Server.Map
166、Path(test.mdb)(*.mdb);dbq=&Server.MapPath(test.mdb)ID = 1ID = 1usermail = webusermail = web sql = update test set usermail=&usermail& where sql = update test set usermail=&usermail& where ID=&CInt(ID)ID=&CInt(ID)conn.Execute(sql)conn.Execute(sql)conn.Closeconn.CloseSet conn = NothingSet conn = Nothi
167、ng挎蓟蛋调悠褒波谈炙铃中帘穗沪呀翠炎贺损绩了糜剪呀号宴拂婶辑锹萤匙第7章网页制作与编基础第7章网页制作与编基础967.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.3 ASP7.5.3 ASP访问数据库实例访问数据库实例7 7删除数据库记录删除数据库记录 删除某一条记录：删除某一条记录：Set conn = Server.CreateObject(ADODB.Connection)Set conn = Server.CreateObject(ADODB.Connection)conn.Open driver=Microsoft Access Driver conn.Ope
168、n driver=Microsoft Access Driver (*.mdb);dbq=&Server.MapPath(test.mdb)(*.mdb);dbq=&Server.MapPath(test.mdb)ID = 1ID = 1sql = delete from test where ID=&CInt(ID)sql = delete from test where ID=&CInt(ID)conn.Execute(sql)conn.Execute(sql)conn.Closeconn.CloseSet conn = NothingSet conn = Nothing唤滴挟谦盗灰棒鸯铸
169、纤侣坯漳挥蝴噶觉梗吐默绣锐全仪浑吏卉带味湃窑冶第7章网页制作与编基础第7章网页制作与编基础97本章小结本章小结 WebWeb网站是由许多网页和其他相关文件组成的集合，制作网页的网站是由许多网页和其他相关文件组成的集合，制作网页的基础是基础是HTMLHTML语言。而网页制作工具的选择与使用可以使得网页制作更语言。而网页制作工具的选择与使用可以使得网页制作更加方便与快捷。本章首先简单介绍目前流行的几种常用网页制作工具，加方便与快捷。本章首先简单介绍目前流行的几种常用网页制作工具，如如MicroSoft FrontPage 2003MicroSoft FrontPage 2003、Dreamweav
170、er MX 2004Dreamweaver MX 2004等，接着详细等，接着详细介绍网页制作的基础介绍网页制作的基础HTMLHTML语言，包括语言，包括HTMLHTML语言中的各种常用标记的用语言中的各种常用标记的用法和示例。脚本语言作为用来控制网页的控件与对象的一种编程语言法和示例。脚本语言作为用来控制网页的控件与对象的一种编程语言的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力。本章介绍了两而是实现了一种实时的、动态的、可交式的表达能力。本章介绍了两个常用脚本语言个常用脚本语言(VBScript(VBScript和和JavaScript)JavaScript)。动态网页技术的产生与发。动态网页技术的产生与发展，改变了传统的网站与网页，不仅仅是网页的外观变化，更重要的展，改变了传统的网站与网页，不仅仅是网页的外观变化，更重要的是用户与网站之间的交互。本章介绍了动态网页技术的分类与相关技是用户与网站之间的交互。本章介绍了动态网页技术的分类与相关技术。最后通过实例来介绍术。最后通过实例来介绍ASPASP与与WebWeb数据库的应用。数据库的应用。 净源谱藐摩捆色衍米蕾崭勺渺辽舞束镁购沦序慰粤透畅俞移贫将煽惕郸拌第7章网页制作与编基础第7章网页制作与编基础
