翰林书院网站设计
【】因时代的发展，纸质书籍已经很少被人们使用，“翰林书院”致力于设计出一款全年龄段通用的、简单的电子图书网站界面。网站分为前端、后台两部分的界面制作，网站前端页面有：网站首页、图书分类、畅销榜单、专题活动、机构专区、网站专区等一些详细的页面内容。后台页面有：信息管理、产品管理、会员管理、系统设置等一些管理功能。网站主要使用技术有HTML+CSS、JavaScript和jQuery。HTML+CSS写入了网站页面的主要内容，CSS定义了网站的实现样式，JavaScript和jQuery特效的使用让网站变得更加灵活、美观。
目录
一、 引言 1
（一）开发背景 1
（二）选题内容 1
二、需求分析 1
（一）需求获取 1
（二）网站设计需求 1
三、网站设计 3
（一）网站前台框架设计 3
（二）网站后台框架设计 5
四、网站界面实现 5
（一）网站首页设计 5
（二）图书分类页面设计 6
（三）专题活动页面设计 7
（四）机构专区页面设计 7
（五）网站专区页面设计 8
（六）图书详情页面设计 8
（七）用户注册页面设计 9
（八）留言板页面设计 9
（九）后台页面设计 10
五、部分网页特效 11
（一）首页大屏广告效果 11
（二）图书分类页面菜单栏效果 11
（三）专题活动页面大屏广告滚动效果 12
（四）用户登录弹出框效果 13
（五）用户注册页面验证效果 13
（六）购物车鼠标图标跟踪效果 14
（七）购物车价格结算效果 15
（八）后台左侧菜单栏隐藏效果 16
（九）后台头部导航条点击效果 17
（十）后台添加信息弹出框效果 17
五、总结 19
六、致谢 20
七、参考文献 21
一、引言
（一）开发背景
随着时代的飞速发展，现代社会已经基本从电
*好棒文|www.hbsrm.com +Q: ^351916072^
气时代跨入了智能时代，智能手机、电脑都成为了我们生活中不可缺少的一部分，也有越来越多的智能机器人可以代替我们做一些简单的工作。时代的进步伴随着许多事物的更新以及淘汰，快速有效的生活方式成为了主流。
“书籍是人类进步的阶梯”，但在这个智能时代，已经没有许多人会去拿着书本看了，电子图书成为了现代人读书的流行方式。翰林书院网站拥有最大的图书库，各种类型的书籍都有，服务于全年龄段的用户，为用户提供最简单、舒心的读书体验。
（二）选题内容
网站使用photoshop制图工具设计页面，HTML+CSS搭建出完整的网站，用javacripts和jquery实现网站的一些动态效果，最终实现网站开发所需的若干主要前端栏目和管理端模块网页的设计。用户可在网站登录注册，查看网站的所有内容，管理员可以登录后台界面对网站所有内容的进行管理。网站是一个小说网站，主要进行的是电子书的查看以及订阅，让用户可以在网站上阅读自己想看的书，不用出门，只需要进入网站就可以读书了。网站的主要界面设计有：用户登录、注册，图书列表的展示，畅销榜单，专题活动等。
二、需求分析
（一）需求获取
通过对班级同学的调查，在网上搜索了许多信息，了解了用户的基本需求。通过调查后的归纳总结，初步了解到一个完整的小说网站应该具备哪些功能，什么样的图书类型的网站更加吸引人。最后开始用photoshop软件进行网站的具体设计。
（二）网站设计需求
根据各个类型网站的比较，分析得出本网站开发必须有前台和后台之分。
1．网站前台功能展示包括：
用户可在任意电脑以及浏览器上阅读本网站的内容；
用户可以查看网站首页内容；
用户可以浏览网站的各个类型的图书；
用户在无法选择图书的时候可以借鉴畅销榜单；
用户可通过专题活动查看系统推荐的同类型的优秀图书；
用户可下载网站app在手机端浏览；
用户可登录或注册成为网站会员；
用户可查看图书的详细内容；
用户在下拉页面时，导航一只在头部不动，用户切换页面能够更加自如。
2．网站后台操作界面包括：
管理员登录进后台后可管理注册会员基本信息，对注册会员信息进行增删改查等基本操作；
管理员可查看用户的个人信息进行修改删除；
管理员可以进行新闻的增删改查等操作；
管理员可进行新闻分类的添加等管理；
管理员可查看所有注册用户发布的留言信息，对一些违反相关法律法规的留言进行删除；
管理员可对产品列表进行操作；
管理员可对产品分类进行管理；
管理员可对用户进行增删改查等操作；
管理员可修改网站的基本信息，能实时更新网站的相关信息；
3．网站管理员管理界面包括：
(1)可添加、删除管理员，设置权限，查看管理员登录的时间地点；
(2)可进行系统配置，管理网站的信息；
（三）网站功能模块
“翰林书院”网站用户在前台可查看网站的许多相关信息，用户注册登录后可查看书籍。网站前台功能页面包括：图书分类、畅销榜单、专题活动、我的书架、图书详情等等。网站前台功能模块设计如图21所示。
图21“翰林书院”前端栏目模块图
“翰林书院”网站后台界面设计又称为“信息管理系统”，管理员登录进入后台可操作的界面包括：登录、工作台、新闻管理、产品管理、评论管理、系统设置等详细内容。网站后台界面模块设计如图22所示。
图22“翰林书院”后台界面设计模块图
三、网站设计
（一）网站前台框架设计
网站首页大致分为上中下三部分head、section、footer。网站首页的头部是header和banner，是网站首页的logo、导航和大屏广告。中间部分是section，是首页的具体内容。下方是footer部分，是首页的底部导航和版权信息。网站首页模块如图31所示。
图31 网站首页模块图
二级菜单图书分类页面主要分为上中下三部分head、section、footer。网页头部是header和banner，中间部分分为左右结构，左边是分类列表，右边是具体内容，下部分是footer。网站图书分类页面模块如图32所示。
图32 网站图书分类页面
二级菜单专题活动页面分为上中下结构head、section、footer。网页头部是header和banner，中间部分是分为上下结构top和buttom，网页下方是footer。网站专题活动页面模块如图33所示。
目录
一、 引言 1
（一）开发背景 1
（二）选题内容 1
二、需求分析 1
（一）需求获取 1
（二）网站设计需求 1
三、网站设计 3
（一）网站前台框架设计 3
（二）网站后台框架设计 5
四、网站界面实现 5
（一）网站首页设计 5
（二）图书分类页面设计 6
（三）专题活动页面设计 7
（四）机构专区页面设计 7
（五）网站专区页面设计 8
（六）图书详情页面设计 8
（七）用户注册页面设计 9
（八）留言板页面设计 9
（九）后台页面设计 10
五、部分网页特效 11
（一）首页大屏广告效果 11
（二）图书分类页面菜单栏效果 11
（三）专题活动页面大屏广告滚动效果 12
（四）用户登录弹出框效果 13
（五）用户注册页面验证效果 13
（六）购物车鼠标图标跟踪效果 14
（七）购物车价格结算效果 15
（八）后台左侧菜单栏隐藏效果 16
（九）后台头部导航条点击效果 17
（十）后台添加信息弹出框效果 17
五、总结 19
六、致谢 20
七、参考文献 21
一、引言
（一）开发背景
随着时代的飞速发展，现代社会已经基本从电
*好棒文|www.hbsrm.com +Q: ^351916072^
气时代跨入了智能时代，智能手机、电脑都成为了我们生活中不可缺少的一部分，也有越来越多的智能机器人可以代替我们做一些简单的工作。时代的进步伴随着许多事物的更新以及淘汰，快速有效的生活方式成为了主流。
“书籍是人类进步的阶梯”，但在这个智能时代，已经没有许多人会去拿着书本看了，电子图书成为了现代人读书的流行方式。翰林书院网站拥有最大的图书库，各种类型的书籍都有，服务于全年龄段的用户，为用户提供最简单、舒心的读书体验。
（二）选题内容
网站使用photoshop制图工具设计页面，HTML+CSS搭建出完整的网站，用javacripts和jquery实现网站的一些动态效果，最终实现网站开发所需的若干主要前端栏目和管理端模块网页的设计。用户可在网站登录注册，查看网站的所有内容，管理员可以登录后台界面对网站所有内容的进行管理。网站是一个小说网站，主要进行的是电子书的查看以及订阅，让用户可以在网站上阅读自己想看的书，不用出门，只需要进入网站就可以读书了。网站的主要界面设计有：用户登录、注册，图书列表的展示，畅销榜单，专题活动等。
二、需求分析
（一）需求获取
通过对班级同学的调查，在网上搜索了许多信息，了解了用户的基本需求。通过调查后的归纳总结，初步了解到一个完整的小说网站应该具备哪些功能，什么样的图书类型的网站更加吸引人。最后开始用photoshop软件进行网站的具体设计。
（二）网站设计需求
根据各个类型网站的比较，分析得出本网站开发必须有前台和后台之分。
1．网站前台功能展示包括：
用户可在任意电脑以及浏览器上阅读本网站的内容；
用户可以查看网站首页内容；
用户可以浏览网站的各个类型的图书；
用户在无法选择图书的时候可以借鉴畅销榜单；
用户可通过专题活动查看系统推荐的同类型的优秀图书；
用户可下载网站app在手机端浏览；
用户可登录或注册成为网站会员；
用户可查看图书的详细内容；
用户在下拉页面时，导航一只在头部不动，用户切换页面能够更加自如。
2．网站后台操作界面包括：
管理员登录进后台后可管理注册会员基本信息，对注册会员信息进行增删改查等基本操作；
管理员可查看用户的个人信息进行修改删除；
管理员可以进行新闻的增删改查等操作；
管理员可进行新闻分类的添加等管理；
管理员可查看所有注册用户发布的留言信息，对一些违反相关法律法规的留言进行删除；
管理员可对产品列表进行操作；
管理员可对产品分类进行管理；
管理员可对用户进行增删改查等操作；
管理员可修改网站的基本信息，能实时更新网站的相关信息；
3．网站管理员管理界面包括：
(1)可添加、删除管理员，设置权限，查看管理员登录的时间地点；
(2)可进行系统配置，管理网站的信息；
（三）网站功能模块
“翰林书院”网站用户在前台可查看网站的许多相关信息，用户注册登录后可查看书籍。网站前台功能页面包括：图书分类、畅销榜单、专题活动、我的书架、图书详情等等。网站前台功能模块设计如图21所示。
图21“翰林书院”前端栏目模块图
“翰林书院”网站后台界面设计又称为“信息管理系统”，管理员登录进入后台可操作的界面包括：登录、工作台、新闻管理、产品管理、评论管理、系统设置等详细内容。网站后台界面模块设计如图22所示。
图22“翰林书院”后台界面设计模块图
三、网站设计
（一）网站前台框架设计
网站首页大致分为上中下三部分head、section、footer。网站首页的头部是header和banner，是网站首页的logo、导航和大屏广告。中间部分是section，是首页的具体内容。下方是footer部分，是首页的底部导航和版权信息。网站首页模块如图31所示。
图31 网站首页模块图
二级菜单图书分类页面主要分为上中下三部分head、section、footer。网页头部是header和banner，中间部分分为左右结构，左边是分类列表，右边是具体内容，下部分是footer。网站图书分类页面模块如图32所示。
图32 网站图书分类页面
二级菜单专题活动页面分为上中下结构head、section、footer。网页头部是header和banner，中间部分是分为上下结构top和buttom，网页下方是footer。网站专题活动页面模块如图33所示。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/wljs/510.html
