毕业设计（论文）-步步高网站前台设计与实现.doc

封面样式 毕业设计题目 步步高网站前台设计与实现 学生姓名 学 号 专 业 班 级 指导教师 完成日期 2011 年11月16日20目 录前言31 网站需求分析41.1 网站定位41.2 网站前台建设要求41.2.1主要功能模块41.2.2整体版面要求41.2.3设计效果要求51.2.4设计技术要求52 首页设计说明52.1 首页整体效果52.2 首页结构62.3 设计效果与技术介绍82.4 问题与解决方案93 子页设计说明93.1 子页整体效果93.2 子页结构93.3 设计效果与技术介绍113.4 问题与解决方案123.5 最终效果图123.5.1 首页的效果（index.html）123.5.2 企业介绍页的效果（qyjs.html）133.5.3通信产品页的效果（txcp.html）143.5.4 教育电子页的效果（jydz.html）153.5.5 企业新闻页的效果（news.html）163.5.6 服务中心页的效果（service.html）173.5.7 人才招聘页的效果（jobs.html）184 兼容方案185 维护设计206 总结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机制作软件：Adobe Dreamweaver CS4 、Adobe Photoshop CS3制作技术：html、javascript、css、Div2 首页设计说明2.1 首页整体效果页头（logo） 导航 Flash片头新闻动态新品推荐 页尾(版权信息)首页的亮点在于flash片头，以图片轮播的形式介绍了企业文化及产品宣传，为企业文化和产品奠定了宣传的基础。记住要技术在于插入flash，flash包括十二张图片轮播，另外添加了背景音乐，大大的吸引用户的眼球，还有添加了js特效来展现新品推荐专栏，图片替换的效果使浏览增添了些许乐趣。2.2 首页结构/新品推荐处的特效代码路径/flash片头的文件路径步步高集团首页 /最大的box /页头 /logo部分 /导航 /flash片头 /新闻动态部分 /新品推荐部分 /新品推荐小图片部分 /新品推荐大图片部分 /页尾部分（版本信息） 2.3 设计效果与技术介绍布局主要采用分栏的方式，以各个板块展示不同的内容信息。推荐新品方面采用js特效进行三张图片的展示，如下图 当鼠标经过小图的时候，右边就回出现相应的大图片。其特效代码如下：window.onload=function()var myImg = document.getElementsByTagName(img);myImg0.onmouseover=function()myImg3.setAttribute(src,images/xinping11.jpg);myImg1.onmouseover=function()myImg3.setAttribute(src,images/xinping21.jpg);myImg2.onmouseover=function()myImg3.setAttribute(src,images/xinping31.jpg); 网站风格简单容易操作，导航简单，分栏的布局使条理清晰，清晰明了。让广大用户容易上手操作。2.4 问题与解决方案 在设计首页时，起初falsh片头部分是一个js特效的图片轮播效果，可是此幻灯片与下面的图片替换效果有冲突，所以只好把js幻灯片改换为flash了。3 子页设计说明3.1 子页整体效果页头（logo） 导航分类标签主要内容 页尾(版权信息)3.2 子页结构/js特效路径步步高集团介绍 /最大的box /页头部分 /导航的部分 /页面主题背景图片部分 /主要内容部分 /标签部分 /内容部分 企业文化 /第一标签部分总公司简介 /第二标签部分联系我们 /第三标签部分 /第一标签内容部分 /第二标签内容部分 /第三标签内容部分 /页尾部分（版本信息）3.3 设计效果与技术介绍子页的布局与主页稍有不同，子页在主要内容板块主要为左边分类标签，右边为主要的标签内容展示。特效方面主要还是运用js特效进行图片的展示。Js特效的效果图如下：3.4 问题与解决方案 子页的设计出现了一个难题就是无法实现右边的内容随着左边内容导航的变化而变化，最终决定用js特效的TAB标签来解决这个问题，实现了预想的的那种效果。3.5 最终效果图3.5.1 首页的效果（index.html）3.5.2 企业介绍页的效果（qyjs.html）3.5.3通信产品页的效果（txcp.html）3.5.4 教育电子页的效果（jydz.html）3.5.5 企业新闻页的效果（news.html）3.5.6 服务中心页的效果（service.html）3.5.7 人才招聘页的效果（jobs.html）4 兼容方案用户通常会使用浏览器访问您的网站。各浏览器解译网站代码的方式略有不同，这意味着您的网站在不同浏览器中显示的效果会有所差异。一般情况下，您应避免依赖于浏览器特定的行为，例如在未指定内容类型或编码的情况下，希望浏览器可以正确检测到相应的内容类型或编码。此外，您还可以采取以下步骤来确保网站在不同的浏览器中都能正确显示。在尽可能多的浏览器中测试您的网站完成网站设计后，您应通过多个浏览器复查网站的外观和功能，确保将您独具匠心的设计完美呈现给所有访问者。早在网站开发阶段，您就应该进行这种测试。各种浏览器(甚至是同一浏览器的不同版本)对同一网站的呈现可能会有所不同。您可以使用诸如 Google Analytics(分析)这样的服务来了解访问者最常使用哪些浏览器访问您的网站。编写高质量、易解译的 HTML即使您编写的 HTML 无效，您的网站在某些浏览器中也可以正确显示，但尽管如此，您的网站可能不会在所有浏览器(或将来出现的浏览器)中都正确显示。要使您的网页在所有浏览器中显示的效果相同，最好的方法就是使用有效的 HTML 和 CSS 编写网页，然后在尽可能多的浏览器中测试这些网页显示的效果。有效、易解译的 HTML 可保证网页得以正确显示，而 CSS 可以将网页的外观和内容分离开来，使网页可以更快速地载入和呈现给访问者。您可以使用验证工具检查自己的网站，例如 W3 Consortium 免费提供的在线 HTML 和 CSS 验证工具，还可以使用诸如 HTML Tidy 的工具快捷地清理您的代码。(尽管 Google 强烈推荐使用有效的 HTML，但这并不影响 Google 抓取您的网站并将其编入索引的方式。)指定字符编码为使浏览器可以呈现您网页上的文字，您应始终为相应的文档指定编码。某些浏览器无法识别文档深处的字符集声明，因此，您应将此编码置于文档(或框架)的顶部。此外，您还应确保您的网络服务器不发送相冲突的 HTTP 标头。content-type: text/html; charset=ISO-8859-1 之类的标头会替代网页中的所有字符集声明。使网页易于访问并非所有用户都会在浏览器中启用 JavaScript。此外，Flash 和 ActiveX 等技术在某些浏览器中的效果可能并不好(或根本不适用)。建议您按照 Flash 和其他富媒体使用指南进行操作，然后在 Lynx 这样的纯文本浏览器中测试您的网站。提供针对富媒体内容和功能的纯文本浏览方式，有助于搜索引擎更方便地抓取您的网站并将其编入索引，同时也大大方便了使用屏幕读取器等技术访问您网站的用户。5 维护设计 本设计有良好的文件目录，其网站架构图如下图所示： 网站共有七个页面。1.首页(index.html)2.企业介绍页(qyjs.html)3.通信产品展示页(txcp.html)4.教育电子产品展示页（jydz.html）5.企业新闻页(news.html)6.服务中心页(service.html)7.人才招聘页(jobs.html)。共有三个文件夹：images文件夹用于存放图片，style文件夹用于放置CSS文件，script文件夹用于放置flash文，js文件夹用于放置js文件。有良好的html结构，网站采用分栏的布局，每个板块都是分离的，利于对其某个板块的更新和修改，Css样式的命名都是环环相扣的，易于查找到具体位置，对其修改和更新都是比较容易。以上几点都是利于网站维护的几个亮点。6 总结 通过本次的毕业设计，我独自完成了对步步高集团的网站设计。虽然这次我的网站不是来自自己的想法，参照步步高集团的网站制作，但每一步设计都是我亲自完成的。网站是在短短几天内建立起来的，所以网站的内容不是很丰富、很充足，但是每个页面预想的效果是实现了，我浅浅的掌握了一些网站前台开发技术的知识，使平时的学到的知识有了进一步的巩固和提高，并更加清楚的知道了建立一个网站该具备哪些条件，要开发一个网站，不仅仅是设计页面那么简单，它需要考虑很多方面。比如，建站前的市场分析、建站目的、网站技术解决方案、网站开发规划、网页设计等，涉及到了很多的知识，不像以前的学习和设计时只是侧重于对网页的设计，并没