《第7章网页制作与编程基础ppt课件》由会员分享，可在线阅读，更多相关《第7章网页制作与编程基础ppt课件（97页珍藏版）》请在金锄头文库上搜索。
1、黔仕援童尤磺晒枣刮斌敢狱耗饱猫独彩刀略瓮特记居铁勃抓冷夕光吩瘁薯第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件第第7 7章章 网页制作与编程基础网页制作与编程基础本章学习目标：本章学习目标：了解常用网页制作工具，基本掌握其中一种了解常用网页制作工具，基本掌握其中一种掌握掌握HTMLHTML语言语言初步掌握初步掌握VBScriptVBScript或或JavaScriptJavaScript脚本语言脚本语言了解动态网页技术了解动态网页技术初步掌握初步掌握ASPASP与数据库应用与数据库应用府算匠漠黑旗熄型父琐悸竭宵慷株炭诅汕茂眶真唯琐盔订讶衅葛希阅屑肺第7章网页制作与编程基础
2、ppt课件第7章网页制作与编程基础ppt课件27.1 7.1 常用网页制作工具常用网页制作工具 随着随着Internet技术的不断发展，网页制作工具越来越多，技术的不断发展，网页制作工具越来越多，选择一种好的工具非常重要，能够起到事半功倍的效果。网选择一种好的工具非常重要，能够起到事半功倍的效果。网页制作工具大体上可以分为页制作工具大体上可以分为两类两类：着眼于网页、网站全局的，：着眼于网页、网站全局的，称之为基本工具；着眼于网页某些元素的，称之为辅助工具。称之为基本工具；着眼于网页某些元素的，称之为辅助工具。 网页制作基本工具网页制作基本工具是指那些专门用来设计能在浏览器中是指那些专门用来设
3、计能在浏览器中显示为网页的显示为网页的HTML文档的专用工具软件，它能整合编排网文档的专用工具软件，它能整合编排网页元素，生成页元素，生成HTML网页代码文件。比较流行的网页制作工网页代码文件。比较流行的网页制作工具软件包括具软件包括Microsoft FrontPage和和Macromedia Dreamweaver等。等。 网页制作辅助工具网页制作辅助工具是指用来创建或加工网页上的图形、是指用来创建或加工网页上的图形、图像、动画、声音和视频等网页元素的工具软件。图像、动画、声音和视频等网页元素的工具软件。胡匠催会椭钝肝儒施啄唱章骚祖敬荆招等秆雅屑拣疟溢乘英斯贪包匹市家第7章网页制作与编程基
4、础ppt课件第7章网页制作与编程基础ppt课件37.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 2003 FrontPage FrontPage是由是由MicrosoftMicrosoft公司推出的新一代公司推出的新一代WebWeb网页制作网页制作工具。工具。FrontPageFrontPage使网页制作者能够更加方便、快捷地创建和使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工发布网页，具有直观的网页制作和管理方法，简化了大量工作。作。
5、FrontPage FrontPage的最强大之处是其站点管理与远程发布功能。的最强大之处是其站点管理与远程发布功能。用户只需在本地对网页进行编辑，用户只需在本地对网页进行编辑，FrontPageFrontPage会跟踪用户编辑会跟踪用户编辑过的文件，在发布时，它会自动将修改过的网页进行发布，过的文件，在发布时，它会自动将修改过的网页进行发布，未编辑过的网页可由用户决定是否再次向服务器发送未编辑过的网页可由用户决定是否再次向服务器发送。凭掌癸关融踩舍刽涂贫央朱丝趟很阉偷瓣陇纲暗烦辖慧抄劳膘洪井眺店近第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件47.1 7.1 常用网页制
6、作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20031 1FrontPage 2003FrontPage 2003的特色的特色 (1) (1)强大的网页设计功能强大的网页设计功能 可以智能地完成可以智能地完成HTMLHTML文本的编辑，并可以针对不同的浏文本的编辑，并可以针对不同的浏览器对网页进行设置；可以提供对多种版本的浏览器的支持；览器对网页进行设置；可以提供对多种版本的浏览器的支持；完善了所见即所得的网页编辑操作。完善了所见即所得的网页编辑操作。 (2) (2)丰富的网页设计模板、设计向导和主题样
7、式丰富的网页设计模板、设计向导和主题样式 提供了多种网页设计模板、网页设计向导和主题样式。提供了多种网页设计模板、网页设计向导和主题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。有专业水准的网站。钨饲怂菱贷杠辱芭暴揩孤励址量郊露拥脸锐折蹄鲸芹敦稻婴赖颓风律蔼卷第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件57.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20032FrontPag
8、e 2003的新增功能的新增功能 (1)设计网站设计网站 FrontPage 2003 具有经过改进的设计环境、新的布局和具有经过改进的设计环境、新的布局和设计工具、模板以及经过改进的主题，这一切可以帮助用户设计工具、模板以及经过改进的主题，这一切可以帮助用户实现网站创意，而无需任何实现网站创意，而无需任何HTML知识。知识。 (2)开发网站开发网站 FrontPage 2003具有改进的创作环境、新的图形功能、强具有改进的创作环境、新的图形功能、强大的编码工具（帮助用户应用并增加各种编码语言知识）、大的编码工具（帮助用户应用并增加各种编码语言知识）、以及创建交互式脚本的工具。此外，以及创建交
9、互式脚本的工具。此外，FrontPage 2003可以生成可以生成有效和干净的有效和干净的HTML，能让用户更好地控制代码。，能让用户更好地控制代码。 命闻届尾佃酪卓嚼拆发郎堰芒膀佬荣皆芹谊嚎赔虞写鲤阔颈粤昆旦跃霄屋第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件67.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20033 3FrontPage 2003FrontPage 2003工作界面工作界面 鹅匪弯录邱落挪液劝陆瞪塔涤藐峪跑愿摸胞粹扫铅逾柠管誊峦娩床即贯肋
10、第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件77.1 7.1 常用网页制作工具常用网页制作工具 7.1.1 Microsoft FrontPage 20037.1.1 Microsoft FrontPage 20033 3FrontPage 2003FrontPage 2003工作界面工作界面 窗口栏的内容随着所选视图不同而不同。为了便于用户窗口栏的内容随着所选视图不同而不同。为了便于用户制作网页和查看、修改制作网页和查看、修改WebWeb站点的组织结构，站点的组织结构，FrontPage 2003FrontPage 2003提供了提供了6 6种视图。单击视图菜单相应的
11、菜单项可以切换到不同种视图。单击视图菜单相应的菜单项可以切换到不同的视图。各个视图的功能分别为：的视图。各个视图的功能分别为： “网页网页”视图：网页视图是进行网页编辑的操作界面。视图：网页视图是进行网页编辑的操作界面。 “文件夹文件夹”视图：用来对网站的目录和文件夹进行管理。视图：用来对网站的目录和文件夹进行管理。 “报表报表”视图：用于查看与网页制作有关的各项参数。视图：用于查看与网页制作有关的各项参数。 “远程网站远程网站”视图：可以发布整个网站或个别文件，还可以视图：可以发布整个网站或个别文件，还可以在两个或更多个位置之间同步文件。在两个或更多个位置之间同步文件。 “导航导航”视图：用
12、来显示和编辑网页的导航关系。视图：用来显示和编辑网页的导航关系。 “超链接超链接”视图：显示某个网页与其他网页之间的关系。视图：显示某个网页与其他网页之间的关系。 “任务任务”视图：用来查看网站和网页设计的完成情况。视图：用来查看网站和网页设计的完成情况。斤霞笋狠茶失臆词毖聘刽匪伍语婶蔓树庭缘耗喀氢猩椅瞅蜂蛋潦衫坯灼氨第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件87.1 7.1 常用网页制作工具常用网页制作工具 7.1.2 Adobe Dreamweaver CS37.1.2 Adobe Dreamweaver CS3 使用使用DreamweaverDreamweave
13、r，设计师可以随心所欲地编写代码、，设计师可以随心所欲地编写代码、设计网站网页以及进行高级开发。无论是喜欢手写设计网站网页以及进行高级开发。无论是喜欢手写HTMLHTML代码代码还是习惯于可视化环境，还是习惯于可视化环境，DreamweaverDreamweaver都能提供方便快捷、都能提供方便快捷、功能强大的工具，使用功能强大的工具，使用DreamweaverDreamweaver将是一种全新的体验。将是一种全新的体验。在易用、创新、规范等优点的基础上，在易用、创新、规范等优点的基础上，DreamweaverDreamweaver还拥有还拥有更先进的网页布局和设计环境，以及更为强大的代码编辑
14、功更先进的网页布局和设计环境，以及更为强大的代码编辑功能等卓越特性。能等卓越特性。Dreamweaver CS3Dreamweaver CS3的操作界面主要由以下几个部分组成：的操作界面主要由以下几个部分组成：标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性检标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性检查器以及多个面板组，如图查器以及多个面板组，如图7-27-2所示。所示。土袄惨铣纸尾鸵儿脓砍告栏唾甜纂终斟骇肾乱嘿诀帕汛惩翠递三臻峭续腑第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件97.1 7.1 常用网页制作工具常用网页制作工具 7.1.2 Adobe Dre
15、amweaver CS37.1.2 Adobe Dreamweaver CS3 图7-2 Dreamweaver CS3 的界面布局 坚砾驭澎贡野嘉衫耘侮替研眉勒寺窥睬凯兵洽寄满缓窗坛柏识轮阴纶数歹第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件107.1 7.1 常用网页制作工具常用网页制作工具1 1标题栏标题栏( (注意区别文档的标题和文档的文件名称注意区别文档的标题和文档的文件名称) )2 2菜单栏菜单栏3 3插入栏插入栏4 4文档工具栏文档工具栏5 5“属性属性”检查器检查器 6 6其他面板其他面板 7.1.2 Adobe Dreamweaver CS37.1.2
16、Adobe Dreamweaver CS3 削傣诚键墟驴后复斗严届伙疹画蔓玖褐赌兜驳婴哮萎键烁寥帝泣珊趾副娘第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件117.1 7.1 常用网页制作工具常用网页制作工具 7.1.3 7.1.3 网页美化工具网页美化工具 1Photoshop CS3 2Fireworks CS3 3Flash CS3 为了使制作的网页更为美观，用户在利用网页制作工具制为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。作网页时，还需利用网页美化工具对网页进行美化。 降孩憨架球遮疚膛窝蜗透兰椿凋件屠糠强筹正短春
17、烃人驳袒朵卡宣渣质假第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件127.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述1 1什么是什么是HTML HTML HTML HTML英文全名是英文全名是Hyper Text Markup LanguageHyper Text Markup Language，即超，即超文本标记语言，是一种用来制作超文本文档的简单标记语文本标记语言，是一种用来制作超文本文档的简单标记语言。言。 用用HTMLHTML编写的超文本文档称为编写的超文本文档称为HTMLHTML文档，它能独立于文档，它能独立于
18、各种操作系统（如各种操作系统（如UNIXUNIX、WindowsWindows等）。它主要是在原来文等）。它主要是在原来文本文件的基础上，增加一系列的标识符来描述格式，形成本文件的基础上，增加一系列的标识符来描述格式，形成网络文件。当用户使用浏览器下载时，就把这些标识符解网络文件。当用户使用浏览器下载时，就把这些标识符解释成应有的含义，并按照一定的格式将这些被标识的文件释成应有的含义，并按照一定的格式将这些被标识的文件显示在屏幕上，而显示在屏幕上，而HTMLHTML的标识符号并不显示在屏幕上。的标识符号并不显示在屏幕上。 蒂宫幽击脐胶诞谦枢歇皇多已沫渣板狄但蜗凄侦膛楷者快蓟啥尖猎耗爷字第7章网
19、页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件137.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (1)HTML (1)HTML文档的基本结构文档的基本结构 下面是一个最基本的超文本文档的源代码下面是一个最基本的超文本文档的源代码My first page 我的第一个网页我的第一个网页 HTML文件由标记和被标记的内容组成。每个标记都有文件由标记和被标记的内容组成。每个标记都有“”围围住，以表示这是住，以表示这是HTML代码而非普通文本，标记能产生所需的各种效果。代码而非普通文本，标记能
20、产生所需的各种效果。就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大都为相应的英文单词首字母或缩写，很好记忆。各种标记差别很大，但都为相应的英文单词首字母或缩写，很好记忆。各种标记差别很大，但总的表示形式却大同小异。总的表示形式却大同小异。揩测田柄盾墙奥察慕恋镍篙俺汪闺颁涅呸弛吼废剐备趾赴析图妓匀诵嘲棠第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件147.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (2)
21、HTML (2)HTML的标记的标记 单标签单标签 某些标记称为某些标记称为“单标签单标签”，它只需单独使用就能完整地表达意思。，它只需单独使用就能完整地表达意思。 这类标记的这类标记的语法是：语法是： 最常用的单标签是最常用的单标签是, , 它表示换行。它表示换行。 双标签双标签 另一类标记称为另一类标记称为“双标签双标签”，它由，它由“始标签始标签”和和“尾标签尾标签”两部分构两部分构成，必须成对使用，其中始标签告诉成，必须成对使用，其中始标签告诉WebWeb浏览器从此处开始执行该标记浏览器从此处开始执行该标记所表示的功能，而尾标签告诉所表示的功能，而尾标签告诉WebWeb浏览器在这里结束
22、该功能。始标签前浏览器在这里结束该功能。始标签前加一个斜杠（加一个斜杠（/ /）即成为尾标记。）即成为尾标记。 这类标记的这类标记的语法是：语法是： 受标记影响的内容受标记影响的内容/ 例如你想对某段文字的加粗显示，就将此段文字放在例如你想对某段文字的加粗显示，就将此段文字放在 标记中标记中, , 如：如：你要加粗的字你要加粗的字 润惜腥迢必阿算辱雇栓豹锥瑟娃砧韦象盈卖码琉迎航纬婿黑蜜揭釉零失止第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件157.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构
23、文档的结构 (2)HTML (2)HTML的标记的标记 标签属性标签属性 许多单标记和双标记的始标记内可以包含一些属性，标记要通过属性许多单标记和双标记的始标记内可以包含一些属性，标记要通过属性来制作出各种效果。来制作出各种效果。 其语法是：其语法是： 受影响内容受影响内容/ 需要注意的是，并不是所有的标记都有属性；根据需要可以用该标记需要注意的是，并不是所有的标记都有属性；根据需要可以用该标记的所有属性，也可以只用需要的几个属性。在使用时，属性之间没有顺序。的所有属性，也可以只用需要的几个属性。在使用时，属性之间没有顺序。 妖鬼刑涣绑沙格挚皆癣茂虐琶瑚羚茨役蓟产苛洒琴篆饥片楷国梧力禾访院第7
24、章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件167.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 HTML HTML文件以文件以开头，以开头，以结尾。浏览器解释网页代码的起结尾。浏览器解释网页代码的起始标志。始标志。HTMLHTML文件包括头部（文件包括头部（headhead）和正文（）和正文（bodybody）。）。 1)head1)head头部信息头部信息 ：表示这是网页的题头部分，用来说明文件命名和：表示这是网页的题头部分，用
25、来说明文件命名和与文件本身的相关信息。通常这部分标记来声明此网页的默认语言编码、与文件本身的相关信息。通常这部分标记来声明此网页的默认语言编码、关键字、使用软件等，个别的标记产生页面动作，第关键字、使用软件等，个别的标记产生页面动作，第4 4行声明超文本头部行声明超文本头部分结束。在简单的网页中这部分不重要，而较复杂的网页中，比如：用分结束。在简单的网页中这部分不重要，而较复杂的网页中，比如：用CSSCSS样式表、样式表、JavaScriptJavaScript语言等，这部分会相当重要。语言等，这部分会相当重要。 ：网页的标题。标题概括了网页的内容，能迅速：网页的标题。标题概括了网页的内容，能
26、迅速了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，了解网页的大意。在文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。器标题栏中显示的信息只有标题。 在网页的头部代码中，还有另外一种文头标记在网页的头部代码中，还有另外一种文头标记metameta标记标记，基本语，基本语法是：法是：meta http-equiv=。胃截漆号断恐迄镀哺揪峻恩眼癣索陡熬宴袖卖隐皱拼聪芋砾柏澡城网逊谭第7章网页制作与编程基础ppt课件第7章网页制作与编程基
27、础ppt课件177.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 2 2）bodybody文档主体部分文档主体部分 ：是网页的正文部分。：是网页的正文部分。HTMLHTML文件主体标记的格式文件主体标记的格式为：为：body bgcolor=。作为网。作为网页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链格。例如，定义页面
28、的背景图像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表接颜色等，主要属性如表7-17-1所示。所示。 HTML HTML代码在书写时不严格区分大小写，也并不要求在书写时缩代码在书写时不严格区分大小写，也并不要求在书写时缩进，但为了程序的易读性，建议网页设计者使标记的首尾对齐，内进，但为了程序的易读性，建议网页设计者使标记的首尾对齐，内部的内容向右缩进几格。部的内容向右缩进几格。 疆聘橙橇咸聊比据穆奠牡谷括是忠避讳壳神客沪嫡狄瓦豹老傣瞳援癣尾竟第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件187.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1
29、 HTML语言概述语言概述2 2HTMLHTML文档的结构文档的结构 (3)HTML (3)HTML的几个部分的几个部分 2 2）bodybody文档主体部分文档主体部分 表表7-1 BODY7-1 BODY标记属性值标记属性值 理尘丙总洲乃赤呼峻掘丛拍缀眯澳酞梭道廊扫寸潘亢狈饮书行扼讳肩挛首第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件197.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述3 3一个简单的一个简单的HTMLHTML实例实例一个简单的一个简单的HTMLHTML示例示例欢迎光临我的主页欢迎光临我的主页这是我第一
30、次做主页，无论怎么样，我这是我第一次做主页，无论怎么样，我都会努力做好！都会努力做好！涨纬砒蛮净蚊哀揍焊丧贴徊坦层臭熔锄狞娘所缅烙碗业唾玫奄摇抵没予烟第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件207.2 HTML7.2 HTML语言语言 7.2.1 HTML7.2.1 HTML语言概述语言概述4 4HTMLHTML的特点的特点HTMLHTML是独立于平台的，它兼容多平台。是独立于平台的，它兼容多平台。HTMLHTML文件中含有大量的特定标记文件中含有大量的特定标记(tags)(tags)，该标记用于，该标记用于解释如何显示指定的内容。解释如何显示指定的内容。HTMLH
31、TML文件中包含超文本内容，如多媒体信息、文件中包含超文本内容，如多媒体信息、E-mailE-mail地址、数据库查询结果等。地址、数据库查询结果等。HTMLHTML文件是一个有特定标记的、可识别的文件是一个有特定标记的、可识别的ASCIIASCII文本文文本文件，通常文件扩展名为件，通常文件扩展名为.html.html或或.htm.htm。编写一个编写一个HTMLHTML文件不需要特殊的软件，只要有一个字文件不需要特殊的软件，只要有一个字符编辑器就可以完成。符编辑器就可以完成。水害脾溉柒掐喷蛮里窒颗挝承样厩叉愈屹撵射卡石彬妹从鹰狭布娟枝逗伯第7章网页制作与编程基础ppt课件第7章网页制作与编
32、程基础ppt课件217.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1字符的格式化字符的格式化 (1)(1)标题文字标记标题文字标记 标题文字的标题文字的格式为：格式为：Hn align= 标题文字标题文字属性属性align用来设置标题在页面中的对齐方式：用来设置标题在页面中的对齐方式：left（左（左对齐）对齐）right（右对齐）（右对齐）center（居中对齐）（居中对齐）属性属性n用来指定标题文字的大小。用来指定标题文字的大小。N可以取可以取16的整数的整数值，取值，取1时文字最大，时文字最大，6时文字最小时文字最小与用与用定义的网页标
33、题不同，标题格式定义的网页标题不同，标题格式显示在浏览器窗口中，而不显示在浏览器的标题栏中。显示在浏览器窗口中，而不显示在浏览器的标题栏中。师木辫犬土拨坠棚谷汲誊今壤忆键蘑腕嚎罕毒潮懂荆庙吟坎芒亭踢算怎谚第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件227.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1字符的格式化字符的格式化 (1)(1)标题文字标记标题文字标记 设置标题 第1级标题(h1) 第2级标题(h2) 第3级标题(h3) 第4级标题(h4)（居左） 第5级标题(h5)（居右） 第6级标题(h6)（居中） 深醋玉
34、蕾犯纯疼恋蓖许泞沼又规沿片把亩熙鹿椿矣规歧芥贬赂熔抑死舍钨第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件237.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 格式为：格式为：font size= 被设置的文字被设置的文字标记可设定文字的字号（大小）、字体和颜色。标记可设定文字的字号（大小）、字体和颜色。sizesize用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从1 17 7，sizesize取取1 1时最小，取时最小，取7 7时
35、最大。时最大。FaceFace用来设置字体。用来设置字体。ColorColor用来设置文字颜色。用来设置文字颜色。她汲创颅霸烁肚划姿咯膨疏怎境府墒墓压撩森祸缩泼绿辉蒋会诧颊即液镇第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件247.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 1) 1)和和标记都可以设置文字的大小，二者的区标记都可以设置文字的大小，二者的区别见下表别见下表( (当当中的中的sizesize取取7 7时，文字比时，文字比要大要大) )。 2
36、) 2)设置字体：设置字体：在网页设计中要尽量用常见的字体。在网页设计中要尽量用常见的字体。必要必要的罕见字体可以转化为文字图像。的罕见字体可以转化为文字图像。怨王扦誊压休烽赣刘赞形殿浮阵采孩组谆日痈雁迹忧试鹃晰竞采戴俗筹破第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件257.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 3) 3)设置文字的颜色：设置文字的颜色：标记中的标记中的texttext属性，属性，设定整个网页文字的颜色设定整个网页文字的颜色 标记
37、中的标记中的colorcolor属性，属性，设定网页、段落、短语、词或设定网页、段落、短语、词或字的颜色。字的颜色。 与与的优先级，的优先级，标记优先。标记优先。<body>与<font>标记同时对文字颜色进行定义今天天气真好黑色蓝色粉红色祖拭硝则斑歇冬侦酒慕士抒卧封医二调豹突嗡阴蔗满糊尊羔脊袜代确痰奏第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件267.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 3) 3)设置文字的颜色：设置文
38、字的颜色： 颜色可以用相应英文单词或以颜色可以用相应英文单词或以“# #”引导的一个十六进制数代码来表引导的一个十六进制数代码来表示。上例中同时使用了示。上例中同时使用了bodybody的的texttext属性和属性和fontfont的的colorcolor属性来对文字的颜属性来对文字的颜色进行设置，但最后在网页中的文字颜色应该是离文字本身最近的标记色进行设置，但最后在网页中的文字颜色应该是离文字本身最近的标记属性所定义的。另外，在属性所定义的。另外，在titletitle中涉及网页中的特殊替换字符，其字符所中涉及网页中的特殊替换字符，其字符所表示的的含义如下表所示。表示的的含义如下表所示。
39、念指仇钵骚凌魁轨怀听惩梭访诅恃蛙远份祝原询备悬画添中蘑嗓胆插夜凯第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件277.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格1 1字符的格式化字符的格式化 (2)(2)字符格式标记字符格式标记 4) 4)设置字型：设置字型： 字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见下表所示：字型的控制标记见下表所示：柬爷汹懈甲调寥泊拆瞅欧掉钱明直褐熙铡淡姜般各毅卿榜剩芬迁墅七呆滑第7章网页制作与编程基础ppt课
40、件第7章网页制作与编程基础ppt课件287.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (1) (1)强行换行标记强行换行标记 格式为：文字格式为：文字 实例实例1 1：不使用：不使用无换行示例无换行示例登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河入海流。黄河入海流。欲穷千里目，欲穷千里目，更上一层楼。更上一层楼。贾对忙躇凝茵贝磅崎垣母糠捡桨凄撰括燃扭国毋拇淑碧者蠢妆圈辐观枉撅第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件297.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档
41、的格式与风格文档的格式与风格2 2段落格式化段落格式化 (1) (1)强行换行标记强行换行标记 实例实例2：使用：使用后的效果后的效果换行示例换行示例登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河入海流。黄河入海流。欲穷千欲穷千里目，里目，更上一层楼。更上一层楼。租龙卿狙批巾捅普序个戚刀谜蹿汹柜洁给缉业假校殃肌距旭趟涣浅拢孺眺第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件307.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (2) (2) 段落标记段落标记 格式为：格式为：文字文字 实例实例1 1：
42、居中对齐：居中对齐CENTERCENTER段落标签段落标签浣溪沙浣溪沙一曲新词酒一杯，去年天气旧亭一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。台，夕阳西下几时回。无可奈何花落去，无可奈何花落去，似曾相识燕归来。小园香径几徘徊。似曾相识燕归来。小园香径几徘徊。涛娄周逛座塞勋酷躬含厦遏框浆瑞戎芋济脊变联毅揖奈嘘涎米盗截湿滑朝第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件317.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (2) (2)段落标记段落标记 实例实例2 2：参见右图：参见右图段落标签段
43、落标签登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河黄河入海流。入海流。欲穷千里目，欲穷千里目，更上更上一层楼。一层楼。浚雏孝魁灿蒜乃报抉硷勃辰望卞蛆辆奏碱褂孰漓蛮由洋谱褪泄臣臻葛宗楷第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件327.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 (2) (2)段落标记段落标记 文件段落的开始由文件段落的开始由来标记，段落的结束由来标记，段落的结束由来标记。来标记。标记不但能使后面的文字换到下一行，还可以使两段之标记不但能使后面的文字换到下一行，还可以使两段之间多
44、一空行。由于一段的结束意味着新一段的开始，所以使间多一空行。由于一段的结束意味着新一段的开始，所以使用用也可省略结束标记。也可省略结束标记。 一个强制换段标记一个强制换段标记可以看作是两个强制换行标记可以看作是两个强制换行标记。 其中属性其中属性alignalign用来设置段落的对齐方式，可以为用来设置段落的对齐方式，可以为leftleft、centercenter或或rightright，分别表示居左、居中、居右。默认时默认，分别表示居左、居中、居右。默认时默认为为leftleft。 格式为：格式为：文字文字 茨天党杨费粮莎揽窗盯庚逆龋犹碱戌览岩亭吐亡夯佯申觉添妹袁饮藩寂穆第7章网页制作与编
45、程基础ppt课件第7章网页制作与编程基础ppt课件337.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 ( (3) )分区显示标记分区显示标记 格式格式:文本或图象文本或图象 文本块、一段文字或标题在网页上的布局都有文本块、一段文字或标题在网页上的布局都有3 3种方式：左对齐、居种方式：左对齐、居中和右对齐。在标记中使用中和右对齐。在标记中使用alignalign属性，其属性取值分别为：属性，其属性取值分别为：leftleft、centercenter、rightright。可以设置布局的标记有：。可以设置布局的标记有
46、：、。当在许多段落中设置对齐方式。当在许多段落中设置对齐方式时，常使用时，常使用标记。标记。 锑芯剪签理患偷蚤揩成础亥楞疏艳擦栗钱翱挛惠肋驰枯比滩花光篱淤革硅第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件347.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 ( (3) )分区显示标记分区显示标记 实例实例1 1，参照右图，参照右图 分区显示标记的应用分区显示标记的应用 居中居中centercenter居居中中centercenter 居左居左leftleft居左居左leftleft 居右居右rig
47、htright居右居右rightright 矽语砷艇哨堤荣蛛饥倘振崩属透硫禾寇辕驼盎溯裴贞踌歇淮错絮诱风毕申第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件357.2 HTML7.2 HTML语言语言 7.2.2 7.2.2 文档的格式与风格文档的格式与风格2 2段落格式化段落格式化 ( (4) )水平线水平线 格式为：格式为：hr align= noshade align align设定横线放置的位置，其属性取值为：设定横线放置的位置，其属性取值为：leftleft、centercenter、rightright。 Size Size设定线条粗细，以像素为单位，默认为设定
48、线条粗细，以像素为单位，默认为2 2。 Width Width设定线段长度，可以是绝对值或相对值。所谓绝对值，是指线段设定线段长度，可以是绝对值或相对值。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指长度的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为默认值为100%100%，即始终填满当前窗口。，即始终填满当前窗口。 Noshade Noshade设定线条为无阴影，若默认则有阴影或立体效果。设定线条为无阴影，若默认则
49、有阴影或立体效果。 Color Color设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以用设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以用相应英文单词或以相应英文单词或以“# #”引导的一个十六进制代码来表示。引导的一个十六进制代码来表示。具阐遂茶笆徒济框哮量钎截小翰扛贡卒交汰础惨粪惭茄毒知部附嘉垛膨胯第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件367.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(1)(1)插入图形插入图形 格式为格式为：img sr
50、c= 例：例：img src=bj.jpg width=100 height=100 hspace=10 vspace=10 align=middle 设置网页的背景图像、背景颜色可参照设置网页的背景图像、背景颜色可参照BODYBODY标记的相关属性。标记的相关属性。绚吉状僻孩从鲁米谣遗强匿捣荣率莱角伎棠休窘晕猿蒲番荫笔兑馁昼鳃穷第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件377.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(2)(2)插入背景音乐插入背景音乐 1)
51、1)音频标记音频标记能在网页中加入背景声音，能在网页中加入背景声音，格式为格式为：bgsound src=src=your.midsrc=your.mid：设定：设定midimidi档案及路径，可以是相对或绝对。档案及路径，可以是相对或绝对。autostart=trueautostart=true：是否在音乐档下载完之后就自动播放。：是否在音乐档下载完之后就自动播放。truetrue是，是，falsefalse否否（默认值（默认值) )。loop=infiniteloop=infinite：是否自动反复播放。：是否自动反复播放。LOOP=2LOOP=2表示重复两次，表示重复两次，Infinit
52、eInfinite表示重复多次。表示重复多次。要加入的背景声音文件的格式为要加入的背景声音文件的格式为.wav.wav、.mid.mid、.ram.ram等，播放次数为等，播放次数为-1-1时，声音将一直播放直到关闭网页。时，声音将一直播放直到关闭网页。分贾豹掇猩害亦募犁哀划脆疲址着卤瞪孟涪忙毒卉伯凛竹弘揖氓淋啊钓是第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件387.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(2)(2)插入背景音乐插入背景音乐 2)2)使用使用EM
53、BEDEMBED标签嵌入音乐文件标签嵌入音乐文件 使用使用BGSOUNDBGSOUND标签嵌入背景音乐时，当最小化窗口时标签嵌入背景音乐时，当最小化窗口时BGSOUNDBGSOUND就会暂停，就会暂停，为了保证背景音乐的连贯性，建议使用为了保证背景音乐的连贯性，建议使用HIDDENHIDDEN了的了的EMBEDEMBED标签。标签。 src=your.midsrc=your.mid：设定：设定midimidi档案及路径，可以是相对或绝对档案及路径，可以是相对或绝对autostart=trueautostart=true：是否在音乐档下载完之后就自动播放。：是否在音乐档下载完之后就自动播放。tr
54、uetrue是，是，falsefalse否否( (默认值默认值) )loop=trueloop=true：是否自动反复播放。：是否自动反复播放。LOOP=2 LOOP=2 表示重复两次，表示重复两次，truetrue是，是， falsefalse否否hidden=truehidden=true：是否完全隐藏控制画面，：是否完全隐藏控制画面，truetrue为是，为是，nono为否为否( (默认值默认值) )蜘陨发城胡渣蚁善强滑颠斤质沧巴愿审墅埂蛮悟捧啃符鬃李稍杭围面中侩第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件397.2 HTML7.2 HTML语言语言 7.2.3
55、7.2.3 加入多媒体与超级链接加入多媒体与超级链接1 1加入图像、视频、动画加入图像、视频、动画(3)(3)插入视频插入视频 1) 1)用用标记的标记的dynsrcdynsrc属性可以向网页中加入属性可以向网页中加入.avi.avi视频剪辑文件。视频剪辑文件。格式为格式为：img border=BorderBorder：边框大小。：边框大小。SrcSrc：在浏览器尚未完全读入：在浏览器尚未完全读入AVIAVI文件时，先在文件时，先在AVIAVI播放区域显示的图像。播放区域显示的图像。DynsrcDynsrc：指定播放视频文件的路径和文件名。：指定播放视频文件的路径和文件名。LoopLoop：
56、指定播放循环的次数。当为：指定播放循环的次数。当为-1-1时，则反复播放。时，则反复播放。LoopdelayLoopdelay：两次播放的时间间隔。：两次播放的时间间隔。StartStart：指定何时开始播放。：指定何时开始播放。FileopenFileopen是文件打开时，是文件打开时，mouseovermouseover是鼠标是鼠标移到视频文件上时。移到视频文件上时。2)2)插入插入flashflash用用标记，其格式为标记，其格式为embed src= 文件文件边近堰蹲依竞等了供瞧勃醛让钒配趾骆益兜道溜纸俘读嗓皿浴网卜咎漫箔第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt
57、课件407.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接2 2加入超级链接加入超级链接 超链接（超链接（HyperlinkHyperlink）可以看作是一个热点，它可以从当前）可以看作是一个热点，它可以从当前WebWeb页定义的页定义的位置跳转到其他位置，包括当前页的某个位置、位置跳转到其他位置，包括当前页的某个位置、InternetInternet或本地硬盘或局域或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。网上的其他文件，甚至跳转到声音、图片等多媒体文件。 当当WebWeb页包含超链接时，页包含超链接时，WebW
58、eb页中的外观形式为彩色且带下划线的文字或页中的外观形式为彩色且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记示文本或图片时，将变成手形。超文本链接使用锚点标记来定义。来定义。标标记的记的格式为格式为：a href= 热点热点京信柒护指值到攒格畔供咎谤锁亦宜巷摘烽哮翁赃惭乡藉痕轮曰土口傲坊第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件417.2 HTML7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接
59、加入多媒体与超级链接2 2加入超级链接加入超级链接 (1) (1)属性属性hrefhref为超文本引用，它的值为一个为超文本引用，它的值为一个URLURL，是目标资源的有效地址。，是目标资源的有效地址。在书写在书写URLURL时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，应写绝对路径应写绝对路径. . (2) (2)属性属性namename指定当前文档内的一个字符串作为链接时可以使用有效的指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址。目标资源的地址。( (注意：注意：HrefHref不能与不能与nam
60、ename同时使用。同时使用。) ) (3)Target= (3)Target=”_blank_blank”或或Target=Target=”newnew”，将链接打开的空白页面或在，将链接打开的空白页面或在新的浏览器窗口中打开。新的浏览器窗口中打开。 Target= Target=”_parent_parent”，将链接的页面内容，显示在直接父框架窗口中。，将链接的页面内容，显示在直接父框架窗口中。 Target= Target=”_self_self”，将链接的页面内容，显示在当前窗口中（默认值）。，将链接的页面内容，显示在当前窗口中（默认值）。 Target= Target=”_top_
61、top”，将框架中链接的页面内容，显示在没有框架的窗口，将框架中链接的页面内容，显示在没有框架的窗口中。中。 Target= Target=”框架名称框架名称”，只运用于框架中，若被设定则链接结果将显示，只运用于框架中，若被设定则链接结果将显示于该于该“框架名称框架名称”指定的框架窗口中，框架窗口名称是事先由框架标记所命指定的框架窗口中，框架窗口名称是事先由框架标记所命名的，可以理解为程序设计中的变量名称。名的，可以理解为程序设计中的变量名称。啃两卷律操丸夺老而乾婪状赞撅勘郧卉涸澄恳豁乞旬处蒸漏挺野牡裤纶掺第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件427.2 HTML
62、7.2 HTML语言语言 7.2.3 7.2.3 加入多媒体与超级链接加入多媒体与超级链接2 2加入超级链接加入超级链接 (4) (4)创建指向其他页面的链接，就是在当前页面与其他相关页面间建立超创建指向其他页面的链接，就是在当前页面与其他相关页面间建立超链接。无论目标文件与当前文件的目录关系如何，其格式为：链接。无论目标文件与当前文件的目录关系如何，其格式为：a href= (5) (5)创建指向本页中的链接时，需要定义两个标记：一个为超级链接标记，创建指向本页中的链接时，需要定义两个标记：一个为超级链接标记，另一个为书签标记。格式为：另一个为书签标记。格式为：a href=#。书签为该超级
63、链。书签为该超级链接的目标，定义格式为：接的目标，定义格式为：a name=。同理，如果要创建指向。同理，如果要创建指向其他页面中的书签，定义的格式为：其他页面中的书签，定义的格式为：a href=URL/。 (6) (6)在网页中，超级链接还可以指向下载文件和电子邮件。他们的格式分在网页中，超级链接还可以指向下载文件和电子邮件。他们的格式分别为：别为：a href=；a href=mailto (7) (7)图像也可以做为链接指针。格式为：图像也可以做为链接指针。格式为：img src=url，可以看出，用，可以看出，用取代了链接指针中取代了链接指针中texttext的位的位置。置。是图像元
64、素，它表明显示是图像元素，它表明显示urlurl代表的图像文件。代表的图像文件。丝糜莉类脓奄双筷沤韵填识潍瘪赤策梧沸首骚藐培负们掩懂陶恶使尉言乞第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件437.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑1 1表格的基本形式表格的基本形式 表格对于格式化信息有着强大的功能，它能控制各种信息的位置，使表格对于格式化信息有着强大的功能，它能控制各种信息的位置，使得页面结构协调一致，用其他标记不容易做到的文本对齐，只要把文本块得页面结构协调一致，用其他标记不容易做到的文本对齐，只要把文本块放到表格中就行了。
65、任何表格都有放到表格中就行了。任何表格都有三个基本要素：表行、表头和表项三个基本要素：表行、表头和表项，每，每个要素都有自己的标签个要素都有自己的标签 一个表由一个表由开始，开始，结束，表的内容由结束，表的内容由，和和定义，其中：定义，其中：说明表的一个行，表有多少行就有多少个说明表的一个行，表有多少行就有多少个，即定义表行；，即定义表行；说明表的列数和相应栏目的名称，有多少个栏目就有多少个说明表的列数和相应栏目的名称，有多少个栏目就有多少个，即定义表头；，即定义表头；则填充由则填充由和和组成的表格，即定义表项。组成的表格，即定义表项。是否用表格线分开为部分内容用是否用表格线分开为部分内容用b
66、orderborder属性说明。属性说明。撒阀影椅沟奔昆续霜谅怯鄂龟蝎捆逼酞摇跋娶鼓身莉赐悉残欧恭图熏捐潮第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件447.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑1 1表格的基本形式表格的基本形式 实例实例1 1：一个有表格线和一个元：一个有表格线和一个元组的组成的表格，参照右图。组的组成的表格，参照右图。the simplest html the simplest html filefile食品食品饮料饮料水果水果面包面包可乐可乐西瓜西瓜 妆选泽袋曙谤糊跋哨蔽镊值睦哑锌锅膏耍镣铭貌抿诺青购硕浓晶
67、港米变独第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件457.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑2表格的修饰形式表格的修饰形式 (1) (1)有通栏的表有通栏的表 有横向通栏的表用有横向通栏的表用属性说明，属性说明，colspancolspan表示横向栏距，表示横向栏距，# #代表通栏占据的网格数，它是一个小于表的横向网格数的整数。代表通栏占据的网格数，它是一个小于表的横向网格数的整数。 实例实例2 2：下面是一个有表格线和有横向通栏的表格。：下面是一个有表格线和有横向通栏的表格。the simplest html fileth
68、e simplest html file食品食品饮料饮料水果水果面包面包牛奶牛奶可乐可乐西瓜西瓜醛拓件帛揣翱俩驶伪队伞楷节蓄昨蚤爱核谬痉敢此常森沾疡欺速速衡贩烦第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件467.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑2表格的修饰形式表格的修饰形式 (1) (1)有通栏的表有通栏的表 有纵向通栏的表用有纵向通栏的表用rowspan=#属性说明。属性说明。rowspan表示纵向栏距，表示纵向栏距，#表示表示通栏占据的网格数，小于纵向网络数。需要说明的是有纵向通栏的表，每一通栏占据的网格数，小于纵向网络
69、数。需要说明的是有纵向通栏的表，每一行必须用行必须用明确给出一横向栏目结束明确给出一横向栏目结束,这和表格的基本形式是不同的。这和表格的基本形式是不同的。 实例实例3：下面是一个有表格线和有纵向通栏的表格。：下面是一个有表格线和有纵向通栏的表格。the simplest html filethe simplest html file早餐早餐 食品食品面包面包饮料饮料可乐可乐水果水果西瓜西瓜捣冀训翔绪浆愈奔纵予厂钙吝昔踢颤仅拣涂讳困陛恢随泣萄救川滨冶迈碑第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件477.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编
70、辑表格编辑2表格的修饰形式表格的修饰形式 (2) (2)表的大小，边框宽度，表格间距表的大小，边框宽度，表格间距表的大小用表的大小用width=#width=#和和height=#height=#属性说明。前者为表宽，后者为表高，属性说明。前者为表宽，后者为表高，# #是是以象素为单位整数。以象素为单位整数。表格间距即划分表格的线的粗细用标记表格间距即划分表格的线的粗细用标记ellspacing=#ellspacing=#表示，表示，# #的单位是象素。的单位是象素。 (3) (3)表中文本的输出表中文本的输出 文本与表框的距离用文本与表框的距离用cellpadding=#cellpaddin
71、g=#说明。说明。# #的单位是象素。的单位是象素。 表格的宽度大于其中的文本宽度时，文本在其中的输出位置与用表格的宽度大于其中的文本宽度时，文本在其中的输出位置与用align=#align=#说明。说明。# #是是 left left，centercenter和和rightright三者之一，分别表示左对齐，居中和右对齐，三者之一，分别表示左对齐，居中和右对齐，alignalign属性可修饰属性可修饰，和和链接签。链接签。 表格的高度大于其中文本的高度时，可以用表格的高度大于其中文本的高度时，可以用valign=#valign=#说明文本在其中的位说明文本在其中的位置。置。# #是是topt
72、op，middlemiddle，bottombottom，baselinebaseline四者之一。同样，四者之一。同样，valignvalign可以修饰可以修饰，中的任何一个。中的任何一个。颐牺沙妻刊舰闭大症界沼萨隙蓄卢貉磅哮香趁捆荡搏蓖宵甘萍防勿溉挎饭第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件487.2 HTML7.2 HTML语言语言 7.2.4 7.2.4 表格编辑表格编辑2表格的修饰形式表格的修饰形式 (4) (4)表格颜色表格颜色 表格的颜色用表格的颜色用bgcolor=#bgcolor=#指定。指定。# #是是1616进制的进制的6 6位数，格式为位数，
73、格式为rrggbbrrggbb，分，分别表示红、绿、兰三色的分量。或者是别表示红、绿、兰三色的分量。或者是1616种已定义好的颜色名称。种已定义好的颜色名称。 (5) (5)表格标题表格标题 表格可以加上标题。标题的语法格式如下：表格可以加上标题。标题的语法格式如下：，# #可以是可以是leftleft，centercenter和和rightright三者三者之一。之一。宇赚喜掣喳紧科亦妨毕皂斟淌耳泥综郁几傣粟欲刨纸章仔梗提建庸晾艾头第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件497.2 HTML7.2 HTML语言语言 7.2.5 7.2.5 创建框架创建框架1框架的
74、基本结构如下：框架的基本结构如下： 框架可以将浏览器的窗口分成多个区域，每个区域可以单独显示一框架可以将浏览器的窗口分成多个区域，每个区域可以单独显示一个个htmlhtml文件，各个区域也可相关连地显示某一个内容，例如可以将索引文件，各个区域也可相关连地显示某一个内容，例如可以将索引放在一个区域，文档内容显示在另一个区域。放在一个区域，文档内容显示在另一个区域。 . . .中的内容显中的内容显示在不支持框架的浏览器窗口中，因而这里示在不支持框架的浏览器窗口中，因而这里指向一个普通版本的指向一个普通版本的htmlhtml文件，以便使用不文件，以便使用不支持框架浏览器的用户阅读。支持框架浏览器的用
75、户阅读。 框架由框架由指定，并且可以嵌套，指定，并且可以嵌套，分区中各部分显示的内容用分区中各部分显示的内容用指定。指定。frameframe是一个新出现的标记，浏览器并不都是一个新出现的标记，浏览器并不都支持。支持。 可以将窗口横向分成几个部分，也可以可以将窗口横向分成几个部分，也可以分成纵向几个部分，还可以形成混和框架。分成纵向几个部分，还可以形成混和框架。奋墙鹅粘们吹粤妹世济仔姨异恒市饰凰砷豁箕大爆耽杜兴垄零忿苇聊诺劈第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件507.2 HTML7.2 HTML语言语言 7.2.5 7.2.5 创建框架创建框架1框架的基本结构如
76、下：框架的基本结构如下： (1) (1)横向框架横向框架 横向框架用横向框架用指定，指定，# #可以是一个百分数，也可以可以是一个百分数，也可以是一整数。前者规定各框架占窗口的百分数，后者指定各框的绝对大小。是一整数。前者规定各框架占窗口的百分数，后者指定各框的绝对大小。例如，下面的例子将窗口分成例如，下面的例子将窗口分成30%30%、20%20%、50%50%的几个区域，各区域的内容的几个区域，各区域的内容分别为分别为A.htmlA.html，B.htmlB.html，C.htmlC.html。 HTML HTML 语言教程语言教程轴靶弛坪嗜曲涣掀捻贮聋詹哦抉昧乳讣晒簧好作净撑嫌盲殉堕稀晚竹
77、光暇第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件517.2 HTML7.2 HTML语言语言 7.2.5 7.2.5 创建框架创建框架1 1框架的基本结构如下：框架的基本结构如下： ( (2)2)纵向框架：纵向框架用纵向框架：纵向框架用指定，指定，# #含义同上。含义同上。 (3) (3)混合框架混合框架 将窗口分成纵横几个区域时，用将窗口分成纵横几个区域时，用代替代替链接，即可将原来分好链接，即可将原来分好的的区域再次分框，下面的例子先将窗口分成区域再次分框，下面的例子先将窗口分成20%20%，80%80%，然后将右边的区域再，然后将右边的区域再分成分别占分成分别占4
78、0%40%和和60%60%的上下两个区域，如图的上下两个区域，如图7-22 7-22 所示。所示。 (4) 框架与框中文本的间距框架与框中文本的间距 分框与其中的文本间距可以用分框与其中的文本间距可以用Marginwidth=#和和margiheight=#来指定，前者指来指定，前者指定文本与分框的边缘的横向距离，后者为纵向距离，其单位都为象素。定文本与分框的边缘的横向距离，后者为纵向距离，其单位都为象素。HTML HTML 语言教程语言教程蓄威萄敞刨疤冗疮溜克那仁蜜奈虑椿伐鹿呻腰甄烧卫括添廊祭锨附末鬃犬第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件527.2 HTML7
79、.2 HTML语言语言 7.2.5 7.2.5 创建框架创建框架2分框间的关联分框间的关联 框架之间可以有特定的关联，比如将某一框架的内容输出到另一个框架之间可以有特定的关联，比如将某一框架的内容输出到另一个框架中，这样该段文字就可以把其中一个框作为输出框，另一个框作为选框架中，这样该段文字就可以把其中一个框作为输出框，另一个框作为选择框。实现这种关联需要做下列的事情。择框。实现这种关联需要做下列的事情。 (1) (1)在分框的在分框的htmlhtml文件中标记各个框，标记的方法是在文件中标记各个框，标记的方法是在中加入中加入namename属性，比如上例，定义左边的框为索引，右边框为输出。属
80、性，比如上例，定义左边的框为索引，右边框为输出。 (2) (2)在在A.htmlA.html文件中指定输出到哪个框中去的方法是在文件中指定输出到哪个框中去的方法是在A.htmlA.html文件中文件中加入下列一行。加入下列一行。 这便得用鼠标点取这便得用鼠标点取A.htmlA.html中的链接指针，它的输出会显示在右边的中的链接指针，它的输出会显示在右边的框中。框中。娩徽革妮捌拈桅石甘屋走逐亥崩绘捉敌偿柴殷魂丽校莎陕以腰堕蜕集媳竟第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件537.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单 表单在表单
81、在HTMLHTML页面中起着重要作用，它是与用户交互信息的主要手段。页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下内容。用户填写了所需的资料之后，按下“提交提交”按钮，这样所填资料就按钮，这样所填资料就会通专门的接口传到会通专门的接口传到WebWeb服务器上。网页的设计者随后就能在服务器上。网页的设计者随后就能在WebWeb服务器上服务器上看到用户填写的资料，从而完成了从用户到服务提供者之间的反馈和交流。看到用户填写的资料，从而
82、完成了从用户到服务提供者之间的反馈和交流。 一个表单有三个基本组成部分：一个表单有三个基本组成部分： 表单标签表单标签：这里面包含了处理表单数据所用的：这里面包含了处理表单数据所用的CGI(Common Gateway CGI(Common Gateway InterfaceInterface，即通用网关接口，即通用网关接口) )程序的程序的URLURL以及数据提交到服务器的方法。以及数据提交到服务器的方法。 表单域表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。选框、下拉选择框和文件上传框等。
83、表单按钮表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的服务器上的CGICGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。理脚本的处理工作。哇运啼仇笨邯溺今审源陛必狐隘诀卖睛狙斥狮沮撰哩盯献娃伎摘抢锋贴卢第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件547.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单1表单标签表单标签form/form 格式：格式：FORM action=url meth
84、od=get|post enctype=mime target=.FORM action=url method=get|post enctype=mime target=./FORM/FORM 相关属性解释如下：相关属性解释如下： action=url action=url 指定用来处理表单提交的数据的应用程序。它可以是任何指定用来处理表单提交的数据的应用程序。它可以是任何一个有效的一个有效的URLURL，那么用户在表单中输入的信息就会传入那个，那么用户在表单中输入的信息就会传入那个URLURL处。处。 method=get method=get或或postpost，它控制收集信息的传送方式。
85、，它控制收集信息的传送方式。postpost方法可通过方法可通过actionaction所指定的服务程序对表单进行处理；所指定的服务程序对表单进行处理；GETGET方法可将表单的内容作为查方法可将表单的内容作为查询询URLURL中的串来传送，服务器使用中的串来传送，服务器使用QueryStringQueryString集合来存储这些内容。集合来存储这些内容。 Enctype Enctype：指定如何对数据编码，只有在使用：指定如何对数据编码，只有在使用postpost方式时这个属性才适方式时这个属性才适用，而且有唯一的可能值，即默认值用，而且有唯一的可能值，即默认值application/x-
86、www-form-urlencodedapplication/x-www-form-urlencoded。该属性在平时的表单创建中可以不使用。该属性在平时的表单创建中可以不使用。啦珊棕疵启酱沪倍旷跳疑炉浇价其超蜡密磕盯盒做生免困熙蒙傀滔葬纪旭第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件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
87、enctype=mime target=.target=./FORM/FORM TARGET=# TARGET=#，# #可以是下列值：可以是下列值： _blank _blank：在一个新的、无名浏览器窗口调入指定的文档；：在一个新的、无名浏览器窗口调入指定的文档； _self _self：在指向这个目标的元素的相同的框架中调入文档；：在指向这个目标的元素的相同的框架中调入文档； _parent _parent：把文档调入当前框架的父：把文档调入当前框架的父FRAMESETFRAMESET框中；这个值在当前框框中；这个值在当前框没有父框时等价于没有父框时等价于_self_self； _top
88、_top：把文档调入原来的最顶部的浏览器窗口中（因此取消所有其：把文档调入原来的最顶部的浏览器窗口中（因此取消所有其它框架）；这个值等价于当前框架没有子框架时的它框架）；这个值等价于当前框架没有子框架时的_self_self；卸袭婆尧提事卵钠汹肝植绳涡泽挛剃双肚读耽告峨韦懦紫毅嚎在请喀曼品第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件567.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单2 2表单元素表单元素 （1 1）文本框）文本框 文本框是一种让访问者自己输入内容的表单对象，通常被用文本框是一种让访问者自己输入内容的表单对象，通常被用来
89、填写单个字或者简短的回答，如姓名、地址等。来填写单个字或者简短的回答，如姓名、地址等。 格式：格式：input type=text input type=text name=.size=.maxlength=.value=.name=.size=.maxlength=.value=. 属性解释如下：属性解释如下： type=text type=text定义单行文本输入框；定义单行文本输入框； name name属性定义文本框的名称，要保证数据的准确采集，要定属性定义文本框的名称，要保证数据的准确采集，要定义一个独一无二的名称；义一个独一无二的名称； size size属性定义文本框的宽度，单位
90、是单个字符宽度；属性定义文本框的宽度，单位是单个字符宽度； maxlength maxlength属性定义最多输入的字符数；属性定义最多输入的字符数； value value属性定义文本框的初始值；属性定义文本框的初始值；尊世精刮么旱梆逛咒赠绳哪冈心支欧辐序境羊荒攻册擎七宠驰叁考淀获钠第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件577.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单2 2表单元素表单元素 （2 2）多行文本框）多行文本框 格式：格式：TEXTAREA name=.cols=.rows=.wrap=virtualTEXTAR
91、EA name=.cols=.rows=.wrap=virtual/TEXTAREA/TEXTAREA 属性解释如下：属性解释如下： name name：同文本框：同文本框 cols cols：定义多行文本框的宽度，单位是单个字符宽度；：定义多行文本框的宽度，单位是单个字符宽度； rows rows：定义多行文本框的高度，单位是单个字符宽度；：定义多行文本框的高度，单位是单个字符宽度； wrap wrap：定义输入内容大于文本域时显示的方式，可选值如下：定义输入内容大于文本域时显示的方式，可选值如下： 默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下默认值是文本自动换行；当输入
92、内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；一行，而数据在被提交处理时自动换行的地方不会有换行符出现； Off Off用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用滚动，必须用ReturnReturn才能将插入点移到下一行；才能将插入点移到下一行； Virtual Virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；转到下一
93、行，而数据在被提交处理时自动换行的地方不会有换行符出现； Physical Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。，让文本换行，当数据被提交处理时换行符也将被一起提交处理。 胜报泵介婴筛瓮家吱屑祖对巾茅并剖翌浚尚瞬伎婴琢滚仲业倍留椅蔚庸舔第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件587.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单2 2表单元素表单元素 （3 3）密码框）密码框 是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被
94、星号或其它符号代替，而输入的文字会被隐藏。被星号或其它符号代替，而输入的文字会被隐藏。 格式：格式：input type=password name=.size=.maxlength=.input type=password name=.size=.maxlength=. （4 4）复选框）复选框 复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。立的元素，都必须有一个唯一的名称。 格式：格式：INPUT type=checkbox name=. value=.INPUT type=chec
95、kbox name=. value=.麓岿臣邮寇宗袁汽亲刺读儡课弹瓮鸡娶崎缀朽倘哑宏足噪山捣态需炮典缩第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件597.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单2 2表单元素表单元素 （5 5）文件上传框）文件上传框 文件上传框看上去和其它文本框差不多，只是它还包含了一个浏览按文件上传框看上去和其它文本框差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。上传的文件。 在使用文
96、件上传框以前，请先确定你的服务器是否允许匿名上传文件。在使用文件上传框以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置表单标签中必须设置ENCTYPE=multipart/form-dataENCTYPE=multipart/form-data来确保文件被正确编码；来确保文件被正确编码；另外，表单的传送方式必须设置成另外，表单的传送方式必须设置成POSTPOST。 格式：格式：input type=file name=.size=15 maxlength=100input type=file name=.size=15 maxlength=100 属性解释如下：属性解释如下：
97、type=file type=file：定义文件上传框；：定义文件上传框； name name：同文本框；：同文本框； size size：属性定义文件上传框的宽度，单位是单个字符宽度；：属性定义文件上传框的宽度，单位是单个字符宽度； maxlength maxlength：属性定义最多输入的字符数。：属性定义最多输入的字符数。 谨濒旗谆问湾宁扣钠国选耘妓值未拧往晨为番欣陪谬软亏寸面簿败仟谚胖第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件607.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单2 2表单元素表单元素 （6 6）下拉选择框）下拉
98、选择框 下拉选择框允许你在一个有限的空间设置多种选项，下拉选择框中带下拉选择框允许你在一个有限的空间设置多种选项，下拉选择框中带有下拉按钮，单击下拉按钮，出现多个可供选择的选项，用户单击其中的一有下拉按钮，单击下拉按钮，出现多个可供选择的选项，用户单击其中的一项，即可选中。项，即可选中。 格式：格式： select name=.size=.multipleselect name=.size=.multiple option value=.selectedoption value=.selected./option/option . . /select/select 属性解释如下：属性解释如下：
99、 size size：定义下拉选择框的行数；：定义下拉选择框的行数； name name：定义下拉选择框的名称；：定义下拉选择框的名称； multiple multiple：表示可以多选，如果不设置本属性，那么只能单选；：表示可以多选，如果不设置本属性，那么只能单选； value value：定义选择项的值；：定义选择项的值； selected selected：表示默认已经选择本选项。：表示默认已经选择本选项。枣自豫移脯敌么泳询扬畴毗予极莫互销翔祝涌扁怕窃秧秃横糟卢羹税顽营第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件617.2 HTML7.2 HTML语言语言 7.2
100、.6 7.2.6 创建表单创建表单2表单元素表单元素 (7) (7)表单按钮表单按钮 1) 1)提交按钮：提交按钮用来将输入的信息提交到服务器。提交按钮：提交按钮用来将输入的信息提交到服务器。 格式：格式：input type=submit name=.value=.input type=submit name=.value=. 属性解释如下：属性解释如下： type=submit type=submit：定义提交按钮；：定义提交按钮； name name：属性定义提交按钮的名称；：属性定义提交按钮的名称； value value：属性定义按钮的显示文字；：属性定义按钮的显示文字； 2) 2)
101、复位按钮：复位按钮用来重置表单。复位按钮：复位按钮用来重置表单。 格式：格式：input type=reset name=.value=.input type=reset name=.value=. 3) 3)一般按钮：一般按钮用来控制其他定义了处理脚本的处理工作。一般按钮：一般按钮用来控制其他定义了处理脚本的处理工作。 格式：格式：input type=button name=.value=.onClick=.input type=button name=.value=.onClick=. 属性解释如下：属性解释如下： type=button type=button定义一般按钮；定义一般按钮
102、； onClick onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为。属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为。雪桃拉柬貉掀贡坷孕痉沿胆绵毗藉羌惺男丫蕾丈疗鸳窑敲狗哭焊州卞强靡第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件627.2 HTML7.2 HTML语言语言 7.2.6 7.2.6 创建表单创建表单3 3表单综合实例（参见右图）表单综合实例（参见右图）姓名姓名: : 性别性别: :男男女女你喜欢的水果你喜欢的水果: :苹果苹果桔子桔子西瓜西瓜梨梨每个星期你大概会吃多少水果每个星期你大概会吃多少水果: :少于少于1 1公斤公
103、斤11至至3 3公斤公斤多于多于3 3公斤公斤对于吃水果，你的观点是：对于吃水果，你的观点是：多吃水果有利于身体多吃水果有利于身体INPUT TYPE=submit VALUE= 障庆属内抽磺跺肚醒奎昧辕饭疟亨佰瞩氯莽裤役第攫扯蜜鸳韵必巧绕娇饺第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件637.2 HTML7.2 HTML语言语言 7.2.7 7.2.7 列表列表列表可以分为无序列表、有序列表和自定义列表。列表可以分为无序列表、有序列表和自定义列表。 1 1无序列表无序列表无序号列表使用的一对标签无序号列表使用的一对标签是是，每一个列表项，每一个列表项前使用前使用。其结
104、构如下所示：。其结构如下所示：第一项第一项第二项第二项第三项第三项实例实例1 1：结果请查看图：结果请查看图7-217-21无序列表无序列表这是一个无序列表：这是一个无序列表：国际互联网提供的服务有：国际互联网提供的服务有：WWWWWW服务服务文件传输服务文件传输服务电子邮件服务电子邮件服务远程登录服务远程登录服务其它服务其它服务夷问卷矽割讶树恫旋倦讽扦春砧镍救雕害姐升嘘廖滦赁贰凿青栅袖吉印粱第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件647.2 HTML7.2 HTML语言语言 7.2.7 7.2.7 列表列表列表可以分为无序列表、有序列表和自定义列表。列表可以分为无
105、序列表、有序列表和自定义列表。 2 2有序列表有序列表有序列表和无序列表的使用有序列表和无序列表的使用方法基本相同，它使用标签方法基本相同，它使用标签，每一个列表项前，每一个列表项前使用使用。每个项目都有前后。每个项目都有前后顺序之分，多数用数字表示。顺序之分，多数用数字表示。其结构如下所示：其结构如下所示：第一项第一项第二项第二项第三项第三项实例实例2 2：结果请查看图：结果请查看图7-227-22有序列表有序列表这是一个有序列表：这是一个有序列表：国际互联网提供的服务有：国际互联网提供的服务有：WWWWWW服务服务文件传输服务文件传输服务电子邮件服务电子邮件服务远程登录服务远程登录服务其它
106、服务其它服务芜潞哄真碘打附狭肪溯矽烫殷靴曼疽讳意快骤瞬斩堪炕珊福赦熟铸滥芋话第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件657.2 HTML7.2 HTML语言语言 7.2.7 7.2.7 列表列表列表可以分为无序列表、有序列表和自定义列表。列表可以分为无序列表、有序列表和自定义列表。 3 3自定义列表自定义列表除了上述两种列表以外，还可以根据需要自定义列表样式。除了上述两种列表以外，还可以根据需要自定义列表样式。格式为：格式为： 截俏俩置进兆巴翅脑辣慰幼拨推控翌蚤雨启言拣算唯舷藻恿陋馈挞琅菊卒第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件667.
107、2 HTML7.2 HTML语言语言 7.2.8 7.2.8 样式表（样式表（CSSCSS）简介）简介1样式表（样式表（CSS）概述）概述 样式表（样式表（stylesheetsstylesheets）的技术诞生于）的技术诞生于19961996年底，全称是层叠样式年底，全称是层叠样式表（表（Cascading StylesheetsCascading Stylesheets简称简称CSSCSS），它可以对布局、字体、颜色、），它可以对布局、字体、颜色、背景和其它图文效果实现更加精确的控制。使用样式表只通过修改一个背景和其它图文效果实现更加精确的控制。使用样式表只通过修改一个文件就改变大量的网页
108、的外观和格式，使网页的风格统一。使用样式表文件就改变大量的网页的外观和格式，使网页的风格统一。使用样式表的具体优势主要体现在以下几个方面：的具体优势主要体现在以下几个方面：格式和结构分离：格式和结构分离：更好的控制页面全局的能力：更好的控制页面全局的能力：可以制作出体积更小下载更快的网页：可以制作出体积更小下载更快的网页：更快更容易地维护及更新大量的网页：更快更容易地维护及更新大量的网页：氯豁施耀矫着京期押茄稗淹斩黑吭踌景饱观癌奠康艘抒躲黑流红庆由迅碗第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件677.2 HTML7.2 HTML语言语言 7.2.8 7.2.8 样式表
109、（样式表（CSSCSS）简介）简介2 2CSSCSS添加到网页中的方法添加到网页中的方法 (1)(1)链接外部链接外部CSSCSS样式表样式表(2)(2)在在HTMLHTML文档中植入文档中植入CSSCSS样式样式(3)(3)在标记中加入样式在标记中加入样式(4)(4)导入导入CSSCSS样式表样式表(5)(5)用脚本来运用用脚本来运用CSSCSS样式样式铂硕平蹿恬姻杀妖悍眠绦届眶舱绿疯吟邵乐再裙邵刮疽肥惮簿舱象裔拐捣第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件687.3 7.3 脚本语言基础脚本语言基础 7.3.1 7.3.1 脚本语言概述脚本语言概述1 1脚本语言的
110、优势脚本语言的优势 脚本语言作为用来控制网页的控件和对象的一种编程语言的出现，它脚本语言作为用来控制网页的控件和对象的一种编程语言的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力。从而基于种实时的、动态的、可交式的表达能力。从而基于CGICGI静态的静态的HTMLHTML页面被页面被可提供动态实时信息，并对客户操作进行反应的可提供动态实时信息，并对客户操作进行反应的WebWeb页面的取代，脚本正页面的取代，脚本正是满足这种需求而产生的语言。是满足这种需求而产生的语言。 脚
111、本语言是一种非编译语言，直接被浏览器所解释执行，它是一种事脚本语言是一种非编译语言，直接被浏览器所解释执行，它是一种事件型程序，通过捕捉用户在各种浏览器中的行为来触发特定的程序段。件型程序，通过捕捉用户在各种浏览器中的行为来触发特定的程序段。 脚本语言容易使用，在完成小任务方面表现相当出色，比如检查表单脚本语言容易使用，在完成小任务方面表现相当出色，比如检查表单数据它在控制浏览器中的事件和访问，以及操作超文本标记语言元素方面数据它在控制浏览器中的事件和访问，以及操作超文本标记语言元素方面的功能也很强大，深受广泛用户的喜爱的欢迎。的功能也很强大，深受广泛用户的喜爱的欢迎。 钨第巴奖惮段烷绘岂维舒
112、橱甘识副虚汐呻拙术庐堆诧诌河小矿闸拇勒蝎助第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件697.3 7.3 脚本语言基础脚本语言基础 7.3.1 7.3.1 脚本语言概述脚本语言概述2 2脚本语言的使用脚本语言的使用 声明脚本语言有下列声明脚本语言有下列3 3种方法：种方法：在在IISIIS中设置默认的脚本，如未更改设置则为中设置默认的脚本，如未更改设置则为VBScriptVBScript。在程序的第一段加上在程序的第一段加上% language=VBScript%。在程序体中加入对象声明在程序体中加入对象声明。验坏酝概铅坝你库候芥抱谈拘丢巾囊灰郊逮恍鲜憋阵娄混旺型祖播胰
113、棘遍第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件707.3 7.3 脚本语言基础脚本语言基础 7.3.2 VBScript7.3.2 VBScript1 1VBScriptVBScript基本语法基本语法(1)VBScript(1)VBScript不区分大小写。不区分大小写。(2(2服务器端的服务器端的VBScriptVBScript位于位于%中间，即中间，即% VBScript %，也可用，也可用 VBScript VBScript代码代码 脚本如果放在客户端执行，则只需用脚本如果放在客户端执行，则只需用 VBScript VBScript代码代码 (3)(3)程序注
114、释程序注释( (Rem语句来注释、一个单引号字符语句来注释、一个单引号字符 ) )罕泊残康何境黑吻普拎何旧佣氯椭乎池找绿赊鸡靳僻劈蓖雍夕碾雄碱丙勉第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件717.3 7.3 脚本语言基础脚本语言基础 7.3.2 VBScript7.3.2 VBScript2 2VBScriptVBScript编程基础编程基础 VBScriptVBScript实质上是实质上是Visual BasicVisual Basic的子集，因此的子集，因此VBScriptVBScript也有常量、变也有常量、变量和数组。量和数组。常量、变量的命名可以使用数字、字
115、母和下划线等字符，但第一个字常量、变量的命名可以使用数字、字母和下划线等字符，但第一个字母必须是英文字母，中间不能有标点和运算符号，长度不能超过母必须是英文字母，中间不能有标点和运算符号，长度不能超过255255个字个字符。符。常量是拥有名字的数值（字符串和数字），主要为了方便程序的编写。常量是拥有名字的数值（字符串和数字），主要为了方便程序的编写。变量是存有一个值的命名了的内存位置。最好在使用以前先定义。变量是存有一个值的命名了的内存位置。最好在使用以前先定义。VBScriptVBScript还有各种运算符，包括算术运算符，比较运算符，逻辑运算还有各种运算符，包括算术运算符，比较运算符，逻辑
116、运算符和连接运算符。符和连接运算符。VBScriptVBScript有很多现成的继承有很多现成的继承VBVB的函数，主要包括转换函数、输入输出的函数，主要包括转换函数、输入输出函数、字符串函数、日期和时间函数、数学函数、检验函数等。函数、字符串函数、日期和时间函数、数学函数、检验函数等。莆湖精呛骑肇绑嘉搏杏苍天胖功刁高篮凰忍吮竿葵排伪兔静夹挞嗡码右滇第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件727.3 7.3 脚本语言基础脚本语言基础 7.3.2 VBScript7.3.2 VBScript2 2VBScriptVBScript编程基础编程基础 VBScriptVBS
117、cript过程有过程有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 Function End Function Function Function过程调
118、用通过直接引用函数名过程调用通过直接引用函数名( (用在变量赋值语句的右端或用在变量赋值语句的右端或表达式中表达式中) )。珊锋闰邑淋假惰化笑借蘑锦呛税磅尖结礁发乞拈吾藩选方组访囤占独枫且第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件737.3 7.3 脚本语言基础脚本语言基础 7.3.2 VBScript7.3.2 VBScript2 2VBScriptVBScript编程基础编程基础 VBScript VBScript控制语句主要有控制语句主要有条件语句和循环语句。条件语句和循环语句。 条件语句有条件语句有IfThenElseIfThenElse和和Select Ca
119、seSelect 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章网页制作与编程基础ppt课件第7章网页制作与编
120、程基础ppt课件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 = VBScript % 以下
121、循环输出以下循环输出Hello everyone!Hello everyone!字符串字符串, ,字体由小变大字体由小变大for i=1 to 5for i=1 to 5 Hello everyone! Hello everyone! next next %咸脾化搔筹惧甸药睛桨急辰裳劣荔禄龚蛰依秩柴荔尿寺馏拒完折抗筷酞实第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件757.3 7.3 脚本语言基础脚本语言基础 7.3.3 JavaScript7.3.3 JavaScript1 1JavaScriptJavaScript介绍介绍 JavaScript JavaScript是
122、一种新的描述语言，可以被嵌入是一种新的描述语言，可以被嵌入HTMLHTML的文件之中。通过的文件之中。通过JavaScriptJavaScript可以做到回应使用者的需求事件可以做到回应使用者的需求事件 ( (如：如：formform的输入的输入) )而不用任而不用任何的网络来回传输资料，所以当一位使用者输入一项资料时，它不用先传何的网络来回传输资料，所以当一位使用者输入一项资料时，它不用先传给服务器端给服务器端(server)(server)处理，再传回来的过程，而直接可以被客户端处理，再传回来的过程，而直接可以被客户端(client)(client)的应用程序所处理，可以想象成有一个可执行
123、程序在你的客户端的应用程序所处理，可以想象成有一个可执行程序在你的客户端上执行一样。上执行一样。 JavaScript JavaScript与与VBScriptVBScript有很多地方是相通的，不同的是有很多地方是相通的，不同的是JavaScriptJavaScript脚脚本中，对象、属性、方法等命名对大小写敏感，即常量、变量、函数、对本中，对象、属性、方法等命名对大小写敏感，即常量、变量、函数、对象以及保留字的大小写是有区别的。在引用别人的网页特效小程序时，不象以及保留字的大小写是有区别的。在引用别人的网页特效小程序时，不要更改字母的大小写。要更改字母的大小写。 JavaScript Ja
124、vaScript提供了提供了4 4种基本数据类型来处理数字和文本，通过变量来种基本数据类型来处理数字和文本，通过变量来当作存储信息的容器，而且还可以通过表达式以有效和复杂的方法来处理当作存储信息的容器，而且还可以通过表达式以有效和复杂的方法来处理信息。信息。竿掂矢摘噪镜瞪宇宋抗塔常帛婉淀嚷擒通振茧抨尽私赡臀嫡堑岸开刃抹诈第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件767.3 7.3 脚本语言基础脚本语言基础 7.3.3 JavaScript7.3.3 JavaScript2 2JavaScriptJavaScript代码的加入代码的加入 JavaScript JavaS
125、cript的脚本包括在的脚本包括在HTMLHTML中，它成为中，它成为HTMLHTML文档的一部分。它与文档的一部分。它与HTMLHTML标识相结合，构成了一个功能强大的标识相结合，构成了一个功能强大的InternetInternet网上编程语言。网上编程语言。 为了便于程序的解释和调用，应将为了便于程序的解释和调用，应将JavaScriptJavaScript的脚本放在的脚本放在HTMLHTML文档头文档头部，对于小的脚本和简单的页面，它可以直接将部，对于小的脚本和简单的页面，它可以直接将JavaScriptJavaScript脚本加入文档的脚本加入文档的任意位置。也可将任意位置。也可将Ja
126、vaScriptJavaScript程序以扩展名程序以扩展名“.Js”“.Js”单独存放，再利用格式单独存放，再利用格式Script Src=JavaScript Script Src=JavaScript 文件名嵌入在文件的任何位置。例如，文件名嵌入在文件的任何位置。例如，表示在此处调用，表示在此处调用1.js1.js文件。文件。 JavaScript JavaScript的注释如果是一行可以用的注释如果是一行可以用“/”“/”，若是多行则应该用，若是多行则应该用“/*/”“/*/”。 在在HTMLHTML中使用中使用、标识加入标识加入JavaScriptJavaScript语句，这样，语句
127、，这样，HTMLHTML语句和语句和JavaScriptJavaScript语句位于同一个文件中，其格式为语句位于同一个文件中，其格式为卡莽汛耿出刺蔚翔楔骋念铺稻嘿詹铁赋蒙扣亩衫蓬饰野密州碍嗽模昭哲蝉第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件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(De
128、cember 25,2006);var s=var 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( docume
129、nt.write(今天离今天离+s+s+还有还有+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章网页制作与编程基础
130、ppt课件第7章网页制作与编程基础ppt课件787.3 7.3 脚本语言基础脚本语言基础 7.3.3 JavaScript7.3.3 JavaScript3 3使用特效代码使用特效代码 怎样在我的网页中插入代码？只要把这些代码复制，使用怎样在我的网页中插入代码？只要把这些代码复制，使用FrontPageFrontPage时，点击编辑窗口左下角的时，点击编辑窗口左下角的“HTML”“HTML”选项卡即出现源代码窗口，将特效选项卡即出现源代码窗口，将特效代码粘贴进去，保存即可，再在浏览器中打开，你就会看到效果了。代码粘贴进去，保存即可，再在浏览器中打开，你就会看到效果了。 一般来说，除非特别指明，
131、例如，要求插入到一般来说，除非特别指明，例如，要求插入到与与之间。之间。在网页源代码的在网页源代码的与与之间的任何地方插入代码都可以，在表之间的任何地方插入代码都可以，在表格的单元格格的单元格与与之间插入代码，一般不会出错。之间插入代码，一般不会出错。 在网络有大量的在网络有大量的JavascriptJavascript特效和特效和VbscriptVbscript特效，其中有特效，其中有CookieCookie脚脚本，按钮类特效，窗口类特效，导航菜单类，技巧特效类，链接类特效，本，按钮类特效，窗口类特效，导航菜单类，技巧特效类，链接类特效，时间类特效，图片类特效，文字类特效等，集管理与收集于一
132、身，非常时间类特效，图片类特效，文字类特效等，集管理与收集于一身，非常适合网页制作者使用。你只需简单的复制、粘贴，就可以做出很多漂亮适合网页制作者使用。你只需简单的复制、粘贴，就可以做出很多漂亮的网页特效。的网页特效。 腐赫搪砍乞硬绘线芦淳功支铭月恕弧狠妊附连洪箔寡宏购诧蔫十覆查立谜第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件797.3 7.3 脚本语言基础脚本语言基础 7.3.4 7.3.4 脚本与表单的结合脚本与表单的结合1 1对象的引用对象的引用 脚本语言可以看成是面向对象的语言。每个对象都是事先定义好的，都脚本语言可以看成是面向对象的语言。每个对象都是事先定义好
133、的，都有自己的属性、方法和事件。对象是自然界的一类事物。在有自己的属性、方法和事件。对象是自然界的一类事物。在VBScriptVBScript中，中，WindowsWindows、FormForm、DateDate、DocumentDocument等都属于对象。等都属于对象。 属性属性是指一类对象的特征，用于描述一个对象。是指一类对象的特征，用于描述一个对象。方法方法说明对象如何去做。说明对象如何去做。例如：例如：Document.Write(Document.Write(您好您好)就是在显示器输出字符串就是在显示器输出字符串“您好您好”；又如；又如AlterAlter(欢迎欢迎)在新窗口中显
134、示欢迎，其中前头的在新窗口中显示欢迎，其中前头的WindowsWindows一般可以省略。一般可以省略。事件事件是是每个对象可以识别和响应有某些操作行为。程序能对这些事件响应。每个对象可以识别和响应有某些操作行为。程序能对这些事件响应。 例如，打开网页的事件例如，打开网页的事件body onload=alter ，则在打开网页，则在打开网页时显示欢迎；关闭网页的事件时显示欢迎；关闭网页的事件body unload=alter ，则在关闭网，则在关闭网页时显示再见。页时显示再见。 在在WindowsWindows和脚本中有很多已经封装好的对象，称为控件，不同的控件和脚本中有很多已经封装好的对象，
135、称为控件，不同的控件有不同的功能、属性和方法。引用对象的属性和方法必须引用该对象的名称有不同的功能、属性和方法。引用对象的属性和方法必须引用该对象的名称（WindowsWindows对象可以省略），在其后加对象可以省略），在其后加“.”“.”，然后写出要引用的对象和属性。，然后写出要引用的对象和属性。例如按钮例如按钮button button 就是控件，如要引用就是控件，如要引用button button 对象的对象的valuevalue属性，则应该写属性，则应该写成成button.valuebutton.value。服尚遂羽坟迢嫂艰穆催甩下尚孙轨核押雁十锁然魁茅羌像庄旨垃富映触饶第7章网页制
136、作与编程基础ppt课件第7章网页制作与编程基础ppt课件807.3 7.3 脚本语言基础脚本语言基础 7.3.4 7.3.4 脚本与表单的结合脚本与表单的结合2 2表单的事件属性表单的事件属性 事件即是指一系列对页面进行的动作，用于说明用户与事件即是指一系列对页面进行的动作，用于说明用户与WebWeb页交互时页交互时产生的操作。事件属性的值一般为产生的操作。事件属性的值一般为ScriptScript脚本语言的一个函数，函数的功脚本语言的一个函数，函数的功能是执行某一事件。响应某个事件而进行的处理称为事件处理。大多数表能是执行某一事件。响应某个事件而进行的处理称为事件处理。大多数表单控件和标记本
137、身都提供了多个事件属性，当某个触发机制得到满足时，单控件和标记本身都提供了多个事件属性，当某个触发机制得到满足时，这个事件就会触发。这个事件就会触发。 最常见表单事件是最常见表单事件是onsubmitonsubmit用于处理提交表单时所触发的事件，用于处理提交表单时所触发的事件，onresetonreset用于处理用户重置表单这一动作，只适用于表单元素。用于处理用户重置表单这一动作，只适用于表单元素。OnloadOnload与与 OnunloadOnunload用于浏览器载入（关闭）一个窗口或框架时事件发生，适用于用于浏览器载入（关闭）一个窗口或框架时事件发生，适用于BodytBodyt与与F
138、ramesetFrameset元素。凡对鼠标元素。凡对鼠标(onmouse)(onmouse)、键盘、键盘(onkey)(onkey)和鼠标单击和鼠标单击（onclickonclick）、双击（）、双击（ondbclickondbclick）都有相应事件的触发机制。）都有相应事件的触发机制。柬吠核喀卤扦积需鉴水悄境邮庄郑浊妆肤编吊刷雁秘雅撒激剃盔慢琼露词第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件817.4 7.4 动态网页技术动态网页技术7.4.1 7.4.1 网页的动态表现技术网页的动态表现技术1 1FlashFlash技术技术 2 2DHTML(DHTML(动态超
139、文本标记语言动态超文本标记语言 ) ) 3 3VRML(VRML(虚虚拟拟现现实实造造型型语语言言，将将WebWeb信信息息在在一一个个交交互互的的三维空间中表达出来。三维空间中表达出来。) ) 现行的动态网页主要有两大类技术：现行的动态网页主要有两大类技术：网页的动态表网页的动态表现技术现技术与与网页的动态内容技术网页的动态内容技术。前者是网页外观表现技。前者是网页外观表现技术，后者是网页的内容更新技术。术，后者是网页的内容更新技术。计粟敌投格市侵颐谩轴卷诀钝弘摘陈反篙堵盆献性故六渐踌岛窍辫列国吉第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件827.4 7.4 动态网页
140、技术动态网页技术 7.4.2 7.4.2 网页的动态内容技术网页的动态内容技术1 1CGICGI（Common Common Gateway Gateway InterfaceInterface，公公用用网网关关接接口口）是是较较早早用用来来建建立立动动态态网网页页的的技技术术。当当客客户户端端向向WebWeb服服务务器器上上指指定定的的CGICGI程程序序发发出出请请求求时时，WebWeb服服务务器器会会启启动动一一个个新新的的进进程程执执行行某某些些CGICGI程程序序，程程序序执执行行后后将结果以网页的形式再发送回客户端。将结果以网页的形式再发送回客户端。 2 2PHPPHP（Perso
141、nal Personal Home Home PagesPages）是是一一种种服服务务器器端端的的嵌嵌入入HTMLHTML的的脚脚本本语语言言，可以运行于多种平台。可以运行于多种平台。 3 3JSPJSP（Java Java Server Server PagesPages）是是基基于于Java的的技技术术，用用于于创创建建可可支支持持跨跨平平台台 及及 跨跨 WebWeb服服 务务 器器 的的 动动 态态 网网 页页 。 JSP与与 服服 务务 器器 端端 的的 脚脚 本本 语语 言言JavaScriptJavaScript不不一一样样。JSPJSP是是在在传传统统的的静静态态页页面面中中
142、加加入入JavaJava程程序序片片段段和和JSPJSP标记，构成标记，构成JSPJSP页面，然后再由服务器编译和执行。页面，然后再由服务器编译和执行。 4 4ASPASP（Active Active Server Server PagesPages）是是微微软软公公司司提提供供的的开开发发动动态态网网页页的的技技术术，具具有有开开发发简简单单、功功能能强强大大等等优优点点，ASPASP使使生生成成WebWeb动动态态内内容容及及构构造造功功能强大的能强大的WebWeb应用程序的工作变得十分简单。应用程序的工作变得十分简单。 己趁痕趁瞬财穗矣郧材溪迷毅媚何姓漱识岸卑诬藐埂辽懒烩椎谴嫌谜典闯第7
143、章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件837.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述1 1什么是什么是ASPASP 在微软的文件中把在微软的文件中把ASPASP描述为：描述为： “ “一个服务器的脚本环境，一个服务器的脚本环境，在这里可以生成和运行动态的、交互的、高性能的在这里可以生成和运行动态的、交互的、高性能的WebWeb服务器应服务器应用程序用程序” ” 。 从描述中可以看出，从描述中可以看出，ASPASP既不是一种语言，也不是一种开发既不是一种语言，也不是一种开发工具，而是一种技术框架，它能够把工
144、具，而是一种技术框架，它能够把HTMLHTML、脚本、组件等有机、脚本、组件等有机地组合在一起，形成一个能够在服务器上运行的应用程序，并地组合在一起，形成一个能够在服务器上运行的应用程序，并把按用户要求专门制作的标准把按用户要求专门制作的标准HTMLHTML页面回送给客户端浏览器。页面回送给客户端浏览器。其主要功是为生成动态的交互式的其主要功是为生成动态的交互式的WebWeb服务器应用程序提供一种服务器应用程序提供一种功能强大的方法或技术。功能强大的方法或技术。 ASP ASP是一个是一个WebWeb服务器端的开发环境。服务器端的开发环境。 另外，另外，ASPASP还提供了丰富的组件和对象，可
145、以使用第三方控还提供了丰富的组件和对象，可以使用第三方控件来完成复杂的功能。件来完成复杂的功能。 渭寄蕉脯麓与帮隋房卖敖各儒扰裕棚衡哮处谦漾践侩贸层减萌乘称哇软杆第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件847.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述2ASP的工作方式 图图7-237-23访问访问HTMLHTML页面和访问页面和访问ASPASP页面两个过程页面两个过程 诗卞糯柒减彩义启旁浚涧淘舀岩谭睛辞汁鳞坐疑携黑胎键夺番迂老姨茎专第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件857
146、.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述3 3ASPASP语法语法 (1)(1)定界符；定界符；%(2)Script(2)Script标志；标志； ASP ASP可以使用任何可以使用任何ScriptScript语言，只要提供相应的脚语言，只要提供相应的脚本驱动，本驱动，ASPASP自身提供了自身提供了VBScriptVBScript和和JscriptJscript的驱动。它的驱动。它缺省的缺省的ScriptScript语言是语言是VBScriptVBScript，当然开发者也可以改变，当然开发者也可以改变这一缺省设置，例如要改为这
147、一缺省设置，例如要改为JavascriptJavascript，只需在文件开，只需在文件开头注明头注明% % Language=JavaScript%Language=JavaScript%就可。就可。( (SCRIPTSCRIPT和和/SCRIPT/SCRIPT) ) (3)HTML(3)HTML标记；标记； 在在ASPASP文件中同样可以包含文件中同样可以包含HTMLHTML语言的各种表达。语言的各种表达。 毗剿仙瘤破饿涸桓眷稿赤誉穆铁我深铃裙桓呼鸥店筑今岗痴迅醉纯杖滔叮第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件867.5 ASP7.5 ASP与数据库应用实例与数
148、据库应用实例 7.5.1 ASP7.5.1 ASP概述概述4 4ASPASP的内置对象的内置对象 ASPASP共有以下六个内置对象：共有以下六个内置对象：(1)Request(1)Request对象对象：用于访问任何基于：用于访问任何基于HTTPHTTP请求传递的所有信息，包括从请求传递的所有信息，包括从HTMLHTML表单用表单用POSTPOST或或GETGET方法传递参数、方法传递参数、CookieCookie和用户认证。和用户认证。(2)Response(2)Response对象对象：用来控制发送给用户的信息，包括直接发送信息给：用来控制发送给用户的信息，包括直接发送信息给浏览器、重定向
149、浏览器到另一个浏览器、重定向浏览器到另一个URLURL和设置和设置CookieCookie的值。的值。(3)Server(3)Server对象对象：用来实现对服务器上的方法和属性的访问。：用来实现对服务器上的方法和属性的访问。(4)Application(4)Application对象对象：用来实现在给定应用程序的所有用户之间共享信：用来实现在给定应用程序的所有用户之间共享信息，并在服务器运行期间一直保存数据。息，并在服务器运行期间一直保存数据。 (5)Session(5)Session对象对象：用来实现存储特定用户会话所需的信息。：用来实现存储特定用户会话所需的信息。(6)Object Co
150、ntext(6)Object Context对象对象：用于在页面内进行事务处理。：用于在页面内进行事务处理。慰掠眨脂爬革农币彬彤哩俺丸碟捡钉唱拜烹瞻甥跋悲迹记筐汀氢脊斜英朽第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件877.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述5 5服务器组件服务器组件 应用应用ASPASP服务器组件（服务器组件（ActiveX Serve ComponentsActiveX Serve Components）可以使用户）可以使用户很方便地使用设计好的程序制作动态网页。很方便地使用设计好的
151、程序制作动态网页。ASPASP有以下内置服务器组有以下内置服务器组件：件：(1)(1)文件存取组件（文件存取组件（File Access ComponentFile Access Component）(2)(2)访客计数器组件（访客计数器组件（Page Counter ComponentPage Counter Component）(3)(3)广告翻转器组件（广告翻转器组件（Content Rotator ComponentContent Rotator Component）(4)(4)浏览器描述组件（浏览器描述组件（Browser Capabilities ComponentBrowser
152、Capabilities Component）(5)(5)内容连接组件（内容连接组件（Content Linking ComponentContent Linking Component）(6)(6)数据库存取组件（数据库存取组件（Data Object ComponentData Object Component）(7)(7)电子邮件组件（电子邮件组件（Email ComponentEmail Component）栋褪衬锥兆锰残抵莲述驴花目己卒卉读襟荔主喇园默深捶完觉割愚甄蹭罕第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件887.5 ASP7.5 ASP与数据库应用实例
153、与数据库应用实例 7.5.1 ASP7.5.1 ASP概述概述6 6利用实现数据库的访问利用实现数据库的访问 ASP ASP与与ADOADO（ActiveDataObjectActiveDataObject）可实现数据库的查询服）可实现数据库的查询服务。首先利用务。首先利用HTMLHTML的的FORMFORM标签建立查询信息入口，输入用户标签建立查询信息入口，输入用户的请求，服务器从的请求，服务器从HTTPHTTP得到用户的请求，在服务器端执行得到用户的请求，在服务器端执行SQLSQL语言完成相应的数据库操作，语言完成相应的数据库操作，ADOADO可以完成连接支持可以完成连接支持ODBCODB
154、C的多种数据库，如：的多种数据库，如：OracleOracle、FoxProFoxPro、SQLServerSQLServer、InformixInformix等，以实现对数据库的访问要求，然后将访问的结等，以实现对数据库的访问要求，然后将访问的结果以果以HTMLHTML文本的形式返回用户浏览器端。文本的形式返回用户浏览器端。 ADO ADO在访问数据库之前，必须先建立数据源，设置在访问数据库之前，必须先建立数据源，设置DNSDNS，连接并打开相应的数据库，然后使用连接并打开相应的数据库，然后使用SQLSQL命令完成相应的任命令完成相应的任务，再用务，再用ASPASP语句返回结果。语句返回结果
155、。简笺逗吨舵每拉颇诵垫毕汗笛拌粘毅渔肄续蜀嘲邵荔犁吃舱埔淀扦妻浩生第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件897.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.2 Web7.5.2 Web数据库基础数据库基础1 1WebWeb数据库的概述数据库的概述 数据库是指按照一定的结构和规则组织起来的相关数据的集合，是存数据库是指按照一定的结构和规则组织起来的相关数据的集合，是存放数据的放数据的“仓库仓库”，据此将网络数据库定义为以后台数据库为基础的，加，据此将网络数据库定义为以后台数据库为基础的，加上一定的前台程序，通过浏览器完成数据存储、查询等操作的系
156、统。上一定的前台程序，通过浏览器完成数据存储、查询等操作的系统。 数据库技术是计算机处理与存储数据的最有效、最成功的技术，而计数据库技术是计算机处理与存储数据的最有效、最成功的技术，而计算机网络的特点是资源共享，因此数据与资源共享这两种技术的结合即成算机网络的特点是资源共享，因此数据与资源共享这两种技术的结合即成为今天广泛应用的为今天广泛应用的WebWeb数据库（也叫网络数据库）。数据库（也叫网络数据库）。 一个一个WebWeb数据库就是用户利用浏览器作为输入接口，输入所需要的数数据库就是用户利用浏览器作为输入接口，输入所需要的数据，浏览器将这些数据传送给网站，而网站再对这些数据进行处理，例如
157、，据，浏览器将这些数据传送给网站，而网站再对这些数据进行处理，例如，将数据存入后台数据库，或者对后台数据库进行查询操作等，最后网站将将数据存入后台数据库，或者对后台数据库进行查询操作等，最后网站将操作结果传回给浏览器，通过浏览器将结果告知用户。网站上的后台数据操作结果传回给浏览器，通过浏览器将结果告知用户。网站上的后台数据库就是库就是WebWeb数据库。数据库。 拘歪窜尼旷砂茹简害主番扑捞镣屯堡募厘虹缄奄缉惹千管户尾锥栈哼伐睁第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件907.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.2 Web7.5.2 Web
158、数据库基础数据库基础2 2几种常用几种常用WebWeb数据库的比较数据库的比较 当前比较流行的当前比较流行的WebWeb数据库主要有：数据库主要有：SQL ServerSQL ServerMySQLMySQLOracleOracle娱吝瑚歧鸭蜀逸压掣逝到德钎碴劲轻培洼羚帽准毯一助方脾头凶嫂捕议款第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件917.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.3 ASP7.5.3 ASP访问数据库实例访问数据库实例1 1常用数据库语句常用数据库语句 SELECT SELECT 语句：命令数据库引擎从数据库里返回信息，作
159、为一组记录。语句：命令数据库引擎从数据库里返回信息，作为一组记录。INSERT INTO INSERT INTO 语句：添加一个或多个记录至一个表。语句：添加一个或多个记录至一个表。UPDATE UPDATE 语句：创建更新查询来改变基于特定准则的指定表中的字段值。语句：创建更新查询来改变基于特定准则的指定表中的字段值。DELETE DELETE 语句：创建一个删除查询把记录从语句：创建一个删除查询把记录从 FROM FROM 子句列出并符合子句列出并符合 WHERE WHERE 子句的一个或更多的表中清除。子句的一个或更多的表中清除。EXECUTE EXECUTE 语句：用于激活语句：用于激
160、活 PROCEDURE PROCEDURE（过程）（过程）邑煽回茄伪池型选夷躬氟焕话晓幂乳是耿魏诬遍钾城撂凉响叙迢季杯匈豹第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件927.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.3 ASP7.5.3 ASP访问数据库实例访问数据库实例2 2建立数据库建立数据库(test.mdb )(test.mdb )3 3连接数据库连接数据库 方法方法1 1：Set conn = Server.CreateObject(ADODB.Connection)Set conn = Server.CreateObject(ADOD
161、B.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.CreateObject(ADODB.Connection)Set conn = Server.CreateObject(ADODB.Connection)conn.Open conn.Open Provide
162、r=Microsoft.Jet.OLEDB.4.0;DataSource=&Server.MapPath(teProvider=Microsoft.Jet.OLEDB.4.0;DataSource=&Server.MapPath(test.mdb)st.mdb)注意：一个页面中，只要连接一次就可以了，使用完后要及时关闭连接。注意：一个页面中，只要连接一次就可以了，使用完后要及时关闭连接。conn.Closeconn.CloseSet conn = NothingSet conn = Nothing帖讲源牙舷款球镁倡铅轮旨野袄烁嫉贼契骤饼碌狗妖族辱电防凯挨藉感室第7章网页制作与编程基础ppt课件
163、第7章网页制作与编程基础ppt课件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=Microsoft Access Driver conn.Open driver=Microsoft Access Driver (*.mdb);dbq=&Serve
164、r.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 into test (username,usermail,indata) values(&username&,&usermail&,&indate&)values(&user
165、name&,&usermail&,&indate&)conn.Execute(sql)conn.Execute(sql)conn.Closeconn.CloseSet conn = NothingSet conn = Nothing凡遭钾娇糙欠姐买抖枉粗必娜峪辆嘻沏策臣垄漓酥彤薪翘泣五磊悼肤倘隅第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件947.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.3 ASP7.5.3 ASP访问数据库实例访问数据库实例5 5选择数据库里的记录选择数据库里的记录( (记录集记录集) ) Set conn = Server.C
166、reateObject(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)sql = select * from testsql = select * from testSet rs = Server.Cre
167、ateObject(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：& rs(usermail) & rs(usermail) &查看：查看：& rs(view) & rs(view) &次次& & rs(in
168、date) &rs(indate) &加入加入rs.MoveNextrs.MoveNextLoopLooprs.Closers.CloseSet rs = NothingSet rs = Nothingconn.Closeconn.CloseSet conn = NothingSet conn = Nothing眼受呻象毋木犹涯茸烬戊奉惶蔫粗箭曾态掳孰梳乏釜锑马含馋驻琉讲唬纬第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件957.5 ASP7.5 ASP与数据库应用实例与数据库应用实例 7.5.3 ASP7.5.3 ASP访问数据库实例访问数据库实例6 6修改（更新）数据库
169、记录修改（更新）数据库记录 修改记录的修改记录的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.MapPath(test.mdb)(*.mdb);dbq=&Server.MapPath(test.mdb)ID = 1ID
170、= 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 = Nothing恳窥湾运哉姬黔炔惋唤汲浴锗僳淹妮轧殊涕真皂秆萨良汞率吞映扰哀被仁第7章网页制作与编程基础ppt课件第7章网页制作与编
171、程基础ppt课件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.Open driver=Microsoft Access Driver (*.mdb);dbq=&Se
172、rver.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边蒂脉名釉肯啄馈蛊酷抱蕴赐晨悟疼烽螟橡锌氏懦睬傅注衍御傈吾摹携福第7章网页制作与编程基础ppt课件第7章网页制作与
173、编程基础ppt课件97本章小结本章小结 WebWeb网站是由许多网页和其他相关文件组成的集合，制作网页的网站是由许多网页和其他相关文件组成的集合，制作网页的基础是基础是HTMLHTML语言。而网页制作工具的选择与使用可以使得网页制作更语言。而网页制作工具的选择与使用可以使得网页制作更加方便与快捷。本章首先简单介绍目前流行的几种常用网页制作工具，加方便与快捷。本章首先简单介绍目前流行的几种常用网页制作工具，如如MicroSoft FrontPage 2003MicroSoft FrontPage 2003、Dreamweaver MX 2004Dreamweaver MX 2004等，接着详细等
174、，接着详细介绍网页制作的基础介绍网页制作的基础HTMLHTML语言，包括语言，包括HTMLHTML语言中的各种常用标记的用语言中的各种常用标记的用法和示例。脚本语言作为用来控制网页的控件与对象的一种编程语言法和示例。脚本语言作为用来控制网页的控件与对象的一种编程语言的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力。本章介绍了两而是实现了一种实时的、动态的、可交式的表达能力。本章介绍了两个常用脚本语言个常用脚本语言(VBScript(VBScript和和JavaScript)JavaScript)。动态网页技术的产生与发。动态网页技术的产生与发展，改变了传统的网站与网页，不仅仅是网页的外观变化，更重要的展，改变了传统的网站与网页，不仅仅是网页的外观变化，更重要的是用户与网站之间的交互。本章介绍了动态网页技术的分类与相关技是用户与网站之间的交互。本章介绍了动态网页技术的分类与相关技术。最后通过实例来介绍术。最后通过实例来介绍ASPASP与与WebWeb数据库的应用。数据库的应用。 痈玄疗拽翼子裙煮翘豺战淖请人耿耻坪匪撑描宠掐垒褂播狭咕咆头擂嫌扬第7章网页制作与编程基础ppt课件第7章网页制作与编程基础ppt课件
