计算机网络课程设计个人网站设计

1、计算机网络课程设计个人网站设计学院：信息工程学院班级：xxxx学号：xxxx姓名：xxx2007年1月目 录第一章 诸论11.1 设计思想11.2 开发工具的选用及介绍1第二章 网站总体分析与设计32.1 网站系统分析32.2 主页设计32.2.1风格定位32.2.2版面编排32.2.3色彩处理42.2.4最终设计4第三章 网站详细设计63.1 网站的功能及结构63.1.1 网站的功能63.1.2 网站的目录结构设计63.2 主页模版的具体设计63.1.1版式63.1.2顶端的图片73.1.3菜单73.1.4分时问候73.1.5版权信息73.3 主页的设计73.4 个人简历页面的设计103.5

2、 学校简介页面的设计103.6 美文欣赏页面的设计103.7 网站地图页面的设计103.8 关于页面的设计113.9 开发过程中遇到的问题及解决方案：11第四章 系统的使用说明与安装134.1 运行环境要求134.2 安装设置13第五章 参考文献13第一章 诸论在已跨入21世纪的今天，人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨大。目前，我国上网的人口已近一个亿，成立世界上网民最多的国家，许多人在需要查询信息，首先想到的就是上网。网站的迷人之处在于综合使用文本、图象、声音、动画和视频的信息和内容，具有丰

3、富的多媒体表现与互动特点，无可置疑， 网站已成为最吸引人的也最有效的信息传递手段和方式。因此网站建设在internet应用上的地位显而易见，它已成为组织和个人在信息化建设中的的重要组成部分，备受人们的重视。为了更好的让人们了解自己，提高就业的机会，特制作个人简介网站。1.1 设计思想通过网站，全面宣传自己，并展示学校风采、优点与特色，展示自己的优势，并加入自己的联系方式，在internt上实现自我宣传和体现自我价值，从而达到宣传自我，提高就业几率，提高学校知名度的目的。1.2 开发工具的选用及介绍1.2.1 html：hyper text markup language ，既“超文本标记语言”

4、，一般简称为“html”，是 www的描述语言，由 tim berners-lee提出。任何开发工具皆可发展html，只要使用一般的文书编辑程序，如windows记事本，就可以编辑。当然，其他网页发展工具，例如，dreamweaver、frontpage express、 frontpage等也都可以。安全性高，由于html是在客户机上执行，因此，即使黑客上传木马，也没办法执行取得密码。另外，目前绝大多数的免费空间提供为静态空间，因此采用html代码编写本网站。1.2.2 csscss是cascading style sheet 的缩写。译作层叠样式表单。是用于（增强）控制网页样式并允许将样式

5、信息与网页内容分离的一种标记性语言。 在主页制作时采用css技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 它的作用可以达到： （1）在几乎所有的浏览器上都可以使用。 （2）以前一些非得通过图片转换实现的功能，现在只要用css就可以轻松实现，从而更快地下载页面。 （3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 （4）你可以轻松地控制页面的布局 。 （5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个cs

6、s文件进行控制，只要修改这个css文件中相应的行，那么整个站点的所有页面都会随之发生变动。 1.2.3 dreamweaverdreamweaver是当前最流行的网页设计软件，它与同为macromedia公司出品的fireworks和flash一道，被誉为网页制作三剑客。dreamweaver与其它同类软件相比主要有以下优点：不生成冗余代码。可视化的网页编辑器，都要把使用者的操作转换成html代码。一般的编辑器都会生成大量的冗余代码，给网页以后的修改带来了极大的不方便，同时还增加了网页文件的大小。dreamweaver则在使用时完全不生成冗余代码，避免了诸多麻烦。而且，通过设置，还可用drea

7、mweaver清除掉网页文件原有的冗余代码。方便的代码编辑：可视化编辑和源代码编辑都有其长处和短处。有时候，直接用源代码编辑会很有效。dreamweaver提供了html快速编辑器和自建的html编辑器，能方便自如的在可视化编辑状态和源代码编辑状态间切换。操作简便：首先，dreamweaver提供的历史面板、html样式、模版、库等功能避免了重复劳动，使用者不必重复输入相同的内容、格式。其次，dreamweaver能直接往页面中插入flash、shockwave等插件，经过设置后还可直接调用相应的软件对这些插件进行编辑。最后，dreamweaver与fireworks集成紧密，可直接调用fir

