《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文档结构 主要内容 ◇基本结构 第二节头部<head> 主要内容 ◇页面标题<title ◇案例 ◇元信息(meta> 第三节主体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 文档结构 主要内容 ◇ 基本结构 第二节 头部<head> 主要内容 ◇ 页面标题<title> ◇ 案例 ◇ 元信息<meta> 第三节 主体 body 主要内容 ◇ body 标记 ◇ body 标记属性
◇案例：以百度首页分析网页结构，介绍哪些部分对应头部标记，哪些 部分对应主体标记。 由此嵌入介绍百度创始人李彦宏，并介绍其在北大毕业典礼上的演讲， 引导学生学习其敢于创新，勇于尝试的方法。 李彦宏。 63225 百度始人、单事长兼首席执行言 主关布法罗细约州立大学完成计算机科学预士学位，先后担任 2000年1日产左0 度。州特有'超链分析技术专利。2013年，当选第十二国全国政协委员，兼任中国民同商会司会长，第十一国中华全国工商业联 合会副主席、第/八居北京市科协主等职务。 第四节HTML基本语法 主要内容 ◇标记语法 ◇属性语法 第五节注释 主要内容 ◇<！-一注释信息-> ◇〈comment></comment>.标记 第六节TML文档编写规范 主要内容 ◇HTML页面编码基本规范 ◇HTML文档命名规则 (三)思考与实践 1、HTML文档的基本结构是什么？ 2、综合运用HTML语言，实现要求的页面效果。 四)教学方法与手段 课堂讲授、多媒体教学， 第三章格式化文本与段落 (一)目的与要求 了解格式化文字与段落的各种标记，包括标题字标记、字体标记、文本修 饰标记以及段落相关的标记：掌握对网页的文字进行布局并添加页面效果的名 种文字和段落标记方式
4 ◇ 案例：以百度首页分析网页结构，介绍哪些部分对应头部标记，哪些 部分对应主体标记。 由此嵌入介绍百度创始人李彦宏，并介绍其在北大毕业典礼上的演讲， 引导学生学习其敢于创新，勇于尝试的方法。 第四节 HTML 基本语法 主要内容 ◇ 标记语法 ◇ 属性语法 第五节 注释 主要内容 ◇ <!-- 注释信息 --> ◇ <comment> </comment>标记 第六节 HTML 文档编写规范 主要内容 ◇ HTML 页面编码基本规范 ◇ HTML 文档命名规则 （三）思考与实践 1、HTML 文档的基本结构是什么？ 2、综合运用 HTML 语言，实现要求的页面效果。 （四）教学方法与手段 课堂讲授、多媒体教学。 第三章 格式化文本与段落 （一）目的与要求 了解格式化文字与段落的各种标记，包括标题字标记、字体标记、文本修 饰标记以及段落相关的标记；掌握对网页的文字进行布局并添加页面效果的各 种文字和段落标记方式
(二)教学内容 第一节Web页面初步设计 主要内容 ◇Web页面设计原则 ◇标题字标记 ◇添加空格与特殊符号 第二节格式化文本标记 主要内容 ◇文木修饰标们 ◇计算机输出标记 ◇引用和术语标记 ◇字体font标记 第三节段落与排版标记 主要内容 ◇段落标记<p> 通过介绍华为公司介绍ICPC&华为训练营的网页： m/minisi cn/时，段落的排版标记运用 的效果，嵌入介绍大学生程序设计 竞赛，开拓学生的视野，鼓励对程序 设计感兴趣的同学参加竞赛，以赛促学。 ◇换行标记<br> ◇水平分到线标记<hr> ◇内容居中标记<center> ◇段落缩进标记<blockquote》 ◇预格式化标记<pre> 第四节Web页面设计实例 主要内容 ◇web页面设计实例 ◇Web页而设计代码 (三)思考与实践 1、简述Web页面设计原则。 2、段落与排板标记主要包活哪些： (四)教学方法与手段 课堂讲授、多媒体教学。 第四章列表 5
5 （二）教学内容 第一节 Web 页面初步设计 主要内容 ◇ Web 页面设计原则 ◇ 标题字标记 ◇ 添加空格与特殊符号 第二节 格式化文本标记 主要内容 ◇ 文本修饰标记 ◇ 计算机输出标记 ◇ 引用和术语标记 ◇ 字体 font 标记 第三节 段落与排版标记 主要内容 ◇ 段落标记<p> 通过介绍华为公司介绍 ICPC&华为训练营的网页： https://www.huawei.com/minisite/icpc/cn/时，段落的排版标记运用 的效果，嵌入介绍大学生程序设计竞赛，开拓学生的视野，鼓励对程序 设计感兴趣的同学参加竞赛，以赛促学。 ◇ 换行标记<br> ◇ 水平分割线标记<hr> ◇ 内容居中标记<center> ◇ 段落缩进标记<blockquote> ◇ 预格式化标记<pre> 第四节 web 页面设计实例 主要内容 ◇ web 页面设计实例 ◇ web 页面设计代码 （三）思考与实践 1、简述 Web 页面设计原则。 2、段落与排版标记主要包括哪些？ （四）教学方法与手段 课堂讲授、多媒体教学。 第四章 列表