毕业设计
题目 步步高网站前台设计与实现
学生姓名 学 号 专 业 班 级 指导教师
完成日期 2011 年 11 月 16 日
目 录
前言 ............................................................................................................. 1 1 网站需求分析......................................................................................... 2
1.1 网站定位 ......................................................................................................... 2
1.2 网站前台建设要求 ......................................................................................... 2
1.2.1主要功能模块 ....................................................................................... 2 1.2.2整体版面要求 ....................................................................................... 2 1.2.3设计效果要求 ....................................................................................... 3 1.2.4设计技术要求 ....................................................................................... 3
2 首页设计说明......................................................................................... 3
2.1 首页整体效果 ................................................................................................. 3 2.2 首页结构 ......................................................................................................... 4 2.3 设计效果与技术介绍 ..................................................................................... 6 2.4 问题与解决方案 .............................................................................................. 7
3 子页设计说明......................................................................................... 7
3.1 子页整体效果 ................................................................................................. 7 3.2 子页结构 ......................................................................................................... 7 3.3 设计效果与技术介绍 ..................................................................................... 9 3.4 问题与解决方案 ............................................................................................ 10 3.5 最终效果图 .................................................................................................... 10
3.5.1 首页的效果（index.html） ............................................................ 10 3.5.2 企业介绍页的效果（qyjs.html） .................................................. 11 3.5.3通信产品页的效果（txcp.html） ................................................... 12 3.5.4 教育电子页的效果（jydz.html） .................................................. 13 3.5.5 企业新闻页的效果（news.html） .................................................. 14 3.5.6 服务中心页的效果（service.html） ............................................ 15 3.5.7 人才招聘页的效果（jobs.html） .................................................. 16
4 兼容方案 ............................................................................................... 16 5 维护设计 ............................................................................................... 18 6 总结 ....................................................................................................... 19 致 谢 ................................................................................................... 20 参考文献 ................................................................................................... 20
步步高网站前台设计与实现
学 生：乔生巍 指导教师：刘晓知 （黄冈职业技术学院）
摘 要：本文为步步高企业网站前台的设计说明，针对步步高网，介绍了制作此网站的流程以及相关技术，包括需求分析、主题确定、功能设计、布局设计、配色方案还有特效设计等。此设计运用了当前流行的网站前台设计技术，对制作符合web标准的网站进行了深入研究。 关键词：网站；前台设计；步步高网
前言
企业网站建设方案是将企业网站建设成为一个优质网站首先要考虑，网站建设方案能反应出网站的建设构想，初步形态及网站推广计划。企业网站建设方案适合中小型企业，它有自己独特的风格设计。风格设计主要体现在企业个性特点的凸显，结合企业经营行业市场分析，了解客户群体活动习性以及活动规律，分析.策划并制定出一套适合企业自身的网站建设的设计风格方案。设计首页要求列出最吸引客户的产品信息以及服务信息，用最精炼的语言表达出客户想了解的信息，一般网站首页由企业简介，企业新闻，企业资质，产品展示，在线留言，联系方式等。 其企业网站的主要建站目的：
1. 企业网站建设方案的策划主要目的在于，能够通过网站首页，公司简介，产品服务信息，让客户清楚了解公司产品以及服务信息情况。
2. 网站栏目清晰明了，网站本身就是服务企业，为企业带来宣传。栏目之间的设定都是在服务于如何让网站更吸引客户，更能抓住客户心理，方便用户浏览网站而设定制作。
3. 策划方案还可以反应出网站框架设计是否合理，预计能够达到什么效果，以及后期网站推广工作安排。
本设计用了css+div，javascript。有这些亮点，使页面载入的更快、降低流量费用、修改设计时更有效率、保持视觉一致性、更好的被搜索引擎收录、对浏览者和浏览器更具亲和力。
1
1 网站需求分析
1.1 网站定位
本网站为企业机构类的网站。
1.2 网站前台建设要求
1.2.1主要功能模块
主页：首页是客户打开网站的第一个页面，要以flash的方式展示企业文化和所生产的特色产品展示。需要企业新闻的简单介绍，都要在第一时间呈现给用户，且需要充分展现网站的亮点，以吸引用户
企业介绍模块：充分展示了企业的企业文化、公司简介、以及公司的联系方式，宣传企业形象，实现了互动的效果。
产品展示模块：此模块分为两个页面，分别展示步步高公司的通信产品和教育电子产品，以图片的方式呈现给用户，吸引用户对更深的了解各个类型的产品
企业新闻模块：本模块主要展示企业的新闻动态，产品的新闻动态，以及媒体的对于企业的相关报道，使用户掌握最新的企业、产品等的新闻动态。
服务中心模块：此页主要实现与用户的互动。展示服务热线，让用户对一些一问进行通话的方式进行咨询和了解，以及对于一些产品出现的问题进行网上投诉。还能进行产品知识的学习，更好的掌握产品的一些具体功能实现。
人才招聘模块：人才招聘对于企业和有志青年实现双赢，发布一些招聘信息及联系方式，招聘信息一幕了然，为有志青年提供良好平台。
1.2.2整体版面要求
整个页面布局运用分栏的方式呈现，采用绝对定位和浮动定位。绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文
2
