网站前台设计毕业论文.pdf

《网站前台设计毕业论文.pdf》由会员分享，可在线阅读，更多相关《网站前台设计毕业论文.pdf（22页珍藏版）》请在三一文库上搜索。

1、毕业设计 题目步步高网站前台设计与实现 学生姓名 学号 专业 班级 指导教师 完成日期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 设计效

2、果与技术介绍 . 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 参考文献 .

3、 20 1 步步高网站前台设计与实现 学生：乔生巍 指导教师：刘晓知 （黄冈职业技术学院） 摘要：本文为步步高企业网站前台的设计说明，针对步步高网，介绍了制作 此网站的流程以及相关技术，包括需求分析、主题确定、功能设计、布局设计、 配色方案还有特效设计等。此设计运用了当前流行的网站前台设计技术，对制 作符合 web标准的网站进行了深入研究。 关键词： 网站；前台设计；步步高网 前言 企业网站建设方案是将企业网站建设成为一个优质网站首先要考虑， 网站建设方案能反应出网站的建设构想，初步形态及网站推广计划。企业 网站建设方案适合中小型企业，它有自己独特的风格设计。风格设计主要 体现在企业个性特点的

4、凸显，结合企业经营行业市场分析，了解客户群体 活动习性以及活动规律，分析. 策划并制定出一套适合企业自身的网站建 设的设计风格方案。设计首页要求列出最吸引客户的产品信息以及服务信 息，用最精炼的语言表达出客户想了解的信息，一般网站首页由企业简介， 企业新闻，企业资质，产品展示，在线留言，联系方式等。 其企业网站的主要建站目的： 1. 企业网站建设方案的策划主要目的在于，能够通过网站首页，公 司简介，产品服务信息，让客户清楚了解公司产品以及服务信息情况。 2. 网站栏目清晰明了，网站本身就是服务企业，为企业带来宣传。 栏目之间的设定都是在服务于如何让网站更吸引客户，更能抓住客户心 理，方便用户浏

5、览网站而设定制作。 3. 策划方案还可以反应出网站框架设计是否合理，预计能够达到什 么效果，以及后期网站推广工作安排。 本设计用了css+div ，javascript。有这些亮点，使页面载入的更快、降 低流量费用、修改设计时更有效率、保持视觉一致性、 更好的被搜索引擎收录、 对浏览者和浏览器更具亲和力。 2 1 网站需求分析 1.1 网站定位 本网站为企业机构类的网站。 1.2 网站前台建设要求 1.2.1主要功能模块 主页：首页是客户打开网站的第一个页面，要以flash的方式展示企业文 化和所生产的特色产品展示。需要企业新闻的简单介绍，都要在第一时间呈现 给用户，且需要充分展现网站的亮点，

6、以吸引用户 企业介绍模块：充分展示了企业的企业文化、公司简介、以及公司的联系 方式，宣传企业形象，实现了互动的效果。 产品展示模块：此模块分为两个页面，分别展示步步高公司的通信产品和 教育电子产品，以图片的方式呈现给用户，吸引用户对更深的了解各个类型的 产品 企业新闻模块：本模块主要展示企业的新闻动态，产品的新闻动态，以及 媒体的对于企业的相关报道，使用户掌握最新的企业、产品等的新闻动态。 服务中心模块：此页主要实现与用户的互动。展示服务热线，让用户对一 些一问进行通话的方式进行咨询和了解，以及对于一些产品出现的问题进行网 上投诉。还能进行产品知识的学习，更好的掌握产品的一些具体功能实现。 人

7、才招聘模块：人才招聘对于企业和有志青年实现双赢，发布一些招聘信 息及联系方式，招聘信息一幕了然，为有志青年提供良好平台。 1.2.2整体版面要求 整个页面布局运用分栏的方式呈现，采用绝对定位和浮动定位。绝对定位 的优势在于，我们可以丝毫不差地精确控制任何元素的位置这里面没有什么 需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文 3 档流中完全移除，所以它也不会为其他元素带来任何的影响。浮动的本意是要 将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的 周围，使图片的左边或者右边不会出现一大块的留白。 1.2.3设计效果要求 本设计主要是以一个平静的，在任何

8、充满压力的环境里，只要搭配出一些 灰蓝或淡蓝的明色色彩组合，就会制造出平静恬静的效果，背景的淡蓝和导航 的蓝色，给人以安心的感觉，因为它看起来诚实、直接。带着明色的寒色可保 持安宁、平和的感觉。补色和这些强调平静的色彩在明暗度方面方面一定要类 似，这点很重要，因为色彩很鲜明会制造不必要的警紧张，本设计主要体现清 爽的感觉。 特效方面， 主要采用 js 和 flash的方式进行呈现。让网站的一些展 示动起来，让网站更有生机，展现不用的呈现方式，让用户在视觉上产生冲击 感，对这些方面的内容产生兴趣。有一个更多的了解。 1.2.4设计技术要求 开发环境：个人pc 机 制作软件： Adobe Drea

