网页制作的常用软件

第四节　网页制作的常用软件

一、图像处理软件

1.　Photoshop CS3介绍

Photoshop是Adobe公司旗下最为著名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意、图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。

Photoshop虽然是一款图像处理软件，但也是设计网页图像的最佳工具之一。因为网页图像设计也属于平面设计，而Photoshop除了具有图像处理功能外，还含有许多能让用户把图像有效地保存为Web格式的特性。

2.　Photoshop的功能特色

虽然Photoshop没有网站互动的功能，但具有各种处理图像的功能，可分为图像编辑、图像合成、校色调色及特效制作部分。

图像编辑是图像处理的基础，可以对图像做各种变换，如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，可得到让人非常满意的效果。

图像合成则是将几幅图像通过图层操作、工具应用，合成完整的、传达明确意义的图像，这是美术设计的必经之路。Photoshop提供的绘图工具让外来图像与创意很好地融合，可以使图像的合成天衣无缝。

校色调色是Photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜色之间进行切换，以满足图像在不同领域如网页设计、印刷、多媒体等方面的应用。

特效制作在Photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由Photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于Photoshop研究的原因。

二、动画制作软件

1.　Flash CS3介绍

Adobe Flash CS3是Adobe公司收购Macromedia公司后将享誉盛名的Macromedia Flash更名为Adobe Flash后的一款动画软件。Flash软件可以实现多种动画特效。动画都是由一帧帧的静态图片在短时间内连续播放而造成的视觉效果，是表现动态过程、阐明抽象原理的一种重要媒体。

网页中的动画效果基本上是由Flash制作完成的。要制作网页中的动画，首先要根据网页图像中的效果以及切片图像创建Flash文档。然后依据想要展示的动画效果，通过Flash的各种功能，比如逐帧动画、补间动画、遮罩动画，或者引导层动画等制作网页动画。

2.　Flash CS3动画设计的三大基本功能

Flash动画设计的三大基本功能是整个Flash动画设计知识体系中最重要、也是最基础的，包括：绘制和编辑图形、补间动画和遮罩。这是三个紧密相连的逻辑功能，并且这三个功能自Flash诞生以来就存在。

（1）绘制和编辑图形

绘制和编辑图形不但是创作Flash动画的基本功，也是进行多媒体创作的基本功。只有基本功扎实，才能在以后的学习和创作道路上一帆风顺。

使用Flash Professional 8绘制和编辑图形——这是Flash动画创作的三大基本功的第一功。在绘图的过程中要学习怎样使用元件来组织图形元素，这也是Flash动画的一个巨大特点。

（2）补间动画

补间动画是整个Flash动画设计的核心，也是Flash动画的最大优点，它有动画补间和形状补间两种形式。

用户学习Flash动画设计，最主要的就是学习“补间动画”设计。

在应用影片剪辑元件和图形元件创作动画时，有一些细微的差别，你应该完整把握这些细微的差别。

（3）遮罩

遮罩是Flash动画创作中不可缺少的——这是Flash动画设计三大基本功能中重要的出彩点。

使用遮罩配合补间动画，用户可以创建更多丰富多彩的动画效果：图像切换、火焰背景文字、管中窥豹等都是实用性很强的动画。并且，从这些动画实例中，用户可以举一反三地创建更多实用性更强的动画效果。

遮罩的原理非常简单，但其实现的方式多种多样，特别是和补间动画以及影片剪辑元件结合起来，可以创建千变万化的形式，你应该对这些形式作个总结概括，从而使自己可以有的放矢、从容创建各种形式的动画效果。

三、网页编辑软件

1.　Dreamweaver CS3简介

Dreamweaver CS3是Adobe公司收购Macromedia公司后最新推出的Creative Suite 3设计套装中用于网页设计与制作的组件。作为全球最流行、最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台、跨浏览器的充满动感的网页，是目前制作Web站点、Web页和Web应用程序的理想工具。

2.　Dreamweaver CS3的主要特点

（1）网页编辑形式灵活

Dreamweaver将“设计”和“代码”编辑器集成在一起，既可以方便地进行源代码编辑，也可以使用鼠标方式添加和设置对象。

（2）使用可视化编辑环境

Dreamweaver是一种所见即所得的网页编辑器，既有效地减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。

（3）强大的CSS功能

CSS样式可以有效地控制网页对象的外观，如文本字体、颜色、图像位置等。Dreamweaver中有强大的CSS样式表编辑器，可以比较轻松地编辑CSS样式。

（4）站点管理功能完善

Dreamweaver提供了强大的站点管理功能，可以安全、系统地维护和管理各种规模的网站。

（5）集成性高

Dreamweaver与Fireworks、Flash、Shockwave具有良好的集成性，可以在这些Web创作工具之间自由地进行切换。

（6）媒体支持能力强

