图书出版网站的前端设计与制作文档格式.docx

1、1 引言在当前互联网盛行的前提下，Web前端技术也越来越成熟，从之前的表格布局到CSS2.0，再到CSS3.0，以及现在将要普及的html5。Web前端在整个网站建设中的作用也越来越明显，其地位也越来越突出。一个好的网站体验离不开web前端的设计与制作，突出的互联网应用将发挥广告宣传、咨询洽谈、网上付款、电子账户、服务传递、意见征询和交易管理等作用1。相应的前端开发环境与相关技术也变得越来越重要。2 前端开发环境及相关技术2.1 前端开发环境前端的开发离不开相关工具的配合，开发使用的工具主要有：（1） Sublime Text （2） Adobe Dreamweave（3） Adobe Pho

2、toshop2.2 前端开发相关技术2.2.1 JavaScript简介JavaScript是动态类型语言，当然它也是弱类型的，并且javascript的面向对象是基于（prototyoe-based）实现的。在目前所有的主流浏览器上，它是唯一一种浏览器支持的脚本语言，主要作用是：在不与服务器交互的情况下，修改html页面内容，并且其最关键的部分是DOM（文档对象模型）2。2.2.2 DIV+CSS简介很久之前，web工程师通过table进行页面布局，现在页面布局大都推荐div+css方式。所谓的div+css是通过css控制div的布局。实际应用不仅是div,还有p,span,img,tab

3、le等任意节点的定位都可以通过css来控制。块级元素：诸如段落、标题、列表、表格、DIV和BODY等元素都是块级元素。内联元素：如A、EM、SPAN元素及大多数的替换元素，如图像和表单输入的元素。他们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素。：在HTML中包含LI元素.他们类似于书签，用于特殊的表示场合（如圆点、字母或数字）。如果列表项元素出现在某种有序列表中，则具有顺序性。因此在有序列表中的列表项能依据上下文自动编号3。图 1 盒模型解析图2.2.3 JQuery简介Jquery是javascript的一种框架，能够快速搭建页面整体布局与功能。Jque

4、ry框架的理念是：写出更少的代码，实现更多的功能。它属于轻量级的javascript库，它有着其他javascript库所无法替代的功能，它还兼容CSS4，并且兼容当前主流浏览器（chrome， fixfire 3.0+， IE2.0+）。jquery能使用户通过DOM方便的修改HTML各个节点的元素与增添新的功能4。2.3.4 DOM简介DOM不是一种语言，而是W3C平台提供的标准API，类似于数据结构中的树。通知树的节点、子节点、父节点、层层操控各个元素的一种API。DOM是与平台、编程语言无关的一种接口，使你可以操作当前页面的其他组件。DOM 被分为不同的部分（核心、XML及HTML）和

5、级别（DOM Level 1/2/3）5。3 前端页面效果图设计3.1 简洁化对于大部分网站的前端页面来说，就是为了满足用户的获取信息的需求，所以要目标明确、行为直接。在设计首页的时候，要力求整体简洁、朴素，色彩搭配均衡、和谐、页面布局大方，而且一定要注意协调、合理，字间距、行间距适度。同时，要强化网站的功能，切不可让图片背景图太过炫目，因此要屏弃杂乱无章图片、背景等，让用户在第一眼时不会受到过多的干扰，舒心的了解网站的功能。本网站首页的设计分为页头、search、导航、面包屑、侧边栏、内容、新闻动态和页脚等栏目，结构清晰。中间部位采用典型的三栏式限宽布局，这样呈现出来的结构极为整洁，又不失显

