湖南人文科技学院：《Web前端开发》课程思政教学资源（授课教案）网站开发基础（主讲教师：刘鹃梅）

湖南人文科技学院 教案 教学学院 信息学院 课程名称 Web前端开发 专业、年级、班级 计科19级1,2班 主讲教师 刘鹃梅 多 称 讲师 2020~2021学年第二学期

湖南人文科技学院 教 案 教 学 学 院 信息学院 课 程 名 称 Web 前端开发 专业、年级、班级 计科 19 级 1，2 班 主 讲 教 师 刘鹃梅 职 称 讲师 20 20 ~20 21 学年第 二 学期

教案编写说明 教案是教师为顺利而有效地开展教学活动而撰写的一种实用性教学文书。 任课教师应根据专业培养方案，紧扣教学大纲，认真分析教学内容，切合学生实 际，提前编写设计好每门课程每个章、节或主题的全部教学活动。教案编写说明如下： 1、编号：按施教的顺序标明序号（每堂课一个序号）。 2、教学时数：指完成一个授课题目所用教学时间。理论课通常以学时数为单位 (一般2学时)，而实践课则以学时数，天数或周数为单位。 3、教学课型表示所授课程的类型，请在理论课、讨论课、实验课、习题课、实 践课及其它栏内选择打“√”。 4、题目：标明章、节或主题。 5、教学目的要求：含素质、知识与能力目标。 6、教学场所表示本课程在哪些地方开展教学，请在对应栏目后面打“√”。 7、教学重点、难点。 8、课程思政的开展（可选） 9、教学方式和手段。拟定的教学方法和手段要能有效地调动学生的学习积极性， 促进学生的积极思考，激发学生的潜能。 10、教学设计与过程（含授课思路、过程设计、讲解要点及各部分具体内容、时 间分配、启发思维、互动教学、课堂总结等)。将授课的内容按逻辑层次，有序设计 编排。本部分不同专业的授课可有自己的特色。 11、讨论、思考题和作业。 12、板书（可选）。 13、参考资料：列出参考书籍、有关资料 14、课后反思、总结（授课后再写）

教案编写说明 教案是教师为顺利而有效地开展教学活动而撰写的一种实用性教学文书。 任课教师应根据专业培养方案，紧扣教学大纲，认真分析教学内容，切合学生实 际，提前编写设计好每门课程每个章、节或主题的全部教学活动。教案编写说明如下： 1、编号：按施教的顺序标明序号（每堂课一个序号）。 2、教学时数：指完成一个授课题目所用教学时间。理论课通常以学时数为单位 （一般 2 学时），而实践课则以学时数，天数或周数为单位。 3、教学课型表示所授课程的类型，请在理论课、讨论课、实验课、习题课、实 践课及其它栏内选择打“√”。 4、题目：标明章、节或主题。 5、教学目的要求：含素质、知识与能力目标。 6、教学场所表示本课程在哪些地方开展教学，请在对应栏目后面打“√”。 7、教学重点、难点。 8、课程思政的开展（可选） 9、教学方式和手段。拟定的教学方法和手段要能有效地调动学生的学习积极性， 促进学生的积极思考，激发学生的潜能。 10、教学设计与过程（含授课思路、过程设计、讲解要点及各部分具体内容、时 间分配、启发思维、互动教学、课堂总结等）。将授课的内容按逻辑层次，有序设计 编排。本部分不同专业的授课可有自己的特色。 11、讨论、思考题和作业。 12、板书（可选）。 13、参考资料：列出参考书籍、有关资料。 14、课后反思、总结（授课后再写）

