图书出版网站的前端设计与制作

1、河南农业大学本科生毕业论文(设计) 题 目 图书出版网站的前端设计与制作 学 院 信息与管理科学学院 专业班级 计算机科学与技术（软件工程2班） 学生姓名 郭怀远（1307101106） 指导教师 高瑞 撰写日期：二一七年五月十五日目 录1 引言12 前端开发环境及相关技术22.1 前端开发环境22.2 前端开发相关技术22.2.1 JavaScript简介22.2.2 CSS简介22.2.3 JQuery简介32.3.4 DOM简介33 前端页面效果图设计33.1 简洁化33.2 视觉效果43.4 交互性43.5 点线的运用63.6 关系结构63.7 表达主旨74 前端页面实现84.1 分层

2、开发84.2 代码编写84.3 内部测试与后续优化94.4 页面成果展示105 前端页面的一些技术实现详析135.1 列表展示区135.2 首页banner焦点图145.3 图书目录的收缩与展开155.4 图书展示的选项卡166 结语17致 谢18图书出版网站的前端设计与制作郭怀远信息与管理科学学院计算机科学与技术专业摘要：随着图书出版行业的规模壮大和快速发展，图书的在线出版和销售成为种新的形势和需求，图书出版网站在这一背景下应运而生，基于此，本文结合Sublime，Photoshop等Web前端设计工具，利用JavaScript，CSS，div等技术来对图书出版网站的Web前端进行了视觉效果

3、和内容规划设计，包括效果图的制作，视觉和颜色的搭配及各种页面的布局和js动态交互动态内容的呈现，完成了图书出版网站首页、电子书城、数字图书馆、移动阅读、新闻动态、图书期刊、人才招聘等模块的静态页面效果和动态脚本制作。关键词：网页制作；前端；Ajax；UIFront Pages Design and Production of the Book Publication WebsiteAbstract：The development of Web front end is made of web page, and has obvious features of the times. Web pr

4、oduction is the product of the Web 1 times, the website to static content, the user uses the website behavior also to browse the main. After 2005, the Internet into the Web 2 era, Ajax brings no refresh data interaction, reduce the number of web pages jump. This article plans through sublime, tools

5、such as Photoshop with JavaScript, CSS technology to achieve a book publishing website front-end, including renderings of the production, all page layout and JS dynamic interactive content.Keywords：Webpage;Front website;Ajax;UI1 引言在当前互联网盛行的前提下，Web前端技术也越来越成熟，从之前的表格布局到CSS2.0，再到CSS3.0，以及现在将要普及的html5。We

6、b前端在整个网站建设中的作用也越来越明显，其地位也越来越突出。一个好的网站体验离不开web前端的设计与制作，突出的互联网应用将发挥广告宣传、咨询洽谈、网上付款、电子账户、服务传递、意见征询和交易管理等作用1。相应的前端开发环境与相关技术也变得越来越重要。2 前端开发环境及相关技术2.1 前端开发环境前端的开发离不开相关工具的配合，开发使用的工具主要有：(1) Sublime Text (2) Adobe Dreamweave(3) Adobe Photoshop2.2 前端开发相关技术2.2.1 JavaScript简介JavaScript是动态类型语言，当然它也是弱类型的，并且javascr

7、ipt的面向对象是基于（prototyoe-based）实现的。在目前所有的主流浏览器上，它是唯一一种浏览器支持的脚本语言，主要作用是：在不与服务器交互的情况下，修改html页面内容，并且其最关键的部分是DOM（文档对象模型）2。2.2.2 DIV+CSS简介很久之前，web工程师通过table进行页面布局，现在页面布局大都推荐div+css方式。所谓的div+css是通过css控制div的布局。实际应用不仅是div,还有p,span,img,table等任意节点的定位都可以通过css来控制。块级元素：诸如段落、标题、列表、表格、DIV和BODY等元素都是块级元素。内联元素：如A、EM、SPA