9、mweaver CS4 、Adobe Photoshop CS3 制作技术： html、 javascript、css、Div 2 首页设计说明 2.1 首页整体效果 页头（ logo） 导航 Flash 片头 新闻动态新品推荐 4 页尾 (版权信息 ) 首页的亮点在于flash 片头，以图片轮播的形式介绍了企业文化及产品宣传，为 企业文化和产品奠定了宣传的基础。记住要技术在于插入flash，flash 包括十二 张图片轮播，另外添加了背景音乐，大大的吸引用户的眼球，还有添加了js 特 效来展现新品推荐专栏，图片替换的效果使浏览增添了些许乐趣。 2.2 首页结构 / 新品推荐处的特效代码路径

10、/flash片头的文件路径 步步高集团首页 /最大的 box /页头 /logo部分 /导航 /flash片头 5 /新闻动态部分 /新品推荐部分 /新品推荐小图片部分 /新品推荐大图片部分 /页尾部分（版本信息） 6 2.3 设计效果与技术介绍 布局主要采用分栏的方式，以各个板块展示不同的内容信息。 推荐新品方面采用js 特效进行三张图片的展示，如下图 当鼠标经过小图的时候，右边就回出现相应的大图片。 其特效代码如下： window.onload=function() var myImg = document.getElementsByTagName(“img“); myImg0.onmou

11、seover=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“); 网站风格简单容易操作，导航简单，分栏的布局使条理清晰，清晰明了。 让广大用户容易上手操作。 7 2.4 问题与解决方案 在设计首页时， 起

12、初 falsh 片头部分是一个 js 特效的图片轮播效果， 可是此 幻灯片与下面的图片替换效果有冲突，所以只好把js 幻灯片改换为 flash 了。 3 子页设计说明 3.1 子页整体效果 页头（ logo） 导航 分类标签主要内容 页尾 (版权信息 ) 3.2 子页结构 /js特效路径 步步高集团介绍 8 /最大的 box /页头部分 /导航的部分 /页面主题背景图片部分 /主要内容部分 /标签部分 /内容部分 企业文化 /第一标签部分 总公司简介 /第二标签部分 联系我们 /第三标签部分 /第一标签内容部分 /第二标签内容部分 /第三标签内容部分 /页尾部分（版本信息） 9 3.3 设计效

13、果与技术介绍 子页的布局与主页稍有不同，子页在主要内容板块主要为左边分类标签， 右边为主要的标签内容展示。 特效方面主要还是运用js 特效进行图片的展示。 Js特效的效果图如下： 10 3.4 问题与解决方案 子页的设计出现了一个难题就是无法实现右边的内容随着左边内容导航的 变化而变化， 最终决定用 js 特效的 TAB 标签来解决这个问题， 实现了预想的的 那种效果。 3.5 最终效果图 3.5.1 首页的效果（ index.html） 11 3.5.2 企业介绍页的效果（ qyjs.html） 12 3.5.3通信产品页的效果（ txcp.html） 13 3.5.4 教育电子页的效果（

14、jydz.html） 14 3.5.5 企业新闻页的效果（ news.html ） 15 3.5.6 服务中心页的效果（ service.html） 16 3.5.7 人才招聘页的效果（ jobs.html） 4 兼容方案 用户通常会使用浏览器访问您的网站。各浏览器解译网站代码的方式略有 不同，这意味着您的网站在不同浏览器中显示的效果会有所差异。一般情况下， 您应避免依赖于浏览器特定的行为，例如在未指定内容类型或编码的情况下， 希望浏览器可以正确检测到相应的内容类型或编码。此外，您还可以采取以下 步骤来确保网站在不同的浏览器中都能正确显示。 17 在尽可能多的浏览器中测试您的网站 完成网站设计

15、后，您应通过多个浏览器复查网站的外观和功能，确保将您 独具匠心的设计完美呈现给所有访问者。早在网站开发阶段，您就应该进行这 种测试。各种浏览器 ( 甚至是同一浏览器的不同版本)对同一网站的呈现可能会 有所不同。您可以使用诸如 Google Analytics(分析) 这样的服务来了解访问者 最常使用哪些浏览器访问您的网站。 编写高质量、易解译的 HTML 即使您编写的 HTML 无效，您的网站在某些浏览器中也可以正确显示，但 尽管如此，您的网站可能不会在所有浏览器( 或将来出现的浏览器 )中都正确显 示。要使您的网页在所有浏览器中显示的效果相同，最好的方法就是使用有效 的 HTML 和 CSS