《Web前端开发》 课程教学信息 课程编号 xx19408230 课程性质 专业必修 先修课程 计算机基础 后续课程 Java Web 主讲教师 刘鹃梅 职称 讲师 专业 计算机科学与技术 年级、班级 19级1,2班 考核方式 教学质量过程考核，项目目标考核 考核时间 2021年2月一6月 使用教材 聂常红，《eb前端开发技 -HTML CSS、JavaScript(第3版)》（第2版）. 人民邮电出版社，2020年。 教学学时 总学时：32（理论课学时：20实践课学时：12周学时：2） 授课时间 与地点 《Wb前端开发》是一门综合性和实践性都非常强的课程，内容包括 ML、CSS、JavaScrip等Web前端开发技术。HTML是网页设计的基本语 言，CSS用于实现网页元素的样式和布局，JavaScript是目前Web应用 程序开发者使用最为广泛的客户端脚本编程语言，用于实现页面的动态 效果。 课程的任务是要求理论和实际相结合，熟练掌握网页开发工具的同 时能综合运用Wb前端开发技术设计一个完整的网站。通过本课程的学 习，学生能够了解TML、CSS及JavaScript语言的发展历史及未来方向， 熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门 课程的任 务和目的 户、电商类网站，提高学生的软件使用技巧和实际应用能力，为今后的 专业学习或深入的设计打下基础。 课程专业目标：结合本专业“厚基础、强能力”的应用型人才培养 定位目标，培养学生以实现能够运用Wb前端开发相应技术，自主设 一个完整且较高质量的交互式前端网站知识目标的同时，以培养实现学 生的解决问题的实际应用能力、综合工程实践能力及创新能力等的能力 目标。 课程育人目标：为落实“既教书又育人”根本任务，在培养学生以 实现专业课程知识目标和能力目标的同时，在社会贵任感、团队协作精 神、专业荣誉感、正确人生观及价值、爱国主义情怀等方面得到一定的 拉差而空现理积查人的日标

《Web 前端开发》 课程教学信息 课程编号 xx19408230 课程性质 专业必修 先修课程 计算机基础 后续课程 Java Web 主讲教师 刘鹃梅 职 称 讲师 专 业 计算机科学与技术 年级、班级 19 级 1,2 班 考核方式 教学质量过程考核，项目目标考核 考核时间 2021 年 2 月—6 月 使用教材 聂常红,《Web 前端开发技术——HTML、CSS、JavaScript（第 3 版）》(第 2 版). 人民邮电出版社，2020 年. 教学学时 总学时：32（理论课学时：20 实践课学时：12 周学时：2） 授课时间 与地点 课程的任 务和目的 《Web 前端开发》是一门综合性和实践性都非常强的课程，内容包括 HTML、CSS、JavaScrip 等 Web 前端开发技术。HTML 是网页设计的基本语 言，CSS 用于实现网页元素的样式和布局，JavaScript 是目前 Web 应用 程序开发者使用最为广泛的客户端脚本编程语言，用于实现页面的动态 效果。 课程的任务是要求理论和实际相结合，熟练掌握网页开发工具的同 时能综合运用 Web 前端开发技术设计一个完整的网站。通过本课程的学 习，学生能够了解 HTML、CSS 及 JavaScript 语言的发展历史及未来方向， 熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门 户、电商类网站，提高学生的软件使用技巧和实际应用能力，为今后的 专业学习或深入的设计打下基础。 课程专业目标：结合本专业“厚基础、强能力”的应用型人才培养 定位目标，培养学生以实现能够运用 Web 前端开发相应技术，自主设计 一个完整且较高质量的交互式前端网站知识目标的同时，以培养实现学 生的解决问题的实际应用能力、综合工程实践能力及创新能力等的能力 目标。 课程育人目标：为落实“既教书又育人”根本任务，在培养学生以 实现专业课程知识目标和能力目标的同时，在社会责任感、团队协作精 神、专业荣誉感、正确人生观及价值、爱国主义情怀等方面得到一定的 培养，从而实现课程育人的目标

