网页设计案例教程ppt课件完整版

1、第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）的特殊字符串的普遍文本文件。从结构上

2、讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它们有起始标记和结尾标记。元素的起始标记叫做起始链接签（start tag），元素的结束标记叫做结尾链接签（end tag），在起始链接签和结尾链接签中的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。一个元素的元素体中可以有其他的元素。“属性名”、“=”和“属性值”合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。需要说明的是，HTML是一门发展很快的语言，早期的HTML文件并没有如此严格的结

3、构，因而现在流行的浏览器为了保持对早期HTML文件的兼容性，也支持不按上述结构编写的HTML文件。另外，各种浏览器对HTML元素及其属性的解释也不完全一样。一般来讲，HTML的元素有下列3种表示方法。（1）文件或超文本（2）文本或超文本（3）第3种写法仅用于一些特殊的元素，例如分段元素P，它仅仅通知WWW浏览器在此处分段，因而不需要界定作用范围，所以它没有结尾链接签。HTML语言的标记种类很多，图1-1-2中常用的标记含义介绍如下。注意：HTML文档中的起始链接签“”和元素名称（例如BODY）之间不能有空格。2网页基本结构标记（1）：它是HTML文档中最基本的标记，不可缺少。表示HTML文档的

4、开始，表示HTML文档的结束。（2）：它是网页头部标记。可以提高网页文档的可读性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。（3）：它是网页名称标记，是标记内唯一一个必须出现的元素，有标记就一定要有标记。TITLE元素是文件头中的元素，它也只能出现在文件头中。TITLE标明该HTML文件的题目，是对文件内容的概括。一个好的题目应该能使读者从中判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中，而以窗口的名称显示出来。除了标识窗口外，当将某一个网页存入书签或文件时，TITLE还用做书签名或缺省的文件名。TITLE的长度没有限制，但过长的题目会导致转行，一般情况下它的长度不应超过6

5、4个字符。（4）：它是网页主题内容标记。其中包含了网页的正文内容，一般不可缺少。（5）：使用标记中的BGCOLOR属性，可以设置网页的背景颜色。使用的格式有以下两种。在第一种格式中，RR、GG、BB可以分别取值为00FF的十六进制数。RR、GG、BB分别用来表示颜色中的红色、绿色和蓝色成分的多少，数值越大，颜色越深。红、绿、蓝三色按一定比例混合，可以得到各种颜色。例如，RR =FF，GG=FF，BB=00，表示为黄色。如果RRGGBB取值为000000，则为黑色；RRGGBB取值为FFFFFF，则为白色；RRGGBB取值为FF8888， 则为浅红色。第二种格式是直接使用颜色的英文名称来设定网页

6、的背景颜色。例如：用来设置网页的背景颜色为蓝色。：用来设置网页的背景颜色为红色。：用来设置网页的背景颜色为白色。（6）：它是图像标记。用来加载图像与GIF动画。在网页中加载GIF动画的方法与加载图像的方法一样。GIF动画文件的扩展名也是.gif，文件格式是GIF89A格式。制作GIF动画的软件有很多，例如Fireworks和Ulead GIF Animator 5.0等。（7）SRC：它是依附于其他标记的一个属性，依附于标记时，用来导入图像与GIF动画。其格式如下：（8）：它是换行标记，表示以后的内容移到下一行。它是单向标记，没有。（9）：它是保留文本原来格式的标记。它的作用是将其中的文本内容

7、按照原来的格式显示。否则浏览器会自动取消文本中的空格。 （10）：它是粗体标记。可使其中的文字变为粗体。3其他常用标记（1）：它是正文的第三级标题标记。此外，还有第一、二、三、四、五、六级标题标记，分别为、和。级别越高，文字越小。一般情况下，浏览器对标题作如下解释。H1 黑体，特大字体，居中，上下各有两行空行。H2 黑体，大字体，上下各有一到两行空行。H3 黑体（斜体），大字体，左端微缩进，上下空行。H4 黑体，普通字体，比H3缩进更多，上边一空行。H5 黑体（斜体），与H4相同缩进，上边一空行。H6 黑体，与正文有相同缩进，上边一空行。Hn可以有对齐属性，ALIGN#，“#”表示Left（标

8、题居左）、Center（标题居中）和Right（标题居右）。例如： 标题2 （2）：它是段落标记。它的作用是将其内的文字另起一段显示。段与段之间有一个空行。HTML的浏览器是基于窗口的，用户可以随时改变显 示区的大小，所以HTML将多个空格以及回车等效为一个空格，这是和绝大多数字处理器不同的。段落标记也可以有多种属性，比较常用的属性是Aligh#。“#”可以是Left、Center或Right，其含义同上文。4文件的路径名（1）绝对路径：绝对路径是写出全部路径，系统按照全部路径进行文件的查找。绝对路径中的盘符后用“：”或“：/”，各个目录名之间以及目录名与文件名之间，应用“”或“/”分隔开。绝