在Dreamweaver文档中，可以灵活加入Java、Flash、Shockwave、ActiveX以及其他媒体元素，也可以对各种多媒体元素进行处理。

（7）扩展能力强

Dreamweaver可以实现功能的扩展。利用Adobe公司免费提供的Dreamweaver插件，可以丰富Dreamweaver的媒体处理能力。

四、IIS的基本知识

Internet Information Services（IIS，互联网信息服务），是由微软公司提供的基于运行Microsoft Windows的互联网基本服务。最初是Windows NT版本的可选包，随后内置于Windows 2000、Windows XP Professional和Windows Server 2003中，但在普遍使用的Windows XP Home版本上并没有IIS。

（一）IIS的简介

1.　IIS的概念

IIS是Internet Information Services的缩写，是一个World Wide Web Server。Gopher Server和FTP Server全部包容在里面。 IIS意味着你能发布网页，并且有ASP（Active Server Pages）、Java、VBscript产生页面，有着一些扩展功能。IIS支持一些有趣的东西，像有编辑环境的界面（Frontpage）、有全文检索功能的Index Server、有多媒体功能的Net Show。其次，IIS是随Windows NT Server 4.0一起提供的文件和应用程序服务器，是在Windows NT Server上建立Internet服务器的基本组件。它与Windows NT Server完全集成，允许使用Windows NT Server内置的安全性以及NTFS文件系统建立强大灵活的Internet/Intranet站点。IIS（Internet Information Server，互联网信息服务）是一种Web（网页）服务组件，其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络（包括互联网和局域网）上发布信息成了一件很容易的事。

2.　IIS的作用

IIS用于设置在同一时间内允许打开的网站页面数。打开一个页面占一个IIS，打开一个站内框架页面占2到3个IIS；若图片等被盗链，在其他网站打开本站图片同样占一个IIS。假若设置参数为50个IIS，则这个站允许同时有50个页面被打开。但要在同一时间（极短的时间）有50个页面被打开，需要50个人同时操作，这个概率还是比较低的。所以，100个IIS支持日ip1000（同时访问网站人数必定远低于1 000人）以上都不是很大问题，除非网站被盗链或框架引发其他消耗。

3. 添加和运行准备

（1）IIS的添加

进入“控制面板”，依次选择“添加/删除程序”→“添加/删除Windows组件”，将“Internet信息服务（IIS）”前的小钩去掉（如有），重新勾选后按提示操作即可完成IIS组件的添加。用这种方法添加的IIS组件中将包括Web、FTP、NNTP和SMTP等全部四项服务。

（2）IIS的运行

当IIS添加成功之后，再进入“开始”→“设置”→“控制面板”→“管理工具”→“Internet服务管理器（Internet信息服务）”以打开IIS管理器，对于有“已停止”字样的服务，均在其上右击，从弹出的快捷菜单中选“启动”来开启。

（二）IIS之Web服务器安装步骤

（1）插入Windows XP安装光盘，打开“控制面板”，然后打开其中的“添加/删除程序”。

（2）在“添加或删除程序”窗口左边单击“添加/删除Windows组件”。

（3）片刻后系统会启动Windows组件向导，勾选Internet信息服务（IIS）”，单击“下一步”按钮。

（4）若安装成功，系统会自动在系统盘新建网站目录，默认目录为：C:\Inetpub\wwwroot。

（5）依次打开【控制面板】〉【性能和维护】〉【管理工具】〉【Internet 信息服务】。

（6）在默认网站上右击→选择“属性”。

（7）单击主目录：在本地路径输入框后单击浏览可以更改网站所在文件位置，默认目录为：C:\Inetpub\wwwroot。在执行权限后面单击“配置”→“调试”→“文本错误信息”，选中“向客户端发送文本错误信息：处理 URL 时服务器出错，请与系统管理员联系”。单击文档：可以设置网站默认首页，推荐删除iisstart.asp，添加index.asp和index.htm。单击目录安全性：单击“编辑”按钮可以对服务器访问权限进行设置。

（8）把凡人网络购物系统V7.0文件复制到你选择的网站目录下，假设你选择的目录为默认目录：C:\Inetpub\wwwroot。

（9）把frshop.rar解压之后的文件复制到C:\Inetpub\wwwroot\shop下即可。

（10）您可以通过以下方式访问商城：http://localhost/shop/ 或 http://127.0.0.1/shop/或 http://计算机名/shop/ 或 http://本机IP地址/shop/ 访问。其他人可以通过http://计算机名/shop/ 或 http://本机IP地址/shop/ 访问。

（11）如果您有域名，把域名解析到本地IP地址，即可通过http://域名/shop/访问。

（三）IIS之Web服务器建立——建立第一个Web站点

假设本机的IP地址为192.168.0.1，自己的网页放在D:\Wy目录下，网站的首页文件名为Index.htm，现在想根据这些建立好自己的Web服务器。

