基于切片布局的文复乡中心校网页设计【毕业论文】.docx

图书分类号：密 级：毕业设计(论文)题目：基于切片布局的文复乡中心校网页设计学生姓名班 级学院名称专业名称指导教师 学位论文原创性声明本人郑重声明： 所呈交的学位论文，是本人在导师的指导下，独立进行研究工作所取得的成果。除文中已经注明引用或参考的内容外，本论文不含任何其他个人或集体已经发表或撰写过的作品或成果。对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标注。本人完全意识到本声明的法律结果由本人承担。论文作者签名： 　日期： 年　月　日学位论文版权协议书本人完全了解关于收集、保存、使用学位论文的规定，即：本校学生在学习期间所完成的学位论文的知识产权归所拥有。有权保留并向国家有关部门或机构送交学位论文的纸本复印件和电子文档拷贝，允许论文被查阅和借阅。可以公布学位论文的全部或部分内容，可以将本学位论文的全部或部分内容提交至各类数据库进行发布和检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。论文作者签名： 导师签名： 日期： 年　月　日 日期： 年　月　日基于切片布局的文复乡中心校网页设计 计算机与信息科学学院 计算机科学与技术（师范）专业 20**级 指导教师 摘 要：本文介绍了专业网页制作公司的生产流程和采用切片技术将一张美工网页效果图做成网页的切片技术，同时介绍了HTML5、CSS3、DIV+CSS布局、JavaScript、jQuery等技术。关键词：切片；切片技术；网页制作Abstract: This paper introduces the professional web production company production process and the slicing technology will be a piece of art made web page rendering slice technique, at the same time introduces the HTML5 and CSS3,DIV+CSS layout, JavaScript, jQuery and technology.Key words: Slice; Slicing technique; Webpage making1 绪论 1.1 切片布局网页设计研究的背景和意义网页制作技术伴随着网络的快速发展而快速兴起，目前网络公司制作网页的过程是：由专业的美工出网页效果图，再由前端工程师来把效果图做成一模一样的网页[1]。前端工程师使用切片工具将网页效果图切成容易开发成网页的小图（切片），再利用DIV+CSS技术把切片组装成一模一样的网页。如果直接将整个网页效果图作为页面，就会产生以下几项问题:一是图片上的元素或部件无法使用，不能成为正常的网页[2]，二是一张网页大图片字节数大，从服务器下载到浏览器上需要的时间过长，不便于使用，所以当能用代码实现的效果不用切片，尽量减少字节数。三是基于切片布局的网页一般都是宽度固定的，不会跟随浏览器窗口变化而变化[3] 。2 网页效果图分析当拿到网页效果图后，首先应该对设计图有个全面的分析，网页上有哪些部件，这些部件需要用代码写，哪部分背景是单纯色，可以用背景颜色实现，哪些地方颜色无规则只能用部分切片。还要考虑用什么语言和方式写。网页效果图见图2-1所示。图2-1网页效果图根据网页效果图可以得出它的布局结构如图2-2所示。头部导航条公告栏轮播图新闻动态广告 推荐后勤无缝滚动通知每周工作计划尾部图2-2 布局结构图3 切片技术切片就是指在网页制作过程中用图像处理软件中的切片工具，将美工设计的网页效果图分割成一系列的小图片，有利于网页制作[4]。这些小图像称为切片。一张效果图可以有多种切图方案，但不是所有的切图方案都适合后期的网页制作[5]。切图遵循一些原则和技巧，经过分析和研究最终可找到最佳切图方案。切图尺寸一般用像素单位，矩形对边上应该是平行的，两个平行边应该是一样长。在人工操作时，切片大小有误差精度，圆角精度更严重[6]。因此在切图时，一般将原图放大三倍以上才切图。切完图后，把全部的切片选中，利用软件中菜单栏中“窗口”菜单里的“优化”命令，对所有小切片进行优化，解决了切片的精度问题。再利用文件菜单下的“导出”命令生成HTML网页和图像，然后将上面导出的网页和小图片直接存放在Brackets站点里。导出的网页文件不能使用，因为没有指定网页大小和布局。因此，接下来应该是在网页编辑软件中完成网页布局。切片一般放在DIV标签内，然后放置在网页中某个位置组装成网页效果。常用PhotoShop、FireWorks等切片工具。4 切片技巧切图也有技巧。构成一张图片的信息量是非常大的，因此在服务器中存储一张图片时占的容量也是很大的，同时从