9、对路径名的写法及其含义如表所示。（2）相对路径：相对路径是以当前文件所在路径和子目录为起始目录，进行相对的文件查找。通常都采用相对路径，这样可以保证站点中的文件整体移动后，不会产生断链现象。相对路径名的写法及其含义如表所示。绝对路径名 含 义 HREF=“/TD/HTML0.htm” HTML0.htm在域名为的服务器中的TD目录下 HREF=“E:DRAWTDTDHTML0.htm” HTML0.htm放在E盘的DRAWTD目录下的TD子目录中 绝对路径名的写法及其含义 5URLURL（Uniform Resource Locator）即统一资源定位器，WWW上的地址编码，是文件名的扩展。它

10、指出了文件在Internet中的位置。它存在的目的在于统一WWW上的地址编码，给每一个网页指定的地址，这样就不会出现重复或由于编码不统一而出现无法浏览等问题。当用户查询信息资源时，只要给出URL地址，WWW服务器就可以根据它找到网络资源的位置，并将它传送给用户的计算机。通常，当用户用鼠标单击网页中的链接点时，就将URL地址的请求传送给了WWW服务器。相对路径名 含 义 HREF=“HTML0.htm” HTML0.htm是当前目录下的文件名 HREF=“DRAWTD/HTML0.htm” HTML0.htm是当前目录中“DRAWTD”目录下名字为HTML 0.htm的文件 HREF=“DRAW

11、TD/TD/HTML0.htm” HTML0.htm是当前目录中，“DRAWTD/TD”目录下名字为HTML0.htm的文件 HREF=“./HTML0.htm” HTML0.htm是当前目录的上一级目录下名字为HTML0.htm的文件 HREF=“././HTML0.htm” HTML0.htm是当前目录的上两级目录下名字为HTML0.htm的文件 在单机系统中，定位一个文件需要路径和文件名；对于遍布全球的Internet，显然还需要知道文件存放在哪个网络的哪台主机中才行。另外，单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在Internet上，各个网络，各台

12、主机的操作系统都不一样，因此必须指定访问该文件的方法。一个完整的URL地址通常由通信协议名（访问该资源所采用的协议，即访问该资源的方法）、Web服务器地址（存放该资源主机域名地址，在因特网上，主机名可以使用主机域名地址或IP地址，通常以字符形式出现）、文件在服务器中的路径和文件名四部分组成。例如/DRAWTD/TD/HTML0.html，其中http:/是通信协议名（http是超文本传输协议Hypertext Transfer Protocol），是Web服务器地址（主机域名地址），/DRAWTD/TD/是文件在服务器中的路径，HTML0.html是文件名。在文件名之后，可以加“#”号和锚点名

13、。有时也可以在文件名之后加问号（“？”），然后加查询字符串。与单机系统绝对路径和相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。上文所述的是绝对URL。相对URL是相对于用户最近访问 的URL。比如现在观看一个URL为http:/ /DRAWTD/TD/HTML0.html的文件，如果想看同一个目录下的另一个文件HTML1.html，可以直接使用HTML1.html，这时HTML1.html就是一个相对URL，它的绝对URL为/DRAWTD/TD/HTML1.html。 1.2 【案例2】“中国诗词佳句作者”网页1文字的字体大小和颜色（1）字体大小：HTML文件可以有7种字号

14、，1号最小，7号最大。默认字号为3，可以用设置默认字号。设置文本的字号有两种办法，一种是设置绝对字号，；另一种是设置文本的相对字号，。用第2种方法时“+”号表示字体变大，“-”号表示字体变小。（2）字体颜色：字体的颜色用指定，#可以是6位十六进制数，分别指定红、绿、蓝的值。也可以使用16种标准颜色，如表所示。色 彩 名 十六进制值 色 彩 名 十六进制值 Aqua（水蓝色） #00FFFF Navy（藏青色） #000080 Black（黑色） #000000 Olive（茶青色） #808000 Blue（蓝色） #0000FF Purple（紫色） #800080 Fuchsia（樱桃色）

15、 #FF00FF Red（红色） #FF0000 Green（绿色） #808080 Silver（银色） #C0C0C0 Gray（灰色） #008000 Teal（茶色） #008080 Line（石灰色） #00FF00 While（白色） #FFFFFF Maroon（褐红色） #800000 Yellow（黄色） #FFFF00 例如，“字体大小和颜色”网页（HTML2-2.htm）代码如下。字体大小和颜色字体大小和颜色字体大小和颜色字体大小和颜色字体大小和颜色闪烁的文本（3）闪烁：使用BLINK标记可以使文本闪烁，闪烁频率为1秒一次，举例如下。闪烁的文本2字体风格字体风格分为物理风

16、格和逻辑风格。字体的物理风格直接指定字体，物理风格的字体有黑体、斜体、下画线和打字机体等，如表所示。例如，“各种字体风格”网页代码如下（HTML2-3.htm）。各种字体风格标 记 符 功 能 标 记 符 功 能 粗体 删除线 大字体 下标 斜体 上标 删除线 固定宽度字体 小字体 下画线 各种字体风格 各种字体风格各种字体风格 各种字体风格各种字体风格 各种字体风格各种字体风格 各种字体风格字体的逻辑风格用来指定文本的作用，有强调、特别强调、源代码、例子、键盘输入、变量、定义、引用、较小、较大、上标和下标。3边框包围的文字可以通过标记定义文字的边框。输入下面的HTML代码（保存在名称为“HT

