计算机专业毕业设计.docx

计算机专业毕业设计.docx

《计算机专业毕业设计.docx》由会员分享，可在线阅读，更多相关《计算机专业毕业设计.docx（17页珍藏版）》请在冰豆网上搜索。

计算机专业毕业设计

**农业大学

本科生毕业论文（设计）

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

学院信息与管理科学学院

专业班级计算机科学与技术（软件工程2班）

学生姓名（13******）

指导教师**

撰写日期：

二〇一七年五月十五日

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

**

信息与管理科学学院计算机科学与技术专业

摘要：

随着图书出版行业的规模壮大和快速发展，图书的在线出版和销售成为种新的形势和需求，图书出版网站在这一背景下应运而生，基于此，本文结合Sublime，Photoshop等Web前端设计工具，利用JavaScript，CSS，div等技术来对图书出版网站的Web前端进行了视觉效果和内容规划设计，包括效果图的制作，视觉和颜色的搭配及各种页面的布局和js动态交互动态内容的呈现，完成了图书出版网站首页、电子书城、数字图书馆、移动阅读、新闻动态、图书期刊、人才招聘等模块的静态页面效果和动态脚本制作。

关键词：

网页制作；前端；Ajax；UI

FrontPagesDesignandProductionoftheBookPublicationWebsite

Abstract：

ThedevelopmentofWebfrontendismadeofwebpage,andhasobviousfeaturesofthetimes..WebproductionistheproductoftheWeb1times,thewebsitetostaticcontent,theuserusesthewebsitebehavioralsotobrowsethemain.After2005,theInternetintotheWeb2era,Ajaxbringsnorefreshdatainteraction,reducethenumberofwebpagesjump.Thisarticleplansthroughsublime,toolssuchasPhotoshopwithJavaScript,CSStechnologytoachieveabookpublishingwebsitefront-end,includingrenderingsoftheproduction,allpagelayoutandJSdynamicinteractivecontent.

Keywords：

Webpage;Frontwebsite;Ajax;UI

1引言

在当前互联网盛行的前提下，Web前端技术也越来越成熟，从之前的表格布局到CSS2.0，再到CSS3.0，以及现在将要普及的html5。

Web前端在整个网站建设中的作用也越来越明显，其地位也越来越突出。

一个好的网站体验离不开web前端的设计与制作，突出的互联网应用将发挥广告宣传、咨询洽谈、网上付款、电子账户、服务传递、意见征询和交易管理等作用[1]。

相应的前端开发环境与相关技术也变得越来越重要。

2前端开发环境及相关技术

2.1前端开发环境

前端的开发离不开相关工具的配合，开发使用的工具主要有：

（1）SublimeText

（2）AdobeDreamweave

（3）AdobePhotoshop

2.2前端开发相关技术

2.2.1JavaScript简介

JavaScript是动态类型语言，当然它也是弱类型的，并且javascript的面向对象是基于（prototyoe-based）实现的。

在目前所有的主流浏览器上，它是唯一一种浏览器支持的脚本语言，主要作用是：

在不与服务器交互的情况下，修改html页面内容，并且其最关键的部分是DOM（文档对象模型）[2]。

2.2.2DIV+CSS简介

很久之前，web工程师通过table进行页面布局，现在页面布局大都推荐div+css方式。

所谓的div+css是通过css控制div的布局。

实际应用不仅是div,还有p,span,img,table等任意节点的定位都可以通过css来控制。

块级元素：

诸如段落、标题、列表、表格、DIV和BODY等元素都是块级元素。

内联元素：

如A、EM、SPAN元素及大多数的替换元素，如图像和表单输入的元素。

他们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素。

：

在HTML中包含LI元素.他们类似于书签，用于特殊的表示场合（如圆点、字母或数字）。

如果列表项元素出现在某种有序列表中，则具有顺序性。

因此在有序列表中的列表项能依据上下文自动编号[3]。

图1盒模型解析图

2.2.3JQuery简介

Jquery是javascript的一种框架，能够快速搭建页面整体布局与功能。

Jquery框架的理念是：

写出更少的代码，实现更多的功能。

它属于轻量级的javascript库，它有着其他javascript库所无法替代的功能，它还兼容CSS4，并且兼容当前主流浏览器（chrome，fixfire3.0+，IE2.0+）。

jquery能使用户通过DOM方便的修改HTML各个节点的元素与增添新的功能[4]。

2.3.4DOM简介

DOM不是一种语言，而是W3C平台提供的标准API，类似于数据结构中的树。

通知树的节点、子节点、父节点、层层操控各个元素的一种API。

DOM是与平台、编程语言无关的一种接口，使你可以操作当前页面的其他组件。

DOM被分为不同的部分（核心、XML及HTML）和级别（DOMLevel1/2/3）[5]。

3前端页面效果图设计

3.1简洁化

对于大部分网站的前端页面来说，就是为了满足用户的获取信息的需求，所以要目标明确、行为直接。

在设计首页的时候，要力求整体简洁、朴素，色彩搭配均衡、和谐、页面布局大方，而且一定要注意协调、合理，字间距、行间距适度。

同时，要强化网站的功能，切不可让图片背景图太过炫目，因此要屏弃杂乱无章图片、背景等，让用户在第一眼时不会受到过多的干扰，舒心的了解网站的功能。

本网站首页的设计分为页头、search、导航、面包屑、侧边栏、内容、新闻动态和页脚等栏目，结构清晰。

中间部位采用典型的三栏式限宽布局，这样呈现出来的结构极为整洁，又不失显示庞大内容的功能。

