JavaScript基础课程设计

脚本开发技术

课程设计报告

课程设计名称：中印计算机软件学院网站系部名称：中印计算机软件院

学生姓名：

班级：

学号：

成绩：

指导教师：李玉杰

开课时间：2017-2018学年第一学期

潍坊科技学院

目录

一概述 (4)

1.1课程设计的目的 (4)

2.1课程设计的开发环境 (4)

3.1课程设计的开发技术 (5)

二网站总体方案设计 (6)

2.1整体设计思路 (6)

2.2框架的整体思路 (6)

2.3主要特点 (6)

三实现部分 (7)

3.1 网页结构 (7)

3.2 网页的展览： (7)

3.3网页行为的实现： (8)

摘要

本次网页设计实践的主题是“学院展览网站”，在网站设计过程中，通过通过DIV+CSS布局，同时引入Bootstrap的栅格布局对页面进行调整。在页面中添加“分时问候”、“图片轮播”、“二级菜单”、“广告浮动”、“无缝滚动”等JavaScript特效。通过对该网站的编写与制作对JavaScript这门语言有了新的学习和理解。

一概述

1.1课程设计目的

大家都知道学校的主页是学校在Internet上展示形象的门户，是学校开展电子推广的基地，是学校在网上的"家"，设计制作一个优秀的网站是建设学校成功迈向互联网的重要步骤。

在当今互联网时代，一个学校没有自己的网站就像一个人没有住址，一个商店没有门脸。随着经济全球化和电子商务经济的到来，学校如果还固守于传统模式则必定不能再适应经济全球化的趋势，学校网站优化是一个不可回避的现实。

一、竞争的需要。国际互联网的用户在迅猛地增长。这增长速度是全世界范围的普遍现象。在美国，欧洲，港澳及其它许多国家,网站和电子信箱系统已经成为世界各国各所不可缺少的重要组成部分。

二、网站建设可以使学校在网上宣传更加生动形象。尽管你的学校非常好,但人们总是无法看到它的样子，产品画册虽然非常好，但它是静止的也没有人能想象到学校最真实的状态是什么样子的。如果以上因素对学生的影响真的非常重要的话,那么学校就应该利用互联网来介绍学校了，因为WWW技术可以很简便地为学校网站介绍加入声音、图形、动画甚至影像，这些不断涌现出来的多媒体技术已让网络世界变得丰富多彩。

三、可以迅速树立学校品牌形象。今天，国际互联网络已成为未来生活的代名词，要显示学校的实力，提升学校形象，没有什么比在学校信封、学校宣传单及各种公众能看得到的东西印上自己公司独有的网络地址和专用的电子邮件地址更有说服力了。这样学校便加简单的为自己做好了宣传。

2.1课程设计的开发环境

网站开发使用的环境是sublimetext3。该工具对于javascript的编写具有诸多的优点。

可以快速注释

在编写网站的过程中，代码的注释有利于结构的清晰、思路的流畅，同时对于日后代码的维护和后期的修改都有着重要的作用。

自动代码补全

在编写一个学校前台官网，其中代码量较多，外加上对知识点的不熟悉。自动代码补全功能对于代码的编写作用显著。

能够开始查找

在整体过程中，查找的功能并不是很特别，但是这个功能非常高效，能很快速的定位到关键的位置，方便其他代码的编写。

缩略图定位

这个功能是该工具特有的，在左侧编写js等代码，在右侧可以形成左侧的缩量图效果。这个功能能对代码有一个整体的观念，方便对项目工程的整体把握。

快速打开文件

各种快捷键的使用常常能有助于我们对功能的编写，同时，sublimetext3能够右键打开文件夹能够快速定位到文件所在的文件夹。

整个工程管理

在代码的左侧我们能够清晰的看到所有的资源文件以及需要的代码文件，只需单击即可管理所有的项目文件，这对我们项目的管理是有利的。

3.1课程设计的开发技术

此次使用的开发技术为基础的html、css、javascript、jquery、bootstrap等相关基础。

HTML,超文本标记语言，标准通过标记语言下的一个应用，负责网站的整体结构。通过标签来展现不同的内容个容器。

CSS，层叠样式表，通过它可以为页面的标签进行美化和修饰，增强网站的整体效果和页面的优化。

Javascript，直译式脚本语言，给HTML网页增加动态功能。为网站增添动态交互能力和美观的特效。针对网站所使用的动态效果都是依靠js来进行实现的。

Jquery，一段javascript代码块，对javascript的常用方法进行封装和简化，方便程序员编写和开发。

Bootstrap，成熟的前端常用框架，针对前端常规能力和控件进行优化和补充，便于开发。

二网站总体方案设计

2.1整体设计思路

通过对原有网站和其他高校的研究，最新觉得使用“一栏式”开发，在一栏的基本上再通过div进行不同的细化和补充。

就首页而言，主要包括头部、标题栏、轮转大图、一列的学校相关新闻、专题网站和尾部构成。首先对网页的整体设计有个全面的把握，然后在事无巨细的增添上去。

网站总体包括网站首页、学校概况、教学工作、学校工作、教研科研、党团建设、就业工作、校企合作等八大部分。在此主要展示前五个部分。

网页首页：主要展现的学校的整体风貌，对学校最新新闻和相关重要信息有了初步的介绍。

学校概况：对学校进行相关的概况，其中包括学院简介、机构设置和现任领导进行相关说明。

教学工作：主要通过表格和分页组件对学校相关的教学工作进行浏览和说明。

学校工作：使用列表的形式列举学校的重要工作，包括学校举办的相关活动。

教研科研：这个栏目使用表单对教研科研调查表进行登录，然后进行相关

信息的调查。

2.2框架的整体思路

1.首先进行相关内容的设计，构建草图。

2.进行编码，构建相关网站内容原型，精准计算相关大小。

3.搜集相关网站内容，充实网站。

4.将内容使用所学的javascript知识合理的规划在网站中。

5.测试代码，完成相关文档的编写。

2.3主要特点

网站总体设计方案明确，通过总体设计进行开发和编写。

网站功能分工合理，通过二级菜单进行详细说明。

网站色彩搭配适中，适合学校官网的使用。