个人网站设计(动态)毕业论文.doc

个人网站设计与实现（动态）俸亚雄（湖南交通职业技术学院物流管理学院，湖南423000）摘要：网站伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要，其中个人网站作为其对外展示自己的窗口，在现代互联网时代是推销自己的不二选择工具。本文将简单介绍个人网站在社会生活中对人们生活产生的影响，说明个人网站在互联网时代对个人的重要性，其次介绍网站个人网站的色调搭配，设计风格，重点介绍个人网站的功能模块以及文字内容和图片展示；最后解释一些网站设计的重要代码以及其实现功能。关键词：个人网站、网站设计、功能模块、程序代码目录摘要- -I第一章 文献综述-1网页设计行业现状-2网站设计条件-3网站建设入门门槛（大专）-第二章 设计部分-1设计愿望-2设计预期成果-3数据库和环境的配置 -4设计工具和设计语言 -第三章 网站模块功能-1个人简介模块-2兴趣爱好模块-3家乡模块-4个人相册模块-第四章 总结-第一章 文献综述互联网是社会发展的必然趋势，很多人已经意识到网络的强大生命力和它在未来将处于的重要地位。他们钻研并且努力进入到这一个新的空间，新的领域。以个人为中心，淡化了传统中心地位，使得我们的世界向多元化加速发展，人人都有话语权，人人都是中心。 互联网是一个互动性极强的平台，它自由、宽容、平等、共享，并使来自民间的声音参与到了构建主流话语的行动中来。Internet飞速发展使得网站不再仅仅为企业或公司等大型结构所拥有，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，一个家庭甚至个人都可以拥有属于自己的网站，而在这其中，个人网站已经日渐普及，而且发展到今天，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。1.1网页设计师就业现状1.中国网民数量多中国的网民数量已超过5亿，处于全球网民数量最多的位置。整个互联网处于快速发展阶段，每个人，每个企业都想要一个网站，网页设计师就业前景良好。网页设计师培训成为了许多人进修以及进入网页设计师行业的首选。2.社会这类人才需求大，发展空间大根据权威的人才招聘网站显示，每年全国各类企业对网页设计师的人才需求缺口在50万人左右，而实际需求远远大于这个数字，网页设计师不仅IT专业企业需要，广大的非IT企业也需要，一个基本的企业都需要一个网站作为展示自己产品的平台，有能力维护企业网站的网页设计师就变得非常吃香。就业前景是非常乐观的，同时网页设计师和其他一些专业比起来具有一些特点：工作起点高，发展空间大，职业寿命长，越老越吃香，性别无偏好，工作最稳定，不用频繁跳槽，前景年年好，薪水待遇高!3.薪水待遇高随着国内信息化工作的迅速推进、互联网业的蓬勃发展及网络技术的日新月异，市场对网页设计师、网站开发人员等技术人员的需求不断看涨。网页设计师的就业范围相当宽广，几乎所有的企业都需要网页设计师帮助企业设计网站和建设客户交互式系统;几乎所有有前瞻意识的企业都需要网页设计师负责运行和维护工作。因此，网页设计师的就业机会比IT专业多，而且，薪酬待遇也不错，统计数据显示，网页设计师平均月薪约35007000元，高的则在15000元以上。1.2个人网站设计条件想要独立设计网页，需要具备一些必要条件，否则就不能胜任这份工作。1.软件基础网页设计软件三剑客：Flash、Dreamweaver、Fireworks熟练掌握其中之一辅助软件：Photoshop2.技术需求(1)基础内容网页设计概述、网站设计制作的基本流程、色彩搭配在网站中的应用、网站在用户界面的设计、网站广告的设计、网站中表格的使用、网站中层的应用、框架网站的制作、模板网站的制作、javascript特效制作、使用CSS样式表设计网页等(2)技术内容HTML语法、CSS语法、javascript语法(3)图像处理Flash动画创意、gif动画制作、网页图片处理(4)行业网站实例个人网站、企业宣传网站、新闻资讯网站、教育网站、电子政务网站、电子商务网站、旅游网站、免费资源网站、门户网站等(5)后台编程数据库：SQLServer设计、MySQL设计、Access设计编程语言：ASP、JSP、VBScript、Javascript、PHP等一种编程实例：文章发布系统、留言板、BBS、会员注册系统、在线购物网站1.3网站建设入门门槛（大专）我们是大专学生，所以针对我们电子商务的同学实践操作特点，我们下面和大家探讨一下学习的建站技术的基本步骤和具体的时间安排： 1、html（3天） 是最简单易学的，不需要过多的时间，一天就能了解，三天就能掌握。 2、学习ps（7天） 能用ps切图设计出漂亮的table页面。什么？不符合web标准?不是div+css? 因为表格做的网页很直观，新手很容易理解，ps网页界面，只要有一点平面设计基础的都能很快掌握，结合代码能更加熟悉html的相关细节。这个过程大概需要7-10天时间，具体地，可以每天做一个网站首页，从简单的做起，如果能做的像网页截图那样。那就完美了，中间可以参杂着做网站导航栏、按钮效果、等等。要是没有ps基础的朋友，可以适当延长时间安排。3、学习css（重点10天） 特别是想做职业站长的新手们，div+css技术是必学的，也是最要下功夫来学的，这里我说一下，css入门很容易，就是那么几个属性，而且在网页编辑软件里都有直接输入数值的面板，我个人认为css的难点在于页面的整体性，要从整个页面甚至整个站点的高度设计规划css，并能熟练的运用各种技巧实现网页样式与布局的变化，包括考虑到浏览器的兼容性，这些都还是需要一定的时间的，一定熟练的作品才能学成。学习css可以考虑买本书来学习，书中的理论知识能帮助你理解每个布局代码的含义。 4、学习javascript+flash（7天） javascript就是常说的js，如网页的调用幻灯片、调用最新记录、调用评论数等等，这些“调用”都是通过javascript来实现的，javascript是运行与客户端的脚本，学习它能做出很多网页特效，而且它相对简单易学（不包括ajax的高级功能），对于想学习程序代码的朋友，从javascript入手是个不错的选择。我们并不需要很熟练，只要相对了解就行了。能看懂一般的js代码，并能自己写出一小段js的程度就基本够用了。学习完js和photoshop之后再学习一下flash的制作和使用，以便能制作出banner或其它广告条，并不需要达到制作动画片的水平。 中国站长站 5、学习cms程序（8天） 学完以上技术之后，你的网页基本知识应该算比较牢固了，动态网页需要程序的支持，程序相对比较复杂，要从零基础到用自写程序开发网站，那对于新手站长来说技术门槛太高了，所以现在源码下载站人气比较高。提倡的解决方案就是利用时下比较流行的cms建站程序，用他们可以自定义出几乎任何类型的站点。这里的学习方法，就是到各大cms论坛去找相关教程和帮助文件了。第二章 设计部分个人网站要发展，要么是从我的需求出发，要么是从我周围人的需求出发。每个人设计网页都希望自己的网站能够达到自己的期望要求。2.1设计愿望我所制作的个人网站在完成时，希望能够给浏览者一种简约，时尚的感觉的，这是我的设计愿望。网站大体可以分为以下几大部分：(1)首页个人网站首页板块布局，采用一个简单的DIV容器，容器左侧设计一个图片滚动AD插件，其目的是将4张大图片做一个轮显特效效果，右侧设计一个垂直导航栏，导航栏分为4个栏目，分别是个人简介、兴趣爱好、家乡、个人相册。(2)个人简介个人简介板块布局，采用一个简单的DIV容器，容器左侧包括一个DIV，右侧也包括一个DIV容器，左侧容器方一张自己头像的图片，右侧容器显示关于自己的专业、学校、年纪、性格等的文字信息，用来简单的介绍自己（特效）(3)兴趣爱好兴趣爱好板块布局，在一个的DIV容器里采用float方式镶嵌2个小的DIV，左侧里面再分5个DIV，1、3、5的DIV板块作为栏目分别显示动漫、军事、游戏3个内容，右侧DIV模块当作个子容器，容器分为左右2个DIV模块，右侧模块再分为上下2个DIV模块上面一个模块是放图片的，左侧大的模块和右侧下面的DIV模块内嵌入一个表格，用了展示相应的文字信息。(4)家乡家乡板块布局，采用一个大的DIV容器，容器里嵌入一个小的DIV块，这个DIV块里采用图片滚动特效AD插件，和首页图片滚动AD插件的区别是图片较小并且有相关的文字展示区域，用来介绍家乡风景名胜的文字信息。(5)个人相册个人相册板块布局，采用一个大的DIV容器，容器里嵌入一个小的DIV快，这个DIV块里，采用图片居中放大插件，用来显示相册的每张图片。2.2设计预期成果在完成网站的风格和色调以后，就是网站的材料组织以及网站的页面设计和数据库设计。网站最后完成发到网上后，能够充分吸引浏览者的目光，能够浏览我个人网站的浏览者能够立刻体会到我网站的简约，时尚绚丽的风格。2.3数据库和环境的配置(1)数据库连接网站(ACCESS)运用ASP把数据库和网站连接起来做一个“conn.asp”文件，每次连接数据库时候都调用这个文件即可%response.buffer=true 启用缓冲处理dim conn,dbdim connstrdb=%.mdb数据库链接路径connstr=DBQ=+server.mappath(&db&)+;DefaultDir=;DRIVER=Microsoft Access Driver (*.mdb);set conn=server.createobject(ADODB.CONNECTION)conn.open connstrIf Err Thenerr.ClearSet Conn = NothingResponse.Write 数据库连接出错，请检查数据库连接文件中的数据库参数设置。Response.EndEnd If sub Chkhttp()server_vv=len(Request.ServerVariables(SERVER_NAME)server_v1=left(Cstr(Request.ServerVariables(HTTP_REFERER),server_vv)server_v2=left(Cstr(http:/&Request.ServerVariables(SERVER_NAME),server_vv)if server_v1server_v2 or server_v1= or server_v1= thenresponse.Charset=utf-8response.write(alert(错误：禁止从站点外部提交数据!.)response.endend ifend sub%(2)window 7环境(IIS配置)操作步骤(启动IIS)：点击开始-控制面板-默认程序-程序和功能-打开或关闭windows功能-internet信息服务-Web管理工具-然后勾选所有的选项操作步骤(配置IIS)：点击开始-控制面板-管理工具-internet信息服务(iis)管理器-打开后进行相关设置2.4设计工具和设计语言我制作网站的网页编辑工具软件是Dreamweaver 8 、设计语言：web前端采用HTML5、CSS+DIV、编程语言：javascript+jQuery、服务器语言：ASP 第三章 网站功能模块3.1首页模块(1)首页设计板块图：(2)代码：#div1width:950px;height:400px;background-color:#66CCCC;margin:auto;padding:60px 20px 140px 20px;#div2width:560px;height:340px;float:left;background-color:#33FF00;padding:20px 20px 40px 20px;#div3width:230px;height:340px;background-color:#663399;float:right;padding:20px 60px 40px 60px;       (3)首页AD插件特效代码：需要引用文档：一个div元素包含一些图片，超链接用于鼠标单击从而指向一些网页，这里用了javascript库jQuery：$(window).load(function() $(#slider).nivoSlider(););3.2个人简介模块(1)个人简介模块设计图：(2)代码：#div1width:950px;height:400px;background-color:#66CCCC;margin:auto;padding:60px 20px 140px 20px;#div2width:460px;height:280px;float:left;background-color:#33FF00;padding:20px 20px 100px 20px;#div3width:380px;height:340px;background-color:#663399;float:right;padding:20px 10px 40px 10px;#div3topwidth:380px;height:140px;background-color:#FF00CC;#div3top1width:140pxheight:140px;background-color:#FF99CC;float:left;#div3top2width:240px;height:140px;background-color:#FFCCFF;float:right;#div3buttomwidth:380px;height:200px;background-color:#FF9966;文字填写区域文字填写区域3.3兴趣爱好模块(1)兴趣爱好模块设计图：(2)代码：#div1width:950px;height:400px;background-color:#66CCCC;margin:auto;padding:60px 20px 140px 20px;#div2width:240px;height:340px;float:left;background-color:#33FF00;padding:20px 20px 40px 20px;#div3width:600px;height:340px;background-color:#663399;float:right;padding:20px 10px 40px 10px;#div3topwidth:600px;height:140px;background-color:#FFFFCC;#div3top1width:460px;height:140px;background-color:#CC3366;float:left;#div3top2width:140px;height:140px;background-color:#CC9900;float:right;#div3buttomwidth:600px;height:200px;background-color:#CCFFFF;     3.4家乡模块(1)家乡板块设计图：(2)代码：#div1width:950px;height:400px;background-color:#66CCCC;margin:auto;padding:60px 20px 140px 20px;#div3width:920px;height:340px;background-color:#663399;float:right;padding:20px 10px 40px 10px;#div3leftwidth:530px;height:340px;background-color:#CC6633;float:left;padding-right:20px;#div3rightwidth:370px;height:340px;background-color:#CCCC00;float:right;家乡文字介绍3.5个人相册模块(1)个人相册模块设计图：(2)代码：#div1width:950px;height:400px;background-color:#66CCCC;margin:auto;padding:60px 20px 140px 20px;#div3width:920px;height:340px;background-color:#663399;float:right;padding:20px 10px 40px 10px; (3)图片居中放大显示插件代码：第一步 文档引用：第二步 要使用这个Widget，对HTML元素有一些要求，需要一个超链接包围小图片img元素，并且超链接目标指向大图片，超链接可以定义tittle属性来描述图片信息：第三步 对a元素调用jquery插件方法.lightBox()：$(document).ready()Function() $