网页美工与网页制作衔接中切片工具的运用发布者：本站 时间：2020-05-02 14:05:09
图片是网页设计中不可缺少的元素, 通常使用图像处理软件如Photo Shop软件、Firework软件等设计和处理网页需要的图片, 而切片工具是图像处理软件用来切割处理图片的工具, 也是将图像处理软件设计好的网页美工效果图转换成网页内容的重要工具。熟练地使用切片工具, 即可以使网页美工和网页制作无缝结合起来, 轻松驾驭网页的美工与制作。而在网页的设计制作过程中, 很多人对图像处理软件在网页设计中, 整合网页元素的方法还没有掌握, 还不能将切片工具的功能完美展现。针对此现象, 根据实践经验对图像处理软件中, 使用切片工具实现网页元素的整合进行了阐述。以PhotoShop软件中设计好的网页效果图为例, 将其使用切片工具处理成切片图像和HTML页面, 然后在Dreamweaver软件中做适当整合, 来展现切片工具实现从网页美工到HTML页面的方法和技巧。
图片是网页的重要组成元素, 图文并茂的网页更加形象、友好和有说服力。研究结果显示, 用户浏览网页内容时, 会有第一视觉区域、第二视觉区域、第三视觉区域, 通常情况下, 用户第一眼会落到页面的图片区域, 第二眼会落到大标题区域, 第三眼才会落到其他地方, 所以说图片能有效地美化网页并增加网页的吸引力。
网页所需图片的设计与美化往往离不开图像处理软件, 如Photo Shop软件、Firework软件等。那么, 在图像处理软件设计好了网页效果图, 如何转换成HTML页面呢?这是网页设计和制作过程中必须解决的问题。如果将图像处理软件中处理好了的整张页面效果图直接插入到网页, 这样的网页一方面呆滞且不友好, 交互欠佳;另一方面图片过大, 影响网页打开速度, 而且不利于网站的更新和维护。在图像处理软件中使用切片工具, 将效果图切割成若干小切片, 然后导出一个站点文件夹, 其中包含HTML页面和图像文件夹, 从而, 实现了效果图到HTML页面的转换, 即网页美工与网页制作的无缝结合。
1 概念
这里用到的网页美工软件是Photo Shop (以下简称PS) , 网页制作软件是Dreamweaver (以下简称DW) 。PS是目前全世界应用最广泛的软件之一, 它是一款由美国Adobe公司发布的用来处理图形、图像的软件。它广泛应用于平面设计、商业设计、网页设计等诸多领域[1]。DW是一款集网页制作、网站管理于一身的网页编辑器, 国内外众多网站页面技术设计师和技术开发工程师推崇的主流软件, 目前已经成为网站设计、制作和开发的重要平台之一[2]。在PS中设计好网页效果图后, 使用PS的切片工具将效果图进行切割。那么, 为了方便后期的网页制作和修改, 掌握一定的切片技巧和原则是很有必要的。
1.1 块与切片
这里所说的块和切片不是同一个概念, 但是块和切片都是网页的组成部分。可以理解为块由切片组成。块与网页的基本构成相关, 尽管网页千差万别, 但网页的基本构成元素是固定的, 包括网站的Logo、网页的广告条Banner、导航条区域、主体区域、版权区域等。块与网页的布局也是相关的, 在网页设计中, 在切图时, 要尽量保证同一块中的内容完整, 也就是说, 网页构成的每一个部分在一个块内。而切片是块中的小图形, 根据设计需求将块切割成更小的切片。当效果图转换成网页之后, 块对应的是网页中的表格 (table) , 切片则对应的是网页中的单元格 (td) 。
1.2 分块原则
首先, 要有分块思想, 根据网页设计的相关内容来确定整体的分块策略, 也就是把整个网页分成多个块构成, 每个块即是一个table, 整个网页就是由多个table组成的;其次, 尽量分成大行, 平行的切块, 因为网页在显示时, 一般都是从上而下、从左到右逐行来显示网页内容的, 而要杜绝网页上的内容杂乱地出现。
1. 优秀的网络资源，强大的网站优化技术，稳定的网站和速度保证
2. 15年上海网站建设经验，优秀的技术和设计水平，更放心
3. 全程省心服务，不必担心自己不懂网络，更省心。
