天佑集团智能手机专卖网店的设计与实现.docx

天佑集团智能手机专卖网店的设计与实现.docx

《天佑集团智能手机专卖网店的设计与实现.docx》由会员分享，可在线阅读，更多相关《天佑集团智能手机专卖网店的设计与实现.docx（13页珍藏版）》请在冰豆网上搜索。

天佑集团智能手机专卖网店的设计与实现

XXX学院

毕业论文

天佑集团智能手机专卖网店的设计与实现

学生姓名：

XXX

学号：

0305100237

年级专业：

2010级自主网页设计2年2班

指导老师：

XXX

系部：

计算机工程系

广东·XXX

提交日期：

2012年6月

摘要………………………………………………………………………………………………………………3

1前言……………………………………………………………………………………………………………3

2开发软件简介………………………………………………………………………………………………4

2.1Dreamweaver简介…………………………………………………………………………………5

2.2Photoshop简介…………………………………………………………………………………………5

3网站的总体规划…………………………………………………………………………………………6

3.1网站结构图………………………………………………………………………………………………6

3.2网站的风格………………………………………………………………………………………………6

4网站的制作过程…………………………………………………………………………………………6

4.1环境配置准备……………………………………………………………………………………………6

4.2首页制作…………………………………………………………………………………………………6

4.3子页的排版及制作………………………………………………………………………………………8

5后台设计……………………………………………………………………………………………………11

6总结……………………………………………………………………………………………………………12

7参考文献……………………………………………………………………………………………………13

8致谢……………………………………………………………………………………………………………14

天佑集团智能手机专卖网店的设计与实现

摘要：

在互联网飞速发展的今天，互联网成为人们快速获取、发布和传递信息的中要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的中要组成部分，从而倍受人们的重视。

为了让更多客人了解不同信息的情况，提高信息共享度。

所以，开发天佑科技智能手机网站。

关键词：

Dreamweaver；Photoshop；asp；div；javascrpit；

1前言

在21世纪的今天，人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨大，目前，我国上网的人口已近一亿，成立世界上网民最多的国家，许多人在需要查询信息，首先想到的就是上网。

网站的迷人之处在于综合使用文本、图像、声音、动画和视频的信息和内容，具有丰富的多媒体表现与互动特点，毋庸置疑，网站已成为最吸引人的也是最有效的信息传递手段和法按时。

随着网络技术的发展，各类网站纷纷出现，手机网站也成为了一种流行。

越来越多的手机品牌公司希望拥有自己的网站，开辟网络世界的一片天地，展示自己公司的产品和形象。

伴随着社会的发展和科学的进步，上网成为越来越多人们的选择。

随着互联网的飞速发展，有关网络的技术也层出不穷。

如今互联网上的个人网站如雨后春笋般蓬勃发展，绚丽多彩的主页比比皆是。

每个人都有发挥个人才能，挥洒自己个性的网上伊甸园。

在hao123神话以后，网站大全类网站又再一次达到顶峰。

然而这个模式拷贝成功的网站却寥寥无几。

而对于技术薄弱的个人网站来说，似乎网址类网站应该是一个很好的切入点。

但是由于搜索的异军突起，网址类网站似乎变得可有可无。

网页实际是一个文件，他存放在世界某个角落的某一台计算机中而这台计算机必须是与互联网相连的。

网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

文字与图片是构成一个网页的两个最基本的元素。

可以简单的理解为：

文字，就是网页的内容，图片，就是网页的美观。

除此之外，网页的元素还包括动画、音乐、程序等等。

网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏缆器则对这些标记进行解释并生成页面。

手机网站是由个别提供的手机品牌、文章、产品、在线订购、通讯录、链接、调查、留言板等诸多功能于一体的网络平台。

手机网站的自由、开放精神，并使之更容易操作，更具个性需求，而不需要高深的技术。

它可以帮助个人进行全面的信息化，以多种形式达到对信息获取、组织、思考、表达、共享和交流的目的。

以个人为中心，建立一个完全属于自己的可定制的个性化网络平台。

来自文章的评论，留言板都可以很好的进行交流，倾听别人的声音，对于网站品牌产品有推动客户与卖家的关系促进。

2开发软件简介

2.1Dreamweaver简介

Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。

它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。

1、灵活的编写方式

Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。

2、可视化编辑界面

Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。

或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。

无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。

3、功能更多的CSS支持——CSS可视化设计、CSS检查工具

4、动态跨浏览器验证

当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。

动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。

5、强大的WEB站点管理功能

6、内建的图形编辑引擎

7、Dreamweaver的集成特性

Dreamweaver8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。

8、丰富的媒体支持能力

可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。

Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。

Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。

9、超强的扩展能力

Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。

2.2Photoshop简介

在我的主页上，大量的图片用到了PS软件来处理！

经过处理后更能符合网页上的美观和效果。

Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。

从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。

图像编辑是图像处理的基础，可以对图像做各种变换放大、缩小、旋转、倾斜、镜像，透视等。

也可进行复制、去除斑点、修补、修饰图像的残损等。

这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。

图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确姨姨的图像，这是美术设计的毕竟支路。