对于此Web站点，我们对现有的“默认Web站点”做相应的修改后，就可以轻松实现。

（1）先在“默认Web站点”上右击，选择“属性”，以进入名为“默认Web站点属性”设置界面。

（2）修改绑定的IP地址：转到“Web站点”窗口，再在“IP地址”后的下拉列表框中选择所需用到的本机IP地址“192.168.0.1”。

（3）修改主目录：转到“主目录”窗口，再在“本地路径”文本框中输入（或用“浏览”按钮选择）好自己网页所在的“D:\Wy”目录。

（4）添加首页文件名：转到“文档”窗口，再单击“添加”按钮，根据提示在“默认文档名”后输入自己网页的首页文件名“Index.htm”。

（5）添加虚拟目录：假设主目录在“D:\Wy”下，而你想用输入“192.168.0.1/test”的格式调出“E:\All”中的网页文件，这里面的“test”就是虚拟目录。请在“默认Web站点”上右击，选择“新建”→“虚拟目录”，依次在“别名”处输入“test”，在“目录”处输入“E:\All”，再按提示操作即可添加成功。

（6）效果的测试：打开IE浏览器，在地址栏输入“192.168.0.1”之后再按回车键，若能够调出你自己网站的首页，则说明设置成功！

（四）IIS之Web服务器建立——添加更多的Web站点

1. 多个IP地址对应多个Web站点

如果本机已绑定了多个IP地址，想利用不同的IP地址打开不同的Web页面，则只需在“默认Web站点”处右击，选择“新建”→“站点”，然后根据提示在“说明”处输入任意用于说明它的内容（比如为“我的第二个Web站点”）、在“输入Web站点使用的IP地址”的下拉列表框处选中需给它绑定的IP地址即可；当建立好此Web站点之后，再按上步的方法进行相应设置。

2. 一个IP地址对应多个Web站点

当按上步的方法建立好所有的Web站点后，对于虚拟主机，可以通过给各Web站点设不同的端口号来实现，比如给一个Web站点设端口号为80，另一个设端口号为81，第三个设端口号为82，……，则对于端口号是80的Web站点，访问格式仍然直接是IP地址就可以了，而对于绑定其他端口号的Web站点，访问时必须在IP地址后面加上相应的端口号，也即使用如 “http://192.168.0.1：81”的格式。

很显然，改了端口号之后使用起来就麻烦些。如果你已在DNS服务器中将所有你需要的域名都已经映射到了此惟一的IP地址，则用设不同“主机头名”的方法，可以让你直接用域名来完成对不同Web站点的访问。

比如本机只有一个IP地址为192.168.0.1，且已经建立（或设置）好了两个Web站点，一个是“默认Web站点”，一个是“我的第二个Web站点”，现在希望输入“www.enanshan.com”可直接访问前者，输入“www.popunet.com”可直接访问后者。其设置操作步骤如下：

（1）请确保已先在DNS服务器中将这两个域名都已映射到了那个IP地址上；并确保所有的Web站点的端口号均保持为80这个默认值。

（2）再选择“默认Web站点”右击后依次选择“属性”→“Web站点”，单击“IP地址”右侧的“高级”按钮，在“此站点有多个标识下”双击已有的那个IP地址（或单击选中它后再单击“编辑”按钮），然后在“主机头名”下输入“www.enanshan.com”再单击“确定” 按钮保存退出。

（3）按上步同样的方法为“我的第二个Web站点”设好新的主机头名为“www.popunet.com”即可。

（4）打开IE浏览器，在地址栏输入不同的网址，就可以调出不同Web站点的内容了。

3. 多个域名对应同个Web站点

先将某个IP地址绑定到Web站点上，再在DNS服务器中将所需域名全部映射向你的这个IP地址上，则在浏览器中输入任何一个域名，都会直接得到设置好的那个网站的内容。

本章核心概念

网页、静态网页、动态网页、HTTP协议、IIS。

本章小结

1. 本章介绍了与网页相关的知识，如静态网页和动态网页等概念，重点讲述了最常用的HTTP和FTP协议。

2. 从实际操作的角度介绍了网页制作的流程。从实用出发介绍了网页制作软件及其功能。

3. 本章的概念和知识都是今后学习常用到的，特别是IIS的安装和IIS服务器安装是一定要熟练掌握的内容。

思考题

1. 静态网页与动态网页的区别是什么？

2.　HTTP协议的作用是什么？

3. 网页制作的常用软件有哪些？它们各有什么功能？

上机练习

1. 一个网站是由若干个网页以及许多图像文件组成的。为了使建立的网站主题明确，在制作网站之前，需要为其创建专属的站点，并且要将该站点建立在虚拟目录中。

2. 学会安装第四节中介绍的网页制作软件。