网站前台设计与实现毕业论文.docx

网站前台设计与实现毕业论文.docx

《网站前台设计与实现毕业论文.docx》由会员分享，可在线阅读，更多相关《网站前台设计与实现毕业论文.docx（26页珍藏版）》请在冰豆网上搜索。

网站前台设计与实现毕业论文

毕业设计

题目步步高网站前台设计与实现

完成日期2011年11月16日

目录

前言3

1网站需求分析4

1.1网站定位4

1.2网站前台建设要求4

1.2.1主要功能模块4

1.2.2整体版面要求4

1.2.3设计效果要求5

1.2.4设计技术要求5

2首页设计说明5

2.1首页整体效果5

2.2首页结构6

2.3设计效果与技术介绍8

2.4问题与解决方案9

3子页设计说明9

3.1子页整体效果9

3.2子页结构9

3.3设计效果与技术介绍11

3.4问题与解决方案12

3.5最终效果图12

3.5.1首页的效果（index.html）12

3.5.2企业介绍页的效果（qyjs.html）13

3.5.3通信产品页的效果（txcp.html）14

3.5.4教育电子页的效果（jydz.html）15

3.5.5企业新闻页的效果（news.html）16

3.5.6服务中心页的效果（service.html）17

3.5.7人才招聘页的效果（jobs.html）18

4兼容方案18

5维护设计20

6总结21

致谢22

参考文献22

步步高网站前台设计与实现

学生：

乔生巍

指导教师：

刘晓知

（黄冈职业技术学院）

摘要：

本文为步步高企业网站前台的设计说明，针对步步高网，介绍了制作此网站的流程以及相关技术，包括需求分析、主题确定、功能设计、布局设计、配色方案还有特效设计等。

此设计运用了当前流行的网站前台设计技术，对制作符合web标准的网站进行了深入研究。

关键词：

网站；前台设计；步步高网

前言

企业网站建设方案是将企业网站建设成为一个优质网站首先要考虑，网站建设方案能反应出网站的建设构想，初步形态及网站推广计划。

企业网站建设方案适合中小型企业，它有自己独特的风格设计。

风格设计主要体现在企业个性特点的凸显，结合企业经营行业市场分析，了解客户群体活动习性以及活动规律，分析.策划并制定出一套适合企业自身的网站建设的设计风格方案。

设计首页要求列出最吸引客户的产品信息以及服务信息，用最精炼的语言表达出客户想了解的信息，一般网站首页由企业简介，企业新闻，企业资质，产品展示，在线留言，联系方式等。

其企业网站的主要建站目的：

1.企业网站建设方案的策划主要目的在于，能够通过网站首页，公司简介，产品服务信息，让客户清楚了解公司产品以及服务信息情况。

2.网站栏目清晰明了，网站本身就是服务企业，为企业带来宣传。

栏目之间的设定都是在服务于如何让网站更吸引客户，更能抓住客户心理，方便用户浏览网站而设定制作。

3.策划方案还可以反应出网站框架设计是否合理，预计能够达到什么效果，以及后期网站推广工作安排。

本设计用了css+div，javascript。

有这些亮点，使页面载入的更快、降低流量费用、修改设计时更有效率、保持视觉一致性、更好的被搜索引擎收录、对浏览者和浏览器更具亲和力。

1网站需求分析

1.1网站定位

本网站为企业机构类的网站。

1.2网站前台建设要求

1.2.1主要功能模块

主页：

首页是客户打开网站的第一个页面，要以flash的方式展示企业文化和所生产的特色产品展示。

需要企业新闻的简单介绍，都要在第一时间呈现给用户，且需要充分展现网站的亮点，以吸引用户

企业介绍模块：

充分展示了企业的企业文化、公司简介、以及公司的联系方式，宣传企业形象，实现了互动的效果。

产品展示模块：

此模块分为两个页面，分别展示步步高公司的通信产品和教育电子产品，以图片的方式呈现给用户，吸引用户对更深的了解各个类型的产品

企业新闻模块：

本模块主要展示企业的新闻动态，产品的新闻动态，以及媒体的对于企业的相关报道，使用户掌握最新的企业、产品等的新闻动态。

服务中心模块：

此页主要实现与用户的互动。

展示服务热线，让用户对一些一问进行通话的方式进行咨询和了解，以及对于一些产品出现的问题进行网上投诉。

还能进行产品知识的学习，更好的掌握产品的一些具体功能实现。

人才招聘模块：

人才招聘对于企业和有志青年实现双赢，发布一些招聘信息及联系方式，招聘信息一幕了然，为有志青年提供良好平台。

1.2.2整体版面要求

整个页面布局运用分栏的方式呈现，采用绝对定位和浮动定位。

绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。

由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响。

浮动的本意是要将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的周围，使图片的左边或者右边不会出现一大块的留白。

1.2.3设计效果要求

本设计主要是以一个平静的，在任何充满压力的环境里，只要搭配出一些灰蓝或淡蓝的明色色彩组合，就会制造出平静恬静的效果，背景的淡蓝和导航的蓝色，给人以安心的感觉，因为它看起来诚实、直接。

带着明色的寒色可保持安宁、平和的感觉。

补色和这些强调平静的色彩在明暗度方面方面一定要类似，这点很重要，因为色彩很鲜明会制造不必要的警紧张，本设计主要体现清爽的感觉。

特效方面，主要采用js和flash的方式进行呈现。

让网站的一些展示动起来，让网站更有生机，展现不用的呈现方式，让用户在视觉上产生冲击感，对这些方面的内容产生兴趣。

有一个更多的了解。

1.2.4设计技术要求

开发环境：

个人pc机

制作软件：

AdobeDreamweaverCS4、AdobePhotoshopCS3

制作技术：

html、javascript、css、Div

2首页设计说明

2.1首页整体效果

页头（logo）

导航

Flash片头

新闻动态

新品推荐

页尾（版权信息）

首页的亮点在于flash片头，以图片轮播的形式介绍了企业文化及产品宣传，为企业文化和产品奠定了宣传的基础。

记住要技术在于插入flash，flash包括十二张图片轮播，另外添加了背景音乐，大大的吸引用户的眼球，还有添加了js特效来展现新品推荐专栏，图片替换的效果使浏览增添了些许乐趣。

2.2首页结构

//www.w3.org/1999/xhtml">

//新品推荐处的特效代码路径

//flash片头的文件路径

//最大的box

//页头