17、ML2-4.htm”文件中）。图像的大小和边框增加了边框的文字4添加注释无论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。实际上，添加注释是任何程序开发工作必须遵循的规范之一。HTML的注释有开始标记符“”构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。该标记可以添加在HTML代码的任何位置。 1.3 【案例3】“鲸鱼和螃蟹”网页 1调整图像大小和给图像加边框在网页中插入图像时使用的标记是，用来加载GIF图像与动画，“SRC”属性用来输入图像的路径。在网页中加载GIF动画的方法与加载GIF图像的方法一样。GIF动画文件的扩展名也是.gif，文件

18、格式是GIF89A。（1）调整图像大小：使用标记中的HEIGHT和WIDTH属性可以调整图像的大小。HEIGHT（决定图像的高）和WIDTH（决定图像的宽）的取值单位为像素。（2）给图像加边框：使用标记中的BORDER属性可以给图像加边框。BORDER的取值单位为像素，当它的取值为0或者不加BORDER属性时，则没有边框。通过标记中的HEIGHT和WIDTH属性调整图像，虽然可以改变图像在网页中的大小，但是调整过大会使图像严重失真。合理设置HEIGHT和WIDTH属性，才能得到最好的显示效果。2背景平铺图像和图像文字说明（1）设置背景平铺图像：使用标记中的BACKGROUND属性，可设置网页的

19、平铺背景图像，其格式如下。 （2）添加图像文字说明：为了增强图像在网页中的显示效果，可以为图像添加文字说明。当鼠标移到图片上方时，会出现说明文字。在关闭浏览器中的载入图像命令时，说明文字可以替代图像。使用标记的ALT属性可以为图像添加文字说明。3调整图像和文本的相对位置在网页中，经常需要将图像和文本放在一起进行显示。使用标记的ALIGN属性可以调整图像与文本的相对位置。使用标记中的VSPACE和HSPACE属性可以调整图像与文本间的距离。VSPACE（图像与文本上下的距离）和HSPACE（图像与文本左右的距离）的单位均为像素。标记中的ALIGN属性用于调整图像与文字的对齐方式，主要含义如下所述

20、。（1）ALIGN项缺省时：图像的底部与其他文本或图像的底部对齐。（2）ALIGN=top：图像的顶部与其他文本或图像的顶部对齐。（3）ALIGN=middle：图像的中间与其他文本或图像的中部对齐。（4）ALIGN=bottom：图像的底部与其他文本或图像的底部对齐。（5）ALIGN=left：图像位于屏幕左边。（6）ALIGN=right：图像位于屏幕右边。 1.4 【案例4】“图像切换”网页 1添加背景音乐使用标记可以在网页中插入背景音乐。标记可以放在与标记内的任何地方。引导音乐文件的属性是SRC，其格式如下。2在网页中插入Flash动画在网页中直接包含多媒体对象最常用的两个标记是标记和

21、标记。（1）标记：使用标记不仅可以在网页中插入Flash动画，还可以使用下载并显示由插件支持的其他多媒体应用程序。使用标记可以在网页中插入Flash对象同添加背景音乐的方法一样，标记可以放在与标记内的任何地方。引导Flash动画文件的属性是SRC，格式如下：当浏览器遇到标记时，会加载其中指定的文件并确定它的MIME类型。MIME信息告知浏览器正在下载的文件类型。然后浏览器查找与该MIME 类型一致的插件，如果有就使用，如果没有则会显示一条错误信息，并且提示用户下载该插件。（2）标记：该标记可以使网页中包含JavaApple、视频和音频等多媒体及其他文件。当浏览器遇到标记时，会加载相应的文件并根

22、据该标记包含属性的值来显示它。 1.5 【案例5】“链接技术演示”网页1链接文件使用的HTML标记链接也叫超文本链接。在网页中加入超文本链接，就是通过单击一部分文字、图像或图像中的一个区域，即可调出另一个网页或本网页的另一部分内容。HTML文件的链接是通过链接标记来实现的。在标记中除标记名“A”外还包括一些属性。HREF是链接标记中一个最常用的属性。该属性用来指出所要链接的文件的路径（或目录）和名称或URL；其简单的结构形式如下。文字所有写在起始标记和结束标记之间的文字构成一个实际的链接，当网页在浏览器内显示时，这些文字将以蓝色高亮度或带有下画线的形式出现。如果需要链接的文件都放在本机磁盘上，

23、则这种链接叫本地链接，它不必链接网络，只要本地的机器上有一个编辑器和浏览器就足够了。如果需要链接的文件在网络上，则需要网络链接。网络链接需要知道网址（URL）。2使用图像或动画的链接用图像或动画的链接，就是在单击图像或动画后，即可调出与之链接的网页文件或本网页中的一段内容。建立图像或动画的链接的方法是在链接标记的中间加入一个标记，其格式如下。加入了链接的图像或动画会自动产生一个外框，以示与一般的图像或动画的区别。 1.6 【案例6】“中国的世界文化遗产”网页1在同一个网页中建立链接的HTML标记在同一个网页文件中建立链接，需要做以下工作。（1）在文件的前面需要列出链接的标题文字，它们相当于文章

