网站前台设计与实现毕业论文Word文档格式.docx

网站前台设计与实现毕业论文Word文档格式.docx

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

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

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

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

3。

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

本设计用了css+div，javascript。

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

1网站需求分析

1网站定位

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

2网站前台建设要求

1.2。

1主要功能模块

主页：

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

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

企业介绍模块:

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

产品展示模块：

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

企业新闻模块：

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

服务中心模块：

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

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

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

人才招聘模块：

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

2整体版面要求

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

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

由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响.浮动的本意是要将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的周围，使图片的左边或者右边不会出现一大块的留白。

2.3设计效果要求

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

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

特效方面，主要采用js和flash的方式进行呈现.让网站的一些展示动起来，让网站更有生机，展现不用的呈现方式,让用户在视觉上产生冲击感，对这些方面的内容产生兴趣。

有一个更多的了解。

4设计技术要求

开发环境：

个人pc机

制作软件：

AdobeDreamweaverCS4、AdobePhotoshopCS3

制作技术:

html、javascript、css、Div

2首页设计说明

2。

1首页整体效果

页头（logo）

导航

Flash片头

新闻动态

新品推荐

页尾（版权信息）

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

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

2首页结构

〈htmlxmlns=”http：

//www。

w3.org/1999/xhtml”〉

<

head>

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

scriptlanguage=”javascript"

type=”text/javascript”src="

js/xinping。

js”>

/script>

//flash片头的文件路径

〈scriptsrc=”Scripts/swfobject_modified.js"

type="

text/javascript"

>

/script〉

〈metahttp-equiv=”Content-Type”content=”text/html；

charset=utf-8”/〉

〈title>

步步高集团首页〈/title〉

linkhref=”style/style.css”rel=”stylesheet”type="

text/css”/>

〈/head〉

〈body〉

〈divid="

box”>

//最大的box

divid="

box1”>

//页头

〈divclass=”top”>

〈/div>

//logo部分

〈divclass="

top0”〉//导航

〈divclass="

top1"

/div〉

divclass=”top2”〉〈/div>

〈/div〉

/div>

box2”>

//flash片头

divid=”box3”>

bot”〉//新闻动态部分

bot01"

bot02"

〉〈/div〉

bot1”>

//新品推荐部分

bot11"

〈/div〉

〈divid=”bot12"

divid=”small”>

//新品推荐小图片部分

<

main”>

//新品推荐大图片部分

〈/div〉

box4”>

/div〉//页尾部分（版本信息）

〈scripttype="

text/javascript”>

〈！

—-

swfobject。

registerObject（”FlashID”）；

//——〉

〈/body>

/html〉

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"

网站风格简单容易操作，导航简单，分栏的布局使条理清晰，清晰明了。

让广大用户容易上手操作。

4问题与解决方案

在设计首页时,起初falsh片头部分是一个js特效的图片轮播效果，可是此幻灯片与下面的图片替换效果有冲突,所以只好把js幻灯片改换为flash了。

3子页设计说明

3.1子页整体效果

分类标签

主要内容

3.2子页结构

w3.org/1999/xhtml”>

〈head〉

//js特效路径

scriptlanguage=”javascript”type="

src=”js/qyjs.js”>

〈/script〉

metahttp-equiv=”Content-Type”content=”text/html；

charset=utf—8”/〉

〈title〉步步高集团介绍〈/title〉

linkhref=”style/qyjs。

css"

rel="

stylesheet"

〈body>

〈divid=”box"

〉//最大的box

divid=”box1"

//页头部分

divclass="

top"

〉<

//导航的部分

divclass=”top0”>

〉

〈table〉

〈/table>

〈divclass=”top2”〉〈/div>

divid=”box2”〉//页面主题背景图片部分

divid=”box3”〉//主要内容部分

con"

〉//标签部分

ulid=”tags”〉//内容部分

〈ul〉

〈li>

a>

企业文化<

/a〉<

/li>

//第一标签部分

〈li〉<

a〉总公司简介<

/a〉〈/li〉//第二标签部分

〈a>