8、eworks对页面的图象进行修改、优化。优秀的网站管理功能：在定义的本地站点中，改变文件的名称、位置，dreamweaver会自动更新相应的超级链接。check in和check out功能可协调多个使用者对远程站点的管理。便于扩展：使用者可给dreamweaver安装各种插件，使其功能更强大。使用者若有兴趣，还可自己给dreamweaver制作插件，使dreamweaver更适应个人的需求。综合上面所述，所以我选择了html+css结合dreamweaver架构自己的个人简介网站。第二章 网站总体分析与设计2.1 网站系统分析根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，

9、从内容上可对网站作如下划分： 首页 对网站主要内容做一预览导航，让读者有个印象； 个人简历 通过表格的形式，介绍自己； 学校简介 以图片+文字的形式介绍学校，展现美丽校园； 美文欣赏 网上搜集来的文章，共享给更多的人； 网站地图 以层次形式，展示本网站的主要链接栏目； 关于 网站制作的工具，感谢受到的帮助。2.2 主页设计2.2.1风格定位主页的美化首先要考虑风格的定位。任何主页都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。目前主页的应用范围日益扩大，几乎包括了所有的行业，林林总总，包罗万象，但归纳起来大体有这么几个大类：新闻机构、政府机关、科教文化

10、、娱乐艺术、电子商务、网络中心等。对于不同性质的行业，应体现出不同的主页风格，就像穿着打扮，应依不同的性别以及年龄层次而异一样。例如：政府部门的主页风格一般应比较庄重，而娱乐行业则可以活泼生动一些；文化教育部门的主页风格应该高雅大方，而商务主页则可以贴近民俗，使大众喜闻乐见。主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。还有，动画效果也不宜在主页设计中滥用，特别是一些内容比较严肃的主页。主页毕竟主要依靠文字和图片来传播信息，它不是动画片，更不是电视或电影。至于在主页中适当链接一些

11、影视作品，那是另外一回事。2.2.2版面编排主页的设计首先涉及到的是页面的版面编排问题。版面编排实际上就是中国古代画论中的经营位置。主页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体，展现给广大的观众。可以依据如下几条来做： 1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一

12、般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。 3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。2.2.3色彩处理色彩是人的视

13、觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是总体协调，局部对比，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使

14、我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。下面介绍几种常用的配色方案： 1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握大调和，小对比这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强

15、烈对比。最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是高调和低调。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为明度变化。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。2.2.4最终设计综合上述几点，本网站定位为个人网站，庄重而不失活泼，高雅而不俗

16、气；主色调偏中性，又有桔红的点缀；图文与文字的组合形式展示网页；为了使800600的分辨率也能正确显示本网站，将主要区域设置为747像素，页面的编排效果如图1显示：图1 网站模版主框架构造图将色彩效果加入到框架设计中，并且加入网站的内容板块，其最终设计效果图如图2所示。图2 网站模版最终设计效果图第三章 网站详细设计3.1 网站的功能及结构3.1.1 网站的功能在对大量原始资料进行完全分析，目前绝大多数的免费空间提供为静态空间，因此，将网站的功能定义为静态模块，采用静态页面，再将静态模块细分为：首页、个人简历、学校简介、美文欣赏、网站地图、关于等六个功能页面。3.1.2 网站的目录结构设计网站

17、的目录结构目录的规划，也就是网页的物理保存位置的规划。一些人将存放网页的文件夹只分两个目录，一个用来存放网页，一个用来放图片。更有甚者，将所有的东西都放在一个文档中。这样做的害处很明显，当所有的东西都很少时，这或者不是什么问题，而一旦你的网站做大时，才去考虑这个问题，修改起来将会十分麻烦。即使你严格遵守了一套合理的命名规则，但面对如此多的文件，也将无济于事。网站的文件结构的组织类型有分层树状结构、线性结构、可选择的线性结构、web结构等，考虑到网站的管理的方便性和日后的可维护性，本次设计决定采用分层树状目录来构架整个网站，这种结构的优点是层次分明、系统的扩展性很好、可以分类管理各子功能模块的网

18、页、图片和相关数据等，它的缺点是各页面的在作链接时易出错，但只要仔细一些，这个缺点也是可以避免的。图3 网站的目录结构3.2 主页模版的具体设计3.1.1版式如图1所示，采用一栏式，最终版面效果如图4：图4 最终版面效果3.1.2顶端的图片放置在顶端的图片和网站名称，图片的颜色基调网站相对应，加入网站名称，给以桔红背景的点缀，使整个页面生动活泼，跃然纸上。3.1.3菜单菜单即为导航菜单，有“首页、个人简历、学校简介、美文欣赏、网站地图、关于”，方便浏览导航。3.1.4分时问候利用菜单右侧的剩余空间，加入人性化问候，06点问候凌晨好，68点问候早上好，812点问候上午好，1214点问候中午好，1