6、示庞大内容的功能。中间部位在实际制作时是为流式布局的一种，其高度会随着内容的增加而增加，符合实际开发的需要。导航部位实际为通栏布局，这样能容纳更多的目录项，又显得大气简洁。首页由8个功能区构成：页头、主导航栏、面包屑导航、图书分类栏、热书展示区、主编推荐栏、战略合作栏和页脚。头部：所有的网站都会设置此类目，但内部的模块各有不同。该网站头部包括网站logo、搜索框以及“我的订单”等共同构成，这几个构成要素根据本网站需求规划书所设置，同时也符合当前主流网站构成的基本要素要求。主导航栏：导航可以看做是对网站内容的分类，把网站的内容进行细分，方便用户根据个人需求选择浏览相应栏目页面。首页导航要做到分类

7、清晰，导航栏目间不重复。该栏目设计为通栏显示，是首页最为醒目、显眼之处，采用蓝底白字搭配，hover时背景深蓝显示，符合网站的整体风格6。图 2 首页结构划分图3.2 视觉效果视觉要素是现代网页又一个重要的表现方法，各种颜色组合和网页结构排列展现出是不同的款式。基本上冷色调可以用来表现大方利落的风格，而暖色调则在表现时尚、流行等时尚元素上比较明显。许多人在进行网站设计的时候都只考虑自己的想法，忘记了网站用户的感受，比如有人比较喜欢红色，于是在整个网站中都布局红色背景，虽然你看起来舒服了，但是将网站设计一个模型之后让别人都来看一看，看看网站设计是否能够第一时间吸引住他们，如果连你的身边的人都不能

8、够留住，那么说明你的网站设计还必须进行修改，而我们的视觉效果就是要在不断修改的背景之下完成，让更多的人证明你的网站视觉设计确实吸引人8。由于网站属于内容较多的电子商务系列图书网站，类似于当当网，内容量过于庞大，颜色把握不好很容易显得凌乱不堪，为了避免此问题保持干净清爽的页面，首先要控制不同颜色的数量，故本网站的主色调为蓝色，并以颜色为基础进行不同层度的加深或减淡，内容区域文字颜色为深灰色并配合特殊背景下的白色，显得较为干净整洁，图3为首页部分区域截图。图 3 首页部分区域颜色配置展示图图4展示的是页面首页图书编辑推荐的功能截图。图 4 编辑推荐榜3.5 点线的运用大多数在内容多样的的网页上为了

9、可以让浏览者更轻松的找到他们想要的东西，点线的指引作用必不可少，图5为网页中点线的使用图例。图5点线使用图3.6 关系结构图6中左侧清晰明了，右侧则层次不清晰。A表示头部，B表示背景，C表示右侧内容详细区，D为产品区。 正确的层次布局 错误的布局图 6 结构层次对比图图7是网页中上面讲到结构的体现，分别为导航区、面包屑、左边栏、内容区，层次分明。图 7 结构层次举例3.7 表达主旨在制作页面的时候不仅要完整的实现功能，更重要的是把要表达的中心思想呈现给客户。在表达意思的时候要清楚，直接点明，不要过于隐晦。图8就以首页为例加以说明。图 8 首页效果图首页为明显的左中右布局，左边“图书分类”表示导

10、航索引区，中间部分右分为“banner展示区”和“新书上架”，右侧分为“最近动态”和“编辑推荐榜”，层次分明，主旨清晰。这样布局的目的是更大限度展示内容的同时又保持了页面的清晰美观。4 前端页面实现4.1 分层开发 分层开发主要涉及：基本样式（base）、通用样式（common）、页面样式（page）。其中base样式为最基础的样式，包括字体大小，大致框架等。通用样式本身属于模块级，包括导航栏、留言板、网页底层结构，可以供各个页面使用。page样式属于页面级的9。分层开发正是通过图9来一步步实现的。图 9 分层开发概况图4.2 代码编写前期网站布局做好以后，下面就进入代码编写阶段，基本流程为总