Photoshop提供的绘图工具让外来图像与创意很好的融合，称为可能使图像的合成无衣无缝。

校色调色是photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。

特效制作在photoshop中主要有滤镜、通道及工具综合应用完成。

包括图像的特效创意耳环特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由photoshop特效完成。

而各种特效字的制作更是很多美术设计师热衷于photoshop的研究的原因。

3网站的制作过程

3.1网站结构图

根据手机网站的基本功能需求，完成本网站的信息浏览，网站主要分为：

首页、苹果网站、ipod、iphone、ipad、itunes、留言板、意见反馈、技术支持这9个页面为一级页面，二级页面跳向相应详细页。

总体结构图3-1所示。

图3-1网站结构图

3.2网站的风格

主页由div+css技术架构而成，其主要色调为白色，通过导航条的引导可以一步一步了解网站的全部内容。

用户能通过导航获取自己感兴趣的信息以及苹果产品说明。

4网站的制作过程

4.1环境配置准备

安装iis5.1、安装Dreamweaver、安装Photoshop等软件

4.2首页制作

首页主要由div+css来架构，风格采取欧美风格，采取单一色，总色不超出三种颜色，简洁，明朗,如图4-1所示。

网站以竖型为主，没有拘束于高度像素，所以添加版块是无限延伸。

左边栏木主要用entry样式来条控，统一了板式，所以想添加多一个版块内容，则加多一个div，然后样式为类命名为”entry”，这样就能统一版块，快速生成。

右栏木同样道理，不一样的是采用的不是类样式，而是标签样式，li是html里的标签，用标签样式，那就是此页面里的li标签都加上了标签样式，同样想添加右栏木版块的时候，只需要添加一个li标签。

图4-1Div+CSS构架图

图4-2首页界面图

4.3子页的排版及制作

主要用entry样式来控制，统一了板式，所以想添加多一个版块内容，则加多一个div，然后样式为类命名为”entry”，这样就能统一版块，快速生成。

two_pages.asp页面是本网站重点页面，two_pages.asp页面才用了asp里的selectcase语句（与switch语句一样）当传回来的参数达到某一种条件的时候，用include套相应的文件进去two_pages.asp页面，这样做的好处是，不需要新建模版也能做到和模版一样的好处，不过这种做法讲求很强的逻辑思维。

每一个链接只要是链接到two_pages.asp页面，都会传递变量Att，然后在two_pages.asp里selectcase语句判断，格式如下所示。

<%

selectcaseAtt

case"iPod":

%>

--#includevirtual="/html/iPod.asp"-->

<%

case"iPhone":

%>

--#includevirtual="/html/iPhone.asp"-->

<%

case"iPad":

%>

--#includevirtual="/html/iPad.asp"-->

<%

case"iTunes":

%>

--#includevirtual="/html/iTunes.asp"-->

<%

case"TS":

%>

--#includevirtual="/html/news.asp"-->

<%

case"about":

%>

--#includevirtual="/html/about.asp"-->

<%

case"shownews":

%>

--#includevirtual="/html/shownews.asp"-->

<%

case"news":

%>

--#includevirtual="/html/news.asp"-->

<%

case"10":

%>

--#includevirtual="/html/news.asp"-->

<%

case"9":

%>

--#includevirtual="/html/news.asp"-->

<%

case"Feedback":

%>

--#includevirtual="/html/Feedback.asp"-->

<%

case"Message_board":

%>

--#includevirtual="/html/Message_board.asp"-->

<%

case"Accessories":

%>

--#includevirtual="/html/Accessories.asp"-->

<%

case"More_accessories":

%>

--#includevirtual="/html/More_accessories.asp"-->

<%

case"other":

%>

--#includevirtual="/html/Retail_store.asp"-->

<%

caseelse

response.Redirect（"../index.asp"）

endselect

%>

图4-3子页效果图

详细页面，跳向的也是two_pages.asp页面，传递了多个参数，进行判断，然后输出相应内容。

图4-4第三层子页效果图

5后台设计

后台是整个网站的核心，主要是对前台数据显示的管理，Index.asp为登陆页面，没什么特点，从数据库调出用户数据，与提交的用户密码作比较，对的话进入，不对out。

（If语句），密码通过md5函数进行转换，然后调处数据进行对比，从而判断登陆成功，加强了密码的安全性。

登录界面和管理中心的效果图如图5-1和图5-2所示。

图5-1登录界面效果图

图5-2管理中心效果图

此页用了frameset框架集，将有需要显示给用户的页面给链接。

通过session来判断用户是否登陆成功。

6总结

我所选论文题目是“天佑科技智能手机网站设计”，之所以选择这个题目，是因为我自己感觉它具有挑战性，越是自己薄弱的环节越要去尝试。

在论文写作以及网站制作过程中，有时感觉很辛苦，有时还会产生放弃的念头，但是最终坚持了下来，出色的完成了我的毕业设计，为了自己的目标，更为了自己的选择。

首先，我选的课题是天佑科技智能手机网站设计，接着的就是我如何来确定该网站的主题，一开始自己把一切都想的过于简单了，总觉得只要我把主题给确定了，其他的事情也就好解决了。