24、的目录。同时将这些文字与相应的锚名（即定位名）建立链接。所谓“锚名”是指网页中能被链接到的一个特定位置。建立链接时，要在锚名前加一个“#”符号，其格式如下。标题名字（2）为被链接的内容起一个名字，该名字叫锚名，其格式如下。锚名的定义要放在相应标题对应的内容前面。2建立电子邮件链接如果将HREF属性值指定为“MAILTO:电子邮件地址”，就可以获得电子邮件链接的效果。例如，使用下面的HTML代码可以设置电子邮件的超链接。邮箱地址：shenda 当浏览网页的用户单击了指向电子邮件的超级链接后，系统将自动启动邮件客户程序（对于安装了Windows 98/2000以上操作系统的计算机，默认时启动Out

25、look Express），并将指定的邮件地址填写到“收件人”栏中，用户可以编辑并发送该邮件。如果是第一次启动Outlook Express，会要求进行软件设置。3链接到其他页面中的锚点通过前面的案例，可以看出从一个文件链接到另外一个文件与同一个文件中的链接的格式有所不同。那么，能不能使用一个命令，链接到其他文件的指定位置呢？在网页中建立文字链接的HTML代码是文字。只要将“被链接的文件名或URL”替换为“要链接的文件名或URL加#加锚点名称”即可。例如，天坛标记，即可建立一个到HTMLABC.htm网页文档中的“天坛”锚点的链接。 1.7 【案例7】“FLASH技术说明”网页 1设置框架和修

26、饰框架（1）设置框架：框架就是把一个网页页面分成几个单独的区域（窗口），每个区域显示一个独立的网页，该部分可以是一个独立的HTML文件。因此，框架可以实现在一个网页内显示多个HTML文件。一个有n个区域的框架网页来说，每个区域有一个HTML文件，整个框架结构也是一个HTML文件，因此该框架网页有n+1个HTML文件。设置框架需要使用标记来取代标记。标记有两个属性： ROWS=“n1,n2,n3”：纵向设置框架； COLS=“n1,n2,n3”：横向设置框架。其中，n1、n2、n3为开设的框架占整个页面的百分数。（2）修饰框架：修饰框架需要使用标记，它在标记之间。标记有6个属性，介绍如下。 RC

27、=“URL”属性：用来链接一个HTML文件，如果没有该属性，则窗口内无内容。 NAME=“窗口名称”属性：给窗口命名。MARGINWIDTH=n属性： 用来控制窗口内的内容与窗口左右边缘的间距。n为像素个数，默认值为1。MARGINHEIGHT=n属性：用来控制窗口内的内容与窗口上下边缘的间距。n为像素个数，默认值为1。SCROLING=YES、NO或AUTO属性：用来确定窗口是否加滚动条。选YES时，为要滚动条；选NO时，为不要滚动条；选AUTO时，可以加滚动条，根据内容是否可以完全在窗口内全部显示出来，来决定是否要滚动条。默认为AUTO 。NORESIZE属性：如果设置了此属性，则窗口不可

28、被用户用鼠标调整大小；如果没设置此属性，则窗口可以被用户用鼠标调整大小。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）开设横向窗口：横向

29、开设三个窗口，各占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。在浏览器中观察该网页的结果。打开

30、记事本程序，输入如下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文件的内容。如果单

31、击左边窗口内的“鲸鱼和螃蟹”链接文字，则可以在右边窗口内显示出HTML3-1.htm文件的内容。如果单击左边窗口内的“图像切换”链接文字，则可以在右边窗口内显示出HTML4.htm文件的内容。如果单击左边窗口内的“链接技术演示”链接文字，则可以在右边窗口内显示出HTML5.htm文件的内容。打开记事本程序，输入如下HTML代码。将该HTML文件以名字HTML7-5.htm保存在“DRAWTD”目录下。 其中，HTMLLEFT.htm的HTML文档如下。左框架窗口内的链接文字中国诗词佳句-作者鲸鱼和螃蟹图像切换链接技术演示在浏览器中观察该网页的结果如图所示，单击“鲸鱼和螃蟹”链接文字的结果如图所

32、示。（2）在标记中使用：如果链接的文件均在一个窗口内显示，则可以使用标记。标记的格式如下：其中，window-name可以是窗口的名字，也可以是： _blank：在一个新的浏览器窗口中打开链接的文档。 _parent：在框架的父框架或父窗口打开链接的文档。 _self：默认打开方式，将链接的文档载入链接所在的同一框架或窗口。 _top：将链接的文档载入整个浏览器窗口，从而删除所有框架。 1.8 【案例8】“最新消息公告”网页1什么是DHTML技术动态HTML（Dynamic HTML，DHTML）是HTML、CSS和客户端脚本的一种集成。DHTML技术在原有技术的基础上，可分为3个方面：一是H

33、TML，也就是页面中的各种页面元素对象。它们是被动态操作的内容；二是CSS，CSS属性也是动态操作的内容，从而获得动态的格式效果；三是客户端脚本（例如JavaScript），它实际操纵Web页上的HTML和CSS。使用DHTML技术，可以使网页设计者创建出能够与用户交互并包含动态内容的页面。实际上，DHTML是网页设计者可以动态操纵网页上的所有元素，甚至是在这些页面被装载以后的一种语言。利用DHTML，网页设计者可以动态地隐藏或显示内容、修改样式定义、激活元素以及为元素定义行为。DHTML还可以使网页设计者在网页上显示外部信息，方法是将元素捆绑到外部数据源（如文件和数据库）上。所有这些功能都可