8、N元素及大多数的替换元素，如图像和表单输入的元素。他们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素。：在HTML中包含LI元素.他们类似于书签，用于特殊的表示场合(如圆点、字母或数字)。如果列表项元素出现在某种有序列表中，则具有顺序性。因此在有序列表中的列表项能依据上下文自动编号3。图 1 盒模型解析图2.2.3 JQuery简介Jquery是javascript的一种框架，能够快速搭建页面整体布局与功能。Jquery框架的理念是：写出更少的代码，实现更多的功能。它属于轻量级的javascript库，它有着其他javascript库所无法替代的功能，它还兼容

9、CSS4，并且兼容当前主流浏览器（chrome， fixfire 3.0+， IE2.0+）。jquery能使用户通过DOM方便的修改HTML各个节点的元素与增添新的功能4。2.3.4 DOM简介DOM不是一种语言，而是W3C平台提供的标准API，类似于数据结构中的树。通知树的节点、子节点、父节点、层层操控各个元素的一种API。DOM是与平台、编程语言无关的一种接口，使你可以操作当前页面的其他组件。DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）5。3 前端页面效果图设计3.1 简洁化对于大部分网站的前端页面来说，就是为了满足用户的获取信息的需求，所以

10、要目标明确、行为直接。在设计首页的时候，要力求整体简洁、朴素，色彩搭配均衡、和谐、页面布局大方，而且一定要注意协调、合理，字间距、行间距适度。同时，要强化网站的功能，切不可让图片背景图太过炫目，因此要屏弃杂乱无章图片、背景等，让用户在第一眼时不会受到过多的干扰，舒心的了解网站的功能。本网站首页的设计分为页头、search、导航、面包屑、侧边栏、内容、新闻动态和页脚等栏目，结构清晰。中间部位采用典型的三栏式限宽布局，这样呈现出来的结构极为整洁，又不失显示庞大内容的功能。中间部位在实际制作时是为流式布局的一种，其高度会随着内容的增加而增加，符合实际开发的需要。导航部位实际为通栏布局，这样能容纳更多

11、的目录项，又显得大气简洁。首页由8个功能区构成：页头、主导航栏、面包屑导航、图书分类栏、热书展示区、主编推荐栏、战略合作栏和页脚。头部：所有的网站都会设置此类目，但内部的模块各有不同。该网站头部包括网站logo、搜索框以及“我的订单”等共同构成，这几个构成要素根据本网站需求规划书所设置，同时也符合当前主流网站构成的基本要素要求。主导航栏：导航可以看做是对网站内容的分类，把网站的内容进行细分，方便用户根据个人需求选择浏览相应栏目页面。首页导航要做到分类清晰，导航栏目间不重复。该栏目设计为通栏显示，是首页最为醒目、显眼之处，采用蓝底白字搭配，hover时背景深蓝显示，符合网站的整体风格6。图 2

12、首页结构划分图3.2 视觉效果视觉要素是现代网页又一个重要的表现方法，各种颜色组合和网页结构排列展现出是不同的款式。基本上冷色调可以用来表现大方利落的风格，而暖色调则在表现时尚、流行等时尚元素上比较明显。许多人在进行网站设计的时候都只考虑自己的想法，忘记了网站用户的感受，比如有人比较喜欢红色，于是在整个网站中都布局红色背景，虽然你看起来舒服了，但是将网站设计一个模型之后让别人都来看一看，看看网站设计是否能够第一时间吸引住他们，如果连你的身边的人都不能够留住，那么说明你的网站设计还必须进行修改，而我们的视觉效果就是要在不断修改的背景之下完成，让更多的人证明你的网站视觉设计确实吸引人8。由于网站属

13、于内容较多的电子商务系列图书网站，类似于当当网，内容量过于庞大，颜色把握不好很容易显得凌乱不堪，为了避免此问题保持干净清爽的页面，首先要控制不同颜色的数量，故本网站的主色调为蓝色，并以颜色为基础进行不同层度的加深或减淡，内容区域文字颜色为深灰色并配合特殊背景下的白色，显得较为干净整洁，图3为首页部分区域截图。图 3 首页部分区域颜色配置展示图图4展示的是页面首页图书编辑推荐的功能截图。图 4 编辑推荐榜3.5 点线的运用大多数在内容多样的的网页上为了可以让浏览者更轻松的找到他们想要的东西，点线的指引作用必不可少，图5为网页中点线的使用图例。图5点线使用图3.6 关系结构图6中左侧清晰明了，右侧

