网页设计与制作项目教程（HTML5+CSS3+JavaScript）（AI助学）（第3版）教案-教学设计 项目1-3 网页制作基础知识-“网上花店”专题页制作_第1页
网页设计与制作项目教程（HTML5+CSS3+JavaScript）（AI助学）（第3版）教案-教学设计 项目1-3 网页制作基础知识-“网上花店”专题页制作_第2页
网页设计与制作项目教程（HTML5+CSS3+JavaScript）（AI助学）（第3版）教案-教学设计 项目1-3 网页制作基础知识-“网上花店”专题页制作_第3页
网页设计与制作项目教程（HTML5+CSS3+JavaScript）（AI助学）（第3版）教案-教学设计 项目1-3 网页制作基础知识-“网上花店”专题页制作_第4页
网页设计与制作项目教程（HTML5+CSS3+JavaScript）（AI助学）（第3版）教案-教学设计 项目1-3 网页制作基础知识-“网上花店”专题页制作_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第1章PHP开篇PAGE16《网页设计与制作项目教程（HTML5+CSS3+JavaScript）（AI助学）（第3版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称项目1网页制作基础知识计划课时4课时教学引入随着互联网技术的不断发展，网页制作的需求越来越大。然而网页制作究竟是什么，许多刚刚接触网页制作的初学者并不是很清楚。因此，在学习网页制作之前，要了解一些网页制作的基础知识。本项目将从认识网页、网页制作入门技术和网页编辑器3个方面详细讲解网页制作的相关知识。教学目标使学生了解网页的构成，能够说出网页的组成部分使学生熟悉网页的相关名词，能够解释每个名词的含义使学生了解Web标准，对网页的结构、表现、行为有基本的认识使学生熟悉HTML5、CSS3和JavaScript的概念以及发展过程使学生熟悉常用的浏览器，能够说出各浏览器的特点使学生熟悉常见的网页编辑器，能够说出不同网页编辑器的特点使学生掌握HBuilderX的基本操作，能够独立安装并使用该工具使学生掌握VisualStudioCode的基本操作，能够独立安装并使用该工具使学生通过了解不同技术的发展过程，构建持续学习的意识使学生理解“结构-表现-行为”分层逻辑，培养模块化、标准化的工程思维习惯使学生借助扎实的理论知识，培养独立思考、分析和解决问题的思维习惯教学重点任务1-1认识网页任务1-2网页制作入门技术HBuilderX的安装与使用VSCode的安装与使用任务1-3网页编辑器教学难点无教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（网页的构成、网页的相关名词、Web标准、任务1-1认识网页）一、通过直接引入的方式导入新课说到网页，大家或许并不陌生。人们上网时浏览新闻、查询信息、翻看图片等都可以通过浏览网页实现。在制作网页之前，要形成对网页的基本认识。本节课将对网页的构成、网页的相关名词和Web标准知识点进行具体讲解。二、新课讲解知识点1-网页的构成教师通过PPT的方式讲解网页的构成。（1）介绍黑马程序员教程网站首页。通过网页查看网页的源代码。（3）介绍静态网页和动态网页。知识点2-网页的相关名词教师通过PPT的方式讲解网页的相关名词。InternetWWWURLDNSHTTP和HTTPSWebW3C知识点3-Web网页教师通过PPT的方式讲解Web网页。结构表现行为知识点4-任务1-1认识网页教师通过PPT的方式讲解任务1-1认识网页。带领学生认识网页三、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。四、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（HTML5简介、CSS简介、JavaScript简介、常用浏览器介绍、任务1-2网页制作入门技术）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课HTML、CSS和JavaScript是网页制作的基本应用技术，也是本书的重点。本节将对HTML5简介、CSS简介、JavaScript简介和常用浏览器进行介绍。三、新课讲解知识点1-HTML5简介教师通过PPT的方式讲解HTML5简介。介绍HTML5介绍网页源代码知识点2-CSS3简介教师通过PPT的方式讲解CSS3简介。介绍CSS3介绍会员模块知识点3-JavaScript简介教师通过PPT的方式讲解JavaScript简介。介绍JavaScript介绍tab栏知识点4-常用浏览器介绍教师通过PPT的方式讲解常用浏览器介绍。Edge浏览器Firefox浏览器Chrome浏览器知识点5-任务1-2网页制作入门技术教师通过PPT的方式讲解任务1-2网页制作入门技术。带领学生对HTML、CSS和JavaScript技术形成基本认识。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（常见网页编辑器介绍、HBuilderX的安装与使用、VSCode的安装与使用、任务1-3网页编辑器）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课为Code、Dreamweaver等。本节将对常见网页编辑器介绍、HBuilderX的安装与使用和VSCode的安装与使用进行介绍。三、新课讲解知识点1-常见网页编辑器介绍教师通过PPT的方式讲解常见网页编辑器介绍。HBuilderXVisualStudioCodeDreamweaver知识点2-HBuilderX的安装与使用教师通过PPT的方式讲解常见HBuilderX的安装与使用。演示HBuilderX的安装知识点3-VSCode的安装与使用教师通过PPT的方式讲解VSCode的安装与使用。演示VSCode的安装知识点4-任务1-3网页编辑器教师通过PPT的方式讲解任务1-3网页编辑器。带领学生完成HBuilderX和VSCode的安装。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机一：（考察知识点为：HBuilderX的安装与使用、VSCode的安装与使用）形式：单独完成具体要求：完成HBuilderX的安装与使用完成VSCode编辑器的下载和安装。教学后记《网页设计与制作项目教程（HTML5+CSS3+JavaScript）（AI助学）（第3版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称项目2“旅行游记”页面制作计划课时6课时教学引入随着人们生活水平的提高，旅行成为越来越多人放松身心、增长见识的选择。最近，热爱旅游的小智想要制作一个“旅行游记”页面，用于完整记录自己的旅行故事，同时也能与志同道合的旅友们分享交流。由于之前没有接触过网页制作，因此小智决定先从HTML语法、基本格式、基础标签学起，等夯实基础后，再着手“旅行游记”页面的制作。教学目标使学生掌握HTML文档基本格式使学生了解HTML文档头部相关标签，及一些常用头部标签的作用使学生掌握图像标签的用法，能够制作图文混排页面使学生掌握HTML文本控制标签的用法，能够实现网页文字排版整齐、结构清晰使学生通过对HTML文档基本格式的学习，形成对HTML文档规范的清晰认知，培养严谨、遵循代码书写规范的职业素养使学生通过对图像标签和图文混排技术的学习，培养页面布局与设计能力教学重点HTML文档基本格式任务2-1认识HTML文本格式化标签特殊字符<div>标签常用图像格式教学难点任务2-1认识HTML文本格式化标签教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（HTML文档基本格式、HTML标签、HTML标签的属性、HTML标签的关系、HTML文档头部相关标签、任务2-1认识HTML）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课HTML作为一门标记语言，主要用来描述网页中的文字和图像等信息，目前HTML5已逐渐成为移动互联网的主流。但是什么是HTML，又该如何使用HTML标签控制网页中的文字和图像等信息呢？本节课将具体介绍HTML文档的基本格式、标签分类、标签属性等知识点。三、新课讲解知识点1-HTML文档基本格式教师通过PPT的方式讲解认识HTML文档基本格式。<!DOCTYPE><html><head><body>知识点2-HTML标签教师通过PPT的方式讲解认识HTML标签。双标签单标签注释标签知识点3-HTML标签的属性教师通过PPT的方式讲解认识HTML标签的属性。介绍HTML标签添加属性的基本语法。<标签名属性1="属性值1"属性2="属性值2"…>内容</标签名>知识点4-HTML标签的关系教师通过PPT的方式讲解认识HTML标签的关系。嵌套关系并列关系知识点5-HTML文档头部相关标签教师通过PPT的方式讲解认识HTML文档头部相关标签。<title><meta>知识点6-任务2-1认识HTML教师通过PPT的方式讲解任务2-1认识HTML。带领学生对HTML文档基本格式、HTML标签等知识进行讲解，使读者进一步认识HTML。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（页面格式化标签、文本格式化标签、特殊字符、任务2-2HTML文本控制标签）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课不管网页内容如何丰富，文字自始至终都是网页中最基本的元素。为了使文字排版整齐、结构清晰，HTML中提供了一系列文本控制标签，如<h1>～<h6>、段落标签<p>等。本节课将针对页面格式化标签、文本格式化标签、特殊字符知识点进行讲解。三、新课讲解知识点1-页面格式化标签教师通过PPT的方式讲解页面格式化标签。标题标签段落标签水平线标签换行标签知识点2-文本格式化标签教师通过PPT的方式讲解文本格式化标签。介绍常用的文本格式化标签。通过案例演示常用的文本格式化标签。知识点3-特殊字符教师通过PPT的方式讲解特殊字符。介绍HTML中特殊字符的代码。知识点4-任务2-2HTML文本控制标签教师通过PPT的方式讲解任务2-2HTML文本控制标签。带领学生对HTML文本控制标签进行。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（<div>标签、常用图像格式、图像标签、路径、任务2-3HTML图像应用）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课浏览网页时人们常常会被网页中的图像吸引，巧妙地在网页中使用图像可以让网页更为丰富多彩。本任务将通过常用图像格式、图像标签、路径（绝对路径和相对路径）知识点，详细讲解HTML中图像的应用。三、新课讲解知识点1-<div>标签教师通过PPT的方式讲解<div>标签。介绍什么是<div>标签。通过案例演示<div>标签的用法知识点2-常用图像格式教师通过PPT的方式讲解常用图像格式。GIFPNG格式JPEG格式WebP格式知识点3-图像标签教师通过PPT的方式讲解图像标签。（1）介绍图像标签的语法。<imgsrc="图像URL"/>（2）通过表介绍<img/>标签提供了其他的属性。（3）alt属性（4）width属性和height属性（5）title属性知识点4-路径教师通过PPT的方式讲解路径。绝对路径相对路径知识点5-任务2-3HTML图像应用教师通过PPT的方式讲解任务2-3HTML图像应用。带领学习认识常用图像格式、图像标签、路径。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（任务2-4页面建设准备工作、任务2-5制作头部模块、任务2-6制作游记模块、任务2-7制作页脚模块）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课浏览网页时人们常常会被网页中的图像吸引，巧妙地在网页中使用图像可以让网页更为丰富多彩。本任务将通过常用图像格式、图像标签、路径（绝对路径和相对路径）知识点，详细讲解HTML中图像的应用。三、新课讲解知识点1-任务2-4页面建设准备工作教师通过PPT的方式讲解任务2-4页面建设准备工作。（1）页面分析（2）页面布局知识点2-任务2-5制作头部模块教师通过PPT的方式讲解任务2-5制作头部模块。（1）效果分析（2）模块制作知识点3-任务2-6制作游记模块教师通过PPT的方式讲解任务2-6制作游记模块。（1）效果分析（2）模块制作知识点4-任务2-7制作页脚模块教师通过PPT的方式讲解任务2-7制作页脚模块。效果分析模块制作四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五、六课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机一：（考察知识点为：任务2-4页面建设准备工作）形式：单独完成具体要求：页面分析页面布局上机二：（考察知识点为：任务2-5制作头部模块）形式：单独完成具体要求：效果分析制作模块上机三：（考察知识点为：任务2-6制作游记模块）形式：单独完成具体要求：效果分析模块制作上机四：（考察知识点为：任务2-7制作页脚模块）形式：单独完成具体要求：效果分析模块制作教学后记《网页设计与制作项目教程（HTML5+CSS3+JavaScript）（AI助学）（第3版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称项目3“网上花店”专题页制作计划课时8课时教学引入在网站中，专题页能够帮助用户深入了解商品的信息，增加用户在网站中的停留时间，并对用户转化起到良好的促进作用。“清悠花径”是一家通过互联网销售鲜花的网店，最近店主悠悠联系到小智，想请小智帮忙制作一个“网上花店”专题页。教学目标使学生掌握CSS样式规则的特点，能够区分HTML属性与CSS样式的写法差异使学生掌握CSS的层叠性、继承性、优先级，能够清晰描述并举例说明使学生掌握引入CSS样式的不同方式，能够在网页中引入CSS样式使学生掌握使用CSS样式控制网页中的文本外观的技巧使学生通过对CSS知识的运用，培养技术应用能力和创新能力使学生通过设置文本样式、图片排版以及颜色搭配等内容，提升对细节的把控能力以及审美能力使学生通过独立完成项目，培养调试代码的能力，形成独立解决问题的思维模式教学重点CSS样式规则CSS样式的引入CSS基础选择器CSS字体样式属性CSS文本外观属性CSS复合选择器CSS层叠性与继承性CSS优先级任务3-3CSS高级特性教学难点CSS样式的引入CSS定义背景颜色CSS层叠性与继承性教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一、二课时（结构与表现分离、CSS样式规则、CSS样式的引入、CSS基础选择器、任务3-1CSS核心基础）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课随着网页制作技术的不断发展，单调的HTML属性已经无法满足网页设计的需求。网页结构的情况下，增加了丰富的样式效果，极大地满足了网页制作人员的需求。在深入学习CSS之前，网页制作人员要了解CSS的基础知识。下面将从结构与表现分离、CSS样式规则、CSS样式的引入、CSS基础选择器知识点，对CSS核心基础知识进行讲解。三、新课讲解知识点1-结构与表现分离教师通过PPT的方式讲解结构与表现分离。介绍结构与表现分离介绍网页代码片段知识点2-CSS样式规则教师通过PPT的方式讲解CSS样式规则。（1）介绍CSS样式规则。选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}（2）介绍知识点3-CSS样式的引入教师通过PPT的方式讲解CSS样式的引入。行内式内嵌式外部式导入式知识点4-CSS基础选择器教师通过PPT的方式讲解CSS基础选择器。标签选择器类选择器id选择器通配符选择器知识点5-任务3-1CSS核心基础教师通过PPT的方式讲解任务3-1CSS核心基础。带领学生学习结构与表现分离、CSS样式规则、CSS样式的引入、CSS基础选择器。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三、四课时（CSS字体样式属性、CSS文本外观属性、CSS定义背景颜色、任务3-2CSS文本样式属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课学习HTML时，可以使用文本样式标签控制文本内容的显示样式，但是这种方式烦琐且不利于代码的维护。为此，CSS提供了文本样式属性。使用CSS文本样式属性可以方便地控制内容的显示样式。CSS文本样式属性包括CSS字体样式属性和CSS文本外观属性。本节课将针对CSS字体样式属性、CSS文本外观属性、CSS定义背景颜色知识点进行讲解。三、新课讲解知识点1-CSS字体样式属性教师通过PPT的方式讲解CSS字体样式属性。font-size：字号font-family：字体font-weight：字体粗细font-variant：变体font-style：字体风格font：综合设置字体样式@font-face规则知识点2-CSS文本外观属性教师通过PPT的方式讲解CSS文本外观属性。color：文本颜色letter-spacing：字间距ord-spacing：单词间距line-height：行间距text-transform：文本转换text-decoration：文本装饰text-align：水平对齐方式text-indent：首行缩进white-space：空白符处理text-shadow：阴影效果知识点3-CSS定义背景颜色教师通过PPT的方式讲解CSS定义背景颜色。介绍CSS定义背景颜色通过案例演示使用CSS定义背景颜色的方法知识点4-任务3-2CSS文本样式属性教师通过PPT的方式讲解任务3-2CSS文本样式属性。带领学生介绍CSS字体样式属性、CSS文本外观属性和CSS定义背景颜色。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五、六课时（任务3-4页面建设准备工作、任务3-5制作标题模块、任务3-6制作分类模块、任务3-7制作热卖模块、任务3-8制作页脚模块）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课学习HTML时，可以使用文本样式标签控制文本内容的显示样

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论