个人网站设计(动态)毕业论文
个人网站设计与实现(动态)俸亚雄(湖南交通职业技术学院物流管理学院,湖南423000)摘要:网站伴随着网络的快速发展而快速兴起,作为上网的主要依托,由于人们使用网络的频繁而变得非常的重要,其中个人网站
个人网站设计与实现(动态)
俸亚雄
(湖南交通职业技术学院物流管理学院,湖南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 专业多,而且,薪酬待遇也不错,统计数据显示,网页设计师平均月薪约3500~7000元,高的则在15000元以上。
1.2个人网站设计条件
想要独立设计网页,需要具备一些必要条件,否则就不能胜任这份工作。
1. 软件基础
网页设计软件三剑客:Flash 、Dreamweaver 、Fireworks 熟练掌握其中之一
辅助软件:Photoshop
2. 技术需求
(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,db
dim connstr
db=".mdb"'数据库链接路径
connstr="DBQ=" server.mappath(""&db&"") ";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};"
set conn=server.createobject("ADODB.CONNECTION")
conn.open connstr
If Err Then
err.Clear
Set Conn = Nothing
,Response.Write "数据库连接出错,请检查数据库连接文件中的数据库参数设置。" Response.End
End 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_v1<>server_v2 or server_v1="" or server_v1="" then
response.Charset="utf-8"
response.write("")
response.end
end if
end 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)代码:
1.0 Transitional//EN" ,#div1{
width:950px;
height:400px;
background-color:#66CCCC;
margin:auto;
padding:60px 20px 140px 20px;
}
#div2{
width:560px;
height:340px;
float:left;
background-color:#33FF00;
padding:20px 20px 40px 20px;
}
#div3{
width: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)代码:
#div1{
width:950px;
height:400px;
background-color:#66CCCC;
margin:auto;
padding:60px 20px 140px 20px;
}
#div2{
width:460px;
height:280px;
float:left;
background-color:#33FF00;
padding:20px 20px 100px 20px;
}
#div3{
width:380px;
height:340px;
background-color:#663399;
float:right;
padding:20px 10px 40px 10px;
}
#div3top{
width:380px;
height:140px;
background-color:#FF00CC;
} 1.0 Transitional//EN"
,#div3top1{
width:140px
height:140px;
background-color:#FF99CC;
float:left;
}
#div3top2{
width:240px;
height:140px;
background-color:#FFCCFF;
float:right;
}
#div3buttom{
width:380px;
height:200px;
background-color:#FF9966;
}
3.3兴趣爱好模块
(1)兴趣爱好模块设计图:
,
(2)代码:
#div1{
width:950px;
height:400px;
background-color:#66CCCC;
margin:auto;
padding:60px 20px 140px 20px;
}
#div2{
width:240px;
height:340px;
float:left;
background-color:#33FF00;
padding:20px 20px 40px 20px;
}
#div3{
width:600px;
height:340px;
background-color:#663399;
float:right;
padding:20px 10px 40px 10px;
}
#div3top{
width:600px;
height:140px;
background-color:#FFFFCC;
} 1.0 Transitional//EN"