联系我们<

/a>

/li〉//第三标签部分

〈/ul〉

divid=”tagContent"

〉//第一标签内容部分

〈divclass=”tagContent”id=”tagContent0"

〉//第二标签内容部分

tagContent”id=”tagContent2”>

//第三标签内容部分

box4”〉//页尾部分（版本信息）

〈table〉

〈/html〉

子页的布局与主页稍有不同，子页在主要内容板块主要为左边分类标签,右边为主要的标签内容展示。

特效方面主要还是运用js特效进行图片的展示。

Js特效的效果图如下：

3.4问题与解决方案

子页的设计出现了一个难题就是无法实现右边的内容随着左边内容导航的变化而变化,最终决定用js特效的TAB标签来解决这个问题，实现了预想的的那种效果。

3.5最终效果图

3.5.1首页的效果（index。

html）

5.2企业介绍页的效果（qyjs。

5。

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

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

5.5企业新闻页的效果（news。

3.5。

6服务中心页的效果（service。

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

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.html）

企业介绍页（qyjs.html）

通信产品展示页（txcp.html）

4。

教育电子产品展示页（jydz.html）

企业新闻页（news。

6。

服务中心页（service.html）

7。

人才招聘页（jobs.html）。

共有三个文件夹：

images文件夹用于存放图片，style文件夹用于放置CSS文件，script文件夹用于放置flash文，js文件夹用于放置js文件。

有良好的html结构,网站采用分栏的布局，每个板块都是分离的，利于对其某个板块的更新和修改，

Css样式的命名都是环环相扣的，易于查找到具体位置,对其修改和更新都是比较容易。

以上几点都是利于网站维护的几个亮点。

6总结

通过本次的毕业设计,我独自完成了对步步高集团的网站设计。

虽然这次我的网站不是来自自己的想法,参照步步高集团的网站制作,但每一步设计都是我亲自完成的。

网站是在短短几天内建立起来的,所以网站的内容不是很丰富、很充足，但是每个页面预想的效果是实现了,我浅浅的掌握了一些网站前台开发技术的知识，使平时的学到的知识有了进一步的巩固和提高，并更加清楚的知道了建立一个网站该具备哪些条件，要开发一个网站,不仅仅是设计页面那么简单，它需要考虑很多方面。

比如,建站前的市场分析、建站目的、网站技术解决方案、网站开发规划、网页设计等，涉及到了很多的知识,不像以前的学习和设计时只是侧重于对网页的设计，并没有进行具体的规划。

而在这次的毕业设计中则系统地完成了网站开发过程，让我了解到要做好一个网站，前期的规划是最重要的，好的开端是成功的一半,准备充分才能事半功倍，而不是毫无目的的随心所欲，这是网站开发中要特别注意的问题之一。

而在网站规划过程中搜集相关资料,并从中分析有用的信息进行整理,这锻炼了我对信息收集整理的能力，将对我以后的学习和工作是有益的。

在网站前台开发过程中，主要运用了CSS、HTML、Javascript等网站前台开发技术及使用photoshop图形图像处理软件、DreamweaverCS4网页制作软件，做网站在于需要一颗坚持不懈和积极向上的心态，要勇于知难而上，找到问题的解决办法，这是非常重要的。

虽然毕业设计仍有一些不足，但毕业设计过程中的体验却让我受益匪浅,那对我而言将是一种宝贵的财富,让我在今后的学习及工作中有所借鉴,不断地提高和完善自我。

致谢

我衷心感谢指导老师刘晓知老师在毕业设计中对我们的无私奉献与细心指导，使得毕业设计顺利的完成，悉心整个毕业设计，仔细的指导我对毕业设计进行修改与完善，同时也感谢对此毕业设计中帮我解决的同学们。

无比感谢！

参考文献

[1]曾静娜著CSS+DIV[M］北京希望电子出版社 

2010。

3

[2］阮文江主编JavaScript程序设计基础教程[M]人名邮电出版社2010.8

[3]王亚芬著Photoshop7标准教程[M]海洋出版社 

2009。

8