34、以用浏览器完成而无需请求Web服务器，同时也无需重新装载网页。这是因为一切功能都包含在HTML文件中，随网页一起下载到浏览器端。可见，DHTML技术是一种非常实用的网页设计技术。实际上，DHTML早已广泛地应用到了各类网站中，成为高水平网页必不可少的组成部分。2DHTML的使用技巧IE为DHTML对象提供了4个可读写的属性来动态操作页面元素的内容：innerText、outerText、innerHTML和outerHTML。使用时应注意以下两点：（1）innerText、outerText属性的值是作为普通文本显示的，即使它含有HTML标签也如实反映出来；而innerHTML、outerHT

35、ML呈现的是经HTML解析后的文本，它可以反应属性中HTML标签的表现效果。（2）对网页中对象的outerText、outerHTML属性赋值（即写操作），会删除该对象。 1.9 【案例9】“水中倒影”网页1ANFY软件介绍ANFY是国外一个著名的网页特效制作软件，利用ANFY可以制作出数十种Java网页特效，例如，鼠标轨迹水纹效果等。通过图1-9-2可以看出，它的工作界面是一个简单易懂、赋有亲和力的工作界面。ANFY 1.4.5中文版中包括了40个Java applets程序及一个称为ANFY向导的窗口程序。在 “水中倒影”网页案例中，首先选择了“图像效果”中的LAKE应用程序，这部分就是A

36、NFY中的“Java applets程序”，然后单击【下一步】按钮，进入了第1级设计界面，这就是ANFY向导的窗口程序。由于ANFY软件的制作者生活在英语国家，所以软件的中文汉化中有一些语言不够准确，例如第1级设计界面中的“图像文”文本框，更确切的叫法应该是“图像名”，但是这些并不影响软件的使用。ANFY软件定位于所有喜欢采用大量图形的网站制作者，其中的程序全部使用Java编写，和GIF动画相比，使用Java制作动态效果可以大大减小文件的字节数，提高网页的浏览速度。ANFY是一个免费软件，它的下载地址是：/。2ANFY软件中的菜单命令（1）保存计划任务：在“种类”栏中选择一个特效类别，然后在右

37、边的下拉列表框中选择一种特效后，单击【下一步】按钮，进入第1级设计界面。此时单击“文件”“保存计划任务”菜单命令，调出“另存为”对话框，在该对话框中选择要保存文件的路径及文件名，即可将当前未完成的Java网页特效保存为扩展名为.AJP的文件中。（2）打开计划任务：单击“文件”“打开计划任务”菜单命令，调出“打开”对话框，在该对话框中选择原来保存的Java网页特效文件，再单击【打开】按钮，即可导入该设置。（3）更改浏览器：单击“选项”“更改浏览器”菜单命令，调出“更改预览浏览器”对话框，如图所示。单击“系统默认浏览器”复选框，取消该设置，此时【查找】按钮被激活。单击【查找】按钮，调出“打开”对话

38、框，选择浏览器文件的路径及文件名后单击【打开】按钮，在“更改预览浏览器”对话框的文本框中会显示该浏览器的名称。单击【确定】按钮，即可设置该浏览器为ANFY软件的默认浏览器。 3使用ANFY软件在已有的网页中插入Java网页特效（1）打开ANFY软件，在“种类”栏中选择“图像”单选按钮，在右边的下拉列表框中选择LENS列表项，选中LENS特效。单击【下一步】按钮，调出第1级设计界面。（2）在第2级到第3级设计界面中进行相应设置后，进入“程序代码”界面。单击【复制全部文件到】按钮，调出“另存为”对话框。利用该对话框将文件保存到“DRAWTD”目录下的“HTML9”文件夹中，并为文件命名。（3）在J

39、ava目录下新建一个记事本文件，在该文件内输入下面的代码：水中倒影（4）在ANFY软件的“程序代码”界面内，将“HTML代码”列表框中的所有代码选中，然后单击【复制进剪贴板】按钮，复制这段代码。回到记事本文件的编辑界面，将光标移到和标记中间，单击“编辑”“粘贴”菜单命令，将ANFY软件中的复制的代码粘贴到此位置。（5）保存该记事本文件后，将文件的扩展名改为.HTML。双击该文件，在浏览器中查看插入Java程序后网页在浏览器中的显示效果。 1.10 【案例10】“飘动的枫叶”网页 1网页特效精灵软件介绍安装完“网页特效精灵”软件后，会在桌面上显示一个该软件的快捷方式图标。双击此图标，即可调出“网

40、页特效精灵”。该软件的工作界面如图1-10-2所示。网页特效精灵是网页特效工具，它包含两种特殊效果，分别为自定义特效（精灵特效）和不可自定义特效，适合不同水平的使用者。同ANFY软件一样，网页特效精灵软件的界面也非常赋有亲和力。由于该软件完全由国人编写，所以更适合中国人的使用习惯。网页特效精灵中共包括345个网页特效，远远多于ANFY软件。根据应用对象的不同，分为精灵特效、时间特效、文字特效、鼠标特效、图片特效、娱乐特效、菜单特效和其他特效9大类。另外，为了方便使用者加入自己的效果，可以通过该软件的菜单命令，插入其他网页特效。网页特效精灵软件使用JavaScript代码实现网页特效，在网页文件

