脚本网站课程设计.docx

1、课 程 设 计 报 告课程设计名称： 脚本程序开发技术 院 系 名 称 ： 中 印 计 算 机 软 件 学 院学 生 姓 名 ： 张景山 班 级 ： 2014 级软件技术二班 学 号 ： 201401080253 成 绩 ： 指 导 教 师 ： 陈凤萍 开 课 时 间 ： 2015-2016 学年第二 学期 目录一课程设计概述 .21.1 课程设计目的 .21.2 开发环境 .21.3 开发技术 .21.3.1.HTML 技术 .21.3.1.1HTML 语言 .21.3.1.2HTML 文件结构 .21.3.2.css 技术 .31.3.2.1.css 简介 .31.3.2.2.css 文件

2、 .31.3.3.javascript 技术 .31.3.3.1javascript 语言 .31.3.3.2.JavaScript 嵌入 HTML 文件 .3二网站总体设计 .42.1 主页设计 .42.2 网站功能设计 .4三 实 现 部 分 .53.1 网 页 结 构 .53.2 网页展示 .6四总结 .8五参考书目 .81一课程设计概述1.1 课程设计目的软件学院网站基本组成成分包括首页、学校概况、党建工作、院系工作、师资队伍、人才培养、科学研究、招生政策，采用 JavaScript 语言知识对班级网站进行设计。明年我们就面临着毕业，面临着离别，做这个网站也是为在我们的生命中留下一分美

3、好的回忆。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)中文通常称为超文本置标记语言，是一种

4、用来制作超文本文档的简单标记语言，用 HTML 编写的超文本文档称为HTML 文档，它能独立于各种操作系统平台（Unix、Windows）自 1990 年以来HTML 就一直被用作 WWW 的信息表示语言，用于描述 Homepage 的格式设计和它与 WWW 上其他 Homepage 的连接信息，使用 HTML 语言描述的文件，需要通过WWW 浏览器显示出效果。1.3.1.2HTML 文件结构2元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义 HTML 文档的标 题。与之间的内容将显示在浏览器窗口的标题栏。HTML 文件的正文/元素表

5、明是 HTML 文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成 HTML 文档的主体部分。1.3.2.css 技术1.3.2.1.css 简介级联样式表（Cascading Style Sheet）简称“CSS”，它是用来进行网页风格设计。通过设立样式表，可以统一地控制 HTML 中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。1.3.2.2.css 文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，

6、便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式3表以 .css 做为文件扩展名，例如 Mystyles.css。1.3.3.javascript 技术1.3.3.1javascript 语言JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端 Web 开发的脚本语言，常用来给 HTML 网页添加动态功能，响应用户的各种操作。1.3.3.2.JavaScript 嵌入 HTML 文件JavaScript 代码可直接嵌入 HTML 文件中，随网页一起传

7、送到客户端浏览器，然后通过浏览器来解释执行。JavaScript 语句插入 HTML 的方式：（1)使用 标签将语句嵌入文档（2)将 JavaScript 源文件(.js)链接到 HTML 文档中JavaScript 语句插入 HTML 的位置：（1)body 部分的 JS（2)head 部分的 JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入。二网站总体设计2.1 主页设计主 页 采 用 静 、 动 相 结 合 的 方 式 ， 即 静 态 的 主 画 面 和 动 态 的 图 片 相结 合 ， 体 现 学 院 的 勃 勃 生 气 ， 静 态 主 页 方 式 介 绍 学 院

8、风 采 、 优 点4特 色 ， 就 得 利 用 JS 技 术 ， 采 用 交 互 式 的 动 态 的 web 画 面 来 实 现 。2.2 网站功能设计在本网站中包括动态切换本站首页、学校概况、党建工作、院系工作、师资队伍、人才培养、科学研究、招生政策等，并进行一定的美化和整理，基本完成软件学院网站的雏形结构。如图 2.1 所示：图 2.1 网站功能图三 实 现 部 分3.1 网 页 结 构5图 3.1 网 页 结 构 图主页首页学校概况 党建、院系工作师资队伍人才培养科学研究招生政策63.2 网页展示图 3.2图 3.37图 3.43.3 实现方案软件学院网站共分为 8 个模块，我在私下里收

9、集了关于学院的照片，可以在网页中看到这些照片，每个模块都有关于软件学院的详细内容。软件学院网站的设计主要是能给我们留下回忆，让同学们一学院为荣，同时也让更多的人了解我们的软件学院。四总结这个软件学院网站是我自己完成的，第一次做一个像样的网站一开始真不知道从何下手，我努力的查找资料，认真学习技术，最后终于完成。真的是受益匪浅！先是认识到了技术的重要性，如果不会这些技术就不会有我们这个网站的运行，所以，我知道了必须学好软件技术，只有技术高了才会做更多的事。8然后我感觉这次课程设计不只是局限于书本上的知识，而是与实践相结合，理论+实践使知识更好的运用到了生活中去。通过这次的网站设计我发现我还有很多知

10、识需要学习、我懂得太少了，水平还需要接着提高。在设计网站的过程中我们除了很多次错误，在一次又一次的改正下，最终网站运行成功！在这次的课程设计中不仅锻炼了我们的动手操作能力，而且培养了独立思考的能力，更重要的是我学到了很多知识，感觉很充实。五参考书目：1舒宁，JavaScript 从入门到精通(第 2 版)，清华大学出版社，2012 年 2 月 2Nicholas C.Zakas，JavaScript 高级程序设计，北京，人民邮电出版社出版社，2006年 11 月3清华大学计算机与信息管理中心，网页设计基础，北京邮电大学出版社，2010 年2 月4丁一凡，Web 高级程序设计，大连理工大学出版社，2011 年 2 月