《《Web前端开发》课程思政教学设计（一等奖）.docx》由会员分享，可在线阅读，更多相关《《Web前端开发》课程思政教学设计（一等奖）.docx（17页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Web前端开发课程教案编号：授课题目第一章网站开发基础教学课型理论课讨论课口实验课 习题课口实践课其它首次授课时间第一周学时2学时教学场所固定座位教室口移动座位教室口智慧型互动教室口实验(实训)室校外实践基地口户外其它口教学目的要求： 了解本课程的基本信息 掌握与Web开发相关的基础知识 了解网站建设的流程 掌握HTML基础知识教学重点、难点： 互联网的访问过程 网页设计中的基本概念和常见技术 常用的开发工具课程思政：1、思政元素：万维网之父蒂姆伯纳斯李， 引导学生建立“不忘初心，无私奉献”的价值观2、思政元素：孟晚舟事件，引导学生分析和解决问题不能只看表面，而是要找到本质，树立正确的世界观3
2、、思政元素：“Web前端开发工程师”职业信息，引导学生了解所学课程的知识体系，并能根据课程知识体系做好职业规划并努力，树立学生积极向上的价值观4、思政素材：编草鞋的鲁国人经典传统故事，引导学生正确做好自身定位，回归本职，树立正确的价值观5、思政素材：HTML5标准规范的制定和发布背景，引导学生在做好职业规划的基础上，并为之努力，遇到挫折及时调整并坚持，不放弃的精神教学方式和手段：教学方法：讲授、讨论、演示教学设计与过程：课堂教学设计：课程导入课程了解：提出问题：课程学什么,怎么学的问题，引导学生对本课程的了解和兴趣指导教学新知学习：提出和课题相关的问题进行讨论，并课堂演示，从而引出Web开发相
3、关的基本知识课程小节知识总结：对知识点进行总结归纳课后思考知识应用：布置课后思考和作业课堂教学过程：1.课程介绍(15分钟)1.1引导学生了解本课程： “为什么?”学习该课程引发学生思考来上课的原因 “学什么?”引发学生了解本课程要学的技术：Web基础知识；HTML技 术；CSS技术；JavaScript技术；设计可用的网站“怎样学?”:课前(使用在线资源),课中(重点内容归纳，讲解常见错误 明确指出，重点反复强调，热点内容讨论),课后作业与思考，实践(合作学习);自动学习1.2教材与参考资料：教材：聂常红，Web前端开发技术HTML、CSS、JavaScript(第3版)(第2版).人民邮电
4、出版社，2020年网页设计，html,cssjs相关参考书：1赵丰年，网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版),人民邮电出版社，2020年2明日科技. HTML5+CSS3+JavaScript Web前端开发案例教程(慕课版) .人民邮电出版社，2020年. 3 传 智 播 客 高 教 产 品 研 发 部 ， 网 页 设 计 与 制 作 项 目 教 程(HTML+CSS+JavaScript),人民邮电出版社，2016年.网络资源以及平台：(1)w3school 在线网络资源：(2)菜鸟教程在线网络资源：(3)在线网络教学平台：超星尔雅“学习通”,QQ
5、 学习群，微信1.3 时间安排和成绩考核：时间安排理论：20实践：12教学质量过程考核+项目目标考核教 学 质 量 过 程 考 核 (60%): 线 上 课 程 视 频 学 习 ， 讨 论 ，课堂表现，实践练习项目目标考核(40%):期末综合项目1.4 学习建议重视页面的源代码，善于观察比较，发现细微的不同，注重细节，追求完美，抓住重点，勤于实践2. 网站开发的基础知识(重点知识，45分钟)2.1互联网的访问过程(15分钟)问题：想要浏览某一个网页，我们应该怎么做?第一步，我们需要的是一台能连入互联网的终端设备，可以是手机，计算机接着，我们打开浏览器，在地址栏中输入网页的地址然后，等待服务器提
6、过信息，并在浏览器中显示出来。IE浏览器猎豹浏览器火狐浏览器Safari 浏览器谷歌浏览器Opera 浏览器演 示 网 址 为 http:/ 10.1.1.1/xxjs/xxgk.htm 页面的浏 览，浏览网页是从远程计算机中获 取内容，然后再本地计算机上显示的过程引出相关基本概念：浏览器，服务器浏览网站是从远程计算机中获取内容，然后在本地计算机显示出来。提供内容信息的计算机就称为服务器，访问者使用浏览网页的软件被称为浏览器(不同版本， w3c)。 WWW=Web 服务器+信息资源+浏览器万维网， WWW,“World Wide Web”, 也称作 Web 。WWW、万维网和 Web 是同义词
7、，是一个大型的相互链接的文件所组成的集合体，包括了整个网络世界。此知识点融入思政元素“万维网之父蒂姆伯纳斯李”,引导学生建立不忘初心，无私奉献的价值观。附“蒂姆伯纳斯李”无私奉献万维网：万维网之父蒂姆伯纳斯李：他 是被全球人赞扬的英国科学家。他发明万维网的初衷是在1980年，他想创建一个以 超级文本系统为基础的项目用于科学教研究成果的分享和更新。蒂姆是一个极具浪 漫主义情怀的科学家。在这个所有人都狂热追求金钱的时代，作为一个轻易就可以 用自己的发明获得财富的发明者，他却“头脑发热”,放弃了这个暴富的绝好机会， 将万维网无偿向全世界开放。他的“奉献”比他的发明本身更让人感动，因为这个举 动不仅为
8、互联网的全球化普及翻开了里程碑式的篇章，更让全世界人民免费享受到 了这项伟大发明为生活带来的美妙乐趣。伯纳斯的始于初心，无私奉献的精神更是值得我们当代大学生学习。 统一资源定位符 (URL,Uniform Resource Locator)是用于完整地描述 Internet 上网页和其它资源地址的一种标识方法。Internet 上 的每一个资源都有一个唯一的名称标识，通常称之为URL 地址或者网址，这种地址 可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet 上的某个站点。URL 一般由协议类型、存放资源的域名或主机 IP 地址，以及资源文件的路径名三部分组成。其语法格式
9、如下：protocol:/hostname:port/path/;parameters?query#fragment其中：protocol 指定传输所使用的协议类型。hostname 指的是存放资源的服务器名称或者主机的IP 地址。port 指的端口号(端口号为80可以省略)。path 指的是资源的存放路径。parameters 为可选项http:/ 10.1.1.1/xxjs/xxgk.htmIP 地址和域名：http:/10.1.1.1;标识服务器在网络中的地址，为了实现 IP 地址的易理解、易识别，又引入了域名的概念。2.2互联网的工作机制：(15分钟)讨 论 ：用户输入网址敲下回车后，
10、到浏览器呈现出页面的，这一过程互联网都 做了什么?(1)浏览器中输入将要访问页面的URL地址。由DNS进行域名地址解析，找返回(查)b结果服务器web服务器用 房 读 类 H R W eb 贺源地址如果需 要据库服务器执行查询操作Web服务器将给服务器(完成页)面发送数据库服务器浏览器浏览器到服务器IP地址，向该地址所指向的Web服务器发出请求。(2)Web服务器根据浏览器送来的请求，把URL地址转换成页面所在服务器上的文件全名，查找相应的文件。(3)如果URL指向静态HTML文档，Web服务器使用HTTP协议把该文档直接送给浏览器。如果HTML文档中嵌入了ASP、PHP或JSP程序!硼市WA
11、服条器运行这些程序，把结果送到浏览器。如果Web服务器运行的程序包含对数据库的访问，则服务器将查询指令发送给数据库服务器，对数据库执行查询操作。(4)查询结果由数据库返回Web服务器，再Web服务器将结果数据嵌入页面，并以HTML格式发送给浏览器。(5)浏览器解释HTML文档，在客户端屏幕上展示结果。由互联网的工作机制引出基本概念：网站：在互联网上根据一定的规则使用HTML语言辨析饿的用于展示内容网页的集合。网站有域名、网站空间、网页3部分组成。网页：网站是一个整体，网页为用户提供的内容是通过网页显示出来的，用户 浏览网站其实就是浏览网页。网页实际上是用HTML语言编写的文本文件。在浏览网页时
12、，浏览器将HTML语言翻译成用户看到的网页。讨论：什么是静态页面和动态页面，大家谈谈他们的区别打开学校网站： 10.1.1.1讨论：我们看到的网页，哪些是静态页面哪些是动态的页面提问：是不是大家看到的静止不动的页面就是静态页面，有动态效果的就是动态页面呢?静态页面和动态页面的区别并不是我们所看到的是否有动态效果展示静态网页在浏览器中运行，不需要到后台数据库检索数据、不含有程序的纯 HTML 格式的网页文件，其文件后缀一般为.html 、.htm 、.shtml 等。动态网页网页文件中包含需要在服务器上执行的程序代码。动态网页需要后台数据库与 Web 服务器交互，利用数据库实现数据更新和查询服务
13、。动态网页扩展名一般是.asp 、.jsp 、.php 等。此知识点融入“孟晚舟事件”思政素材，引导学生分析和解决问题不能只看表面，而是要找到本质，树立正确的世界观，以及激发学生的爱国热情附孟晚舟事件：2018年12月1日，华为的首席财务官孟晚舟在加拿大温哥华机场转机 时，被加拿大警方拘起关进了监狱。加拿大警方给出的拘捕孟晚舟的理由是华为涉嫌违 反美国对伊朗的贸易制裁规定。美国同时更进一步要求加拿大将孟晚舟引渡到美国，华 为则据理力争，要求将孟晚舟保释。为此加拿大举行了三次听证会，在收取5000 万元 人民币的保释金之后，最终同意孟晚舟保释。保释后的孟晚舟被没收了护照只能在固定 的区域附近活动
14、。其实获得保释只是一种形式上的权宜。很显然孟晚舟只是中国的一个代表，实质上是美国等西方国家对中国的虎视眈眈和狼子野心。3. 制作网站的标准和常见技术(15分钟)3.1制作网站的标准和常见技术(10分钟)Web 开发应用遵循的标准就是Web 标准。网页部分的标准通过三部分来描述：结构 (Structure) 、 表现 (Presentation) 和行为 (Behavior)。结构、表现和行为对应于3种常用的技术，即(X)HTML,CSS和 JavaScript。(X)HTML 用来决定网页的结构和内容； CSS 用来设计网页的表现形式；JavaScript 用来控制网页的行为。HTML:Hyp
15、er Text Markup Language,是一种用来制作超文本文档的简单标记语言。CSS:(Cascading Style Sheets, 层叠样式表)是标准的布局语言，用来排版和显示HTML 元素。HTML+CSS 的布局，使内容表现与结构相分离，使网页可维护性更好。JavaScript: 一种解释性的，基于对象的脚本语言。此知识点融入思政素材“Web前端开发工程师”,引导学生了解课程知识体系，做好职业规划。附 ：Web 前端开发工程师：主要职责是利用各种 Web技术进行客户端产品的开发。他是 随着 web 发展，细分出来的行业。Web 前端开发技术主要包括三个要素： HTML 、CS
16、S和 JavaScriptWeb前端开发工程师优势：入门门槛低，就业好：从2012年至今， “Web 前端工程师”的需求持续走高，薪酬也是水涨船高。Web 前端人才市场趋于大前端以及前后端融合方向发展。未来 Web 前端开发人才将满足多平台开发、前后端全栈开发等综合性的市场需求Web 前端开发应该掌握的技能1、前端页面重构。2、前后端网页交互。3、Node.js+ 前端框架。3.2 常用开发工具(5分钟)讨论：大家知道的有哪些开发工具，各有什么优势?文档编辑工具Notepad+可视化网页开发软件 Dreamweaver CS6集成开发环境 Webstorm4. 网站建设流程(15分钟)明确网站
17、的定位 确定网站的主题 网站的整体规划 收集资料与素材设计制作网页页面网站的测试与发布 网站的维护与推广前期策划中期制作后期维护4 . 1 前 期 策 划 ( 1 0 分 钟 )明确网站的定位此处引入思政元素“编草鞋的鲁国人”,引导学生正确做好自身定位，回归本职，做好职业规划。附 ：确定网站的主题有个鲁国人擅长编草鞋，他妻子擅长织白绢。他想迁到越国去。友人对他说：“你到越 国去， 一定会贫穷的。”“为什么?”“草鞋，是用来穿着走路的，但越国人习惯于赤足走 路；白绢，是用来做帽子的，但越国人习惯于披头散发。凭着你的长处，到用不到你的地方去，这样，要使自己不贫穷，难道可能吗?”这个故事告诉人们：
18、一个人要发挥其专长，就必须适合社会环境需要。如果脱离社会环 境的需要，其专长也就失去了价值。因此，我们要根据社会得需要，决定自己的行动，绠好去发挥自己的专长。理解站点功能形成鲜明的主题特色要突出网站的整体规划首先罗列网站的内容根据内容列出一个结构化的蓝图根据情况设计各个页面之间的链接规划网站的内容应包括栏目的设置、目录结构、网站的风格 目 录 结 构 设 计按 栏 目 内 容 建 立 子 目 录每个目录下分别为图像文件创建一个子目录images目 录 的 层 次 不 要 太 深尽 量 使 用 意 义 明 确 的 非 中 文 目 录 收 集 资 料 与 素 材在 明 确 建 站 目 的 和 网
19、站 定 位 以 后 ， 要 结 合 各 方 面 的 实 际 情 况 ， 围 绕 主 题 全 面 收 集 相关 的 材 料 。4 . 2 网 站 建 设 ( 2 分 钟 )网 页 的 设 计 要 讲 究 页 面 构 图 、 色 彩 搭 配 、 平 面 布 局 、 版 式 设 计 、 空 间 表 现 等 方 面 的 内容。4 . 3 测 试 和 发 布 ( 3 分 钟 )测 试 评 估 与 网 站 发 布 是 不 可 分 割 的 两 部 分制 作 完 毕 的 网 页 必 须 进 行 测 试 。 测 试 评 估 主 要 包 括 上 传 前 的 兼 容 性 测 试 、 链 接 测试 和 上 传 后 的
20、 实 地 测 试 。网 站 上 传 后 ， 继 续 通 过 浏 览 器 进 行 实 地 测 试 ， 发 现 问 题 后 及 时 修 改 ， 然 后 再 上 传测试。5 . HTML基础(10分钟)HTML(Hypertext Markup Language)即超文本标记语言，它是构成Web页面(Page)的主要工具。提 问 ： h t m l 可 以 做 什 么 ?开 发 网 页 ， 可 以 展 现 文 字 ， 图 片 ， 视 频 ， 声 音 ， 是 w e b 开 发 的 基 础 。 ( 静 态 )5 . 1 H T M L 发 展 历 史- h t m l 发 展 历 史希 姆 - 伯 纳
21、 塔 一 李万 维 网 之 父3 标 记 语一 版1 9 9 古 第1995html2.01996 htm13.2 w3c推荐标准2000 xhtml1.0 w3c推荐标准2001 xhtml1.1 w 3 c 推 荐 标 准1999 html4.0.1 w3c推荐标准2008 html5此 处 引 入 思 政 元 素 ：划 的 基 础 上 ， 并 为 之 努5 . 2 运 行 原 理 ：h t m l 设 计 者 w 3 c 创 始 人H T M L 5 标 准 规 范 的 制 定 和 发 布 背 景 ， 引 导 学 生 在 做 好 职 业 规力 ， 遇 到 挫 折 及 时 调 整 并 坚 持 ， 不 放 弃 的 精 神本地运行远程访问运行思考：什么时候我们用的是HTML文件的本地运行以及远程运行?总结回顾：(5分钟)1.课程学什么,怎么学；2.网站开发基础知识；3.网站建设流程4 . HTML基础知识思考題、作业：思 考 ：学习这门课程，对本课程的期望是什么,我想干什么,能够做什么作 业 ：浏览优秀网站，看看网页的基本元素，布局，动态效果以及源代码项目考核提前做好定位，确定主题，开始动手收集资料教学后记：