Web前端开发课程教案 编号： 授课题目 第一章网站开发基础教学课型 理论课■讨论课口实验课口 习题课口实践课口其它口 首次授课时间第一周 学时 2学时 教学场所 固定座位教室口移动座位教室口智慧型互动教室口 实验（实训）室■校外实践基地口户外口其它口 数学目的要求： ·了解本课程的基本信息 ·掌握与Web开发相关的基础知识 ·了解网站建设的流程 ·掌握HTML基础知识 教学重点、难点： ·互联网的访问过程 ·网页设计中的基本概念和常见技术 ·常用的开发工具 课程思政： 1、思政元素：万维网之父蒂姆·伯纳斯·李，引导学生建立“不忘初心，无私奉 献”的价值观 2、思政元素：孟晚舟事件，引导学生分析和解决问题不能只看表面，而是要找到 本质，树立正确的世界观 3、思政元素：“Wb前端开发工程师”职业信息，引导学生了解所学课程的知识体 系，并能根据课程知识体系做好职业规划并努力，树立学生积极向上的价值观 4、思政素材：编草鞋的鲁国人经典传统故事，引导学生正确做好自身定位，回归 本职，树立正确的价值观 5、思政素材：HTML5标准规范的制定和发布背景，引导学生在做好职业规划的基 础上，并为之努力，遇到挫折及时调整并坚持，不放弃的精神

Web 前端开发课程教案 编号： 授课题目 第一章 网站开发基础 教学课型 理论课■讨论课□实验课□ 习题课□实践课□其它□ 首次授课时间 第一周 学时 2 学时 教学场所 固定座位教室□移动座位教室□智慧型互动教室□ 实验(实训)室■校外实践基地□户外□其它□ 教学目的要求： ⚫ 了解本课程的基本信息 ⚫ 掌握与 Web 开发相关的基础知识 ⚫ 了解网站建设的流程 ⚫ 掌握 HTML 基础知识 教学重点、难点： ⚫ 互联网的访问过程 ⚫ 网页设计中的基本概念和常见技术 ⚫ 常用的开发工具 课程思政： 1、思政元素：万维网之父蒂姆·伯纳斯·李， 引导学生建立“不忘初心，无私奉 献”的价值观 2、思政元素：孟晚舟事件，引导学生分析和解决问题不能只看表面，而是要找到 本质，树立正确的世界观 3、思政元素：“Web 前端开发工程师”职业信息，引导学生了解所学课程的知识体 系，并能根据课程知识体系做好职业规划并努力，树立学生积极向上的价值观 4、思政素材：编草鞋的鲁国人经典传统故事，引导学生正确做好自身定位，回归 本职，树立正确的价值观 5、思政素材：HTML5 标准规范的制定和发布背景，引导学生在做好职业规划的基 础上，并为之努力，遇到挫折及时调整并坚持，不放弃的精神