41、中的代码之外，不需要执行其他文件。但是JavaScript的代码比较复杂，不建议初学读者修改，可直接使用。“网页特效精灵”软件的下载地址为/。2网页特效精灵软件中的菜单命令（1）设置代码字体和背景颜色：在“网页特效精灵”的工作界面中单击“软件设置”“代码字体”菜单命令，调出Windows的“字体”对话框。利用该对话框可以设置“代码窗口”中代码的字体、颜色和样式，设置完成后单击【确定】按钮，“代码窗口”中的代码字体即可改变。在网页特效精灵中单击“软件设置”“背景颜色”菜单命令，调出Windows的“颜色”对话框。在该对话框中选中一个颜色后，单击【确定】按钮，即可改变“代码窗口”的背景颜色。（2）

42、添加个人特效：单击“网页工具”“个人特效箱”菜单命令，“代码窗口”变为“个人特效箱”设置栏。在“特效名称”文本框中输入要添加的特效的名称，单击“特效地址”后面的【浏览】按钮 ，调出“选择网页文件”对话框。在该对话框中选择包含特效的网页文件，单击【打开】按钮，即可将选中的文件添加到“个人特效箱”内，并在“个人特效箱”设置栏的下边显示出该特效的名称和地址。下次如果要使用该特效时，只要在导航菜单中单击【个人特效】按钮，即可在工作界面的左边显示该网页特效，单击其中一个特效名称，即可在“代码窗口”中显示该特效网页的代码，使用方法和软件内置的特效相同。 第2章 Dreamweaver 8基础2.1 【案例

43、11】“Dreamweaver 8学习天地”网页2.2 【案例12】“长城世界建筑史上一大奇迹”网页 2.3 【案例13】“中国名胜故宫”网页 2.4 【案例14】“中国名胜故宫”网页修改 2.5 【案例15】“国画欣赏”网页 2.1 【案例11】“Dreamweaver 8学习天地”网页1新建和打开网页文档（1）新建网页文档：单击“文件”“新建”菜单命令，即可调出“新建文档”对话框。从该对话框可以看出，利用它可以建立各种类型的文件。从“类别”列表框中选择“基本页”选项，然后选择“基本页”列表框中的“HTML选项”，再单击【创建】按钮，即可新建一个空白的HTML网页文档。另外，在“文档类型”下

44、拉列表框中可以选择文件类型，单击【首选参数】按钮可以调出 “首选参数”对话框。（2）打开网页文档：单击“文件”“打开”菜单命令，调出“打开”对话框。在该对话框内选中要打开的HTML文档，单击【打开】按钮，即可将选定的HTML文档打开。例如，可打开前面编写的名字为HTML1.HTML文档。另外，在“Macromedia Dreamweaver 8”对话框状态下，单击【打开】按钮，也可以调出“打开”对话框。2保存和关闭文档（1）单击“文档”“保存”菜单命令，可以原名字保存当前的文档。（2）单击“文档”“另存为”菜单命令，即可调出“另存为”对话框。利用该 对话框可以将当前的文档以其他名字保存。（3）

45、单击“文档”“保存全部”菜单命令，即可将当前正在编辑的所有文档以原名保存。（4）单击“文档”“关闭”菜单命令，即可关闭打开的当前文档。如果当前文档在修改后没有存盘，则会调出一个提示框，提示用户是否保存文档。（5）单击“文档”“全部关闭”菜单命令，即可关闭所有打开的文档。3页面属性设置将鼠标指针移到网页文档窗口的空白处，单击鼠标右键，调出一个快捷菜单，再单击快捷菜单内的“页面属性”菜单命令，调出“页面属性”对话框。另外，单击网页文档窗口的空白处，再单击网页文档“属性”栏内的【页面属性】按钮也可以调出“页面属性”对话框。利用“页面属性”对话框，可以设置页面的标题文本、页面字体、页面背景色或图像、页

46、面大小与位置、背景图像的透明度等。利用“页面属性”对话框设置网页页面参数的方法简介如下。（1）背景颜色设置：单击【背景颜色】按钮 ，会调出一个颜色面板。利用该颜色板可以设置网页的背景颜色。（2）背景图像设置：单击“页面属性”（外观）对话框中“背景图像”文本框右边的【浏览】按钮，调出“选择图像源文件”对话框。利用该对话框选择网页背景图像，再单击【确认】按钮，即可给网页背景填充选中的图像。如果图像文档不在本地站点的文件夹内，则在单击【确认】按钮后，会提示用户将该图像文档复制到本地站点的图像文件夹内。（3）文本颜色设置：单击【文本颜色】按钮，会调出颜色面板。利用它可以设置文本颜色，其方法与设置背景颜

47、色的方法一样。（4）页面四个方向的边距设置：通过四个文本框可以设置页面四个方向的边距，单位为像素。“左边距”和“右边距”设置只对IE浏览器有效，“上边距”和“下边距”设置只对Netscape Navigator浏览器有效。（5）页面文本的字体和大小设置：利用该对话框中的“页面字体”和“大小”下拉列表框可以设置页面中文本的字体和文本大小。（6）页面文字设置：单击选中“分类”列表框中的“标题/编码”选项，此时的“页面属性”对话框。利用该对话框可以设置网页标题、文档的类型和网页的编码等，在对话框底部还显示“站点”文件夹的位置等信息。（7）标题大小和颜色设置：单击选择“页面属性”对话框中“分类”栏中的

