Web数据库存基础教程.pptx

单击此处编辑母版标题样式,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,#,单击此处编辑母版文本样式,第二级,第三级第四级,第五级,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,Web,数据库存基础教程,1,认识,Web,数据库,内容简介：,本章主要讲述了什么是,Web,数据库，学习,Web,数据库需要掌握的各种工具和技能，以及,Web,数据库的开发环境。,1-1 Web,数据库概述,定义：,Web,数据库，即网络数据库又称网站数据库、网页数据库。简单地说，就是用户利用浏览器作为输入界面，输入必要的数据，浏览器将这些数据传送至网站，网站再对输入的数据进行处理，并将执行后的结果返回给浏览器，再通过浏览器将最终的执行结果提交给用记。,1-1-1,概述,Web,数据库公式：,Web,数据库（,Web DB,）,=,因特网,+,数据库 即：,Web DB=Internet+DB,客户机与服务器的交互示意图,1-1-2,发展经历,1945,年,Vannevar Bush,提出了超文本文件的格式。,1965,年,Ted Nelson,第一次使用“超文本”一词来形容这种管理信息系统。,1967,年，世界上第一个能真正运行成功的“超文本编辑系统”。,1969,年，美国国防部高级研究计划署建立了阿帕网，该网络最成功的技术就是,TCP/IP,协议。,1990,年美国国防部正式取消了原来的阿帕网，代之以美国国家科学基金会管理的互联网。,1995,年以后，原本只限于一小部分人使用的互联网逐步向大众公开。,80,年代末，在欧洲,Berners-Lee,使用超文本为中心的管理方式来组织网络上的资料，提出建立、存取与浏览网页的方法；建立超文本标记语言；设计超文本传输协议用于获取超链接文件；使用统一资源定位器来定位网络文件、站点或服务器。,1992,年，,Mark Andreeseen,设计出世界上第一个,WWW,上最著名的搜索引擎“雅虎“。,1997,年,12,月万维网联盟发布了,HTML4.01,版。,1-1-3,使用,Web,数据库的基本概念,网络给我们带来了无限精彩的世界，而早期开发的数据库基本上都是基于本地机的，对数据的查询、更改等操作均在单机上完成，它无法带给我们一种无地域限制的享受。现在我们将要学习的,WEB,数据库可以通过编写,ASP,程序，利用,ADO,对象，调用,ODBC,或,OLE DB,驱动程序等。,图,1-2,给出该过程的示意图,图,1-2,访问,WebDB,过程示意图,1-1-4 ASP,、,ADO,和,Web,数据库的关系,ASP,的出现代表,Web,技术的重要进步。,ASP,是通过一组,ADO,对象模块访问数据库，无论采用,Access,、,SQL Server,、,Visual FoxPro,、,Informix,、,Oracle,、,dBase,或其他什么数据库，只要该数据库具有与之对应的,ODBC,或,OLE DB,驱动程序，,ADO,对象就能对其进行访问。,本系统可以使用,Access,、,SQL Server,、,Oracle,等,3,种数据库从事,ASP,网络数据库设计。,图,1-4,、图,1-5,图,1-4,访问多种数据库的示意图,图,1-5,查看用户系统中已安装的驱动程序,1-2 Web,数据库的开发环境,软件配置：,操作系统,Microsoft Windows 2000 Server,字处理软件,Microsoft Word 2000,浏览器,Microsoft Internet Explorer 5.0,以上,网页设计软件,Microsoft FrontPage 2000,ASP,编辑调试工具,Microsoft Visual InterDev 6.0,服务器软件,Internet Information Server 5.0,数据库存软件,Microsoft Access 2000,硬件配置,只要用户的电脑安装和配置了上述软件，且能正常运行。,1-3,小结,本书以丰富的实例为用户创建了一个学习,Web,数据库的轻松环境，引导和帮助用户学习和掌握,Web,数据库的基本技术，使用户循序渐进地掌握,HTML,、,VBScript,、,ASP,、,ADO,和,Web,数据库（,WebDB,）的设计、开发、并基本掌握,CSS,、,FrontPage,、,Visual InterDev,等的使用。,2 Web,数据库的基石,内容简介：,本章将重点学习超文本文件的应用、超文本文件的基本结构、语法和基本标记，了解层叠样式表,CSS,的基本使用方法和可扩展标记语言,XML,的作用。,Web,数据库能得到广泛的认同和快速的发展，其根本原因之一就是轲构在超文本标记语言之上。超文本标记语言是网络上用于发布信息的首选语言，最早应用于网页制作，是我们开发、研究,Web,数据库的开发和形容，在学习,VBScript,、,ASP,等以前很有必要去了解和掌握它。超文本标记语言比较简单，通过本单的介绍和实际操作相信用户很快就可以掌握。,例,2.1,是我们的第一个超文本标记语言程序。,例,2.1,认识用超文本标记语言书写的程序,例,2.1,认识用超文本标记语言书写的程序（,L2-1.htm,）。,超文本标记语言源程序,读书人有三个意境,昨夜寒风凋碧树，独上高楼，望断天涯路。,衣带渐宽终不悔，为伊消得人憔悴。,众里寻她千百度，蓦然回首，那人却在灯火阑珊处。,昨夜寒风凋碧树，独,衣带渐宽终不悔，为伊消得人憔悴。,众里寻她千百度，蓦然回首，那人却在灯,2-1,从纯文本文件到超文本文件,众所周知，扩展名,.txt,的文件是纯文本文件。那么制作网页最简单的方法，就是将已有的纯文本文件的扩展名更改为,.htm,或,.html,。这样的纯文本文件将被浏览器识别和解释，并显示在屏幕上。,2-1-1用记事本制作网页,选择,Windows,的,【,附件,】,，打开,【,记事本,】,，在上面任意写上一串字符,“,XYZ,”,。单击菜单栏中的,【,文件,】【,另存为,】,设文件名为,File.htm(,注意，扩展名必须是,.htm/.HTM,或,.html/.HTML,大小写字母可以混用,),再用,IE,浏览器打开,.,在,IE,浏览器的主窗口就会显示出刚刚输入的字符串,“,XYZ,”,。就这么简单，它就是你的第一个网页。这种用记事本编辑超文本的方法，往往是,Web,程序员最简单、最直接的方法。,2-1-2,用,Word 2000,制作网页,在,Word,的窗口中输入字符串，如：,9876,单击菜单栏中的,【,文件,】【,另存为,Web,页,】,取名（如：,File2.htm,）后，单击,【,保存,】,按钮。再用,IE,浏览器打开,File12.htm.,在,IE,浏览器下你将看到刚刚输入的字符串：,9876,。这就是你的第二个网页。,注意：也可以在,Word,下编辑,HTML,文件，但存盘时应以文本文件的格式保存，如选择,“,纯文本,”,格式等。,2-1-3,用,IE,浏览器制作网页,打开浏览器，使用,“,空白页,”,（用鼠标单击,IE,浏览器菜单的,【,工具,】【Internet,选项,】,单击,【,使用空白页,】,按钮,单击,【,应用,】,按钮,单击,【,确定,】,按钮关闭）,单击菜单栏,【,查看,】【,源文件,】,将弹出,“,记事本,”,窗口,如图,:,浏览器下弹出的“记事本”,2-1-4,用,FrontPage 2000,制作网页,进入,FrontPage 2000,，出现“,new_page_1.htm”,页面，单击左下方的,HTML,标签，在蓝色字体,与,之间（当然也可以在其他位置）任意位置处输入一串字符（如,图,2-3,所示），保存为,File4.htm,运行,File4.htm,，输入的字符串立即显示在屏幕上。这就是所要的第四个网页。,HTML,不是程序语言，而是一种文字处理语言。它包含用来控制文字、图片等在浏览器中的表现，以及如何建立文件之间链接的标记，这些标记均放在文本格式的文件中。,图,2-3 FrontPage 2000,的,HTML,标签页,FrontPage 2000,的,HTML,标签页,2-2,超文本标记语言的语法,超文本标记语言,HTML,是标记的集合，是标准通用标记语言（,Standard Generalize Markup Language,SGML,）的一个子集。被一对尖括号“,”,括起来，标记一般成对出现。网页的内容和各种标记的有机结合就构成了千姿百态的网页“世界”。,标记（,Tags,）和属性（,Attributes,）构建了,HTML,的语法。浏览器只要读到,HTML,的标记和属性，就会将其解释成网而或网页的某个组成部分。它的基本构成如下：,1.,标记：标记就是给文档中某些具有特殊含义的部分作上标识的过程，标记的符号（,等）（常简称标记或标识），是该过程折具体实现。,HTML,标记通常分为两种，一种用来识别网页上的组件或描述组件的样式，如网页的主体（,）、网页的标题,(),、标题一,(),、标题二,(),、段落,(),、斜体,(),、粗体（,）等；另一种用来指出其他资源，如,用来识别网页内的位置或超链接、,用来连接音乐文件、,用来插入图片等。,2.,属性：属性是存储属性值的变量。,HTML,中的许多标记都含有提供相关信息属性。如：设置文档的第,1,级标题文字，位置居中，文字为红色。其例句如下：,标题字符尺寸、位置与颜色,起 空 属 值 空属 值 内 结,始 格 性 格性 容 束,标 标,记 记,3.,值：属性通常含有一个值（,Value,），该值应在规定的区域内选取。,4.,嵌套标记：根据网页版式设计的要求有时需用一个以上的标记来表示页面的数据。,5.,空格符：,HTML,标记间多余的空格符或回车符，浏览器是不理会的。如下页图,2-4,6.,特殊字符：在,HTML,语言中定义了一些用户不能直接从键盘输入的特殊字符，如：字符（,&,）、双引号,(“”),、小于,(),、空格符等，它们不能直接用于,HTML,文档在浏览器中的显示。,HTML,语言要求其输入的对应符号分别为：,%amp;,和,。,图,2-3,排列整齐的源代码,2-3,超文本标记语言的基本结构,一般将,HTML,语言的文件分为三个部分，它们是：,HTML,的版本声明，即序（,Prologue,）,头部（,Head,）,文件主体,(Body),HTML,语言文件的主要部分是头部和文件主体。,HTML,语言的基本结构,HTML,语言的基本结构如下：,基本结构样板程序,!-HTML,的,部分从这里开始,-,这里是基本结构样板程序的,HTML,正文。,!-HTML,的,部分在这里终止,-,2-4,超文本标记语言的标记简介,1.,基本标记（,Basic Tags,）,2.,文本、字符格式（,Text&Char Format,）,3.,列表标记（,Lists,）,4.,锚与超链接（,Anchor and Hyperlink,）,5.,表格,(Tables),6.,表单（,Forms,）,1.,基本标记（,Basic Tags,）,1.,定义超文本文档，描述,Web,页面的起始与终止。,2.,设置页面的头标部分，用来包含当前文档的一些相关信息。,3.HTML,文档均应该包含,标记，用来指明文件的标题。,4.,放置,Web,页面的正文内容，包含文件内的文字、超链接文字的颜色、背景色彩、图片、动画、影像、音效等几乎所有对网页的展示功能。,5.,用来介绍与文件内容相关的信息。,6.,设置链接的基准路径，该标记可以大大简化网页内超链接的全路径，这里只要给出相对于,Base,原指定的基准地址的相对路径即可。,2.,文本、字符格式（,Text&Char Format,）,1.,标题文字（,n=1,6,）从,到,共有,6,种标题标记来标记标题文字。如,图,2-6,2.,换行标记，单标记。,3.,定义段落（分段），常用双标记，也可用单个标记。如,图,2-7,4.,在,之间的内容将以预格式化的文本方式显示，包括回车换行以及跳格等。,5.,可以作为文本与文本之间的分界标记，通常是一个全宽的水平线。如,图,2-7,中的全宽水平线。,6.,字符格式：,黑体,斜本,下划线,强调,加粗,定义等宽字体,定义上标,定义下标7.,字体：,改变字符串的字体、尺寸与颜色,变更网页默认字体、尺寸与颜色,3.,列表标记（,Lists,）,1.,定义列表（,Definition List,）,设置定义列表的标记；,设置定义列表的项目；,设置定义列表的项目说明；,设置紧密排列的定义列表,2.,无序号列表（,Unordered List,）如,图,2-8,3.,有序号列表（,Ordered List,）如,图,2-8,4.,锚与超链接（,Anchor and Hyperlink,）,锚（,Anchor,）,是用来建超链接标记的，这两个,Anchor,分别称为超链接的头和尾。,Anchor,由,Anchor,地址识别，,Anchor,地址是一个完全的统一资源标记（,Universal Resource Identifiers,URI,）。通常使用,HREF=“URL”,属性来指定超链接所链接文件的相对或绝对位置。,注：,URL,即,Uniform Resource Locator,通常称它为统一资源定位器，它只是,URI,更一般的资源命名方案的一个子集。,5.,表格,(Tables),常用表格来精确定义页面文本或图片等的排版格式。,用来定义一个表格。,表格内数据,表格行,给出表格的标题。,6.,表单（,Forms,）,表单的作用与表格完全不同，它是程序设计者提供一种让用户填写的,HTML,文件，用户填好表单后，按需要提交或放弃。,表单的一般标记有：,（,1,）,交互式表单；,（,2,）,输入表单控件；,（,3,）,菜单类控件中的可选项，在,中使用；,（,4,）,菜单类控件；,（,5,）,多行文本域。,图,2-6,标题文字字体,图,2-8,无序号和有序号列表,图,2-7,显示分段、换行页面,2-5 CSS,简介,层叠样式表（,Cascading Style Sheets,CSS,）由,WWW,标准化组织制定，主要用来定义网页字符数据的处理，包括：字符的格式化、显示、编排、打印和特殊效果等，以此来弥补,HTML,标记在数据处理上的不足。本书介绍了在,HTML,中使用,CSS,的四种方法：,1.,直接在,HTML,语句中插入,CSS,的定义，用户可将它们放进,中试一试,:,取消下划线,超链接有下划线,CSS,有许多类似,HTML,的地方，如被定义的值由英语字母、数字、减号、小数点所组成，则双引号可以省略等。但,CSS,增加了很多功能，如进入或退出页面时的多种变化（如下两句，更多详细情况可,表,2-1,）,取 值,功能（进入）,功能（退出）,0,矩形收缩,矩形收缩,1,矩形扩展,矩形扩展,2,图形收缩,图形收缩,3,图形扩展,图形扩展,4,由下向上拉开,由下向上拉开,5,由上向下拉开,由上向下拉开,6,由左拉至右,由左拉到右,7,由右拉至左,由右拉到左,8,纵向百叶窗,纵向百叶窗,9,横向百叶窗,横向百叶窗,10,横向马赛克,横向马赛克,11,纵向马赛克,纵向马赛克,12,渐,显,渐,隐,13,关,幕,关,幕,14,拉,幕,拉,幕,15,拉幕（上下中心）,拉幕（上下中心）,16,拉幕（中心上下）,拉幕（中心上下）,17,右上角至左下角,右上角至左下角,18,右下角至左上角,右下角至左上角,19,左上角至右下角,左上角至右下角,20,左下角至右上角,左下角至右上角,21,水纹渐显,水纹渐隐,22,纵向水纹渐显,纵向水纹渐隐,23,随,机,随,机,表,2-1,2.,在,HTML,文档内嵌入,CSS,的定义。用,标记声明层叠样式表的定义，并放在,HTML,文档的,中。,例,2.2,在,HTML文档内嵌入,CSS,的定义（,L2-2.htm,）（该例仅给出,CSS,在,HTML,中的定义，见实例十二）。,.aa1font:24pt/27pt;font-style:italic;color:#00aa22;font-family:,楷体,_GB2312;,.aa2font:11.5pt/12pt;font-family:,隶书,;,.aa3font:20pt/20pt;font-family:,黑体,;,.aa4font:12pt/20pt;font-family:,黑体,;,字体规格、行距,Atext-transform:capitalize;text-decoration:none;,每个单词的第一个字母大写,atext-decoration:none ,取消超链接时的下划线,a:hoverText-decoration:underline;color:#dd5511 ,超链接时的颜色,3.,在独立的文本文件中（扩展名必须是,.css,）定义,CSS,格式。使用时，将其链接或导入到,HTML,中。,图,2-9,将,CSS,文件链接或导入到,HTML,中,例,2.3,多个,HTML,文档使用同一个层叠样式表,例,2.3,多个,HTML,文档使用同一个层叠样式表,.,将层叠样式表定义在单独的文本文件中（见,图,2-9,），然后链接（,Link,）或导入（,Import,）到,HTML,文档中。,（,a,）（,L2-3a.htm,）,在文档使用链接样式表,链接样式表就是将定义在单独文本文件中的层叠样式表链接,(Link),到,HTML,文档，本例定义字体为隶书、大小为,28,点、颜色为棕色。,（,b,）（,L2-3b.htm,）,在文档使用导入样式表,导入样式表就是将定义在单独文本文件中的层叠样式导入,(Import),到,HTML,文档中，本例定义字体为隶书、大小为,28,点、颜色为棕色。,（,a,）、（,b,）两例中使用的,CssFile.css,文档内容如下（文档的扩展名必须是,.css,）：,BODY,font-family:,隶书,;,font-size=28;,color:Brown,4.,在,HTML,文档中套用,CSS,类别。,可以直接在,HTML,文档内的样式表文件中定义不同的样式类别（,Style Class,），供,HTML,文档在需要时套用，如图,2-10,所示。,图,2-10,将样式表的定义直接放入,HTML,文档内,例,2.4,在,HTML,文档内套用层叠样式表类别（,L2-4.htm,）。,套用不同的样式类别,浣溪沙,游蕲水清泉寺，寺临兰溪，溪水西流。,山下兰芽短浸溪，松间沙路净无泥，萧萧暮雨子规啼。,谁说人生无再少，门前流水尚能西，休将白发唱黄鸡。,注释：蕲水,现在湖北省浠水县。清泉寺,在蕲水城外。,题解,苏轼这一次游清泉寺，,是在生了一场大病恢复健康之后，又正值景色美丽的春天，心情很舒畅。,“,溪水西流,”,给了他启示和鼓舞，他觉得老年人也可以和年轻人一样发挥充沛的精力。,2-6 XML,及其他,2003,年,2,月,10,日是,XML,的五周岁生日，,1998,年互联网联盟,W3C,正式推出,XML,。和,HTML,不同，,HTML,是一种显示输出标记语言，只显示信息，不描述信息；,XML,是一种描述信息的标记语言，它不涉及任何显示信息的处理，而是使用其他语言来完成这一任务。由于,XML,结构清晰、开放性强，使得它荣获了新一代,“,世界语,”,的美称，其扩展名是,.xml,。,XML,对字母的大、小写比较敏感，对起始和结束标记的配对要求严格，一些在,HTML,中可以,“,混,”,过去的语句，在,XML,中将受到严格的限定。,担当,XML,显示输出任务的语言之一是,XSLT,，它可以将,XML,转化成,HTML,语言，可以过滤、选择和格式化,XML,的数据。,例,2.5,使用,XML,文档,例,2.5,使用,XML,文档（,L2-5.xml,）。,01:,02:,03:,04:,05:Web,数据库基础,06:,春风,07:,北京,08:,09 290,10:25,11:2003.3,12:,13:,例,2.6,定义并显示,XML,文档的,XSLT,文档（,L2-6.xsl,）,01:,02:03:,04:,05:,06:,07:,08:,书名,09:,作者,10:,出版地,11:,出版社,12:,页数,13:,价格,14:,出版日期,15:,16:,17:,18:,19:,20:,21:,22:,23:,24:,25:,26:,27:,28:,29:,30:,31:,2-7,实训题,实例一 文字字体（,SL2-1.htm,）。,实例一 文字字体,乱石穿空，惊涛裂岸。（默认字体）,乱石穿空，惊涛裂岸。（,Bold,粗体）,乱石穿空，惊涛裂岸。（,Italic,斜体）,乱石穿空，惊涛裂岸。（,Bold,粗体、,Italic,斜体）,乱石穿空，惊涛裂岸。（,Big,大字体）,乱石穿空惊涛裂岸。（,Big,加大字体）,乱石穿空，惊涛裂岸。（,Small,小字体）,乱石穿空，惊涛裂岸。（,Small,减小字体）,乱石穿空，惊涛裂岸。（,Deleted,给文本加删除线）,乱石穿空，惊涛裂岸。（,Underlined,给文本加下划线）,实例二,表格内文字的置位（左、中、右）（,SL2-2.htm,）。,实例二,表格内文字的置位,字符位置置左,字符位置置中,字符位置置右,说明：,文件中有四个,bgColor,，前两个分别表示网页、表格的颜色属性，后两个表示单元格的颜色属性。,中的,ALIGN=center,、,WIDTH=90%,、,BORDER=2,分别表示整个表格的位置居中、占全屏幕宽度的,90%,、边宽为,2,。若设,BORDER=0,，表格的边框线将被隐去，仅剩表格中的三部分内容。通常许多网站的网页采用这种表格定位的方法来定制页面布局。对于表格的位置除用,中的属性,ALIGN,（只有,left,、,center,、,right,三个值）外，也可在,前加,、,、,三种标记，设置左、中、右三个位置。,实例三,标记的作用，如,图,2-11,所示（,SL2-3.htm,）。,实例三,标记的作用,编号,品名,数量,单价（元）,备注,0001,主板,20 600,售出,0002,硬盘,30 700,库存,0003,键盘,10 50,库存,0004,光驱,15 300,售出编号,品名,数量,单价（元）,备注,0001,主板,20 600,售出,0002,硬盘,30 700,库存,0003,键盘,10 50,库存,0004,光驱,15 300,售出,实例四,增加图片的摘要信息，并除去图片的边框（,SL2-4.htm,）。,实例四,摘要信息、零边框等,其一：,搜狐网站,其二：,新浪网站,实例五,页面的背景参数与超链接参数（,SL2-5.htm,）。,实例五,应用背景参数与超链接参数,鸭堡地图,经干院,东方明珠,实例六,网页内部或外部的超链接（,SL2-6.htm,）。,实例六,内部、外部超链接,第,1,章,（文本内容，最好超出一个页面）,返回第,1,章,绿海星,红色风暴,163,邮箱,实例七,点击超链接时启动新窗口（,SL2-7.htm,）。,实例七,启动新窗口,红宝石,实例八,动态文字（,SL2-8.htm,）。,实例八,动态文字,春雨潜入夜,春雨潜入夜,春雨潜入夜，瞒人去润花。,实例九,打开网页时自动链接到本站的其他页面（,SL2-9.htm,）。,实例九,自动链接,演示自动链接到其他页面,实例十,网页的背景音乐（,SL2-10.htm,）。,实例十,背景音乐,2008,中国北京！,实例十一,表单（,SL2-11.htm,）。,实例十一,表单,学号：,班级：,一班,二班,姓名：,我的建议：,实例十二,应用层叠样式表（,SL2-12.htm,）。,实例十二,应用层叠样式表,.aa1font:24pt/27pt,楷体,_GB2312;font-style:italic;color:#00aa22;,.aa2font:11.5pt/12pt,隶书,.aa3font:20pt/20pt,黑体,.aa4font:12pt/20pt,黑体,Atext-transform:capitalize;text-decoration:none;,a:hoverText-decoration:underline;color:#dd5511,-,清,孙髯翁,昆明大观楼,（天下第一长联）,五百里滇池,，奔来眼底，披襟岸帻，喜茫茫空阔无边。,看东骧神骏，西翥灵仪，北走蜿蜒，南翔缟素，高人韵士，何妨选胜登临。,趁蟹屿螺洲，梳裹就风鬟雾鬓；,更苹天苇地，点缀些翠羽丹霞。,莫孤负四围香稻，万顷晴沙，九夏芙蓉，三春杨柳。,数千年往事,，注到心头，把酒凌虚，叹滚滚英雄谁在。,想汉习楼船，,唐标铁柱,，宋挥玉斧，元跨革囊，伟烈丰功，费劲移山气力。,尽珠帘画栋，卷不及暮雨朝云；便断碣残碑，都付与苍烟落照。,只赢得几杵疏钟，半江渔火，两行秋雁，一枕清霜。,实例十三,层叠样式表与,标记和鼠标样式（,SL2-13.htm,）。,实例十三,标记和鼠标样式,.myTipA background-color:#EE00EE;color:#FFFF00;cursor:hand,.myTipB background-color:#00BB78;color:#FFFF00;cursor:hand,CSS,由,WWW,标准化组织制定，主要用来处理网页字符的格式化、显示、编排、打印和特殊效果等。以此来弥补,HTML,在数据处理上的不足。请参阅,本章第,2-5,节。,表,2-2 CSS,鼠标样式的指定方法及图例,指定方法,演示效果图例,说 明,cursor:auto;,（无）,这是默认的属性值，即鼠标根据页面不同的元素对象呈现不同的样式。例如超链接为手形，文字和输入框为,“,I,”,形等,cursor:default;,鼠标在任何地方都呈现普通的箭头形状,cursor:hand;鼠标将呈现手的形状，同超链接的鼠标形状,cursor:crosshair;,在绘图时我们遇到过的精确定位的十字形鼠标,cursor:text;,“,I,”,字形的鼠标，平时在文本上和输入框上可以见到,cursor:move;,鼠标由水平和竖直双箭头组成，移动,Windows,窗口时常见,cursor:wait;,鼠标呈现两个倒三角沙漏的形状，平时见于,Windows,程序忙的时候,cursor:help;,鼠标样式为一个普通箭头加一个问号，如果你在,Windows,窗口右上角单击,“,？,”,按钮后，也可以看到这种鼠标样式,cursor:n-resize;,鼠标箭头朝上方,cursor:s-resize;,鼠标箭头朝下方,cursor:e-resize;,鼠标箭头朝右方,cursor:w-resize;,鼠标箭头朝左方,cursor:ne-resize;,鼠标箭头朝右上方,cursor:nw-resize;,鼠标箭头朝左上方,cursor:se-resize;,鼠标箭头朝右下方,cursor:sw-resize;,鼠标箭头朝左下方,实例十四,层叠样式表与,和,在同一页面中的应用，如图,2-16,所示（,SL2-14.htm,）。,实例十四,SPAN,与,DIV,.SpanF1background-color:red;color:white;,.SpanF2background-color:yellow;color:black;,.SpanF3background-color:blue;color:white;,.SpanF4background-color:lime;color:black;,.DivF1 background-color:yellow;color:black;,.DivF2 background-color:magenta;color:white;,.DivF3 background-color:cyan;color:black;,.DivF4 background-color:black;color:white;,请对下联,(,答案在本书内找,):蒲叶,桃叶,葡萄叶,草本木本,蒲叶,桃叶,葡萄叶,草本木本,图,2-12,图片的摘要信息、零边框等,图,2-11,标记的作用,图,2-16,使用,与,的效果,2-8,小结,HTML,标记一般成对出现。,标记一般不嵌套使用。,大、小写字母在标记中可以通用，但建议统一使用。,最好不交叉使用标记（但交叉使用一般也不会纠起浏器出错）。,超文本标记语言的扩展名可以是,.htm/.html,或,.HTM/.HTML,，最好统一使用。,在,FrontPage 2000,下，打开“,HTML”,标签，学习,HTML,源文件的编制。,层叠样式表的简单使用是在,HTML,语句中插入,stye,属性。,XML,的最大特点是，我们可以根据,XML,的标准制订出各种具有实际含义的标记 元素。,制作主页时，应考虑下载速度，一般保持在页面的内容小于,60KB,，下载速度小于,30,秒的范围内。,习 题,1.HTML,的含义是什么？它属于什么类型的文件？,2.,编辑,HTML,可以用哪些工具？,3.,什么是图片的文本替换？请写出一条可运行的语句。,4.,在记事本、,Word 2000,、,IE,和,FrontPage 2000,下分别制作一个网页，比较一下源程序。,5.,简述属性和标记的含义。,6.,写出在超链接的文本中附带摘要信息的语句。,7.,简述,HTML,文档的结构。,8.,简述层叠样式表（,CSS,）的使用方法，并自建立一个含有,CSS,功能的网页，可参照图,2-17,。,9.,连接互联网，浏览风格各异的网站，如,:,10.,试编制图,2-17,所示的,HTML,网页。,11.,结合本章给出的实例，上机操作。,3,编辑和创建网页,内容简介：,本章将重点学习,FrontPage 2000,的基本使用方法，其中包括页面制作、排版、插图、多媒体效果、超链接、制作和应用表格、表单应用、框架制作等。,3-1,使用,FrontPage 2000,3-1-1 FrontPage 2000,的主窗口,3-1-2 FrontPage 2000,的视图栏,3-1-3,主窗口的五个标签,3-1-4,建立新页面,3-1-5,在页面中插入文本,3-1-6,在页面中插入图像,3-1-7,多媒体效果,3-1-1 FrontPage 2000,的主窗口,图,3-1 FrontPage 2000,的初始主画面,启动,FrontPage 2000,（选择,开始,程序,Microsoft FrontPage,），直接进入,FrontPage 2000,的网页视图模式，如图,3-1,3-1-2 FrontPage 2000,的视图栏,1.,网页,2.,文件夹,3.,报表,4.,导航,5.,超链接,6.,任务,【,文件夹,】,按钮窗口,【,导航,】,按钮窗口,【,报表,】,按钮窗口,【,超链接,】,按钮窗口,3-1-3主窗口的五个标签,FrontPage 2000,提供的标签,:,普通、,HTML,、预览和制作框架网页时提供的无框架、框架网页,HTML,，帮助用户方便地查看一般的网页编辑画面、,HTML,的源代码、预览页面以及框架页面和框架的,HTML,源代码。编辑一般网页时添加前三个标签，编辑框架网页时添加后两个标签。,普通标签,HTML,标签,预览标签,无框架标签,框架标签,3-1-4,建立新页面,使用模板向导,网页的内容,常规标签 背景标签 边距标签 自定义标签 语言标签,主题,1,）设置网站主题,2,）个别网页的主题设置,【,新建,】,常规对话框标签,【,网页属性,】,常规对话框标签,【,网页属性对话框背景标签,主题设置对话框,3-1-5,在页面中插入文本,作为网页中最基本的内容,文本，是网页中惟一不可缺少的部分。,文本的输入,文本的基本操作,1,）改变文字的大小、字体、颜色,2,）分段,3-1-6,在页面中插入图像,Internet,上的图像,添加图像,在图片上书写文字,创建自动缩略图,图片的替代文字和替代图,透明图片的建立,图像地图,【,图片,】,工具栏,【,图片属性,】,对话框中的,【,替代表示,】,栏,【,图片,】,工具栏中的,【,设置透明的颜色,】,按钮,3-1-7,多媒体效果,1.DHTML,动态效,a.,文字的动态效果,在页面中任选一段文字,在菜单栏中选择,选择,，单击,动态,HTML,效果,。,在弹出的,DHTML,效果,对话框中根据需要分别选择：开启、应用、效果。,b.,图片的动态效果,2.,插入背景音乐,a.,直接插入背景音乐,b.,利用插件插入背景音乐,注意：可以使用的音乐文件类型有许多，如：,WAV,、,MIDI,、,RA/RAM,、,AIFF,、,AU,以及,MP3,等，但推荐在网页中尽量使用较小的文件。,3-2,超链接,当我们在网页中建立超链接后，只要简单地在所设置的超链接（文字或图片）上单击鼠标，就能完成超链接的任务，到达被链接的,“,彼岸,”,。,3-2-1,建立超链接,超链接步骤：,选中要建立超链接的文字和图片,在菜单栏中单击,插入,超链接,，弹出图,3-14,的,创建超链接,对话框,在,URL,栏内直接输入被链接的地址，如图,3-14,图,3-14,创建超链接,对话框,3-2-2,网站内部的超链接,网站内部的超链接有两种情况：网站内部文件之间的关联，或网站内部文件与外部的超链接。选择菜单栏中的,【,文本,】【,打开站点,】,，在,【,打开站点,】,对话框中，选中要打开的文件夹，单击,【,打开,】,按钮；再到菜单栏中选择,【,插入,】【,超链接,】,，弹出对话框。,3-2-3,网页内部的超链接,1.,设置书签,选取要设置书签的文字,在菜单栏单击,插入,书签,，弹出,书签,对话框，如,图,3-15,书签名称,框内显示已设置的文字，单击,确定,按钮即可（也可改造其他的名称），被设置为书签的文字下方会场出现虚线。若要删除,“,书签,”,，只在,图,3-15,中选中要删除的,“,书签,”,，单击,清除,按钮即可。,2.,建立内部超链接,在所编辑的文本中，选定想要设置内部超链接的文字,从菜单栏中选取,插入,超链接,，或单击鼠标右键，选取,超链接,在对话框（如,图,3-14,所示）的左下方，从,书签,的列表框中选取需超链接的书签名称。,例,3.1,建立网页内部的超链接（,L3-1.htm,）,沁园春,长沙,至注释,一九二五年,独立寒秋，,湘江北去，,橘子洲头。,看万山红遍，,层林尽染。,漫江碧透，,百舸争流。,鹰击长空，,