16、 编写网页，然后在尽可能多的浏览器中测试这些网页显示的效 果。有效、易解译的 HTML 可保证网页得以正确显示，而 CSS 可以将网页的外 观和内容分离开来，使网页可以更快速地载入和呈现给访问者。您可以使用验 证工具检查自己的网站，例如 W3 Consortium 免费提供的在线 HTML 和 CSS 验证工具，还可以使用诸如 HTML Tidy 的工具快捷地清理您的代码。( 尽管 Google 强烈推荐使用有效的 HTML ，但这并不影响 Google 抓取您的网站并将 其编入索引的方式。 ) 指定字符编码 为使浏览器可以呈现您网页上的文字，您应始终为相应的文档指定编码。 某些浏览器无法识别

17、文档深处的字符集声明，因此，您应将此编码置于文档 ( 或 框架) 的顶部。此外，您还应确保您的网络服务器不发送相冲突的 HTTP 标头。 18 content-type: text/html; charset=ISO-8859-1 之类的标头会替代网页中的 所有字符集声明。 使网页易于访问 并非所有用户都会在浏览器中启用 JavaScript。此外，Flash 和 ActiveX 等技术在某些浏览器中的效果可能并不好(或根本不适用 ) 。建议您按照 Flash 和其他富媒体使用指南进行操作，然后在 Lynx 这样的纯文本浏览器中测试您 的网站。提供针对富媒体内容和功能的纯文本浏览方式，有助于搜

18、索引擎更方 便地抓取您的网站并将其编入索引，同时也大大方便了使用屏幕读取器等技术 访问您网站的用户。 5 维护设计 本设计有良好的文件目录，其网站架构图如下图所示： 网站共有七个页面。 1. 首页(index.html) 2. 企业介绍页 (qyjs.html) 3. 通信产品展示页 (txcp.html) 4. 教育电子产品展示页（ jydz.html） 5. 企业新闻页 (news.html) 6. 服务中心页 (service.html) 19 7. 人才招聘页 (jobs.html)。 共有三个文件夹： images 文件夹用于存放图片， style文件夹用于放 置 CSS文件， sc

19、ript文件夹用于放置flash 文，js 文件夹用于放置 js 文 件。 有良好的 html 结构，网站采用分栏的布局，每个板块都是分离的，利 于对其某个板块的更新和修改， Css 样式的命名都是环环相扣的，易于查找到具体位置，对其修改和 更新都是比较容易。 以上几点都是利于网站维护的几个亮点。 6 总结 通过本次的毕业设计，我独自完成了对步步高集团的网站设计。虽然这 次我的网站不是来自自己的想法，参照步步高集团的网站制作，但每一步设计 都是我亲自完成的。网站是在短短几天内建立起来的，所以网站的内容不是很 丰富、很充足，但是每个页面预想的效果是实现了，我浅浅的掌握了一些网站 前台开发技术的知

20、识，使平时的学到的知识有了进一步的巩固和提高，并更加 清楚的知道了建立一个网站该具备哪些条件，要开发一个网站，不仅仅是设计 页面那么简单，它需要考虑很多方面。比如，建站前的市场分析、建站目的、 网站技术解决方案、网站开发规划、网页设计等，涉及到了很多的知识，不像 以前的学习和设计时只是侧重于对网页的设计，并没有进行具体的规划。而在 这次的毕业设计中则系统地完成了网站开发过程，让我了解到要做好一个网站， 前期的规划是最重要的，好的开端是成功的一半，准备充分才能事半功倍，而 不是毫无目的的随心所欲，这是网站开发中要特别注意的问题之一。而在网站 规划过程中搜集相关资料，并从中分析有用的信息进行整理，

21、这锻炼了我对信 息收集整理的能力，将对我以后的学习和工作是有益的。 在网站前台开发过程中，主要运用了CSS 、HTML 、Javascript等网站前台 开发技术及使用 photoshop 图形图像处理软件、DreamweaverCS4 网页制作软件， 做网站在于需要一颗坚持不懈和积极向上的心态，要勇于知难而上，找到问题 的解决办法，这是非常重要的。 虽然毕业设计仍有一些不足，但毕业设计过程中的体验却让我受益匪浅， 那对我而言将是一种宝贵的财富，让我在今后的学习及工作中有所借鉴，不断 地提高和完善自我。 20 致谢 我衷心感谢指导老师刘晓知老师在毕业设计中对我们的无私奉献与细心指 导，使得毕业设计顺利的完成，悉心整个毕业设计，仔细的指导我对毕业设计 进行修改与完善，同时也感谢对此毕业设计中帮我解决的同学们。无比感谢！ 参考文献 1 曾静娜著 CSS+DIVM 北京希望电子出版社 2010.3 2 阮 文江 主编JavaScript程 序设 计基 础教程 M 人名邮 电 出版 社 2010.8 3 王亚芬著 Photoshop 7标准教程 M 海洋出版社 2009.8