14、则层次不清晰。A表示头部，B表示背景，C表示右侧内容详细区，D为产品区。 正确的层次布局 错误的布局图 6 结构层次对比图图7是网页中上面讲到结构的体现，分别为导航区、面包屑、左边栏、内容区，层次分明。图 7 结构层次举例3.7 表达主旨在制作页面的时候不仅要完整的实现功能，更重要的是把要表达的中心思想呈现给客户。在表达意思的时候要清楚，直接点明，不要过于隐晦。图8就以首页为例加以说明。图 8 首页效果图首页为明显的左中右布局，左边“图书分类”表示导航索引区，中间部分右分为“banner展示区”和“新书上架”，右侧分为“最近动态”和“编辑推荐榜”，层次分明，主旨清晰。这样布局的目的是更大限度展

15、示内容的同时又保持了页面的清晰美观。4 前端页面实现4.1 分层开发 分层开发主要涉及：基本样式（base）、通用样式（common）、页面样式（page）。其中base样式为最基础的样式，包括字体大小，大致框架等。通用样式本身属于模块级，包括导航栏、留言板、网页底层结构，可以供各个页面使用。page样式属于页面级的9。分层开发正是通过图9来一步步实现的。图 9 分层开发概况图4.2 代码编写前期网站布局做好以后，下面就进入代码编写阶段，基本流程为总体规划好网站大致样式后，就明确分工进行网站前端各个细节工作，包括美工设计，图片查找，框架构建，页面设计。当大致工作完成后，进行测试，最后进行页面细

16、节的完善，最终将完善后的页面交给后端网站开发、完成网站后台开发制作，确保开发网站能节约时间并能进行二次开发10。大致规划如下：确定了网站制作流程后还需要对网站原型细节进行分析，拆分，把反复使用的部分挑出来制作成代码模块，方便以后再遇到类似情况的代码的套用。确认二，三级网页的格调搭建相一致框架。前台页面CSS样式确定以后，就进行通用板块CSS的设计（包括单选框，button，字体大小，默认字体颜色，背景图片以及颜色等），完成后并提交给前端，前端制作人员再根据整体内容来进行制作。在代码编写的过程中，最重要的是有自己规范的代码编写准则，在编写HTML时候根据页面的设计充分发挥自己的想象来完成页面功能

17、的实现。图10展示了代码编写的流程。图 10 代码编写概况图4.3 网站测试与二次开发、优化当网站细节修改完毕后，就需要进行网站制作的优化以确保代码的最优化，尽可能减少代码量来完成网站所有功能并且减少相应的HTTP请求。图11表示网站内部测试流程。图 11 内部测试概况图图12表示了前端页面开发流程。图 12 前端开发简略流程图页面开发流程一旦制定出来就必须要求前端制作按照此流程图来一步步制作，然后再经过长时间的增改跟磨合。即使不是很完善，但是很适合我们现在网站制作的需求，当然优点也是非常明显的，遵循页面开发流程并使用它对我们的网站制作有非常大的益处，能更好的应对高强度，高质量的开发需要。代码

18、更可控，开发效率更高。其实有很多种渠道会让一个网站的外观更让人欣赏，在制作网站时也会有不同的设计趋势。随着互联网发展，现在网站成为很多人获取信息的渠道，因此制作网站时应该将用户的感受放在第一位。经常面对一个设计很差的网站是一种很差的感受，因此我们考虑将从以下几个模块来改善用户体验。1.网站排版：创造性地使用排版的方式确实可以有效的使用户可以立即得到该网站的新消息，特别是使用的字体是独一无二的，颜色是比较突出的6。2.图片的切换效果研究。3.网站性能的优化：如果网站仅有美观的页面设计和完善的服务功能，但性能无法满足要求，导致页面延迟过长，也无法令用户满意。前端优化的途径有：（1）减少HTTP请求

