Fireworks在网页中的应用.doc

Fireworks在网页中的应用1 用fireworks布局页面布 局 是 一 个 网 页 内 容 组 织 的 必 然 结 果 ， 它 往 往 是 由 自 身 逐 渐形 成 的 。 在 网 页 设 计 中 ， 设 计 者 要 注 意 到 网 页 排 版 的 “ 最 佳 视 域 ” ，这 一 细 节 会 引 导 用 户 去 观 看 整 个 页 面 ， 并 且 能 够 创 造 出 一 种“ Diagonal Balance（ 对角线平衡 ） ” 的和谐状态 。人 们 在 浏 览 页 面 或 布 局 的 时 候 ， 视 线 往 往 趋 向 从 左 上 角 移 动到 右 下 角 ， 因 为 人 们 通 常 都 是 从 左 至 右 、 由 上 往 下 地 阅 读 ， 久 而 久之 ， 视线自然会沿着这一路径移动 。设 计 者 在 页 面 的 设 计 中 要 注 重 网 页 的 “ 导 向 视 觉 流 程 ” ， 通 过诱 导 元 素 主 动 引 导 读 者 视 线 向 一 定 方 向 、 由 主 到 次 地 移 动 。 一 个好 的 网 页 设 计 应 尽 量 以 最 高 效 率 ， 将 用 户 所 要 的 信 息 凸 显 出 来 ， 因此 就 要 去 掉 所 有 冗 余 的 东 西 ， 对 内 容 进 行 很 好 的 分 类 与 优 化 ， 做 到信息查看的主次分明 。在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接关系到网站的点击率。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。1、布局规划在设计网站的过程中，事先进行布局规划也是提高网站开发效率的有效方法。设计者在设计网站的过程中需要反复与客户进行交流、沟通、修改，而客户更看重就是布局的效果与使用的便捷性。当布局确定后，内容的组织、程序的设计就由程序设计者完成了。避免了程序设计好后反复修改界面的复杂性。Fireworks在设计布局中还有如下优势：Fireworks的灵魂是图层，每层可以放置不同的元素，图层之间可以相互链接，也可单独存放，每个图层上的图像位置可以随意挪动，每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置。如此灵活的功能，完全可以让设计者随心所欲设计而不受任何约束。一个打开、下载速度慢的网站是没有价值的，心理学研究表明一个网站的下载时间超过10秒，人们会自动转向其它网站。决定下载速度的因素很多，其中网页大小、网页元素的优化和网络配置是重要的因素。其中网页大小与网页元素的优化是设计者需要解决的，使用Fireworks设计的网页经过裁切、整合处理后体积会小得多。2、布局要点网页文档一般为1007*600和708*800像素，分辨率为72像素。一般情况下，大型网站不要超过3屏。网站背景颜色与文件颜色要统一协调，导航字体一般用黑体，正文一般用宋体，其它字体可能会因为客户的浏览器不兼容而给工作带来麻烦。如果为增强页面效果用到其它字体，最好在Fireworks中制作然后切分。图文搭配要合理，图像大小要合乎美学原则，不能太大，一般用缩略图较好，如果要显示更多的图片细节，不妨给缩略图链接一个大的图片。要精确定位网页元素，可用对齐参考线的方法来实现，而参考线的精确定位可以借助标尺和网格来实现。网站的Logo、Banner或导航条等都是事先设计好的，有固定大小，在做这些区域时尺寸一定要按照这些元素尺寸设计，否则进入DW整合时，可能出现空边或撑开表格的现象。3、活用“切片”利用Fireworks做好布局效果图后，关键的一步就是“切片”。只有正确地切片，DW才能对效果图进行有效的整合。切片时要用好参考线。参考线能保证我们切出的图像在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。为提高Logo和Banner的显示效果，如果效果图中存在Logo和Banner，必须将这些切片然后在DW中用Logo和Banner的原文档替换。大的图像必须切分成均匀的图像，这样可以提高网页下载速度。导航条一般都是特别设计的，其效果在DW难以实现，所以也必须切片后供后期使用。存储切片的文件夹必须是英文名字，存储切片时建议使用用“文件存储为web所用格式”命令。如无特殊要求，切片的存储格式要求使用Gif格式。在DW中对切片进行整合时，要考虑以下几个原则：能使用纯颜色代替区域不要使用图像文件，能用小图像代替的就不要用大图像，QoS支持的路由协议将有很好的发展前景。LEACH、PEGASIS、分层PEGASIS、TEEN、APTEEN均具有分层路由协议的特点，并且后四种都是在LEACH基础上改进而来的。仿真结果表明:LEACH协议的方法比直接传输的方法节省70%的能量，比最小传输能量路由协议节省能量40%80%。PEGASIS比LEACH协议优秀100% 300%，分层的PEGASIS比传统的PEGASIS协议高60%。TEEN和APTEEN在能量分布和网络生存时间指标上均优于LEACH协议。APTEEN的性能位于TEEN和LEACH的之间。2 输出网页效率高网页的下载速度不仅直接影响到用户的浏览体验、还关系到网页在搜索引擎中的排名参数。因此，优化网页、使之能快速下载是网页制作中必须考虑的因素。优化网页，提高下载速度的方法有很多，其中图像的正确处理极其重要。1、采用合适的图像精度网页是提供给阅读者在显示器上观看的，根据显示器的特性，图像的精度一般采用72dpi即可，这是屏幕分辨率，太高的分辨率并不能增强效果，反而会降低下载速度。有些图像原始文件的尺寸很大，而在网页中显示的区域是有限的，很多时候设计者采用在DW中缩小图像来实现，在DW中缩小图像并没有真正改变图像的大小，下载需要较长的时间，所以在输出图像时，要采用合适的大小，降低输出的精度。2、选择合适的颜色深度Gif格式的图像文件色彩深度越少文件也就越小，在肉眼可以接受的范围内，尽量将gif文件的色彩数量降低，对图像文件的大小进行有效的优化。如小图标、按钮、背景图案等图像文件对色彩的要求并不高，这些图像输出一般采用gif格式。对颜色要求不高的图像，采用64色的图像对比256色图像，输出后可以少掉一半还多的字节数，且效果完全能满足视觉要求。每个网站这种小图像往往会有几百张，每张图片都节省一些，最终可以节省很多空间。3、输出正确的图像格式不同的图像格式由于采用的压缩方法不同，显示效果差不多的图像其文件大小会有很大的差别。一般情况下色彩较少的图片使用png-8、gif格式文件，色彩变化丰富的图像则使用jpg格式，如果要使用在多种背景中，需要输出为透明格式时就需要选用gif格式。jpg格式的图片，需综合对比压缩品质高、中、低下的效果，尽量选择效果好且压缩品质较低的选项。输出图像时，可使用Fireworks的“存储为web所用格式”功能来输出，使用“存储为web所用格式”可以压缩约50%。3 制作网页图像效果在网页设计过程中，往往需要一些特殊的效果美化网页。如虚线、变幻线、阴影、圆角表格、异型表格装饰等等，这些效果在DW中无法直接实现，可以先在Fireworks中绘制相应效果，然后裁切成小图片在DW中进行整合即可。在网页设计中，最常用的字体是黑体和宋体，其它的字体在客户浏览器中可能不支持，为了保证客户所看到的网页效果与设计效果一致，对于标题、广告等需要使用特殊字体的内容，都需要在Fireworks中设计好后，转换成图像文件整合到网页中。在网页中经常看到一些大面积的渐变图像，如渐变的网页背景、表格背景、渐变导航条、渐变线等等，在网页中的渐变图像一般是单向渐变（径向或横向渐变），对于这样的图像，可以沿渐变方向切一小块（保证切片包含色阶变化的所有信息），然后在DW中进行填充而达到大面积的渐变效果。使用小图像代替大图像而得到同样的显示效果，可以大大缩小文件的大小，提高下载速度。同样道理，网页背景一般也是使用小图像进行填充来实现整个网页的背景。1、首页设计技巧网站首页的形式有两种，一种是形象展示型，通过艺术造型和设计布局，利用一系列与公司形象和产品、服务有关的图像（较多）、 文字信息（较少）， 组成一幅生动的画面，向浏览者展示一种形象、一个氛围， 从而吸引浏览者进入浏览。另一种是信息罗列型，这是一般大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等。2、风格保持一致（1）结构的一致性：网站的统一性在网站营销中占重要地位，而网站结构是网站风格统一的重要手段，包括网站布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等等，在结构的一致性中，我们要强调网站标志性元素的一致性，即网站或公司名称、网站或企业标志、导航及辅助导航的形式及位置、公司联系信息等，这种方式是目前网站普遍采用的结构，一方面减少设计、开发的工作量，同时更有利于以后的网站维护与更新。（2）色彩的一致性：方式是保持站点主体色彩的一致，只改变局部色块，优点是一个独特色彩的网站会给人留下很深刻的印象。（3）导航栏的一致性：导航是网站的一项重要组成部分，一个出色的富有企业特性的导航将会给人留下深刻的印象。利用背景取得统一：有效利用背景取得网站统一和专业化，将公司的标志、象征性的简单图片作为背景，并将其淡化，使浏览者在阅读网站内容的同时不经意记下公司的标志。在整个页面中形成特有元素在大小、明暗及位置的呼应， 很好地塑造了网站的特有形象。3、色彩搭配页面的色彩搭配是与网站的主题分不开的，在色彩搭配上，一般来说，页面的主体文字应尽量使用黑色)与背景对比明显，按钮、边框、背景等使用彩色。色彩的应用最好根据网站主题风格选定一种基调，再根据这个基调来搭配其他颜色。一般来讲，绿色配以金黄、淡白，可以产生优雅、舒适的气氛；蓝色与白色混合，能给人柔顺、淡雅、浪漫的感觉；红色和黄色、金色搭配能渲染喜庆的气氛；而金色和咖啡色搭配则会给人带来暖意。整个页面在视觉上应是一个整体，以达到和谐、悦目的最佳视觉效果。4 计白当黑的处理任 何 一 个 平 面 设 计 作 品 都 有 一 个 想 吸 引 观 众 的 主 题 ， 而 这 个主 题 应 该 是 整 个 画 面 的 中 心 ， 而 且 必 须 有 画 面 中 心 ， 否 则 画 面 便 会显 得 凌 乱 ， 很 难 突 出 主 题 。 如 果 有 了 留 白 空 间 ， 即 使 不 改 变 主 题 文字 的 大 小 和 文 字 色 彩 的 变 化 ， 也 会 像 一 颗 石 子 扔 进 平 静 的 湖 面 所产 生 阵 阵 涟 漪 的 效 果 一 样 ， 在 小 型 主 题 文 字 的 周 围 留 出 大 量 的 空白空间 ， 也会使主题显得格外突出 。提 升 到 艺 术 的 高 度 来 看 待 留 白 ， 是 通 过 视 觉 上 的 手 段 ， 留 白 可以 给 人 带 来 心 理 上 的 轻 松 与 快 乐 ， 也 可 以 给 人 带