章-网页设计基础知识-本章主要内容(与“工具”有关文档共96张)VIP

基本的网页设计工具前台页面技术

Photoshop网页制作三剑客（Dreamweaver、Fireworks、Flash）层叠样式表（CSS）超文本标记语言（HTML）页面脚本语言（JavaScript/VBScript）1第1页，共96页。常用的后台设计语言及开发环境

ASP(VB)ASP.NET(VB\C#\J#)JSP(java)

.netFramework

eclipse2第2页，共96页。项目1网站首页设计与切片

知识技能目标掌握静态网页设计的基础知识掌握使用切片工具进行切片并导出网页模板的基本方法本单元理论授课4学时，上机操作4学时。3第3页，共96页。任务1网页基础、网页配色及网站赏析

一、任务分析张先生的网站要展示企业形象和宣传产品，要求如下：①网站选色以绿色为主，代表健康和生机；②网站有一个较大的banner展示动画，展示产品和宣传企业形象；网站首页效果如图所示；

③网页宽度全屏设置为1003px。课次1课时2教具投影仪备注课题任务1网页基础、网页配色知识及经典网站赏析目的了解网页设计基础知识、网页配色基础知识重点网页设计基础知识难点无4第4页，共96页。

二、相关知识（一）网页基础知识

1.Internet基础知识

(1)Internet

“Inter”意即交互，“net”意即网络。Internet称为国际互联网络。

(2)Internet的功能信息的获取与发布（WWW）电子邮件（E-mail）网上交际（BBS、新闻组、即时通讯、网络电话等）电子商务与网上事务处理

Internet的其它应用(远程教育、远程医疗、远程登录、文件传输、游戏娱乐等)5第5页，共96页。

(3)Internet的发展

Internet始于1969年，美国国防部高级研究计划管理局（ARPA--AdvancedResearchProjectsAgency）资助建立一个名为ARPANET的网络，目的只是为了将美国的几个军事及研究用电脑主机连接起来，成为Internet的雏形。随着网络互连技术的发展，将大小同构和异构网络连接起来，形成一个网络的网络，形成了现在的Internet（国际互联网）。6第6页，共96页。(4)Internet在我国的发展

1987年至1993年，我国与Internet的连接仅是电子函件的转发连接，并在少数高校和科研机构提供电子邮件服务。

1987年9月，北京计算机应用技术研究所与德国卡尔斯鲁厄大学（KarlruheUniversity）合作，建成CANET中国科技网（ChinaAcademicNetwork），它是我国第一个Internet电子邮件服务结点。

1994年3月，Internet管理委员会批准中国进入Internet，中国政府也批准Internet与中国连通。同年，我国第一条Internet专线在中科院高能物理研究所正式接通。7第7页，共96页。(5)Internet的工作原理互联网连接了世界上不同国家与地区无数不同硬件、不同操作系统与不同软件的计算机，为保证这些计算机能畅通无阻地交换信息，须拥有统一的通信协议。互联网上使用TCP/IP作为标准的通信协议。

TCP/IP采用分组交换方式，即数据在传输时分成若干段（数据包），TCP/IP协议的基本传输单位是数据包。

TCP/IP协议簇包括两个主要的协议，即TCP（传输控制协议）和IP（网际协议），它们在数据传输过程中主要完成以下功能：8第8页，共96页。①TCP协议把数据分成若干数据包，给每个数据包写上序号，以便接收端把数据还原成原来的格式。

②

IP协议给每个数据包写上发送主机源地址和接收主机目的地址，数据包就可以在网上传送了。数据包可以通过不同的传输途径（路由）进行传输，由于路径不同，加上其它的原因，可能出现顺序颠倒、数据丢失、数据失真甚至重复的现象，这些问题都由TCP协议来处理，它具有查纠错误的功能，必要时请求发送端重发。

IP协议负责数据传输寻址，TCP协议保障数据可靠传输。9第9页，共96页。(6)Intranet（内联网）

Intranet也叫企业内部网，是指在一个单位或企业内通过TCP/IP协议建立的网络。

Intranet是基于Internet技术、TCP/IP和HTTP等通信协议以及WWW等信息服务的一种区域化的信息系统，它通过开放的Internet标准协议，把多种服务平台提供给区域网络上的计算机。它既给一个公司或企业提供了将其自身组织成一个完整信息系统的网络环境，也可以根据需要通过防火墙技术访问Internet。10第10页，共96页。(7)几个与Internet有关的概念术语

IP地址

IP地址能唯一标识主机在Internet中所处的网络位置。

IP地址提供统一的地址格式，即由32个二进制位（bit）组成。由于二进制使用起来不方便，常用“点分十进制”来表示，即将IP地址分为4个字节，每个字节以十进制数来表示，各个数之间以句点隔开。例如，中国人民大学网站IP地址。11第11页，共96页。

域名与IP地址相比，人们更喜欢使用具有一定含义的字符串来标识Internet上的计算机，用户可以随意命名自己的计算机，这样就可能在Internet上出现重名。为了避免重名，Internet管理机构采取了在主机名后加上后缀的方法，这个后缀称为域名(domain)，用以标识主机的区域位置。如中www为主机名，由服务器管理员命名，为域名，由服务器所属单位向域名管理机构申请。域名通过域名服务器（DNS）的解析转换为实际的IP地址，以实现最终的访问。12第12页，共96页。URLURL（UniformResourceLocator：统一资源定位器）是WWW页(资源对象)的地址，它的地址格式为：

【资源类型】：指出WWW客户程序用来操作的工具。如:“http://”表示WWW服务器，“ftp://”表示FTP服务器，“new:”表示新闻组(Newgroup)等。

【域名】:指出WWW页所在的服务器域名。

【端口号】:对某些资源的访问，需给出服务器提供的端口号。

【路径】:资源的具体位置，如http:///domain/HXWZ资源类型://域名:端口号/路径13第13页，共96页。2．WWW简介

WWW是Internet多媒体信息查询工具，是Internet上近年发展起来的服务，也是发展最快和使用最广泛的服务。

(1)什么是WWWWWW是WorldWideWeb（环球信息网）的缩写，也可以简称为Web，中文名字为“万维网”。通过万维网，人们只要通过简单的方法，就可以迅速地获得世界范围丰富的信息资料。用户在通过Web浏览器访问信息资源时无需关心一些技术细节，且界面友好，因而Web服务在Internet上一推出就受到了热烈的欢迎，得到迅速发展。14第14页，共96页。(2)WWW的工作原理

WWW中的信息资源主要由一篇篇的Web文档(Web页)构成。这些Web页采用超文本（HyperText）的格式，即可以含有指向其它Web页或内部特定位置的超级链接。可以将链接理解为指向其它资源的“指针”。链接使得Web页交织为网状，使Internet成为一个巨大的信息网。由于将文件放入WWW服务器的人并不知道将来阅读这个文件的人到底会使用哪一种类型的计算机或终端，要保证每个人在屏幕上都能看到正确显示的文件，必须用某种计算机都能“看懂”的方式来描述文件，于是就产生了HTML超文本标记语言。15第15页，共96页。(3)WWW的核心——HTTP协议

WWW服务器使用的主要协议是HTTP，即超文本传输协议。

HTTP是应用层的协议，适用于分布式超媒体信息系统，它于1990年提出，经过使用与发展，得到了不断完善和扩展。

HTTP协议的运作方式如下：16第16页，共96页。3．静态网页与动态网页

请求响应浏览器Web服务器后台脚本解释器数据库服务器数据库静态网页动态网页请求响应浏览器Web服务器静态网页17第17页，共96页。4．什么是ASP和ASP(ActiveServerPage)是由微软提出的一种动态网页构架，它是一种包含了使用VBScript或JavaScript脚本程序代码的网页。当浏览器浏览ASP网页时，Web服务器根据请求生成相应的HTML代码再返回给浏览器，在浏览器端看到的是动态生成的页面。

ASP能容易地与数据库和其它程序进行交互。掌握了VBScript或JavaScript的基本语法后，只要清楚各个组件的用途、属性、方法，就能轻松编写自己的ASP系统。ASP的网页文件的扩展名是“.ASP”。18第18页，共96页。和ASP的区别不仅在于功能的增强，更在于编程思维的转换。ASP使用VBScript及JavaScript等脚本语言结合html来编程，这些脚本语言属于面向结构的语言，而非面向对象，会产生以下问题：

(1)代码逻辑混乱，难于管理

ASP是脚本语言混合html编程，所以很难看清代码的逻辑关系，随着程序的复杂性增加，使得代码的管理十分困难。

(2)代码的可重用性差由于是面向结构的编程方式，并且混合html，所以可能页面原型修改一点，整个程序都需要修改，无法实现代码重用。19第19页，共96页。支持面向对象的一切特性，比如封装性、继承性、多态性等等，解决了ASP的很多弱点。可以使用C#

,

VB

,

JavaScript等编写代码，同时支持可视化的界面设计。封装性使得代码逻辑清晰，易于管理，使业务逻辑和Html页面分离，这样无论页面原型如何改变，业务逻辑代码都不需改动。继承性和多态性使代码的可重用性大大提高，可以通过继承已有的对象最大限度保护以前的投资，提高开发效率。20第20页，共96页。

（二）网页配色基础知识网页的色彩是树立网站形象的关键之一，下面了解一些色彩的基本知识：

1．色彩的形成颜色是由光的折射而产生的。所有色彩都可以用红、绿、蓝这三种色彩调和而成。html语言中的色彩表达即是用这三种颜色的数值表示。例如：红色的十六进制的表示为(FF0000)，白色为(FFFFFF)，"bgColor=#FFFFFF"是指背景色为白色。颜色分非彩色和彩色两类。非彩色即黑、白、灰色系。彩色即除了非彩色以外的所有色彩。任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以能表现出几百万种色彩。21第21页，共96页。2．色环色环就是将彩色光谱中的长条形色彩序列首尾连接在一起，使红色连接到另一端的紫色。色环通常包括12种不同的颜色，如下所示。22第22页，共96页。

基色基色是最基本的颜色，通过按一定比例混合基色可以产生任何其它颜色。现在大多是用红、绿、蓝（RGB模式）作为基色进行颜色显示（加色法）。如果使用彩色喷墨打印机，就有四种颜色墨水：青、品红、黄、黑（CMYK模式）。因为计算机显示器使用加色原理，而打印机使用减色。显示器发射彩色光线，而纸张上的墨水则从它反射的光中吸收了某种颜色（减色法）。23第23页，共96页。

次生色混合色环中任何两种邻近的基色可获得另一种颜色，这些颜色即是次生色：青、品红和黄。加色法中的次生色就是减色法中的基色，同样可以推断出，减色法中的次生色也就是加色法中的基色。这就是加色模式和减色模式之间的相互关系。三次色为了完成色环，再次找到已填入色环的颜色之间的中间色。幸运的是，这些三次色对于加色法和减色法都是相同的。24第24页，共96页。3．颜色之间的相互关系。相似色给定颜色旁边的颜色。如果以橙色开始想得到它的两个相似色，就选定红色和黄色。使用相似色的配色方案可以提供颜色的协调和交融，比较自然。互补色也称为对比色（反差最大）。互补色在色环上相互正对。如果希望更鲜明地突出某些颜色，则选择对比色。如黄色和蓝色。分列的互补色一种颜色，先找到它的互补色，该互补色两边的两种颜色即是。三色组三色组是色环上等距离的任何三种颜色。在配色方案中使用三色组时，颜色对比均比较强烈。如基色和次生色均是三色组。暖色暖色由红色调构成，如红色、橙色和黄色。暖色给人以温暖、舒适、有活力的感觉。这些颜色产生的视觉效果使其更贴近观众，并在页面上更显突出。冷色冷色来自于蓝色调，如蓝色、青色和绿色。这些颜色使配色方案显得稳定和清爽。它们看起来还有远离观众的效果，所以适于做页面背景。25第25页，共96页。4．色彩的三要素明度。是指色彩的明暗程度。光的明暗度称亮度。明度由光的振幅决定。振幅宽亮度就高。色相。是色彩的相貌，是一种色彩区别另一种色彩的表面特征。它是由光的波长引起一种视觉感。色相秩序的确定是跟据太阳光谱的波长顺序排列的，即红、橙、黄、绿、蓝、紫等，它们是所有色彩中最突出、纯度最高的典型色相。纯度。即色彩所含的单色相饱和的程度，也称为彩度。决定颜色纯度的因素有多方面，从光的角度讲，光波波长越单一，色彩越纯；光波波长越混杂，比例均衡，使各单色光的色性消失，纯度为零。同一高纯度色彩在强光或弱光的照射下，色彩的纯度也相应降低。色彩的三要素是互相依存、互相制约的，很难截然分开，其中任何一个属性的改变，都将引起色彩个性的变化。26第26页，共96页。

5．配色标准与原则（1）特色鲜明一个网站的用色必须要有自己独特的风格，要与表现的内容相和谐，还要考虑受众人群的年龄、层次等特点，这样才能显得个性鲜明，主题突出，和谐自然，给浏览者留下深刻的印象。（2）搭配合理网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉。（3）讲究艺术性网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。27第27页，共96页。6．色彩与心理（1）黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。28第28页，共96页。

（2）红色色感温暖，性格刚烈而外向，是一种对人刺激很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动，也容易使人视觉疲劳。红色中加入少量黄，会使其热力强盛，趋于躁动、不安。红色中加入少量蓝，会使其热性减弱，趋于文雅、柔和。红色中加入少量黑，会使其性格变的沉稳，趋于厚重、朴实。红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。29第29页，共96页。

（3）绿色是具有黄色和蓝色两种成分的颜色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、满足、优美的色。绿色中黄的成份较多时，其性格趋于活泼、友善，具有幼稚性。绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。30第30页，共96页。

（4）白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。在白色中混入少量红，就成为淡淡的粉色，鲜嫩而充满诱惑。在白色中混入少量黄，则成为一种乳黄色，给人一种香腻的印象。在白色中混入少量的蓝，给人感觉清冷、洁净。在白色中混入少量的橙，有一种干燥的气氛。在白色中混入少量的绿，给人一种稚嫩、柔和的感觉。在白色中混入少量的紫，可诱导人联想到淡淡的芳香。31第31页，共96页。

（5）蓝色的色感冷静，性格朴实而内向，是一种有助于人头脑冷静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。32第32页，共96页。

（6）紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。在紫色中红的成分较多时，其知觉具有压抑感、威胁感。在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。网页配色板33第33页，共96页。(三)网站风格案例赏析

１.中国奢侈品信息网(/)34第34页，共96页。2.阿摩司视觉艺术中心（）35第35页，共96页。3.黑蚁设计(/index2.html)36第36页，共96页。4.个人网站(/)37第37页，共96页。三、任务实施【任务场景】任选一种作图工具，体验网页配色并绘图。【操作环境】WindowsXP、任选一种作图工具。【操作步骤】步骤1启动作图工具（或运行网页配色程序，网上有下载）；步骤2体验网页配色，为网页选择好背景、前景、强调等色彩搭配。四、课堂实践例1．1任选几个你认为漂亮的网站进行赏析，教师点评。38第38页，共96页。任务2利用切片工具制作网页模板

一、任务分析

张先生的网站首页背景图片设计完成后，我们可以利用Photoshop或Fireworks等工具为他的网站首页图片进行切片。网页切片的目的是在网页中创建导航链接、翻转和动画效果，另外可以优化图片以提高网页下载速度。课次2课时2教具投影仪备注课题任务2利用切片工具制作网页模板目的掌握切片工具的使用重点切片工具的使用难点无39第39页，共96页。

二、相关知识下面学习Fireworks的基本操作方法。

Fireworks是第一个针对网页而开发的专业图像处理软件。它将矢量图像处理和位图图像处理合二为一，避免了图像在多个应用程序之间来回迁移。

Fireworks矢量图形处理能力强，能任意切图、生成鼠标翻转图像；具有强大的动画和网络图像生成功能，可以进行图像优化；可以导出带有HTML或者JavaScript代码的网页文件；

Fireworks提供了一个真正集成的Web解决方案。40第40页，共96页。

（一）Fireworks常用工具

1.工具箱工具箱(Toolbox)是应掌握的工具之一，如下所示。右下角带有小三角号的都是工具组，用鼠标按住工具组图标1秒后，其隐含的组员图标便会弹出，按住鼠标不放并向右拖动，选择需要的组员并释放鼠标，此工具成员图标便出现在工具箱中，替代了原来的工具组图标。41第41页，共96页。2.Fireworks操作基础在Fireworks【工具】面板中，选择的工具决定了创建的对象是矢量图还是位图。例如，从【工具】面板的【矢量】部分选择【钢笔】工具，就能绘制矢量路径；选择【刷子】工具，则可以绘制位图对象；选择【文本】工具，可以键入文字。绘制或导入矢量、位图对象或文本后：可以使用各种工具、效果、命令和技术来增强和完成图形；可以使用【按钮编辑器】中的工具创建交互式导航按钮；可使用Fireworks工具编辑导入的JPG、GIF、PNG、PSD等图形，如对它们进行裁切、润饰、蒙版处理、调整颜色和色调等处理。42第42页，共96页。

例1.2利用钢笔工具（贝塞尔曲线工具），绘出如下图形。

左图操作步骤：

(1)选择“直线”工具，在下方画一条短直线；

(2)选择“直线”工具，在上方画一条长直线；

(3)选择“钢笔”工具，先在上方长线的右端点击一下，再在下方短线的右端点击并向左水平拖动以改变曲线的弧度到合适即可。43第43页，共96页。

（二）交互式图形

Fireworks的切片和热点是指定网页图形中交互区域的对象。切片是将图像切成不同的部分，可以将变换图像、动画效果和超级链接等应用到这些对象上。在网页上，每个切片都放置在一个表格单元格中。使用热点可将URL链接和行为指定给整个图形或图形的某个部分。切片和热点可以在工作区中快速为图形指定交换图像行为。44第44页，共96页。

（三）图形优化和导出图形

Fireworks可在导出图形时进行图像优化，在文件大小和品质之间平衡，如图所示。Fireworks源PNG文档可以导出多种类型的文件，包括JPG、GIF、GIF动画和包含多种类型切片图像的HTML表格。45第45页，共96页。

（四）矢量图形和位图图像

1.矢量图形矢量图又称向量图形，它由以数学方程式所定义的直线和曲线组成，内容以线条和色块为主。矢量图形特点：矢量图由多个对象元素堆砌而成，各对象在计算机中由数学公式描述；每个对象都是实体，具有颜色、形状、轮廓和大小等属性；矢量图与分辨率无关，将矢量图放大或缩小，仍然会保持其清晰度，不会出现锯齿状边缘，如图所示；矢量图在标志设计、插图设计及工程绘图上应用广泛。46第46页，共96页。2.位图图像位图又称点阵图，由许多点（像素）组成，每个像素有具体颜色。计算机显示器屏幕可看作一个大的像素网格，在每个像素上显示不同的颜色、亮度等，便会在整体上显示出一幅图像，这就是位图图像。特点如下：位图（如图所示）可以表现图像中色彩的细微变化，能够制作色彩和色调变化丰富的图像，画面细腻，过渡自然；位图的清晰度与分辨率有关，在屏幕上将位图放大，或以低分辨率打印，图像会出现锯齿边缘；矢量图中所有对象都是用数学公式表示的，因此文件所占空间小，缩放不失真。通常位图文件比相同内容的矢量图像文件大，但矢量图不易作出色调或色彩丰富变化的图像。47第47页，共96页。

（五）创建新文档

PNG是Fireworks的文档格式。创建新文档的步骤如下：

(1)选择【文件】菜单/【新建】，打开下图所示【新建文档】对话框。

(2)输入画布宽度和高度度量值；以像素/英寸或像素/厘米为单位输入分辨率；为画布选择白、透明或自定义颜色。

(3)单击“确定”按钮。48第48页，共96页。

（六）打开和导入文件

(1)选择【文件】菜单\【打开】，打开图所示的对话框。

(2)选择文件并单击“打开”按钮。

注意：可以将矢量对象、位图图像或文本从支持拖动操作的任何应用程序（如Flash、Photoshop等）拖到Fireworks中。49第49页，共96页。

（七）保存Fireworks文件

(1)选择【文件】菜单\【保存】，打开下图左所示【另存为】对话框；

(2)输入位置和文件名(扩展名默认.png)，单击“保存”按钮。若要将文档导出为其它格式，可以在【优化】面板中选择一种文件格式，如下图右所示，再选择【文件】菜单/【导出】命令导出文档。50第50页，共96页。

（八）设置Fireworks工作环境

Fireworks允许用户根据需要，对其运行环境进行个性化的设置，以适应不同要求的操作习惯，来提高工作效率。

1.设置“常规”选项按组合键Ctrl+U或选择【编辑】菜单/【首选参数】命令，弹出“首选参数”对话框，选“常规”卡片，如图所示。51第51页，共96页。2.设置“编辑”选项在“首选参数”对话框中单击“编辑”选项卡，如图所示，其中：修剪时删除对象：选中该复选框，用户在使用裁剪工具时，裁剪区域外的图像将被删除。 在转换为选取框时删除路径：选中该复选框，用户在将路径转换为选取框（修改菜单）后路径将被删除。下图为不删除路径时的情形。52第52页，共96页。

刷子大小绘图光标：设置“刷子”、“橡皮擦”、“模糊”、“锐化”、“减淡”、“加深”、“涂沫”等工具的指针形状，如打勾，则显示为十字形指针。否则显示的是工具图标指针。下图为使用刷子工具时的显示效果。精确光标：选中该复选框（不选前一项），在使用工具进行图像编辑时，光标将显示为十字形状，有利于用户对图像的精确定位。53第53页，共96页。

在“‘钢笔’工具选项”选项区中，选中“显示钢笔预览”复选框，可在使用“钢笔”工具单击时，提供将创建的下一个路径段的预览；如图下。

“显示实心点”复选框打勾，可将未选中的控制点显示为实心点。54第54页，共96页。

（九）更改画布新建或打开图像后，可根据需求调整画布尺寸及颜色，以及对画布进行旋转和裁剪等操作。

1.新建文档，单击“新建文档”对话框中的“自定义”，从调色板中选择合适的颜色作为画布的颜色，如下图所示。

如要更改画布的颜色，选择【修改】菜单/【画布】/【画布颜色】，或在画布中单击鼠标右键，在弹出菜单中选择【修改画布】/【画布颜色】选项，打开“画布颜色”对话框。55第55页，共96页。

2.旋转与修剪画布选择【修改】菜单/【画布】命令，执行旋转画布操作，如旋转180°、顺时针旋转90°和逆时针旋转90°等。如图像的四周有空白的画布区域，可选择【修改】菜单/【画布】/【修剪画布】命令，将这些空白区域裁掉。如选择【修改】菜单/【画布】/【符合画布】命令，则系统将自动调整画布尺寸，裁去四周的空白画布区域。如果此时有超出画布的对象，则画布被扩展。56第56页，共96页。

（十）切片工具的使用一个由图片为主的网页，整幅图像的下载速度较慢。可在Fireworks中设定好切片大小后，导出为带有表格的HTML文件。该文件中将各幅小图片插入到相应的单元格中，并使表格的格线宽度为0，使各幅图片之间没有缝隙，看起来就像一幅图片一样，在下载时，图像是从切片的各个位置同时出现(马赛克效果)，切割后的总占用空间一般少于原图空间。下面根据已经制作好的图像介绍操作步骤。

1.导入图像及画辅助线

(1)新建文档，画布宽设为500像素、高设为375像素、分辨率设为72像素／英寸，画布底色白色，单击【确定】按钮。57第57页，共96页。(2)选【文件】菜单/【导入…】命令，导入所需图片，如下图左所示。

(3)选择【视图】菜单/【标尺】命令，鼠标移到标尺的灰色区域中，按下鼠标左键，向图像内拖曳鼠标，拖到一定位置后释放鼠标，画面上出现一条辅助线。从纵向标尺拖动鼠标产生纵向辅助线，从横向标尺拖动产生横向辅助线。如此给画面加若干辅助线，把画面分割成若干区域，如下右所示。如果辅助线位置不合适，将鼠标移到辅助线上，鼠标左键直接拖动即可。将辅助线拖出画面即可删除辅助线。58第58页，共96页。2.切割图片及优化输出

(1)选择工具箱中的矩形切片工具，沿着辅助线把图片切成一个个的矩形区域，每个切片上被覆盖了一层绿色，指向切片时四周用红线分割，本例有6个切片，如下所示。59第59页，共96页。

（2）制作了所有切片并在优化面板设置了优化选项后，选择【文件】菜单/【导出】命令，弹出如下右的【导出】对话框。(3)选中下部的【将图象放入子文件夹】复选框：将图片放到子文件夹下，下边的”浏览”按钮被激活，按钮右边是子文件夹名，默认是images。优化面板60第60页，共96页。

如果欲自定义图片存放的文件夹，可以单击”浏览”按钮，弹出如下左图所示的【选择文件夹】对话框。

3.其他设置

(1)单击前面对话框中的按钮，弹出“HTML设置”对话框。在【常规】卡片中设定要导出的HTML类型及扩展名，这里取默认值，如下右图所示。61第61页，共96页。(2)单击【表格】卡片，可以设置切片经过切分HTML表格的空白单元选项。Fireworks默认采用一个像素宽的透明文件(默认为)来填充单元格间距（即【1象素透明间隔符】）。下边的【空单元格】栏可设置空白单元的颜色和图像。

(3)单击【文档特定信息】卡片，设置各切片导出的文件命名格式。默认是【文件名】+【下划线】+切片所在的【行值】和【列值】。62第62页，共96页。

还可以选择【文件名】+【下划线】+【1，2，3，4，】这种方式。如果只对重要的部分设置了切片，可将【包含没有切片的区域】打勾，这样可以把没切片的区域也一起导出。(4)单击”确定”按钮，返回到前一对话框中，单击”保存”按钮，命名为。最后保存png文档。63第63页，共96页。如果辅助线位置不合适，将鼠标移到辅助线上，鼠标左键直接拖动即可。第10步：按以下对话框导出文档：netFramework选择需要的组员并释放鼠可以将链接理解为指向其它资源的“指针”。（十）切片工具的使用修剪时删除对象：选中该复选框，第5步：在（416，80）处在紫色中红的成分较多时，其知觉具有压抑感、威胁感。它们看起来还有远离观众的效果，所以适于做页面背景。第12步：使用切片工具在页面上按下图样式进行切片：(2)WWW的工作原理(十一)热区和切片的应用热区（Hotspot）和切片（Slice）是用来创建图像交互效果的重要工具，下面的例子使用热区和切片实现图片的切换，运行效果(例)是当用鼠标指向文本时在图片区域中显示出相应的动物图片。操作步骤如下。（1）准备6张用于切换的动物图片。本例的6幅图片如下所示。（2）在Fireworks中新建一个文档。64第64页，共96页。

（3）在文档窗口中绘制一个矩形区域，准备放置这6张图片。点击矩形工具按钮，在文档窗口中用鼠标拖拽出一个适当大小的矩形；（4）选中矩形，在属性面板中设置边线为红色，填充为白色；（5）在工具面板中点击文字工具，在文档窗口底端放一段文字，内容为【豹子狐狸蝴蝶马母鸡屎克郎】；（6）利用矩形热点工具，为这段文字中的各动物名称设置热区。只有热区内的对象才能加入动作。这里要实现鼠标指向文字时显示图片，就必须把文字所在的区域设为热区，如下图所示。热区65第65页，共96页。

（7）添加帧。在Fireworks中可以添加许多帧，但每次窗口中只能显示其中的一帧，因此要切换6张图片，就要把它们分别放在6个帧当中。打开【帧】浮动面板，点击浮动面板右上角的黑色三角形“选项”按钮，从菜单中点选【重制帧】，在【数目】框中输入6，并选取【在当前帧之后】选项，表示在当前帧的后面再复制6个帧，如下左图所示。重制后的【帧】浮动面板如下右图所示。CS3界面66第66页，共96页。(8)把准备好的图片添加到各帧中。点选【帧】浮动面板中的帧2，选择【文件】菜单/【导入…】，在打开的【导入】对话框中选择第一幅豹子的图片，在矩形区域中划过一个区域，将图片放入该区域，之后可能还要对图片进行适当的调整，如下左图所示。

(9)用同样的方法，在帧3、4、5、6、7中分别导入其他5张图片。

(10)设置切片。切片（Slice）是可以接受交互动作的区域，回到帧1中，选择工具面板中的切片工具，将矩形边框所在的区域切割成为一个切片，如下右图所示。热区切片67第67页，共96页。

（11）设置交互动作。用选取工具点选左边的【豹子】热区，按住【描准】小图标，将它拖到切片区域上，放开鼠标。拖拽到矩形切片上时，会发现这两个区域被一条曲线连接起来了。接着会弹出选择切换图片的对话框，其中预设为帧2，这里不用修改。表示当鼠标移到文字热区【豹子】上时，把切片矩形区域中显示的内容由帧1切换到帧2，显示出帧2中的豹子图片，如下左图所示。（12）重复上一个步骤。将【狐狸】、【蝴蝶】、【马】、【母鸡】、【屎克郎】5个热区分别链接到切片区域上。在链接时，要将交换图像对话框中的【交换图象自】分别修改为帧3至帧7，表示鼠标移到【狐狸】、【蝴蝶】、【马】、【母鸡】、【屎克郎】上时，分别显示这5张图片。（13）预览。点击文档窗口的【预览】选项卡，或导出为网页文件在浏览器中显示。下右图是鼠标指向【豹子】的显示效果。68第68页，共96页。(十二)下拉菜单的制作当网页具有较多功能时，如果每种功能都通过一个按钮来实现，会使页面看起来很杂乱。好的办法是使用菜单。下拉菜单主要用于导航栏中的选项存在子选项的情况下，当用户将指针移到导航栏中某个对象时，将显示相应的弹出菜单。（1）新建文档，使用文字工具输入文本“系部简介”；（2）用矩形热点工具将“系部简介”四字框住，将其设置为热区，如上所示。（3）选取指针工具，右键单击“系部简介”热区，在弹出的快捷菜单（如下左图所示）中选择【添加弹出菜单…】，得到如下右图所示的对话框。69第69页，共96页。

（4）输入菜单项的文本内容及链接地址后按”+”按钮，以增加菜单项。（5）所有链接对象的名称和地址输入完毕后点”继续”按钮，得到如下左图所示的对话框。（6）设置完菜单的行为颜色属性后点击”完成”按钮，回到编辑窗口，点击“系部简介”热区，用鼠标拖动菜单的框线到合适位置即可，设计完毕。（7）按下F12键，在IE中浏览（下拉菜单只能在浏览器中显示），将鼠标移动到相应的选项上，会显示出下拉菜单，得到如下右图的显示效果。习题170第70页，共96页。

Fireworks应用实例1：运行效果1.设置文档或导入图像第1步：在工作目录中建立文件夹X4-01。第2步：启动Fireworks，打开，如下所示：（如果在打开图像文件时同时出现“替换字体”对话框，单击“维持外观”）71第71页，共96页。2.绘制页面图像第3步：选择“文本”工具，在图像上输入文本“”。如右所示：

第4步：选中输入的文本，执行“窗口”菜单\“样式”，在“样式”面板中选择一种样式，如右所示：72第72页，共96页。

第5步：执行“窗口”菜单\“属性”，在“属性”面板中设置文本字号为18号，宽度320，高30，X值18,Y值248，如下所示：73第73页，共96页。3.按钮、样式和特效的使用（库按钮）第6步：执行“编辑”菜单\“插入”\“新建按钮”，点击“导入按钮”按钮，打开“导入元件：buttons”

对话框，选中一种按钮类型，点“导入”按钮，往页面上依次加入三个按钮（不能用复制的方法产生），按钮的宽度为110像素、高28像素，位置分别为（3，20），（3，70），（3，120），如下所示：74第74页，共96页。

第7步：双击各按钮，进入按钮编辑状态，单击“释放”标签，将按钮文字分别设置为“专栏”、“教程”、“论坛”，文字大小为25，隶书，加粗，将“释放”状态的文字分别复制粘贴到按钮的其他状态中（删除原文字），如下所示：75第75页，共96页。

第7步：双击各按钮，进入按钮编辑状态，单击“释放”标签，将按钮文字分别设置为“专栏”、“教程”、“论坛”，文字大小为25，隶书，加粗，将“释放”状态的文字分别复制粘贴到按钮的其他状态中（删除原文字），如下所示：76第76页，共96页。4.设定交互图像或文本第8步：进入“帧”面板，添加三个帧，分别在帧2、帧3、帧4中导入图像、、，如下所示：77第77页，共96页。

第9步：在属性面板中设置图像大小为150X150，X位置350，Y位置130。第10步：回到第1帧，用切片工具在图像上拖动鼠标，产生一个矩形切片，点击“专栏”按钮，将其上的切片描准器拖放到矩形切片上，在弹出的“交换图像”对话框中选择帧2，同样方法使“教程”和“论坛”按钮的行为交换图像分别对应帧3和帧4，如下所示。最后将文件另存为。78第78页，共96页。5.优化图像第11步：在优化面板，设置“JPEG-较小文件”，品质60，平滑2。如右所示：6.建立切片第12步：使用切片工具在页面上按下图样式进行切片：79第79页，共96页。7.导出HTML文件第13步：执行“文件”菜单\“导出”，按下图进行设置，最后点“导出”按钮。80第80页，共96页。

Fireworks应用实例2：运行效果1.设置文档或导入图像第1步：在root中建立文件夹X4-02。第2步：启动Fireworks，选择“文件”菜单\“新建”，在对话框中作如下设置：81第81页，共96页。2.绘制页面图像第3步：导入图像到画布左上角，如下所示。82第82页，共96页。

第4步：设置透明色。选