《图书出版网站的前端设计与制作》由会员分享，可在线阅读，更多相关《图书出版网站的前端设计与制作（21页珍藏版）》请在金锄头文库上搜索。
1、河南农业大学河南农业大学本科生毕业论文(设计)题 目 图书出版网站的前端设计与制作图书出版网站的前端设计与制作 学 院 信息与管理科学学院信息与管理科学学院 专业班级 计算机科学与技术（软件工程计算机科学与技术（软件工程 2 2 班）班） 学生姓名 郭怀远（）郭怀远（） 指导教师 高瑞高瑞 撰写日期：二一七年五月十五日目 录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 简洁化
2、.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图书出版网站的前端设计与制作郭怀远信息与管理科学学院计算机科学与技术专业摘要：随着图书出版行业的规模壮大和快速发展，图书的在线出版和销售成为种新的形势和需求，图书出版网站在这一背景下应运而
3、生，基于此，本文结合 Sublime，Photoshop等 Web 前端设计工具，利用 JavaScript，CSS，div 等技术来对图书出版网站的 Web 前端进行了视觉效果和内容规划设计，包括效果图的制作，视觉和颜色的搭配及各种页面的布局和 js 动态交互动态内容的呈现，完成了图书出版网站首页、电子书城、数字图书馆、移动阅读、新闻动态、图书期刊、人才招聘等模块的静态页面效果和动态脚本制作。关键词：网页制作；前端；Ajax；UIFront Pages Design and Production of the Book Publication WebsiteAbstract：The deve
4、lopment 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 i
5、nteraction, 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;Fro
6、nt website;Ajax;UI1 引言在当前互联网盛行的前提下，Web前端技术也越来越成熟，从之前的表格布局到CSS2.0，再到CSS3.0，以及现在将要普及的html5。Web前端在整个网站建设中的作用也越来越明显，其地位也越来越突出。一个好的网站体验离不开web前端的设计与制作，突出的互联网应用将发挥广告宣传、咨询洽谈、网上付款、电子账户、服务传递、意见征询和交易管理等作用1。相应的前端开发环境与相关技术也变得越来越重要。22 前端开发环境及相关技术2.1 前端开发环境前端的开发离不开相关工具的配合，开发使用的工具主要有：(1) Sublime Text (2) Adobe Drea
7、mweave(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 控
8、制 div 的布局。实际应用不仅是 div,还有 p,span,img,table 等任意节点的定位都可以通过 css 来控制。块级元素：诸如段落、标题、列表、表格、DIV 和 BODY 等元素都是块级元素。内联元素：如 A、EM、SPAN 元素及大多数的替换元素，如图像和表单输入的元素。他们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素。：在 HTML 中包含 LI 元素.他们类似于书签，用于特殊的表示场合(如圆点、字母或数字)。如果列表项元素出现在某种有序列表中，则具有顺序性。因此在有序列表中的列表项能依据上下文自动编号3。3图图 1 1 盒模型解析图2.
9、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，类似于数据结构中的树。通知树的节点、子节点、父节点、层层操控
10、各个元素的一种 API。DOM 是与平台、编程语言无关的一种接口，使你可以操作当前页面的其他组件。DOM 被分为不同的部分（核心、XML 及 HTML）和级别（DOM Level 1/2/3）5。3 前端页面效果图设计3.1 简洁化对于大部分网站的前端页面来说，就是为了满足用户的获取信息的需求，所以要目标明确、行为直接。在设计首页的时候，要力求整体简洁、朴素，色彩搭配均衡、和谐、页面布局大方，而且一定要注意协调、合理，字间距、行间距适度。同时，要强化网站的功能，切不可让图片背景图太过炫目，因此要屏弃杂乱无章图片、背景等，让用户在第一眼时不会受到过多的干扰，舒心的了解网站的功能。4本网站首页的设
11、计分为页头、search、导航、面包屑、侧边栏、内容、新闻动态和页脚等栏目，结构清晰。中间部位采用典型的三栏式限宽布局，这样呈现出来的结构极为整洁，又不失显示庞大内容的功能。中间部位在实际制作时是为流式布局的一种，其高度会随着内容的增加而增加，符合实际开发的需要。导航部位实际为通栏布局，这样能容纳更多的目录项，又显得大气简洁。首页由8个功能区构成：页头、主导航栏、面包屑导航、图书分类栏、热书展示区、主编推荐栏、战略合作栏和页脚。头部：所有的网站都会设置此类目，但内部的模块各有不同。该网站头部包括网站logo、搜索框以及“我的订单”等共同构成，这几个构成要素根据本网站需求规划书所设置，同时也符合
12、当前主流网站构成的基本要素要求。主导航栏：导航可以看做是对网站内容的分类，把网站的内容进行细分，方便用户根据个人需求选择浏览相应栏目页面。首页导航要做到分类清晰，导航栏目间不重复。该栏目设计为通栏显示，是首页最为醒目、显眼之处，采用蓝底白字搭配，hover时背景深蓝显示，符合网站的整体风格6。图图 2 2 首页结构划分图3.2 视觉效果视觉要素是现代网页又一个重要的表现方法，各种颜色组合和网页结构排列展现出是不同的款式。基本上冷色调可以用来表现大方利落的风格，而暖色调则在表现时尚、流行等时尚元素上比较明显。许多人在进行网站设计的时候都只考虑自己的想法，忘记了网站用户的感受，比如有人比较喜欢红色，于是5在整个网站中都布
