校园网站设计论文Word格式文档下载.docx
- 文档编号:21310079
- 上传时间:2023-01-29
- 格式:DOCX
- 页数:19
- 大小:813.60KB
校园网站设计论文Word格式文档下载.docx
《校园网站设计论文Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《校园网站设计论文Word格式文档下载.docx(19页珍藏版)》请在冰豆网上搜索。
6月16日
第五周搜集资料并撰写论文;
第六周完成毕业设计报告,完成论文;
第七周制作PPT;
第八周论文答辩。
Ⅳ、主要参考资料
[1]孙振业.网页设计与制作[M].北京:
高等教育出版社,2009.
[2]张怒涛.Photoshop平面设计图像处理技法[M].北京:
清华大学出版社,2003.
[3]金旭亮.ASP.NET程序设计教程[M].北京:
成人教学系电子商务专业1332226班
学生姓名(学号)陈松20132222601
毕业设计(论文)时间:
自2014年4月28日至2014年6月16日
答辩时间:
2014年6月16日成绩
指导教师:
付秀霞
摘要
校园工艺网站是学校对外宣传工艺品的窗口,也是展示校园工艺品的舞台,校园工艺网站建设的目的是促进师生与学校共同发展。
本课题所做的是北京市应用高级技工学校校园工艺网站的设计与制作,在制作过程中首先对网站布局分析,实现总体设计方案,对网站中的前台各个模块,即会员登录、会员注册、留言板、购物车等几个模块,后台包括基本信息情况查看、会员信息、购物车管理、网站公告、网站商品管理、网站留言管理等几个功能模块,最后对作品进行讨论和总结。
关键词:
校园工艺网站;
校园工艺品
Abstract
Campustechnologywebsiteisthewindowoftheschoolpropagandaofartsandcrafts,butalsoartsandcraftsshowcampusstage,theconstructionofcampustechnologywebsiteisthepurposeoftheteachersandstudentsandschoolstopromotecommondevelopment.Thistopicistheapplicationofthedesignandmanufactureofseniorvocationalschoolcampustechnologywebsite,intheprocessofproductionoflayoutanalysis,realizetheoveralldesign,thewebsiteofthefrontdeskmodules,namelythememberlogin,registration,messageboard,shoppingcartmodule,backgroundincludesbasicinformationcheck,membershipinformation,shoppingcart,websiteannouncement,websitecommoditymanagement,websitemessagemanagementandsoonseveralfunctionmodules,finally,theworksarediscussedandsummarized.
Keywords:
processwebsite;
campusarts
第1章绪论
1.1课题背景
随着人们对工艺品的追求,校园工艺品已经成为了一个新的潮流,它有着丰富的种类、独特的造型、不仅能起到装饰和美观的作用,还能体现出人们的性格。
随着时代的发展,校园网站已经是学校对外宣传的主要途径,也是展示校园工艺品的舞台,网上工艺品商店是一个具有交互功能的购物网站,它能够模拟现实当中的购物商场,模拟现实中的购物流程,但是它比现实当中购物更加轻松、方便、快捷非常适合现代人的生活方式。
1.2研究的目的和意义
通过网站来提高学校的知名度、让更多的人了解学校、展示学校工艺品。
校园网站的构建,可以为全校的工艺制作水平、设备设施、等方面起巨大的作用。
通过把自己所学的理论知识运用到实际中,通过本网站的展示,可以让更多的人们看到,校园工艺的精致与美感,使校园工艺网站成为主流,从而提高学校的知名度。
1.3工艺品网店网站分析
通过网络对购物网站进行分析,了解消费者的购物需求,当前网络购物中以小件商品为主要营销策略,某些特殊物品也很受欢迎其中就有收藏价值的工艺品。
网络商店的优势:
1投资少、无所谓存货。
2销售时间和地点不受限制、不需要专业人士看守。
3网上客流量大、可以领进货
工艺品的优势:
因为工艺品我上商店目前并不多见,除了一些专门的商场外,零售型、批发型还没有真正的发展起来,但是网络工艺品网站的出现正好填补了这个不足,最大限度的利用了网络资源。
第2章使用的软件介绍
2.1Dreamweaver简介
Dreamweaver是设计网页大多数用户主要应用的设计和制造工具,应用最广泛,软件强大,是目前最流行的网页设计软件。
它与同为Macromedia公司出品的Fireworks和Flash一道,被誉为网页制作三剑客。
Dreamweaver与其它同类软件相比较主要有以如下优点:
不生成冗余代码,可视化的网页编辑器的可视化,用户的操作为HTML代码。
总编辑时会产生大量的冗余代码,改性后的带来了很大的不便,也增加了网页,网页的文件大小。
Dreamweaver在工作室完全不生成冗余代码,防止了许多麻烦。
然而,经过设置,还可用Dreamweaver清理掉网页的冗余代码,简洁了代码的编辑。
可视化编辑和源代码编辑都有其长处和短处。
有时候,直接用源代码编辑会很有效。
Dreamweaver提供了html快速编辑器和自建的html编辑器,能方便自如的在可视化编辑状态和源代码编辑状态间切换。
强大的动态页面支持。
Dreamweaver的Behavior能在使用者不懂javascript的情况下,往网页中加入丰富的动态效果。
Dreamweaver还可精确的对层进行定位,再加上timeline功能,可生成动感十足的动态层效果。
操作简便。
首先,Dreamweaver提供的历史面板、html样式、模版、库等功能避免了重复劳动,使用者不必重复输入相同的内容、格式。
其次,Dreamweaver能直接往页面中插入Flash、Shockwave等插件,经过设置后还可直接调用相应的软件对这些插件进行编辑。
最后,Dreamweaver与Fireworks集成紧密,可直接调用Fireworks对页面的图像进行修改、优化。
优秀的网站管理功能。
在定义的本地站点中,改变文件的名称、位置,Dreamweaver会自动更新相应的超级链接。
Checkin和Checkout的功能可以协调多个使用者对远程站点的监视和管理。
使用者可给Dreamweaver安装各种插件,使功能更加强大,更加个性。
如果使用着有兴趣,还可以按照自己的个性来制造Dreamweaver插件,使Dreamweaver更适应个人的需求。
Dreamweaver的优点还有以下两点:
2.1.1灵活的编写方式
Dreamweaver拥有灵活编写网页的特点,不仅将世界一流水平的“设计”和“代码”编辑器合二为一,而且在设计窗口中还精化了源代码能帮助用户按工作需要定制自己的用户界面。
2.1.2可视化编辑界面
Dreamweaver是一种所见即所得的HTML编辑器,可实现页面元素的插入和生成。
或视化编辑环境大量减少了代码的编写,同时亦保证了其专业性和兼容性,并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。
无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面,Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易
2.2Photoshop简介
Photoshop是平面图像处理业界霸主Adobe公司推出的跨越PC和MAC两界首屈一指的大型图像处理软件.它功能强大,操作界面友好,得到了广大第三方开发厂家的支持,从而也赢得了众多的用户的青睐.
ADOBEPHOTOSHOP最初的程序是由Mchigan大学的研究生Thomas创建,后经Knoll兄弟以及ADOBE公司程序员的努力ADOBEPHOTOSHOP产生巨大的转变,一举成为优秀的平面设计编辑软件。
它的诞生可以说掀起了图象出版业的革命,目前ADOBEPHOTOSHOP最新版本为6.0,它的每一个版本都增添新的功能这使它获得越来越多的支持者也使它在这诸多的图形图象处理软件中立于不败之地。
Adobe产品的升级更新速度并不快,但每一次推出新版总会有令人惊喜的重大革新.Photoshop从当年名噪一时的图形处理新秀.经过3.0,4.0,5.0,5.5的不断升级,直到目前最新的6.0版,功能越来越强大,处理领域也越来越宽广,逐渐建立了图像处理的霸主地位.
Photoshop支持众多的图像格式,对图像的常见操作和变换做到了非常精细的程度,使得任何一款同类软件都无法望其颈背;
它拥有异常丰富的插件(在Photoshop中叫滤镜),熟练后您自然能体会到"
只有想不到,没有做不到"
的境界.
而这一切,Photoshop都为我们提供了相当简捷和自由的操作环境,从而使我们的工作游刃有余.从某种程度上来讲,Photoshop本身就是一件经过精心雕琢的艺术品,更像为您度身定做的衣服,刚开始使用不久就会觉得的倍感亲切.
当然,简捷并不意味着傻瓜化,自由也并非随心所欲,Photoshop仍然是一款大型处理软件,想要用好它更不会在朝夕之间,只有长时间的学习和实际操作我们才能充分贴近它.
优点有以下5点:
1、修复照片
Photoshop具有强大的图像修饰功能。
利用这些功能,可以快速修复一张破损的老照片,也可以修复人脸上的斑点等缺陷。
2、广告摄影
广告摄影作为一种对视觉要求非常严格的工作,其最终成品往往要经过Photoshop的修改才能得到满意的效果。
3、影像创意
影像创意是Photoshop的特长,通过Photoshop的处理,Photoshop可以将原本风马牛不相及的对象组合在一起,也可以使用“狸猫换太子”的手段使图像发生面目全非的巨大变化。
4、艺术文字
当文字遇到Photoshop处理,就已经注定不再普通。
利用Photoshop可以使文字发生各种各样的变化,并利用这些艺术化处理后的文字为图像增加效果。
5、网页制作
在制作建筑效果图包括许多三维场景时,人物与配景包括场景的颜色常常需要在Photoshop中增加并调整。
2.3Flash简介
由于HTML的功能十分有限,无法达到人们的预期设计,以实现令人耳目一新的动态效果,在这种情况下,各种脚本语言应运而生,使得网页设计更加多样化。
然而,程序设计总是不能很好地普及,因为它要求一定的编程能力,而人们更需要一种既简单直观又有功能强大的动画设计工具,而Flash的出现正好满足了这种需求。
AdobePhotoshop简单很多。
独有的图片特效、美容、拼图、场景、边框、饰品等功能,加上每天更新的精选素材,可以让你1分钟做出影楼级照片,还能一键分享到新浪微博、人人网。
继PC版之后,美图秀秀又推出了iPhone版、WindowsPhone版、Android版、iPad版及网页版,目前美图秀秀在各大软件站的图片类高居榜首,同时在AppStore、Android电子市场摄影类长期位居第一。
FlashPlayer是一款能够播放小又快速的多媒体动画,以及交互式的动画、飞行标志和用macromediaflash做出的图像。
这个播放器非常小,只需花一点点时间下载,对于在体验网页上的多媒体效果是个很好的开始。
Flash也支持高品质的mp3音频流、文字输入字段、交互式接口等等很多东西。
这个最新版本可以观看所有的flash格式。
若你要观看网页上的多媒体内容,flashplayer几乎是网络上的标准。
为此播放器所制作的动画或图像十分常见。
第3章网站的功能分析
3.1网站功能的分析
通过准备阶段的,调查和参考,总结出网站需要完成的具体功能,分析如下:
(1)用户的管理能够完成用户的基本信息录入的注册登录。
(2)管理员管理能够对整个网站里商品的添加,修改商品的信息。
(3)留言板模块使管理者通过查看用户的留言来加以完善网站的功能,和更加方便的了解用户的需求变化。
(4)新品推荐通过新品推荐来让顾客更加方便的了解到,本网站的最新上架商品,方便用户的浏览。
3.2网站功能的模板设计
网上购物网站主要包括三大板块,用户管理、网站布局、商品信息、期中用户管理中包括:
信息注册、登录。
商品信息中主要包括:
商品添加、订单管理、商品信息的更新、新品上市的发布。
网上购物模块图:
如图3-1所示
图3-1网上购物模块图
3.3系统流程分析
本网站是为在线购物的买卖双方提供的一个网络平台,实现商品信息的发布、用户的注册登录、商品的购买等功能。
网页操作流程图:
如图3-2所示
图(3-2网页操作流程图)
购买商品流程图:
如图3-3所示
图3-3购买商品流程图
第4章校园网站的设计与制作
4.1色彩上的搭配
网页设计制作中的色彩搭配是相当重要的,因此,在设计过程也将参考更多色彩搭配书籍,也更多采纳相关指导教师和相关老师的意见及建议。
在各个附页中采用与网站主页相同颜色的色彩搭配,整个网站的每一个页面都将保持风格一致的色彩搭配。
4.2素材收集和模块设计
由于本校的工艺品较多,每个工艺品都有自己的特点,这将会在网站的素材添加一定的困难。
在内容以及信息情况确定后将完成网站的总体结构设计,并根据提供的相关工艺品资料和文字资料,进行内容上的整理。
根据本网站各个模块的分类,本人将整个校园工艺品网站划分成网站首页、学校简介、买家须知、技能展示、设施设备、新品推荐、在线留言、联系方式。
在此之外,还将在页面增加了一些展示性的页面出现,以及加入了在线客服系统,希望通过在线客服系统,更好的了解顾客有什么意见或者不满,方便我们加以改进,并且还添加了新品推荐的网页,希望每位顾客能在第一时间发现本工艺品网站推出的新品。
除此以外,玩家还可以通过在线留言的方式来提出自己宝贵的意见,我们将在第一时间回复,并且合理的采纳您的建议。
在网站的主题设计,之前将大量查找各种有关网站设计的资料,搜集有关如何设计网站的书籍,将有利于网站设计的内容都将记录下来,并运用到自己的网站之中。
4.3布局
关于布局方面可能是大家最不放在心上的地方,其地位和文字排版一样重要。
但是明白网页设计技巧的设计人员就会清楚,其实文字排版是一种非常重要但不起眼的细节。
做好了会让作品更为精细漂亮,并且耳目一新,做不好也许就成为作品失改的重要原因。
事实上,布局是一样的,需要充分的重视起来。
4.4网页的设计与实现
随着科技的飞速发展,人们更深切的感受到计算机在生活和工作中的重要作用,网页的设计要让用户直接明确的了解到本网站想要展现的是什么,所以网站要做的界面美观,而又清晰明确。
4.4.1网站导航栏的设计
根据导航栏的八个部分划分:
网站首页、学校简介、买家须知、技能展示、设施设备、新品推荐、在线留言、联系方式。
通过这八个部分来制作网站首页的标题栏,确定网站的大体制作方向。
如图4-1
图4-1导航栏展示图
网站导航栏的制作代码如下:
<
scripttype="
text/javascript"
src="
js/jquery-1.8.0.min.js"
>
/script>
$(function(){
$('
.menuulli'
).hover(function(){
$(this).find('
span'
).stop().fadeIn('
slow'
);
}
function(){
).stop().fadeOut('
})
})
styletype="
text/css"
body{font-family:
"
宋体"
;
margin:
0;
padding:
}
div,ul,li{margin:
0px;
li{list-style-type:
none;
/*menu*/
.menu{background:
url(images/mebg.jpg)no-repeat;
height:
47px;
overflow:
hidden;
padding-top:
2px;
width:
1000px;
20pxautoauto;
.menuul{padding-left:
68px;
.menuulli{float:
left;
45px;
margin-left:
-46px;
display:
inline;
position:
relative;
.menuullia{padding:
050px;
line-height:
44px;
block;
float:
font-size:
14px;
font-weight:
bold;
color:
#fff;
text-decoration:
.menuullispan{background:
url(images/libg1.gif)0pxno-repeat;
absolute;
top:
left:
159px;
/style>
divclass="
menu"
<
li>
span>
/span>
ahref="
<
/ul>
/div>
!
--menuend-->
divstyle="
text-align:
center;
clear:
both"
4.4.2网站动态图片的设计
本人查找了六张最具代表性的工艺品图片用来制作网站的动态图片,作为动态图片是一个网站的门脸,可以突出网站的特色,使用户更加明确的看到本网站的工艺品。
如图4-2
图4-2动态图片展示
网站动态图片的制作代码如下:
script>
varwidths=1024;
//设置幻灯片宽度
varheights=300;
//设置幻灯片高度
varcounts=6;
//设置幻灯片数量
//设置图片路径
img1=newImage();
img1.src='
images/20140504_140026.jpg'
img2=newImage();
img2.src='
images/20140504_140032.jpg'
img3=newImage();
img3.src='
images/20140504_140036.jpg'
img4=newImage();
img4.src='
images/20140504_140137.jpg'
img5=newImage();
img5.src='
images/20140504_140224.jpg'
img6=newImage();
img6.src='
images/20140504_140254.jpg'
//设置图片的URL
url1=newImage();
url1.src='
#'
url2=newImage();
url2.src='
url3=newImage();
url3.src='
url4=newImage();
url4.src='
url5=newImage();
url5.src='
url6=newImage();
url6.src='
varnn=1;
varkey=0;
functionchange_img()
{if(key==0){key=1;
elseif(document.all)
{document.getElementById("
pic"
).filters[0].Apply();
document.getElementById("
).filters[0].Play(duration=2);
eval('
).src=img'
+nn+'
.src'
url"
).href=url'
for(vari=1;
i<
=counts;
i++){document.getElementById("
xxjdjj"
+i).className='
axx'
+nn).className='
bxx'
nn++;
if(nn>
counts){nn=1;
//设置图片切换间隔时间
tt=setTimeout('
change_img()
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 校园 网站 设计 论文