教学方式和手段： 教学方法：讲授、讨论、演示 教学设计与过程： 课堂教学设计： 课程导入 课程了解：提出问题：课程学什么，怎么学的问题，引导学生对本课 程的了解和兴趣 指导教学 新知学习：提出和课题相关的问题进行讨论，并课堂演示，从而引出 web开发相关的基本知识 课程节 知识总结：对知识点进行总结归纳 课后思考 一知识应用：布置课后思考和作业 课堂教学过程： 1.课程介绍(15分钟) 11引导学生了解本课程： ◆“为什么？”学习该课程引发学生思考来上课的原因 ◆ “学什么？”引发学生了解本课程要学的技术：Wb基础知识；HTML技 术；CSS技术；JavaScript技术；设计可用的网站 ◆“怎样学？”：课前（使用在线资源），课中（重点内容归纳，讲解常见错误 明确指出，重点反复强调，热点内容讨论)，课后作业与思考，实践（合作 学习)：自动学习 12教材与参考资料： ◆教材： 聂常红，《web前端开发技术—HTML、CSS、JavaScript(第3版)》（第2版） 人民邮电出版社，2020年 ◆网页设计，html,css,js相关参考书： [赵丰年，《网页设计与制作(HTML5+CSS3+-JavaScript)(第4版)（微课版）》， 人民邮电出版社，2020年 [2]明日科技.《HTML5+CSS3+-JavaScript Web前端开发案例教程（慕课版）》.人民 邮电出版社，2020年. [3传智播客高教产品研发部，《网页设计与制作项目教程 (HTML+CSS+JavaScript)》,人民邮电出版社，2016年

教学方式和手段： 教学方法：讲授、讨论、演示 教学设计与过程： 课堂教学设计: 课程导入——课程了解：提出问题：课程学什么，怎么学的问题，引导学生对本课 程的了解和兴趣 指导教学——新知学习：提出和课题相关的问题进行讨论，并课堂演示，从而引出 Web 开发相关的基本知识 课程小节——知识总结：对知识点进行总结归纳 课后思考——知识应用：布置课后思考和作业 课堂教学过程： 1. 课程介绍（15 分钟） 1.1 引导学生了解本课程： ◆ “为什么？”学习该课程引发学生思考来上课的原因 ◆ “学什么？”引发学生了解本课程要学的技术：Web 基础知识；HTML 技 术；CSS 技术；JavaScript 技术；设计可用的网站 ◆ “怎样学？”：课前（使用在线资源），课中（重点内容归纳，讲解常见错误 明确指出，重点反复强调，热点内容讨论），课后作业与思考，实践（合作 学习）；自动学习 1.2 教材与参考资料： ◆ 教材： 聂常红,《Web 前端开发技术——HTML、CSS、JavaScript（第 3 版）》(第 2 版). 人民邮电出版社，2020 年 ◆ 网页设计，html,css,js 相关参考书： [1] 赵丰年，《网页设计与制作（HTML5+CSS3+JavaScript）（第 4 版）（微课版）》， 人民邮电出版社，2020 年 [2] 明日科技.《HTML5+CSS3+JavaScript Web 前端开发案例教程（慕课版）》.人民 邮电出版社，2020 年. [3] 传 智 播 客 高 教 产 品 研 发 部 ，《 网 页 设 计 与 制 作 项 目 教 程 （HTML+CSS+JavaScript）》，人民邮电出版社，2016 年

网络资源以及平台： (1)w3 school在线网络资源 http://www.w3school.com.cn/ (2)菜鸟教程在线网络资源 http://www.runoob.com/ (3)在线网络教学平台： 超星尔雅“学习通”，QQ学习群，微信 1.3时间安排和成绩考核： 时间安排 理论：20 实践：12 教学质量过程考核+项目目标考核 教学质量过程考核(60%)：线上课程视频学习，讨论， 课堂表现，实践练习 项目目标考核(40%)：期末综合项目 1.4学习建议 重视页面的源代码，善于观察比较，发现细微的不同，注重细节，追求完美，抓住 重点，勤于实践 2.网站开发的基础知识（重点知识，45分钟） 2.1互联网的访问过程(15分钟) 问题：想要浏览某一个网页，我们应该怎么做？ 第一步，我们需要的是一台能连入互联网的终端设备，可以是手机，计算机 接着，我们打开浏览器，在地址栏中输入网页的地址 然后，等待服务器提过信息，并在浏览器中显示出来。 演 示网址 为 htp101l1 xjs/xxgk.htm页面的浏 览，浏览网页是从远程计算机中获 IE浏览器 火狐浏览器 谷歌浏览器 取内容，然后再本地计算机上显示 的过程 引出相关基本概念： 猎豹浏览器 ◆浏览器，服务器 Safari浏览器Opera浏览器 浏览网站是从远程计算机中获 取内容，然后在本地计算机显示出来。提供内容信息的计算机就称为服务器，访问

◆ 网络资源以及平台： （1）w3school 在线网络资源: http://www.w3school.com.cn/ （2）菜鸟教程在线网络资源: http://www.runoob.com/ （3）在线网络教学平台： 超星尔雅“学习通”,QQ 学习群，微信 1.3 时间安排和成绩考核： 时间安排 理论：20 实践：12 教学质量过程考核+项目目标考核 教 学 质 量 过 程 考 核 （ 60% ）： 线 上 课 程 视 频 学 习 ， 讨 论 ， 课堂表现，实践练习 项目目标考核（40%）：期末综合项目 1.4 学习建议 重视页面的源代码，善于观察比较，发现细微的不同，注重细节，追求完美，抓住 重点，勤于实践 2. 网站开发的基础知识（重点知识，45 分钟） 2.1 互联网的访问过程（15 分钟） 问题：想要浏览某一个网页，我们应该怎么做？ 第一步，我们需要的是一台能连入互联网的终端设备，可以是手机，计算机 接着，我们打开浏览器，在地址栏中输入网页的地址 然后，等待服务器提过信息，并在浏览器中显示出来。 演 示 网 址 为 http://10.1.1.1/xxjs/xxgk.htm 页面的 浏 览，浏览网页是从远程计算机中获 取内容，然后再本地计算机上显示 的过程 引出相关基本概念： ◆ 浏览器，服务器 浏览网站是从远程计算机中获 取内容，然后在本地计算机显示出来。提供内容信息的计算机就称为服务器，访问

者使用浏览网页的软件被称为浏览器（不同版本，w3C) ◆WWW=Wb服务器+信息资源+浏览器 万维网，Www,World Wide Web”,也称作Web。wWw、万维网和Web是同 义词，是一个大型的相互链接的文件所组成的集合体，包括了整个网络世界。 此知识点融入思政元素“万维网之父蒂姆·伯纳斯·李”，引导学生建立不忘初心， 无私拳献的价值观。 附“蒂姆·伯纳斯·李”无私奉献万维网：万维网之父蒂姆·伯纳斯·李：他 是被全球人赞扬的英国科学家。他发明万维网的初衷是在1980年，他想创建一个以 超级文本系统为基础的项目用于科学教研究成果的分享和更新。蒂姆是一个极具浪 漫主义情怀的科学家。在这个所有人都狂热追求金钱的时代，作为一个轻易就可以 用自己的发明获得财富的发明者，他却“头脑发热”，放弃了这个暴富的绝好机会， 将万维网无偿向全世界开放。他的“奉献”比他的发明本身更让人感动，因为这个举 动不仅为互联网的全球化普及翻开了里程碑式的篇章，更让全世界人民免费享受到 了这项伟大发明为生活带来的美妙乐趣。伯纳斯的始于初心，无私奉献的精神更是 值得我们当代大学生学习。 ◆统一资源定位符(URL,Uniform Resource Locator) 是用于完整地描述Internet.上网页和其它资源地址的一种标识方法。Internet.上 的每一个资源都有一个唯一的名称标识，通常称之为UL地址或者网址，这种地址 可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的某个站 点。 UL一般由协议类型、存放资源的域名或主机P地址，以及资源文件的路径名 三部分组成。其语法格式如下： protocol://hostname[:port]/path/[;parameters]?query ]#fragment 其中： protocol指定传输所使用的协议类型。 hostname指的是存放资源的服务器名称或者主机的IP地址 pot指的端口号（端口号为80可以省略）。 path指的是资源的存放路径。 parameters为可选项 http://10.11.1/xxjs/xxgk.htm ◆P地址和域名：htp:10.l.l.l,htp:/baidu.com 标识服务器在网络中的地址，为了实现P地址的易理解、易识别，又引入了域 名的概念

者使用浏览网页的软件被称为浏览器(不同版本，w3c)。 ◆ WWW = Web 服务器 + 信息资源 + 浏览器 万维网，WWW,“World Wide Web”，也称作 Web。WWW、万维网和 Web 是同 义词，是一个大型的相互链接的文件所组成的集合体，包括了整个网络世界。 此知识点融入思政元素“万维网之父蒂姆·伯纳斯·李”，引导学生建立不忘初心， 无私奉献的价值观。 附“蒂姆·伯纳斯·李”无私奉献万维网：万维网之父蒂姆·伯纳斯·李：他 是被全球人赞扬的英国科学家。他发明万维网的初衷是在 1980 年，他想创建一个以 超级文本系统为基础的项目用于科学教研究成果的分享和更新。蒂姆是一个极具浪 漫主义情怀的科学家。在这个所有人都狂热追求金钱的时代，作为一个轻易就可以 用自己的发明获得财富的发明者，他却“头脑发热”，放弃了这个暴富的绝好机会， 将万维网无偿向全世界开放。他的“奉献”比他的发明本身更让人感动，因为这个举 动不仅为互联网的全球化普及翻开了里程碑式的篇章，更让全世界人民免费享受到 了这项伟大发明为生活带来的美妙乐趣。伯纳斯的始于初心，无私奉献的精神更是 值得我们当代大学生学习。 ◆ 统一资源定位符（URL，Uniform Resource Locator） 是用于完整地描述 Internet 上网页和其它资源地址的一种标识方法。Internet 上 的每一个资源都有一个唯一的名称标识，通常称之为 URL 地址或者网址，这种地址 可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是 Internet 上的某个站 点。 URL 一般由协议类型、存放资源的域名或主机 IP 地址，以及资源文件的路径名 三部分组成。其语法格式如下： protocol://hostname[:port]/path/[;parameters][?query]#fragment 其中： protocol 指定传输所使用的协议类型。 hostname 指的是存放资源的服务器名称或者主机的 IP 地址。 port 指的端口号（端口号为 80 可以省略）。 path 指的是资源的存放路径。 parameters 为可选项 http://10.1.1.1/xxjs/xxgk.htm ◆ IP 地址和域名:http://10.1.1.1;http://baidu.com 标识服务器在网络中的地址，为了实现 IP 地址的易理解、易识别，又引入了域 名的概念

2.2互联网的工作机制：(15分钟) 讨论：用户输入网址敲下回车后，到浏览器呈现出页面的，这一过程互联网都 做了什么？ (I)浏览器中输入将要访问页面的URL地址。由DS进行域名地址解析，找 浏览器 到服务器P地址，向该地址所指向的Wb服务器发出请求。 (2)Wb服务器根据浏览器送来的请求，把URL地址转换成页面所在服务器 上的文件全名，查找相应的文件。 (3)如果URL指向静态HTML文档，Web服务器使用HTTP协议把该文档直 接送给浏览器。如果HTML文档中嵌入了ASP、PHP或JSP程序，则由Web服务器 运行这些程序，把结果送到浏览器。如果Wb服务器运行的程序包含对数据库的访 问，则服务器将查询指令发送给数据库服务器，对数据库执行查询操作 (4)查询结果由数据库返回Wb服务器，再Web服务器将结果数据嵌入页面 并以HTML格式发送给浏览器。 (5)浏览器解释HTML文档，在客户端屏幕上展示结果。 由互联网的工作机制引出基本概念： 网站：在互联网上根据一定的规则使用HTML语言辨析饿的用于展示内容网页 的集合。网站有域名、网站空间、网页3部分组成。 网页：网站是一个整体，网页为用户提供的内容是通过网页显示出来的，用户 浏览网站其实就是浏览网页。网页实际上是用HTML语言编写的文本文件。在浏览 网页时，浏览器将HTML语言翻译成用户看到的网页

2.2 互联网的工作机制：（15 分钟） 讨论：用户输入网址敲下回车后，到浏览器呈现出页面的，这一过程互联网都 做了什么？ （1）浏览器中输入将要访问页面的 URL 地址。由 DNS 进行域名地址解析，找 到服务器 IP 地址，向该地址所指向的 Web 服务器发出请求。 （2）Web 服务器根据浏览器送来的请求，把 URL 地址转换成页面所在服务器 上的文件全名，查找相应的文件。 （3）如果 URL 指向静态 HTML 文档，Web 服务器使用 HTTP 协议把该文档直 接送给浏览器。如果 HTML 文档中嵌入了 ASP、PHP 或 JSP 程序，则由 Web 服务器 运行这些程序，把结果送到浏览器。如果 Web 服务器运行的程序包含对数据库的访 问，则服务器将查询指令发送给数据库服务器，对数据库执行查询操作。 （4）查询结果由数据库返回 Web 服务器，再 Web 服务器将结果数据嵌入页面， 并以 HTML 格式发送给浏览器。 （5）浏览器解释 HTML 文档，在客户端屏幕上展示结果。 由互联网的工作机制引出基本概念： 网站：在互联网上根据一定的规则使用 HTML 语言辨析饿的用于展示内容网页 的集合。网站有域名、网站空间、网页 3 部分组成。 网页：网站是一个整体，网页为用户提供的内容是通过网页显示出来的，用户 浏览网站其实就是浏览网页。网页实际上是用 HTML 语言编写的文本文件。在浏览 网页时，浏览器将 HTML 语言翻译成用户看到的网页

讨论：什么是静态页面和动态页面，大家谈谈他们的区别 打开学校网站：10.1.1.1 讨论：我们看到的网页，哪些是静态页面哪些是动态的页面 提问：是不是大家看到的静止不动的页面就是静态页面，有动态效果的就是动态页 面呢？ 静态页面和动态页面的区别并不是我们所看到的是否有动态效果展示 静态网页 在浏览器中运行，不需要到后台数据库检索数据、不含有程序的纯HTML格式 的网页文件，其文件后缀一般为.html、htm、.shtml等。 动态网页 网页文件中包含需要在服务器上执行的程序代码。动态网页需要后台数据库与 Wb服务器交互，利用数据库实现数据更新和查询服务。动态网页扩展名一般 是.asp、jsp、php等。 此知识点融入“孟晚舟事件”思政素材，引导学生分析和解决问题不能只看表面， 而是要找到本质，树立正确的世界观，以及激发学生的爱国热情 附孟晚舟事件：2018年12月1日，华为的首席财务官孟晚舟在加拿大温哥华机场转机 时，被加拿大警方拘起关进了监狱。加拿大警方给出的拘捕孟晚舟的理由是华为涉嫌违 反美国对伊朗的贸易制裁规定。美国同时更进一步要求加拿大将孟晚舟引渡到美国，华 为则据理力争，要求将孟晚舟保释。为此加拿大举行了三次听证会，在收取5000万元 人民币的保释金之后，最终同意孟晚舟保释。保释后的孟晚舟被没收了护照只能在固定 的区域附近活动。其实获得保释只是一种形式上的权宜。很显然孟晚舟只是中国的一个 代表，实质上是美国等西方国家对中国的虎视眈眈和狼子野心。 3.制作网站的标准和常见技术(15分钟) 3.1制作网站的标准和常见技术(10分钟) Web开发应用遵循的标准就是Web标准。 网页部分的标准通过三部分来描述：结构(Structure)、表现(Presentation)和 行为(Behavior)。 冬结构、表现和行为对应于3种常用的技术，即(X)HTML,CSS和JavaScript。 ·(X)HTML用来决定网页的结构和内容： ·CSS用来设计网页的表现形式： ·JavaScript用来控制网页的行为。 HTML:Hyper Text Markup Language,是一种用来制作超文本文档的简单标记语言

讨论：什么是静态页面和动态页面，大家谈谈他们的区别 打开学校网站：10.1.1.1 讨论：我们看到的网页，哪些是静态页面哪些是动态的页面 提问：是不是大家看到的静止不动的页面就是静态页面，有动态效果的就是动态页 面呢？ 静态页面和动态页面的区别并不是我们所看到的是否有动态效果展示 静态网页 在浏览器中运行，不需要到后台数据库检索数据、不含有程序的纯 HTML 格式 的网页文件，其文件后缀一般为.html、.htm、.shtml 等。 动态网页 网页文件中包含需要在服务器上执行的程序代码。动态网页需要后台数据库与 Web 服务器交互，利用数据库实现数据更新和查询服务。动态网页扩展名一般 是.asp、.jsp、.php 等。 此知识点融入“孟晚舟事件”思政素材，引导学生分析和解决问题不能只看表面， 而是要找到本质，树立正确的世界观，以及激发学生的爱国热情 附孟晚舟事件：2018 年 12 月 1 日，华为的首席财务官孟晚舟在加拿大温哥华机场转机 时，被加拿大警方拘起关进了监狱。加拿大警方给出的拘捕孟晚舟的理由是华为涉嫌违 反美国对伊朗的贸易制裁规定。美国同时更进一步要求加拿大将孟晚舟引渡到美国，华 为则据理力争，要求将孟晚舟保释。为此加拿大举行了三次听证会，在收取 5000 万元 人民币的保释金之后，最终同意孟晚舟保释。保释后的孟晚舟被没收了护照只能在固定 的区域附近活动。其实获得保释只是一种形式上的权宜。很显然孟晚舟只是中国的一个 代表，实质上是美国等西方国家对中国的虎视眈眈和狼子野心。 3. 制作网站的标准和常见技术（15 分钟） 3．1 制作网站的标准和常见技术（10 分钟） Web 开发应用遵循的标准就是 Web 标准。 网页部分的标准通过三部分来描述：结构（Structure）、表现（Presentation）和 行为（Behavior）。 ❖ 结构、表现和行为对应于 3 种常用的技术，即(X)HTML，CSS 和 JavaScript。 ▪ (X)HTML 用来决定网页的结构和内容; ▪ CSS 用来设计网页的表现形式; ▪ JavaScript 用来控制网页的行为。 HTML：Hyper Text Markup Language，是一种用来制作超文本文档的简单标记语言

CSS:(Cascading Style Sheets,层叠样式表)是标准的布局语言，用来排版和显示 HTML元素。HTML+CSS的布局，使内容表现与结构相分离，使网页可维护性更好。 JavaScripts:一种解释性的，基于对象的脚本语言。 此知识点融入思政素材“b前端开发工程师”，引导学生了解课程知识体系，做 好职业规划。 附：Wb前端开发工程师：主要职责是利用各种Wb技术进行客户端产品的开发。他是 随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素：HTML、CSS 和JavaScript Web前端开发工程师优势：入门门槛低，就业好：从2012年至今，“Web前端工程师 的需求持续走高，薪酬也是水涨船高。 Wb前端人才市场趋于大前端以及前后端融合方向发展。未来Web前端开发人才将满足 多平台开发、前后端全栈开发等综合性的市场需求 Web前端开发应该掌握的技能 1、前端页面重构。2、前后端网页交互。3、Node.js+前端框架。 3.2常用开发工具(5分钟) 讨论：大家知道的有哪些开发工具，各有什么优势？ 文档编辑工具Notepad-+ 可视化网页开发软件Dreamweaver CS6 集成开发环境Webstorm 4.网站建设流程(15分钟)

CSS：(Cascading Style Sheets，层叠样式表)是标准的布局语言，用来排版和显示 HTML 元素。HTML+CSS 的布局，使内容表现与结构相分离，使网页可维护性更好。 JavaScript：一种解释性的，基于对象的脚本语言。 此知识点融入思政素材“Web 前端开发工程师”，引导学生了解课程知识体系，做 好职业规划。 附: Web 前端开发工程师：主要职责是利用各种 Web 技术进行客户端产品的开发。他是 随着 web 发展，细分出来的行业。Web 前端开发技术主要包括三个要素：HTML、CSS 和 JavaScript Web 前端开发工程师优势：入门门槛低，就业好：从 2012 年至今，“Web 前端工程师” 的需求持续走高，薪酬也是水涨船高。 Web 前端人才市场趋于大前端以及前后端融合方向发展。未来 Web 前端开发人才将满足 多平台开发、前后端全栈开发等综合性的市场需求 Web 前端开发应该掌握的技能 1、前端页面重构。2、前后端网页交互。3、Node.js + 前端框架。 3.2 常用开发工具（5 分钟） 讨论：大家知道的有哪些开发工具，各有什么优势？ 文档编辑工具 Notepad++ 可视化网页开发软件 Dreamweaver CS6 集成开发环境 Webstorm 4. 网站建设流程（15 分钟）