48、“标题”选项，此时“页面属性”（标题）对话框。在“标题字体”下拉列表框中选择一种标题的字体（此处选择“同页面字体”选项），在“标题1”到“标题6”栏可以设置标题的大小和颜色。（8）链接字属性的设置：单击选择“页面属性”对话框中“分类”栏中的“链接”选项，此时切换到“页面属性”（链接）对话框。可以利用该对话框内的“链接字体”和“链接颜色”栏来设置链接文字的字体、大小、风格、颜色等。“变换图像链接”栏的作用是当图像不能显示时，将显示为该栏设置的颜色。“已访问链接”栏的作用是设置单击过的链接字的颜色。“活动链接”栏的作用是设置获得焦点的链接字的颜色。“下画线样式”栏的作用是设置链接字的下画线样式。（

49、9）跟踪图像属性设置：单击选择“页面属性”对话框中“分类”栏中的“跟踪图像”选项，此时切换到“页面属性”（跟踪图像）对话框。利用该对话框可以设置跟踪图像的属性，跟踪图像也叫描图。“跟踪图像”文本框用来设置在页面编辑过程中使用的描图图像的地址和名称。“透明度”栏的作用是调整描图的透明度。4建立本地站点建立本地站点就是将本地主机磁盘中的一个文件夹定义为站点，然后将所有文档都存放在该文件夹中，以便于管理。通常在设计网页前，应先建立本地站点。建立本地站点的方法如下。（1）在“文件”面板中的第一个下拉列表框中单击“管理站点”选项，调出“管理站点”对话框。单击“站点”“管理站点”菜单命令，也可以调出“管理

50、站点”对话框。（2）单击该对话框中的【新建】按钮，调出它的“新建”快捷菜单。（3）单击“新建”快捷菜单中的“站点”菜单命令，可调出“站点定义为”（基本）对话框。单击“站点”“新建站点”菜单命令，可以直接调出“站点定义为”（基本）对话框。（4）在“站点定义为”（基本）对话框内的第1个文本框中输入站点的名称（例如：“我的第1个站点”）。再单击【下一步】按钮，“站点定义为”（基本）对话框变为如图所示的内容。（5）如果要使用服务器技术（例如：ASP.NET等），可以单击选中第2个单选按钮。然后从它下面的下拉列表框（选中第2个单选按钮后才会出现）中选择要使用的服务器技术名称，否则单击选中第1个单选按钮。

51、此处单击选中第1个单选按钮。（6）单击【下一步】按钮，“站点定义为”（基本）对话框变为如图2-1-18所示（还没有选择文件夹）。如果在本地编辑网页，编辑好后再上传到服务器，可单击选中第1个单选按钮，通常选中该单选按钮。选中第2个单选按钮，可以直接对服务器上的文件进行编辑。单击 按钮，调出一个对话框，用来选择一个文件夹作为站点的根目录。要求该文件夹必须在此之前已经建立。此处选择第1个单选按钮，选择的文件夹路径为“E:DRAWTD”，直接将“E:DRAWTD”文件夹作为本地站点文件夹。（7）单击【下一步】按钮，“站点定义为”（基本）对话框。在第1个列表框中选择“无”选项，设置不连接到远程服务器。（

52、8）单击【下一步】按钮，调出“站点定义为”（基本）对话框中新的内容。此时对话框中将显示出“站点”设置的基本信息，最后单击“站点定义为”对话框中的【完成】按钮，回到“管理站点”对话框。（9）单击“管理站点”对话框中的【完成】按钮，完成站点的设置。此时“文件”面板，在第1个下拉列表框中将显示出“我的第1个站点”列表项目。（10）如果要重新进行站点设置，可单击“站点”“管理站点”菜单命令，重新调出“管理站点”对话框。单击选中站点名称，再单击【编辑】按钮即可。（11）将鼠标指针移到“文件”窗口的空白处，单击鼠标右键，调出一个快捷菜单。再单击快捷菜单内的“新建文件”菜单命令，可以新建一个网页文档，然后输

53、入网页的名字“index.html” 。双击该文档名字，可以进入该网页的编辑窗口。 2.2 【案例12】“长城世界建筑史上一大奇迹”网页1创建网页文字的其他方法（1）键盘输入和复制粘贴文字：最简单和最直接的输入方法是键盘输入，也可以在其他的程序或窗口中选中一些文本，按【Ctrl+C】组合键，将文字复制到剪贴板上；然后回到Dreamweaver 8“设计”视图的文档窗口中，按【Ctrl+V】组合键，将其粘贴到光标所在位置。在Dreamweaver 8中，对从外部导入数据的功能已经进行改善，不仅可以保留文字，还可以保留段落的格式和文字的样式。在“设计”视图文档窗口中，直接按【Enter】键的效果相

