《Web开发技术》课程教学大纲 一、课程基本信息 课程代码： 16078803 课程名称：web开发技术 英文名称：Web Developing Technology 课程类别： 专业课 学时48 学 分：3 适用对象：针对大数据管理与应用专业本科生 考核方式： 课程论文（设计） 先修课程：C语言程序设计，信息系统开发方法与工具 二、课程简介 中文简介 本课程是面向大数据管理与应用专业的专业选修课。大数据管理与应用专业具有 经济管理与信息技术学科交叉的特点，本课程为专业学习的信息技术知识结构奠定基 础。本课程主要内容包括HTML,CSS及JavaScript以及衍生出来的各种技术和框架 从前端开发技术的角度来构建信息系统以及开发Wb应用程序 英文简介 The course is a professional lesson of the department of information management and information systems.The department of information management and information systems is the characteristic of mixing economical management and information technology.The study of the course is the foundation of professional knowledge of information technology.It includes the Hypertext Markup Language (HTML),Cascading Style Sheet (CSS)and JavaScript as well as related technique and frameworks.From the front-end point of view,the goal is to develop the information system and the programs in Web applications. 三、课程性质与教学目的 本课程是大数据管理与应用专业的专业选修课。通过本课程的学习和实验，可以 达到以下目标：①培养合格的社会主义事业接班人，引用张载的“横渠四句”，引导 学生形成正确的人生观、价值观。②拓宽学生眼界，使学生认识Wb开发技术的前 沿理论和先进应用，同时认清互联网技术的发展趋势。③向学生传授b开发技术的 专业基础知识，使学生初步掌握Web基础概念、工作原理，熟悉Web相关技术知识。 ④Web前端开发技术，是综合运用HTML代码、CSS和JavaScript语言实现动态功能 1
1 《 Web 开发技术》课程教学大纲 一、课程基本信息 课程代码： 16078803 课程名称： Web 开发技术 英文名称： Web Developing Technology 课程类别： 专业课 学 时： 48 学 分： 3 适用对象: 针对大数据管理与应用专业本科生 考核方式： 课程论文（设计） 先修课程： C 语言程序设计，信息系统开发方法与工具 二、课程简介 中文简介 本课程是面向大数据管理与应用专业的专业选修课。大数据管理与应用专业具有 经济管理与信息技术学科交叉的特点，本课程为专业学习的信息技术知识结构奠定基 础。本课程主要内容包括 HTML，CSS 及 JavaScript 以及衍生出来的各种技术和框架, 从前端开发技术的角度来构建信息系统以及开发 Web 应用程序. 英文简介 The course is a professional lesson of the department of information management and information systems. The department of information management and information systems is the characteristic of mixing economical management and information technology. The study of the course is the foundation of professional knowledge of information technology. It includes the Hypertext Markup Language (HTML), Cascading Style Sheet (CSS) and JavaScript as well as related technique and frameworks. From the front-end point of view, the goal is to develop the information system and the programs in Web applications. 三、课程性质与教学目的 本课程是大数据管理与应用专业的专业选修课。通过本课程的学习和实验，可以 达到以下目标：①培养合格的社会主义事业接班人，引用张载的“横渠四句”，引导 学生形成正确的人生观、价值观。②拓宽学生眼界，使学生认识 Web 开发技术的前 沿理论和先进应用，同时认清互联网技术的发展趋势。③向学生传授 Web 开发技术的 专业基础知识，使学生初步掌握 Web 基础概念、工作原理，熟悉 Web 相关技术知识。 ④Web 前端开发技术，是综合运用 HTML 代码、CSS 和 JavaScript 语言实现动态功能
的技术，本课程培养学生掌握Wb应用程序开发的基础知识与技术，使学生能从前端 开发技术的角度来构建系统以及开发Wb应用程序。 四、教学内容及要求 第一章Tb开发技术综述 (一)日的与要求 了解Web起源、Web特点与工作原理、Web前端开发技术、开发工具及HT 基础语法和立档结构等知识 通过本章节的学习，了解互联网、Wb开发技术对世界、企业的作用及全 球化过程中我国快速发展的伟大成就。解释为什么用b开发技术对企业带来如 此重要的影响和变化。 (二)教学内容 第一节Web技术概述 主要内容 ◇Web起源 ◇Web的特点 ◇Web工作原理 第二节Web网页设计相关概念 主要内容 ◇统一资源定位符 ◇了解Wb前端开发工程师职业需求 第三节Web前端开发技术 主要内容 ◇HTL超文本标记语言的发展历史 ◇CSS发展历史 ◇JavaScript案例 第四节 主要内容 ◇HTML DOM ◇BOW 第五节常用的Web前端开发工具 主要内容 ◇安装准备工作 ◇常用的前端开发工具
2 的技术，本课程培养学生掌握 Web 应用程序开发的基础知识与技术，使学生能从前端 开发技术的角度来构建系统以及开发 Web 应用程序。 四、教学内容及要求 第一章 Web 开发技术综述 （一）目的与要求 了解 Web 起源、Web 特点与工作原理、Web 前端开发技术、开发工具及 HTML 基础语法和文档结构等知识 通过本章节的学习，了解互联网、Web 开发技术对世界、企业的作用及全 球化过程中我国快速发展的伟大成就。解释为什么 Web 开发技术对企业带来如 此重要的影响和变化。 （二）教学内容 第一节 Web 技术概述 主要内容 ◇ Web 起源 ◇ Web 的特点 ◇ Web 工作原理 第二节 Web 网页设计相关概念 主要内容 ◇ 统一资源定位符 ◇了解 Web 前端开发工程师职业需求 第三节 Web 前端开发技术 主要内容 ◇ HTML 超文本标记语言的发展历史 ◇ CSS 发展历史 ◇JavaScript 案例 第四节 主要内容 ◇ HTML DOM ◇ BOM 第五节 常用的 Web 前端开发工具 主要内容 ◇ 安装准备工作 ◇ 常用的前端开发工具
◇Web应用实例 新建一个Web项目，在该项目的根目录下创index..htnl,在index.htnl 页面中输出“金山银山，不如绿水青山，而且绿水青山就是金山银山。”文字。引 入爱护环境主题。关于自然资源的传统认识，打破了发展与保护对立的束缚， 树立了保护自然环境就是保护人类、建立生态文明就是造福人类的新理念。 第六节浏监器工具 主要内容 Microsoft Internet Explorer ◇Mozilla Firefox ◇Google Chrome ◇Oprea (三)思考与实践 1、Web的体系结构是什么样的？请简述它的工作过程。 2、安装Web运行环境需要准备哪些软件？ (四)教学方法与手段 课堂讲授、多媒体教学。 第二章HTL基础 一)目的与要求 了解HTML文档的基本结构，理解标记类型、标记语法；学会body标记的 属性的设置方法：学会给网页添加注释：理解eta元信息的作用；了解TM 文档类型。 (二)教学内容 第一节HTML文档结构 主要内容 ◇基本结构 第二节头部 主要内容 ◇页面标题 第三节主体body 主要内容 ◇body标记 ◇body标记属性
3 ◇ Web 应用实例 新建一个 Web 项目，在该项目的根目录下创 index.html，在 index.html 页面中输出“金山银山,不如绿水青山,而且绿水青山就是金山银山。”文字。引 入爱护环境主题。关于自然资源的传统认识，打破了发展与保护对立的束缚， 树立了保护自然环境就是保护人类、建立生态文明就是造福人类的新理念。 第六节 浏览器工具 主要内容 ◇ Microsoft Internet Explorer ◇ Mozilla Firefox ◇ Google Chrome ◇ Oprea （三）思考与实践 1、Web 的体系结构是什么样的？请简述它的工作过程。 2、安装 Web 运行环境需要准备哪些软件？ （四）教学方法与手段 课堂讲授、多媒体教学。 第二章 HTML 基础 （一）目的与要求 了解 HTML 文档的基本结构，理解标记类型、标记语法；学会 body 标记的 属性的设置方法；学会给网页添加注释；理解 meta 元信息的作用；了解 HTML 文档类型。 （二）教学内容 第一节 HTML 文档结构 主要内容 ◇ 基本结构 第二节 头部 主要内容 ◇ 页面标题 ◇ 案例 ◇ 元信息 第三节 主体 body 主要内容 ◇ body 标记 ◇ body 标记属性
◇案例：以百度首页分析网页结构，介绍哪些部分对应头部标记，哪些 部分对应主体标记。 由此嵌入介绍百度创始人李彦宏，并介绍其在北大毕业典礼上的演讲， 引导学生学习其敢于创新，勇于尝试的方法。 李彦宏。 63225 百度始人、单事长兼首席执行言 主关布法罗细约州立大学完成计算机科学预士学位，先后担任 2000年1日产左0 度。州特有'超链分析技术专利。2013年，当选第十二国全国政协委员，兼任中国民同商会司会长，第十一国中华全国工商业联 合会副主席、第/八居北京市科协主等职务。 第四节HTML基本语法 主要内容 ◇标记语法 ◇属性语法 第五节注释 主要内容 ◇ ◇〈comment>.标记 第六节TML文档编写规范 主要内容 ◇HTML页面编码基本规范 ◇HTML文档命名规则 (三)思考与实践 1、HTML文档的基本结构是什么？ 2、综合运用HTML语言，实现要求的页面效果。 四)教学方法与手段 课堂讲授、多媒体教学， 第三章格式化文本与段落 (一)目的与要求 了解格式化文字与段落的各种标记，包括标题字标记、字体标记、文本修 饰标记以及段落相关的标记：掌握对网页的文字进行布局并添加页面效果的名 种文字和段落标记方式
4 ◇ 案例：以百度首页分析网页结构，介绍哪些部分对应头部标记，哪些 部分对应主体标记。 由此嵌入介绍百度创始人李彦宏，并介绍其在北大毕业典礼上的演讲， 引导学生学习其敢于创新，勇于尝试的方法。 第四节 HTML 基本语法 主要内容 ◇ 标记语法 ◇ 属性语法 第五节 注释 主要内容 ◇ ◇ 标记 第六节 HTML 文档编写规范 主要内容 ◇ HTML 页面编码基本规范 ◇ HTML 文档命名规则 （三）思考与实践 1、HTML 文档的基本结构是什么？ 2、综合运用 HTML 语言，实现要求的页面效果。 （四）教学方法与手段 课堂讲授、多媒体教学。 第三章 格式化文本与段落 （一）目的与要求 了解格式化文字与段落的各种标记，包括标题字标记、字体标记、文本修 饰标记以及段落相关的标记；掌握对网页的文字进行布局并添加页面效果的各 种文字和段落标记方式
(二)教学内容 第一节Web页面初步设计 主要内容 ◇Web页面设计原则 ◇标题字标记 ◇添加空格与特殊符号 第二节格式化文本标记 主要内容 ◇文木修饰标们 ◇计算机输出标记 ◇引用和术语标记 ◇字体font标记 第三节段落与排版标记 主要内容 ◇段落标记 通过介绍华为公司介绍ICPC&华为训练营的网页： m/minisi cn/时，段落的排版标记运用 的效果，嵌入介绍大学生程序设计 竞赛，开拓学生的视野，鼓励对程序 设计感兴趣的同学参加竞赛，以赛促学。 ◇换行标记 ◇水平分到线标记 ◇内容居中标记 ◇段落缩进标记 第四节Web页面设计实例 主要内容 ◇web页面设计实例 ◇Web页而设计代码 (三)思考与实践 1、简述Web页面设计原则。 2、段落与排板标记主要包活哪些： (四)教学方法与手段 课堂讲授、多媒体教学。 第四章列表 5
5 （二）教学内容 第一节 Web 页面初步设计 主要内容 ◇ Web 页面设计原则 ◇ 标题字标记 ◇ 添加空格与特殊符号 第二节 格式化文本标记 主要内容 ◇ 文本修饰标记 ◇ 计算机输出标记 ◇ 引用和术语标记 ◇ 字体 font 标记 第三节 段落与排版标记 主要内容 ◇ 段落标记 通过介绍华为公司介绍 ICPC&华为训练营的网页： https://www.huawei.com/minisite/icpc/cn/时，段落的排版标记运用 的效果，嵌入介绍大学生程序设计竞赛，开拓学生的视野，鼓励对程序 设计感兴趣的同学参加竞赛，以赛促学。 ◇ 换行标记 ◇ 水平分割线标记 ◇ 内容居中标记 ◇ 段落缩进标记 ◇ 预格式化标记 第四节 web 页面设计实例 主要内容 ◇ web 页面设计实例 ◇ web 页面设计代码 （三）思考与实践 1、简述 Web 页面设计原则。 2、段落与排版标记主要包括哪些？ （四）教学方法与手段 课堂讲授、多媒体教学。 第四章 列表
(一)目的与要求 了解列表的类型：掌握无序列表、有序列表、定义列表标记语法及属性语 法：了解菜单列表、目录列表标记语法：学会使用无序、有序及定义列表设计 Web网页：学会使用嵌套列表设计小型网站首页。 (二)教学内容 第一节列表简介 主要内容 ◇TL中列表一共有5种，分别是无序列表、有序列表、定义列表、菜 单列表和目录列表。 第二节无序列表 主要内容 ◇定义与语法 ◇无序列表案例 第三节有序列表 主要内容 ◇定义与语法 ◇有序列表案例 第四节列表嵌套 主要内容 ◇定义与语法 ◇列表嵌套案例 第五节定义列表 主要内容 ◇定义与语法 ◇定义列表案例 第六节综合案例 主要内容 ◇案例：综合运用有序列表、无序类别以及列表嵌套的方式，思考列出 未来十年对自己最重要的45件事或者梦想（用有序列表），然后用列表 嵌套的方式，针对每件事列出如何实现这些具体方式（用无序列表）。从 而引导学生思考对未来人生的定位和实现自我价值的意义。 ◇代码分析 (三)思考与实践 1、简述5种类型HTM列表。 2、列表可以嵌套，但不能交叉嵌套，为什么？ 6
6 （一）目的与要求 了解列表的类型；掌握无序列表、有序列表、定义列表标记语法及属性语 法；了解菜单列表、目录列表标记语法；学会使用无序、有序及定义列表设计 Web 网页；学会使用嵌套列表设计小型网站首页。 （二）教学内容 第一节 列表简介 主要内容 ◇ HTML 中列表一共有 5 种，分别是无序列表、有序列表、定义列表、菜 单列表和目录列表。 第二节 无序列表 主要内容 ◇ 定义与语法 ◇ 无序列表案例 第三节 有序列表 主要内容 ◇ 定义与语法 ◇ 有序列表案例 第四节 列表嵌套 主要内容 ◇ 定义与语法 ◇ 列表嵌套案例 第五节 定义列表 主要内容 ◇ 定义与语法 ◇ 定义列表案例 第六节 综合案例 主要内容 ◇ 案例：综合运用有序列表、无序类别以及列表嵌套的方式，思考列出 未来十年对自己最重要的 4-5 件事或者梦想（用有序列表），然后用列表 嵌套的方式，针对每件事列出如何实现这些具体方式（用无序列表）。从 而引导学生思考对未来人生的定位和实现自我价值的意义。 ◇ 代码分析 （三）思考与实践 1、简述 5 种类型 HTML 列表。 2、列表可以嵌套，但不能交叉嵌套，为什么？
3、思考列表对网页内容的呈现的作用是什么？ (四)数学方法与手段 课堂讲授、多媒体教学。 第五章超链接与浮动框架 一)日的与要求 了解掌握超链接的基本标记语法和属性语法：理解超链接分类、路径、书 签等概念：学会使用超链接实现文件下载、FTP下载、电子邮件链接、图像链 接：学会使用超链接制作书签：学会使用浮动框架实现内嵌页面的显示。 (二)教学内容 第一节超链接概述 主要内容 ◇定义：超链接是指从一个网页指向一个目标的连接关系。在百度首页 中搜索“王小云教授”出现各种超链接，帮助理解超链接的作用和原理。基于 超链 接的 个绍王 授先后两次破解美国顶级密码MD5和SH-1,创造了 密码学领域的诸多优秀成果 第二节超链接语法、路径及分类 主要内容 ◇超链接a(Anchor错)标记语法 ◇超链接路径 ◇超链接分类 第三节超链接的应用 主要内容 ◇创建HTTP文件下载超链接 ◇创建TP站点访问超链接 ◇创建图像链接 ◇创建电子邮件超链接 第四节创建页面书签链接 主要内容 ◇书签定义步骤 ◇创建书签链接页面效果 ◇页面书签链接案例 第五节浮动框架 主要内容 ◇浮动框架标记
7 3、思考列表对网页内容的呈现的作用是什么？ （四）教学方法与手段 课堂讲授、多媒体教学。 第五章 超链接与浮动框架 （一）目的与要求 了解掌握超链接的基本标记语法和属性语法；理解超链接分类、路径、书 签等概念；学会使用超链接实现文件下载、FTP 下载、电子邮件链接、图像链 接；学会使用超链接制作书签；学会使用浮动框架实现内嵌页面的显示。 （二）教学内容 第一节 超链接概述 主要内容 ◇ 定义：超链接是指从一个网页指向一个目标的连接关系。在百度首页 中搜索“王小云教授”出现各种超链接，帮助理解超链接的作用和原理。基于 超链接的引入介绍王小云教授先后两次破解美国顶级密码 MD5 和 SHA-1，创造了 密码学领域的诸多优秀成果。 第二节 超链接语法、路径及分类 主要内容 ◇ 超链接 a (Anchor 锚)标记语法 ◇ 超链接路径 ◇ 超链接分类 第三节 超链接的应用 主要内容 ◇ 创建 HTTP 文件下载超链接 ◇ 创建 FTP 站点访问超链接 ◇ 创建图像链接 ◇ 创建电子邮件超链接 第四节 创建页面书签链接 主要内容 ◇ 书签定义步骤 ◇ 创建书签链接页面效果 ◇ 页面书签链接案例 第五节 浮动框架 主要内容 ◇ 浮动框架标记
◇浮动框架应用 ◇浮动框架案例效果页面 (三)思考与实践 1、超链接的类型有哪些？思考每种类型的适用场合。 2、超链接的不同链接对象的语法和使用方法是什么？ (四)教学方法与手段 课堂讲授、多媒体教学。 第六章图像与多媒体文件 (一)目的与要求 掌握图像img标记语法及属性设置方法：学会设置图像热区链接： 掌握滚动文字marquee标记语法及属性设置方法：掌握背景音乐bgsound 标记语法及属性设置方法：掌握嵌入多媒体文件ebed标记语法及属性 设置方法：学会采用超链接插入动画、音频和视频类等多媒体文件。 (二)教学内容 第一节图像 主要内容 ◇插入图像 ◇设胃图像的替代文字 ◇设置图像的宽度和高度 ◇设置图像的边框 ◇设置图像对齐方式及间距 ◇设置图像热区链接 第二节滚动文字 主要内容 ◇添加滚动文字 ◇设置滚动文字背景颜色与滚动循环 ◇设置滚动方向与滚动方式 ◇设置滚动速度与滚动时证 ◇设置滚动范围与滚动空白空间 第三节音频、视频及Flash文件 主要内容 ◇基本语法 ◇案例
8 ◇ 浮动框架应用 ◇ 浮动框架案例效果页面 （三）思考与实践 1、超链接的类型有哪些？思考每种类型的适用场合。 2、超链接的不同链接对象的语法和使用方法是什么？ （四）教学方法与手段 课堂讲授、多媒体教学。 第六章 图像与多媒体文件 (一) 目的与要求 掌握图像 img 标记语法及属性设置方法；学会设置图像热区链接； 掌握滚动文字 marquee 标记语法及属性设置方法；掌握背景音乐 bgsound 标记语法及属性设置方法；掌握嵌入多媒体文件 embed 标记语法及属性 设置方法；学会采用超链接插入动画、音频和视频类等多媒体文件。。 (二) 教学内容 第一节 图像 主要内容 ◇ 插入图像 ◇ 设置图像的替代文字 ◇ 设置图像的宽度和高度 ◇ 设置图像的边框 ◇ 设置图像对齐方式及间距 ◇ 设置图像热区链接 第二节 滚动文字 主要内容 ◇ 添加滚动文字 ◇ 设置滚动文字背景颜色与滚动循环 ◇ 设置滚动方向与滚动方式 ◇ 设置滚动速度与滚动时延 ◇ 设置滚动范围与滚动空白空间 第三节 音频、视频及 Flash 文件 主要内容 ◇ 基本语法 ◇ 案例
第四节综合实例 主要内容 ◇实例代码分析 ◇页面效果 (三)思考与实践 1、思考如何运用插入图像标记对所开发的网站进行重新布局、页面美化，改 善用户体验？ 2、思考如何运用多媒体文件对所开发的网站进行重新布局、页面美化，改善 用户体验？ (四)教学方法与手段 课堂讲授、多媒体教学。 第七章CSS基础 (一）目的与要求 理解CSS的概念、特点：掌握CSS基本语法、选择器分类与声明的结构： 掌握CSS的定义及引用的方式：理解CSS继承与层叠的含义。 (二)教学内容 第一节CSS概念 主要内容 ◇CSS的基本概 ◇传统HTML的缺点 ◇CSS的特点 ◇CSS的优势 ◇CSS编辑方法 第二节使用CSS控制Web页面 主要内容 ◇CSS基本语法 ◇CSS选择器类型 ◇CSS选择器声明 ◇CSS定义与引用 第三节CSS继承与层叠 主要内容 ◇样式表的继承规则 ◇样式的优先级 第四节综合实例
9 第四节 综合实例 主要内容 ◇ 实例代码分析 ◇ 页面效果 (三) 思考与实践 1、思考如何运用插入图像标记对所开发的网站进行重新布局、页面美化，改 善用户体验？ 2、思考如何运用多媒体文件对所开发的网站进行重新布局、页面美化，改善 用户体验？ (四) 教学方法与手段 课堂讲授、多媒体教学。 第七章 CSS 基础 (一) 目的与要求 理解 CSS 的概念、特点；掌握 CSS 基本语法、选择器分类与声明的结构； 掌握 CSS 的定义及引用的方式；理解 CSS 继承与层叠的含义。 (二) 教学内容 第一节 CSS 概念 主要内容 ◇ CSS 的基本概念 ◇ 传统 HTML 的缺点 ◇ CSS 的特点 ◇ CSS 的优势 ◇ CSS 编辑方法 第二节 使用 CSS 控制 Web 页面 主要内容 ◇ CSS 基本语法 ◇ CSS 选择器类型 ◇ CSS 选择器声明 ◇ CSS 定义与引用 第三节 CSS 继承与层叠 主要内容 ◇ 样式表的继承规则 ◇ 样式的优先级 第四节 综合实例
主要内容 ◇代码 ◇演示效果 (三)思考与实践 1、CSS规则由哪些部分组成？ 2、id样式和class样式的区别是什么？ (四)教学方法与手段 课堂讲授、多媒体教学 第八章DIV与SPAN (一)目的与要求 掌握DIV标记的基本用法、常用属性：理解DIV嵌套与层叠的含义：掌 握SPAN标记的语法，灵活使用SPAN标记：掌握DIV与SPAN标记在使用 上的差异：学会使用DIV+CSS进行和简易页面布局。 (仁)教学内容 第一节DIV图层 主要内容 ◇DIV(division/Section)定义 ◇DIV应用 第二节图层嵌套与层叠 主要内容 ◇图层嵌套 ◇图层层叠 第三节div标记与span标记 主要内容 ◇sDan标记 ◇Div与span标记使用区别 第四节综合实例 主要内容 ◇代码 ◇演示效果 (三)思考与实践 1、简述DIV及SPAN标记的基本语法以及两个标记在使用时的区别？ (四)教学方法与手段 10
10 主要内容 ◇ 代码 ◇ 演示效果 (三) 思考与实践 1、CSS 规则由哪些部分组成？ 2、id 样式和 class 样式的区别是什么？ (四) 教学方法与手段 课堂讲授、多媒体教学。 第八章 DIV 与 SPAN (一) 目的与要求 掌握 DIV 标记的基本用法、常用属性；理解 DIV 嵌套与层叠的含义；掌 握 SPAN 标记的语法，灵活使用 SPAN 标记；掌握 DIV 与 SPAN 标记在使用 上的差异；学会使用 DIV+CSS 进行和简易页面布局。 (二) 教学内容 第一节 DIV 图层 主要内容 ◇ DIV(division/Section)定义 ◇ DIV 应用 第二节 图层嵌套与层叠 主要内容 ◇ 图层嵌套 ◇ 图层层叠 第三节 div 标记与 span 标记 主要内容 ◇ span 标记 ◇ Div 与 span 标记使用区别 第四节 综合实例 主要内容 ◇ 代码 ◇ 演示效果 (三) 思考与实践 1、简述 DIV 及 SPAN 标记的基本语法以及两个标记在使用时的区别？ (四) 教学方法与手段