《网页制作实用教程》电子教案第1章.ppt

网页制作实用教程,新世纪计算机基础教育丛书 主编 谭浩强,总 目 录,第1篇 基础知识第1章 概述第2章 HTML简介第2篇 网页制作第3章 Dreamweaver使用基础第4章 建立基本的网页第5章 超 链 接第6章 图 像,第7章 表 格第8章 框 架第9章 表 单第10章 层、行为和时间线第11章 管理站点第3篇 图像处理第12章 Fireworks的基本操作第13章 编辑图像第14章 设置图像的综合效果第15章 Web图像处理,第4篇 动画制作第16章 Flash的工作环境第17章 绘制图像第18章 制作动画第19章 动画的交互与声音第20章 动画的导出和发布,第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默契配合，甚至可以直接嵌入网页的任一位置，非常方便。,