54、当于插入代码（从状态栏的左边可以看出），除了换行外，还会多空一行，这表示将开始一个新的段落。如果觉得这样换行后间距过大，可在输入文字后，按【Shift+Enter】组合键，这相当于插入代码，表示一个新行将产生在当前行的下面，但仍属于当前段落，并使用该段落的现有格式。在Dreamweaver 8“设计”视图文档窗口中，对文本的许多操作与在Word中的操作基本一样。例如，选取文字、删除文字和复制文字等。（2）使用“插入”（文本）面板：单击“插入”面板上的“文本”标签，如图所示。面板中有许多文本格式控制按钮，通过这些按钮可以方便地设置文本的格式。单击面板中的【字体标签编辑器】按钮 ，可以调出“标签编

55、辑器”对话框，。利用该对话框可以设置文字的字体、大小、颜色等，还可以编辑文字字体列表。2文字属性的设置文本的属性（标题格式、字体、字号、大小、颜色和对齐格式等）可以由图所示的文本“属性”栏和“文本”菜单来设定。（1）文字标题格式的设置：根据HTML代码规定，页面的文本有6种标题格式，它们所对应的字号大小和段落对齐方式都是设定好的。在“格式”下拉列表框内，可以选择各种格式，其中各选项的含义如下。“无”选项：无特殊格式的规定，仅决定于浏览器本身。 “段落”选项：正文段落，在文字的开始与结尾处有换行，各行的文字间距较小。 “标题1”至“标题6”选项：是标题1至标题6，约为中文1至6号字大小。 “预先

56、格式化的”选项：预定义的格式。（2）创建字体组合：Dreamweaver 8使用了字体组合的方法，取代了简单地给文本指定一种字体的方法。字体组合就是多个不同字体依次排列的组合。在设计网页时，可以给文本指定一种字体组合。在网页浏览器中浏览该网页时，系统会按照字体组合中指定的字体顺序自动寻找用户计算机中安装的字体。采用这种方法可以照顾安装各种浏览器和不同操作系统的计算机。 单击“字体”下拉列表框的按钮，可以调出Dreamweaver提供的各种字体组合选项。单击某一个字体组合的名称，即可设置该字体组合。 单击字体组合列表项中的“编辑字体列表”选项，调出“编辑字体列表”对话 单击选中“编辑字体列表”对

57、话框中“字体列表”列表框内的“在以下列表中添加字体”选项。 在“可用字体”列表框内选中字体。然后双击该字体名称，即可在“选择的字体”列表框内显示出相应的字体名字；也可以单击选中某一个字体名字，再单击按钮 ，将选中的字体加到“选择的字体”列表框内。 按照上述方法，依次往“选择的字体”列表框内加入字体组合中的各种字体。同时，会看到在“字体列表”列表框内最下边随之显示出新的字体组合。单击【确定】按钮，即可完成字体组合的创建。 如果要删除字体组合中的一种字体，单击选中“选择的字体”列表框内该字体的名称，再单击 按钮，如果要删除一个字体组合，可在“字体列表”列表框内单击选中该字体组合，再单击“编辑字体列

58、表”对话框中的 按钮。 如果还要增加字体组合，可以单击“编辑字体列表”对话框中的 按钮，使“字体列表”列表框内增加“在以下列表中添加字体”选项。（3）文字其他属性的设置：利用“属性”栏和“文本”菜单命令，设置文字的大小、颜色、对齐方式、缩进和风格等属性的方法如下。文字大小设置：字号的数字越大，文字也越大。默认的字号是13。单击选中文字“属性”栏内的“大小”下拉列表框中的一种字号数字，即可完成字号的设定。在“大小”下拉列表框内还可以通过选择“极小”到“极大”以及“较小”和“较大”列表项目的方法设置文字的大小。文字颜色的设置： 单击文字“属性”栏内的【文本颜色】按钮，调出颜色面板，利用它可以设置文

59、字的颜色。文字的对齐设置：文字的对齐是指一行或多行文字在水平方向的位置，它有左对齐、居中对齐和右对齐三种。对齐可以在选中页面内的文字后，单击文字“属性”栏内的（左对齐）、（居中对齐）和（右对齐）按钮来实现。如果文字是直接输入到页面中，则会以浏览器的边界线进行对齐。文字的缩进设置：要改变段落文字的缩进量，可以选中文字，再单击文字“属性”栏内的（减少缩进，向左移两个单位）按钮或 （增加缩进，向右移两个单位）按钮。文字风格的设置：选中网页中的文字，单击【粗体】按钮，即可将选中的文字设置为粗体；单击【斜体】按钮，即可将选中的文字设置为斜体。利用菜单命令也可以改变文字风格。在“文本”“样式”菜单的子菜单

60、中，单击其中的某一个菜单命令，可以将选中的文字样式作相应的改变。文字样式设置： 在“样式”下拉列表框中单击“管理样式”项目，可以调出“编辑样式表”对话框。单击【新建】按钮就可以为文字添加样式设置。3文字的列表设置（1）设置列表设置无序列表和有序列表：选中要排列的文字段，再单击文字“属性”栏内的按钮，可设置无序列表；选中要排列的文字段，再单击文字“属性”栏内的按钮，可设置有序列表。定义列表方式：选中要排列的文字段，再单击“文本”“列表”“定义列表”菜单命令。采用这种列表方式的效果是：奇数行靠左，偶数行向右缩进。（2）修改列表属性首先将列表的文字按照无序或有序列表方式进行列表。然后将光标移到列表文