19、：一个完整的HTTP请求要包含DNS寻址、建立和服务器的连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。（2）减少文件大小：包括压缩JavaScript和CSS文件以及优化代码。优化代码包括去除不必要的html标签，避免内联式样式以及CSS代码优化。（3）将样式表放在单独的文件中，这样方便各个页面调用。将script放在底部这个措施能防止页面加载速度缓慢，防止JS加载完毕，但整体页面还没有完全显示完毕，因此将样式表放在文件中可以提高网页组件的加载速度，减少页面的加载时间，改善用户体验。（4）禁止发生http找不到服务器的错误。（5）网站页面与各个浏览器的兼容性11。4.4

20、 页面成果展示图13展示了网页首页的效果，首页分别由8个功能区构成：页头、主导航栏、面包屑导航、图书分类栏、热书展示区、主编推荐栏、战略合作栏和页脚。1.头部：所有的网站都会设置此头部，但内部的模块各有不同。该网站头部包括网站logo、搜索框以及“我的订单”等构成要素，这几个构成要素根据本网站需求规划书所设置，同时也符合当前主流网站构成的基本要素要求。2.主导航栏：导航可以看做是对网站内容的分类，把网站的内容进行细分，方便用户根据个人需求选择浏览相应栏目页面。首页导航要做到分类清晰，导航栏目间不重复。栏目设计为通栏显示，是首页最为醒目、显眼之处，采用蓝底白字搭配，hover时背景深蓝显示，符合

21、网站的整体风格12。2.面包屑导航：为了更好的传递站内页面内容，网站需要设置面包屑导航。由于网站各层级的页面较多，尤其是大型网站，为了更为方便的让网站页面之间传递信息，内链是最佳的方式，为页面设置面包屑导航就是最符合用户体验的内链形式。面包屑导航不但可以分配页面权重，还可以方便用户在各层级页面间进行切换，在一定程度上增强了用户体验13。3.图书分类栏：该栏目位于首页的中上部，主要模块为左侧图书分类区、中部图书展示区和右侧编辑推荐区。图书分类栏设计风格简洁、醒目，迎合当前形式下大型网站的设计思路，例如京东和当当等等。图 13 首页最终效果图4.热书展示区：该栏目为当下最为热门的图书推荐，图书相关

22、信息都会体现在图片展示上，这样减少了文字的过多介绍，显得更为干净整洁。此区在css样式设计上默认为百分之六十透明度，hover时百分百透明度显示，鼠标滑过时能起到吸引顾客的效果。5.主编推荐栏：该栏目功能是展示当下一些较为流行热销的书籍，使客户更方便且有针对性的查找。选用选项卡式自左向右设计，形成有效的视觉引导，能最大限度的展示图书内容。同时导航栏目左侧以大字号显示“主编推荐”，并对关键字衬以菱形背景，以示强调。6.战略合作栏：该栏目列出一些有合作的厂商链接，使用简介的ul和li布局，中间用两条不同深浅颜色的线段隔开，给人一种浮雕效果，简洁有序14。7.页脚：网页页脚是一个经常被忽视的地方，它

23、经常被遗忘，也会被使用过度，在实际制作过程中要避免大量链接的出现，字体颜色以及大小的设置都要符合网站的整体风格。页脚给出了关于网站的一些信息，例如版权、地址和备案号等等。经过这些细节的设计，最终电子商城整体效果如图14所示。图 14 电子书城页最终效果图5 前端页面的技术实现详析实现前端页面，大致使用html 、div+css、javascript、ajax、jquery 等技术，各个技术相辅相成，各自发挥作用，最终才能实现前端页面的制作效果。以下详细展示了网页部分的细节的实现效果。5.1 列表展示区图 16 列表展示区效果大多数电商网站都有图16所示子级下滑菜单效果，如京东、淘宝、当当等等，

24、此效果的使用也大大增加了展示区域的内容。目的是点击 A区域时B区域出现，看似简单的效果，其实里面的技巧和实现的思路有很多。例如让B去显示，可以用javascript中的display、opacity、position、visible方法等等。子级下滑菜单效果的html结构并不算复杂，分为包裹区div，左侧导航区div,右侧内容展示区div，B区域根据A区域进行绝对定位，其left值刚好为A的宽度减1，因为A区域右侧1px边框不可见，然后设置B区域的z-index值大于A区域，此目的为覆盖住A区域右侧的1px边框，使其更好的融合在一起，美观自然。图17显示了网页列表制作的代码。图 17 列表展示