中间部位在实际制作时是为流式布局的一种，其高度会随着内容的增加而增加，符合实际开发的需要。

导航部位实际为通栏布局，这样能容纳更多的目录项，又显得大气简洁。

首页由8个功能区构成：

页头、主导航栏、面包屑导航、图书分类栏、热书展示区、主编推荐栏、战略合作栏和页脚。

头部：

所有的网站都会设置此类目，但内部的模块各有不同。

该网站头部包括网站logo、搜索框以及“我的订单”等共同构成，这几个构成要素根据本网站需求规划书所设置，同时也符合当前主流网站构成的基本要素要求。

主导航栏：

导航可以看做是对网站内容的分类，把网站的内容进行细分，方便用户根据个人需求选择浏览相应栏目页面。

首页导航要做到分类清晰，导航栏目间不重复。

该栏目设计为通栏显示，是首页最为醒目、显眼之处，采用蓝底白字搭配，hover时背景深蓝显示，符合网站的整体风格[6]。

图2首页结构划分图

3.2视觉效果

视觉要素是现代网页又一个重要的表现方法，各种颜色组合和网页结构排列展现出是不同的款式。

基本上冷色调可以用来表现大方利落的风格，而暖色调则在表现时尚、流行等时尚元素上比较明显。

许多人在进行网站设计的时候都只考虑自己的想法，忘记了网站用户的感受，比如有人比较喜欢红色，于是在整个网站中都布局红色背景，虽然你看起来舒服了，但是将网站设计一个模型之后让别人都来看一看，看看网站设计是否能够第一时间吸引住他们，如果连你的身边的人都不能够留住，那么说明你的网站设计还必须进行修改，而我们的视觉效果就是要在不断修改的背景之下完成，让更多的人证明你的网站视觉设计确实吸引人[8]。

由于网站属于内容较多的电子商务系列图书网站，类似于当当网，内容量过于庞大，颜色把握不好很容易显得凌乱不堪，为了避免此问题保持干净清爽的页面，首先要控制不同颜色的数量，故本网站的主色调为蓝色，并以颜色为基础进行不同层度的加深或减淡，内容区域文字颜色为深灰色并配合特殊背景下的白色，显得较为干净整洁，图3为首页部分区域截图。

图3首页部分区域颜色配置展示图

图4展示的是页面首页图书编辑推荐的功能截图。

图4编辑推荐榜

3.5点线的运用

大多数在内容多样的的网页上为了可以让浏览者更轻松的找到他们想要的东西

，点线的指引作用必不可少，图5为网页中点线的使用图例。

图5点线使用图

3.6关系结构

图6中左侧清晰明了，右侧则层次不清晰。

A表示头部，B表示背景，C表示右侧内容详细区，D为产品区。

正确的层次布局错误的布局

图6结构层次对比图

图7是网页中上面讲到结构的体现，分别为导航区、面包屑、左边栏、内容区，层次分明。

图7结构层次举例

3.7表达主旨

在制作页面的时候不仅要完整的实现功能，更重要的是把要表达的中心思想呈现给客户。

在表达意思的时候要清楚，直接点明，不要过于隐晦。

图8就以首页为例加以说明。

图8首页效果图

首页为明显的左中右布局，左边“图书分类”表示导航索引区，中间部分右分为“banner展示区”和“新书上架”，右侧分为“最近动态”和“编辑推荐榜”，层次分明，主旨清晰。

这样布局的目的是更大限度展示内容的同时又保持了页面的清晰美观。

4前端页面实现

4.1分层开发

分层开发主要涉及：

基本样式（base）、通用样式（common）、页面样式（page）。

其中base样式为最基础的样式，包括字体大小，大致框架等。

通用样式本身属于模块级，包括导航栏、留言板、网页底层结构，可以供各个页面使用。

page样式属于页面级的[9]。

分层开发正是通过图9来一步步实现的。

图9分层开发概况图

4.2代码编写

前期网站布局做好以后，下面就进入代码编写阶段，基本流程为总体规划好网站大致样式后，就明确分工进行网站前端各个细节工作，包括美工设计，图片查找，框架构建，页面设计。

当大致工作完成后，进行测试，最后进行页面细节的完善，最终将完善后的页面交给后端网站开发、完成网站后台开发制作，确保开发网站能节约时间并能进行二次开发[10]。

大致规划如下：

确定了网站制作流程后还需要对网站原型细节进行分析，拆分，把反复使用的部分挑出来制作成代码模块，方便以后再遇到类似情况的代码的套用

。

确认二，三级网页的格调搭建相一致框架。

前台页面CSS样式确定以后，就进行通用板块CSS的设计（包括单选框，button，字体大小，默认字体颜色，背景图片以及颜色等），完成后并提交给前端，前端制作人员再根据整体内容来进行制作。

在代码编写的过程中

，最重要的是有自己规范的代码编写准则，在编写HTML时候根据页面的设计充分发挥自己的想象来完成页面功能的实现。

图10展示了代码编写的流程。

图10代码编写概况图

4.3网站测试与二次开发、优化

当网站细节修改完毕后，就需要进行网站制作的优化以确保代码的最优化，尽可能减少代码量来完成网站所有功能并且减少相应的HTTP请求。

图11表示网站内部测试流程。

图11内部测试概况图

图12表示了前端页面开发流程。

图12前端开发简略流程图

页面开发流程一旦制定出来就必须要求前端制作按照此流程图来一步步制作，

然后再经过长时间的增改跟磨合。

即使不是很完善，但是很适合我们现在网站制作的需求，当然优点也是非常明显的，遵循页面开发流程并使用它对我们的网站制作