11、体规划好网站大致样式后，就明确分工进行网站前端各个细节工作，包括美工设计，图片查找，框架构建，页面设计。当大致工作完成后，进行测试，最后进行页面细节的完善，最终将完善后的页面交给后端网站开发、完成网站后台开发制作，确保开发网站能节约时间并能进行二次开发10。大致规划如下：确定了网站制作流程后还需要对网站原型细节进行分析，拆分，把反复使用的部分挑出来制作成代码模块，方便以后再遇到类似情况的代码的套用。确认二，三级网页的格调搭建相一致框架。前台页面CSS样式确定以后，就进行通用板块CSS的设计（包括单选框，button，字体大小，默认字体颜色，背景图片以及颜色等），完成后并提交给前端，前端制作人员

12、再根据整体内容来进行制作。在代码编写的过程中，最重要的是有自己规范的代码编写准则，在编写HTML时候根据页面的设计充分发挥自己的想象来完成页面功能的实现。图10展示了代码编写的流程。图 10 代码编写概况图4.3 网站测试与二次开发、优化当网站细节修改完毕后，就需要进行网站制作的优化以确保代码的最优化，尽可能减少代码量来完成网站所有功能并且减少相应的HTTP请求。图11表示网站内部测试流程。图 11 内部测试概况图图12表示了前端页面开发流程。图 12 前端开发简略流程图页面开发流程一旦制定出来就必须要求前端制作按照此流程图来一步步制作，然后再经过长时间的增改跟磨合。即使不是很完善，但是很适合

13、我们现在网站制作的需求，当然优点也是非常明显的，遵循页面开发流程并使用它对我们的网站制作有非常大的益处，能更好的应对高强度，高质量的开发需要。代码更可控，开发效率更高。其实有很多种渠道会让一个网站的外观更让人欣赏，在制作网站时也会有不同的设计趋势。随着互联网发展，现在网站成为很多人获取信息的渠道，因此制作网站时应该将用户的感受放在第一位。经常面对一个设计很差的网站是一种很差的感受，因此我们考虑将从以下几个模块来改善用户体验。1.网站排版：创造性地使用排版的方式确实可以有效的使用户可以立即得到该网站的新消息，特别是使用的字体是独一无二的，颜色是比较突出的6。2.图片的切换效果研究。3.网站性能的

14、优化：如果网站仅有美观的页面设计和完善的服务功能，但性能无法满足要求，导致页面延迟过长，也无法令用户满意。前端优化的途径有：（1）减少HTTP请求：一个完整的HTTP请求要包含DNS寻址、建立和服务器的连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。（2）减少文件大小：包括压缩JavaScript和CSS文件以及优化代码。优化代码包括去除不必要的html标签，避免内联式样式以及CSS代码优化。（3）将样式表放在单独的文件中，这样方便各个页面调用。将script放在底部这个措施能防止页面加载速度缓慢，防止JS加载完毕，但整体页面还没有完全显示完毕，因此将样式表放在文件中可以

15、提高网页组件的加载速度，减少页面的加载时间，改善用户体验。（4）禁止发生http找不到服务器的错误。（5）网站页面与各个浏览器的兼容性11。4.4 页面成果展示图13展示了网页首页的效果，首页分别由8个功能区构成：1.头部：所有的网站都会设置此头部，但内部的模块各有不同。该网站头部包括网站logo、搜索框以及“我的订单”等构成要素，这几个构成要素根据本网站需求规划书所设置，同时也符合当前主流网站构成的基本要素要求。2.主导航栏：栏目设计为通栏显示，是首页最为醒目、显眼之处，采用蓝底白字搭配，hover时背景深蓝显示，符合网站的整体风格12。2.面包屑导航：为了更好的传递站内页面内容，网站需要设

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

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

