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

毕业设计题目步步高网站前台设计与实现学生姓名学号专业班级指导教师完成日期2011年11月16日

目录前言31网站需求分析41.1网站定位41.2网站前台建设要求4主要功能模块4整体版面要求4设计效果要求5设计技术要求52首页设计说明52.1首页整体效果52.2首页结构62.3设计效果与技术介绍82.4问题与解决方案93子页设计说明93.1子页整体效果93.2子页结构93.3设计效果与技术介绍113.4问题与解决方案123.5最终效果图12121314151617184兼容方案185维护设计206总结21致谢22参考文献22

步步高网站前台设计与实现学生：乔生巍指导教师：刘晓知（黄冈职业技术学院）摘要：本文为步步高企业网站前台的设计说明，针对步步高网，介绍了制作此网站的流程以及相关技术，包括需求分析、主题确定、功能设计、布局设计、配色方案还有特效设计等。此设计运用了当前流行的网站前台设计技术，对制作符合web标准的网站进行了深入研究。关键词：网站；前台设计；步步高网前言企业网站建设方案是将企业网站建设成为一个优质网站首先要考虑，网站建设方案能反应出网站的建设构想，初步形态及网站推广计划。企业网站建设方案适合中小型企业，它有自己独特的风格设计。风格设计主要体现在企业个性特点的凸显，结合企业经营行业市场分析，了解客户群体活动习性以及活动规律，分析.策划并制定出一套适合企业自身的网站建设的设计风格方案。设计首页要求列出最吸引客户的产品信息以及服务信息，用最精炼的语言表达出客户想了解的信息，一般网站首页由企业简介，企业新闻，企业资质，产品展示，在线留言，联系方式等。其企业网站的主要建站目的：1.企业网站建设方案的策划主要目的在于，能够通过网站首页，公司简介，产品服务信息，让客户清楚了解公司产品以及服务信息情况。2.网站栏目清晰明了，网站本身就是服务企业，为企业带来宣传。栏目之间的设定都是在服务于如何让网站更吸引客户，更能抓住客户心理，方便用户浏览网站而设定制作。3.策划方案还可以反应出网站框架设计是否合理，预计能够达到什么效果，以及后期网站推广工作安排。本设计用了css+div，javascript。有这些亮点，使页面载入的更快、降低流量费用、修改设计时更有效率、保持视觉一致性、更好的被搜索引擎收录、对浏览者和浏览器更具亲和力。1网站需求分析1.1网站定位本网站为企业机构类的网站。1.2网站前台建设要求主页：首页是客户打开网站的第一个页面，要以flash的方式展示企业文化和所生产的特色产品展示。需要企业新闻的简单介绍，都要在第一时间呈现给用户，且需要充分展现网站的亮点，以吸引用户企业介绍模块：充分展示了企业的企业文化、公司简介、以及公司的联系方式，宣传企业形象，实现了互动的效果。产品展示模块：此模块分为两个页面，分别展示步步高公司的通信产品和教育电子产品，以图片的方式呈现给用户，吸引用户对更深的了解各个类型的产品企业新闻模块：本模块主要展示企业的新闻动态，产品的新闻动态，以及媒体的对于企业的相关报道，使用户掌握最新的企业、产品等的新闻动态。服务中心模块：此页主要实现与用户的互动。展示服务热线，让用户对一些一问进行通话的方式进行咨询和了解，以及对于一些产品出现的问题进行网上投诉。还能进行产品知识的学习，更好的掌握产品的一些具体功能实现。人才招聘模块：人才招聘对于企业和有志青年实现双赢，发布一些招聘信息及联系方式，招聘信息一幕了然，为有志青年提供良好平台。整个页面布局运用分栏的方式呈现，采用绝对定位和浮动定位。绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响。浮动的本意是要将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的周围，使图片的左边或者右边不会出现一大块的留白。本设计主要是以一个平静的，在任何充满压力的环境里，只要搭配出一些灰蓝或淡蓝的明色色彩组合，就会制造出平静恬静的效果，背景的淡蓝和导航的蓝色，给人以安心的感觉，因为它看起来诚实、直接。带着明色的寒色可保持安宁、平和的感觉。补色和这些强调平静的色彩在明暗度方面方面一定要类似，这点很重要，因为色彩很鲜明会制造不必要的警紧张，本设计主要体现清爽的感觉。特效方面，主要采用js和flash的方式进行呈现。让网站的一些展示动起来，让网站更有生机，展现不用的呈现方式，让用户在视觉上产生冲击感，对这些方面的内容产生兴趣。有一个更多的了解。设计技术要求开发环境：个人pc机制作软件：AdobeDreamweaverCS4、AdobePhotoshopCS3制作技术：html、javascript、css、Div2首页设计说明2.1首页整体效果页头（logo）导航Flash片头新闻动态新品推荐页尾(版权信息首页的亮点在于flash片头，以图片轮播的形式介绍了企业文化及产品宣传，为企业文化和产品奠定了宣传的基础。记住要技术在于插入flash，flash包括十二张图片轮播，另外添加了背景音乐，大大的吸引用户的眼球，还有添加了js特效来展现新品推荐专栏，图片替换的效果使浏览增添了些许乐趣。2.2首页结构//新品推荐处的特效代码路径//flash片头的文件路径//最大的box//页头//logo部分//导航//flash片头//新闻动态部分//新品推荐部分//新品推荐小图片部分//新品推荐大图片部分//页尾部分（版本信息）2.3设计效果与技术介绍布局主要采用分栏的方式，以各个板块展示不同的内容信息。推荐新品方面采用js特效进行三张图片的展示，如下图当鼠标经过小图的时候，右边就回出现相应的大图片。其特效代码如下：window.onload=function({varmyImg=document.getElementsByTagName("img";myImg[0].onmouseover=function({myImg[3].setAttribute("src","images/xinping11.jpg";}myImg[1].onmouseover=function({myImg[3].setAttribute("src","images/xinping21.jpg";}myImg[2].onmouseover=function({myImg[3].setAttribute("src","images/xinping31.jpg";}}网站风格简单容易操作，导航简单，分栏的布局使条理清晰，清晰明了。让广大用户容易上手操作。2.4问题与解决方案在设计首页时，起初falsh片头部分是一个js特效的图片轮播效果，可是此幻灯片与下面的图片替换效果有冲突，所以只好把js幻灯片改换为flash了。3子页设计说明3.1子页整体效果页头（logo）导航分类标签主要内容页尾(版权信息3.2子页结构//js特效路径charset=utf-8"/>//最大的box//页头部分//导航的部分//页面主题背景图片部分//主要内容部分//标签部分//内容部分企业文化//第一标签部分总公司简介//第二标签部分联系我们//第三标签部分//第一标签内容部分//第二标签内容部分//第三标签内容部分//页尾部分（版本信息）3.3设计效果与技术介绍子页的布局与主页稍有不同，子页在主要内容板块主要为左边分类标签，右边为主要的标签内容展示。特效方面主要还是运用js特效进行图片的展示。Js特效的效果图如下：3.4问题与解决方案子页的设计出现了一个难题就是无法实现右边的内容随着左边内容导航的变化而变化，最终决定用js特效的TAB标签来解决这个问题，实现了预想的的那种效果。3.5最终效果图4兼容方案用户通常会使用浏览器访问您的网站。各浏览器解译网站代码的方式略有不同，这意味着您的网站在不同浏览器中显示的效果会有所差异。一般情况下，您应避免依赖于浏览器特定的行为，例如在未指定内容类型或编码的情况下，希望浏览器可以正确检测到相应的内容类型或编码。此外，您还可以采取以下步骤来确保网站在不同的浏览器中都能正确显示。在尽可能多的浏览器中测试您的网站完成网站设计后，您应通过多个浏览器复查网站的外观和功能，确保将您独具匠心的设计完美呈现给所有访问者。早在网站开发阶段，您就应该进行这种测试。各种浏览器(甚至是同一浏览器的不同版本对同一网站的呈现可能会有所不同。您可以使用诸如GoogleAnalytics(分析这样的服务来了解访问者最常使用哪些浏览器访问您的网站。编写高质量、易解译的HTML即使您编写的HTML无效，您的网站在某些浏览器中也可以正确显示，但尽管如此，您的网站可能不会在所有浏览器(或将来出现的浏览器中都正确显示。要使您的网页在所有浏览器中显示的效果相同，最好的方法就是使用有效的HTML和CSS编写网页，然后在尽可能多的浏览器中测试这些网页显示的效果。有效、易解译的HTML可保证网页得以正确显示，而CSS可以将网页的外观和内容分离开来，使网页可以更快速地载入和呈现给访问者。您可以使用验证工具检查自己的网站，例如W3Consortium免费提供的在线HTML和CSS验证工具，还可以使用诸如HTMLTidy的工具快捷地清理您的代码。(尽管Google强烈推荐使用有效的HTML，但这并不影响Google抓取您的网站并将其编入索引的方式。指定字符编码为使浏览器可以呈现您网页上的文字，您应始终为相应的文档指定编码。某些浏览器无法识别文档深处的字符集声明，因此，您应将此编码置于文档(或框架的顶部。此外，您还应确保您的网络服务器不发送相冲突的HTTP标头。content-type:text/html;charset=ISO-8859-1之类的标头会替代网页中的所有字符集声明。使网页易于访问并非所有用户都会在浏览器中启用JavaScript。此外，Flash和ActiveX等技术在某些浏览器中的效果可能并不好(或根本不适用。建议您按照Flash和其他富媒体使用指南进行操作，然后在Lynx这样的纯文本浏览器中测试您的网站。提供针对富媒体内容和功能的纯文本浏览方式，有助于搜索引擎更方便地抓取您的网站并将其编入索引，同时也大大方便了使用屏幕读取器等技术访问您网站的用户。5维护设计本设计有良好的文件目录，其网站架构图如下图所示：网站共有七个页面。1.首页(index.html2.企业介绍页(qyjs.html3.通信产品展示页(txcp.html4.教育电子产品展示页（jydz.html）5.企业新闻页(news.html6.服务中心页(service.html7.人才招聘页(jobs.html。共有三个文件夹：images文件夹用于存放图片，style文件夹用于放置CSS文件，script文件夹用于放置flash文，js文件夹用于放置js文件。有良好的html结构，网站采用分栏的布局，每个板块都是分离的，利于对其某个板块的更新和修改，Css样式的命名都是环环相扣的，易于查找到具体位置，对其修改和更新都是比较容易。以上几点都是利于网站维护的几个亮点。6总结通过本次的毕业设计，我独自完成了对步步高集团的网站设计。虽然这次我的网站不是来自自己的想法，参照步步高集团的网站制作，但每一步设计都是我亲自完成的。网站是在短短几天内建立起来的，所以网站的内容不是很丰富、很充足，但是每个页面预想的效果是实现了，我浅浅的掌握了一些网站前台开发技术的知识，使平时的学到的知识有了进一步的巩固和提高，并更加清楚的知道了建立一个网站该具备哪些条件，要开发一个网站，不仅仅是设计页面那么简单，它需要考虑很多方面。比如，建站前的市场分析、建站目的、网站技术解决方案、网站开发规划、网页设计等，涉及到了很多的知识，不像以前的学习和设计时只是侧重于对网页的设计，并没有进行具体的规划。而在这次的毕业设计中则系统地完成了网站开发过程，让我了解到要做好一个网站，前期的规划是最重要的，好的开端是成功的一半，准备充分才能事半功倍，而不是毫无目的的随心所欲，这是网站开发中要特别注意的问题之一。而在网站规划过程中搜集相关资料，并从中分析有用的信息进行整理，这锻炼了我对信息收集整理的能力，将对我以后的学习和工作是有益的。在网站前台开发过程中，主要运用了CSS、HTML、Javascript等网站前台开发技术及使用photoshop图形图像处理软件、DreamweaverCS4网页制作软件，做网站在于需要一颗坚持不懈和积极向上的心态，要勇于知难而上，找到问题的解决办法，这是非常重要的。虽然毕业设计仍有一些不足，但毕业设计过程中