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

河南农业大学

本科生毕业论文(设计)

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

学院信息与管理科学学院

专业班级计算机科学与技术（软件工程2班）学生姓名郭怀远（1307101106）

指导教师高瑞

撰写日期：二〇一七年五月十五日

目录

1 引言 (1)

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

2.1 前端开发环境 (2)

2.2 前端开发相关技术 (2)

2.2.1 JavaScript简介 (2)

2.2.2 CSS简介 (2)

2.2.3 JQuery简介 (3)

2.3.4 DOM简介 (3)

3 前端页面效果图设计 (3)

3.1 简洁化 (3)

3.2 视觉效果 (4)

3.4 交互性 (4)

3.5 点线的运用 (5)

3.6 关系结构 (6)

3.7 表达主旨 (7)

4 前端页面实现 (8)

4.1 分层开发 (8)

4.2 代码编写 (8)

4.3 内部测试与后续优化 (9)

4.4 页面成果展示 (10)

5 前端页面的一些技术实现详析 (12)

5.1 列表展示区 (13)

5.2 首页banner焦点图 (14)

5.3 图书目录的收缩与展开 (14)

5.4 图书展示的选项卡 (16)

6 结语 (16)

致谢 (18)

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

郭怀远

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

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

关键词：网页制作；前端；Ajax；UI

Front Pages Design and Production of the Book Publication Website Abstract：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;UI

1 引言

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

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

2.1 前端开发环境

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

(1) Sublime Text

(2) Adobe Dreamweave

(3) Adobe Photoshop

2.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]。