网页制作使用教程第1章.ppt

网页制作网页制作实用教程实用教程新世纪计算机基础教育丛书新世纪计算机基础教育丛书 主编主编 谭浩强谭浩强 总总 目目 录录第第1 1篇篇 基础知识基础知识第第1 1章章 概述概述第第2 2章章 HTMLHTML简介简介第第2 2篇篇 网页制作网页制作第第3 3章章 DreamweaverDreamweaver使用基础使用基础第第4 4章章 建立基本的网页建立基本的网页第第5 5章章 超超 链链 接接第第6 6章章 图图 像像第第7 7章章 表表 格格第第8 8章章 框框 架架第第9 9章章 表表 单单第第1010章章 层、行为和时间线层、行为和时间线第第1111章章 管理站点管理站点第第3 3篇篇 图像处理图像处理第第1212章章 FireworksFireworks的基本操作的基本操作第第1313章章 编辑图像编辑图像第第1414章章 设置图像的综合效果设置图像的综合效果第第1515章章 WebWeb图像处理图像处理第第4 4篇篇 动画制作动画制作第第1616章章 FlashFlash的工作环境的工作环境第第1717章章 绘制图像绘制图像第第1818章章 制作动画制作动画第第1919章章 动画的交互与声音动画的交互与声音第第2020章章 动画的导出和发布动画的导出和发布第第1篇篇 基础知识基础知识第第1章章 概概 述述1.1 网页的基本概念网页的基本概念1.2 网页制作的一般过程网页制作的一般过程1.3 网页制作工具网页制作工具1.1 网页的基本概念网页的基本概念因特网（因特网（Internet）是一个世界范围的计算机互联网络，由是一个世界范围的计算机互联网络，由各种不同类型和规模的独立运行和管理的计算机网络组各种不同类型和规模的独立运行和管理的计算机网络组成。成。网页是能够被浏览器软件识别的文件，有时也把用浏览器网页是能够被浏览器软件识别的文件，有时也把用浏览器看到的网页文件的内容叫做网页或页面。网页制作就是看到的网页文件的内容叫做网页或页面。网页制作就是编写网页文件。网页文件的编辑需要使用一种称为编写网页文件。网页文件的编辑需要使用一种称为HTML（hypertext markup language，超文本标记语言）超文本标记语言）的语言。的语言。浏览器是专门用于浏览网页的软件，如浏览器是专门用于浏览网页的软件，如Microsoft的的IE、Netscape的的Navigator等。当连通等。当连通Internet，启动计算机中启动计算机中的浏览器后，浏览器就会按照地址栏中的地址找到网页的浏览器后，浏览器就会按照地址栏中的地址找到网页文件并显示在屏幕上。文件并显示在屏幕上。浏览网页时，移动鼠标，光标会在某些文字或图像上浏览网页时，移动鼠标，光标会在某些文字或图像上显示为手的形状，这就是超链接，也叫热点或热区，显示为手的形状，这就是超链接，也叫热点或热区，表示单击该处，可以链接到该提示所指的网页。要表示单击该处，可以链接到该提示所指的网页。要在在Internet上查找信息，可以通过用鼠标单击网页上查找信息，可以通过用鼠标单击网页中的超链接链接到存放在世界各地计算机中的一个中的超链接链接到存放在世界各地计算机中的一个个页面。个页面。一个网页上不仅包含文字信息，如字、词等，还包含一个网页上不仅包含文字信息，如字、词等，还包含有图像、音频、视频等多媒体信息，以及可链接到有图像、音频、视频等多媒体信息，以及可链接到其他地方的超链接，允许用户在读文档时，从文档其他地方的超链接，允许用户在读文档时，从文档的一个地方跳到另一个地方而不必按部就班地一行的一个地方跳到另一个地方而不必按部就班地一行行进行。这种形式的文本就称为超文本。行进行。这种形式的文本就称为超文本。网页就是用网页就是用HTML语言编写的超文本。语言编写的超文本。1.2 网页制作的一般过程网页制作的一般过程制作网页如同泼墨作画，首先要进行构思，然后再加以实制作网页如同泼墨作画，首先要进行构思，然后再加以实现。构思阶段需要考虑以下内容。现。构思阶段需要考虑以下内容。页面主题：页面主题：本页面中心问题是什么。本页面中心问题是什么。页面内容：页面内容：用什么内容反映主题，如文字、图片、声音、用什么内容反映主题，如文字、图片、声音、动画等。动画等。结构布局：结构布局：将什么内容放在什么地方。将什么内容放在什么地方。色彩搭配：色彩搭配：彩色页面如同五彩缤纷的大自然，能给人美的彩色页面如同五彩缤纷的大自然，能给人美的享受，然而色彩搭配必须得当。享受，然而色彩搭配必须得当。概括起来只有两个原则：一是为读者提供有用的信息，二概括起来只有两个原则：一是为读者提供有用的信息，二是要美观。如何把反映主题的内容按照设计的形式表现是要美观。如何把反映主题的内容按照设计的形式表现给读者呢？这要借助于一种称为超文本标记语言的规则给读者呢？这要借助于一种称为超文本标记语言的规则加以实现。加以实现。超文本标记语言是一种简单的代码系统，利用特定的超文本标记语言是一种简单的代码系统，利用特定的标记来产生各种特定的效果，比如控制超文本显示标记来产生各种特定的效果，比如控制超文本显示的字体、字号、颜色、位置，加入表格，插入图像、的字体、字号、颜色、位置，加入表格，插入图像、声音、超链接等。然而由于直接使用声音、超链接等。然而由于直接使用HTML制作网制作网页比较繁琐，故许多公司开发出许多软件来帮助用页比较繁琐，故许多公司开发出许多软件来帮助用户快速编制户快速编制HTML文档，如微软的文档，如微软的Frontpage、Macromedia的的Dreamweaver等。这些软件和等。这些软件和HTML统称为网页制作工具。统称为网页制作工具。1.3 网页制作工具网页制作工具HTML作为最基本的网页编辑语言，能制作出网页作为最基本的网页编辑语言，能制作出网页的各种效果。然而只有用浏览器打开含有的各种效果。然而只有用浏览器打开含有HTML标记的网页文件时，才能看到设计的效果，而且，标记的网页文件时，才能看到设计的效果，而且，它毕竟是一种代码，网页制作人员必须记住一些它毕竟是一种代码，网页制作人员必须记住一些标记。因此，为了使设计网页更加简单方便，产标记。因此，为了使设计网页更加简单方便，产生了许多专用的网页编辑工具，主要分为三大类。生了许多专用的网页编辑工具，主要分为三大类。1.HTML代码编辑工具代码编辑工具 这种软件把各种这种软件把各种HTML的标记以按钮或菜单的形式的标记以按钮或菜单的形式提供给用户，当需要加入某种标记时，只需单击相提供给用户，当需要加入某种标记时，只需单击相应的按钮或菜单，标记就会自动加入到文件中，设应的按钮或菜单，标记就会自动加入到文件中，设计人员只需在标记中间加入自己的文字、图像、声计人员只需在标记中间加入自己的文字、图像、声音等内容。典型的有音等内容。典型的有HomeSite、HotDogProfessional、HTMLedPro、WebEditPRO等，使用这种工具虽然省去了输入标记的时间，但等，使用这种工具虽然省去了输入标记的时间，但设计人员仍然必须对各种标记的格式和功能非常熟设计人员仍然必须对各种标记的格式和功能非常熟悉，即使这样，编辑复杂页面仍然会显得繁杂。悉，即使这样，编辑复杂页面仍然会显得繁杂。2.所见即所得工具所见即所得工具所谓所见即所得，就是在编辑网页时看到的效果与使所谓所见即所得，就是在编辑网页时看到的效果与使用浏览器时看到的效果基本一致，最终保存为用浏览器时看到的效果基本一致，最终保存为HTML型文件，这可给网页设计人员带来极大的方型文件，这可给网页设计人员带来极大的方便。如果希望建立一个美观而又不复杂的站点，这便。如果希望建立一个美观而又不复杂的站点，这种工具比较合适，可以很轻松地制作想要的效果，种工具比较合适，可以很轻松地制作想要的效果，典型的软件是典型的软件是Drumbeat和和NetObjectFusion。但这但这种软件有时并不能完全控制设计效果，也就是说在种软件有时并不能完全控制设计效果，也就是说在设计阶段看到的与最终在浏览器中看到的效果可能设计阶段看到的与最终在浏览器中看到的效果可能不完全一样，有时即使经过多次调试也不理想，这不完全一样，有时即使经过多次调试也不理想，这时还需要对它生成的时还需要对它生成的HTML文件进行编辑。文件进行编辑。3.混合型工具混合型工具混合型工具能在所见即所得的工作环境下完成主要的混合型工具能在所见即所得的工作环境下完成主要的工作，同时也能切换到一个文本编辑器，对工作，同时也能切换到一个文本编辑器，对HTML源代码进行直接的调整。典型的混合型工具有源代码进行直接的调整。典型的混合型工具有Macromedia 的的Dreamweaver和和Microsoft的的FrontPage等。等。除编辑除编辑HTML文件外，制作网页还需要处理大量的图文件外，制作网页还需要处理大量的图像、动画、声音文件，因此必须掌握一种图像处理像、动画、声音文件，因此必须掌握一种图像处理软件。典型的图像处理软件有软件。典型的图像处理软件有Adobe公司的公司的Photoshop、Macromedia公司的公司的Fireworks，典型的典型的动画软件有动画软件有Macromedia公司的公司的Flash，Ulead公司的公司的Cool3D，GIF Animator等。等。Dreamweaver是一个所见即所得的网页编辑器，支持是一个所见即所得的网页编辑器，支持最新的最新的DHTML和和CSS标准。使用它的时间线和分标准。使用它的时间线和分层功能，能够快速创建极具表现力和动感效果的网层功能，能够快速创建极具表现力和动感效果的网页；利用目标浏览器检查特性，可以创建兼容各种页；利用目标浏览器检查特性，可以创建兼容各种平台和浏览器的网页；利用巡查（平台和浏览器的网页；利用巡查（roundtrip）技术，技术，在可视编辑器中进行编辑时，还可以在在可视编辑器中进行编辑时，还可以在HTML检视检视器中同时看到源代码的改变情况。器中同时看到源代码的改变情况。Dreamweaver可可以生成尽可能少的代码量，并且不会任意修改其他以生成尽可能少的代码量，并且不会任意修改其他工具所生成的源代码，它不仅提供了强大的网页编工具所生成的源代码，它不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制。辑功能，而且提供了完善的站点管理机制。Fireworks是一个专业化的是一个专业化的Web图像设计程序，将位图图像和图像设计程序，将位图图像和矢量图形的处理合二为一，可以快速在位图图像和矢量图像矢量图形的处理合二为一，可以快速在位图图像和矢量图像两种编辑状态之间切换，避免了启动多个应用程序的麻烦，两种编辑状态之间切换，避免了启动多个应用程序的麻烦，可以对矢量图形应用那些只有在位图图像上才能应用的各种可以对矢量图形应用那些只有在位图图像上才能应用的各种技术。技术。Fireworks不仅可以生成各种格式的静态图像，还可不仅可以生成各种格式的静态图像，还可以生成包含以生成包含HTML和和JavaScript（交互网页编程语言）代码交互网页编程语言）代码的动态图像和的动态图像和GIF动画，甚至可以编辑整幅的网页，因此可动画，甚至可以编辑整幅的网页，因此可以直接生成在网页制作中常用的各种风格的动态按钮和翻转以直接生成在网页制作中常用的各种风格的动态按钮和翻转（rollover）图像，或生成图像映像热区（图像，或生成图像映像热区（hotspot）和切片和切片（slice）。）。在将图像导出到网页中时，在将图像导出到网页中时，Fireworks 会自动将会自动将相应的相应的HTML和和JavaScript代码放置到网页中的正确位置上，代码放置到网页中的正确位置上，从而实现丰富多彩的网页动态效果，而用户不必学习从而实现丰富多彩的网页动态效果，而用户不必学习HTML和和JavaScript。Flash是一个精巧的网页动画设计软件，它是一种交互式是一个精巧的网页动画设计软件，它是一种交互式动画设计工具，可以将音乐、声效、动画以及富有新意动画设计工具，可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。的界面融合在一起，以制作出高品质的网页动态效果。Flash提供了许多用于图形的工具，从而可以创建出具提供了许多用于图形的工具，从而可以创建出具有专业水准的图形，也可以借助于导入功能将其他在绘有专业水准的图形，也可以借助于导入功能将其他在绘图或照片编辑程序中创建的美术作品应用在当前动画中。图或照片编辑程序中创建的美术作品应用在当前动画中。关键帧和渐变动画功能，使得制作动画非常容易，只需关键帧和渐变动画功能，使得制作动画非常容易，只需随意画两个图形（文字、方形或椭圆），也许不会超过随意画两个图形（文字、方形或椭圆），也许不会超过一分钟就可以快速制作出超出想象的动画。一分钟就可以快速制作出超出想象的动画。Flash的矢的矢量图形编辑以及关键帧、符号和渐变动画的使用，使得量图形编辑以及关键帧、符号和渐变动画的使用，使得所生成的动画文件非常小，网络用户不必等待就可以欣所生成的动画文件非常小，网络用户不必等待就可以欣赏到精彩的动画；即使较大的动画文件，也可通过流式赏到精彩的动画；即使较大的动画文件，也可通过流式播放技术边播放边下载动画，从而缓解了网页浏览者焦播放技术边播放边下载动画，从而缓解了网页浏览者焦急等待的情绪，即便是带有声音、动画和位图的大型文急等待的情绪，即便是带有声音、动画和位图的大型文件也几乎可以同步实时放映。件也几乎可以同步实时放映。音乐会使动画更具感召力，而其交互性能使用户参与其中，音乐会使动画更具感召力，而其交互性能使用户参与其中，饶有兴趣。饶有兴趣。Flash不仅可以导出动画文件，而且可以生不仅可以导出动画文件，而且可以生成嵌入调用动画代码的成嵌入调用动画代码的HTML文件，和文件，和Dreamweaver默默契配合，甚至可以直接嵌入网页的任一位置，非常方便。契配合，甚至可以直接嵌入网页的任一位置，非常方便。