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

基于切片布局的文复乡中心校网页设计 计算机与信息科学学院 计算机科学与技术 摘 要：本文介绍了专业网页制作公司的生产流程和采用切片技术将一张美工网页效果图做成网页的切片技术，同时介绍了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 切片技巧切图也有技巧。构成一张图片的信息量是非常大的，因此在服务器中存储一张图片时占的容量也是很大的，同时从服务器里下载图片到客户端需要的时间也是相当长的7。因此在利用切片转换成网页时，可以利用一些技巧。4.1 能用代码解决的问题不用切片现在HTML5+CSS3有很多特性，比如圆角、阴影以及单色背景等一句代码就可以实现。4.2 以相关内容为一块 在切图时，一个独立的对象可以切成一个块，例如标题文字区域，网页的logo区域，网页的广告区域，网页的导航区等可以切成一个小块。4.3 减少切片个数网页上的文字与图片信息都是存储在网页服务器上的8，一个切片就是一张小的图片。根据显示的点阵原理可以知道，对于同一张大图像来说，切片数减少，存储在网页服务器上的这张图的信息量也减少了，也就是说在网页服务器上占的空间少。所以当切片的背景是单一颜色，就不用切片，用Brackets软件里标签的样式属性设置背景色。以“文复乡中心校”网页页面导航区域为例，在实验中保证网页页面效果相同的情况下，用background属性，值为#78b8e8;结果如图4-1所示。图4-1 标签属性实现导航条背景效果采用切片来处理，我们切一个像素宽的切片来平铺也能得到这样的效果，结果如图4-2所示。图4-2 切片平铺实现导航条背景效果实验得知，用标签的background属性和用切片平铺最后得到相同的效果，这种做法实现了切片的效果，同时可以使网页服务器上的切片数减少了。4.4 减小切片大小以“文复乡中心校”网页页面头部为例，切成1*1个切片，和切成2*2、2*4、4*4个切片相比较。在实验中未采用减少切片大小和采用切片大小方法，可以得到下面表中的数据。从下面表中的数据可以看出四种处理方法造成的结果是：未采用减少切片大小方法时，切片为1*1时，图片大小为87.2KB如图4-3所示。图4-3 切片数为1*1而采用减少切片大小方法后，切片为2*2时，图片大小为14.18KB，如图4-4所示。图4-4 切片数为2*2切片为2*4时，图片大小为3.743KB如图4-5所示。图4-5 切片数为2*4切片为4*4时，图片大小为1.973KB如图4-6所示。图4-6 切片数为4*4最后四种切片方法结果如表1所示。表1 减小切片大小和采用减小切片大小的参数对照表未采用减小切片大小减小切片大小原图大小1*1切片数2*2切片数2*4切片4*487.2KB14.18KB3.743KB1.973KB实验得知，减小切片大小比未减少切片大小的图片容量少得多。5 切片实现 根据原图中的相关内容，确定整体的切分策略，即切分思想9，把整个网页看成是许多个小块组成的，每个切片块放在DIV中，调整DIV的位置可以调节小切片的位置从而可以精确复原成网页。在切图时，一个独立的对象可以切成一个块，例如标题文字区域，网页的logo区域，网页的广告区域，网页的导航区等可以切成一个小块。这样做的好处日后方便网页编程和修改。本设计图各个独立分块如下所示。头部内容独立切分如图5-1所示。 图5-1 头部效果图 头部切片如图5-2、图5-3所示。图5-2 文字切片 图5-3 图片切片由于头部左边那个纯色区域太少，所以这里就可以用切片来处理整个背景，背景切片如图5-4所示。图5-4 背景切片导航条独立切分如图5-5所示。图5-5 导航条效果图导航条的背景为纯色，所以不用切片，用Photoshop里的吸管工具吸取颜色值，再赋值给background标签属性来实现。两个菜单之间有一条竖线，这个竖线用切片切下来，在每一个菜单的前面用链接切片，“首页”前面不用此切片。由于这个切片太小，所以这里不能展示。其中导航条的圆角也不用切片，也用代码实现。侧边栏独立切分如图5-6所示。图5-6 侧边栏效果图侧边栏有3个区域，分别为公告、通知及每周工作计划。其实三个区域类似，所以只需要切其中一个区域，以公告区域为例来切分，切片如图5-7所示。图5-7 标题背景剩余部分为边框圆角、更多按钮、边框阴影以及下划线等，这些都可以用代码来实现，所以就不用切片。主要内容区独立切分如图5-8所示。图5-8 内容区效果图每一个标题的背景为纯色，不需要切片。广告区域和无缝滚动区域需要切分，广告区域切分如图5-9所示。图5-9 广告区域切片 无缝滚动区域只需要切按钮就可以了，按钮切片如下图5-10所示。图5-10 按钮切片尾部不需要切分。6 切片组装6.1 代码框架根据以上所切的切片以及我们用Photoshop里的工具测量每一部分的长宽以及位置具体到一个像素点，我们可以用HTML+CSS3来组装我们切片以及网页实现。DIV布局如下图6-1所示。图6-1 DIV布局图以下为代码框架。/*头部切片导入*/ /*头部flash导入*/ /*导航条菜单*/*包裹侧边栏和主要内容区*/*侧边栏公告区域*/ /*公告的内容*/ more. /*侧边栏通知区域*/ /*通知的内容*/ more. /*侧边栏每周工作计划区域*/ /*每周工作计划的内容*/ /*主要内容区*/ /*图片新闻轮播图*/ 图片新闻 /*轮播图图片链接*/ 1/*轮播图图片序号*/ /*轮播图图片新闻主题*/ /*每个主题有链接*/ /*新闻动态区域*/ 新闻动态/*新闻动态标题*/ /*每一个小新闻标题*/ /*广告区域*/ /*广告区域切片导入*/ /*广告区域flash导入*/ /*重点推荐区域*/ 重点推荐/*重点推荐标题*/ /*重点推荐内容*/ /*后勤安全区域*/后勤安全/*后勤安全标题*/ /*第一列内容*/ 第1周食谱 /*第二列内容*/ 我校开展一年级消防知识宣传 /*无缝滚动区域*/间隔停顿短中长滚动速度：慢中快 课余时间拔河比赛/*图片新闻链接*/ /*尾部区域*/Copyright 2014-2015 武隆县文复苗族土家族乡中心校 地址：武隆县江口镇文复乡 7 开发环境简介基于切片布局的网页设计，可以选择多种网站开发技术，如TML5+CSS3、JSP、PHP等，而在本设计中，主要采用HTML5+CSS3开发为主，DIV+CSS布局，JavaScript、jQuery为辅实现某些特定功能。因此，根据本设计所选择的开发语言，为了提高系统开发效率8，决定使用Brackets作为开发工具进行开发，网页的动态效果使用JavaScript以及Flash，并使用PhotoShop对效果图进行切片处理，来完成网页设计的环境搭建。7.1 开发工具Brackets 编辑器Brackets 是一款使用 HTML，CSS，JavaScript 创建的开源的针对 Web 开发的编辑器9。你可能在宁皓网的视频里见过这款编辑器。实时预览，快速编辑，跨平台，可扩展，开源，让 Brackets 成为一款非常优秀的编辑器。其优点如下。（1）Brackets实时预览。Brackets会为你打开一个Chrome 浏览器的窗口，实时显示正在编辑的文档。也就是，你现在可以去修改文档里的内容，或者文档所链接的样式表还有脚本文件，所做的修改会实时的在浏览器中显示。注意，在实时预览时，你不能使用浏览器的开发者工具，一旦打开开发者工具，实时预览就会失效了。（2）Brackets快速编辑。Brackets允许我们快速去编辑HTML或者CSS文档。快速编辑HTML文档，可以去为选中的元素快速添加或者修改样式。编辑器会给你显示出应用在所选中元素上的所有的样式，选中对应的样式，直接去修改，这样你就不需要再去找到对应的样式表，对应的地方去修改了。（3）Brackets扩展。你可以为Brackets 编辑安装扩展来增加它的功能，也可以在Brackets Extension Registry里可以查看可用的扩展，在这里，你也可以提交自己编写的扩展。7.2 切片工具 Adobe PhotoshopAdobe Photoshop，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。Photoshop有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。网络的普及是促使更多人需要掌握Photoshop，因为在制作网页时Photoshop是必不可少的网页图像处理软件10。7.3 开发语言 HTML5+CSS3HTML5+CSS3奠定了打造下一代Web应用的基础，这两项技术可以让网站更易开发、更易维护、更具用户友好性。HTML5被设计为跨平台的技术，只需要一个所有主流操作系统上都有的免费现代浏览器。最新版本的Apple Safari、Google Chrome、Mozilla Firefox、Opera以及Microsoft Internet Explorer 都支持HTML5的许多特性。在iPhone、iPad及Android移动设备上预装的浏览器也都对HTML5提供了极好的支持。CSS3使很多以前需要使用图片和脚本来实现效果，只需要短短几行代码就能完成，如圆角、图片边框、文字阴影和盒阴影等11。CSS3不仅能简化前端开发人员的设计过程，还能加快页面的载入速度。8 结束语切片技术是把美工设计的网页效果图转换成网页时所用的技术，切片技术中贯穿了分块和切片思想。分块与网页的布局和网页的内容相关。对于同一张网页效果图，经过多次的实验研究表示，不同的切片方案就会有不同的网页布局。同时经过大量的实验研究，在保证美工的效果图转换成网页后效果仍不变，采用减少切片个数和减小切片大小方法，能使页面占的容量减小，这样加快了浏览网页的速度。我从大四实习以来就一直在软件公司从事前端开发这个行业，我了解到现在公司做一个网站必须是专业的美工出设计效果图，然后由前端程序员对效果图进行切片操作，最后做到与网页效果图一模一样的网页。参考文献:1 李兰友，杨波，姚楠.网页设计技术M.北京：清华大学出版社，2013.2 胡崧.Dreamweaver8完美网页设计M.北京：中国青年出版社，2006.3 张翔.Internet网站建设及网页制作J.攀枝花学院学报，2004(10):108-111.4 杨家.切片工具在网页中的应用J. 电脑编程技巧与维护, 2014, (16):13-14.5 靳娜,宋大娟.基于DivCSS的网页布局的设计与实现J. 黑龙江科技信息, 2012, (4):100-100. DOI:10.3969/j.issn.1673-1328.2012.04.116. 6 周琦.关于网页设计与制作技术的探讨J.电脑知识与技术，2009(5):7376-7378.7 刘一田，孔震，李萌.Web应用中故障检测机制的研究与改进J.陕西电力，2012(6):66-69.8 张智国.浅谈网页切片的应用J. 才智, 2011, (16):33-36.9 冯光.Photoshop和Dreamweaver的网页制作应用C. /天津市电视技术研究会年会. 2012.10 杨金花.网页制作中切图技术的研究J. 电子设计工程, 2014, 22(8):55-57.11 赵香芹.浅谈基于DIV+CSS标准布局下的网页设计J. 工业设计, 2012, (16):12-14. index = (index+1)%length; slideFlag = true; , 3000); autoSlide(); ); css样式charset utf-8;/* CSS Document */li list-style: none; img border: 0; header, nav, aside, article,footer border:solid 1px #b7b7b7; -webkit-border-radius: 6px; /* 定义圆角*/ /* 头部*/header position:relative; width:1335px;height:210px;-webkit-box-shadow: 2px 2px 20px #f4f3f1;/* 定义头部阴影样式*/overflow:hidden; ul list-style:none; a text-decoration:none;/* 导航条*/nav width:1335px; height:30px; margin-bottom:10px; background:#78b8e8;-webkit-box-shadow: 2px 2px 20px #f4f3f1;nav ul margin-top:4px; padding-left:0px;/* 导航条的每一个链接2D动画*/nav li float:left; width:100px; background:url(./img/nav1.png) no-repeat; margin-left:3px; line-height:30px;nav .nob background:none;nav a display:block; text-align:center; height:30px;margin-top:-4px;font-weight:bold;color:#fff;nav a:link display:block; color:#fff; text-decoration:none;nav a:visited display:block; color:#fff; text-decoration:none;nav a:hover display:block; color:#FC3; font-weight:bold; text-decoration:none; #main width:1335px; height:auto;/* 侧边栏*/aside float:left; width:283px; height:800px;border:none;margin-left:10px;margin-bottom:10px; margin-right:0px;-webkit-box-shadow: 2px 2px 20px #f4f3f1;-webkit-border-radius: 6px; aside a:hover color:#FCC; text-decoration:none;aside a:link color:#09C;aside .side1 position:relative; width:273px; height:280px; margin:4px; margin-bottom:10px; margin-left:-8px; margin-top:-10px; background:url(./img/sidetitle1.png) no-repeat; -webkit-box-shadow: 2px 2px 20px #919191;/*边框 阴影*/-webkit-border-radius: 6px; aside .side1 ulpadding-left:10px; padding-top:36px; list-style-type:none; aside .side1 ul a padding:0px; margin:0px; text-decoration:none; font-size:9px;.hid overflow:hidden; width:257px; height:18px; padding-left:0px; margin-left:8px;aside .side1 .more1 position:absolute; bottom:10px; right:10px;.btn1 position:absolute; bottom:-8px; right:0px; padding:0px 0px; line-height:12px; color:#fff; font:16px Microsoft YaHei, Verdana, Geneva, sans-serif; cursor:pointer; border:1px #31AE0A solid; -webkit-box-shadow:inset 0px 0px 1px #fff; -moz-box-shadow:inset 0px 0px 1px #fff; box-shadow:inset 0px 0px 1px #fff;/*内发光效果*/ -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;/*边框圆角*/ text-shadow:1px 1px 0px #011EB6;/*字体阴影效果*/ background-color:#00FEE0; background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#00FE5B), to(#015DE8); background-image: -webkit-linear-gradient(top, #00FED5 0%, #2E6BF0 100%); background-image: -moz-linear-gradient(top, #feb100 0%, #e8a201 100%); background-image: -ms-linear-gradient(top, #feb100 0%, #e8a201 100%); background-image: -o-linear-gradient(top, #feb100 0%, #e8a201 100%); background-image: linear-gradient(top, #feb100 0%, #e8a201 100%);/*颜色渐变效果*/.btn1:hover background-color:#01E85D; background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#01E8BA), to(#00FE70); background-image: -webkit-linear-gradient(top, #01E8CC 0%, #00FED5 100%); background-image: -moz-linear-gradient(top, #e8a201 0%, #feb100 100%); background-image: -ms-linear-gradient(top, #e8a201 0%, #feb100 100%); background-image: -o-linear-gradient(top, #e8a201 0%, #feb100 100%); background-image: linear-gradient(top, #e8a201 0%, #feb100 100%);aside .side2position:relative; width:273px; height:280px; margin:4px; margin-bottom:10px; margin-left:-8px; background:url(./img/sidetitle2.png) no-repeat; -webkit-box-shadow: 2px 2px 20px #919191;/*边框 阴影*/-webkit-border-radius: 6px; aside .side2 ulpadding-left:10px; padding-top:30px; list-style-type:none;aside .side2 .more2 position:absolute; bottom:10px; right:10px;aside .side2 ul a padding:0px; margin:0px; text-decoration:none; font-size:9px;aside .side3 width:273px; height:206px; margin:4px; margin-bottom:10px; margin-left:-8px; background:url(./img/sidetitle3.png) no-repeat; -webkit-box-shadow: 2px 2px 20px #919191;/*边框 阴影*/-webkit-border-radius: 6px; aside .side3 ulpadding-left:10px; padding-top:30px; list-style-type:none;aside .side3 ul a padding:0px; margin:0px; text-decoration:none; font-size:9px;/* 右侧内容*/article float:right; width:1056px; height:800px;margin-bottom:10px;margin-left:0px;margin-right:-16px;margin-top:6px;border:none;-webkit-box-shadow: 2px 2px 20px #f4f3f1;-webkit-border-radius: 6px; article .art1 width:424px; height:300px; margin:4px; margin-left:0px; margin-bottom:0px; border:#b7b7b7 1px solid; float:left; -webkit-border-radius: 6px; overflow:hidden; article .atitle margin:0px; .roll-news width:480px; height:300px; border:solid 1px #c1c1c1; .roll-news-index-hover background-color:white; .roll-news-image img width:424px; height:270px; .roll-news-index position:relative; top:-50px; margin-right:60px; float:right; .roll-news-index .roll-news-index li list-style:none; float:left; font-size:12px; font-weight:600; width:18px; height:16px; line-height:16px; cursor:pointer; margin:0 3px; background-image:url(opacity_50.png); text-align:center; .roll-news-title margin-bottom:10px; position:relative; top:-25px; padding-left:10px; height:22px; line-height:20px; background:url(opacity_50.png); .roll-news-title a font-weight:bold; font-size:14px; text-decoration:none; color:#222222; .roll-news-title a:hover color:red; article .art1 img margin:0px; article .art2 width:610px; height:300px; margin:4px; margin-left:0px; border:#b7b7b7 1px solid; float:left; -webkit-border-radius: 6px; .art2 ul width:98%; height:268px; margin:8px; padding:0px;.art2 ul liwidth:96%; height:18px; overflow:hidden; margin:4px; margin-bottom:8px;padding-left:14px; text-align: -webkit-match-parent; background: url(./img/dian.jpg) no-repeat scroll 0px 5px transparent; border-bottom:#CCC 1px dashed;.atitle width:100%; height:30px; background:#5dc2ce; margin-top:4px; margin-bottom:10px; -webkit-box-shadow: 2px 2px 20px #f4f3f1;.art2 ul li a float:left; width:70%; margin-right:10px;overflow:hidden;article .art3 width:1041px; height:100px; margin:4px; margin-left:0px; border:none; clear:both; -webkit-border-radius: 6px; overflow:hidden;article .art4 width:424px; height:200px; margin:4px; margin-left:0px;border:#b7b7b7 1px solid; clear:both; float:left; -webkit-border-radius: 6px; .art4 ul width:98%; height:268px; margin:8px; padding:0px; margin-top:10px;.art4 ul liwidth:96%; height:18px; overflow:hidden; margin:4px; margin-bottom:8px;padding-left:14px; text-align: -webkit-match-parent; background: url(./img/dian.jpg) no-repeat scroll 0px 5px transparent; border-bottom:#CCC 1px dashed;article .art5 width:610px; height:200px; margin:4px; margin-left:0px; border:#b7b7b7 1px solid; float:left; -webkit-border-radius: 6px; article .art5 .one float:left; width:48.5%; height:160px;margin:0px; margin-right:12px; padding:0px; padding-top:8px;article .art5 .one li width:96%; height:20px; margin:0px; padding-left:4px; text-align: -webkit-match-parent; background: url(./img/dian.jpg) no-repeat scroll 0px 5px transparent; border-bottom:#CCC 1px dashed;article .art5 .two li width:96%; height:20px; margin:0px; padding-left:0px; text-align: -webkit-match-parent; background: url(./img/dian.jpg) no-r