1、Internet 网站开发技术课程设计题 目： 泡儿励志网 组 员： 叶舒平 韦金玉 陈晖 班 级： 2010 职师计本 学 院： 职业技术师范学院 指导教师： 李宁 日 期： 2012/6/19 目录目录Internet 网站开发技术课程设计 1目录 21 前言 .32 基本任务和角色分工 .32.1 基本任务 32.2 角色分工 33 网站开发各环节 .33.1 网站定位 .33.2 网站风格设计 .43.3 网站信息搜集与素材 .43.4 网站栏目规划和目录结构设计 43.5 网站页面方案设计 .43.6 网站页面设计 .53.7 网站编码规范 .63.8 网站导航设计 .63.9 网站
2、整合与测试 .63.10 网站的环境准备 .63.11 网站经费预算 .63.12 网站维护与推广 .73.13 用户安装使用说明 .74 小结 .7参考文献 71 前言网站背景与意义说明网站背景：在物欲横流的当今时代，不得不说，我们的精神世界相对来说是比较贫乏的。然而，榜样的力量是无穷的，刻苦奋斗，勇往直前的人就是我们的精神支柱。我们的网站定位主要是在青少年人群，通过身边的各种人和各种事，激励我们更大的学习兴趣以及更强的学习劲头。2 基本任务和角色分工2.1 基本任务分析讨论，给小组确定一个队名，然后收集网页制作的相关素材。确定网站主题，然后对整个网站进行规划设计，确定网页的布局。分配任务，
3、每个成员开始做自己的任务实现各个子功能。2.2 角色分工客户：陈晖 提出对网站的要求设计师：韦金玉 理解客户的要求，并且和客户一起确定网站的整体风格，网站的主要栏目和主要功能。程序开发员：叶舒平 对客户和设计师的各种要求进行落实，通过代码将功能实现出来。3 网站开发各环节3.1 网站定位网站的定位主要是定位在青少年人群中，我们建设这个网站的目的就是通过互联网的形式，把身边的那些榜样的实际放到网上去，供青少年阅读，以此来提高大家的精神境界和道德水平。3.1.1 网站行业定位网站的行业定位是主要是给青少年提供各种各样的激励人心的事例，为他们的个人成长提供指引和帮助。3.1.2 网站用户定位本网站的
4、定位的用户人群是比较狭小的，主要是青少年人去，由于人力和物力以及财力等等各种因素的制约，网站的用户定位是比较狭小的，这样子才有可能将网站做的更精更细。3.1.3 网站设计定位我们合理的队网站的色彩和架构进行搭配，使网页显得清晰和简洁，而且页面适合搜索引擎的友好性标准。3.1.4 网站推广定位网站的推广定位主要是搜索引擎和我们栏目的关键词以及网站的主题来实现的。3.2 网站风格设计3.2.1 基本原则Logo 的设计比较有特色，通过一个多彩的环，将各行各业的人物有机的联系在一起，也寓意着在生活中，我们也可以多姿多彩的。其二是我们的主色调深蓝比较突出，显示出网站睿智深沉的风格。再次就是标题和主菜单
5、的文字大小，它们的大小都符合网民的阅读习惯，提高了浏览的舒适性，可以提高网站的访问量，进而提升网站的知名度。3.2.2 网站色彩的使用色彩对视觉的刺激是信息传达起到第一信息传达的作用。因此在色彩的选择上，是经过我们小组成员的深思熟虑才采用深蓝色和你涂色的搭配的。在网站使用的几种颜色中，主色调是深蓝色和泥土色，辅色调是白色。由于颜色显得比较深沉，因此将辅色调设为白色，这样就使得网站更加的浑然一体。3.2.3 网站网页版式设计网站的网页版式设计是典型的 1-3-1 布局 1 部分放置网站的 logo 和导航栏，下方尽量留出一点点的空间，以使弹出的下拉菜单更加容易看得见，而且，当收起下拉菜单时，又显
6、得大方美观，这种构思可谓是一石二鸟！在中间的部分就放置一幅大图，该图寓意着对梦想和希望的追求。同时，该幅图画也占据了主页中的大部分空间，就是为了达到一种视觉传达信息的效果，通过图画来说话，显得美观大方而又简洁清晰。如下图所示：3.3 网站信息搜集与素材网站的文字信息主要是从志强社的活动中要过来的，然后我们从中筛选合适的材料，还有图片的信息，大部分都是从志强社那边要过来的，还有一部分的内容就是在网上收集的。3.4 网站栏目规划和目录结构设计3.4.1 网站栏目规划泡尔励志网志强之星 励志阅读 名言格言 资源下载励志奋斗思想者 文化苑 榜样集 激励人生人物传奇心灵励志 名人名言 名言警句 民间谚语
7、 励志书籍 学习交流志强风采3.4.2 网站目录结构设计我们网站的主目录主要是放置主页，然后里面再放 Image 文件还有 css 文件，以及 Js 文件等等。每个文件夹里面都有相同的设置。如下图所示：3.5 网站页面方案设计3.5.1 首页方案设计3.5.2 栏目首页方案设计3.5.3 内容页方案设计3.6 网站页面设计3.6.1 首页设计（1 ）内容分析在首页的位置中，主要放置以下的一些信息：、放置导航栏还有网站的 logo、最下面的那部分放置一些最新的活动的图片，还有最近更新的内容以及必不可少的友情链接（2 ）结构设计HTML 结构设计如下所示：相应的代码如下所示：首页 |励志奋斗|思想
8、者文化苑榜样集励志阅读 |心灵励志人物传记 激励人生 志强之星 |志强风采名言格言|名人名言 格言警句 雷人语录 资源下载|励志书籍 学习资料 办公实用 每一张自强不息的脸每一个感动你我的故事12345志强之星 向上能量 感动你我秦磊挑战人生，不断证明院运铁因爱凝聚的生命陈醒均志强的微笑More友情链接 广西师范大学独秀网广西师范大学志强社中国青年志愿网More设为主页 | 加入收藏| 关于我们 | 联系方式 Copyright Guangxi normal university 版权所有：广西师范大学 （3 ）原型设计原型设计如图：（4 ）效果图设计效果图设计：（5 ）布局设计（6 ）视觉设
9、计（7 ）交互设计3.6.2 栏目首页设计（1 ）内容分析（2 ）结构设计（3 ）原型设计（4 ）效果图设计（5 ）布局设计（6 ）视觉设计（7 ）交互设计鼠标经过时，菜单栏的字体会变大，易于让浏览者知道自己已经选中了该项，如下图所示：当选中超链接的时候，文字的颜色加深，显得更加的白，便于区别。3.6.3 内容页设计（1 ）内容分析在内容页中，为了区分于主页的设计，我们特地将菜单栏放置在了左边的位置，而且还有动态的效果，刚刚进来的时候给人一种耳目一新的感觉。（2 ）结构设计HTML 结构的代码如下所示：AC_FL_RunContent( codebase,http:/ Files/445107
10、468/FileRecv/栏目页(2)/top,quality,high,pluginspage,http:/ Files/445107468/FileRecv/栏目页(2)/top ); /end AC code警世名言：有志者，事竟成 少壮不努力，老大徒伤悲 业精于勤，荒于嬉一寸光阴一寸金，寸金难买寸光阴 首页励志奋斗励志阅读志强之星名言格言资源下载站内搜索：您现在的位置:首页-志强之星-秦磊 照见自己心灵的镜子 -中华励志网美国某大学的科研人员进行过一项有趣的心理学实验，名曰“伤痕实验” 。他们向参与其中的志愿者宣称，该实验旨在观察人们对身体有缺陷的陌生人作何反应，尤其是面部有伤痕的人。
11、每位志愿者被单独安排在没有镜子的小房间里，由好莱坞的专业化妆师在其左脸做出一道血肉模糊、触目惊心的伤痕。志愿者被允许用一面小镜子照照化妆的效果后，之后镜子就被拿走了。尤为关键的是最后一个步骤，化妆师表示需要在伤痕表面再涂一层粉末，以防止它被误擦掉。实际上，化妆师用纸巾偷偷抹掉了化妆的痕迹。对此毫不知情的志愿者们被派往各医院的候诊室，他们的任务就是观察人们对其面部伤痕的反应。规定的时间到了，返回的志愿者们竟无一例外地叙述了相同的感受人们对他们比以往更加粗鲁无理、不友好，而且总是盯着他们的脸看！毫无疑问，他们的脸上什么也没有，是不健康的自我认知影响了他们的判断。与脸上的伤痕相比，一个人心灵的伤痕虽
12、然隐蔽得多，但同样会通过自己的言行显现出来。如果我们自认为有缺陷、不可爱、没有价值，也往往会以同样的怀疑、缺乏爱心、令人气馁的态度对待别人，从而很难建立起互信互利的人际关系。人的心灵就像一面镜子，你感知到的是什么样的世界，取决于你如何看待自己。联系地址：广西桂林市育才路 15 号Copyright Guangxi normal university 版权所有：广西师范大学 （3 ）原型设计如右图所示：（4 ）效果图设计（5 ）布局设计如上得效果整体样式设计：.divmargin:0px auto;width:900px;height:890px;background:url(Image/bj.
13、jpg) no-repeat;.logowidth:150px;#headwidth:898px;height:150px;border:1px #999999 solid;background:url(Image/tb副本 .jpg);/*background-color:#EBEBEB;*/#congtentwidth:900px;height:630px;padding:10px 0px;#footerwidth:900px;height:100px;#leftcontent width:220px;height:630px;float:left;border:solid 1px #99
14、9999;/*background-color: #EBEBEB;*/background:url(Image/flower.png) no-repeat;background-position:bottom right;#rightcontent width:670px;height:630px;float:right;border:solid 1px #999999;/*background-color:#EBEBEB;*/background:url(Image/light.png) no-repeat;background-position: bottom right;.soupadd
15、ing:10px 0px;border-top:1px #CCCCCC dashed;.gunbackground-color:#D8D8D8;#apDiv1margin:10px auto;width:600px;height:50px;#apDiv2,#apDiv4,#apDiv5margin:30px auto;width:600px;height:150px;.tabborder-bottom:1px #CCCCCC dashed;input.btnbackground-color:#CCCCCC;color:#804040;border:1px #804040 solid;.skpa
16、dding:10px 5px;border-top:1px #CCCCCC dashed;margin:5px;.STYLE9 font-family: “华文行楷“;font-size: 18px;color: #FFFFFF;a:link.rfont-family: “华文行楷“;font-size: 18px;color: #FFFFFF;text-decoration:none;a:visited.rcolor:#CCCCCC;text-decoration:none;a:hover.rcolor: #804040;text-decoration:underline;a:active.
17、rfont-weight:bold;color:#666666;.ztfont-size:14px;.STYLE15 font-size: 14px.STYLE16 color: #999999.STYLE17 color: #FFFFFF;font-size: 14px;.STYLE19 font-family: “华文行楷 “; font-size: 18px; color: #FFFFFF; font-weight: bold; （6 ）视觉设计（7 ）交互设计当鼠标经过左边的菜单栏时，文字会侧滑，同时文字的颜色也会发生改变。如图， “励志奋斗”的字体向右边侧滑了，而且文字的颜色也发生改变，变成了军绿色。3.8 网站导航设计导航路径：4 小结经过我们小组的这次合作，一个小型的静态网站就这样被我们做出来了。在这次的制作过程中，我们充分发挥了自己各自的创新能力，在网站的配色和色彩搭配方面都是经过了一番深思熟虑的。虽然网站中有一些功能还不是很完善，但是网站的基本功能还是实现了，对于组员的辛勤付出我表示衷心的感谢，没有你们，这个网站是不可能做得那么好的，你们的意见和建议使这个网站变得更加完善和美观。在做网站的过程中，确是遇到了不少的问题，谢谢周围同学的耐心讲解热情的帮助，谢谢你们。参考文献1基于 web 标准的网页设计与制作 唐四薪
