1、个人网站设计与实现（动态）（湖南交通职业技术学院物流管理学院，湖南423000）摘要网站伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要，其中个人网站作为其对外展示自己的窗口，在现代互联网时代是推销自己的不二选择工具。本文将简单介绍个人网站在社会生活中对人们生活产生的影响，说明个人网站在互联网时代对个人的重要性，其次介绍网站个人网站的色调搭配，设计风格，重点介绍个人网站的功能模块以及文字内容和图片展示；最后解释一些网站设计的重要代码以及其实现功能。关键词个人网站、网站设计、功能模块、程序代码目录摘要I第一章文献综述1网页设计行业现状2网站设计条件3网站
2、建设入门门槛（大专）第二章设计部分1设计愿望2设计预期成果3数据库和环境的配置4设计工具和设计语言第三章网站模块功能1个人简介模块2兴趣爱好模块3家乡模块4个人相册模块第四章总结第一章文献综述互联网是社会发展的必然趋势，很多人已经意识到网络的强大生命力和它在未来将处于的重要地位。他们钻研并且努力进入到这一个新的空间，新的领域。以个人为中心，淡化了传统中心地位，使得我们的世界向多元化加速发展，人人都有话语权，人人都是中心。互联网是一个互动性极强的平台，它自由、宽容、平等、共享，并使来自民间的声音参与到了构建主流话语的行动中来。INTERNET飞速发展使得网站不再仅仅为企业或公司等大型结构所拥有，
3、互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在INTERNET应用上的地位显而易见，一个家庭甚至个人都可以拥有属于自己的网站，而在这其中，个人网站已经日渐普及，而且发展到今天，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。11网页设计师就业现状1中国网民数量多中国的网民数量已超过5亿，处于全球网民数量最多的位置。整个互联网处于快速发展阶段，每个人，每个企业都想要一个网站，网页设计师就业前景良好。网页设计师培训成为了许多人进修以及进入网页设计师行业的首选。2社会这类人才需求大，发展空间大根据权威的人才招
4、聘网站显示，每年全国各类企业对网页设计师的人才需求缺口在50万人左右，而实际需求远远大于这个数字，网页设计师不仅IT专业企业需要，广大的非IT企业也需要，一个基本的企业都需要一个网站作为展示自己产品的平台，有能力维护企业网站的网页设计师就变得非常吃香。就业前景是非常乐观的，同时网页设计师和其他一些专业比起来具有一些特点工作起点高，发展空间大，职业寿命长，越老越吃香，性别无偏好，工作最稳定，不用频繁跳槽，前景年年好，薪水待遇高3薪水待遇高随着国内信息化工作的迅速推进、互联网业的蓬勃发展及网络技术的日新月异，市场对网页设计师、网站开发人员等技术人员的需求不断看涨。网页设计师的就业范围相当宽广，几乎
5、所有的企业都需要网页设计师帮助企业设计网站和建设客户交互式系统几乎所有有前瞻意识的企业都需要网页设计师负责运行和维护工作。因此，网页设计师的就业机会比IT专业多，而且，薪酬待遇也不错，统计数据显示，网页设计师平均月薪约35007000元，高的则在15000元以上。12个人网站设计条件想要独立设计网页，需要具备一些必要条件，否则就不能胜任这份工作。1软件基础网页设计软件三剑客FLASH、DREAMWEAVER、FIREWORKS熟练掌握其中之一辅助软件PHOTOSHOP2技术需求1基础内容网页设计概述、网站设计制作的基本流程、色彩搭配在网站中的应用、网站在用户界面的设计、网站广告的设计、网站中表
6、格的使用、网站中层的应用、框架网站的制作、模板网站的制作、JAVASCRIPT特效制作、使用CSS样式表设计网页等2技术内容HTML语法、CSS语法、JAVASCRIPT语法3图像处理FLASH动画创意、GIF动画制作、网页图片处理4行业网站实例个人网站、企业宣传网站、新闻资讯网站、教育网站、电子政务网站、电子商务网站、旅游网站、免费资源网站、门户网站等5后台编程数据库SQLSERVER设计、MYSQL设计、ACCESS设计编程语言ASP、JSP、VBSCRIPT、JAVASCRIPT、PHP等一种编程实例文章发布系统、留言板、BBS、会员注册系统、在线购物网站13网站建设入门门槛（大专）我们
7、是大专学生，所以针对我们电子商务的同学实践操作特点，我们下面和大家探讨一下学习的建站技术的基本步骤和具体的时间安排1、HTML（3天）是最简单易学的，不需要过多的时间，一天就能了解，三天就能掌握。2、学习PS（7天）能用PS切图设计出漂亮的TABLE页面。什么不符合WEB标准不是DIVCSS因为表格做的网页很直观，新手很容易理解，PS网页界面，只要有一点平面设计基础的都能很快掌握，结合代码能更加熟悉HTML的相关细节。这个过程大概需要710天时间，具体地，可以每天做一个网站首页，从简单的做起，如果能做的像网页截图那样。那就完美了，中间可以参杂着做网站导航栏、按钮效果、等等。要是没有PS基础的朋
8、友，可以适当延长时间安排。3、学习CSS（重点10天）特别是想做职业站长的新手们，DIVCSS技术是必学的，也是最要下功夫来学的，这里我说一下，CSS入门很容易，就是那么几个属性，而且在网页编辑软件里都有直接输入数值的面板，我个人认为CSS的难点在于页面的整体性，要从整个页面甚至整个站点的高度设计规划CSS，并能熟练的运用各种技巧实现网页样式与布局的变化，包括考虑到浏览器的兼容性，这些都还是需要一定的时间的，一定熟练的作品才能学成。学习CSS可以考虑买本书来学习，书中的理论知识能帮助你理解每个布局代码的含义。4、学习JAVASCRIPTFLASH（7天）JAVASCRIPT就是常说的JS，如网
9、页的调用幻灯片、调用最新记录、调用评论数等等，这些“调用”都是通过JAVASCRIPT来实现的，JAVASCRIPT是运行与客户端的脚本，学习它能做出很多网页特效，而且它相对简单易学（不包括AJAX的高级功能），对于想学习程序代码的朋友，从JAVASCRIPT入手是个不错的选择。我们并不需要很熟练，只要相对了解就行了。能看懂一般的JS代码，并能自己写出一小段JS的程度就基本够用了。学习完JS和PHOTOSHOP之后再学习一下FLASH的制作和使用，以便能制作出BANNER或其它广告条，并不需要达到制作动画片的水平。中国站长站5、学习CMS程序（8天）学完以上技术之后，你的网页基本知识应该算比较
10、牢固了，动态网页需要程序的支持，程序相对比较复杂，要从零基础到用自写程序开发网站，那对于新手站长来说技术门槛太高了，所以现在源码下载站人气比较高。提倡的解决方案就是利用时下比较流行的CMS建站程序，用他们可以自定义出几乎任何类型的站点。这里的学习方法，就是到各大CMS论坛去找相关教程和帮助文件了。第二章设计部分个人网站要发展，要么是从我的需求出发，要么是从我周围人的需求出发。每个人设计网页都希望自己的网站能够达到自己的期望要求。21设计愿望我所制作的个人网站在完成时，希望能够给浏览者一种简约，时尚的感觉的，这是我的设计愿望。网站大体可以分为以下几大部分1首页个人网站首页板块布局，采用一个简单的
11、DIV容器，容器左侧设计一个图片滚动AD插件，其目的是将4张大图片做一个轮显特效效果，右侧设计一个垂直导航栏，导航栏分为4个栏目，分别是个人简介、兴趣爱好、家乡、个人相册。2个人简介个人简介板块布局，采用一个简单的DIV容器，容器左侧包括一个DIV，右侧也包括一个DIV容器，左侧容器方一张自己头像的图片，右侧容器显示关于自己的专业、学校、年纪、性格等的文字信息，用来简单的介绍自己（特效）3兴趣爱好兴趣爱好板块布局，在一个的DIV容器里采用FLOAT方式镶嵌2个小的DIV，左侧里面再分5个DIV，1、3、5的DIV板块作为栏目分别显示动漫、军事、游戏3个内容，右侧DIV模块当作个子容器，容器分为
12、左右2个DIV模块，右侧模块再分为上下2个DIV模块上面一个模块是放图片的，左侧大的模块和右侧下面的DIV模块内嵌入一个表格，用了展示相应的文字信息。4家乡家乡板块布局，采用一个大的DIV容器，容器里嵌入一个小的DIV块，这个DIV块里采用图片滚动特效AD插件，和首页图片滚动AD插件的区别是图片较小并且有相关的文字展示区域，用来介绍家乡风景名胜的文字信息。5个人相册个人相册板块布局，采用一个大的DIV容器，容器里嵌入一个小的DIV快，这个DIV块里，采用图片居中放大插件，用来显示相册的每张图片。22设计预期成果在完成网站的风格和色调以后，就是网站的材料组织以及网站的页面设计和数据库设计。网站最
13、后完成发到网上后，能够充分吸引浏览者的目光，能够浏览我个人网站的浏览者能够立刻体会到我网站的简约，时尚绚丽的风格。23数据库和环境的配置1数据库连接网站ACCESS运用ASP把数据库和网站连接起来做一个“CONNASP”文件，每次连接数据库时候都调用这个文件即可SERVER_V2ORSERVER_V1“ORSERVER_V1“THENRESPONSECHARSET“UTF8“RESPONSEWRITE“ALERT错误禁止从站点外部提交数据“RESPONSEENDENDIFENDSUB2WINDOW7环境IIS配置操作步骤启动IIS点击开始控制面板默认程序程序和功能打开或关闭WINDOWS功能I
14、NTERNET信息服务WEB管理工具然后勾选所有的选项操作步骤配置IIS点击开始控制面板管理工具INTERNET信息服务IIS管理器打开后进行相关设置24设计工具和设计语言我制作网站的网页编辑工具软件是DREAMWEAVER8、设计语言WEB前端采用HTML5、CSSDIV、编程语言JAVASCRIPTJQUERY、服务器语言ASP第三章网站功能模块31首页模块1首页设计板块图2代码DIV1WIDTH950PXHEIGHT400PXBACKGROUNDCOLOR66CCCCMARGINAUTOPADDING60PX20PX140PX20PXDIV2WIDTH560PXHEIGHT340PXFL
15、OATLEFTBACKGROUNDCOLOR33FF00PADDING20PX20PX40PX20PXDIV3WIDTH230PXHEIGHT340PXBACKGROUNDCOLOR663399FLOATRIGHTPADDING20PX60PX40PX60PX3首页AD插件特效代码需要引用文档一个DIV元素包含一些图片，超链接用于鼠标单击从而指向一些网页，这里用了JAVASCRIPT库JQUERYWINDOWLOADFUNCTIONSLIDERNIVOSLIDER32个人简介模块1个人简介模块设计图2代码DIV1WIDTH950PXHEIGHT400PXBACKGROUNDCOLOR66CCC
16、CMARGINAUTOPADDING60PX20PX140PX20PXDIV2WIDTH460PXHEIGHT280PXFLOATLEFTBACKGROUNDCOLOR33FF00PADDING20PX20PX100PX20PXDIV3WIDTH380PXHEIGHT340PXBACKGROUNDCOLOR663399FLOATRIGHTPADDING20PX10PX40PX10PXDIV3TOPWIDTH380PXHEIGHT140PXBACKGROUNDCOLORFF00CCDIV3TOP1WIDTH140PXHEIGHT140PXBACKGROUNDCOLORFF99CCFLOATLEF
17、TDIV3TOP2WIDTH240PXHEIGHT140PXBACKGROUNDCOLORFFCCFFFLOATRIGHTDIV3BUTTOMWIDTH380PXHEIGHT200PXBACKGROUNDCOLORFF9966文字填写区域文字填写区域33兴趣爱好模块1兴趣爱好模块设计图2代码DIV1WIDTH950PXHEIGHT400PXBACKGROUNDCOLOR66CCCCMARGINAUTOPADDING60PX20PX140PX20PXDIV2WIDTH240PXHEIGHT340PXFLOATLEFTBACKGROUNDCOLOR33FF00PADDING20PX20PX40PX
18、20PXDIV3WIDTH600PXHEIGHT340PXBACKGROUNDCOLOR663399FLOATRIGHTPADDING20PX10PX40PX10PXDIV3TOPWIDTH600PXHEIGHT140PXBACKGROUNDCOLORFFFFCCDIV3TOP1WIDTH460PXHEIGHT140PXBACKGROUNDCOLORCC3366FLOATLEFTDIV3TOP2WIDTH140PXHEIGHT140PXBACKGROUNDCOLORCC9900FLOATRIGHTDIV3BUTTOMWIDTH600PXHEIGHT200PXBACKGROUNDCOLORCCF
19、FFF34家乡模块1家乡板块设计图2代码DIV1WIDTH950PXHEIGHT400PXBACKGROUNDCOLOR66CCCCMARGINAUTOPADDING60PX20PX140PX20PXDIV3WIDTH920PXHEIGHT340PXBACKGROUNDCOLOR663399FLOATRIGHTPADDING20PX10PX40PX10PXDIV3LEFTWIDTH530PXHEIGHT340PXBACKGROUNDCOLORCC6633FLOATLEFTPADDINGRIGHT20PXDIV3RIGHTWIDTH370PXHEIGHT340PXBACKGROUNDCOLORC
20、CCC00FLOATRIGHT家乡文字介绍35个人相册模块1个人相册模块设计图2代码DIV1WIDTH950PXHEIGHT400PXBACKGROUNDCOLOR66CCCCMARGINAUTOPADDING60PX20PX140PX20PXDIV3WIDTH920PXHEIGHT340PXBACKGROUNDCOLOR663399FLOATRIGHTPADDING20PX10PX40PX10PX3图片居中放大显示插件代码第一步文档引用第二步要使用这个WIDGET，对HTML元素有一些要求，需要一个超链接包围小图片IMG元素，并且超链接目标指向大图片，超链接可以定义TITTLE属性来描述图片
21、信息第三步对A元素调用JQUERY插件方法LIGHTBOXDOCUMENTREADYFUNCTIONALIGHTBOX第四章总结在本次设计的全过程中，我对三年所学的知识有了一个比较系统的认识和理解。涉及了各方面的知识，大大扩展了我的知识面，同时是我学会了如何使用所学的知识去解决一些实际的问题。在设计中我深知自己掌握的知识还远远不够，掌握的一些理论知识应用到实践中去，总会出现这样或那样的问题，不是理论没有掌握好，而是光知道书本上的知识是远远不够的，一定要把理论知识和实践结合起来。把学到的知识应用到时间中去，多做多练，才可以把理论的精华发挥出来。知识不是知道，了解就好，一定要去应用它，发展它，让它
22、在现实生活中得到充分的应用，从而解决一些问题，这才是学习的根本目的。而且知识又不是单一的，它是互相联系的，学科与学科之间都有着内在的联系。计算机是一门非常复杂且庞大的学科，一项课题往往需要多项技术才可以完成的。在设计阶段，通过对课题的深入分析与研究，迫使我对技术有了一定的了解。在遇到问题时，得到了指导老师与同学的悉心帮助，使我感受到集体的力量是无穷的。通过这次设计，我学会了和别人配合工作，因为一个人所学的知识不可能面面俱到的，只有通过合作，发挥自己的优点，体现团队精神，才能使工作做得更为出色。通过这次设计，我学到了许多书本上学不到的知识，增强了自己的动手能力。即将毕业我十分珍惜这次锻炼的机会，我按部就班的完成了自己的设计任务，但由于自己的知识水平有限，仍然存在很多的不足之处，恳请老师多多指教当今的社会是竞争的社会，而人才的竞争则是竞争的焦点，毕业设计对于我们即将离校的同学来说，是离校前很好的一次锻炼，使我们各方面的能力都有了很大的提高，为我们踏出校门，走上社会增强了能力与自信互联网技术的高速发展，使我深深地认识到只有不断的加强学习，才能在网页设计技术方面不至于被淘汰，今后，我还要加强学习，努力使自己成为一位专业的网页设计人员，为我自己所从事的工作服务。
