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

河南农业大学本科生毕业论文(设计)题 目 图书出版网站的前端设计与制作 学 院 信息与管理科学学院 专业班级 计算机科学与技术（软件工程 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 分层开发 .84.2 代码编写 .84.3 内部测试与后续优化 .94.4 页面成果展示 .105 前端页面的一些技术实现详析 .135.1 列表展示区 .135.2 首页 banner 焦点图 .145.3 图书目录的收缩与展开 .155.4 图书展示的选项卡 .166 结语 .17致 谢 .181图书出版网站的前端设计与制作郭怀远信息与管理科学学院计算机科学与技术专业摘要：随着图书出版行业的规模壮大和快速发展，图书的在线出版和销售成为种新的形势和需求，图书出版网站在这一背景下应运而生，基于此，本文结合 Sublime，Photoshop等 Web 前端设计工具，利用 JavaScript，CSS，div 等技术来对图书出版网站的 Web 前端进行了视觉效果和内容规划设计，包括效果图的制作，视觉和颜色的搭配及各种页面的布局和 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 production 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 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。Web前端在整个网站建设中的作用也越来越明显，其地位也越来越突出。一个好的网站体验离不开web前端的设计与制作，突出的互联网应用将发挥广告宣传、咨询洽谈、网上付款、电子账户、服务传递、意见征询和交易管理等作用 1。相应的前端开发环境与相关技术也变得越来越重要。22 前端开发环境及相关技术2.1 前端开发环境前端的开发离不开相关工具的配合，开发使用的工具主要有：(1) Sublime Text (2) Adobe Dreamweave(3) Adobe Photoshop2.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,table 等任意节点的定位都可以通过 css 来控制。块级元素：诸如段落、标题、列表、表格、DIV 和 BODY 等元素都是块级元素。内联元素：如 A、EM、SPAN 元素及大多数的替换元素，如图像和表单输入的元素。他们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素。：在 HTML 中包含 LI 元素.他们类似于书签，用于特殊的表示场合(如圆点、字母或数字)。如果列表项元素出现在某种有序列表中，则具有顺序性。因此在有序列表中的列表项能依据上下文自动编号 3。3图 1 盒模型解析图2.2.3 JQuery 简介Jquery 是 javascript 的一种框架，能够快速搭建页面整体布局与功能。Jquery 框架的理念是：写出更少的代码，实现更多的功能。它属于轻量级的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）和级别（DOM Level 1/2/3） 5。3 前端页面效果图设计3.1 简洁化对于大部分网站的前端页面来说，就是为了满足用户的获取信息的需求，所以要目标明确、行为直接。在设计首页的时候，要力求整体简洁、朴素，色彩搭配均衡、和谐、页面布局大方，而且一定要注意协调、合理，字间距、行间距适度。同时，要强化网站的功能，切不可让图片背景图太过炫目，因此要屏弃杂乱无章图片、背景等，让用户在第一眼时不会受到过多的干扰，舒心的了解网站的功能。4本网站首页的设计分为页头、search、导航、面包屑、侧边栏、内容、新闻动态和页脚等栏目，结构清晰。中间部位采用典型的三栏式限宽布局，这样呈现出来的结构极为整洁，又不失显示庞大内容的功能。中间部位在实际制作时是为流式布局的一种，其高度会随着内容的增加而增加，符合实际开发的需要。导航部位实际为通栏布局，这样能容纳更多的目录项，又显得大气简洁。首页由8个功能区构成：页头、主导航栏、面包屑导航、图书分类栏、热书展示区、主编推荐栏、战略合作栏和页脚。头部：所有的网站都会设置此类目，但内部的模块各有不同。该网站头部包括网站logo、搜索框以及“我的订单”等共同构成，这几个构成要素根据本网站需求规划书所设置，同时也符合当前主流网站构成的基本要素要求。主导航栏：导航可以看做是对网站内容的分类，把网站的内容进行细分，方便用户根据个人需求选择浏览相应栏目页面。首页导航要做到分类清晰，导航栏目间不重复。该栏目设计为通栏显示，是首页最为醒目、显眼之处，采用蓝底白字搭配，hover时背景深蓝显示，符合网站的整体风格 6。图 2 首页结构划分图3.2 视觉效果视觉要素是现代网页又一个重要的表现方法，各种颜色组合和网页结构排列展现出是不同的款式。基本上冷色调可以用来表现大方利落的风格，而暖色调则在表现时尚、流行等时尚元素上比较明显。许多人在进行网站设计的时候都只考虑自己的想法，忘记了网站用户的感受，比如有人比较喜欢红色，于是5在整个网站中都布局红色背景，虽然你看起来舒服了，但是将网站设计一个模型之后让别人都来看一看，看看网站设计是否能够第一时间吸引住他们，如果连你的身边的人都不能够留住，那么说明你的网站设计还必须进行修改，而我们的视觉效果就是要在不断修改的背景之下完成，让更多的人证明你的网站视觉设计确实吸引人 8。由于网站属于内容较多的电子商务系列图书网站，类似于当当网，内容量过于庞大，颜色把握不好很容易显得凌乱不堪，为了避免此问题保持干净清爽的页面，首先要控制不同颜色的数量，故本网站的主色调为蓝色，并以颜色为基础进行不同层度的加深或减淡，内容区域文字颜色为深灰色并配合特殊背景下的白色，显得较为干净整洁，图 3 为首页部分区域截图。图 3 首页部分区域颜色配置展示图图 4 展示的是页面首页图书编辑推荐的功能截图。图 4 编辑推荐榜63.5 点线的运用大多数在内容多样的的网页上为了可以让浏览者更轻松的找到他们想要的东西 ，点 线的 指引作用必不可少，图5为网页中点线的使用图例。图 5 点线使用图3.6 关系结构图 6 中左侧清晰明了，右侧则层次不清晰。A 表示头部，B 表示背景，C 表示右侧内容详细区，D 为产品区。正确的层次布局 错误的布局图 6 结构层次对比图图