18、以及大小的设置都要符合网站的整体风格。页脚给出了关于网站的一些信息，例如版权、地址和备案号等等。经过这些细节的设计，最终电子商城整体效果如图14所示。图 14 电子书城页最终效果图5 前端页面的技术实现详析实现前端页面，大致使用html 、div+css、javascript、ajax、jquery 等技术，各个技术相辅相成，各自发挥作用，最终才能实现前端页面的制作效果。以下详细展示了网页部分的细节的实现效果。5.1 列表展示区图 16 列表展示区效果 大多数电商网站都有图16所示子级下滑菜单效果，如京东、淘宝、当当等等，此效果的使用也大大增加了展示区域的内容。目的是点击 A区域时B区域出现，

19、看似简单的效果，其实里面的技巧和实现的思路有很多。例如让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 列表展示区html结构5.2 首页banner焦点图现在绝大多数网站都会有类似

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

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

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

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

24、题。4.关于margin重叠问题，只有块元素垂直margin才会发生叠加，行内框、浮动框和绝对定位框之间的margin不会叠加。当两个垂直margin相遇，会形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。5.关于CSS reset：在浏览器里，HTML元素有默认的样式，但是不同的主流浏览器的默认样式之间各有特点。解决方法是一开始就将主流浏览器的默认样式全部关掉，根据自身需要重新自定义样式，取代浏览器开始时设置的默认样式。6.软件的学习。一定要边做边学软件，千万不能在做毕业设计期间，拿着本软件教程从第一页开始看，这样效率最低了，最好是根据已有论文资料中提到的软件用途，

25、有针对性的学。包括毕业设计前期读文献资料，也不能闷头读，要与毕业设计紧密联系起来，最好是边做边读，有针对性的读15。参考文献1 胡崧. HTML从入门到精通M.北京：中国青年出版社，2012.2 知新文化.HTML完全手册与速查辞典M.北京：科学出版社，2009.3 杨选辉.网页设计与制作教程M.北京：清华大学出版社，2013.4 王诚君，高中山.Dreamweaver8网页设计应用教程M.北京：清华大学出版社，2012.5 林小.CSS那些事CSS样式布局M.电子工业出版社.2009.6 周德华，许铭霖 . 新编网页设计教程M.北京：冶金工业出版社，2014.7 赵铭建，乔孟丽，康梅娟 .

26、网页设计与制作M.东营：中国石油大学出版社，2012.8 赵祖荫，王云翔，胡耀芳 . 网页设计与制作教程M .北京：清华大学出版社，2008.9 陈季.Flash基础与实例教程M.北京：北京希望电子出版社，2011.10 黄军宝.网站设计透过Dreamwear CS3学习HTML-DIV-CSSM.科学出版社. 2008.11 曹雁青.Photoshop经典作品赏析M.北京：北京海洋智慧图书有限公司，2012.12 张怒涛.Photoshop 平面设计图像处理技法M.北京：清华大学出版社，2011. 13 William Harrel.HTML, CSS, and JavaScript Mob

27、ile Development For DummiesJ . John Wiley.2011.14孙强，李晓娜,黄艳.JavaScript从入门到精通M.北京：清华大学出版社，2009. 15刘智勇.JavaScript开发技术大全M.北京：清华大学出版社，2014. 致 谢经过三个月的努力，毕业论文算是暂时告一段落，这也表示我在河南农业大学四年的大学生活即将结束。在农大上学的四年时间里，我的学习、品行、和思想都有了巨大改变。除了自身坚持不懈外，与各位老师、朋友的关心是分不开的。首先谢谢我的指导老师们，从去年论文的定题，到后期资料的查阅，论文大纲的撰写，再到后期重复修改，最后到论文完成，指导老师给了我耐心的修改和无私的帮帮。为了帮助我们完成毕业论文，她放弃自己课下的休息时间，来帮助我一遍遍修改论文，这种无私奉献的精神确实令我非常仰慕，借此我向指导老师们表示诚挚的感谢。同时，非常谢谢大学四年教我知识的任课老师们，他们在三尺讲台上奉献自己的青春，教会了我如何做一个更好的人。正是因为这些老师，大学四年我才能取得巨大的进步，再次向老师们表示