25、区html结构5.2 首页banner焦点图现在绝大多数网站都会有类似的banner焦点图效果，实现的思路也各有差别。我的思路是改变banner区的left值，利用setInterval方法开启定时器，让其每隔几秒每次变化一个banner图的宽度，点击下面的小导航原理相同。图18展示首页焦点图的效果。图 18 banner焦点图效果图Banner焦点效果图的html结构清晰明了，分为包裹区、计数点击区、内容描述区和内容区。计数点击区域为有序列表，分别左浮动，ol相对于包裹区绝对定位。内容描述区和内容区也相对于包裹区进行绝对定位。图19展示了焦点图的html代码结构。图 19 banner焦点图

26、html结构5.3 图书目录的收缩与展开当类目内容较多时，收缩与展开效果的应用就显得尤为重要。它能更大区域的呈现内容，方便查找，大大的增强了用户体验。例如图20中的“计算机科学与技术”为一级目录，点击后下拉呈现出其包裹的类目。图20展示了图书目录效果图。图 20 图书目录效果图此效果对应的html结构分为包裹区div，头部点击区h2，点击下拉区div，下拉区div为自适应高度布局，其随着类目列表的增多而增高。图21展示了图书目录效果图的实现代码。图 21 图书目录html结构图22用jQuery实现此效果的代码展示，分别用到事件绑定和一些封装函数。图 22 图书目录js行为5.4 图书展示的选

27、项卡图 23 图书展示选项卡效果图23为网站图书展示的效果图。图书展示选项卡效果分为上下两部分，上半部分为点击区域，可以使用ul布局，下半部分为对应呈现区域，可以使用div布局，由于ul下li的点击区域数量和下面的呈现区div数量是一致的，故点击li时让对应div显示即可。6 结语经过近几个月的代码及论文书写，毕业设计也随之进入收尾阶段，以下是我总结的几点：1.XHTML包含丰富的有意义元素，要根据语义化使用，例如段落就用p，行内标签用span等，然后确定HTML，最后制定合适的CSS样式。判断网页标签语义是否良好的一般标准是是：去掉样式，看网页结构是否良好有序，是否依然有很好的可读性，要达到

28、这些就要尽可能少用div和span，可用p时就不要用div，语义上需要强调的文本可包在strong和em标签里。2.关于id名和class的命名问题，要做到名称有意义，以方便查找和后期修改，否则一旦需要维护时将非常的麻烦。可根据内容来选用合适的英文单词，如头部用head，导航用nav，菜单用menu等。命名CSS时，首先要判断它位于什么层，若在page层，需考虑如何避免冲突，例如加前缀等。3.关于选择器的使用，包括元素选择器、后代选择器（两个选择器之间的空格表示）、id选择器、class选择器、属性选择器、子选择器等。可将任何规则指定为!important来提高它的重要性，若两个规则的特殊性相

29、同，则后定义的规则优先！不要轻易使用子选择符，否则后期维护时容易出现问题。4.关于margin重叠问题，只有块元素垂直margin才会发生叠加，行内框、浮动框和绝对定位框之间的margin不会叠加。当两个垂直margin相遇，会形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。5.关于CSS reset：在浏览器里，HTML元素有默认的样式，但是不同的主流浏览器的默认样式之间各有特点。解决方法是一开始就将主流浏览器的默认样式全部关掉，根据自身需要重新自定义样式，取代浏览器开始时设置的默认样式。6.软件的学习。一定要边做边学软件，千万不能在做毕业设计期间，拿着本软件教程从第一页开始看，这样效率最低了，最好是根据已有论文资料中提到的软件用途，有针对性的学。包括毕业设计前期读文献资料，也不能闷头读，要与毕业设计紧密联系起来，最好是边做边读，有针对性的读15。参考文献1 胡崧. HTML从入门到精通M.北京：中国青年出版社，2012. 2 知新文化.HTML完全手册与速查辞典M.北京：科学出版社，2009. 3 杨选辉.网页设计与制作教程M.北京：清华大学出版社，2013. 4 王诚君，高中山.Dreamweaver8网页设计应用教程M.北京：清华大学出版社，2012.