19、417点问候下午好，1722点问候晚上好，220点问候夜里好，效果如图4。程序代码为：now = new date(),hour = now.gethours()if (hour06) document.write(凌晨好！)else if (hour08) document.write(早上好！)else if (hour12) document.write(上午好！)else if (hour14) document.write(中午好！)else if (hour17) document.write(下午好！)else if (hour22) document.write(晚上好！)el

20、se document.write(夜里好！)3.1.5版权信息在页面底栏加入版权信息： “ mydoing. all rights reserved. design by xxx. 长安大学信息工程学院 自动化二班 19号 ” ，效果如图4。3.3 主页的设计主页是网站的门面，放置的内容应体现网站的主要内容，因此，在网站主页中放入以下模块：网站开发简介，自我介绍和长安大学学校简介。另外，在辅助导航栏内加入日历表，可以自动显示当前日期和现在时间，源代码如下：function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) t

21、his0 = m0;this1 = m1;this2 = m2;this3 = m3;this4 = m4;this5 = m5;this6 = m6;this7 = m7;this8 = m8;this9 = m9;this10 = m10;this11 = m11;/实现月历function calendar() var monthnames = janfebmaraprmayjunjulaugsepoctnovdec;var today = new date();var thisday;var monthdays = new montharr(31, 28, 31, 30, 31, 30

22、, 31, 31, 30, 31, 30, 31);year = today.getyear() +1900;thisday = today.getdate();if (year % 4 = 0) & (year % 100 != 0) | (year % 400 = 0) monthdays1 = 29;ndays = monthdaystoday.getmonth();firstday = today;firstday.setdate(1);testme = firstday.getdate();if (testme = 2) firstday.setdate(0);startday =

23、firstday.getday();document.write()document.write();document.write();var daynames = new array(星期日,星期一,星期二,星期三,星期四,星期五,星期六);var monthnames = new array(1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月);var now = new date();document.writeln( +now.getyear()+ 年+ monthnamesnow.getmonth() + + now.getdate() + 日 + dayn

24、amesnow.getday() + );document.writeln(日);document.writeln(一);document.writeln(二);document.writeln(三);document.writeln(四);document.writeln(五);document.writeln(六);document.writeln();column = 0;for (i=0; istartday; i+) document.writeln(n );column+;for (i=1; i=ndays; i+) if (i = thisday) document.writel

25、n()else document.writeln();document.writeln(i);if (i = thisday) document.writeln()column+;if (column = 7) document.writeln(); column = 0;document.writeln()document.writeln()document.writeln(北京时间)document.writeln();var timerid = null;var timerrunning = false;function stopclock ()if(timerrunning)clear

26、timeout(timerid);timerrunning = false;/显示当前时间function showtime () var now = new date();var hours = now.gethours();var minutes = now.getminutes();var seconds = now.getseconds()var timevalue = +(hours = 12) ? 下午 : 上午 )timevalue += (hours 12) ? hours -12 :hours)timevalue += (minutes 10) ? :0 : :) + min

27、utestimevalue += (seconds 10) ? :0 : :) + secondsdocument.clock.face.value = timevalue;timerid = settimeout(showtime(),1000);/设置超时,使时间动态显示timerrunning = true;function startclock () stopclock();showtime();3.4 个人简历页面的设计用表格的形式制作个人简历，顶端显示姓名和联系方式，突出显示，便于联系；另外，加入介绍内容：教育经历、培训经历、社会实践、在校期间任职情况、计算机技能、外语技能、奖励和

28、自我评价。3.5 学校简介页面的设计加入学校的简介，包括学校历史、合并情况、院系设置和教学实力等等的综合介绍，为使更多的人了解长安大学，同时还加入了分校区的校景，如校本部、渭水校区、雁塔校区和太白基地，运用flash图片浏览，增加了动感色彩。 图5 校本部图6 渭水校区 图7 雁塔校区图8 太白实习基地3.6 美文欣赏页面的设计书籍是人类知识的源泉，本内容板块安排了许多从网上搜集的好文章，包括清新散文、心灵杂文和心情感悟三大版块，每个版块下又分别包括6篇文章，分别为清新散文：幸福其实很简单、听雪、棉花、（北方人，南方人）、乡村的夜晚、最后一朵玫瑰；心灵杂文：心的存折、别让灰尘落到心上、（乌鸦、蚊子、大熊猫）、教养的证据、给自己多点爱心、人生的意义与价值；心情感悟：飘香的生命、泥巴和星星之间、对月、一生的功课、受用一生的话、丢弃的日子；3.7 网站地图