网页美工与网页制作衔接中切片工具的运用

网页美工论文第六篇：网页美工与网页制作衔接中切片工具的运用

 

　　摘要：图片是网页设计中不可缺少的元素, 通常使用图像处理软件如Photo Shop软件、Firework软件等设计和处理网页需要的图片, 而切片工具是图像处理软件用来切割处理图片的工具, 也是将图像处理软件设计好的网页美工效果图转换成网页内容的重要工具。熟练地使用切片工具, 即可以使网页美工和网页制作无缝结合起来, 轻松驾驭网页的美工与制作。而在网页的设计制作过程中, 很多人对图像处理软件在网页设计中, 整合网页元素的方法还没有掌握, 还不能将切片工具的功能完美展现。针对此现象, 根据实践经验对图像处理软件中, 使用切片工具实现网页元素的整合进行了阐述。以PhotoShop软件中设计好的网页效果图为例, 将其使用切片工具处理成切片图像和HTML页面, 然后在Dreamweaver软件中做适当整合, 来展现切片工具实现从网页美工到HTML页面的方法和技巧。

 

　　关键词：切片工具; 网页美工; 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.3 切片原则

 

　　切片工具如图1所示, 在切图时, 应该遵循以下原则:

 

　

　　图1 切片工具   

 

　　(1) 切片和所切页面内容的尺寸保持一致, 这样在HTML页面整合内容以及日后的修改更加方便。

 

　　(2) 切片尽可能的小。颜色相同或者由形状相同的图像组成的图块, 可以只从图块中切出一个像素的切片, 然后在DW中用该切片平铺成所需的图像。这样, 可以减少存储网页信息的空间。

 

　　(3) 切片尽可能的少。相同的图像只需要切一张即可, 在HTML页面可以重复使用该切片;如果是纯色的切片可以舍弃, 直接在DW中设置背景颜色。同样减少了存储网页信息的空间。

 

　　2 在PS中使用切片工具切割网页效果图

 

　　首先根据网页设计的草图或者网页设计说明书的要求, 在PS中新建一个文件, 在PS中设计出网页效果图。然后分析网页内容的结构和排版模式, 这样就能确定好块结构。再根据细节图片进行切割。进行切割之前, 一般先使用参考线将效果图划好区域, 根据参考线交叉的区域进行切割, 就能很好地控制切片工具了。

 

　　在切片时应注意:

 

　　(1) 按照由大到小、从左至右的顺序进行切割。

 

　　(2) 切片不能重叠。

 

　　(3) 多个素材重叠时按照先后顺序来切割。

 

　　(4) 将纯色切片、重复切片以及其他无用切片设置为“无图像”。这样导出来的图片全部属于有效图片, 避免无效图片浪费存储空间。

 

　　切割完成后, 使用放大镜观察切割是否有重复的地方, 如果有重复的地方, 则需要进行微调, 方法如下:选择“切片选择工具”, 在需要调整的切片图像上双击, 打开“切片选项”对话框, 对切割图片的高度或者宽度进行微调。

 

　　最后, 选择PS“文件”菜单栏的“存储为Web格式”命令, 打开命令窗口优化图像, 优化图像可以降低图像的文件容量, 加快网页的加载速度, 并将切片存储为gif格式的图片, 保存类型选择“HTML和图像”, 存储在事先新建好的My Web站点文件夹中。这里要特别注意的是, 文件名必须用英文命名, 因为浏览器不支持中文命名的图片、动画、视频等链接。这样将在站点文件夹下自动生成对应的HTML页面和images图像文件夹。至此, 完成了PS部分的操作。

 

　　切割的时候个人的经验和感觉特别重要, 要多次尝试和练习。对于同一副效果图, 每个人切割做出的网页不一定都是一样的表格样式。

 

　　3 在DW中整合内容

 

　　表格是网页制作中规范化数据和网页布局的有力工具。在网页设计中, 利用表格对文本、图片等页面元素的位置进行排列和控制, 因此很多网站的页面都是通过表格实现布局的。那么, 通过上面方法从PS存储出来的HTML页面正是根据切割情况, 实现一个以表格布局的页面。

 

　　打开DW软件, 先将PS存储的My Web文件夹当做站点文件夹建立站点, 将My Web站点文件夹下的Imagese文件夹设置成默认的图像文件夹, 然后在DW中打开PS优化后的HTML页面, 对该页面的内容进行整合。以下方法和技巧值得注意:

 

　　(1) 将页面中纯色td区域的图片删除, 并在DW中设置相应背景颜色代替。

 

　　如<td bgcolor="#333333">;

 

　　(2) 将需要在DW中添加文字内容, 或者需要做其他修改的td区域的图片删除, 并将删除的图片设置成该td的背景图片。

 

　　如:<td background="images/index_10.gif">;

 

　　(3) 将删除图片后的td单元格的宽和高设置成被删图片的宽和高, 这样能避免整体布局发生错位的现象。

 

　　如:<tdwidth="142"height="134">

 

　　还可以合理利用HTML+CSS+JS等技术实现网页更多效果[3], 以完成PS到DW的整合过程, 之后就可以在DW中完成网页制作或者网站开发的后续工作了。如图2所示。

 

　

　　图2 整合后网页效果图   

 

　　4 结语

 

　　熟练掌握了切片工具的使用方法和DW的整合技巧, 就能轻松使用切片工具将设计好的效果图切出需要的图片, 存储为HTML页面, 然后在DW中整合处理, 这样就实现了从网页美工到HTML页面的转换, 举一反三, 即可设计出优秀的网页来了。

 

　　参考文献

 

　　[1]高旺.Photo Shop CS6超级手册[M].北京:人民邮电出版社, 2013.

　　[2] 修毅, 洪颖, 邵熹雯.网页设计与制作——Dreamweaver CS6标准教程[M].2版.北京:人民邮电出版社, 2015.

　　[3]杨柳.试析Web前端开发.电脑编程技巧与维护, 2018.