但是却根本不是我想的那样，当我确定了主题着手来做时，发现自己根本从何入手，到底用什么来布局网站，网站的整体风格有时怎样的，如何来规划等这一系列的问题都是我需要整理解决的。

我开始变得有点想放弃，带着这样的心情来做我的设计，其结果是几天下来网站的整体布局都还没有一个统一的概念。

慢慢的我就静下心来反思自己这几天所做的，发现自己的方法完全错了，太急于求成，然后我整整自己思绪，一步步来，先准备资料，画出网站的设计模型图，熟悉编程环境，把握整体布局，明确了网站的基本功能，做好业务流程图、数据流图的情况下，在设计好系统个主要部分，将一些细节问题考虑周全后才开始动手进行开发，使得后来的工作才得以顺利进行。

其次，因编程语言的熟悉程度不够也让我对整个开发过程受到了一定的阻碍。

由于自己所学的东西不是很扎实，而以前只编辑过一些小的程序，对编辑大型程序不是很了解，所以自己只有去找资料，图书和网络给了我很大的帮助，在我徜徉书海和网络查找资料的日子里，面对无数书本和网上信息的罗列，自己有时也会感到烦躁不安，但每当自己找到了自己想要的资料时，激动和兴奋接踵而至，心里满满的只有喜悦毫无疲惫，这段旅程看似荆棘密布，实则蕴藏着无尽的宝藏，让自己了解和学习了很多以前自己根本就不知道的知识。

在整个毕业论文设计的过程中我学到了做任何事情所要有的态度和心态，首先我明白了做学问要一丝不苟，对于出现的任何问题和偏差都不要轻视，要通过正确的途径去解决，在做事情的过程中要有耐心和毅力，不要一遇到困难就打退堂鼓，只要坚持下去就可以找到思路去解决问题的。

在工作中要学会与人合作的态度，认真听取别人的意见，这样做起事情来就可以事倍功半。

论文的顺利完成，首先我要感谢我的指导老师XXX老师以及周围同学朋友的帮助，感谢他们提出宝贵的意见和建议。

另外，要感谢在大学期间所有传授我知识的老师，是你们的悉心教导使我有了良好的专业课知识，这也是论文得以完成的基础。

实践是检验真理的唯一标准，当然也是检验学习成果的标准。

通过这次毕业设计让我对前面学习过的许多课程有了跟为深刻的理解，也是我对这一年半所学的东西的一个综合体现。

然而这次设计让我感受颇深，它让我体会到了理论知识结合实践的重要性，光有理论知道是远远不够的。

参考文献

[1]利华教授编著.PhotoshopCS3平面设计教程.机械工业出版社.2009年1月

[2]陈伟卫主编.网页设计与制作实列教程.清华大学出品社.2008年10月第1版

[3]杨威．ASP3。

0网络开发技术[M]．北京：

人民邮电出版社，2001

[4]余雷，周松建．ASP。

NET应用开发百例[M].北京：

清华大学出版社，2003

[5]李劲．精通ASP数据库设计[M]．北京：

科学出版社，2001

[6]黄斯伟，王玮．HTML4。

0使用祥解[M]．北京：

人民邮电出版社，1999

[7]白鉴聪，王进．JavaScript网页效果大师[M]．北京：

机械工业出版社,2001

[8]{苹果官网}

致谢

通过这三个月来的忙碌和学习，本次毕业论文设计已接近尾声，作为一个大专生的毕业设计，由于经验的匮乏，难免有许多考虑不周全的地方，在这里衷心感谢指导老师王老师的督促指导，以及一起学习的同学们的支持，让我按时完成了这次毕业设计。

在毕业论文设计过程中，我遇到了许许多多的困难。

在此我要感谢我的指导老师XXX老师给我悉心的帮助和对我耐心而细致的指导，我的毕业论文较为复杂烦琐，但是老师仍然细心地纠正图中的错误。

除了敬佩老师的专业水平以外，她的治学严谨和科学研究的精神也是我永远学习的榜样，并将积极影响我今后的学习和工作，我才得以解决毕业设计中遇到的种种问题。

同时感谢我院、系领导对我们的教导和关注；感谢大学两年传授我们专业知识的所有老师。

谢谢你们呕心沥血的教导。

还有谢谢我周围的同窗朋友，他们给了我无数的关心和鼓励，也让我的大学生活充满了温暖和欢乐。

如果没有他们的帮助，此次毕业论文的完成将变得困难。

他们在我设计中给了我许多宝贵的意见和建议。

同时也要感谢自己遇到困难的时候没有一蹶不振，取而代之的是找到了最好的方法来解决问题。

最后，感谢生我养我的父母。

谢谢他们给了我无私的爱，为我求学所付出的巨大牺牲和努力。

毕业设计结束了，通过设计，学生深刻领会到基础的重要性，毕业设计不仅仅能帮助学生检验大学四年的学习成果，更多的是毕业设计可以帮助我们更加清楚的认识自我，磨练学生的意志与耐性，这会为学生日后的工作和生活带来很大的帮助。