《HTML语言简介》PPT课件.ppt

第1章HTML语言简介,1.1【案例1】第1个HTML网页1.2【案例2】“中国诗词佳句作者”网页1.3【案例3】“鲸鱼和螃蟹”网页1.4【案例4】“图像切换”网页1.5【案例5】“链接技术演示”网页1.6【案例6】“中国的世界文化遗产”网页1.7【案例7】“FLASH技术说明”网页1.8【案例8】“最新消息公告”网页,1.9【案例9】“水中倒影”网页1.10【案例10】“飘动的枫叶”网页,1.1【案例1】第1个HTML网页,1HTML文件特点HTML文件是标准的ASCII文件，它看起来像是加入了许多被称为链接签（tag）的特殊字符串的普遍文本文件。从结构上讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它们有起始标记和结尾标记。元素的起始标记叫做起始链接签（starttag），元素的结束标记叫做结尾链接签（endtag），在起始链接签和结尾链接签中的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。一个元素的元素体中可以有其他的元素。“属性名”、“=”和“属性值”合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。需要说明的是，HTML是一门发展很快的语言，早期的HTML文件并没有如此严格的结构，因而现在流行的浏览器为了保持对早期HTML文件的兼容性，也支持不按上述结构编写的HTML文件。另外，各种浏览器对HTML元素及其属性的解释也不完全一样。一般来讲，HTML的元素有下列3种表示方法。（1）文件或超文本（2）文本或超文本,（3）第3种写法仅用于一些特殊的元素，例如分段元素P，它仅仅通知WWW浏览器在此处分段，因而不需要界定作用范围，所以它没有结尾链接签。HTML语言的标记种类很多，图1-1-2中常用的标记含义介绍如下。注意：HTML文档中的起始链接签“：它是HTML文档中最基本的标记，不可缺少。表示HTML文档的开始，表示HTML文档的结束。（2）：它是网页头部标记。可以提高网页文档的可读性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。（3）：它是网页名称标记，是标记内唯一一个必须出现的元素，有标记就一定要有标记。TITLE元素是文件头中的元素，它也只能出现在文件头中。TITLE标明该HTML文件的题目，是对文件内容的概括。一个好的题目应该能使读者从中判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中，而以,窗口的名称显示出来。除了标识窗口外，当将某一个网页存入书签或文件时，TITLE还用做书签名或缺省的文件名。TITLE的长度没有限制，但过长的题目会导致转行，一般情况下它的长度不应超过64个字符。（4）：它是网页主题内容标记。其中包含了网页的正文内容，一般不可缺少。（5）：使用标记中的BGCOLOR属性，可以设置网页的背景颜色。使用的格式有以下两种。在第一种格式中，RR、GG、BB可以分别取值为00FF的十六进制数。RR、GG、BB分别用来表示颜色中的红色、绿色和蓝色成分的多少，数值越大，颜色越深。红、绿、蓝三色按一定比例混合，可以得到各种颜色。例如，RR=FF，GG=FF，BB=00，表示为黄色。如果RRGGBB取值为000000，则为黑色；RRGGBB取值为FFFFFF，则为白色；RRGGBB取值为FF8888，,则为浅红色。第二种格式是直接使用颜色的英文名称来设定网页的背景颜色。例如：用来设置网页的背景颜色为蓝色。：用来设置网页的背景颜色为红色。：用来设置网页的背景颜色为白色。（6）：它是图像标记。用来加载图像与GIF动画。在网页中加载GIF动画的方法与加载图像的方法一样。GIF动画文件的扩展名也是.gif，文件格式是GIF89A格式。制作GIF动画的软件有很多，例如Fireworks和UleadGIFAnimator5.0等。（7）SRC：它是依附于其他标记的一个属性，依附于标记时，用来导入图像与GIF动画。其格式如下：（8）：它是换行标记，表示以后的内容移到下一行。它是单向标记，没有。（9）：它是保留文本原来格式的标记。它的作用是将其中的文本内容按照原来的格式显示。否则浏览器会自动取消文本中的空格。,（10）：它是粗体标记。可使其中的文字变为粗体。3其他常用标记（1）：它是正文的第三级标题标记。此外，还有第一、二、三、四、五、六级标题标记，分别为、和。级别越高，文字越小。一般情况下，浏览器对标题作如下解释。H1黑体，特大字体，居中，上下各有两行空行。H2黑体，大字体，上下各有一到两行空行。H3黑体（斜体），大字体，左端微缩进，上下空行。H4黑体，普通字体，比H3缩进更多，上边一空行。H5黑体（斜体），与H4相同缩进，上边一空行。H6黑体，与正文有相同缩进，上边一空行。Hn可以有对齐属性，ALIGN#，“#”表示Left（标题居左）、Center（标题居中）和Right（标题居右）。例如：标题2（2）：它是段落标记。它的作用是将其内的文字另起一段显示。段与段之间有一个空行。HTML的浏览器是基于窗口的，用户可以随时改变显,示区的大小，所以HTML将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。段落标记也可以有多种属性，比较常用的属性是Aligh#。“#”可以是Left、Center或Right，其含义同上文。4文件的路径名（1）绝对路径：绝对路径是写出全部路径，系统按照全部路径进行文件的查找。绝对路径中的盘符后用“：”或“：/”，各个目录名之间以及目录名与文件名之间，应用“”或“/”分隔开。绝对路径名的写法及其含义如表所示。（2）相对路径：相对路径是以当前文件所在路径和子目录为起始目录，进行相对的文件查找。通常都采用相对路径，这样可以保证站点中的文件整体移动后，不会产生断链现象。相对路径名的写法及其含义如表所示。,绝对路径名的写法及其含义,5URLURL（UniformResourceLocator）即统一资源定位器，WWW上的地址编码，是文件名的扩展。它指出了文件在Internet中的位置。它存在的目的在于统一WWW上的地址编码，给每一个网页指定的地址，这样就不会出现重复或由于编码不统一而出现无法浏览等问题。当用户查询信息资源时，只要给出URL地址，WWW服务器就可以根据它找到网络资源的位置，并将它传送给用户的计算机。通常，当用户用鼠标单击网页中的链接点时，就将URL地址的请求传送给了WWW服务器。,在单机系统中，定位一个文件需要路径和文件名；对于遍布全球的Internet，显然还需要知道文件存放在哪个网络的哪台主机中才行。另外，单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在Internet上，各个网络，各台主机的操作系统都不一样，因此必须指定访问该文件的方法。一个完整的URL地址通常由通信协议名（访问该资源所采用的协议，即访问该资源的方法）、Web服务器地址（存放该资源主机域名地址，在因特网上，主机名可以使用主机域名地址或IP地址，通常以字符形式出现）、文件在服务器中的路径和文件名四部分组成。例如,的URL。比如现在观看一个URL为,1.2【案例2】“中国诗词佳句作者”网页,1文字的字体大小和颜色（1）字体大小：HTML文件可以有7种字号，1号最小，7号最大。默认字号为3，可以用设置默认字号。设置文本的字号有两种办法，一种是设置绝对字号，；另一种是设置文本的相对字号，。用第2种方法时“+”号表示字体变大，“-”号表示字体变小。（2）字体颜色：字体的颜色用指定，#可以是6位十六进制数，分别指定红、绿、蓝的值。也可以使用16种标准颜色，如表所示。,例如，“字体大小和颜色”网页（HTML2-2.htm）代码如下。字体大小和颜色字体大小和颜色字体大小和颜色字体大小和颜色字体大小和颜色闪烁的文本,（3）闪烁：使用BLINK标记可以使文本闪烁，闪烁频率为1秒一次，举例如下。闪烁的文本2字体风格字体风格分为物理风格和逻辑风格。字体的物理风格直接指定字体，物理风格的字体有黑体、斜体、下画线和打字机体等，如表所示。例如，“各种字体风格”网页代码如下（HTML2-3.htm）。各种字体风格,各种字体风格各种字体风格各种字体风格各种字体风格各种字体风格各种字体风格各种字体风格各种字体风格字体的逻辑风格用来指定文本的作用，有强调、特别强调、源代码、例子、键盘输入、变量、定义、引用、较小、较大、上标和下标。3边框包围的文字可以通过标记定义文字的边框。输入下面的HTML代码（保存在名称为“HTML2-4.htm”文件中）。,图像的大小和边框增加了边框的文字4添加注释无论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。实际上，添加注释是任何程序开发工作必须遵循的规范之一。HTML的注释有开始标记符“”构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。该标记可以添加在HTML代码的任何位置。,1.3【案例3】“鲸鱼和螃蟹”网页,1调整图像大小和给图像加边框在网页中插入图像时使用的标记是，用来加载GIF图像与动画，“SRC”属性用来输入图像的路径。在网页中加载GIF动画的方法与加载GIF图像的方法一样。GIF动画文件的扩展名也是.gif，文件格式是GIF89A。（1）调整图像大小：使用标记中的HEIGHT和WIDTH属性可以调整图像的大小。HEIGHT（决定图像的高）和WIDTH（决定图像的宽）的取值单位为像素。（2）给图像加边框：使用标记中的BORDER属性可以给图像加边框。BORDER的取值单位为像素，当它的取值为0或者不加BORDER属性时，则没有边框。通过标记中的HEIGHT和WIDTH属性调整图像，虽然可以改变图像在网页中的大小，但是调整过大会使图像严重失真。合理设置HEIGHT和WIDTH属性，才能得到最好的显示效果。2背景平铺图像和图像文字说明（1）设置背景平铺图像：使用标记中的BACKGROUND属性，可设置网页的平铺背景图像，其格式如下。,（2）添加图像文字说明：为了增强图像在网页中的显示效果，可以为图像添加文字说明。当鼠标移到图片上方时，会出现说明文字。在关闭浏览器中的载入图像命令时，说明文字可以替代图像。使用标记的ALT属性可以为图像添加文字说明。3调整图像和文本的相对位置在网页中，经常需要将图像和文本放在一起进行显示。使用标记的ALIGN属性可以调整图像与文本的相对位置。使用标记中的VSPACE和HSPACE属性可以调整图像与文本间的距离。VSPACE（图像与文本上下的距离）和HSPACE（图像与文本左右的距离）的单位均为像素。标记中的ALIGN属性用于调整图像与文字的对齐方式，主要含义如下所述。（1）ALIGN项缺省时：图像的底部与其他文本或图像的底部对齐。（2）ALIGN=top：图像的顶部与其他文本或图像的顶部对齐。（3）ALIGN=middle：图像的中间与其他文本或图像的中部对齐。（4）ALIGN=bottom：图像的底部与其他文本或图像的底部对齐。,（5）ALIGN=left：图像位于屏幕左边。（6）ALIGN=right：图像位于屏幕右边。,1.4【案例4】“图像切换”网页,1添加背景音乐使用标记可以在网页中插入背景音乐。标记可以放在与标记内的任何地方。引导音乐文件的属性是SRC，其格式如下。2在网页中插入Flash动画在网页中直接包含多媒体对象最常用的两个标记是标记和标记。（1）标记：使用标记不仅可以在网页中插入Flash动画，还可以使用下载并显示由插件支持的其他多媒体应用程序。使用标记可以在网页中插入Flash对象同添加背景音乐的方法一样，标记可以放在与标记内的任何地方。引导Flash动画文件的属性是SRC，格式如下：当浏览器遇到标记时，会加载其中指定的文件并确定它的MIME类型。MIME信息告知浏览器正在下载的文件类型。然后浏览器查找与该MIME,类型一致的插件，如果有就使用，如果没有则会显示一条错误信息，并且提示用户下载该插件。（2）标记：该标记可以使网页中包含JavaApple、视频和音频等多媒体及其他文件。当浏览器遇到标记时，会加载相应的文件并根据该标记包含属性的值来显示它。,1.5【案例5】“链接技术演示”网页,1链接文件使用的HTML标记链接也叫超文本链接。在网页中加入超文本链接，就是通过单击一部分文字、图像或图像中的一个区域，即可调出另一个网页或本网页的另一部分内容。HTML文件的链接是通过链接标记来实现的。在标记中除标记名“A”外还包括一些属性。HREF是链接标记中一个最常用的属性。该属性用来指出所要链接的文件的路径（或目录）和名称或URL；其简单的结构形式如下。文字所有写在起始标记和结束标记之间的文字构成一个实际的链接，当网页在浏览器内显示时，这些文字将以蓝色高亮度或带有下画线的形式出现。如果需要链接的文件都放在本机磁盘上，则这种链接叫本地链接，它不必链接网络，只要本地的机器上有一个编辑器和浏览器就足够了。如果需要链接的文件在网络上，则需要网络链接。网络链接需要知道网址（URL）。2使用图像或动画的链接用图像或动画的链接，就是在单击图像或动画后，即可调出与之链接的网页文件或本网页中的一段内容。建立图像或动画的链接的方法是在链接标记,的中间加入一个标记，其格式如下。加入了链接的图像或动画会自动产生一个外框，以示与一般的图像或动画的区别。,1.6【案例6】“中国的世界文化遗产”网页,1在同一个网页中建立链接的HTML标记在同一个网页文件中建立链接，需要做以下工作。（1）在文件的前面需要列出链接的标题文字，它们相当于文章的目录。同时将这些文字与相应的锚名（即定位名）建立链接。所谓“锚名”是指网页中能被链接到的一个特定位置。建立链接时，要在锚名前加一个“#”符号，其格式如下。标题名字（2）为被链接的内容起一个名字，该名字叫锚名，其格式如下。锚名的定义要放在相应标题对应的内容前面。2建立电子邮件链接如果将HREF属性值指定为“MAILTO:电子邮件地址”，就可以获得电子邮件链接的效果。例如，使用下面的HTML代码可以设置电子邮件的超链接。邮箱地址：shenda,当浏览网页的用户单击了指向电子邮件的超级链接后，系统将自动启动邮件客户程序（对于安装了Windows98/2000以上操作系统的计算机，默认时启动OutlookExpress），并将指定的邮件地址填写到“收件人”栏中，用户可以编辑并发送该邮件。如果是第一次启动OutlookExpress，会要求进行软件设置。3链接到其他页面中的锚点通过前面的案例，可以看出从一个文件链接到另外一个文件与同一个文件中的链接的格式有所不同。那么，能不能使用一个命令，链接到其他文件的指定位置呢？在网页中建立文字链接的HTML代码是文字。只要将“被链接的文件名或URL”替换为“要链接的文件名或URL加#加锚点名称”即可。例如，天坛标记，即可建立一个到HTMLABC.htm网页文档中的“天坛”锚点的链接。,1.7【案例7】“FLASH技术说明”网页,1设置框架和修饰框架（1）设置框架：框架就是把一个网页页面分成几个单独的区域（窗口），每个区域显示一个独立的网页，该部分可以是一个独立的HTML文件。因此，框架可以实现在一个网页内显示多个HTML文件。一个有n个区域的框架网页来说，每个区域有一个HTML文件，整个框架结构也是一个HTML文件，因此该框架网页有n+1个HTML文件。设置框架需要使用标记来取代标记。标记有两个属性：ROWS=“n1,n2,n3”：纵向设置框架；COLS=“n1,n2,n3”：横向设置框架。其中，n1、n2、n3为开设的框架占整个页面的百分数。（2）修饰框架：修饰框架需要使用标记，它在标记之间。标记有6个属性，介绍如下。RC=“URL”属性：用来链接一个HTML文件，如果没有该属性，则窗口内无内容。NAME=“窗口名称”属性：给窗口命名。,MARGINWIDTH=n属性：用来控制窗口内的内容与窗口左右边缘的间距。n为像素个数，默认值为1。MARGINHEIGHT=n属性：用来控制窗口内的内容与窗口上下边缘的间距。n为像素个数，默认值为1。SCROLING=YES、NO或AUTO属性：用来确定窗口是否加滚动条。选YES时，为要滚动条；选NO时，为不要滚动条；选AUTO时，可以加滚动条，根据内容是否可以完全在窗口内全部显示出来，来决定是否要滚动条。默认为AUTO。NORESIZE属性：如果设置了此属性，则窗口不可被用户用鼠标调整大小；如果没设置此属性，则窗口可以被用户用鼠标调整大小。FRAMEBORDER=n属性：可以控制是否显示框架边框。n取值为1，表示生成3D边框（此为默认设置）；n取值为0，则不显示边框。只有将所有相邻框架的边框都设置为0，才能隐藏边框。2网页框架举例（1）开设纵向窗口：纵向开设3个窗口，各占50%、30%和20%，各窗口内分别加载HTML文件为HTML2-1.htm、HTML2-2.htm和HTML2-3.htm。在浏览器中观察该网页的结果。打开记事本程序，输入如下HTML代码。将该HTML文件以名字HTML7-2.htm保存在“DRAWTD”目录下。,（2）开设横向窗口：横向开设三个窗口，各占50%、30%和20%，各窗口内分别加载HTML文件为HTML2-1.htm、HTML2-2.htm和HTML2-3.htm。在浏览器中观察该网页的结果。打开记事本程序，输入如下HTML代码。将该HTML文件以名字HTML7-3.htm保存在“DRAWTD”目录下。,（3）同时开设横向和纵向窗口：纵向开设两个窗口，各占40%和60%，上边的窗口横向开设两个窗口，各占50%和50%，下边的窗口横向开设两个窗口，各占40%和60%。分别加载HTML文件为HTML2-1.htm、HTML2-2.htm、HTML2-3.htm和HTML2-4.htm。在浏览器中观察该网页的结果。打开记事本程序，输入如下HTML代码。将该HTML文件以名字HTML7-4.htm保存在“DRAWTD”目录下。,3窗口间的链接实现窗口间的链接需要使用TARGET属性。TARGET属性可以在HTML的多个标记内使用。其中，常用的方式有两种。（1）在标记中使用的格式如下：例如：横向开设两个窗口，各占40%和60%，名字分别为CK1和CK2。左边窗口加载的HTML文件为HTMLLEFT.htm，右边窗口加载的HTML文件为HTML2-1.htm。左边窗口中有4行链接文字。如果单击左边窗口内的“中国诗词佳句作者”链接文字，则可以在右边窗口（名字为CK2）内显示出HTML2-1.htm文件的内容。如果单击左边窗口内的“鲸鱼和螃蟹”链接文字，则可以在右边窗口内显示出HTML3-1.htm文件的内容。如果单击左边窗口内的“图像切换”链接文字，则可以在右边窗口内显示出HTML4.htm文件的内容。如果单击左边窗口内的“链接技术演示”链接文字，则可以在右边窗口内显示出HTML5.htm文件的内容。打开记事本程序，输入如下HTML代码。将该HTML文件以名字HTML7-5.htm保存在“DRAWTD”目录下。,其中，HTMLLEFT.htm的HTML文档如下。左框架窗口内的链接文字中国诗词佳句-作者鲸鱼和螃蟹图像切换链接技术演示,在浏览器中观察该网页的结果如图所示，单击“鲸鱼和螃蟹”链接文字的结果如图所示。,（2）在标记中使用：如果链接的文件均在一个窗口内显示，则可以使用标记。标记的格式如下：其中，window-name可以是窗口的名字，也可以是：_blank：在一个新的浏览器窗口中打开链接的文档。_parent：在框架的父框架或父窗口打开链接的文档。_self：默认打开方式，将链接的文档载入链接所在的同一框架或窗口。_top：将链接的文档载入整个浏览器窗口，从而删除所有框架。,1.8【案例8】“最新消息公告”网页,1什么是DHTML技术动态HTML（DynamicHTML，DHTML）是HTML、CSS和客户端脚本的一种集成。DHTML技术在原有技术的基础上，可分为3个方面：一是HTML，也就是页面中的各种页面元素对象。它们是被动态操作的内容；二是CSS，CSS属性也是动态操作的内容，从而获得动态的格式效果；三是客户端脚本（例如JavaScript），它实际操纵Web页上的HTML和CSS。使用DHTML技术，可以使网页设计者创建出能够与用户交互并包含动态内容的页面。实际上，DHTML是网页设计者可以动态操纵网页上的所有元素，甚至是在这些页面被装载以后的一种语言。利用DHTML，网页设计者可以动态地隐藏或显示内容、修改样式定义、激活元素以及为元素定义行为。DHTML还可以使网页设计者在网页上显示外部信息，方法是将元素捆绑到外部数据源（如文件和数据库）上。所有这些功能都可以用浏览器完成而无需请求Web服务器，同时也无需重新装载网页。这是因为一切功能都包含在HTML文件中，随网页一起下载到浏览器端。可见，DHTML技术是一种非常实用的网页设计技术。实际上，DHTML早已广泛地应用到了各类网站中，成为高水平网页必不可少的组成部分。,2DHTML的使用技巧IE为DHTML对象提供了4个可读写的属性来动态操作页面元素的内容：innerText、outerText、innerHTML和outerHTML。使用时应注意以下两点：（1）innerText、outerText属性的值是作为普通文本显示的，即使它含有HTML标签也如实反映出来；而innerHTML、outerHTML呈现的是经HTML解析后的文本，它可以反应属性中HTML标签的表现效果。（2）对网页中对象的outerText、outerHTML属性赋值（即写操作），会删除该对象。,1.9【案例9】“水中倒影”网页,1ANFY软件介绍ANFY是国外一个著名的网页特效制作软件，利用ANFY可以制作出数十种Java网页特效，例如，鼠标轨迹水纹效果等。通过图1-9-2可以看出，它的工作界面是一个简单易懂、赋有亲和力的工作界面。ANFY1.4.5中文版中包括了40个Javaapplets程序及一个称为ANFY向导的窗口程序。在“水中倒影”网页案例中，首先选择了“图像效果”中的LAKE应用程序，这部分就是ANFY中的“Javaapplets程序”，然后单击【下一步】按钮，进入了第1级设计界面，这就是ANFY向导的窗口程序。由于ANFY软件的制作者生活在英语国家，所以软件的中文汉化中有一些语言不够准确，例如第1级设计界面中的“图像文”文本框，更确切的叫法应该是“图像名”，但是这些并不影响软件的使用。ANFY软件定位于所有喜欢采用大量图形的网站制作者，其中的程序全部使用Java编写，和GIF动画相比，使用Java制作动态效果可以大大减小文件的字节数，提高网页的浏览速度。ANFY是一个免费软件，它的下载地址是：,列表框中选择一种特效后，单击【下一步】按钮，进入第1级设计界面。此时单击“文件”“保存计划任务”菜单命令，调出“另存为”对话框，在该对话框中选择要保存文件的路径及文件名，即可将当前未完成的Java网页特效保存为扩展名为.AJP的文件中。（2）打开计划任务：单击“文件”“打开计划任务”菜单命令，调出“打开”对话框，在该对话框中选择原来保存的Java网页特效文件，再单击【打开】按钮，即可导入该设置。（3）更改浏览器：单击“选项”“更改浏览器”菜单命令，调出“更改预览浏览器”对话框，如图所示。单击“系统默认浏览器”复选框，取消该设置，此时【查找】按钮被激活。单击【查找】按钮，调出“打开”对话框，选择浏览器文件的路径及文件名后单击【打开】按钮，在“更改预览浏览器”对话框的文本框中会显示该浏览器的名称。单击【确定】按钮，即可设置该浏览器为ANFY软件的默认浏览器。,3使用ANFY软件在已有的网页中插入Java网页特效（1）打开ANFY软件，在“种类”栏中选择“图像”单选按钮，在右边的下拉列表框中选择LENS列表项，选中LENS特效。单击【下一步】按钮，调出第1级设计界面。（2）在第2级到第3级设计界面中进行相应设置后，进入“程序代码”界面。单击【复制全部文件到】按钮，调出“另存为”对话框。利用该对话框将文件保存到“DRAWTD”目录下的“HTML9”文件夹中，并为文件命名。（3）在Java目录下新建一个记事本文件，在该文件内输入下面的代码：水中倒影,（4）在ANFY软件的“程序代码”界面内，将“HTML代码”列表框中的所有代码选中，然后单击【复制进剪贴板】按钮，复制这段代码。回到记事本文件的编辑界面，将光标移到和标记中间，单击“编辑”“粘贴”菜单命令，将ANFY软件中的复制的代码粘贴到此位置。（5）保存该记事本文件后，将文件的扩展名改为.HTML。双击该文件，在浏览器中查看插入Java程序后网页在浏览器中的显示效果。,1.10【案例10】“飘动的枫叶”网页,1网页特效精灵软件介绍安装完“网页特效精灵”软件后，会在桌面上显示一个该软件的快捷方式图标。双击此图标，即可调出“网页特效精灵”。该软件的工作界面如图1-10-2所示。网页特效精灵是网页特效工具，它包含两种特殊效果，分别为自定义特效（精灵特效）和不可自定义特效，适合不同水平的使用者。同ANFY软件一样，网页特效精灵软件的界面也非常赋有亲和力。由于该软件完全由国人编写，所以更适合中国人的使用习惯。网页特效精灵中共包括345个网页特效，远远多于ANFY软件。根据应用对象的不同，分为精灵特效、时间特效、文字特效、鼠标特效、图片特效、娱乐特效、菜单特效和其他特效9大类。另外，为了方便使用者加入自己的效果，可以通过该软件的菜单命令，插入其他网页特效。网页特效精灵软件使用JavaScript代码实现网页特效，在网页文件中的代码之外，不需要执行其他文件。但是JavaScript的代码比较复杂，不建议初学读者修改，可直接使用。“网页特效精灵”软件的下载地址为,2网页特效精灵软件中的菜单命令（1）设置代码字体和背景颜色：在“网页特效精灵”的工作界面中单击“软件设置”“代码字体”菜单命令，调出Windows的“字体”对话框。利用该对话框可以设置“代码窗口”中代码的字体、颜色和样式，设置完成后单击【确定】按钮，“代码窗口”中的代码字体即可改变。在网页特效精灵中单击“软件设置”“背景颜色”菜单命令，调出Windows的“颜色”对话框。在该对话框中选中一个颜色后，单击【确定】按钮，即可改变“代码窗口”的背景颜色。（2）添加个人特效：单击“网页工具”“个人特效箱”菜单命令，“代码窗口”变为“个人特效箱”设置栏。在“特效名称”文本框中输入要添加的特效的名称，单击“特效地址”后面的【浏览】按钮，调出“选择网页文件”对话框。在该对话框中选择包含特效的网页文件，单击【打开】按钮，即可将选中的文件添加到“个人特效箱”内，并在“个人特效箱”设置栏的下边显示出该特效的名称和地址。下次如果要使用该特效时，只要在导航菜单中单击【个人特效】按钮，即可在工作界面的左边显示该网页特效，单击其中一个特效名称，即可在“代码窗口”中显示该特效网页的代码，使用方法和软件内置的特效相同。,