脚本网站课程设计.docx

脚本网站课程设计.docx

《脚本网站课程设计.docx》由会员分享，可在线阅读，更多相关《脚本网站课程设计.docx（7页珍藏版）》请在冰点文库上搜索。

脚本网站课程设计

课程设计报告

课程设计名称：

脚本程序开发技术

院系名称：

中印计算机软件学院

学生姓名：

张景山

班级：

2014级软件技术二班

学号：

201401080253

成绩：

指导教师：

陈凤萍

开课时间：

2015—2016学年第二学期

一．课程设计概述

1。

1课程设计目的

软件学院网站基本组成成分包括首页、学校概况、党建工作、院系工作、师资队伍、人才培养、科学研究、招生政策，采用JavaScript语言知识对班级网站进行设计。

明年我们就面临着毕业,面临着离别，做这个网站也是为在我们的生命中留下一分美好的回忆。

JavaScript在创建班级网站的过程中如果运用得当将会使网站得到一个很好的效果，同时也将提高网站的人性化程度。

1.2开发环境

1.能够熟练使用css结合html，通过咨询和考察，最终确定并实现网页布局.同时使用动态样式表甚至可以让图片的切换获得多种转场效果。

2．熟练使用javascript和html知识结合做一个更漂亮的网站。

3．熟练使用javascript中的内建对象最终实现一个网站的雏形。

1.3开发技术

1.3.1。

HTML技术

1。

3.1.1HTML语言

HTML语言（Hypertext Markup Language）中文通常称为超文本置标记语言，是一种用来制作超文本文档的简单标记语言,用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台（Unix、Windows）自1990年以来HTML就一直被用作WWW的信息表示语言,用于描述Homepage的格式设计和它与WWW上其他Homepage的连接信息，使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。

1。

3.1.2HTML文件结构

〈HTML>

〈Head〉〈/head>元素出现在文档的开头部分。

之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

〈title>〈title>元素定义HTML文档的标题。

〈title>与〈/title〉之间的内容将显示在浏览器窗口的标题栏。

〈/Head>

〈BODY>

HTML文件的正文//〈body〉元素表明是HTML文档的主体部分。

在〈body〉与〈/body〉之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。

〈/BODY〉

〈/HTML>

1。

3。

2。

css技术

1.3。

2.1。

css简介

级联样式表（CascadingStyleSheet）简称“CSS”，它是用来进行网页风格设计。

通过设立样式表，可以统一地控制HTML中各标签的显示属性。

级联样式表可以使人更能有效地控制网页外观。

使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力.

1。

3.2。

2。

css文件

当要在站点上所有或部份的网页上一致地应用相同样式时,可使用外部样式表。

在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性.如果人们决定更改样式,只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。

通常外部样式表以.css做为文件扩展名，例如Mystyles.css.

1.3。

3.javascript技术

1。

3.3。

1．javascript语言

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。

同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能，响应用户的各种操作。

1.3。

3。

2.JavaScript嵌入HTML文件

JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。

JavaScript语句插入HTML的方式:

（1）使用〈SCRIPT>标签将语句嵌入文档

（2）将JavaScript源文件（.js）链接到HTML文档中

JavaScript语句插入HTML的位置：

（1）body部分的JS

（2）head部分的JS：

当脚本被调用、事件被触发时执行,可保证在调用函数前，脚本已载入。

二．网站总体设计

2.1主页设计

主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合,体现学院的勃勃生气,静态主页方式介绍学院风采、优点特色,就得利用JS技术，采用交互式的动态的web画面来实现。

2。

2网站功能设计

在本网站中包括动态切换本站首页、学校概况、党建工作、院系工作、师资队伍、人才培养、科学研究、招生政策等，并进行一定的美化和整理，基本完成软件学院网站的雏形结构。

如图2.1所示：

图2。

1网站功能图

三．实现部分

3。

1网页结构

图3。

1网页结构图

3。

2网页展示

图3。

2

图3.3

图3.4

3。

3实现方案

软件学院网站共分为8个模块,我在私下里收集了关于学院的照片,可以在网页中看到这些照片，每个模块都有关于软件学院的详细内容。

软件学院网站的设计主要是能给我们留下回忆，让同学们一学院为荣，同时也让更多的人了解我们的软件学院。

四．总结

这个软件学院网站是我自己完成的，第一次做一个像样的网站一开始真不知道从何下手，我努力的查找资料,认真学习技术,最后终于完成。

真的是受益匪浅!

先是认识到了技术的重要性，如果不会这些技术就不会有我们这个网站的运行，所以，我知道了必须学好软件技术，只有技术高了才会做更多的事。

然后我感觉这次课程设计不只是局限于书本上的知识,而是与实践相结合,理论+实践使知识更好的运用到了生活中去。

通过这次的网站设计我发现我还有很多知识需要学习、我懂得太少了，水平还需要接着提高。

在设计网站的过程中我们除了很多次错误，在一次又一次的改正下,最终网站运行成功！

在这次的课程设计中不仅锻炼了我们的动手操作能力，而且培养了独立思考的能力,更重要的是我学到了很多知识，感觉很充实.

五．参考书目：

[1]舒宁,《JavaScript从入门到精通（第2版）》，清华大学出版社，2012年2月

[2]NicholasC.Zakas，《JavaScript高级程序设计》，北京，人民邮电出版社出版社,2006年11月

［3］清华大学计算机与信息管理中心，《网页设计基础》,北京邮电大学出版社，2010年2月

［4］丁一凡,《Web高级程序设计》，大连理工大学出版社，2011年2月